旅行日程サイトの見た目と機能を改修した話
GW旅行向けに突貫で作った旅行日程サイトを、デザイン・保存状態・ドラッグ操作・カバー画像まわりから使いやすく改修したメモ。
以前、自分用に旅行日程サイトを作りました。
GW旅行に間に合わせるために、最初はとにかく「使える状態にする」ことを優先。
そのおかげで旅行中はかなり便利だったんですが、あとから見ると気になるところがいくつかありました。
今回はその旅行日程サイトを、デザインと保存まわりを中心に改修したので、そのメモです。
このサイトのコンセプトは、なるべく自動にすること。
スポット名から住所や移動時間を取れるようにしたのも、旅行前の準備をできるだけ楽にしたかったから。
まず、最初に作ったときの画面はこんな感じでした。
改修したかったこと
最初に作った時点では、機能の優先順位はかなりはっきりしていました。
- 日程を作れる
- スポットを並べられる
- 移動時間を見られる
- スマホで当日確認できる
ここまでは最低限満たせていました。
ただ、実際に使ってみると、まだ突貫で作った感がかなり残っていました。
- 見た目が少し管理画面っぽい
- 保存できているのか分かりづらい
- 他の人が同じ日程を開いていたときの保存が少し怖い
- スポット一覧のドラッグ移動がスクロールと干渉しやすい
- 旅行一覧に写真がなくて、しおり感が弱い。でも自分で写真を用意するのは面倒
見た目を整理した
まずは、日程の見え方を整理しました。
今回はデザインを大きく作り替えるというより、一旦気になるところを整えるくらい。
最初の画面は、機能を置くことを優先していたので、どうしても「管理画面っぽさ」が強かった。
今回は、旅行中に見るしおりとしても使えるように、予定の流れが少し読みやすい見た目に寄せました。
あと、写真を使える場所を増やして、旅行ごとの雰囲気が出るようにしています。
改修後はこんな感じです。
まだ色々気になることはあるので気が向いたら改善しようと思う。
Unsplash APIでカバー画像を設定できるようにした
見た目まわりで大きく変えたのが、旅行ごとのカバー画像です。
旅行一覧や詳細ページに写真が入るだけで、かなり「しおり感」が出ます。
文字だけの一覧だと管理ツールっぽく見えますが、写真があると旅行ごとの雰囲気が分かりやすい。
ただ、カバー画像のためにわざわざ写真を撮ったり、毎回画像を探してアップロードしたりするのは面倒。
そこを手作業にすると、このサイトでやりたかった「なるべく自動にする」から少し外れてしまいます。
今回はUnsplash APIを使って、エリア名などで写真を検索し、旅行のカバーとして設定できるようにしました。
流れとしてはかなりシンプルです。
- エリア名やキーワードで写真を検索する
- 候補画像を一覧表示する
- 選んだ画像のURLと撮影者情報を保存する
- 旅行一覧と詳細ページのカバーとして表示する
旅行名やエリアを入れた流れでそのまま写真も選べるので、画像を用意する手間がだいぶ減りました。
「大阪旅行」「静岡旅行」みたいな文字だけで並ぶより、写真があるほうが開く前から少し楽しい。
実用面でも、複数の旅行が並んだときに見分けやすくなりました。
スポット一覧のドラッグ移動を調整した
操作面では、スポット一覧のドラッグ移動を調整しました。
旅行日程は、一度作って終わりではなくて、あとからけっこう入れ替えます。
- やっぱりこの店は別日にしたい
- 朝の予定を少し遅らせたい
- 移動時間を見て順番を変えたい
- 予約メモを追加したい
こういう調整が多いので、スポットの追加や並び替え、時間の更新がなるべく自然にできるようにしました。
特に気になっていたのが、スマホでスポット一覧を触るときの体感です。
一覧をスクロールしたいだけなのに、ドラッグ移動として反応してしまう。
逆に、並び替えたいのにスクロールっぽくなってしまう。
このあたりが少しストレスでした。
少し指を動かしただけでは並び替え扱いにならないようにしました。
一定以上動かしたときだけドラッグ開始にすることで、スクロールしようとしただけなのにスポットが動く、という誤作動を減らしています。
移動中は対象のスポットが少し浮いて見えるようにして、今どれを動かしているかも分かりやすくしました。
保存まわりも見直した
もう一つ気になっていたのが、保存まわりです。
旅行日程は、スポットの順番を変えたり、時間を少しずらしたり、メモを追記したりと、細かい変更が多いです。
そのたびに「保存できているのか」が分かりづらいと不安になります。
なので、保存状態が分かるようにしました。
- 編集中
- 保存中
- 保存済み
- 保存失敗
特にスマホで触っていると、通信が不安定だったり、画面を閉じたくなったりするので、保存の見える化は大事。
あわせて、他の人が同じ旅行日程を開いていた場合の処理も入れました。
自分が画面を開いたあとに、別の人が先に保存していることがあります。
その状態でこちらが古い内容のまま保存すると、相手の変更を上書きしてしまう可能性があります。
なので、保存時にサーバー側の更新状態を見て、開いたときより新しいデータがあればそのまま保存しないようにしました。
この場合は、最新の内容を読み込み直してから編集する流れにしています。
がっつり共同編集できるようにしたわけではないですが、少なくとも「気づかないうちに誰かの変更を消す」は避けたかったので、ここは入れておいてよかったです。
やってよかったこと
今回の改修で一番よかったのは、「なるべく自動にする」という方向性を残したまま、見た目と操作感を少し整えられたことです。
作っている最中はPCで確認する時間が長いので、どうしても編集しやすさに意識が寄ります。
でも実際に使う場面は、移動中のスマホだったり、外で立ったまま確認するタイミングだったりします。
そう考えると、
- 文字が小さすぎない
- 次の予定がすぐ見える
- マップをすぐ開ける
- 保存状態が分かる
みたいな地味なところがかなり効きます。
派手な機能を足したというより、使っていて引っかかるところを少しずつ減らした感じです。
感想
実際に使ってみると気になる箇所がどんどん増える。
気が向いたらまたいじって更新していきたいなと思います。
以上、おわり。
