Web関連

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

皆さんは、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デザイン制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    Amazon をもっと利用しよう!子育てアイディア集

    こんにちは。育児に家事に大忙しのディレクター、望月です。今日は、私の重…

  2. Web関連

    3つの事例から考える共創マーケティングとは?

    昨年より共創マーケティングという言葉を良く聞くようになりました。共(と…

  3. Web関連

    iPhone5の両端から光が漏れてきた話

    皆様は、iPhoneを使用されておりますでしょうか。私は使用しておりま…

  4. Web関連

    スマホゲームと家庭用ゲームの今

    こんにちは!ゲームも大好き、デザイナーの萌々子です!以前は植物…

  5. Web関連

    Webにもつながる、オタク御用達のニュースアプリを使ってみた。

    年末の慌しさで大好きなアニメやゲームを楽しむどころか、最新ニュース…

  6. Web関連

    Web制作会社が教えるデータドリブンマーケティングを成功に導く方法

    データドリブンマーケティングを活用したマーケティング「データドリブ…

おすすめ記事

最近の記事

  1. 約1年間のウィズコロナ生活で大きく変わったもの
  2. スマートストアにより、小売業は激変する
  3. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  4. AI技術の普及により移動も安全に
  5. 【テレワーク×AI】今後も続くであろうテレワークとどう向き合…

アーカイブ

  1. Web関連

    写真から情報漏洩!?セキュリティ対策とは?
  2. SNS関連

    SNSでシェアされやすい記事とは?
  3. AI関連

    【人工知能・AI×Webサイト運営】誰だか分からないユーザー情報を集めて、サイト…
  4. AI関連

    【人工知能(AI)×観光】観光向けサイトで人工知能会話型システムを活用
  5. Web関連

    今や主流?モバイル・ファーストのメリットとは?
PAGE TOP