投稿者: Webデザインの三大要素について
大事な要素はいくつもありますが、特に第一印象は大事です。
ぱっと見でこのサイトを見るかどうかユーザーが判断するには３つの要素が大きく関係しています。
・フォント
・レイアウト
・余白
フォント
書体には大きく分けてゴシック体と明朝体があります。
当サイトで使用しているのはゴシック体の方になります。
可読性が高いので文章など読ませたいときに使用するのがおすすめです。
明朝体は書道で書くような角ばった書体です。
タイトルやアクセント的に使うとオシャレな感じになります。
あとは伝統的な日本文化を紹介とか和を感じさせたいときにもおすすめです。
また、タイトルや目立たせたい見出しなどは太文字やサイズを大きくして目立たせることもポイントです。
ゴシック体は、游ゴシック体、ヒラギノ角ゴ、メイリオなどが綺麗で読みやすいのでおすすめです。
明朝体は、游明朝体、ヒラギノ明朝体などが綺麗ですね。
最近Webフォントといって、CDNでフォントを読み込ませ表示する方法も一般的になっています。
日本語のWebフォントだとゴシックNoto sans japaneseやminmojiなどが綺麗です。
明朝体だとIPAex明朝というものもフリーで綺麗な明朝体でおすすめです。
レイアウト
なんとなく並べるのでなく、関係性の強いものや強調したい個所は大きく見せるなどレイアウトも大切です。
レイアウトにはいくつかルールがあるので紹介します
・整列
・グループ化
・余白
大きく分けて3つになります。
整列
テキストや図などはバラバラに配置するのでなく、高さや幅など揃えられる個所は揃えましょう。
これだけでも、各段に印象が良くなります。
・左揃え
人の視線は左から右にいきます。
なので、タイトルは中央、文章は左揃えといった風に位置がバラバラだとそれだけで分かりづらくなります。
明確な理由がない場合は左揃えに配置しましょう。
グループ化
関連性の強いもの同士はテキストや図などを近く配置しましょう。
そうすることで、これは同じことについて述べているのだなと分かりやすくなります。
例をあげると、コンピュータについての画像とテキスト、スマートフォンについての画像とテキストがあったら、まずコンピュータの画像とテキストを近く配置し、スマートフォンのものと余白を取って配置するといった具合です。
余白
グループ化のところでも述べましたが、余白はサイトの見やすさや分かりやすさに非常に関係します。
ページ全体をぎゅうぎゅうに画像やテキストなど配置するのでなく、paddingを取ったり、それぞれのグループごとにゆったりとした余白を取りましょう。
第4回まとめ Webデザインの三大要素をしっかり守ろう
今回はWebデザインにおいて特に重要な要素を3つ紹介しました。
その他にも様々ポイントはありますが、あげた3つをしっかり押さえておけば少なくとも見にくいサイトにはならないと思います。
