【開発日記】渓流釣り向けアプリ #6 安全装備タグとプロフィール編集

アプリ開発

渓流釣りアプリの開発、今回はユーザーのプロフィール周りを充実させました。

プロフィールを編集できるようになった

マイページに表示名とプロフィール画像の編集機能を追加しました。

これまではGoogleやAppleでログインしたときの名前とアイコンがそのまま表示されるだけで、変更できなかったんです。自己紹介の編集は以前から実装済みだったのですが、名前とアイコンは後回しにしていました。

プロフィール画像を選んだあと、円形にトリミングできるようにしました。ピンチで拡大縮小、ドラッグで位置調整ができます。ライブラリを使うことも検討しましたが、やりたいことがシンプルだったので自作しました。

プロフィール編集画面

地味にこだわったのが画像の解像度。アイコンなので巨大な画像は不要ですし、保存先のクラウドストレージは容量に応じて料金がかかります。表示サイズを考慮して、必要十分な解像度に自動調整するようにしました。

安全装備タグ

今回一番力を入れたのが、安全装備タグ機能です。

渓流釣りは山奥に入ることが多いですよね。楽しい反面、熊との遭遇リスクや滑落の危険もある。プロフィールに安全装備の情報を載せることで、安全意識の見える化ができるようにしました。

現在設定できるのは以下の5つ:

  • 熊スプレー
  • 熊鈴
  • 遊漁券
  • 山岳保険
  • GPSデバイス

最初は「装備・タックル情報」として釣具全般を載せることも考えました。でも、高価なロッドやリールの自慢大会になっても意味がない。安全に関わる装備に絞ることで、本当に大事な情報だけを伝えられるようにしました。

安全装備タグ

タグはカテゴリごとに色分けしています。熊対策は赤、遊漁券は青、安全管理(保険・GPS)は緑。色の選定も何パターンか試しました。最初は熊系をオレンジにしていたのですが、実際に並べてみると赤の方がしっくりきたので変更。

アイコン選びも地味に時間がかかりました。熊スプレーのアイコンは炎マーク → 足跡マーク → …と何度も変えて、最終的に肉球マークに落ち着きました。

色だけに頼らないデザイン

安全装備タグの編集画面では、色覚に配慮したデザインにもこだわりました。

「選択中」と「未選択」の違いを色だけで表現すると、色覚が弱い方には区別がつきにくくなります。そこで3つのレイヤーで違いが分かるようにしました:

  1. アイコンの違い — 未選択は丸、選択すると専用アイコンに変化
  2. 背景の違い — 未選択は枠線のみ、選択すると色付き背景
  3. 色の違い — 未選択はグレー、選択するとカテゴリ色

色が見えなくても、アイコンと背景の変化で判別できます。こういう細かい配慮が、誰でも使いやすいアプリにつながると信じています。

同じ画面を2つ作ってしまった反省

開発を進めるなかで、似たような画面が2つ存在する問題に気づきました。

データの入力内容を確認する画面と、投稿済みデータの詳細画面。見た目はほぼ同じなのに、別々のファイルとして作ってしまっていたんです。片方に新機能を追加してもう片方に反映し忘れる、ということが実際に起きました(安全装備タグがまさにそれ)。

そこで2つの画面を1つに統合。数百行のコードが削減できて、今後は1箇所を変更すれば両方に反映されるようになりました。

次のステップ

プロフィール周りが充実してきて、「使える」アプリに近づいてきた実感があります。次は引き続き画面の改善と、実機でのテストを進めていきます。

コメント

タイトルとURLをコピーしました