Web関連

Webデザイナー必見!構図をマスターする黄金テクニック

0

皆さんは、Webサイトを見ていて自分がほしい情報が見つからない。なんて経験はありませんか?

Webサイトに掲載されている情報が多く、ごちゃごちゃしていると、どこから読めば良いのかわかりません。

そこで、Webデザイナーは読み手(ユーザー)のことを考えてデザインをする必要があります。
読み手に必要な情報を素早く伝え、他のページに逃さないデザインをしましょう。

今回は、Webデザイナーに向けて改めて基本となるレイアウトやデザインの見せ方というのをご紹介しようと思います。この記事を読んで、デザイナーになろうと考えている方はぜひ勉強してください。

デザイナーとは

デザイナーは、デザインの各要素を集め全体を組み立てることをします。
また、これに加え、イメージ写真や色、タイポグラフィーなども含まれていきますが、最近はこれだけではなく、空間づくりや細かい装飾までも行うのがデザイナーさんの仕事になります。

単純に、写真や文字を並べるだけの仕事ということでは無いです。
デザインの中にも細かい工夫をしていかなければいけません。

広告デザインやWebデザインもそうですが、注意深く考え検討された構図には、ユーザーの視覚を誘導し無駄に考える必要のないレイアウトや工夫がなされています。

皆さんも電車の中吊りなど細かくチェックしてみてください。

では早速視覚を誘導するためのテクニックをまとめましたのでご紹介します。

deguchi_20160128.jpg

注目してほしいポイント「フォーカルポイント」を決める

このフォールカルポイントはユーザーをデザインに注目させるためにまず最初に見てほしいところを指します。
訪れたユーザーが数秒で注目できるところを強調し引きこむ必要があります。

引き込むために、いくつかポイントがあります。

・サイズ(文字の大きさやイメージ写真の大きさなど)
・形
・色
・配置場所

フォーカル・ポイントとは、ユーザーをデザインに引き込み、デザイン構図の中で一番最初に見てほしい場所のことを示しています。フォーカルポイントは重要な要素で、ユーザーに確実に見てもらいたいため、レイアウトの中でも一番強調する必要があります。

情報を整理し、バランスを整えよう。

フォーカルポイントが決まったら、残りのレイアウトを整理しましょう。
ここでは、誘導するためにレイアウトを整えることが大切です。

デザインの配置をランダムにするのではなく、まとめより魅力的な見た目にして行きましょう。

いくつかそのテクニックをご紹介します。

■グリッドを整える
グリッドに合わせてデザインの要素を整えることで、情報がすっきりと整理することができ、読みやすさにもつながります。
レイアウトパターンは下記のサイトで紹介されていますので、参考にしてみてください。

deguchi_201601282.png

CANVA(https://www.canva.com/features/design-grid/

■三分割法
写真の構図で最も使われているレイアウトになります。
皆さんも聞いたことがあるのではないでしょうか。

よくレイアウトの中心にフォーカルポイントを配置しているデザインがあります。
注目はしやすくなりますがとても飽きやすくなります。

そこで、三分割法を取り入れ、バランスよく見せダイナミックな表現をしてみるのはいかがでしょうか。

下記に三分割法を用いたデザインがありますので参考にしてみてください。

deguchi_201601283.jpg

読み手の視線を、デザインで誘導

Webデザインでは、2つの誘導があります。
それは、Z型とS型と呼ばれるものです。
Z型は、人が左から右に読む癖を上手く利用した誘導方法で、多くのWebデザインでこのレイアウトを使っているところがあります。

S型は、自然と流れるような視線の誘導を行うことで、ユーザーに無駄なく情報を伝えることができます。
こちらは、ランディングページなどに多く使われる誘導方法になります。

最後に

いかがでしたでしょうか。
まだまだ触り程度でしかご紹介できていませんが、ぜひ構図を理解し、魅力的なデザインを作成していただければと思います。

改めて初心を思い出すデザイナーの出口でした。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン制作

0

グループウェア導入による業務効率化とは前のページ

ブラウザシェアランキングから見るブラウザの特徴次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    デザイナーが押さえておきたいweb配色パターン

    誰もが一度はぶつかるwebデザインの配色。これを知っているだけで損…

  2. Web関連

    レスポンシブWebデザインの是非!

    花粉症の季節が終わり、ホッとしている須澤です!体重は現状維持で…

  3. AI関連

    【ホームページ制作】採用はもうAI(人工知能)がやれば良い。

    巷ではAI(人工知能)の進化、活用が話題になっていますね。弊社でも…

  4. Web関連

    東京オリンピックに向けインバウンド対策を!

    2015年を迎え、2020年の東京オリンピックまで…

  5. Web関連

    あれ、ここのデザイン変わった?見るタイミングで変化するWebサイト!

    こんにちは!段々寒くなってきましたが、まだまだ薄着の角田です。先日入用…

  6. Web関連

    Web制作会社における「スマートオフィス」

    ITを活用 してつくる環境配慮型省力化オフィス「スマートオフィス」。…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    料理が上手い人は仕事も出来るのか
  2. AI関連

    【人工知能(AI)×介護】人工知能が高齢化社会の介護サービス充実化に貢献
  3. Web関連

    なるほど!気付けばそこにいる、ゲーミフィケーションについてまとめてみる
  4. Web関連

    会社経営、Web制作で大事なことはココから学べ!
  5. Web関連

    ワイヤーフレームを作る前に気を付けたい5つのこと
PAGE TOP