Webデザインとは揃えること？！｜初心者がつまずくポイントとデザインの基本 名古屋でホームページ制作ならCatworkWeb

Webデザインとは揃えること？！｜初心者がつまずくポイントとデザインの基本

デザインされている日常

今年も残すところ２日ですね、デザイナーの古田です。

「デザイン」という単語は、身の回りを見渡せば、当たり前の様に、とても自然な顔をして私たちの日常に寄り添っています。日々耳にする例としては、「ファッションデザイン」「インテリアデザイン」「プロダクトデザイン」など世の中全てが「デザイン」されてるんじゃないかと思う程です。

「Webデザイン」も然り。Web制作会社に勤めて、必要以上に「デザイン」について（改めてというより、新しい目線で、という表現の方が合致するのかな）考察するようになりました。暫くWebデザインに向き合ってきて強く感じたこと、それは「Webデザインは揃えること」という認識です。

他のデザインとWebデザインの違う点

私自身、元々イラストを描いたりアパレルでMD（マーチャンダイザー）を経験したり、どちらかというと「感覚的」な人間でした。感覚的に色の配色を決めたり、人間のスケッチも何となくバランス重視で描いたり、感覚的に服装のコーディネートを組み立てたり、何となく袖や襟を折って見せたり。それも一種のデザインです。

けれどWebデザインは少し違います。
「なんとなく」では成立しにくく、すべてに理由が求められるのがWebの世界。
中でも象徴的なのが「揃える」という行為です。

文字の並びを揃える（中央揃えとか）、文字の大きさを揃える、上下左右余白を揃える、ページ全体の色を揃える、写真の大きさを揃える、線の長さを揃える、揃える、デザイン、揃える、デザイン、揃える、の繰り返しw。

「揃える」って、実は難しい

感覚的な私は、当初、Webデザインをするにあたり、感覚的に余白や行間や要素の大きさを「揃えて」いました。しかし、それが感覚的であるあまり、「揃ってなかった」のですね。Webデザインの基礎は、上司に散々叩き込まれました（今でもですがw）。Webデザインの基礎として、上司に何度も指摘されたのが「ピクセル単位で意識すること」。
1pxのズレが「揃っていない」印象を生み、結果としてユーザーの“違和感”になります。

よくある「揃っていない」例

• 見出しと本文の余白にバラつきがある
• 写真のサイズやアスペクト比が統一されていない
• フォントサイズや行間がランダムになっている
• コンテンツの左右位置が微妙にずれている

こうした小さな“ズレ”が積み重なると、全体の印象がチグハグになり、「なんか読みにくい」と感じさせてしまいます。

Webページはピクセルで構成された世界です。
だからこそ、きちんと揃っていると、それだけで美しく、読みやすくなるのです。

Webデザインの講師をしていても、生徒さんが難しいと感じるのは「揃える」部分の様子です。どうしても感覚的になってしまう、最初は、ですけどね。

揃えることから、デザインは始まる

揃っているデザインは、読みやすく、見る人に安心感を与えます。
また、コーディング作業にもスムーズにつながりやすく、開発効率や保守性にも寄与します。

Webデザインで大切なのは、オシャレでカッコいいデザインではなく、目的がキチンと伝わることです。勿論ビジュアルも意識しますが、そこでWebデザインは「揃える」ことで伝わりやすくなるのです。オシャレやカッコいい、は揃えた先にあるものかと感じています。

「デザインされている日常」は、実は「揃えられている日常」でもあります。
日本語にも「足並みを揃える」「靴を揃える」「髪を揃える」など、日常の中に“整える”という行為がたくさんありますよね。

Webデザインも同じ。
揃えることから、整った世界が生まれ、結果として“伝えたいこと”がまっすぐ届くページになります。2021年も、伝えたい思いをきちんと形にできるよう、
そして「揃えるデザイン」の質をさらに高められるよう、日々精進してまいります。