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. web05

    SNSとも相性抜群。心理テスト系コンテンツの3つの特徴・効果とは…

    会員登録や資料請求を目的とする各種ポータルサイトや結婚情報サイト、占いサイトなどでは、ユーザーが手軽…

  2. web01

    YouTubeやFacebookは既に導入済み。Yahoo! J…

    Webサイトの制作・運営においてセキュリティは非常に大切です。日ごろのWebディレクター業務では企画…

  3. webdesign01

    日常的に使うPhotoshopだからこそ知っておきたい、初期設定…

    画像のレタッチやリサイズなど、Webディレクター業務でも何かと使う機会の多いPhotoshop。Ph…

  4. フラットデザイン化に使える無料アイコンのダウンロードサイト

    フラットデザイン化に使える無料アイコンのダウンロードサイト

    ページの表示速度アップやレスポンシブ対応、アピールしたい要素を強調できることなど、さまざまなメリット…

  5. GoogleChrome

    上手く使って確認やオペレーションの手間を軽減。Google Ch…

    ソースの修正や検索キーワードのピックアップ・確認など、何かと細かい作業がつきもののWebディレクター…

  6.  外注-or-自社制作? バナー制作会社を利用する場合のメリット&デメリット

    外注 or 自社制作?バナー制作会社を利用する場合のメリット&デ…

    的確な制作手順をふまえたうえで、自社の商材やブランドイメージに合わせてレイアウトやフォントを工夫する…

  7. web10

    制作メンバーの進捗管理や効果測定をよりスムーズに行える「Goog…

    スケジュールの進捗管理や効果測定はWebディレクターの大切なミッションの1つです。こうした管理業務に…

  8. web03

    画像のクオリティにこだわりたい場合の選択肢。意外と知られていない…

    Webサイトやソーシャルメディアで使われる画像の多くは、JPEGやGIF形式です。その一方、自分で写…

PICKUP

  1. iot08
  2. webrenewal09
  3. web director wordpress01
  4. 無料素材とあわせて動画コンテンツ作成に活用したい、無料編集ツール3選
  5. vessyl
  1. web director wordpress16
  2. オムニチャネルをつかったマーケティング戦略
  3. webrenewal09
  4. ad10
  5. 町田商店
  6. seo10
  7. wordpress05
  8. 「検索型」と「SNS型」。商品ページのヒントになるユーザーの2つの購買パターン
  9. 【リスティング広告】 無駄なコストを抑制するマッチタイプの活用
PAGE TOP