皆さんは、Webサイトを見ていて自分がほしい情報が見つからない。なんて経験はありませんか?
Webサイトに掲載されている情報が多く、ごちゃごちゃしていると、どこから読めば良いのかわかりません。
そこで、Webデザイナーは読み手(ユーザー)のことを考えてデザインをする必要があります。
読み手に必要な情報を素早く伝え、他のページに逃さないデザインをしましょう。
今回は、Webデザイナーに向けて改めて基本となるレイアウトやデザインの見せ方というのをご紹介しようと思います。この記事を読んで、デザイナーになろうと考えている方はぜひ勉強してください。
デザイナーとは
デザイナーは、デザインの各要素を集め全体を組み立てることをします。
また、これに加え、イメージ写真や色、タイポグラフィーなども含まれていきますが、最近はこれだけではなく、空間づくりや細かい装飾までも行うのがデザイナーさんの仕事になります。
単純に、写真や文字を並べるだけの仕事ということでは無いです。
デザインの中にも細かい工夫をしていかなければいけません。
広告デザインやWebデザインもそうですが、注意深く考え検討された構図には、ユーザーの視覚を誘導し無駄に考える必要のないレイアウトや工夫がなされています。
皆さんも電車の中吊りなど細かくチェックしてみてください。
では早速視覚を誘導するためのテクニックをまとめましたのでご紹介します。
注目してほしいポイント「フォーカルポイント」を決める
このフォールカルポイントはユーザーをデザインに注目させるためにまず最初に見てほしいところを指します。
訪れたユーザーが数秒で注目できるところを強調し引きこむ必要があります。
引き込むために、いくつかポイントがあります。
・サイズ(文字の大きさやイメージ写真の大きさなど)
・形
・色
・配置場所
情報を整理し、バランスを整えよう。
フォーカルポイントが決まったら、残りのレイアウトを整理しましょう。
ここでは、誘導するためにレイアウトを整えることが大切です。
デザインの配置をランダムにするのではなく、まとめより魅力的な見た目にして行きましょう。
いくつかそのテクニックをご紹介します。
■グリッドを整える
グリッドに合わせてデザインの要素を整えることで、情報がすっきりと整理することができ、読みやすさにもつながります。
レイアウトパターンは下記のサイトで紹介されていますので、参考にしてみてください。
CANVA(https://www.canva.com/features/design-grid/)
■三分割法
写真の構図で最も使われているレイアウトになります。
皆さんも聞いたことがあるのではないでしょうか。
よくレイアウトの中心にフォーカルポイントを配置しているデザインがあります。
注目はしやすくなりますがとても飽きやすくなります。
そこで、三分割法を取り入れ、バランスよく見せダイナミックな表現をしてみるのはいかがでしょうか。
下記に三分割法を用いたデザインがありますので参考にしてみてください。
読み手の視線を、デザインで誘導
Webデザインでは、2つの誘導があります。
それは、Z型とS型と呼ばれるものです。
Z型は、人が左から右に読む癖を上手く利用した誘導方法で、多くのWebデザインでこのレイアウトを使っているところがあります。
S型は、自然と流れるような視線の誘導を行うことで、ユーザーに無駄なく情報を伝えることができます。
こちらは、ランディングページなどに多く使われる誘導方法になります。
最後に
いかがでしたでしょうか。
まだまだ触り程度でしかご紹介できていませんが、ぜひ構図を理解し、魅力的なデザインを作成していただければと思います。
改めて初心を思い出すデザイナーの出口でした。