グリッドに沿ってきちんと並べたのに、なんだか単調で印象に残らない、と感じたことはありませんか。
そんなときに使えるのが、整った配置の中で一部だけをあえてグリッドから外し、動きや強調を生み出す「グリッドを崩す」という手法です。
この記事では、グリッドをあえて崩すとはどういうことか、ただ「崩れている」配置との違い、具体的な崩し方、そして崩すときに守るべきことを、見本を使って初心者向けに解説します。
グリッドをあえて崩すデザインの基本
まずは、グリッドを崩すとはどういうことか、そしてなぜ崩すと目を引くのかを押さえましょう。
グリッドを崩すとは
グリッドを崩すとは、ふだんはグリッドに沿って要素を並べながら、特定の要素だけを意図的にグリッドの外へはみ出させたり、基準の位置からずらしたりする表現のことです。
グリッドとは、画面を縦の列(カラム)で区切り、要素の位置をそろえるための見えない補助線のことです(グリッドの仕組みはグリッドと余白の関係とは?、Webでよく使われる12カラムのグリッドは12カラムグリッドとは?で解説しています)。
グリッドは、配置を整えるための「基準」であって、絶対に破ってはいけない決まりではありません。
目的があれば、基準から外すこと自体がデザインの手段になります。
崩した部分が目立つ理由
グリッドを崩した部分が目立つのは、まわりがそろっているからです。
人は、規則正しく並んだものの中に1つだけ違うものがあると、自然とそこに目が向きます。
つまり、グリッドを崩す表現は、「そろっている部分」と「外れている部分」の差を使って目立たせる、対比(コントラスト)の一種と考えられます。
次の見本は、同じ内容を、すべてグリッドどおりに置いた場合と、写真だけを画面の端まで広げた場合です。
見本1は整っていますが、写真もカードも同じ枠の中に収まっているため、どれが主役なのかがはっきりしません。
見本2は、写真だけが枠の外まで広がっているので、ページを開いた瞬間に写真へ目が向き、開放感も生まれています。
見出しとカードはグリッドどおりのままなので、写真が広がっても、ページ全体の整った印象は保たれています(差をつけて目立たせる考え方は要素を目立たせる余白とは?でも解説しています)。
「崩す」と「崩れている」の違い
グリッドを「崩す」ことと、配置が「崩れている」ことは、まったく別のものです。
崩すのは、目立たせたい場所を決めたうえで、そこだけをはっきりと外すことです。
一方、崩れているのは、意図がないまま要素の位置が少しずつずれている状態で、見る人には「雑」「落ち着かない」としか伝わりません。
見分けるポイントは、外し方の大きさです。
端が数pxだけずれているような小さなずれは、「うっかりずれた」「調整が終わっていない」ように見えます。
反対に、写真が画面の端まで突き抜けている、ひと目で分かるほど大きな段差がついている、といった外し方なら、見る人にも「わざと外している」と伝わります。
NGの見本は、ずれが数pxずつと小さいため、わざと外したのではなく、うっかりずれたように見えてしまいます。
OKの見本は、外すのを写真1つに絞り、外し方も大きくはっきりさせているので、「ここを見てほしい」という意図が伝わります。
崩すなら「場所は少なく、外し方ははっきり」が基本です。
グリッドをあえて崩す方法
ここからは、Webデザインでよく使われる3つの崩し方と、コーディングでの作り方を見ていきます。
まずは3つの崩し方を並べて比べてみましょう。
どの崩し方も、ほかの要素はグリッドどおりに置いたまま、1つの要素にだけ使っているのが共通点です。
端まで広げる
見本Aのように、写真や背景の色の帯だけを、ページ左右の余白を越えて画面の端まで広げる方法です。
印刷の世界では、紙の端まで写真や色を印刷することを「裁ち落とし」といい、英語のbleed(ブリード)から、Webでも画面の端まで広げる表現を「フルブリード」と呼ぶことがあります。
枠の中に収まっていた要素が急に広がるので、開放感が出るうえ、「ここから新しいまとまりが始まる」という区切りも伝えられます。
ただし、広げてよいのは写真や背景だけで、文章は広げずに読みやすい幅に収めておきます(文章を読みやすい幅に収め、背景だけを広げる作り方はコンテンツ幅とは?で解説しています)。
ずらす・段差をつける
見本Bのように、横に並べた要素のうち片方だけを上下にずらして、段差をつける方法です。
同じ高さに並んだ要素は静かで落ち着いた印象になりますが、段差をつけると視線が斜めに動き、画面にリズムや動きが生まれます。
このとき、左右の位置と幅はカラムどおりにして、ずらすのは上下方向だけにすると、崩しているのにまとまりを保てます。
ずらす量も、ほかの余白と同じ数値の一覧(たとえば8の倍数)から選ぶと、意図的な段差だと伝わりやすくなります(数値の一覧の作り方は8pxグリッドとは?で解説しています)。
重ねる
見本Cのように、写真の上に文章のカードや見出しを一部重ねて、カラムの区切りをまたがせる方法です。
要素同士が重なると、手前と奥の前後関係が生まれ、平面的な画面に奥行きが出ます。
重ねるときは、文字が写真の上に乗る部分で読みにくくならないかに注意が必要です。
見本Cのようにカードに白い背景を敷くか、写真の上に直接文字を置くなら、文字と背景の明るさの差(コントラスト比)を確かめましょう(コントラスト比の基準はコントラスト比とは?で解説しています)。
CSSで要素を端まで広げる
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る人は、「ふだんの要素は中央の列、崩したい要素だけ端から端まで」と、置き場所を分けて考える方法がある、と分かれば十分です。
次のコードは、ページを「外側の余白・中央のコンテンツ・外側の余白」の3列のグリッドにして、特定の要素だけを3列すべてにまたがらせる例です。
.page {
display: grid;
/* 外側の余白 / 中央(最大1200px、両端に16pxずつ残す) / 外側の余白 */
grid-template-columns: 1fr min(100% - 32px, 1200px) 1fr;
}
.page > * {
grid-column: 2; /* ふだんの要素は中央の列に置く */
}
.page > .full-bleed {
grid-column: 1 / -1; /* 崩したい要素だけ、端から端まで広げる */
}grid-column: 1 / -1は「最初の線から最後の線まで」という意味で、要素をすべての列にまたがらせます(MDN: grid-column)。
グリッドの列の区切り線には左から1、2、3…と番号が付いていて、-1は「後ろから数えて1本目」、つまりいちばん右の線のことです。
列がいくつあっても「左端から右端まで」を指定できるので、このコードでは、要素が外側の余白も含めた画面の端から端まで広がります。
min()は、カンマで区切った値のうち小さいほうを使う関数で、ここでは「画面幅から32px引いた幅」と「1200px」の小さいほうが中央の列の幅になります(MDN: min())。
スマホのような狭い画面では、画面の幅に合わせて両端に16pxずつ残した幅になり、PCのような広い画面では1200pxで止まります。
つまり、広い画面で中央の列が広がりすぎないようにする「上限」の役目をしていて、残りの幅は左右の1frの列が半分ずつ受け持ちます。
崩す要素をfull-bleedのようなクラスで決めておくと、どこを崩したかがコードからも分かり、崩す場所が増えすぎるのも防げます。
実践のポイント
グリッドを崩すときに守りたいことと、よくある疑問をまとめます。
注意点・よくある間違い
- グリッドに沿って並べる基本が身につく前に、崩し方だけをまねてしまうことがあります。
基準がそろっていない画面で崩しても、ただ散らかって見えるだけなので、まずはすべての要素をグリッドにそろえられるようになりましょう(そろえ方の基本は整列の原則とは?で解説しています)。 - 目立たせたい要素が多く、崩す場所を増やしすぎてしまうことがあります。
崩した部分が増えるほど、どれが本当に見せたいものか分からなくなるので、1つの画面で崩すのは1〜2か所までを目安にしましょう。 - 本文の文章や、商品一覧のように同じ仲間が並ぶ部分まで崩してしまうことがあります。
本文の行の端がばらばらだと読みにくくなり、商品一覧の一部だけをずらすと、目立つ商品とそうでない商品ができてしまいます(グリッドを崩すと商品画像に焦点を合わせにくくなる例は、インタフェースデザインにおけるグリッドの利用・U-Siteでも紹介されています)。
崩すのは、写真や大きな見出しなど、ページの主役になる要素にとどめましょう(主役の決め方は主役と脇役とは?で解説しています)。 - PCの画面だけで確認し、スマホで崩した部分がどう見えるかを確かめていないことがあります。
狭い画面では、重ねた文字が写真に埋もれたり、はみ出した要素で画面が横にずれて動いたりしやすいので、スマホでは崩し方を弱めるか、グリッドどおりに戻すことも検討しましょう(画面幅による余白の変え方はPCとスマホの余白の違いとは?で解説しています)。
たとえば、PCで写真に重ねていた文章のカードは、スマホでは重ねずに写真の下に置き、段差をつけて2つ並べていた要素は、段差をなくして縦1列に並べる、というように崩しをいったん外すと安心です。
写真を画面の端まで広げる崩しは、スマホでもそのまま使いやすい方法です。
よくある質問
- Q. グリッドを崩しても、グリッドは引いておくべき?
A. はい、引いておきましょう。
崩すのは「基準があるから」意味を持つ表現です。
グリッドを表示しながら、崩す要素以外がきちんとそろっているか、崩す要素も片側の端や上端などはどこかの線にそろっているかを確かめると、まとまりを保てます。 - Q. どんなサイトなら崩してもいい?
A. 決まりはありませんが、写真やビジュアルで印象を伝えたいブランドサイトや、イベント・キャンペーンのページなどでよく使われます。
一方、情報を正確に探してもらうことが目的の管理画面や、申し込みの入力画面などでは、グリッドどおりに並べたほうが迷わず使えます。
迷ったら、そのページで見る人に「印象を感じてほしい」のか、「迷わず手続きを終えてほしい」のかを考えましょう。
前者はポートフォリオや、会社・お店のトップページ、特設ページなどで、崩しが活きやすい場面です。
後者はネットショップのカートや購入手続き、会員登録のフォーム、ツールの管理画面などで、崩さずに整然と並べるのが基本です。
同じサイトの中でも、トップページは崩し、購入手続きの画面は崩さない、というようにページごとに使い分けます。 - Q. 崩しているのか、崩れているのか、自分で判断できません。
A. 「なぜここを外したのか」を一言で説明できるかを確かめましょう。
「一番見せたい写真だから」のように理由が言えれば意図的な崩しで、理由が言えないずれは直すべき崩れです。
あわせて、外している量が数pxのように小さすぎないかも見直しましょう。
まとめ
グリッドをあえて崩すとは、整った配置の中で特定の要素だけをグリッドから外し、まわりとの差で目立たせたり、動きや開放感を出したりする表現です。
崩し方には「端まで広げる」「ずらす」「重ねる」などがあり、崩す場所は少なく、外し方ははっきりさせ、ほかの要素はグリッドどおりに保つことが大切です。
まずは自分が作った画面を1つ開き、一番見せたい写真だけを画面の端まで広げてみて、ほかの要素がそろったままかどうかを確かめてみてください。
