ブロークングリッドレイアウトとは、従来のグリッドレイアウトをあえて崩すWebデザインの手法です。規則正しいレイアウトが主流のなかで、あえて崩すことでオリジナリティを出したり、重要なコンテンツを目立たせたりする効果があります。
本記事では、ブロークングリッドレイアウトの概要から、メリット・デメリット、実際の活用例までを解説します。
ブロークングリッドレイアウトとは
ブロークングリッドレイアウトとは、整然と並べられたグリッドレイアウトをあえて崩し、要素を重ねたりはみ出したりさせるWebデザインの手法です。英語では「Broken Grid Layout」と表記します。
無秩序にレイアウトを崩すのではなく、見えないグリッドラインを基準にしながら、意図的に一部の要素だけをルールから外すことで、デザインにメリハリと動きを生み出します。
もともとは雑誌や新聞などの印刷物で使われていた手法ですが、Webデザインの世界でも2017年ごろから注目を集め、現在では多くのホームページで取り入れられています。
グリッドレイアウトとの違い
ブロークングリッドレイアウトを理解するうえで、グリッドレイアウトとの違いを押さえておくことが重要です。
グリッドレイアウトとは、ページを縦横の見えない線で格子状に分割し、その枠内に要素を規則正しく配置していく手法です。情報が整理されてわかりやすく、多くのホームページで採用されている定番のレイアウトですが、整いすぎているためにどのホームページも似たような印象になりやすく、個性や差別化を出しにくいという側面があります。
一方、ブロークングリッドレイアウトはグリッドレイアウトを土台としながらも、あえて一部の要素をグリッドから外すことで、視覚的なアクセントを生み出します。グリッドレイアウトを完全に無視するのではなく、ルールを理解したうえで意図的に崩す点が最大の特徴です。
ブロークングリッドレイアウトのメリット
ブロークングリッドレイアウトを取り入れることで、デザイン面でさまざまなメリットが得られます。ここでは代表的なメリットを解説します。
オリジナリティを出しやすい
ブロークングリッドレイアウトは、競合他社との差別化に効果的な手法です。
グリッドレイアウトが主流の現在、規則正しく整ったデザインのホームページは数多く存在しており、コンテンツや配色を変えても全体的な印象が似通ってしまうケースが少なくありません。ブロークングリッドレイアウトでは崩し方にデザイナーの個性が反映されるため、他社にはないオリジナリティのあるホームページを作りやすくなります。
今どきのデザインに見える
ブロークングリッドレイアウトを取り入れることで、訪問者に洗練された印象を与えられます。
直線的で規則正しいレイアウトはホームページが普及した2000年代から長く使われてきた手法であり、見慣れた印象を持つ方も多いです。あえてグリッドを崩したデザインにすることで、最新のトレンドを意識したホームページとして訪問者に受け取ってもらいやすくなります。
特に、ブランドイメージや信頼感を重視するホームページでは、デザインの新しさが訪問者の第一印象を左右する重要な要素になります。
コンテンツを強調しやすい
ブロークングリッドレイアウトは、訪問者の視線を狙い通りに誘導できるため、重要なコンテンツを効果的に目立たせることができます。
グリッドレイアウトでは要素のサイズや間隔が揃っているため、特定のコンテンツだけを際立たせるのが難しい場面があります。ブロークングリッドレイアウトでは要素をずらしたり重ねたりすることで自然に視線が集まり、伝えたい情報を印象づけやすくなります。
ユーザーが魅力的に感じる
ブロークングリッドレイアウトのデザインは、訪問者に飽きさせない独特のリズム感を生み出します。
規則正しいレイアウトと比べて視覚的な変化が多く、ページを見進めるうちに自然と引き込まれるような感覚を与えられます。サイト全体の印象が魅力的になることで、訪問者がコンテンツをじっくり読んでくれる可能性が高まります。結果として、ホームページからの問い合わせや購入といったコンバージョンにつながりやすくなります。
ブロークングリッドレイアウトのデメリット
ブロークングリッドレイアウトはデザイン性の高さが魅力ですが、導入にあたって注意すべきデメリットもあります。事前に把握したうえで取り入れるかどうかを判断することが大切です。
無秩序になりやすい
ブロークングリッドレイアウトは、デザインの意図を明確にしないまま崩してしまうと、単に見づらいだけのホームページになるリスクがあります。
グリッドを崩す目的はあくまでもコンテンツを強調したり、訪問者の視線を誘導したりすることです。どの要素をどのような意図で崩すのかを事前にデザイナーと丁寧にすり合わせておくことが、ブロークングリッドレイアウトを成功させる前提条件になります。
見慣れないユーザーには見づらい
ブロークングリッドレイアウトは、デジタルに不慣れな方や年齢層が高いターゲットには見づらいと感じさせてしまう場合があります。
要素が重なったりずれたりしているデザインは、整ったレイアウトに慣れた方にとって情報の読み取りにくさにつながることがあります。過度に崩しすぎず、全体のバランスを保ちながら部分的に取り入れるなど、ターゲット層に合わせた調整が必要です。自社のターゲット層がどのような方かを踏まえたうえで、取り入れるかどうかを慎重に検討しましょう。
スマートフォンでレイアウトが崩れやすい
ブロークングリッドレイアウトはパソコンでは意図通りに表示されていても、スマートフォンでレイアウトが崩れてしまうケースが少なくありません。
要素を重ねたりはみ出したりさせる構造上、画面幅が狭いスマートフォンでの表示調整には細かな対応が必要になります。現在はスマートフォンからホームページを閲覧するユーザーが大半を占めているため、制作時にはパソコンだけでなく、スマートフォンでの表示確認を必ず依頼するようにしましょう。
ブロークングリッドレイアウトの活用例
ブロークングリッドレイアウトには、いくつかの代表的な活用方法があります。実際にどのような使い方をするのかを知ることで、自社のホームページに取り入れるイメージが具体的になります。
はみ出す・重ねる
ブロークングリッドレイアウトの活用例として最も多く見られるのが、テキストや画像をグリッドからはみ出させたり、要素同士を重ね合わせたりする手法です。
たとえば、画像の上にテキストをかぶせたり、隣接するセクションに要素を食い込ませたりすることで、ページに動きとリズムが生まれます。伝えたい情報を視覚的に際立たせたい場面で特に効果を発揮する手法です。
不規則に画像を配置する
画像のサイズや配置に規則性を持たせず、あえてばらつきを出すブロークングリッドレイアウトの活用例です。
同じサイズの画像を等間隔に並べるグリッドレイアウトとは異なり、大小さまざまなサイズの画像を不規則に配置することで、訪問者の視線が自然と画面全体に向かいます。見せたい画像を大きく配置するなど、優先度に応じたレイアウトができるため、写真や画像を多用するホームページとの相性が良い手法です。
まとめ
ブロークングリッドレイアウトは、グリッドをあえて崩すことでオリジナリティを出したり、重要なコンテンツを目立たせたりできるWebデザインの手法です。
訪問者に今どきの洗練された印象を与えられる一方、無秩序になりやすい点やスマートフォンでのレイアウト崩れには注意が必要です。自社のターゲット層やホームページの目的に合わせて取り入れるかどうかを判断し、制作会社と事前にしっかりすり合わせたうえで導入を検討してください。
