読み込み中...
この記事は、ひとりでつくるSaaS - 裏note Advent Calendar 2025 の10日目の記事です。
https://adventar.org/calendars/12464
個人開発で「Memoreru」というプロダクトを作っています。知識を整理し、思考を育てるためのツールです。
この記事では、「説明しなくても使える」UIを目指した設計について考えます。
技術的な話はQiitaのアドベントカレンダーで書いています。ご興味のある方は、そちらもご覧ください。
https://qiita.com/advent-calendar/2025/solo-dev-memoreru
新しいツールを使い始めるとき、マニュアルを最初から読む人は少ないです。
多くの人は、まず触ってみる。ボタンを押してみる。何が起きるか確かめる。そうやって使い方を覚えていきます。
私自身もそうです。新しいアプリをインストールしたら、とりあえず画面を開いて触ってみる。説明を読むのは、どうしても分からないときだけ。
つまり、マニュアルを読まなくても使えるUIでなければ、使われないということです。「あとで読もう」と思ったマニュアルは、たいてい読まれません。
「説明しなくても使える」を実現するために、Memoreruではテーブル機能にExcelライクなUIを採用しています。
セルをクリックすれば編集できる。行番号の横にあるグリップをドラッグすれば並び替えられる。テキスト、数値、日付、チェックボックスなど、30種類の項目タイプに対応していますが、操作方法はExcelと同じです。
見たことのあるUIには、学習コストがほぼありません。初めて使う人でも、「たぶんこうだろう」と予測できます。その予測が当たれば、「使いやすい」と感じてもらえます。
ダッシュボード機能でも同じ考え方です。ページやテーブル、グラフなどのコンテンツをドラッグ&ドロップで配置できます。ドラッグ&ドロップの操作に慣れていれば、説明なしで操作できます。
Memoreruの画面全体は、Windowsのエクスプローラーのような構成になっています。
左側にナビゲーションメニューがあり、フォルダを階層的に開いてコンテンツを探せます。フォルダをクリックすると中身が展開され、さらに深い階層へ進める。ファイル管理ソフトを使ったことがあれば、説明なしで操作できます。
また、画面右下には丸いボタン（FAB）を配置しています。スマートフォンアプリでよく見かける「+」ボタンです。タップすると新しいコンテンツを作成できます。このボタンも、多くのアプリで見慣れたUIなので、説明がなくても「何か追加できそう」と予測できます。
何かを操作したとき、結果がすぐに分かることも大切です。
Memoreruでは、項目を追加したら「追加しました」というトースト通知を画面上部に表示します。保存に失敗したら、赤い警告で何が問題かを具体的に示します。データを読み込んでいる間は、スケルトン（グレーの枠）を表示して「読み込み中」と伝えます。
スマートフォンでは、ボタンをタップしたときに短い振動を入れています。画面の変化だけでなく、触覚でも「操作が受け付けられた」と分かるようにするためです。
反応がないと、「押せたのかな？」「保存できたのかな？」と不安になります。その不安が、「このツールは使いにくい」という印象につながります。
機能が多すぎると、何をすればいいか分からなくなります。
Memoreruのコンテンツ作成では、3ステップのウィザード形式を採用しています。「コンテンツの入力」「タイトルや説明の設定」「公開範囲の選択」と、一つずつ進めていく。
一度にすべての情報を入力させるより、迷いにくくなります。今どのステップにいるかも、画面上部のステップインジケーターで確認できます。
「間違えたらどうしよう」という不安は、新しいツールを試すときの障壁になります。
Memoreruでは、削除操作には必ず確認ダイアログを表示します。「項目を削除しますか？」と聞いて、「削除」ボタンを押さないと消えない。誤って大事なデータを消してしまう心配がありません。
「失敗しても大丈夫」という安心感があれば、積極的に試してもらえます。逆に、「一度やったら取り消せない」操作が多いツールは、慎重に使わざるを得ません。マニュアルを読まないと怖くて触れない。それでは「説明しなくても使える」とは言えません。
「説明しなくても使える」を完全に実現するのは難しいです。Memoreruでもガイドページやヒントアイコンは用意しています。
ただ、説明文を追加するより、説明がなくても分かるUIに変える方を優先しています。「ここは分かりにくい」という箇所を見つけたら、まずUIを見直す。
現場のツールは「覚える時間」がないからこそ、直感的に使えることが大切です。Memoreruは、そういうツールを目指しています。
開発の過程で考えたことを、引き続きこのnoteで書いていきます。
コメント