- 公開日： 最終更新日：
ブロークングリッドレイアウトとは？メリットやデメリット、事例を解説
Webデザイン性を高める方法の1つに、ブロークングリッドレイアウトと呼ばれる手法があります。
ブロークングリッドレイアウトでWebデザインを作成することで、ユーザーの視線を惹きつけることができるので、Webマスターは狙い通りのアクションを行ってもらいやすくなり、訪問者からは面白いホームページと認識されます。
当ページでは、ブロークングリッドレイアウトとは何かや、メリット、デメリット、事例を解説します。
目次
ブロークングリッドレイアウトとは
ブロークングリッドレイアウトとは、従来のような直線的や四角形を規則正しく並べたレイアウトとは異なり、意図してコンテンツをグリッドからはみ出したり、コンテンツ同士を重ね合わせたりするレイアウトのことを言います。
ブロークングリッドレイアウトを活用することで、競合サイトと比べたときに、Webデザインでの差別化が明確になってくるので、訪問者から魅力的なホームページと認識される可能性が高くなります。
また、ブロークングリッドレイアウトは敢えて崩したデザインになるので、訪問者の視線を狙い通りにコンテンツへ向けることができるので、Webマスターが重要と考えるコンテンツを目立たせることが可能になり、ホームページのコンバージョン率を高める効果も見られます。
もちろん、すべてのホームページでブロークングリッドレイアウトを採用すべきとは言えませんが、ブロークングリッドレイアウトのメリットとデメリットを理解して、自社のホームページの目的に応じて活用することで高い成果を実現できる可能性が高くなります。
ブロークングリッドレイアウトのメリット
ブロークングリッドレイアウトのメリットを解説します。
オリジナリティを出しやすい
ブロークングリッドレイアウトを活かしたWebデザインを作成することで、ホームページのオリジナリティを高めることができます。
従来のような直線的で規則正しいWebデザインだと、どうしてもコンテンツや画像、カラーを変えていたとしても、ぱっと見の印象は競合他社のホームページと似てしまっていると感じるケースがあります。
しかし、ブロークングリッドレイアウトでは、敢えて崩したWebデザインを作成し、さらに崩し方はデザイナーの数だけ存在してくるので、競合他社と差別化されたオリジナリティのあるWebデザインとなります。
今どき風に見える
ホームページが主流になった2000年ごろから、直線的なレイアウトが一般的でした。
そのため、ブロークングリッドレイアウトで崩したWebデザインを採用することによって、訪問者に最新や今どきのWebデザインと感じさせることができます。
コンテンツを強調しやすい
ブロークングリッドレイアウトで重要なコンテンツをずらすことによって、ユーザーがそのコンテンツに目を向けてしまうので、コンテンツを強調しやすくなります。
コンテンツを強調する方法はさまざまありますが、ブロークングリッドレイアウトほど目立たせることができる手法は存在していないと思います。
ユーザーが魅力的に感じる
ブロークングリッドレイアウトのWebデザインは、ユーザーを飽きさせず、魅力的なホームページだと感じさせることができます。
ブロークングリッドレイアウトのWebデザインと品質の高いコンテンツの両方を合わせることで、ユーザーはホームページからコンバージョンを行ってくれる可能性が最大限に高まります。
ブロークングリッドレイアウトのデメリット
ブロークングリッドレイアウトのデメリットを解説します。
無秩序になってしまう
ブロークングリッドレイアウトは、敢えてレイアウトを崩す手法ですが、闇雲に崩してしまうと、無秩序なWebデザインになってしまいます。
ブロークングリッドレイアウトの目的はユーザーがホームページを魅力的に感じてくれたり、コンテンツの強調を行うことになっているので、無作為にレイアウトを崩してしまうと、ブロークングリッドレイアウトではなく単に見づらく読みづらいホームページになっているだけです。
そのため、ブロークングリッドレイアウトでWebデザインを作成したら、自社のホームページの目的を明確にして、ユーザー目線を意識した確認を行わなくてはなりません。
慣れていない方だと見づらい
ブロークングリッドレイアウトは、無秩序にレイアウトが崩れているので、普段からあまりパソコンをしないような方がターゲットだと見づらいホームページとなってしまいます。
特に、比較的に年齢層が高い業界のホームページでは、ブロークングリッドレイアウトを実装する際には、過剰にレイアウトを崩しすぎないように注意しなくてはなりません。
スマートフォンでのレイアウト崩れの可能性が高い
ブロークングリッドレイアウトを導入したホームページは、パソコンではレイアウトが綺麗に見えても、スマートフォンでレイアウト崩れが発生していることが多々あります。
そのため、ホームページを公開する前の確認では、パソコンだけではなく、必ずスマートフォンでの確認も行うように注意しましょう。
ブロークングリッドレイアウトの事例
ブロークングリッドレイアウトの事例を紹介します。
はみ出す・重ねる
文字を画像からはみ出したり重ねてたりしている事例です。
ブロークングリッドレイアウトとしてはオーソドックスな対策法になり、文字をはみ出したり、重ねることで、テキストをより目立たせることが可能です。
規則性がない画像の配置
こちらも最近はよく目にしますが、画像の配置や大きさなどに規則性を持たさないブロークングリッドレイアウトの手法です。
規則性がない画像配置をされてしまうと、ユーザーは自然とその画像に目を向けてしまうので、ユーザーに見て欲しい画像を配置させることで、ホームページをより深く理解してもらえるようになります。
まとめ
ブロークングリッドレイアウトについて解説しました。
ブロークングリッドレイアウトは、ユーザーに楽しみを与えるだけではなく、Webマスターは狙い通りにコンテンツを強調することができるので、Webデザインの選択肢として考えてたい手法になります。
ブロークングリッドレイアウトって何？とお考えの方の参考になれば幸いです。
