menu

Webページは第一印象が大事。レイアウトで最低限注意したい2つのポイント

制作

WordPressをはじめとしたCMS(コンテンツマネジメントシステム)の普及によって、Webサイトは誰でも手軽に制作できるものになりました。ただ、WordPressなど汎用的なツールで簡易的に制作したWebサイトは特徴がなく、どこにでもありがちな印象のものになってしまう場合もあります。

「野暮ったい‥」、「何か物足りない‥」。そんなWebページを避けるためには、どんな点に気をつける必要があるのでしょうか。レイアウトで最低限注意したい2つのポイントについてご紹介します。

・センタリングの乱用に注意
Webデザインの最近のトレンドの1つとして、カラムを使わずにコンテンツをセンタリング(中央揃え)で表示するWebページが増えてきています。

センタリングされたコンテンツはレスポンシブ対応もしやすく、ユーザーの視点を1か所に集める効果があります。その点で、ファーストビューで写真を全画面表示させるページなどとは相性がいいのですが、一方でページのホワイトスペース(余白)が中途半端になり、野暮ったい印象を与えてしまうことがあります。また、文章の切れ目が揃わないため、読みにくさにつながることもあります。

テキストが多めのページや、複数の見出しがあるページ、画像とテキストが左右横並びに配置されたページなどではセンタリングは避け、カラムを使ってオーソドックスにレイアウトした方がいいかもしれません。

・画像やイラストの効果的な配置とは?
SEO対策を意識するあまり、Webページのテキストを増やし過ぎてしまうとメリハリがなく、ページの印象も安っぽいものになりがちです。そういった意味ではやはり画像やイラストも効果的に使いたいもの。

画像やイラストを配置する際は、脳医学に目を向けてみるのもいいかもしれません。脳医学では、人間の右脳は「直感的」、左脳は「理性的」に働くとされ、それぞれ左右の視野に交差して結びついています。

あくまでコンテンツやデバイス環境との兼ね合いにはなりますが、ページ左側に直感的な表現にマッチした画像・イラストを配置したうえで右側にテキストを流すと、ユーザーによりスムーズに情報を届けるともできるのではないでしょうか。

また、リサーチ系のコンテンツなら、マーケットデータを数値化・ビジュアル化したインフォグラフィックを利用するのも1つの方法です。現在ではインフォグラフィックを手軽に作成できる無料ツールも多数公開されています。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

marketing20カスタマーサポートの改善事例「みずほ銀行」お問い合わせ・FAQ

listing03サービス開始から約14年。変化し続けるリスティング広告の「今」(3)

関連記事

  1. フォントひとつでバナーの印象は変わるー。訴求ポイント別のバナーの工夫

    フォントひとつでバナーの印象は変わるー。訴求ポイント別のバナーの…

    スマートフォンが普及して時間・場所を問わずWebサイトに接触できるようになったいま、多くのユーザーが…

  2. 観光や教育関連のサービスとも相性抜群のバーチャルリアリティ(VR)動画

    観光や教育関連のサービスとも相性抜群のバーチャルリアリティ(VR…

    Youtubeなどの動画配信プラットフォームに加え、無料の動画素材や編集アプリなども身近になったいま…

  3. Taskmanagement

    マルチタスクを効率的に管理。スムーズなプロジェクト進行に活かせる…

    「納期までに間に合わず、実装予定の機能を絞らざるを得なかった‥」、「プロジェクトの進行が滞ったことで…

  4. web04

    Webサイトのプランニングに活用できる「マインドマップ」(後編)…

    1つの主題から関連するキーワードやイメージを放射状に書き出していくことによって、複雑な概念や情報を分…

  5. 誰でも簡単にインフォグラフィックを作成できる無料ツール

    誰でも簡単にインフォグラフィックを作成できる無料ツール

    数値とイラスト、図形、グラフなどを組み合わせビジュアル化することによって、複雑な情報も直感的に伝える…

  6. コントラストやトーン&マナーを工夫してさらに効果を高める、バナー作成のコツ

    コントラストやトーン&マナーを工夫してさらに効果を高める、バナー…

    動画などさまざまなメディアが発達した今でも、Webサイトにおけるバナーの重要性に変わりはありません。…

  7. webdesign04

    マンネリ化したWebデザインから脱却したい時は注目。心理学におけ…

    制作したWebページの効果が伸び悩んでいる時や、何となくマンネリ化した印象を拭えない時などは、行動心…

  8. web07

    クライアントを納得させるWebデザイン制作&プレゼンのコツ_前編…

    「デザイン、レイアウトは自信があるけど、クライアントにきちんと伝わるか不安‥」、「時間の限られたプレ…

PICKUP

  1. marketing05
  2. 4つのターゲット層とそれぞれに向けた広告アプローチ
  3. 福縁酒家|うまい!安い!中国人オーナー経営の本格中国料理
  4. listing02
  5. KGIを因数分解することによって明確になるKPI設定
  1. web09
  2. 次世代のビジネスチャンスを拓くVR&AR活用術 
  3. WebDirector19
  4. ad06
  5. 海華月
  6. web director wordpress13
  7. OBICA MOZZARELLA BAR/最高の状態のモッツァレラチーズ
  8. ARAIYA NEST | 肉汁じゅわっと溢れ出る国産黒毛和牛
  9. ad08
PAGE TOP