WEBサイトを作る上で、最も重要なのは何？

HTMLなどの知識？　内容（本文）？　デザイン？

どれもすごく重要だけど、もひとつ重要なものがある。

アクセシビリティ――アクセス・閲覧のしやすさだ。

これはデザインの一種でもあるけど……（いわゆる工業デザイン、機能美ってやつ）

見た目のデザインセンスが絶望的に不足してる俺だからこそ、アクセシビリティを重視したデザインにはできるだけこだわりたかった。

ということで、今回はこのサイト「れーとーびーむ」（ブログ「れいぶろぐ」を含む）の色とフォントに凝らした工夫を紹介しよう。

ググったり人に聞いたりしたものが多いけど……

背景の色

背景は白系にする派と黒系にする派がいると思うけど（画像背景も含め）、やっぱり文字の読みやすさを第一に選ぶべきだな。

つまり、背景と文字のコントラストだ。

黒背景は目に優しいと言われてて、プログラマーなんかに好まれてる。

このサイトでは背景は白になっている。

ただし、見ればわかるように完全な白ではない（色コード：#f0f0f0）。

真っ白だと、ちと眩しいかなあと思って……

淡色なら色味があってもいいとは思う。

画像にするなら、画像内のコントラストが低く、かつかなり薄い色にするべきだろう。

文字の色

白背景なら文字は黒！　黒背景なら文字は白！

色味のある色はどうしても読みにくいので避けるべき。

ところで、白背景に真っ黒な字だと黒すぎるって話を聞いた。

このサイトでは色コード「#333333」と、けっこう灰色寄りだけど、そんなに薄く見えないはず。

参考として、この段落は文字の色が真っ黒だが、違いがおわかりいただけただろうか。

フォントがアンチエイリアスあり（メイリオ、ヒラギノなど）か、なし（MS Pゴシックなど）かも視覚的には影響するかも。

文字の大きさ

個人サイトを見ると、しばしば小さな文字サイズが使われている。

文字が小さいと、限られたスペースにも多くの情報を収めることができ、レイアウトはしやすくなるだろう。

しかし、当然小さな文字は読みにくい。

個人サイトでも、人気のあるブログなんかはかなり大きめの文字サイズになっていることが多い。

そうなると一行に収まる文字数が減るので、より少ない文字数で的確に情報を伝える文章力の問題もあるかもしれないが……

このサイトでは本文の文字サイズは「14px」にしている。

もっと大きいほうがいいのかもしれないが、残念ながら俺のレイアウト力や文章力ではこれ以上大きくできない……

もっとも、文字の大きさもフォント自体の影響を受けるが。

Android 4.2の標準ブラウザのフォントはどうにかならんのか。

行間隔

このブログでは段落を連発しているので、あまり複数行にまたがる文章はないが、行間隔は大事！

CSSでは line-height という行の高さを指定するプロパティを使う。

で、俺がいいと聞いたのは200％だ。

200％とは、文字の大きさ（高さ）に対する割合だ。

行の高さが200％＝行間隔は文字の高さの100％

このあたりはある程度好みだと思うが、少なくともこの段落のように行間が詰まってたら、読みにくいことこの上ないってことはおわかりいただけるだろう。ためしに段落をつけずに長々と引き伸ばしてみようか。このブログではこんなに長い段落を作ることもないと思うけど、小説とか書くなら場合によっては……？

余談だが、 line-height の指定はパーセント（例：200％）より実数（例：2）のほうがいいらしい。

ちなみに段落ごとの間隔は、このブログではPC向けは22px、スマホ・タブレット向けは20pxとなっている。

文字間隔

どこかで、CSSで letter-spacing を1pxに設定すると読みやすくなると聞いて、試してみるとなるほどなと思ったので俺も導入。

これは、文字1字ずつの間隔だ。

これを使ってるサイトは少ないと思うし、いらない人はいらないんだろう。

この段落では字間が0となっているので、下の段落と見比べてみよう。

この段落では字間が1となっているので、上の段落と見比べてみよう。

リンクテキストのスタイル

リンクテキストのスタイルは、けっこう悩んだ。

おそらく、ブラウザのデフォルトスタイルでは「青色・下線付き」となっていて、このスタイルを見れば誰もがリンクだと認識するだろう。

逆に、これでリンクじゃなかったら、クリックしてしまってイライラさせられるだろう。たまにあるよねそういうサイト。

一方、リンクテキストも普通のテキストと同じように黒系・白系が使われる場合も多い。

このサイトでは、未読リンクのスタイルは「黒色・下線付き」、既読リンクは「灰色・下線付き」で、それぞれマウスオーバーすると下線が消える。

やっぱ下線があるのが一番だろ！

え、このセクションの下線部をクリックしてがっかりさせられた？　ｺﾞﾒﾝﾈｰ。

終わりに

今回は基本的なテクニックの紹介だったが、これからWEBサイトを作ろうと思ってる人の参考になればうれしい。

これはわりとどうでもいい話だが、このブログのアクセス数を牽引している『ゼノクロ』記事の特需もいつまでもは続かないし、今後はWEB開発に関する記事を充実させていこうかな。

ということで、「れーとーびーむの作り方」シリーズと題し、このサイトやブログを実際に作った俺の経験を踏まえて徐々に紹介、解説していきたい。

ライバルは多いが……俺のサイトに対するこだわりは半端じゃないので、きっと誰かの役に立つはずだ！

よかったら、俺のサイトやブログにある何かで、作り方を知りたい！　とかあったら教えてね。