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

関連記事

  1. Web関連

    どんな企業にも必ず必要!IT資産管理ってなに?

    昨今、ニュースで取沙汰される事の多くなった、数々の情報漏えい問題や、W…

  2. Web関連

    単語の覚え方から実際の利用シーンまで。個人的オススメ英語学習サイト3選

    こんにちは。学生時代、英文学科なのに人見知りすぎて留学生とコミュニケ…

  3. Web関連

    企業の信頼性向上をCSRにより図りたい

    社会的責任を果たしている企業であることを公表し、信頼性を向上高まる…

  4. Web関連

    そのオムニチャネル、大丈夫ですか?

    オムニチャネルという概念も定着し、取り入れている企業も以前に比べ多くな…

  5. Web関連

    思い出をショートムービーに残してみた

    "思い出を形に残すこと"を始めてみますこんにちは。最近、ちゃんと朝ご…

  6. Web関連

    こんなのあったの・・!?驚愕のアプリ集

    このタイトルを読んで気になったあなた。世の中に転がっているアプリで、驚…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    レスポンシブデザインのサイトをわずか3日で仕上げる驚異的な方法
  2. Web関連

    e-sportsから考える「スポーツ」
  3. Web関連

    【SDGs】いつでもどこでも質の高い教育は受けられる
  4. Web関連

    【インバウンド向けWeb制作】ある日突然、何でも無かった場所が観光名所になる!?…
  5. サービス・新技術

    キャッシュレス決済により、財布ともさよなら・・・
PAGE TOP