Webデザインの抑えるべき7つのポイント
1.ふたつの「3秒ルール」
- 読み込みは3秒までしか待ってもらえない
- サイトを閲覧した人も3秒以内に見るかどうかを決めてしまう
2.ユーザーは読まずに「眺めて」いる
せっかくあなたが一生懸命書いた記事もほとんどは読まれていません。眺められているというくらいです。
眺められているなかでもキラリと光る惹きのある部分だけが読まれるのです。
3.モバイルファーストが基本
一部のBtoBを除いて、スマホからのアクセスがメインのはずです。
当然スマホでみたときに使いやすい・見やすいデザインを心がけましょう。
4.「近接・整列・反復・対比」の4原則
- 近接：関連性の近い要素は近接させる。遠い要素は離す
- 整列：左揃えを基本に揃える
- 反復：要素を一定のルールで繰り返す
- 対比：要素が異なるときに色や大きさでハッキリと違いを出す
5.余白が大事
ついつい情報を詰め込みすぎてしまいがちです。
思い切って余白を取りましょう。※これが難しい！
6.フォント
日本語のテキストフォントならば、游ゴシック、メイリオ、ヒラギノ角ゴシックあたりを選ぶのが2019年現在は妥当ではないでしょ
うか。
問題は、フォトショップやイラストレーターで文字を入れるときの画像文字のフォント。
おしゃれ・上品に魅せたいなら明朝系がおすすめですが、明朝系は無料のものだと美しくないことが多いです。モリサワのリュウミンなど有料フォントがベターです。どうしても無料のフォントならばNoto Serif CJK JPやBIZ UD 明朝あたりが妥当ではないでしょうか。
力強さや可読性を重視するならゴシック体がいいでしょう。有料ならモリサワ新ゴやイワタUDゴシックが人気です。無料ならNoto Sans CJKあたりをおすすめしたいです。
7.配色
配色に関しては学ぶというより真似るということをオススメしています。
色彩検定などをベースに勉強するよりも、最前線のウェブデザインを真似たほうが数段早いし現実的です。
「サイトデザインサンプル」などと検索するとたくさんのサイトが出てきますので、そこでの配色を忠実に真似してみましょう。
サンプルの選び方は、あなたの作ろうとしているサイトと全く同じではなく隣のジャンルや顧客層が似ているジャンルがいいでしょう。同じジャンルだと、いかにもパクりという感じがでてしまいます。
参考にカラーコードを取得する場合は、Chrome拡張機能の｢Color Picker｣がおすすめです。