サイトを設計する上で、何をどういう順番で考えればいいか？

デザイン初心者だった私は全くわかりませんでした。

デザイン事例本には出来上がった素敵なサイトはありますが、どういう考えでそこに至ったのかわからない。

一応デザイン関連のキーワードとして聞いたことあるのは、色、フォント、配置、設計、ペルソナ、シナリオ、iOS、CSS、HTML、javascript、レスポンシブデザイン、リサーチ、ワイヤーフレーム、プロトタイプ、マテリアルデザイン・・・・などなど。

よく意味の分からないものも、その粒度もごっちゃまぜ。

いざ作る、となったときに一体何から手をつければいいのか、指南がありません。

私は全くデザイン未経験の状態からデザインチームに志願して飛び込みましたが、

当時は部門がむちゃくちゃ忙しく、うっかり質問もできないぐらい殺気立っていたので独学するしかありません。

で、サイトや本に頼るわけですが、これがまた、出会えない。そもそもないのか探し方が良くないのかわかりませんがとにかく見つからない。

わずかなスキを見つけて同僚に聞いてみるも、「もともと興味あったんで・・」とか「本とかサイトとか漁ったりしてなんとなく・・」みたいな答え。業を煮やし、テンパった私はデザインチームのリーダーAさんに聞いてみました。

私「Aさん、学生のときMEN’S NON-NO読んでました！？」

Aさん「まあ、はい。」

私「やっぱそうか・・。オシャレじゃないとデザインできないんだ・・・。」

（※実話です。）

ほんとに、そんな風に思うくらい、上達の手がかりがなく絶望的だったんです。

本屋でメンズノンノ立ち読みまでしたんです。

でも、ノンノ見てわかりました。

「そうじゃない。」

サイトデザインに必要なのは、

”ルーズな印象のカーディガンと崩れすぎない印象のローファーを合わせたカジュアルコーデ”　

とかじゃないって。

そこから、およそデザインが関係ありそうな本を漁りまくり、ちょっと高いけど役立ちそうなやつは買いまくり借りまくりました。

同僚が交わす言葉、デザイン検討のときに出てくる引用、指摘内容をメモしまくり調べまくり・・・

そうやってあがくこと約２年。

デザインのレビューしてて、「あ。的を射たこと言ってる、私」って思えた瞬間が来たのです。

そこから、徐々に、それなりに、仕事ができるようになっていきました。

視点が考えが、大きく外れなくなってきました。

なにをどう考えればいいのか、その骨格が見えてきたのです。

デザインの基本プロセス

数々の書と、デザインの実務と、成功と失敗から練り上げた私なりのデザインプロセス。

それが、こちら。

STEP1 それは何か

何をする画面か。何をする機能か。それらに一言で答えること。

STEP2 誰が何に使うか

どんなニーズがあって、誰が、何をしようとして、使うのか。リアルにリアルにその場面を想像し書き起こす。

STEP3 前提条件

考えを進める上で前提とすべき制約条件や特徴。主要なものを挙げておく。

STEP4 思考と操作

ユーザーの思考、行動、対応する画面の要素、反応を描く。シナリオ、絵コンテといったたぐいの、一連の操作がわかるアウトプット。

STEP5 適した表現

ユーザーが迷わずに理解、操作できるように、画面の構成、要素の配置、色やサイズ、文言を詳細に決める。いわゆるユーザーインターフェース。

この5ステップです。もうこれが王道。順序も含めて。それぞれについて解説します。

STEP1 それは何か

検索する画面。

計算を実行するボタン。

入力候補を示すリスト。

「それ何？」という素朴な質問に、明解に答えること。これ大事です。

これが定まっていると、軌道を大きく外れることはあまりありません。

デザインが定まらない、表示させる要素が決まらない、構成にどうも違和感がある。

一生懸命考えて、それなりに理屈は通ってるのに、なんかへん。

こういうときは、「ちょっとまって。そもそもこれって要するに何？」と確かめます。

目的が複数混じっていたり、そもそも必要のないものを作ろうとしていたりすることがあります。

そういうときは１００％、最終的なデザインが定まりません。どこかでおかしくなるのです。

STEP2 誰が何に使うか

ユーザーが求めていること、仕事としてやる必要があること。

「こういう機能が便利では？この構成のほうがシンプルで使いやすい！」

そういうことを考える前に、誰が、何をしたくてその画面を開くのかをきっちり描きます。

画面を開くことすら前提とせず、そのタスク、最速でやるなら？システムを使わないでやるとしたら？

と描き、そこからスタートします。

STEP3 前提条件

いくらばっちりなページ設計ができても、

「あ、PCじゃなくてモバイルなんだよね。倉庫で使うから」

「いや、もうシステム自体はできてるからそんな大幅な設計変更そもそもできないんだよね」

などということが起きます。

時間も労力も無駄。精神エネルギーも消耗します。

利用する状況、システム的な制限など、依頼者や発注者としては当然と思っている前提は得てして省略されてしまいがち。

パソコンが起動しない、とサポートセンターに電話すると、オペレーターさんが

「電源コードはささっていますか」

とあったりまえなことを聞いてきます。

でも、あれが重要なんですよね。その前提を合わせないとどんなに会話を重ねても無駄。

デザインを進めるための土台となる前提条件の認識あわせ。

あまりデザインの本で語られることのないエリアですが、実際のところ、超大切です。

STEP4 思考と操作

いよいよ実画面の設計に入っていきます。

ここで大事なのは、画面を先に描かないこと。

ユーザーの思考「〇〇したい」が先。「〇〇画面を開く」が後。

すでに画面ができていて、そこに機能追加するときなどに陥りがちな、画面ありき思考。

これマズイです。

そのやりたいタスクによっては、画面に来ないのが正解かもしれない。

でも画面から書いてしまうとそれに引きずられ、ゆがんでしまうのです。

やりたいこと、考え

それに対応する要素

それを配置する画面

この順番で考えていきます。

STEP5 適した表現

要素と配置が見えてきたら、表現を考えます。

メッセージの位置

フォントサイズ

色

余白

コンポーネントの種類

こういったUI（ユーザーインターフェース）とその表現は、やりたいことと構成の上に立って初めて成り立ちます。

実際はUIにしてみることで操作が定まり、それによって構成のほうに修正を加えるということもあり、STEP5と4は行きつ戻りつしながら最適解を模索しながら進みます。

どうしてもデザイン初心者のうちはUI表現に目を奪われ、思考もそこからスタートしてしまいがちです。デザインとは美しい表現とかスタイルではなく「設計」なのです。

補足

設計が大事。UIは後。

ここまでそう熱弁してきましたが、実際のところどうしてもUIに気を取られてしまいます。

私もそうでした。

そうなりにくくするコツがあります。

「先にUIのバリエーションを頭に一通り叩き込んでおくこと」です。

初心者デザイナーは経験も理解も浅い。目に飛び込んでくるのはUI表現。

となればそこに気を取られてしまうのは当然です。吸収・理解しようとしますから。

初めて見るようなUIがバン！と目の前に出てきたら、そりゃあ思考もそれ一色になります。

で、「このUIって・・・」と考え始めてしまう。

もう負け戦です。

そうならないようにするには、

「まあ大抵のものが出てきても、知ってる範囲に収まるだろう」

「とんでもないものが出てきたら、それは何かがおかしいはずだ」

という自信を持つこと。

それなしに飛び込んでも流血の惨事です。

（私はだいぶ流血しました。よく生き残ったと思います。できることならもちっとスマートに成長したかった・・・。）

で、その方策というのが、

画面レイアウトのラインナップを知る

コンポーネントのラインナップを知る

です。

それぞれのレイアウトには目的があり、同じように見えるコンポーネントも実は細かく目的と用途が違ったりします。

が、細かいこといいんで、「あーそれ見たことある」という状態に一旦、なるのです。

なってから、「実はこの目的は・・・」と理解を深めればいいと思います。

ただ注意。そのために浴びるようにいろんなUI、デザインギャラリーを見るのは非効率だし混乱します。

たとえばおすすめなのがSAPのデザインガイドライン。

画面レイアウトってどんな種類があるのかをざっくり把握できます。

2018.06