「要素を並べてはみたけれど、なんだか伝わらない」——この記事は、色・余白・書体まで進んだ方への「Webデザイン」の仕上げです。読み終わる頃には、1枚の画面をどの順番で組み立てるかが分かり、デザインの4原則を自分の画面の説明に使えるようになります。

先に結論から。レイアウトとは、置き方を決める作業ではなく「見る順番」を決める作業です。人の目には決まった歩き方があります。その道すじの上に、伝えたいものを順番どおり置く。それがレイアウトです。

スーパーの売り場と、同じ考え方

スーパーに入ると、最初に目に入るのは色とりどりの野菜や果物です。奥に進むと肉や魚があり、レジの手前には小さなお菓子や電池が並んでいます。あの並びは偶然ではありません。お客さんが歩く順番に合わせて、見せたいものが置かれています。

Webページも同じです。人の目は左上から入り、横に走り、下へ降ります。写真や図の多い画面ではアルファベットのZを描くように、文章の多い画面ではFを描くように動きます。この道すじに逆らって物を置くと、どんなに大事な情報でも見られません。

最初の一画面に置くのは、3つだけ

スクロールせずに見える最初の一画面に、いくつ情報を置くか。答えは3つです。1番目は「誰に向けた何のページか」が分かるいちばん大きな一言。2番目は読む理由になる2〜3行の説明。3番目はしてほしい行動を1つだけ示すボタンです。

ボタンを2つ3つ並べたくなりますが、選択肢が増えるほど人は決められなくなります。会社沿革も所在地も大切ですが、それは下に送って構いません。置く順番は、見せたい順ではなく、読む人が知りたい順です。

レイアウトは、4つの原則で説明できる

デザインには昔から使われてきた4つの原則があります。近接は、仲間どうしを近づけて別のものと離すこと。余白の記事で扱った内容です。整列は、要素の端を見えない1本の線にそろえること。反復は、同じ形・同じ余白・同じ色をページ全体でくり返すこと。強弱は、主役をはっきり大きく、脇役を小さく静かにすることです。

この4語のいいところは、「なんとなく変」を言葉に変えられることです。「ここが変です」ではなく「ここの左端がそろっていません」と言えれば、直す場所が決まります。私たちの社内でも、デザインの確認はこの4語で行っています。

いちばん効くのは「そろえる」

4つのうち、初心者がすぐ結果を出せるのが整列です。文字も画像もボタンも、左端を同じ位置にそろえる。それだけで、画面はまとまって見えます。中央ぞろえは見出しなど短いものだけにして、文章は左ぞろえにするのが基本です。

そろえる線は画面には出ません。けれど、そろっていないことは見る人に伝わります。数ピクセルのずれの積み重ねが、「なんとなく素人っぽい」の正体です。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズが、ある企業の採用ページを引き継いだときのことです。お問い合わせフォームへのボタンが、ページのいちばん下、会社沿革のさらに後ろに置かれていました。担当の方は「一通り読んでから応募してほしい」というお考えでした。

そこで私たちは、「このページに来た人に、最後にしてほしいことを1つだけ教えてください」とお聞きしました。答えは「まず応募してほしい」。ならば置き場所は最下部ではありません。ボタンを最初の一画面と各章の終わりに置き直し、沿革は下へ移しました。レイアウトは好みの調整ではなく、依頼主の目的を画面の順番に翻訳する仕事です。

レイアウトは、訪問者の時間を短くする

初めて来た人は、そのページに何があるかを知りません。整ったレイアウトとは、その人が探している場所まで最短で歩ける道のことです。色も余白も書体も、ここまで学んだすべては、この道を作るための材料でした。私たちが順番にこだわるのは、依頼主のサイトの先で、誰かの数十秒を取り戻すためです。

今日からできる、たった1つのこと

まとめ

レイアウトは、見る順番を決める作業です。人の目はZ型・F型に動き、最初の一画面には一言・短い説明・行動1つの3つだけを置く。そして近接・整列・反復・強弱の4語で自分の画面を点検する。HTMLの1つのタグから始まったこの階段は、ここでひと区切りです。私たちCCコミュニケーションズは、学んだことを実際の依頼主の課題に使いながら伸ばせる環境で、Web制作とデザインの仲間を探しています。