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関連

    顧客ロイヤリティを上げる為に…信頼されるWebサイトを 作るのに必要な「4種の信頼」

    良くWebサイトを制作するときに「信頼感のあるサイトにしたい。」といっ…

  2. DX関連

    農業のデジタル化・デジタルシフトはどのように進んでいる?

    最近、どんどん進化を見せるテクノロジーの進化。IoTの進展やVRの登場…

  3. Web関連

    「QRコード」+「Webサイト」=「顧客獲得」

    今回はリアルとネットをつなぐO2Oマーケティングにも良く利用されるQR…

  4. Web関連

    あえてのアナログ!?タスク管理は紙で書け!

    今回のテーマはタスク管理。しかし、色々とタスク管理ツールとか調べてみた…

  5. Web関連

    あなたは自社サイトや情報を活用できていますか?DMPを利用したデータ活用とは

    DMP元年といわれた2013年から早二年が経ちました。ビッグデータやD…

  6. Web関連

    機械学習で進化した将棋界

    今回は機械学習について、とても興味深い事例がありましたので、ご紹介した…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ホームページのリニューアルはいつすればいいの?
  2. Web関連

    Webアクセシビリティの重要性
  3. Web関連

    怪談話の作り方 ~背後に気を付けてお読みください~
  4. Web関連

    世界を変える17のゴール!ちょっとかっこいいSDGsのあれこれ
  5. Web関連

    WordPressの予約公開終了・予約上書きが出来るプラグイン「Advanced…
PAGE TOP