Scribble at 2020-12-30 12:18:19 Last modified: 2020-12-30 12:40:21

モバイルに対応してないレイアウトで、ソース・コードも WordPress の稚拙な吐き出しだけど、機能性としては良いサイトだと思う。中小企業のサイトは、ビジターが会社概要のようなパンフレットを手にした営業担当者を目の前にしている状況という体裁を想定すればよいので、木村石鹸さんのサイトは必要な情報をごく普通に提供している。なので、コンテンツには大きな問題がないのだけれど、やはり細かいところで時代遅れや不適切な UI 実装が目立つため、僕らのようにそういうことも含めて仕事をしている人間からすれば、幾つかのアドバイスをしたくなる。

たとえば、下層のページで表示されるサイドバーのメニューは、項目が一定の高さを確保しているにも関わらず、アンカーとして反応するのはテキストだけだ。これは現代の（そして、本来は古いの新しいのとは関係なくユーザビリティの観点からは為されるべきことだが）UI デザインでは <a> 要素をブロック要素に設定して、padding で高さや幅を確保してから、余白の領域も含めて clickable にするのが良い。こんなことは、いまやデジハリていどの専門学校の学生でも習っていることだ。

それから、非常に細かい話になるが、UI なりユーザビリティの「文法」という脈絡で言えば、ビジターを混乱させる要素は逆に取り除くというのがルールになっているため、「現在地」を表すメニュー項目には「▶」のようにビジターが何かアクションを取れるかのようなマークを付けるべきではない。「▶」がリスト・アイテムの先頭から外れているのを見せることでも、その要素が「現在地」であり、他にアクションを取るべき理由がないという事実をビジターに伝えるのだ。

なお、このような話題は是非が明解に定まっていない論点もたくさんあって、いまだに世界中で議論されていたり、小さな論点については誰も是非や適切さを議論する意義を感じていなかったりするので、そもそも論点として認識されたり掲げられていない場合も多々ある。たとえば、会社の沿革を表す場合に、木村石鹸さんのサイトでも kimurasoap.co.jp/company/history でテーブルを使って事跡が並べられている。僕が言いたいのは、こういう事跡のリストをテーブル・レイアウトでマークアップすることの是非ではなく、寧ろ「年（年度）」を表記するときに vertical-align や line-height などで実装される垂直方向の並べ方が真ん中でいいのかどうかだ。僕は、実は木村石鹸さんのサイトが採用している方針を支持しない。つまり、年（年度）は事跡のリストでは上下の位置として先頭に置く方が良いと思う。もちろん、年（年度）の表記が「ここから、ここまで」と一定の時間（に起きた幾つかの事跡）を跨るような表現として中央に表記されることにも一つの理があるのは確かだ。よって、これは単純かつ無条件にどこへ配置することが正しいかという論点ではないのだろう。しかし、少なくとも木村石鹸さんのサイトの presentation では、「ここから、ここまで」をビジターに理解させるコンテクストは、テーブル・セルの罫線だけである。それなら、もっと罫線をはっきり見せなければビジターは混乱すると思うのだ。そして、こういうレイアウトが不適切なのは、特にモバイルでページを見ている状況である。モバイルだと、１年間の事跡が多い年度を見ている場合は、年（度）の表記が前後の囲みの高さによっては一つの画面に前の年も後の年も入らず、それが何年の事跡なのかスクロールしなくては確認できない。少なくとも、年（度）の表記がそれぞれの先頭に置いてあれば、上からスクロールしてきた多くのビジターは〈どれくらい戻れば年が分かるか〉を覚えているので、ためらいなく上へスクロールして戻る動作に入れるが、中央に年（度）の表記があると、そもそも次の囲みに進んだビジターは、その囲みに表記されている事跡が〈前の年（度）から言って何年の事跡なのか〉を計算した上で読み始めなくてはいけないし、それが何年のことなのかを改めて確認するときに、その位置からどれくらい下へスクロールすれば年（度）が分かるかは知らないので、わざわざ前の年（度）を確認して計算しなおすためにスクロールしなくてはいけなくなる。もちろん、全てのビジターがそのような推論をしたり行動を取るわけではないとしても、次に見てゆく事跡が何年（度）のことなのか、或るていどは見て下へスクロールしないと分からないというのは、筋のよいデザインとは思えないのである。