Webデザイナー必見、実務で役立つ逆引きレイアウト集

• 作成：2015/07/21
• 更新：2016/06/29
• Webデザイン >

オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

• １．視線を停止させたい
• ２．上質さを出したい
• ３．静寂さを出したい
• ４．親しみやすさ を出したい
• ５．文字の存在感を出したい
• ６．メリハリを出したい
• ７．先進的な演出をしたい
• ８．広がりを出したい
• ９．メッセージを目立たせい
• １０．要素を上手に対比させたい
• １１．ラインをオシャレに使いたい
• １２．躍動感を出したい
• １３．ハッキリ見せたい
• １４．シンボル・ロゴを目立つ位置に配置したい
• １５．男性的なグリッドを軽やかにみせる
• １６．バラエティ感を出す
• １７．マスクを利用する

１．視線を停止させたい

• 立山の水 さらら

広いスペースに小さな文字がポツンとあると、一瞬視線が止まりませんか？

広めの余白に小さなテキストを配置すると上品さを演出できる他、そのテキストを主役にすることが可能となります。ここまで極端にしなくても、読んで欲しいメッセージがある場合、フォントの大きさと余白を調整してみることも工夫の1つです。

２．上質さを出したい

気品に満ちているような雰囲気、高級感を出したいのならセンター揃えの組みでいくのも一手です。以下は配色を減らし写真もテキストもセンターに寄せてあります。商品写真を一番大きくすることで、靴を主役にしています。

• [音注意！] FOOTSTOCK ORIGINALS

３．静寂さを出したい

お次は風のないような穏やかで上品な演出。上記で書いたセンター揃えに加えて、より余白が占める割合を増やしています。花の色も背景も柔らかく余白となじんでいるので、テキストが目立つようになっています。

• MIKIYA KOBAYASHI

４．親しみやすさ を出したい

写真と文章の割合を調整します。文章中心だと格調高い印象になり、写真やイラストを使うと楽しく親しみやすい印象になります。

写真と文章の比率を図版率と言い、写真を使う比率が高いほど「図版率が高く」なります。商品詳細ページなどは、図版が高めだと読みやすくなります。

• cle

左から右に動く視線の動きを利用して、上記のサイトは左側に写真、右側に文章を配置してあるので自然に文章も視線に入ります。逆に写真が右側だったり、文章下のサムネイル写真が無かったりすると読みにくくなると思います。

年齢層・リテラシーの度合いなどを想定しながらコンテンツを調整するとユーザーの滞在時間が長くなります。

５．文字の存在感を出したい

• Big World Small Planet

色は隣り合う色の影響を受けます。文字の存在感を出すには明度をハッキリさせる必要があるので暗めの背景かフィルターの上に明るめの文字を乗せます。これを明度対比といいます。

ゴーストボタンの識別性を高める為に暗めの写真や半透明レイヤーを使っているサイトも多いですよね。背景を濃くすると「明暗の対比」が強くなり、白色が浮かび上がることでメリハリがつきます。

またダークカラーを土台に白等の明るい色を加えるとコントラストが強くなり、高級感や優雅なイメージを与えます。

６．メリハリを出したい

• Kuhlabo

配色を抑えまとめ過ぎると平凡な印象になりがち。そんな時は服でもそうですが、ベースカラーの反対色となる差し色（アクセントカラー）を少しだけ入れるとメリハリが出ます。

７．先進的な演出をしたい

そろそろフラットデザイン特有のベタ塗りから卒業して、複数の色相を組み合わせてみたい場合は明度や彩度でなく「色相のグラデーション」を写真やファーストビューに載せる方法もアリです。

ウェブサービスなどで見かける寒色系をベースにした配色でテクノロジー感を出しているサイト例。こちらは中性色の紫と緑をベースに使い、近未来的で先進的な演出を出しています。

• Progate

色相が対象である配色（反対色に近い色）をグラデーションでつなげると、大胆な印象を演出することができます。こちらはグラデーションにネオンを取り入れて、より先進的なイメージを出しています。

• Loop

• Moodsoup

先進的な印象を出すために、ブルー系の色相を使ってあります。

• Nine Sixty

８．広がりを出したい

• 450 GSM

情報の区切りをハッキリさせたいために囲み（線や背景色、影）を使いすぎると窮屈感が出てしまうこともあります。見えない線を意識して、余白と要素の並びのみで情報を整理すると、広がりを持たせつつ洗練された雰囲気を出せます。

９．メッセージを目立たせい

背景写真の上に文字を載せる時に、テキストを反転させるようにボックスで囲むことで、背景との対比を強めることができます。

• うみたま

１０．要素を上手に対比させたい

中心線から左右対称にデザインする手法「シンメトリー」を使います。強調したい要素を対比させたい時に便利。バラバラにならないように配色を抑え、シンメトリーに見せています。background-size: cover;とwidth:50%;を使って背景写真を分割させてます。

• 東京大学i.school

• tsune ni idm

１１．ラインをオシャレに使いたい

安定感を感じさせる三角形、緊張感を出す逆三角形やライン。三角形の構図は収まりのよいレイアウトを配置するための手法です。以下は画面の外まで続いているかのような線を上手に配置されている例です。

• [音注意！] Lois Jeans

• Disport

• Stadium TechCenter 1

• fabriq Inc.

１２．躍動感を出したい

要素を画面に収めるのではなく、紙面での裁ち落としのように画面から線をはみ出させるように配置させることで躍動感を出します。

• WORDSBERG

• Laetitia Negre

• Secret Study

• Stupid Studios

• ACNPL WGL

• リムレット株式会社

１３．ハッキリ見せたい

• T-SITE

重要なテキストや商品がぼやけていないか、白黒（モノクロ）で確認すると明度差が分かります。文字の見えやすさを視認性といいますが、これを左右するのが明度差です。白黒で印刷する人もいるので、レイアウトを組む際は頭に入れておきたい。

モノクロ変換のChrome拡張はこちら

• Webサイトを常時グレースケール化するChromeエクステンション・(un)clrd - かちびと.net

１４．シンボル・ロゴを目立つ位置に配置したい

テキストだけでなく、ロゴやシンボルをファーストビュー中心に配置します。強めの配色や透過、背景にダーク系のフィルタを載せることで、より存在感を演出します。

• オンズ

• KeiSato Design

• Founders Pledge

• ビーナスベッド

• Hublot

１５．男性的なグリッドを軽やかにみせる

大きさの違うタイル型の正方形を並べて配置するグリッドレイアウトを使う場合、配色を統一したりジャンルを同じにする、または写真に全て同じエフェクトを載せるなど一貫性を持たせると、まとまりある見え方にすることが出来ます。

グリッドに沿ってレイアウトすると理性的で男性的な印象が強くなります。しかし以下はパステル系の色を載せることで、カッチリした印象を感じさせないレイアウト。

• HOW arkitekter

• SAGA INC.

１６．バラエティ感を出す

情報あふれる感じを出したい場合、余白を詰めて版面率を高くします。

こちらはブロックを小さくし、少ないスペースで様々なコンテンツを選択できるようにしてあります。パネルを敷き詰めたようなスタイルで、その中でもブロックの一箇所にメッセージを上手に挿入してある例。

• [音注意！] 代々木アニメーション学院

• DBLG

１７．マスクを利用する

文字だけで構成すると堅苦しさを与えてしまう場合があります。そんな時は文字などをイラスト化する方法もありですが結構難しい。どうしてもアイデアが思い浮かばない時は、マスクを利用する方法もあり。

• Dogstudio

• Talk PR

• Hix Snedeker Companies

• Music