FREENANCE Ad

マイクロコピーの魔法で、ユーザーエクスペリエンスがグンと高まる!

unsplash
FREENANCE Ad

マイクロコピーとは、少ない字数のテキストのこと。アプリやWebサイトのボタンラベル、ヒントテキスト、エラーメッセージなどがこれに含まれます。

マイクロコピーを正しく使うと、ユーザーが日常的に触れるコンテンツを印象深いものへ変えることができます。それによって、ユーザーが商品を購入するのを途中で辞めてしまったり、不満を抱かれてしまったりという失敗が減ります。

この記事で、UX改善に大きく寄与するマイクロコピー作成のコツをマスターしてください!

マイクロコピーを作成するときに気をつけたい6つのポイント

1. 人間らしい表現をする

近年スーパーマーケットで急増しているセルフレジは、昔ながらのレジに比べ言葉ひとつひとつを吟味しなければなりません。

セルフレジ画面上のコピーでは実際の会話に代わることはできませんが、良いマイクロコピーを用いれば人との会話に近いような表現ができます。人間味を感じたユーザーは信頼感を抱きます。

以下は、人間らしい会話文を重視した製品の例です。

  • カジュアルな表現と、猫のアイコンに注目。この製品がユーザーに心を開き、利用してもらうのを歓迎しているということが伝わります。

スクリーンショット

  • コピーが「私たち」という一人称であることに注目してください。『Vimeo』が人の手によって作られたサービスであることを表現しています。

vimeo

  • 『Yelp』はかなりカジュアルな問いかけをすることで、ユーザーが率直なレビューをするよう促しています。

Yelp

2. マイクロコピーで驚き与える

かの有名なアリストテレスは「ユーモアの秘密はサプライズです」と言ったそう。
この考え方はマイクロコピーにも当てはまります。

必要なのは、人を笑顔にするために上手に配置されたメッセージです。マイクロコピーの適切な場所、内容を考えてみてください。

  • 読み込み画面
  • 完了メッセージ(成功メッセージ)
  • エラーメッセージ
  • 例または、プレースホルダ
  • オンボーディングフロー
  • 空白の状態

喜びを生みだすためのヒントとして、予想外な方法で使用されているマイクロコピーの例を見てみましょう。

  • 『Zeplin』はページロード中に、「コーヒーを淹れよう」と提案してきます。

Zeplin

  • 『Tumblr』はユーモアを交えた、役立つメッセージを表示します。

Tumpler

  • 『Dropbox Paper』は、テキスト入力後も書いている気分にさせるプレースホルダメッセージを表示します。

Dropbox Paper

3. ユーザーに自信をもたせる

ほとんどの人には、アプリやウェブサイトを使用する目的があります。情報を探したり、オンラインで注文したり、何かを作成したりというところでしょう。その目標を果すためには、一連のステップを踏まなければなりません。

そのとき、プロセスが面倒くさいものなら、一部のユーザーはあきらめて、Webサイトの設計者を罵るかもしれません。

こんなシーンでもマイクロコピーを活用しましょう。
たくさんのプロセスを必要とする場合は、マイクロコピーを使ってユーザーに継続した行動を促せます。

以下の例は、人に何かをフレンドリーに促し、きっかけを与える製品です。

  • 『Dribbble』は名前の入力欄にメッセージを添えています。

Dribbble

  • 『Nordstrom』は、カートに商品を追加したら褒めてくれます。ユーザーの選択を肯定して動機づけているのです。

Nordstrom

4. パーソナルなメッセージを使う

先日、友人の結婚式のお礼状を受け取ったときのこと。
冒頭は他のメッセージカードと同じような言葉が綴られていました。「私たちの結婚式に参加してくれてありがとう……」
そのうしろには、私たちの高校時代の思い出が書かれていました。
他の誰でもない自分だけに向けられたメッセージを、特別なものだと感じました。

このような、ときめくような感情はマイクロコピーでも再現できます。
特定の人やグループへのメッセージを書き分けて、メッセージをユーザーにとって特別なものにしてあげましょう。

メッセージをカスタマイズすることで、どのように喜びを生みだすかを見てみましょう。

  • 『OkCupid』で新しいアカウントを作成しようとすると、ユーザーの街を褒めてくれます。

OkCupid

  • 『Meetup』では、主催者が参加者の名前をカスタマイズできます。「出席者」と書くよりいいですね。

Meetup

  • 『Asana』は時間帯ごとに挨拶を変えます。午後10時を過ぎると、「こんにちは、夜行性!」と。

Asana

5. 細部までこだわる

Webサイトやモバイル機器を見ていると、マイクロコピーの多さに驚くことでしょう。

たとえば『Dropbox』の場合。
『Dropbox』は、シンプルな製品のように見えますが、そのインターフェースには27,000以上のメッセージが含まれています。その文量がどれほどのものなのか、比較対象を提示すると、『ハリー・ポッターと賢者の石』という分厚い本には6,600弱の文が書かれています。

Webサイトや製品には思ったよりもたくさんの言葉が詰め込まれているのです。

メッセージはブラウザの上部から各画像のaltタグまで、あらゆるところに隠れています。どのメッセージにも喜びを生みだせる可能性があるので、書き手は知恵を振り絞っていることでしょう。

マイクロコピーを使った印象的な方法について見てみましょう。

  • 『MailChimp』からログアウトすると、URLに「See Ya Later」と表示されます。

MailChimp

  • 『Basecamp』のフッターには、曜日ごとにフレンドリーなメッセージが表示されます。

Basecamp

6. 画像と組みあわせる

絵本作家のドクター・スースは、言葉と絵を組みあわせることで人々に鮮明な印象を与える力に長けています。

彼の絵は夢のよう。言葉はかなり風変りです。
それらが組みあわさったとき、一冊の絵本に魔法がかかるのです。

言葉と写真の組みあわせは相互効果として働きます。どちらかだけの場合よりも、魔法のような印象深さを感じさせます。
上手に組みあわせられた事例を見てみましょう。

  • 『Flickr』は悲しい気分になっているユーザーを、明るい写真で励まします。

Flickr

  • 『Hubspot』のエラーページは、優しい言葉と壊れた心臓の画像を組みあわせています。

スクリーンショット

  • アイコンを効果的に使えば、コピーの印象を変えられます。

スクリーンショット

マイクロコピーは諸刃の剣! 失敗しないためのアドバイス

マイクロコピーには利点しかないように見えますが、一番大変なのは正解を見つけることです。
奇抜過ぎても障害になるので、起こりうる危険を把握しなければなりません。

The dangers of delightful design

インターフェイスの作成では、簡潔さと明快さを追求するのが一般的です。

しかし、長いメッセージを用いた方がより印象づけられることもあります。
明快さを重視するか、印象深さを重視するかは、製品やブランドの特性に応じて、アプローチの方向性を調整しなければなりません。

マイクロコピーを採用する前に、次のことを試してみてください。

「らしさ」を決める

Webサイトや製品作りにおいてのガイドラインをまとめてください。多くの企業ではライティングのスタイルガイドで、文体に関することや口調などを指定しています。『styleguides』から参考になるものを見つけてください。

styleguides.io

巧妙なコピーを多用しない

アプリを起動するたびに、気の利いたコピーを読まなければならないとなると、ユーザーは疲れてしまいます。
目立たせたいときに使えるよう、印象に残したいコピーの使用は適切なときまでとっておいてください。

早いうちにリスクを取ってみる

小さなブランドなら、思い切ったマイクロコピーも試しやすいのでは? 大規模であればあるほど、チャレンジする機会が減ります。リスクや人々の反応を恐れないでください。

ランダム化されたメッセージを検討してください

毎回違うメッセージを表示することで、マイクロピーをより印象的にすることができます。この小さなサプライズは、一定時間表示し繰り返します。

人は、些細な気づかいに喜びを感じる。

好きな製品やサービスに思いをめぐらせてみると、ひとつの共通点があります。

私が毎日通うコーヒーショップの店員さんは、必ずラテアートをしてくれます。
マグカップの中に描かれた美しい曲線は、飲み物の味を変えるものではありませんが、それでも私は笑顔になります。

そのひと手間からは、店のスタッフがコーヒーに抱く愛の大きさを感じます。
本当に些細なことですが、客である私がコーヒーショップについてもつ印象を変えるのです。

マイクロコピーも同様に、見過ごされがちな些細な工夫です。マイクロコピーは、ユーザーがあなたのWebサイトや製品にどのような印象を抱くかに大きく影響します。これは大きなチャンスではありませんか?

マイクロコピーを些細な問題だと片づけず、デザインし直してみてください。ユーザーエクスペリエンスの向上に大きく役立つことでしょう。

(翻訳:Yuri Tanaka/Thumbnail Photo:Nina Strehl

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship