あえて壊す?思わず視線が奪われる「ブロークングリッドレイアウト」とは
グリッドレイアウトを採用するホームページが増えてきて、もはやWebの世界におけるレイアウトの定番といっても過言ではなくなりました。
グリッドレイアウトは、情報をまとめてスッキリ・コンパクトに見せることができるので、情報量の多いホームページではしばしば活用されている手法です。
しかし、グリッドレイアウトは非常に多くのホームページが採用しており、情報が整理されており真面目な印象を受けるので、ユニークさや面白さが出ないのも事実です。
そこで登場したのが、グリッドレイアウトのよさを継承しながらも、あえてルールをはみ出すデザイン手法である*「ブロークングリッドレイアウト」*(Broken Grid Layout)です。
今回は、思わず視線が奪われてしまう「ブロークングリッドレイアウト」の基本的な概念から使用ポイントをまとめました。
まわりとはちょっと違ったホームページを作りたい、そんなときにブロークングリッドレイアウトが役に立つはずです。
従来のグリッドレイアウトとは、一体どこが違うのでしょうか。
参考:
今さら聞けない!Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本
思わず視線が奪われる「ブロークングリッドレイアウト」とは
グリッドレイアウト(グリッドデザイン、グリッドシステム)は、ページの最大幅を決めて、その最大幅を何分割のグリッド(カラム)にするかを決め、そのカラム上にさまざまなオブジェクトを配置していくレイアウト手法です。
もともとこのようなレイアウト手法は、新聞や雑誌などの印刷物でよく見られるものです。
グリッドラインはレイアウトの決定時に仮に引かれる線なので、実際のデザイン上は実線として表示されるわけではありませんが、ラインに沿って配置していくので、整っていてまとまりやリズム感が生まれます。
しかし、グリッドレイアウトでは、ブロックの大きさが同じだとコンテンツごとの重要度が出しづらかったり、アクセントとなるコンテンツが目立ちにくいというデメリットも抱えています。
配置する画像に個性をもたせたり、ちょっと変わった配色を使ったりして克服するという方法もありますが、ここであえて*「従来型のグリッドレイアウトから脱却しよう」*という動きが出現しはじめました。
それが、*「ブロークングリッドレイアウト」*です。
このレイアウト手法は、従来のグリッドレイアウトと違って単にでたらめにオブジェクトを配置する、という手法ではありません。
グリッドレイアウトでデザインするのと同じように、縦横に見えないグリッドラインを引いて、整えたり揃えたりしつつ、あえていくつかの要素をルールから外して目立たせていく、という手法なのです。
ブロークングリッドレイアウトの特徴
それでは、グリッドレイアウトの基本ルールを守りながらも、あえて部分的にルールを外して目立たせていく「ブロークングリッドレイアウト」を実現するには、具体的にどうすればいいのでしょうか。
ポイントだけでは分かりにくいと思うので、実例も交えて紹介してみましょう。
1. 重ねる
要素をブロックのように配置しながらも、「ガーター」と呼ばれるマージンを作って要素同士を切り離し、並べていくのが一般的なグリッドレイアウトの手法です。
そのため、要素同士は基本的に切り離され、その結果余白を生んでリズムをつけていくのが、美しいデザインとされていました。
ところが、この「切り離す」というルールを破ってみたら、どうでしょうか。
例えば、これまで切り離していたものを、あえて*「重ねる」*ように配置してみるとどうなるでしょう。
イングランドのファッションブランド*「CMMNTY」*のホームページを見てみましょう。
ヒーロー画像と「Create」の文字を重ねていますね。
普通にコーディングしてデザインしていけば、「Create」の文字は自動的にマージンをとって画像の下に配置されます。
そこをあえてネガティブマージン(マイナスの値をマージンに指定すること)にすることで、レイヤーのように重なったレイアウトになっています。
これは「重ねる」のほんの一例です。
画像同士を重ねたり、動画と画像、文字を重ねてみたりしても面白いかもしれません。
2. はみ出す
グリッドレイアウトでは、グリッドラインと呼ばれる見えない線を引いて、そこに要素をそろえて配置していく、というのが暗黙の了解でした。
しかし、文字どおり「一線を越えてみる」と、どうなるでしょうか。
イギリスの*「Message In A Bottle」*のページを見てみましょう。
https://www.sas.org.uk/messageinabottle/
ボトルを拾い上げている写真の左縁に対して、ロゴマークやヘッダーテキスト、CTAボタンなどが大きくはみ出していることが分かります。
ここでひとつポイントがあります。
それは、はみ出すためには余白が必要であるということです。
余白を大きくとっておけば、はみ出した部分が大きく目立ちますが、余白を十分にとっていないと、せっかくはみ出してもその部分があまり目立たなくなってしまいます。
3. 中に置く
一方、重ねたり、はみ出したりするのではなく、本来であれば外にある要素を完全にかぶせてしまう、という方法もあるようです。
クリエイティブエージェンシー*「By Association Only」*のホームページで確認してみましょう。
このホームページでは、ヒーロー動画の中にヘッダーテキストやパラグラフをずらして配置しています。
単に中に入れるだけではなく、すこしずらすことで、揃えたときとは違ったリズムが生まれます。
4. 円を使う
グリッドレイアウトが整って見えるのは、直線状にオブジェクトを配置していたからです。
それでは、あえて「直線的」ではないものをレイアウトに取り入れてみると、どうでしょうか。
ビジネス出張における場所のトラッキングと経費を管理するアプリ*「Trippeo」*のホームページを覗いてみましょう。
このホームページでは、中央に円形のタイムラインを設けて、崩したブロッグの上に重ねて表示しています。
グリッドレイアウトで使われる要素のほとんどは直線的であるので、曲線や円を取り入れると、その部分に視線を集めることができます。
5. ずらす
見えない線であるグリッドラインを作ったら、通常はそこにオブジェクトを揃えて配置をします。
しかし、そのラインとある要素の間にインデントのような空白を作ってリズムを崩してみる、というデザインもあります。
それが、次に紹介する*「Marché Notre-Dame」*のホームページです。
ご覧いただいてお分かりの通り、本来であればそろっていてほしいラインのところであえて高さをそろえずにずらしています。
あえてリズムを崩すと、それによって生まれた空白部分や、はみだした部分に注目が集まります。
まとめ
グリッドレイアウトはたくさんの情報量があるホームページを綺麗に整理してくれますが、一方で場合によっては単調で面白みに欠けてしまうことがあります。
しかし、グリッドデザインのメリットを踏襲しながらも部分的に目立たせるブロークングリッドレイアウトを使えば、少しひねった大胆なデザインにすることができます。
ちなみに、グリッドを崩すためのCSSプロパティとして、「wrap-flow」というプロパティを使う方法があります。
下記の参考サイトで具体的なチュートリアルが解説されていますので、よろしければ一緒にご覧ください。
参考:
CSS Exclusions: Making Boring Layouts Less Boring
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング