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