こんにちは、代表の藤原です。

私は色々な仕事を兼務しているのですがその中でも最もキャリアのあるデザイン作業には特に思い入れが強くあります。

以前は会社員としてアートディレクターをしていたこともあり若いデザイナーにデザインを教えてきました（生意気ですが…）それを活用している人もいれば全く違うメソッドでデザインをする人もいます、それはそれで全く問題ありません。ここで紹介するのは私の独学と上司や先輩から見聞きしたことを独自にカスタマイズした独自のデザイン理論になります。

デザインと一口に言ってもWebデザイン、グラフィックデザイン、プロダクトデザインなど数多くありますので今回はWebデザインを基軸で考えますが現在弊社でお仕事させていただいているアプリなどにも転用できる考え方なのでUIデザインのお話しでもありますがタイトル的にはSEOを加味してWebデザインとしてあります。

少しこの記事は長くなりそうなので5章に分けてご紹介していきたいと思います。私の勝手に考えた手法ですので異論はもちろんあると思いますがそのあたりは暖かく、熱く見守って下さい。

UIデザインをするための5つの工程

ロード第1章　スタディ
ロード第2章　モックアップ
ロード第3章　仮組デザイン
ロード第4章　ブラッシュアップ
ロード第5章　なんでもないようなことが幸せだったと思う

 大きく分けて5つの工程に分けてデザイン手法を解説していきたいと思います。図のように左から右に向けてデザインを進めて行きます。今回は「ロード第1章　スタディ」についてご紹介させていただきます。

ロード第1章　スタディ

思考するだけの時間を意識して作る

まずは実際のデザイン作業に入る前にいきなり手を動かすのではなくしっかり脳を使って思考フェイズを作ることを意識しましょう。これは車やバイクで言うところの暖機運転のようなイメージです。

アイドリング→スロットル→フルスロットル→クールダウンをイメージする

古い(アナログな)エンジンでイメージするといいかもしれません。まずは暖機運転(アイドリング)でちゃんとエンジンが回るようにじっくりエンジンを暖めます。走り始めたらいきなりスロットルを全開にすると危険ですよね、徐々にスピードを上げていきフルスロットルで運転しても事故をしないようにしましょう。全開で走ったらエンジンがものすごく熱くなっています、昔のエンジンであればすぐにオーバーヒートしてしまいます。熱くなった頭では冷静にデザインを見ることができません、冷静になって要件に沿っているかを見極めましょう。

要件を整理する

まずはディレクターやプロデューサーなどを交えたブリーフィングからスタートすることが一般的かと思います。デザイナーがデザインで達成しなければいけない要件を洗い出しましょう。

例えば上記の様な要件が洗い出されるすると使用する色のイメージや写真、フォントのサイズ設定、レスポンシブ故の変形に適したパーツのトンマナ、などサイトの目的からデザインの方向性を絞っていきます。その際に機能面からもデザインを考える必要があります。

その辺りをどのように絞り込んでいくかは書いているとそれだけで記事ができてしまうので敢えて書きません、例として下記のようなサイトなどを参考にして自分のなりにデザインロジックを固める訓練をしてみてください。

・イメージスケールを使ってWEBサイトの配色を論理的に決める方法

・マルチデバイス対応！Webサイト構築の方法

・レスポンシブWebデザインを学びたい人が読むと参考になるスライド

・レイアウト｜伝わるデザイン

競合他社やイメージに近しいデザインをピックアップする
要件定義後絞り込んだイメージを具現化しているようなサイトを探し参考にしましょう。その際に役立つのが今や巷に溢れかえるポートフォリオサイトです、これらは主にクリエイターが有志で作ったサイトが多く国内・世界の優れたUIデザインのショーケースのようになっています。中にはカラースキームや企業形態、レイアウトなどから絞り込みがついているサイトもありますのでそれを使わない手はありません。

・WEBデザイン参考まとめサイトのまとめ

上記で挙げたようなまとめサイトからイメージにあうようなサイトをこれでもか、というくらいブックマークしまくりましょう（沢山ブックマークしただけで安心しないように）また日頃からポートフォリオサイトをチェックしたりRSSで最新のデザイン情報を取得しておけば「いざデザイン！」となった時も焦らずにすみます。デザイン歴が短い人は特に見て触りまくって「このUIデザインの何がいいのか」ということを自分なりに理由付けしていきましょう。そうすることでデザインをしている時もブレにくいですし、提出したデザインに対してもきっちりと自分の考えを相手に伝えやすくなります。

真似はNG、参考はOK
見ていくなかで気に入ったデザインのものがあると知らず知らずのうちに真似をしてしまうことがありますがこれは要注意です。マージンの取り方、文字の使い方、ビジュアルのレイアウトの仕方、そういった部分に対して上記で絞り込んだイメージにあうものをあくまでも参考にするようにしてください。真似することで上がるスキルもありますがデザイナーとして失うものも大きいと自覚をすることが大事です。

ロード第2章では「モックアップ」について書かせていただきます。しばらくお待ち下さい！！