読者です 読者をやめる 読者になる 読者になる

2017年4月6日

API 納品

27歳の私は、15歳の頃の私より少しも賢くない。

image

amakan

最近取り組んでいた amakan の改善について。コメント機能を付けて、タイムラインに読んだ本とコメントが流れるようにして、コメントを Twitter にも共有できるようにして、Twitter でフォローしている人が amakan を使っていたらおすすめのユーザとして表示する、という変更を加えた。

f:id:r7kamura:20170407035457p:plain

本を1冊読むたびに少し振り返ってコメントを書いたり他人のコメントを読んだりするのが意外と面白い体験であることに気付いたので、amakan でコメントする人が増えると嬉しい。玄人向けの機能としてはかなり極まってきたような感覚があるので、これからはもう少し裾野を広げるために労力を費やしていこうかと考えている。

広告を非表示にする

amakanの技術情報まとめ記事

シリーズ判定

スタイル

Docker

SaaS

Ruby

Rails

JavaScript

ブラウザ拡張

Web API クライアント

amakanのroutes.rb

広告を非表示にする

amakanのUIを変更した

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

変更前

以下が変更前の様子。

image

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

変更後

以下が変更後の様子。

image

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

変更の背景

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

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

小さい画面でどうするか

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

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

gif

広告を非表示にする