たきです。
このサイトは「はてなブログ」でつくられていて、ベースのデザインもはてなが提供しているテーマを使用しています。
はてなのデザインは洗練されたものが多く、あまり手を加える必要はないのですが、それでも自分好みのデザインにするためにCSS等で手を加えています。
その際にいくつか気をつけていることがあるので、これからサイトをつくろうと思っている人の参考になればと思い、ご紹介させていただきます。
サイトの「色」について
とにかくシンプルに
読みやすさ・見やすさを重視するのであれば、とにかくシンプルにするのが好ましいです。使う色は多くても4,5色まで。最低でも2,3色は使うのが理想だと思っています。
色が多すぎるとごっちゃごっちゃになって目が疲れますし、本当に強調させたい部分があまり強調されなかったりして逆効果になります。
背景色は明るすぎず、暗すぎず
サイト全体の背景色なんですが、明るすぎず暗すぎない色にするといいと思います。
目に優しいのは暗めの色なんですが、あまりにも暗すぎると、サイトのイメージ自体が暗くなってしまいます。
たとえて言うなら、黒背景に白い文字ってなんかホラーのサイトみたいじゃないですか？いくらアイドル系のブログをやっていても、ホラーのサイトみたいな見た目をしていると、それだけでサイトを閉じてしまう人も少なからずいると思います。
かといって明るすぎると色の使い方（コンストラスト）によっては目を疲れさせてしまうので、薄いグレーが好ましいと思います。
ちなみに、このサイトではコンテンツ部分の背景色は#f5f5f5,記事とサイドバーの背景色は#fffを使っています。
目立たせたい部分にはアクセントをつける
目立たせたい部分にはアクセントカラーをつけます。
ブログであれば、読者登録ボタンやお問い合わせボタン、見出しやサイドバーのタイトル部分などですね。
アクセントカラーをつけることで注意をひきやすくなります。このサイトでは#3e7500を使用しています。
テキストについて
テキストの色について
背景色のところで、コントラストによって目が疲れると書きましたが、これは文字色も同じで、背景色が真っ白で文字が真っ黒だとコントラストが強く、目が疲れやすくなります。かといって薄くすると、文字が読みにくくなります。
文字色は黒に近いグレーあたりがおすすめかと思います。ただし、これはあくまでも背景色が白の場合で、背景色が別の色の場合は、背景色に応じて文字色も変えていくといいです。
このサイトではヘッダー部分などを除き、白背景の記事エリア、サイドバーのコンテンツなどは#4d4d4dを使っています。
フォントサイズについて
モバイルフレンドリー対応_GoogleとAppleの推奨フォントは？ | ブログ | SINAP - 株式会社シナップ
上のサイトを見ると、Googleが推奨しているフォントサイズは16px以上であることがわかります。このサイトでも基本のフォントサイズは16pxにしています。
フォントサイズは小さすぎると文字が読みにくいですし、逆に大きすぎると読みづらいですし、1行に表示できる文字の数が減少するので、コンテンツが多いとスクロールを余計にする必要があります。
フォントサイズが16pxのサイトは多く、これが最適なサイズと言えそうです。
リンクについて
ブログに限らず、多くのサイトでは他のページに遷移する「リンク」が設置されています。
リンクは基本は薄い青色の文字と下線が表示され、「ここを押すと別のページに移動するよ」と丁寧に教えてくれています。
多くのサイトではこの薄い青文字＋下線という装飾がなされているので、それに則ったデザインにするのが好ましいのですが、サイトのデザイン上青い色は使いたくないという方も多いと思います。実は僕もそのうちの1人です(笑)
なので、リンクはテキストとハッキリ区別がつく色＋下線の装飾でもいいと思っています。
このサイトではアクセントカラーと同じ#3e7500＋下線で装飾しています。
テキストの装飾について［強調］
いくら強調させたいからと言って色を多用すると、どこが本当に大事なところなのかがサイトを見る人にはわかりません。
強調させるときは文字を太字にするだけで十分です。もし強調させる場所が2か所を超える場合は、1か所目は太字にするだけ、2か所目は太字＋赤色など目立つ色にすればいいと思います。
テキストの装飾について［引用］
もし他のウェブサイトから引用をする際は、基準をクリアしなければいけません。
出典を明記すること、出典へのリンクを貼ること、明確に区別されていることなどです。
引用をする際は、背景色を付けたり、余白を設けたりして引用以外の部分と明確に区別しなくてはいけません。
その際も背景色や文字色に配慮する必要があります。
このサイトでは引用部分の背景色は#f5f5f5を、左に#3e7500の縦線を引いています。
フォントについて
フォントはサイトのイメージに合わせて変えることが多いです。大人っぽいイメージを出したければ明朝体などを選ぶといいです。
ただ、明朝体は線が細いものもあり、あまり読みやすいとは言えません。メイリオやゴシック体などが僕は好きですね。
好みの問題なので、こうするべきだとはあえて言いません(笑)
まとめ
個性を出す前にまずはベースをつくる
シンプルにしすぎると、個性が出にくいというデメリットもあります。
しかし、読みやすさや見やすさを無視して個性を出そうとしすぎると、個性は出せても見づらいサイトになってしまうかもしれません。
まずはベースとなるものをつくり、そこから色を付けたりアクセントをつけたりして個性を出していくのがいいと思います。
あくまでも今日紹介したのは、僕が気を付けていることなので参考程度にしておくといいかもです...。
最後までご覧いただき、ありがとうございました。
