デザインセンスを磨く

ウェブ・UIデザインは、ウェブサイト作成やプログラミングにおいて避けては通れない分野です。

苦手な方でも上手にデザインするにはどうすればいいでしょうか?ヒントは、「優れたデザインの真似」にあります。

優れたウェブデザインを探す

ウェブデザインを勉強する上で、人気のあるサイトを参考にしない手はありません。人気サイトはデザインが優れているゆえに人気を獲得しているのであり、そういったウェブサイトをいつも見たり触れたりすることで、自身の感性も養えます。・Awwwards・81-ウェブ.com・MUUUUU.ORG・ズロック・WPデザインギャラリー・I/O3000・CSSWinnerなどのウェブデザインをまとめたサイトでは、毎日無数に作られているウェブサイトの中から優れたデザインのものを一覧で見ることが可能です。

他のすべてのデザイン業界と同じく、ウェブサイトのデザインにもトレンドや傾向といったものがあります。全体の配色やフォント、フォントサイズ、レイアウト、UI(ユーザーインターフェース)、写真のアスペクト比(≒縦横比)など、最近のウェブサイトに共通するトレンドを探してみましょう。最初は詳しいことが分からなくても構いません。優れたデザインのウェブサイトをとにかく眺めて、デザインセンスを吸収することが重要です。特に、海外で流行っているウェブデザインは後から日本に伝わってきます。そういったトレンドを先取りしておけば、自分でウェブサイトをデザインする際にイメージが頭の中に残っていて、最先端のウェブデザインを自分なりに表現できるかもしれません。

優れたウェブデザインには必ず目的があります。他に情報を詰め込むだけであれば誰でもできます。しかし、利用者を意図的に誘導したり、最も重要な情報を効果的な仕方でプロモーションするのには工夫=デザインが必要です。上記のようなランキングサイトでウェブデザインを見る際は、「デザイナーが何を目的としてこのサイトを作ったのか」を考えてみましょう。デザイン表現されたウェブデザイナーの頭の中を覗いているかのように意識します。同じ目的があっても、同じ方法でウェブサイトが作成されるわけではありません。

デザイナー自身の個性やその時々のトレンドを取り入れながらウェブサイトは作成されます。デザインに秘められた目的を見るように努めることで、ウェブデザインについて何も知らなくてもデザインの傾向を理解したり、それなりに感性を養っていけるはずです。

UIを知る

ご存知のように、UIとは「ユーザーインターフェース」のことです。ユーザーが直接触れる画面やシステム、あるいはデザインを指しています。ユーザーインターフェースをデザインするとは、ユーザーの使い心地やシステムに対する評価を直接左右し得る、重要なデザインを手がけていることになります。サービスがどれほど優れていてもUIの使い勝手が悪ければ、そのサービスが高い評価を受けることはないでしょう。

そのため、優れたUIを採用したウェブサイトやアプリ、さらには携帯端末やゲーム機を触ることで、使いやすさとは何なのかを肌で実感することが必要です。使いやすいUIに触れた際には、「ユーザーをこう動かしたいからこうデザインしたんだろうか」「順序や視線の動きをこうコントロールするためにこう工夫したのかもしれない」等と、やはりデザイナーの目的に立ち返って分析してみることが重要です。

模倣して感覚でバランスを理解しよう

さらに、可能であれば同じデザインを真似てプログラミングしてみましょう。完全に全く同じものを作っても良いですし、似たようなアイデアやデザインを取り入れてみても良いでしょう。優れたデザインを自分の手で実際に真似てみることで、デザインのバランスや全体の作業量の感覚を身に付けるのに役立ちます。優れたWebデザインやUIデザインを言わば“師匠”とすることで、そのデザインに隠された優れたアイデアや発想を観察していきます。そのためには、やはり目に入れ実際に触れる情報量を増やす必要があります。

使いやすいウェブサイトやスマートフォンのアプリ、親しみやすい見た目のパッケージや操作しやすいゲーム、見た目に心地よく興味を惹かれる広告や雑誌などでさえ、自分のデザインに取り入れられるアイデアで満ちています。車の内装やエレベーターのボタンでさえ、UIに関して言えば同じ分野です。そのようなところで、使いやすさやユーザーを誘導する方法についてひたすら分析してみましょう。自分なりにデザイナーの目的を推察できたら、自分のデザインに模倣を取り入れます。そうすることで、少しずつ他の要素を学びながらオリジナリティーのあるデザインへと近づけるでしょう。

特に、雑誌の構成は参考になります。文字の大きさや配置、フォント、見出しや本文のバランス、写真のアスペクト比(≒縦横比)などは、そのままウェブサイトに応用できるアイデアが含まれています。