UIの統一感と信頼性｜「ばらつき」が信頼を削ぐ理由

ページによってタブの動き方が違うと、使うたびに「ここはどうだったっけ？」と考えなければなりません。
覚えなくていい設計に変えた日の話です。

ページごとにバラバラだった操作感

Mintorには、記事・相談・プロダクトなど複数の種類のコンテンツがあります。
それぞれにマイページがあって、タブで状態を絞り込めます。

でも以前は、ページによってタブの動作が違っていました。
あるページはURLに状態が保存されていてブックマークできる。
あるページは保存されていなくて、開くたびに最初のタブに戻る。
アーカイブ機能があるページとないページが混在していた。

こういうバラつきが、じわじわ使いにくさになります。
ユーザーは一つひとつのページで「ルールを覚え直す」必要が出てくる。
まるで、部屋ごとにスイッチの位置が違う家に住んでいるような感覚です。
島の古い公民館がまさにそうで、部屋ごとにスイッチの形も位置も違っていて、初めて使う人は毎回「電気どこ？」と聞かなければなりません。
慣れた人には当たり前でも、初めて来た人には不親切な空間になってしまいます。

ブックマークすると同じタブで開けるようになった

今回の改善でURLに状態を保存するようにしました。
たとえば「下書き」タブを開いているとき、そのURLをブックマークしておくと、次回そのブックマークを開いたとき「下書き」タブが直接開きます。

また、全ページにアーカイブ機能も追加しました。
古いコンテンツを完全に削除するのではなく、非表示にして保管できる仕組みです。
「やっぱり戻したい」となっても、いつでも元に戻せます。

操作感の統一を進めると、次に気になるのは裏側の仕組みです。

決済システムの本番環境を整えた

タブの統一と同時に、決済まわりの環境も整備しました。
Mintorでは有料プランの支払いにStripeという決済サービスを使っています。

開発中はテスト用のキーで動かしていたのですが、本番環境では本番用のキーに切り替える必要があります。
環境ごとに正しい設定値が使われるよう、一元的に管理する仕組みを入れました。
お金が絡む部分なので、慎重に何度もテストしました。
テスト用のカード番号を何回も入力しながら、「これが本物のお金だったら」と想像すると、自然と手が慎重になります。
正直、決済まわりのテストは何度やっても緊張します。

スマホ画面の見切れ問題を修正

スマホで使ったときに、画面下部のナビゲーションバーとコンテンツが重なってしまう問題も見つかりました。
ボタンがナビゲーションの裏に隠れてしまい、押せない。

PCでは問題なく見えていたので、スマホで実際に操作して初めて気づきました。
こういう問題は、色々な端末で実際に触ってみないとわかりません。

決済まわりの緊張感

Stripe（決済サービス）の本番設定を整えているとき、いちばん神経を使ったのは「間違えたらお金に影響する」という事実でした。

テスト用の設定値と本番用の設定値を取り違えたら、実際の決済が動かなくなるかもしれない。
逆に、テスト環境で本番の決済が動いてしまう可能性もある。
何度も確認して、環境ごとに正しい値が自動で使われる仕組みを入れました。

お金が絡むシステムは、「たぶん大丈夫」では済まされません。
確信が持てるまでテストを繰り返す。
その慎重さが、ユーザーの信頼を守ることにつながると信じています。

137行減らして、機能は増えた

共通化することのもう一つのメリットは、コードが減ることです。
この日は機能を追加しながら、コードを137行削減できました。

機能を追加したのにコードが減る。
なんだか不思議な感じがしますが、統一するとはそういうことなんだと思います。
バラバラだった部品を一つにまとめると、重複がなくなって、全体がすっきりする。
ユーザーにとっても、作り手にとっても。

統一作業は、一見すると「同じことの繰り返し」に見えます。
でも実際にやってみると、ページごとに微妙に違う事情があって、一筋縄ではいきません。
「このページだけ特別な理由があるのでは」と何度も立ち止まりましたが、結局ほとんどのケースで統一して問題ありませんでした。
「特別な理由」は、たいてい過去の自分が深く考えずに作った名残だったのです。

洋服のタンスを整理したとき、「これは何か理由があって別の場所にしまったんだっけ」と悩む服が出てきた経験はないでしょうか。
でも大抵、特に理由はなくて、ただ「そのときそうしただけ」。
サービスの中の不統一も、同じでした。
過去の自分に聞いてみたいけれど、もう覚えていない。
だから今の自分が「ここはこうする」と決め直す。
その作業が、サービスを少しずつ「自分の手になじむ道具」に変えていくのだと思います。

子どもが成長するにつれて、家の中のルールも統一していく必要が出てきました。
「おもちゃはこの箱に」「靴はここに揃える」。
最初はバラバラだったルールを、ひとつずつ決めていく。
サービスの操作感を揃える作業も、家のルールを整える作業も、根っこは同じだと感じています。**統一されていると、迷わなくていい。
迷わなくていいと、本当にやりたいことに集中できる。**

かなえ

個人開発を応援する非エンジニア

婚約破棄をきっかけに、29歳で未婚の母になると決めました。
不安と向き合いながら、10年かけて働き方を少しずつ作り変えてきた40代です。

AppSheetやGASを独学で覚え、いまはAIを使った個人開発を毎日続けています。
個人開発を応援する非エンジニアとして、等身大の試行錯誤や、子育て・自立・副業のことを、正直に記録しています。