れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。デザイン?どれもすごく重要だけど、もひとつ重要なものがある。アクセシビリティ――アクセス・閲覧のしやすさだ。これはデザインの一種でもあるけど......(いわゆる工業デザイン、機能美ってやつ)見た目のデザインセンスが絶望的に不足してる俺だからこそ、アクセシビリティを重視したデザインにはできるだけこだわりたかった。いうことで、今回はこのサイト「れーとーびーむ」(ブログ「れいぶろぐ」を含む)の色とフォントに凝らした工夫を紹介しよう。背景は白系にする派と黒系にする派がいると思うけど(画像背景も含め)、やっぱり文字の読みやすさを第一に選ぶべきだな。背景と文字のコントラストだ。黒背景は目に優しいと言われてて、プログラマーなんかに好まれてる。このサイトでは背景は白になっている。見ればわかるように完全な白ではない(色コード:#f0f0f0)。真っ白だと、ちと眩しいかなあと思って......淡色なら色味があってもいいとは思う。画像にするなら、画像内のコントラストが低く、かつかなり薄い色にするべきだろう。黒背景なら文字は白!色味のある色はどうしても読みにくいので避けるべき。ところで、白背景に真っ黒な字だと黒すぎるって話を聞いた。このサイトでは色コード「#333333」と、けっこう灰色寄りだけど、そんなに薄く見えないはず。参考として、この段落は文字の色が真っ黒だが、違いがおわかりいただけただろうか。Pゴシックなど)かも視覚的には影響するかも。文字の大きさ個人サイトを見ると、しばしば小さな文字サイズが使われている。文字が小さいと、限られたスペースにも多くの情報を収めることができ、レイアウトはしやすくなるだろう。小さな文字は読みにくい。個人サイトでも、人気のあるブログなんかはかなり大きめの文字サイズになっていることが多い。なると一行に収まる文字数が減るので、より少ない文字数で的確に情報を伝える文章力の問題もあるかもしれないが......このサイトでは本文の文字サイズは「14px」にしている。大きいほうがいいのかもしれないが、残念ながら俺のレイアウト力や文章力ではこれ以上大きくできない......もっとも、文字の大きさもフォント自体の影響を受けるが。4.2の標準ブラウザのフォントはどうにかならんのか。いう行の高さを指定するプロパティを使う。俺がいいと聞いたのは200%だ。200%とは、文字の大きさ(高さ)に対する割合だ。行の高さが200%=行間隔は文字の高さの100%このあたりはある程度好みだと思うが、少なくともこの段落のように行間が詰まってたら、読みにくいことこの上ないってことはおわかりいただけるだろう。ためしに段落をつけずに長々と引き伸ばしてみようか。指定はパーセント(例:200%)より実数(例:2)のほうがいいらしい。ちなみに段落ごとの間隔は、このブログではPC向けは22px、スマホ・タブレット向けは20pxとなっている。1pxに設定すると読みやすくなると聞いて、試してみるとなるほどなと思ったので俺も導入。これは、文字1字ずつの間隔だ。これを使ってるサイトは少ないと思うし、いらない人はいらないんだろう。この段落では字間が0となっているので、下の段落と見比べてみよう。この段落では字間が1となっているので、上の段落と見比べてみよう。リンクテキストのスタイルリンクテキストのスタイルは、けっこう悩んだ。ブラウザのデフォルトスタイルでは「青色・下線付き」となっていて、このスタイルを見れば誰もがリンクだと認識するだろう。逆に、これでリンクじゃなかったら、クリックしてしまってイライラさせられるだろう。あるよねそういうサイト。リンクテキストも普通のテキストと同じように黒系・白系が使われる場合も多い。このサイトでは、未読リンクのスタイルは「黒色・下線付き」、既読リンクは「灰色・下線付き」で、それぞれマウスオーバーすると下線が消える。終わりに今回は基本的なテクニックの紹介だったが、これからWEBサイトを作ろうと思ってる人の参考になればうれしい。これはわりとどうでもいい話だが、このブログのアクセス数を牽引している『ゼノクロ』記事の特需もいつまでもは続かないし、今後はWEB開発に関する記事を充実させていこうかな。いうことで、「れーとーびーむの作り方」シリーズと題し、このサイトやブログを実際に作った俺の経験を踏まえて徐々に紹介、解説していきたい。(2017/01/06)こめんとコメントはまだありません。こめんとする本文のみ必須。メールアドレスは公開されないよ。お名前メアド名前とメアドを入力欄に記憶する数式の空欄を正しく埋めてね。※本文には日本語を最低でも“何文字か”含めてね。(詳細)コメントを投稿すると、メールアドレスを含む投稿内容と、投稿者を識別するIPアドレスなどが当サイトのサーバーに送信され、保持される。これらの情報は当サイトのサービスの提供やコンテンツの改善のために利用される。あなたは、当サイトによるこれらの情報の取り扱い(取得・処理・利用)に同意しなければ、コメントを投稿することはできない。この同意の要件は法的な要件として追加されたもので、当サイトによるこれらの情報の取り扱いは従来から変わっていない。当サイトの個人情報の取り扱いについて詳しくは、プライバシー・ポリシーを読んでね。(125)※過去30日間の閲覧数データによる。