「自分にはデザインのセンスがないから」。
そう言って一歩を踏み出せない人は、たぶん大事なことを誤解しています。本書はその誤解を、最初の数ページで静かに崩してきます。
著者のManaさんは、デザインのセンスとは生まれ持った才能ではなく、基本やセオリーを学んだ「知識」の蓄積だと言い切ります。勉強すれば誰でも身につく、と。
この本は、Webサイト制作の技術（HTMLとCSS）と、デザインの理論（配色・余白・レイアウト）を1冊にまとめ、コードの書き方だけでなく「なぜそう作るのか」まで届けてくれる入門書です。
コード本でもデザイン本でもなく、両方を同じ文脈の上で学べる――この設計が、数あるWeb入門書のなかで本書を際立たせています。
技術書なのに、技術から始まらない
見栄えを良くするのがゴールではなく、ユーザーが心地よく目的を達成できることが、良いデザインです。
本書の面白さは、最初に置かれる問いが技術ではないところにあります。
著者がまず定義するのは「デザインとは何か」。それは美しく装飾することではなく、伝えるための手段であり、問題解決の手段である――という立場です。
デザインはあくまで「伝えるための手段」であり、「美しく装飾すること」ではない
（本書より）。この一文があるから、後に続くHTMLもCSSも配色も、すべて「ユーザーに情報を正しく届けるため」という一点に収束していきます。
技術とデザインがバラバラの知識にならず、1本の線でつながります。私が本書を信頼できると感じた最大の理由がここです。多くの入門書は「タグの一覧」と「見た目のコツ」が別々の章に分断され、初心者は結局どちらも丸暗記で終わります。
本書はそうならない設計になっています。
象徴的なのが、「良いデザイン」の例として持ち出される紙幣のエピソードです。1988年、オーストラリアで世界初のプラスチック製紙幣が発行されました。
サーフィンなどで紙幣が濡れて破れる、という生活上の問題を解決するためです。結果、暮らしは快適になり、おまけに偽造防止にもつながりました。著者はこれを立派なデザインと評価します。
華やかだから良いのではなく、現実の課題を解いたから良いのです。この尺度に立つと、私たちが普段「デザイン」と呼んでいるものの大半は、実は装飾の話で止まっていたのだと気づかされます。
「センスがない」は、知識不足の言い換えだった
デザインのセンスは才能ではなく知識であり、勉強すれば誰でも身につきます。
第1章でいきなり、初心者の心を軽くする話が出てきます。基本やセオリーを勉強すれば、誰でも見やすいものを作れる――。
私はこの主張に、正直ちょっと救われました。「センスがない」を理由にしてきた人ほど、これは効きます。センスという言葉は、努力ではどうにもならない壁のように聞こえます。でも知識なら、今日から埋められます。壁が階段に変わる感覚、と言ってもいいのです。
本書が誠実なのは、この主張を精神論で終わらせない点です。視線の動き、配色の比率、余白の使い方。デザインを徹底的に「法則」へと分解していきます。
たとえば人の視線は基本的に上から下、左から右へ流れます。だから一番見てほしい要素は左上に置きます。飲食店が看板メニューを左上に置くのと同じ理屈です。
さらに本書は、初めて訪れるサイトや画像の多いサイトでは視線が「Zの法則」で全体を見渡し、何度も訪れる文字中心のサイトでは「Fの法則」で目的の情報を拾い読みする、と区別します。
読者がどんな状態で来るかで、最適な配置は変わります。なんとなくの感覚で並べていたものに理由が与えられていく感覚は、読んでいて気持ちがいいです。
強調の作り方も拍子抜けするほどシンプルで、目立たせたい情報は面積を大きくするだけで注目度が上がります。ECサイトの「カートに入れる」ボタンが一回り大きいのは、まさにこの原則です。
つまりこの本は「Webを作る人だけの本」ではありません。チラシ、企画書、プレゼン資料。伝える仕事をしている人すべてに、地続きで効く知識が詰まっています。
使いやすさは気合いではなく設計である
使いやすさとは気合いやセンスではなく、設計判断の総和です。
良いデザインの中身を、本書は「ユーザビリティ（使いやすさ）」という言葉でさらに具体化します。ユーザーがストレスなく、迷わず目的の情報にたどり着ける状態のことです。
ここで少し意外な事実が出てきます。Webサイトの文章は、最後まで読まれません。読みやすいかどうかは、最初の2文で判断されてしまうというのです。だから結論から先に書き、専門用語を避けます。メールでもチャットでも通じる話で、最初の一行に結論を置くだけで伝わり方が変わります。
見やすさのカギになるのは、背景色と文字色のコントラストです。コントラストが弱い配色は、画面をグレースケールにすると文字がほとんど読めなくなります。
本書はこの検証法を紹介し、視認性の大切さを実演してみせます。加えて、「ここを押すとどうなるか」が予測できるラベルにすること、画像のファイルサイズを最適化して表示速度を上げること。
こうした地味な配慮の積み重ねが、離脱を防ぎます。設計で解くという主張が、ここでも一貫しています。
余白と配色――非デザイナーが今日盗める章
余白は「何もない場所」ではなく、画面を見やすくし、情報を整理する積極的なデザイン要素です。
数ある法則の中で、私がいちばん「なるほど」と膝を打ったのが余白の話でした。
初心者はスペースを見ると埋めたくなります。でも本書は逆を説きます。
その正体は、情報のグループ化です。関連するものは近づけ、関連しないものは離します。名刺で言えば、名前と役職は寄せて、住所や連絡先は少し離します。たったそれだけで、情報が整理されて見えます。
CSSでこの余白を作るのがmarginとpaddingで、要素を四角い箱とみなすと、箱の外側の余白がmargin、フチから中身までの内側の余白がpadding。
隣との距離を取りたいときはmargin、箱の中にゆとりを作りたいときはpadding、と使い分けます。
配色についても、本書は「好きだから」で色を選ぶことを戒めます。色はターゲットや目的から論理的に決めるもの。その指針が、配色の黄金比です。
この比率を守るだけで、配色は驚くほどまとまります。メインカラーは最も見てほしいテーマカラーで、全体の雰囲気を決める軸。信頼を伝えたいなら青、情熱なら赤、というように、伝えたい感情から1色を選びます。
この70:25:5を知った瞬間、街の広告やアプリの画面の見え方が変わるはずです。
文字まわりにも、迷わないための数字があります。
- 本文
- 14〜18px、行間は1.5〜1.9、1行は30〜45文字程度が読みやすい
- ジャンプ率
- 文字サイズの差を大きくすると躍動的に、小さくすると上品な印象になる
- フォント
- 統一感のために1サイト1〜3種類まで
- 中央揃え
- きれいに見えるのは2〜3行まで。それより長い文章は左揃えが読みやすい
- 太字
- 強調したいからと長文を全部太字にすると画面が黒々として逆に読みづらくなるので、見出しやキーワードなど要所に絞る
これらはコードを一行も書かない人でも、明日の資料作りにそのまま流用できる教訓ばかり。Webを作らない人でも十分に元が取れる章だと思います。
いきなり作らない、という作法
Webサイト制作は、いきなりコードを書かず、企画から順に段取りを踏みます。
本書がただのコーディング本と違うのは、手を動かす前の工程を丁寧に教える点です。
Webサイト制作には、いきなりコードを書き始めない段取りがあります。企画を立て、サイトマップを作り、ワイヤーフレームで骨組みを決め、デザインし、コーディングし、公開します。
本書はこの6つのステップを順に示します。出発点になるのが「ペルソナ」です。
「23歳の女性。流行に敏感で……」のように、年齢は10歳前後の幅に絞って描きます。誰にでも当てはまるサイトを目指すとブレるが、一人に絞ると軸が定まります。そのうえで「ユーザーに何をしてほしいのか」というメインゴールを決め、それを支えるサブゴールを1〜3つ洗い出します。
目的が決まって初めて、コーポレートサイトかプロモーションサイトかといった種類が選べます。ワイヤーフレームは装飾を省いて骨組みと優先順位だけを描く図で、ペンと紙の手書きでも構いません。
専門ツールがなくても始められるハードルの低さも、初心者にはありがたいです。
技術の核心は、HTMLとCSSのシンプルな役割分担にあります。HTMLはページの「土台」で、文章や画像に「これは見出し」「これはリンク」という意味を与え、文書の構造をコンピューターに伝えます。
h1からh6の見出しタグの順序を守ると、筋道の通ったページになります。一方のCSSは土台に「装飾」を与える役割で、文字の色やサイズ、レイアウトを指定します。
この分担を理解すると、初心者がつまずく場所も見えてきます。画像が表示されないのは、たいていファイルパスの書き間違い。同じフォルダならファイル名だけ、別フォルダなら「images/ファイル名」、1つ上なら「../ファイル名」と相対パスを正確に書く必要があります。
レイアウトで登場するのがFlexboxとCSSグリッドで、前者は横並びのような直線的な配置、後者は格子状の複雑な配置に向きます。本書はこの最新手法を、最初から標準として教えてくれます。
後半は、WCB CAFEという架空のカフェのWebサイトを丸ごと作っていく実践パートです。前半で学んだ法則を、実際の制作の流れの中で使い直します。知識が「使えるスキル」に変わるのはこの工程です。手順を一つひとつ追う部分は、ぜひ本書を開きながら手を動かしてください。
割り切りが生む、初心者への一本道
対象を絞り切ったからこその一貫性が、完全初心者を「作れた」まで導く一本道になっています。
なお本書は、静的なフロントエンドとデザインの基礎に特化しており、JavaScriptの動的表現やバックエンドの構築には深く踏み込みません。
完全初心者がつまずかずに「作れた」まで到達するための一本道として、私はこの割り切りを高く評価しています。あれもこれもと詰め込んだ入門書より、ゴールまで迷わず歩ける本のほうが、最初の一冊としてはずっと価値があります。
最後に、本書が安心させてくれる一言を添えておきます。制作中にうまく表示されないのはよくあることで、最初は簡単なミスを見落としがちだ、と著者は書いています。エラーが出ても焦らず、スペルミスや記号の抜けから順に確かめればいいのです。この一言があるだけで、最初の一歩がぐっと軽くなります。
明日からできることは、本書の提案に沿えば十分です。
- コードを書く
- 無料のVisual Studio Codeを入れてHTMLを1行書いてみる
- 良いデザインに触れる
- ギャラリーサイトで良いデザインに触れてトレンドを目に焼き付ける
- 資料を作り直す
- 次に作る資料を、70:25:5の配色と結論ファースト、関連情報のグループ化だけで作り直してみる
「センスがない」は、もう言い訳にできなくなります。
足りなかったのは、知識だけだったからです。
合わせて読みたい
『非クリエイターのためのクリエイティブ課題解決術』齋藤太郎さん 「デザイン＝問題解決」という本書の前提を、広告のプロの現場感覚でさらに深掘りできます。センスではなく方法で課題を解く考え方が地続きです。
『解決は1行。』細田高広さん コピーは飾りじゃなく課題を切り裂く道具だ、という主張は「デザインは装飾ではない」と完全に響き合います。言葉で伝える側の本として並べて読むと理解が立体化します。
『すごい言語化』木暮太一さん 「語彙力がない」が伝わらない本当の原因ではない、という指摘は「センスがない」が言い訳にならないという本書とそっくりです。伝える力もまた、才能でなく技術だと教えてくれます。
