はじめに

デザインという作業の完了ラインは非常にあいまいです。ここまでやったら「いったん作業完了」という目標設定の基準が見えづらく、作っている本人にもその正確なゴールラインは見えていません。

このシリーズでは、エンジニアの方々が、さまざまなきっかけからデザインをすることになった場合の、デザインの完了の目標設定について解説します。そして、エンジニアの皆さんがデザインに関わる場合に目指す目標を「とりあえず動くデザイン」と勝手に命名して、その解説と実作業の勘所などを紹介していきます。

第1回目は、まずデザインとはどのような側面から成り立っているのかを考えてみます。

デザインはプログラムと違って終わりがない？

先日、千葉で開催された東京Ruby会議10という多くのRubyist（Rubyユーザー）が集まるイベントで、「Rubyistのためのデザイン講座」というワークショップに参加してきました。そのワークショップを開催したのが、「P4D」というプログラマとデザイナが集まるコミュニティなのですが、そのメンバーとして色彩理論の発表（再演）と配色の実習をさせていただきました。

その配色実習でRubyistから「デザインってどこで終わりかわからないですよね」という質問を受けたりしたのです。確かにデザインという作業は、最終的なインプットデバイスが人間の目や脳という、かなりあいまいなものを相手にした漠然とした作業です。そしてそのゴールライン、完了目標設定は非常にぼんやりとしていて見えづらかったりします。

でもデザインだけが特にそうかというと、プログラミングやコーディングも明確な作業完了のラインが引かれているわけではないと思います。

例えば、サイトの高速化などはとことんまでやり始めたら終わりがないと聞きます。だからといって、もちろん、無限にその作業を続けるわけにもいきません。ここまでできたら終わりという目標を立てると思います。先ほどのPCサイトの高速化などは、サーバーからのレスポンスが戻ってきて、ブラウザがレンダリングを終了するまでの時間が1秒を切れたら、いったんの区切り、などと仮の目標を立てる場合が多いのではないでしょうか。

それがプログラミングであったら仕様書にある機能のすべてが実装され、最初に設計して実装したテストがすべてGreenになれば、まずはゴールといえるかもしれません（私自身プログラマではないのでピントがずれていたらすいません）。

また、コーディングであればデザイナーから送られてきたデザインがひと通りコードに落とせて、仕様に記載されているブラウザでの表示に大きな崩れがなく、正しくリンクなどが動作していれば完成でしょうか。

デザインは目標を言葉にするのが難しい

このようにプログラミングやコーディングも明確な作業完了ラインはありませんが、デザインとの大きな違いは、だいたいの場合が「あれそれ」が終了したらというように、他の人間と共有できる言葉にすることが可能なことだと思います。一方、デザインでは「あれそれ」を他の人間と共有できる言葉にすることは非常に困難だったりします。

例えば、デザインの文字を読みやすくするための「余白を調節する」作業が完了していないデザインがあったとします。僕はそれのデザインを担当しています。

師匠「文字が読みにくいから、余白を調節してもっと読みやすくしなさい。そしたら完成」

僕「はーい」

僕「余白の調節できました！」

師匠「ふーむ、まぁいいだろう、ドンに見せて来い」

ドン「…」

ドン「うーん、ダメ。作り直し。ただしヒントはあげよう」

ドン「余白が少なすぎて、要素が紙面の外にこぼれてしまっているよ」

僕「そ、そうなんですか。作り直します」

僕「ドン、再度調整してみました！」

ドン「うーん、まだダメ。やり直し」

…以降、しばらく同じことの繰り返し

こんなことが簡単におきてしまいます。「余白を調節する」、「もっと読みやすく」や「要素が紙面の外にこぼれてしまっている」という表現は、複数の人間が共通の認識をするにはあいまいすぎます。これは「サイト高速化で1秒を切れ」ではおきえない現象だと思います。そしてこのやり取りは、私のデザイン修行時代の日常茶飯事でした。

私個人の考えですが、デザイナーがプロとしてのデザインを習得するためには、この不毛に見えるやり取りが今でも必要だと思っています。けれどエンジニアがデザインに関わる場合には、このあいまいさが逆に壁になってしまうと思っています。「余白を調節する」という、一見言葉としては他者と共有できそうな表現ですが、その言葉が意味する完了目標設定ラインは人それぞれで、ずいぶんと違ったりするものです。

エンジニアのための目標設定

エンジニアがデザインに関わるきっかけは、いろいろあると思います。

• プロジェクトのスタートアップでプロトタイプを作らなければならないが、専属のデザイナーがまだいない
• 管理系のアプリケーションの開発で必要な画面が管理画面のみなので、デザイナーがいない
• プログラムやマークアップができるので自分でWebサービスを作ってみたい
• もともとマークアップエンジニアとして就職したが、いつの間にかデザインまで作業に含まれていた

などなど数え始めたらキリがなさそうです。

さまざまなきっかけがあると思いますが一様に言えることがあります。いざデザインを始めようとしたときに真っ白な画面を前にして「何から始めたら…」の状態になってしまったノンデザイナーであるエンジニアにとって、まず大事なのは目標とすべきゴールラインの設定が、完全な闇の中ではなく、ぼんやりとでも見えていることだと思います。

デザインという作業は数値化が難しく、最終的な完成判断を主観的かつ視覚的な部分に頼らざるをえないため「これで完成」というゴールラインが非常にあいまいです。そしてそのゴールラインの見極めも難しい部類の分野なのではないかと思います。

本業がデザイナーならば「納得がいくまで」という、これまたあいまいなゴールライン設定もひとつの回答です。ですが、本業が別に存在する場合に、そのゴールラインは実際の作業時間を考えると実現不可能になりやすいです。また、妥当なゴールラインを設定できなかったために「なにか違う」という理由でデザインのやり直しを繰り返し、無限に作業の終わりが見えないという状態になるもの避けたいです。

さて、前置きが長くなってしまいましたが、連載前半では、このようにあいまいになりやすいデザインの完了目標設定に対して、さまざまな理由によりエンジニアがデザインをしなければならなくなった方々の目標設定の考え方について考察してみたいと思います。そして、エンジニアがデザインを実際にする場合の目標設定を「とりあえず動くデザイン」と勝手に命名して、その最低限の役割を果たす方法について考えていきます。

デザインが持つ3つの側面

デザイン（今回は主にWeb媒体を指す）というとアートとも似た、とてもとらえどころのない特殊な作業と感じているかたもいると思います。確かに一部のデザインはアートのそれに近い作家性を全面に押し出した、いわゆる「作品」になっているものも少なくありません。この場合は「その作家の作品」であるということ自体が重要だったりするので、今回の話には含めません。

一般的な商業デザインのほとんどは、何かの目的を明確に対象者へ伝達するために存在しています。車の広告であれば、その車のブランド感や価格帯、性能やバリエーション。ECサイトであれば、商品のラインナップや詳細、製造メーカーのリンク、クチコミなど……それらの大量な情報を整頓して順序を作り、「かっこいい」「かわいい」という表現に置き換わるような視覚的な要素や体験を付加して、効率的に情報を伝達しようとする役割を担っています。

そのデザインの役割の中でも、普段デザインと聞いた時に想像する「かっこいい」や「かわいい」に置き換わるような感覚的な表現部分について、それが結果的にその形になっている理由や原因を説明するのは困難な作業です。ですが、情報を伝達するために存在しているデザインの場合は、それを構成している要素を分解してみると、感覚的な部分とはまた違った側面が見えてきます。

情報を伝達するために存在している一般的なデザインを分解すると、大きく分けて以下の3つの要素を駆使していることがわかります。

• 審美的な側面
• 文字情報的な側面
• 時間的な側面

それぞれを簡単に解説してみたいと思います。

文字情報的な側面

文字情報的なデザインの側面は、審美的な側面とは対照的に、整頓された文字情報を読ませることによって、サイトの構造・機能、情報を正確にユーザーに伝達しようとします。

ユーザーは文字情報を理解するために、大量のエネルギーを必要とします。そのためユーザーにサイトの情報をしっかりと理解してもらうには、情報伝達部分をなるべくストレスの少ない状態に保ち、ユーザーのエネルギーをなるべく消費させないようにするのが理想です。サイトの全容理解まで何十ものステップを必要とするものや、複数の情報をグルーピングしているラベルの文字情報が的を得ていないとストレスは増大します。

靴カテゴリーの中に「店舗」や「お問い合わせ」があったり、店舗情報に「送料」が含まれていたりと、ラベルの内容にそぐわない情報が紛れ込んでいて、わかりにくい。

コンテンツを理解しようとしたときのストレスへの耐性は、そのコンテンツへの思い入れや重要度・必要性などによって個人差があると思います。ですが、ユーザーのストレスが高まった場合、ユーザーにとって、そのサイトによほどの価値がない限り、だいたいの場合が離脱してしまいます。

審美的な側面

審美的なデザインの側面は、そのサイトのブランド感やターゲット、項目の内容などを文字情報を読ませることなく、色・図形・写真などを駆使して直感的にいち早くユーザーに伝えようとします。※ここでは視覚的な刺激に絞っています。

和紙のようなテクスチャ、水墨画風の松などを配することによって、和風で派手さを抑えた静かな雰囲気が伝わる。

基本的に文字情報の理解を挟まないので、そのコンテンツが目に入った瞬間に高速に行われます。この審美的な側面の伝達が最適に行われると、ユーザーにとってそのサイトが自分にあったターゲット設定なのかの判断や、アイコンやピクトグラムの場合にはそのサインの意味を、ビジュアルがユーザーの好んでいる雰囲気に近かった場合はコンテンツへの感情移入がスムーズに行われます。

テキストよりも、アイコンとテキストが並ぶことによって、より直感的に理解できる。

また、そのサイトに対して感情移入が強くなっていれば、サイト離脱の原因となりやすいページ遷移の難解さや、文字の内容理解で発生するストレスに対しても、通常よりも長く耐える可能性を生み出せます。

時間的な側面

時間的なデザインの側面は、最近、UX/UIという言葉で浸透しているインタラクティブな要素を駆使し、時間の経過を表現します。

審美的な要素を追加したリッチなボタンなどをよく見かけますが、単純なテキストリンクのホバー動作なども、ユーザーがボタンにカーソルをのせることで、ポタンが時間にともなって変化するので、これも時間的な側面と言えます。

ユーザーがボタンにカーソルをのせると、サイトの時間が進み、ボタンの状態が変化する。アニメーションはデザインの時間的な側面のひとつ。

このように、静止したひとつの状態では表現が難しい「状態の変化」を時間軸を利用することでユーザーが直感的に理解しやすいものにして、審美的なデザイン・文字情報的なデザインがより伝達されやすくするのを補助します。

おそらく一番身近な時間的な変化のある要素は、リンクのホバー時の動作でしょうか。また、スマートフォン端末などではフリックによるページ遷移などの動作も時間とともに変化するデザインの代表格です。コンテンツの状態変化をアニメーションを使い、その時間ごとの状態を表現することで、「A」の状態から「B」の状態へ変化したことを直感的にユーザーへ伝えます。

現在ではユーザーが実際の体験としてすでに学習済みの動作を再現することで、ユーザーの学習コストを下げつつ、直感的な動作へつなげていることが多いように思います。

この時間的な側面は特にですが、人間が成長する過程で体験・学習してきた物理的な法則から離れるほど扱いが難しく、ストレスの高い操作になりえます。

例えば、モバイルのリスト状UIをタップした場合に、通常の遷移が右から左へスライドしているにもかかわらず、その部分だけのリスト遷移アニメーションが、左から右へスライドしてしまう場合などはストレスが高いです。

通常のリスト遷移と逆方向へスライドしてしまう。予想と違う動き（時間的側面）をするとストレスが高まる。

まとめ

デザインを大きく分解してみると、たった3つの要素と感じられるかもしれません。しかし実際に作ろうとしているサイトの項目や内容ひとつひとつに、審美的な側面や文字情報的な側面が存在します。

また、それぞれの項目や内容が同時に表示されている他の項目との兼ね合いで、さらにそこに審美的な側面と文字情報的な側面のバランスが発生します。加えて、そこにボタン操作などの状態の変化が絡む場合は、時間的な側面とのバランスを考える必要がでてきます。

このように多くのバランスを調整した上で、最終的には全体でひとつのサイトとしてのまとまりを保たなければならないため、一度に提供しようとする情報量が増えるほど、それぞれのかかわり合いが増えてしまい、デザインの難易度は高まります。

エンジニアがデザインをする場合には、なるべくそのデザインの難易度が上がらないようにするために、3つの側面のかかわり合いをなるべくシンプルに保つのがポイントになると思います。

次回は、この3つの側面について「シンプルさ」を保てる程度の目標を設定してみましょう。それが「とりあえず動くデザイン」なのです。