デザインを磨こう

素人っぽさの正体はばらつき

作ったものが素人っぽく見える原因は、色でも形でもなく、たいていは「ばらつき」です。余白が 12px と 20px と 16px で混ざっている、言い回しが場所ごとに違う。ひとつひとつは小さいのに、通して見ると落ち着かない画面になります。

使う数を減らす

余白はまず種類を減らします。このサイトなら 0.5rem / 1rem / 1.5rem / 2rem のように、使う値をあらかじめ決めておく。迷ったら新しい数を足さず、決めた中から選びます。

広い画面では、読む幅も余白も少しゆったりさせたほうが目が楽になります。900px 以上のときだけ幅を 52rem に広げ、セクションの内側と下の余白を 2rem にそろえましょう。ファイルのいちばん下に足します。

言葉のトーンもそろえる

そろえるのは見た目だけではありません。このサイトの文はどれもやわらかい「です・ます」で、ヘッダーには「Web エンジニアを目指しています」と書いてあります。ページの説明だけ素っ気ないままだと、検索結果で見たときとサイトを開いたときで印象がずれます。説明文もサイトの言い方に合わせて書き直します。

1. style.css のいちばん下に @media (min-width: 900px) のブロックを足す
2. 広い画面で .site-header .site-main .site-footer の max-width を 52rem にする
3. .section の内側と下の余白を 2rem にそろえる
4. ページの説明を、サイトの言い方に合わせて書き直す