さいしょに
新人教育用のメモです。僕自身くそへっぽこwackデザイナーなので、おかしい点が多々あると思います。。。
指摘していただけると幸いです。
そもそもデザインってなんだ？
wikipediaを見てみると
デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。また、デザインとは具体的な問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。表現することと解される。
とある。要は何かを問題解決のための計画といったところなのだろうか？
よく言われる話だが、デザインとアートは違う。アートとは自分の個性を引き出したり、自分の考え・趣向をそのまま映し出すものだ。しかしデザインは違う。何か 問題 があってそれを 解決 し 計画 を練るための行為である。
Webデザイナーであれば、その問題とはクライアントさんの抱える問題であったり、その商品・サービスをいかによく見せるか、といった問題となる。
私がみる限り、ここをしっかりと認識してない人が多い気がする。どうしてもhtml/cssを習いたてだと、コードを書くことのみに集中してしまって、計画を立てることをないがしろにしてしまう。
ところで私の友達に建築家が何人かいるのだが、彼らはよく模型（実際に作る建物のミニチュア？みたいなもの）をよく作っている。そして彼らはいつも忙しそうに模型を作っているのだが...
彼らに『やっぱり模型を作るの大変そうやなあ...』と聞いたことがある。そのときに『模型を作るのはそんなに大変ではないんやけど、模型を作る前に設計する（図面を引いたりするのだろう）のがすごく大変だわ。』と答えていた。
なるほど、建築でも実際に作ることよりも設計の方が大事らしい。そういえばどこかで、不適切なwebデザインは見た目が汚くなるだけだが、不適札な家のデザイン（設計）によって、柱の位置を間違えたら大問題になる、と聞いたことがある。(ちなみにデザインとして一番長く歴史があるのは建築のデザインで、デザインの本を読み漁っていくと、最終的には人文系の建築のすごく難しい本に行き当たる...笑)
とにかく何かをデザインするとは 計画・問題解決 こそが本質なのである。
Webサイトを作成するには、しっかりと計画をすることが大切とわかった上で、どのように計画していくのか見ていこう!
1.問題設定をし、それをどのように解決するか明らかにする
まずはどのような問題に直面しているかを整理する。クライアントさんから話を聞き出し、どのような情報を伝えたいのかを明らかにする。
2.ターゲットを定める
『どのような人に見てもらいたいか』『どのような人がみるのか』 を定める。これによってデザインの方向性がある程度決まる。
例えばInstagramとFacebookの違いを考えてみよう!
インスタとFacebookは、本質的に機能の違いはほどんどない。どちらも画像をアップロードでき、SNSで交流できる。
しかし、恐らくインスタは若い女性をターゲットに設定したことで、『画像を中心とした、見た目が可愛くておしゃれで、誰でも簡単に使えるように機能を削ぎ落とした』SNSとなった。
一方、Facebookは、恐らく社会人や知識人をターゲットに設定したことで、『文章やニュースフィードが中心で、見た目は控えで畏まった、機能をできるだけ追加した』SNSとなった。
どちらもきちんとターゲットを定めることで、そのターゲットに沿ったデザインとなっている。
少ない機能でおしゃれなInstagram
高機能でかしこまったFacebook
よく間違える点としては、PC版でいくら美しく見えるサイトを作ったとしても、見てくれるユーザーが基本的にスマホでしか見ないならば意味がないということだ。しっかりとターゲットを意識したデザインをしなければならない。
3.データ集め
ユーザーに情報を提示する前に、自分自身がそのサービスやモノについてよく知る必要がある。基本的に知りすぎることで困ることはないので、たくさんクライアントさんにお聞きしよう。
このとき注意したいのは 『この商品の強みは何か？』『弱みは何か?』 を聞き出すことだ。強みは前面に押し出す必要があり、弱みはできるだけ隠す（一概にそれがいいとは言えないが）必要があるだろう。
また、Webサイトには画像が必須なのでできるだけ画像をもらうようにすると良い。
4.なんの情報を載せるか
データを集めたあとはそれを取捨選択する。基本的にユーザーがWebサイトに滞在してくれるのは数秒なので、厳選した情報だけを載せよう。その際 『どのような情報を載せるべきか？』は、一番最初に『設定した問題を解決できているか』を元に考えよう。
例えば、『ユーザーに正しく商品の情報を知ってもらうこと』として問題を設定したのにも関わらず、会社の情報をたくさん乗せても問題解決には繋がらない。最初に設定した問題を元に、情報を選択していこう。
初心者は無駄な情報をたくさん乗せがちな気がするので、一度よく考えてこの情報は本当に必要かどうかを意識すると良い。
また、このときクライアントさんと対立する場合があるが、自分の立場は明確にした方がいい。もちろん仕事を請け負っているので相手の意見を尊重すべきだが、基本的に自分の方がデザインについてよく知っているし、しっかりとクライアントさんと議論した上で情報を選ぶようにしよう。
5.競合調査
だいたい同じようなことを考えている人は世界にごまんといるので、似たようなWebサイトを調べる。
このとき注意したいのは、ただ綺麗か汚いかの二元論で考えるのではなく、そのWebサイトを作った人が どのような意図でデザインしたかを考える ことだ。
その人の考えを汲み取ることで、自分が見落としていた点が見つかるはず。
6.ワイヤーフレーム(下書き)
紙に書いてもいいし、パワポかkeynoteかSketchでもいいので、デザインを下書きをする。
下書きを書き直すより、コードを書き直す方がはるかに大変なので、本物とほぼ同じ想定で下書きをかく。このときどうすればいいかわからなくなったら、『ターゲットに沿ったデザインか』 を考えるか、競合調査でみたサイト を参考にすると良い。
7.コード
コードをカキカキ。初心者はここを重要視しがちだが、実際そこまで重要ではない。ただ下書きを見ながらコードを書けばいいからだ。（もちろん素晴らしい下書きがあることが前提だが）
注意したいのは、画面サイズを変えたり、いろんなブラウザで見たり、スマホで見たり、 色々な環境で見ること だ。自分の画面で綺麗に写っていても、ユーザーの画面で綺麗に映らなければ意味がない。
まあ、よくわからなければエンジニアに投げよう。
8.おしまい
お疲れ様でした。これが私のデザイン（計画）のやり方です。あとは正直経験だと思います。優れたデザイナーは本当に様々な引き出しを持っていて、『そういう魅せ方もあるのだなあ』と気付かされます。
いろんな引き出しを身につけるためには、 普段からデザイナーの目を持って生活 して見ましょう。例えば映画やドラマを見たり、ディズニーに行ったりした時に、それを作ったデザイナーはどのように考えているのかを汲み取ってみましょう。意外と面白いかも。優れたデザインほど、しっかりと考えられています。
それと くそデザインを説明できる ようにしましょう。私も普段からくそみたいなデザインに出会ってイライラすることがあります。その時にただ『クソだなあ』と感じるのではなくて、『このデザインは●●な人たちが使うだろうに、●●なデザインだからクソだ。』『私は●●を期待してこのボタンをクリックしたのに、関係ない●●の情報が出てきたからクソだ。』と考えるようにしましょう。これであなたのデザイン力は一段とアップします。
理論がわかれば次は実践を。