TOP

ブログ - BtoBのWebマーケティングに役立つあれこれ

マテリアルデザインが推奨するマイクロコピー作成術

  • このエントリーをはてなブックマークに追加

ボタン横などに置くごく短い文章(=マイクロコピー)は、UIの良し悪しを決める重要事項のひとつ。Googleが提唱するマテリアルデザインのガイドラインから、マイクロコピー作成のポイントをピックアップした。

マイクロコピーとは

マイクロコピーとは、ボタン横やポップアップウィンドウなどに表示されるごく短いテキストのことです。わかりやすいWebサイトを作るにあたり、マイクロコピーは非常に重要な役割を果たします。

手に取れる実体がある道具なら、それを手に取るユーザーは、材質・形状・大きさ・重さなどなど、属性情報から、どう使うものなのかを自然に読み取ることができます。一方、手に取れる実体がないWebサイトは、適切な操作方法を判断するための情報量が限られます。

目的達成のためにどう操作すればいいのか、操作が成功したかなどは、モニターに表示する情報のみで伝えなければなりません。操作を実行しようとするユーザーの背中を押すマイクロコピーも、適切な操作方法を伝える非常に重要な要素です。

サイト全体のデザインやレイアウトといった大枠と比べれば、マイクロコピーはごく小さな要素に思えるかもしれません。しかしこの細部の違いによって、Webサイトのわかりやすさ・使いやすさ、ユーザーの安心感、ひいては成果が変わってきます。作成のポイントを押さえておきましょう。

ここではGoogleが提供するマテリアルデザインのガイドラインの中から、マイクロコピー作成の要点をまとめました。

マテリアルデザインとマイクロコピーの関係

Googleが提唱するマテリアルデザインは、「Webサイトやアプリをどう作れば、(実体を持つ道具のように)自然に操作方法がユーザーに伝わるのか?」を追求するデザイン理論です。日本語訳版も公開されているのでぜひチェックしてください。

※参考
Google「マテリアルデザインのガイドライン(日本語)」
https://material.io/jp/guidelines/

※ガイドラインでは、Webサイトやアプリをどう表現すればモニター上で(物理的法則を無視することなく)実体を持つモノのように見せることができるのか、わかりやすいUIにできるのか、事例と合わせて細かく説明されています。Webサイト作成に活きる部分(レイアウトやカラー設定について等)は先週の記事でエッセンスをまとめています。

※write Wired Web担当者向け 最新デジタルマーケブログ
マテリアルデザインのエッセンス抽出!わかりやすいWebデザインのポイント
http://writewired.jp/blog/essence-extraction-of-material-design-points-of-easy-to-understand-web-design.html

なおマテリアルデザインのガイドラインでは、レイアウトや色などのいわゆる「デザイン」についてだけでなく、テキストライティング(マイクロコピー作成)についても手厚い説明があります。ボタンやメニュー、メッセージウィンドウなどに表示するごく短い文章をどう書くべきか、具体的な事例と合わせて掘り下げています。

マテリアルデザインのガイドラインは主にアプリデザインについての説明となっていますが、マイクロコピーについての説明は、Webサイト作成・改善においても役立てることができます。

マイクロコピー作成の3つのポイント

マイクロコピーは言葉の通り、ごく短いテキストです。ボタンの横やポップアップウィンドウ、エラーメッセージなどで、ユーザーに端的に情報を伝えるために表示されます。文字数が限られた中で要点を伝え、ユーザーの目的達成をサポートするためには何を気を付けるべきだと思いますか?

マテリアルデザインのガイドラインではいろいろなテクニックが具体的に説明されていますが、大きく分類するとポイント以下の3つです。

【マイクロコピー作成のポイント】
1.わかりやすくする
2.短くする
3.親しみやすくする

マイクロコピー作成のポイント1.わかりやすくする

わかりやすい文章とは何でしょうか。これはなかなかの難題ですよね。マテリアルデザインのガイドラインで、わかりやすい文章の必要事項として説明されているのは、文章の構造の整理です。

同じことを伝えるのでも複数の言い回しがありますよね。限られた文字数でわかりやすくものごとを伝えるためにGoogleが推奨しているのは【ユーザーを主語にした能動態】にすることです。

たとえばお問い合わせ後の確認時に表示するマイクロコピーとして「お問い合わせが送信されました」「お問い合わせを送信しました」という文はどちらも一応成り立ちます。しかし、よりわかりやすいのは、ユーザーを主語とした能動態である後者です。

また、手順ではなく目的を先に記載することもポイントです。「(操作)すると(目的達成)できます」でなく「(目的達成)するために(操作)する」という流れを意識しましょう。たとえばメルマガ配信停止ページのマイクロコピーとしては「チェックを外すと配信停止になります」でなく「配信停止する場合はチェックを外します」が適切となります。

その他、ユーザーが理解できない可能性のある専門用語や業界用語を使わないこと、サイト内で使用する語句を統一することなどもわかりやすく迷わせないマイクロコピー作成のポイントです。

【わかりやすくするポイント】
・ユーザーを主語にした能動態の文にする
・目的→手順の順番で説明する

マイクロコピー作成のポイント2.短くする

「わかりやすくする」と少し重なる部分ですが、文字数が限られるマイクロコピー作成において適切なのは、短く単刀直入な表現です。過度に丁寧な表現は使わない、過剰な情報を入れないよう情報量を調整するなど、工夫して手短に情報を伝えましょう。

マイクロコピーに限ったことではありませんが、丁寧な表現とわかりやすさはトレードオフです。(敬語やビジネス文書においての「クッション言葉」は、単刀直入を避けることで礼儀や柔らかさを実現しています。)

また、よかれと思って詳細な説明を入れることでかえって読みにくくなってしまう、ということはプレゼン資料や報告書作成などでもよくあるパターンですよね。要はバランスです。

判断は難しいですが、マイクロコピーも案を出して終わりにすることなく、適切な表現か、過不足がないか、考え抜いて決めましょう。

【短くするポイント】
・過度な敬語を使わない
・詳細は少しずつ明らかにする(詳しく言い過ぎない
・簡単な語句を選択する
・不要と思われる句点や記号、感嘆符は省略する

マイクロコピー作成のポイント3.親しみやすくする

3つめは、短く単刀直入であっても感じよい表現にするポイントです。上記の通り、簡潔さと丁寧さはトレードオフのため、単刀直入な文章は時に失礼な印象になってしまいます。マイクロコピー作成において簡潔に、かつ感じよく親しみの持てる印象を持つメッセージを発信するためにできるのは、〜しますか?という語りかけ表現を使うこと、絶対に〜します!完璧に削除します!といった大げさな表現をしないこと、「Aはできません」といった否定的表現を可能な限り避けて「BやCまではできます」といった肯定表現を使うことなどです。

【親しみやすくするポイント】
・語りかける
・大げさな表現、自慢、宣伝はしない
・否定的な表現を避ける

ここまで上げた3つのポイントはマイクロコピー作成の要点のため、Webサイトのトップにおくようなコピーやバナーコピー作成ではまた事情が違ってきます。しかし、文章をわかりやすくする要点という面では、文章作成全般に役立つ知識です。わかりやすい文章構造や工夫について、常に意識していきたいものですね!

マテリアルデザインにおける写真とイラスト

マテリアルデザインのガイドラインでは、わかりやすく魅力的なデザインを作る上げるための写真やイラストの使い方・選び方のポイントとして、「独自性があること」「本物であること」があげられています。

【写真やイラストの使い方・選び方】
・文脈に合わせて使用する
・独自性や創造性を感じさせる画像を使用する
・インタビューや取材で撮影した実物があれば写真を使う
※抽象的な場合はイラストを使用する
・汎用的で本物らしくないストック素材は避け、人間味のある「実物」を使う

これは「紙とインクの見え方を転用してわかりやすい見た目を作る」というマテリアルデザインのコンセプトからは少し離れているように感じるかもしれません。しかし、多くの情報に触れるユーザーの心理を捉える重要な要素がうまく表現されていますよね。

Webデザインというと、大枠であるレイアウトやカラー設定などに意識が向きがちです。しかしアイコンや素材の選び方など、細部へのこだわりも、伝わりやすいデザインにするための重要な要素です。このあたりも、ぜひ参考にしていきたいですね。

なおマテリアルデザインのガイドラインでは、テキストライティングについても重要なヒントが取り上げられています。テキスト作成については、次回記事で取り上げる予定ですので、こちらもぜひチェックしてください!

企業向けデジタルマーケティングCMS 企業向けデジタルマーケティングCMS

最近の投稿

企業向けデジタルマーケティングCMS