amakanのUIを変更した

https://amakan.net/ の UI を大きく変更したので、変更内容と背景について記録を残しておく。

変更前

以下が変更前の様子。

変更前までは、左側にページごとのメインコンテンツを配置し、右カラムには補足的な内容を配置するという設計だった。端的にいうと、右カラムにはあってもなくてもどちらでも良いけどあると便利な情報を配置する、というもの。小さい画面のデバイスでは右カラムの内容はファーストビューには表示されず、ページ下部に表示されることになる。広告や関連情報など、ユーザの興味を惹くコンテンツを表示する領域を設けたい場合は、この手の UI が適していると思う。PC 用の Web サイトによくあるレイアウトだったと思う。

変更後

以下が変更後の様子。

左カラムにグローバルナビゲーションを配置し、右側にページごとのメインコンテンツを配置するという設計にした。サイトの構造と現在位置をより分かりやすくすることを優先したい、という意図でこうなった。デスクトップアプリではこういうタイプのレイアウトが多いように思う。以前と比べると、よりデスクトップアプリやモバイルアプリの文脈に近いレイアウトになっている。

変更の背景

変更の背景はいろいろあるものの、主な理由は次のようなもの。

• 慣習的な Web サイトのレイアウトではなく、よりサイトの構造を意識させるレイアウトにしたい
• 利用者が日常的に利用しているメディアの UI をもっと手本にしていくべき
• annoying な情報を削ぎ落として、コアな機能により集中させるべき

小さい画面でどうするか

左カラムで現在位置を表現する責務を持たせている (メインコンテンツ側の領域であえてページタイトルを表現していない) と、スマートフォンのような小さな画面で左カラムが表示されないケースで、現在表示しているものが分からなくて困るという問題がある。今回は、スマートフォン用の小さな横幅の画面ではグローバルヘッダにページタイトルを記載することにした。

下図を見ると分かるように、「amakan books」というサービス名が表示されていたところが、スマートフォン用の画面では「ランキング」や「全新刊リスト」などが表示されるようになっている。