menu

Webページの統一感がUP。クリック率改善も期待できるグリッドデザイン

ディレクター心得

既存のWebサイトの一部をリニューアルしたり、コンテンツを追加したりする場合、課題になってくるのがそれまでのレイアウトとの兼ね合いです。とりわけECサイトで多く見られる現象ですが、運用期間が長いWebサイトは五月雨式にコンテンツを追加していった結果、ページの隅から隅までテキストや画像で埋め尽くされていることがあります。

そんなページに新たなコンテンツを追加しても埋もれてしまうため効果は期待できず、時には新規の制作より頭を悩ませることもあるのではないでしょうか? そうした際はクライアントの要望を踏まえたうえで、グリッドデザインを取り入れてみるといいでしょう。

グリッドデザインとは

グリッドデザイン(グリッドレイアウト)とは、Webページを縦横の直線で格子状に分割し、それを元にコンテンツを配置するデザインのこと。画像やサムネイルのサイズを揃えて規則的に並べることで、ページ全体の印象をすっきりさせる効果があります。

身近なところではPinterestのようなタイルデザインもグリッドデザインの1つと言えるかもしれません。もともとはギャラリーサイトや画像素材のダウンロードサイトで広く使われていた手法ですが、最近ではECサイトやコーポレートサイト、採用サイトでも取り入れるケースが増えてきています。

グリッドデザインの作成方法

ページの横幅(最大幅)を決め、それを何カラムで分割するか決めたうえで、全体のバランスを見ながらコンテンツを配置していきます。CSSのフレームワークを使うと分割しやすく、一般的なWebサイトでは最大幅を12~16分割して、2~4カラム分のコンテンツを配置するデザインが多いようです。

グリッドデザインのメリット&デメリット

何より大きなメリットはレイアウトが整理されてページの一覧性が上がること。それぞれのコンテンツが規則的に並べられることによって全体の統一感も増し、全体的なクリック率のUPが期待できます。また画像やサムネイルが定型化されるため、更新・追加もしやすくなります。

その反面、コンテンツの数を増やし過ぎると、サイズが揃っているがゆえに見つけにくく、古いコンテンツが埋もれてしまうことがあります。「これだけは見せたい」という重要なコンテンツがある場合、他よりカラムを多く使ったり、見出しのフォントを大きくしたりするのがおすすめです。

小野 良勝 代表取締役

投稿一覧

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

よりスピーディに分かりやすく。大手企業2社のインフォグラフィック動画活用事例

在宅ワーカーにとっての働き方改革

関連記事

  1. コンテンツ制作に集中できる、SEO対策済みWordPressテン…

    ユーザーの役に立つ情報を発信することによって検索上位獲得を狙うコンテンツSEO対策が主力となった今で…

  2. Webサイトの文章に+αの効果をもたらすフォントサイズ&位置の工…

    特定の文字や語句を強調する場合、Boldやアンダーラインが使われることが多くなりますが、タイポグラフ…

  3. なぜ今「Web接客」なのか?さまざまなツールが普及する2つの理由…

    「毎日の業務に忙殺されて、提案力が身につかない」、「Webディレクターとしての価値を磨きたいけど、具…

  4. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

  5. 一筋縄では行かないLPOの成功の法則とは?LPの「ストーリー化」…

    Webディレクターが携わることの多い業務の1つがランディングページの最適化(LPO)です。いくら広告…

  6. CVだけでは分からない課題を浮き彫りにする「マイクロコンバージョ…

    コンバージョンはWebサイトにおける最も重要な指標の1つ。とりわけECサイトなどに関しては「まずコン…

  7. 読まれるコンテンツに欠かせない、分かりやすい文章の3つのポイント…

    良質なコンテンツを配信することによってユーザーの行動を喚起するコンテンツマーケティングが主流となった…

  8. Webコンテンツの印象を大きく変えるタイポグラフィの4原則

    フォントを効果的に使うにはタイポグラフィ(書体の配置や構成といった表現)も大切です。デザインやレイア…

PICKUP

PAGE TOP