書くことがいっぱいで目が回り気味のしばっちです。こんにちは。

Webディレクターズマニュアルのデザインリニューアル公開してから2年。
中の人こと健太(@cafekenta)からは「このロゴマークでピンときたって言う人が多いよ」「スマホでデザイン見せると『ああ!あのブログの人なんですか』ってデザインから思い出してくれることが多くて助かっているよ」とデザインが人の記憶に結びついていることを感じています。

そんなWebディレクターズマニュアルの記事が公開されるのはだいたい夜中か朝です。人によっては眠気眼で記事に目を通すことも多いでしょう。僕もその例に漏れず、半開きの目で布団の上でスマホかタブレットで読んでいます。

しかし、眠気眼に文字多めの記事は心が折れそうだったので、小さい端末向けに最適化しつつ、もう少し軽く読めるように調整を勝手出ました。

小さい端末向けにやったこと

Webディレクターズマニュアルはとても文字で語られているサイトです。そのため、読みやすくすることには気を遣って進めました。

文字を大きくする

もともとデスクトップでのデフォルト文字サイズは14ピクセルでした。しかし、僕の中では14ピクセルが小さく感じるようになったこと、健太本人からも同様の声が聞こえたので16ピクセルにしました。

スマートフォンやタブレットの閲覧時も16ピクセルをデフォルトにしました。文字大きくなることでスクロール量が増えることの抵抗はあまりなさそうだったので、思い切って大きめに取りました。

文字と背景のコントラストを高くする

デスクトップだと文字色と背景色のコントラストが高いと疲れやすいといったことがあり、文字を少し薄めにして疲れにくいようにしていました。

しかし、スマートフォンやタブレットは同じカラーコードでも見え方が違って、かなり明るく見えてしまい、コントラストが低くなります。そのため、コントラストが確保できるよう、文字色を調整しました。

ヘッダーの背景色も強くする

同様にヘッダーも明るくなってしまうので、グレー背景は薄めにしてても背景の白色にと区別が付かなくなってしまいました。そのためスマートフォン、タブレットで閲覧時はヘッダーの背景色はすこし暗めにし境界がはっきりわかるようにしました。

写真で撮ったけど、違いがわかりにくいですね;実機で確認することをおすすめします。

小さくても識別できるようにする

Webディレクターズマニュアルのロゴマークはスマートフォンでもしっかり確認できました。しかし問題はロゴタイプのほう。気にしなくてもいいとは言ってましたが、「読めないぐらいならノイズになるだけなので、しっかり文字が読めるようしよう。」ということで、後者の判断をして読める程度に大きさを調整しました。

大きさの順序が変わってないので気付かれにくいのですが、検索エンジンから初めてやってくる人でもなんて読むのかは判るように配慮しました。

いろんな端末で見てもそこそこメリハリのつく記事スタイルを

Webディレクターズマニュアルは書き手の強い意向から記事内に画像はあまり使いません。これまでだと、見出しと段落だけで記事を成立させていましたが、それだけだと読むのに疲れてしまうので、いくつか新しいパーツを用意しました。

汎用的なボックス

目休めに使うもよし、リストを視覚的に強調するもよしという比較的何にでも使える囲みクラスを作りました。最近似たようなことを仕事でもやったのですが、書き手の需要としてはあるみたいです。

何でもかんでも囲むのは読みにくくなるので本末転倒ですが、健太ならこのボックスをうまく使ってくれるだろうと期待をして実装しました。

ソース表示用ブロック

ごくまれにソースコードを表示することがあります。とりあえず欲しいと言ったこと、ないよりはあってもいいかということで実装しました。

ちなみに、Webデザインのタネで実装しているものでは利用せず、 google-code-prettifyで実装してます。HTMLなのかPHPなのかといった文法定義を特別しなくてもいい感じに出してくれるので採用しました。

リストいろいろ

ディレクターズマニュアルはよく読むと知らず知らずにリストが使われています。やり方を示す際にはメリットやデメリット、前提などを箇条書きで示すことが多いようです。これまでは段落内を強制改行していますが、2行目になるとバレット(リストの文頭によく置かれる記号)と同じ位置から行がスタートしていて箇条書き感がありませんでした。

バリエーションは3つ。四角形を置いたものを色違いで2つ。あとは数字から始まるものを1つ。これらの切り替えはul、olで分けずクラス名で切り替えています。順序を示していても、わざわざ数字で示す必要がない原稿っていうのもありますからね。

スタイルガイド

あまりスタイルが多くなると後々誰も忘れてしまい謎スタイルとなってしまうことがあります。WebデザインのタネのCSSを書いた僕でも忘れ去られたスタイルがいくつかありました。有効活用してもらいたいので、記事内で使えるスタイルを全部入りで解説文、ソースの記述例を載せてスタイルガイドを作りました。

Webディレクターズマニュアル スタイルガイド

ごりごりにHTMLは書かないけど、どのタグがどういう意味を持っているのかはだいたい把握しているのでかなりコンパクトにまとめることができました。

まとめ

Webディレクターズマニュアルをスマートフォンやタブレットなどの小さい端末でもスクロールだけで読めるように最適化し、飽きさせないようスタイルをいくつか追加しました。

レスポンシブWebデザインと聞くと、ナビゲーションや実装方法そのものに目が行ってしまいがちです。しかし、記事タイトルに惹かれて検索エンジンやSNSからやってくる読者にはブログ記事が楽に読めるかどうかのほうがナビゲーションよりも大事のはず。

レスポンシブだからって特別扱いに考えるのではなく、普段のサイト制作も何を期待して、何がパッと見で入ると安心するのか、長く読み進めている途中に飽きられないかは常に問いかけて仕事したいですね。