こんにちは、@silverbirder です。最近、湖県に移住してWebフロントエンドのお仕事をしています。 お仕事をしていると、ユーザー体験を良くするためには、大きな改善をせずとも小さな改善だけでも十分な効果があると思い始めました。 本記事では、その小さな改善となる、3つのことについて書きたいと思います。
その小さな改善は、Webの世界に必ず存在する、以下の3つの要素を丁寧に扱うことです。
あるライブラリやフレームワークの話ではありません。Webの基本的な要素です。 それぞれについて、私の考えていることをまとめます。
Web には、必ずと言っていいほどテキストが表示されています。 例えば、以下のテキストがあります。
考え出すと、いくらでも列挙できるかと思います。それぐらい、Web にはテキストがほぼ必ず存在します。 このような、小さな文章（コピー）をマイクロコピーと呼びます。
このマイクロコピーは疎かにしてはいけません。 JavaScriptでプログラムを書くのと同じぐらい、文章を書くことも大事です。 なぜ大事かというと、1つの文章次第でユーザー体験が大きく変わるからです。文章の書き方一つで、購買率などの指標にも大きく影響します。 いくつか、例を書いていました。多くの場合、Bの方が良いかと思います。
上記について、何かの機能を作るのではなく、文章を変えているだけ なんです。 文章を書くという小さなコストで、ユーザー体験が大きく変わる、非常に費用対効果の高い施策ですよね。
ただ、文章を書くにもコストがかかります。 文章を書くテクニック（コピーライティング）は書籍で様々紹介されているかと思いますが、私は恥ずかしながら知りません。 知らない私でも、いつも以下について意識するように心掛けています。
他には、専門用語を使わない、1文を簡潔に書く、ポジティブな表現で書くなどもありますが、粗末なことです。 まずは、文章を書くことに躊躇わない ことが大事と考えています。
文章を書かずにアイコンやアニメーション、インタラクションの振る舞いだけでメッセージを伝えようとする スタイリッシュなUIを見かける機会が増えました。コンセプトやサービス形態によってはそれが良い場面も多いかと思います。 しかし、Web というドキュメントを読んでもらうプラットフォームでは、文章で伝えることが最も確実です。
そういう、何か操作したら（トリガーを発火したら）何かフィードバックを得る、これがインタラクションと呼ばれます。 インタラクションは、ユーザーとシステムのやり取り、相互作用のことです。 そのインタラクションの最小単位を、マイクロインタラクションと呼びます。
Webフロントエンドのお仕事をしていると、マイクロインタラクションを作る機会が多いです。 一例だと、『何かをクリックしたら、（APIが呼ばれてデータが保存されて）メッセージが表示される』などです。
マイクロインタラクションを作る際、フィードバックを疎かにしてはいけません。 例えば、以下のようにフィードバックを疎かにすると、ユーザーは不安になります。
マイクロインタラクションの悪い例の一つは『iPhoneをマナーモードにしても、アラームが鳴ること』です。 音を鳴らさないマナーモードにしたのに、アラームでは音が鳴るのです。
そもそも、マイクロインタラクションとは、どのような構成をしているのでしょうか。 それは、以下の構成で表現されます。
iPhoneの例でいうと、2番の条件にアラームは除外されるのです。それがユーザーにとって不透明なのです。
私は、些細なことでも良いので、フィードバックを必ず返す ことを意識しています。
この細部のマイクロインタラクションを丁寧に作り込むことで、他と差別化できるポイントになると思います。 マイクロインタラクションを丁寧にすることで 『神は細部に宿る』 のです。
Web は、ハイパーテキストを介して様々なページが繋がっています。 リンクは、Web の基本的な要素です。
Webフロントエンドのお仕事では、導線をどのように設計するか考える機会が多いです。 どのように回遊してもらうか、どのように離脱を防ぐか、意図せず行き止まりにならないか などを考えます。
リンクは、ページとページをつなぐ架け橋です。 もしリンクが以下のような場合、ユーザーは道に迷うかもしれません。
道の迷わないためにも、以下のことを心がけたいですね。
短くまとめると、マイクロコピー、マイクロインタラクション、リンクの3点は、小さいけれど重要です。 文章、操作、リンクを少し変えるだけで、ユーザー体験は確実に良くなります。
ここまで読んでいただき、ありがとうございました。
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの
2026-01-20
タグ「ブラウザ」の記事
DuckDB WASMとOrigin Private File System (OPFS) を組み合わせ、Google マイアクティビティの履歴をブラウザ内に閉じたまま扱えるようにしたときの設計と学びを整理しました。
ブログ記事のOGP画像に、ブログタイトルを入れたい場面があります。その際、タイトルが長い場合は複数行に分けたり、省略したりする必要があります。今回は、試してみてよさそうだった2つの方法を紹介します。
2025-02-06
最近、ビアードパパの焼きチーズケーキシューにハマっている silverbirder です。文章作成が苦手な私は、AI が文章を代筆する「AI Ghostwriter」という Chrome の拡張機能を開発しました。今回は、この便利なツールの紹介をします。