はてなキーワードのページが「魔改造」と言う感じがして面白い

先日、もっとキーワードでつながろう! 「はてなキーワード」をリニューアルし、はてなブログでも7日間で「市民」になれるようにしました - はてなブログ開発ブログ と言う告知を見かけたのですが、最新デザインのはてなキーワードのページを最初見たとき「何というか……魔改造って感じやな」と言う印象を受けた事を思い出しました(そう言えば、はてな―キーワードの現行デザイン、いつから変更されていたのだろう)。

何が「魔改造」かと言うと、スクロールした時の挙動が一見しただけでは把握しづらい構造になっている点です。

はてなキーワードの各ページは、上記 A 〜 D の 4 つ(フッターも含めると 5 つ)のパーツで構成されています。これらのパーツが、スクロールさせるに従って以下のような挙動を示します(記載漏れがあるかもしれません)。

  1. 最初のスクロール時、A のパーツが小さくなって固定ヘッダー化する
  2. B のパーツが A の直下までスクロールされると、B のパーツが小さくなって固定ヘッダー化する
  3. その後、しばらくは C と D のパーツが両方ともスクロールされる
  4. D の該当キーワードについて言及しているブログ一覧の内、最後の記事のみが表示された状態でスクロールすると、B のパーツの固定ヘッダー状態が解除されて消える
  5. C と D のうち、先に全ての内容が表示されたパーツはそれ以上スクロールされず、反対のパーツの内容が全て表示されるまで待つ
  6. C と D 両パーツの全内容が表示され終わった状態でスクロールすると、フッターが表示される

全体として、「固定ヘッダーは表示したいんだけど、大きすぎると表示領域を圧迫するし……」と言う葛藤と「ページ中に空白領域は絶対に設けたくないでござる」と言う強い信念が感じられる作りとなっています。「サイズを小さくして固定ヘッダー化」と言うと ねとらぼ 辺りも同じような手法を取っていますが、この例よりもさらにギミック満載で、まさに「魔改造」と言う表現がしっくりくるように感じました。

ある意味インパクトの強い作りで「印象に残る」と言う点では良いかもしれませんが、リファレンス的な用途として常日頃から頻繁に閲覧される(事をゴールとするような)ページの場合、もう少し素直に作った方が良かったんじゃないかなぁと思ったりもしました。