こんにちは、行頭の視覚調整原理主義者、アートディレクターの関口です。

僕はもともと紙のデザインからキャリアをスタートしているのですが、それが災い？して、どうしても気になって工数を掛けそうになってしまうポイントがいくつかあります。

こちら。よくある光景ですね。

日本語は基本的にいわゆるプロポーショナルではないので、全角の役物（記号）を文頭に入れるとこういったズレが生じます。当たり前だろーと気にならない方もいると思うのですが、ユーザーのスムーズな視線移動を妨げる感じがして、僕はどうしても気になってしまうのです。静的なページなら良いですが、システムで吐いているテキストであるとか、最近はデバイステキストで組むのが主流ですから、そういった場合はよくこういうケースに遭遇します。よくあるんですよ、やっぱり。自分で原稿書いてみるとわかるのですが。

しかし、しかしですよ！

上記は見出しの先頭によくあるデザイン処理についてですが、こうすることで、見ための美しさというよりも、文の開始位置が規則的になることで各要素の読み取りやすさが格段に良くなると思います。（逆に、より段差をつけて構造化を試みるのがインデント処理ですね。）

ウェブの基本的な理論にF字型の視線移動というのがあると思います。ウェブはほとんどの場合横組みですから、こういったセオリーがあるわけですね。ローカルナビの設置も左側が多いのはそういった理由でしょう。

こちらの例では、敢えてローカルナビ（といってもどちらかというとカテゴリーのリストですが）を右側に置き、メインコンテンツをいちばん左側に置きつつ、文頭を全て揃えています。FLAutoKerning.jsを用い、ウェブフォントに対して視覚調整も行っています。

これは、装飾を排したトーン&マナーの印象によるブランディング的意図もありますが、なによりコンテンツファースト的な狙いがあります。一次情報を蓄積するネット上のハブとして、すべてを特設ページ的に扱う詳細ページ、という設計意図がありましたから、マルチエントランス的にランディングしてきたユーザにまずメインコンテンツに接してもらう、という狙いがあったわけです。そういった際に、この「行頭をきちんと整列させる」ことには工数を割いてもよいという判断をしました。

こういったことは、紙のデザインでは（技術的に簡単なので）基本的なことですが、ことウェブでの実装となると、工数や対象デバイス、コードの品質など、もろもろの条件との兼ね合いで決めていく必要がありますね。視覚調整はとかく、工数と天秤にかけられやすいトピックです。効果測定が簡単ではないからでしょうか。

しかし、こういったことも今後重要になっていくと思います。デザインにおける本質的な理論が、「ウェブだから」という理由でできないということにはならなくなってきているからです。もちろん、媒体特性は考慮しなければなりませんが…。

何しろ、“ウェブは枯れていく”のですから。謎。