見た目を、磨く。

まず、磨くポイントは4つ

デザインと聞くと身構えてしまいますが、初心者がまず触るのは ①色 ②フォント（書体）③余白と文字サイズ ④写真 の4つだけで十分です。そして最後に スマホでも崩れないか を確認します。プロのような難しいことは要りません。「絞る」「そろえる」——これだけで見た目はぐっと締まります。

① 色は、2〜3色に絞る

いちばん効果が大きいのが色です。コツはたったひとつ、色を増やさないこと。背景・文字・差し色（アクセント）の3色だけ決めれば、全体に一本筋が通ります。Claude には、こう頼んでみましょう。

全体の色を、生成りの背景（#F6F4EF）・墨色の文字・差し色に朱色、の3色に統一してください。

② フォント（書体）を決める

フォントとは文字の見た目のことです。大きく分けて、線の端に飾りのある明朝体（みんちょうたい）と、すっきりしたゴシック体の2種類を覚えておけば十分です。見出しは明朝で品よく、本文はゴシックで読みやすく——という組み合わせが定番です。

見出しは明朝体、本文はゴシックにして、行間を広めにとってください。

③ 余白と文字サイズで、読みやすく

ぎっしり詰まった文章は、それだけで読む気が失せます。逆に 余白（よはく） をたっぷり取り、行間 を少し広げるだけで、同じ文章がぐんと読みやすくなります。文字が小さすぎないか、行が詰まっていないかを意識して、Claude に調整を頼みましょう。

本文が少し詰まって見えるので、文字サイズを少し大きくし、行間と段落のあいだの余白を広げて、ゆったり読めるようにしてください。

④ 写真の入れ方

写真が1枚あるだけで、ページの印象は大きく変わります。用意した画像をフォルダに入れて、どこに置きたいかを言葉で伝えれば大丈夫です。横幅いっぱいに広げたり、文章のとなりに並べたり、頼み方ひとつでレイアウトが変わります。

このフォルダに入れた hero.jpg を、トップの見出しの下に横幅いっぱいで表示してください。スマホでも見切れないようにしてください。

⑤ スマホ対応 — レスポンシブを頼む

いまホームページを見る人の多くは、スマホです。レスポンシブとは、同じHTMLが画面の幅に合わせて自動で形を変えてくれる仕組みのこと。PC・タブレット・スマホ、それぞれに別のページを作る必要はありません。一言、こう頼みます。

スマホで見たときに横スクロールが出ないように、レスポンシブ対応にしてください。

⑥ スマホ表示を、自分の目で確認する

頼んだら、必ず自分で確かめます。スマホを取り出さなくても、PCのブラウザだけで確認できます。

1. かんたんな方法：ブラウザのウィンドウの幅を、手で思いきり狭めてみる。文字や写真がはみ出さず、自然に縦に積み重なればOKです。
2. しっかり見る方法：ブラウザの画面を右クリック →「検証」または「開発者ツール」を開き、スマホの形のアイコン（デバイスツールバー）を押すと、スマホ表示に切り替わります。
3. 横スクロールが出ていないか、ボタンや文字が画面からはみ出していないかをチェックします。

この章で出てきた言葉

レスポンシブ

同じHTMLが、画面の幅に合わせて自動でレイアウトを変えてくれる仕組み。PC用・スマホ用を別々に作らなくて済みます。

フォント（明朝／ゴシック）

文字の書体のこと。明朝体は線に飾りがあり上品、ゴシック体はすっきりして読みやすい。見出しと本文で使い分けます。

余白（マージン／パディング）

要素のまわりの空きスペース。マージンは外側の余白、パディングは内側の余白。広く取ると読みやすくなります。

16進カラーコード

#F6F4EF のように # と6文字で色を指定する書き方。色を正確に伝えたいときに使います。