見た目を作り込む

前の章で、ページを組み立てられるようになった。でも作ったものを見て「なんとなく素人っぽい」と感じたはずだよ。この章はその差を埋める回だ。

プロが作ったページと自分の作ったページの違いは、たいてい細部にある。色づかいのセンスや凝った装飾ではなく、余白の取り方、文字の間隔、影のつけ方といった、言われないと気づかないところの積み重ねだ。逆に言えば、そこは学べば埋まる差でもある。

最初に扱うのが 面のつくり方。背景に色を敷き、その上に文字を置く。このとき効いてくるのが透明度だよ。色を半分透かして重ねると、下の色と混ざって深みが出る。真っ黒の文字を置くより、少し透かした黒のほうが紙に印刷したような落ち着きが出る。

文字まわりでは 字間と行間 を扱う。文字と文字のあいだ、行と行のあいだをどれだけ空けるか。詰まっていると窮屈で読みにくく、空きすぎるとまとまりがなくなる。とくに見出しは少し詰め、本文は少し空けると読みやすくなる。小さなつまみだけれど、いじると印象がはっきり変わるよ。

次に ヘッダーと一覧。どのサイトにもある、上部の帯と、カードが並んだ領域だ。ここではじめて「複数の要素をどう配置するか」という話になる。並べる、そろえる、間隔を均一にする。レイアウトの基本的な悩みが全部出てくるところだよ。

章の後半は 触ったときの反応。マウスを乗せたら色が変わる、押したら少し沈む。こうした反応があると、「ここは押せる場所だ」と使う人に伝わる。装飾ではなく情報として機能する。反応が何もないボタンは、押していいのか分からないので押されない。

変化のさせ方も学ぶ。色が瞬時に切り替わるのと、ゆっくり変わるのとでは、受ける印象がまるで違う。ゆっくりといっても0.2秒くらいの話で、意識には上らない。それでも「なめらかだ」と感じさせるには十分だよ。

スマホで作るときの注意もひとつ。押せる場所は十分な大きさを取ること。指はマウスカーソルより太いので、見た目に小さいボタンは押しづらい。この教材の画面もすべてその基準で作ってある。

影の扱いも覚えておきたい。影をつけると要素が浮き上がって見え、「これは他とは別のまとまりだ」と伝わる。ただし濃くつけすぎると古くさく見えるので、薄く、広がりすぎないように置くのがコツだよ。カードの一覧のように同じものが並ぶ場面で、とくに効いてくる。

見た目を作り込むときの考え方も伝えておきたい。そろえることが何より効く。左端をそろえる、間隔を同じにする、文字の大きさの種類を増やしすぎない。ばらばらの値を感覚で置いていくと、理由は言えないのに雑に見える画面になる。逆に、決めた値を繰り返し使うだけで、それらしくまとまるよ。

だから、色や余白はあらかじめ何種類か決めておいて、その中から選ぶといい。余白なら小・中・大の3段階、色なら文字色・薄い文字色・背景色・アクセント色。毎回その場で決めるのをやめると、統一感は勝手についてくる。

見本を探すのもいい方法だよ。よくできていると感じたサイトを開いて、余白がどれくらい空いているか、文字の大きさが何種類あるかを観察してみる。きれいに見えるものには、たいてい理由がある。真似るのは配色や飾りではなく、その理由のほうだ。

この章を抜けると、作ったページを人に見せられるようになる。動くだけでなく、「ちゃんとしている」と思ってもらえる状態を目指そう。細部の積み重ねなので、一気にうまくはならないけれど、確実にうまくなる部分だよ。