クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。
今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。
最高のレイアウトでも言葉がイマイチだと台無しに
みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？
UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。
UIで王道のレイアウトや、利用頻度の高いUIパーツを選択したとしても、そのUIにのせる「文言（言葉）」が、ユーザーの期待に沿ったものでないと「使いづらい」と思われてしまうことがあります。ユーザーは一瞬の判断で次にどのボタンを押すべきか判断します。その一瞬の短い間に、そのUIを「理解してもらう」または「期待をもって次を見たいと思ってもらえる」必要があります。
チェックリストで「UIの言葉選び」の問題を発見する
ユーザーテストをする前に、簡単にチーム内で文言の是非をチェックできるように、基本的な事柄ですが気をつけると良い項目をチェックリストとしてまとめました。
1. 文字量は多すぎないか
内容をアピールしたいあまりに、説明文章のように文字が多いメニューやボタンになってしまうことがあります。 冗長になってないか？という疑いを常に持って、例えば、２秒以内に見つけられるかというテストをします。
2. 文字量は少なすぎないか
すっきりしたサイトを目指すあまりに、逆に説明不足な言葉になってしまうことがあります。見た目は美しくても、 次のページに何があるのかという想像がわかなければ、押してもらえません。ユーザーインタビューなどで、「ここを押したら何がでると思いますか」等の質問をはさむようにしています。
3.読みやすい漢字か（難しければひらがなにするか、漢字にする必要があればルビをふる）
何かに特化したサイトを制作していると、ターゲットとしているユーザーとデザイナー自身の知識が乖離してしまうことがあります。例えばダイエットサイトの場合だと、私が「華奢見せコーデ」という文言を選んで表示した時に、同僚から「読みづらい」という指摘をうけました。こういった問題は、隣のチームの人に見てもらうだけでだけでもかなり違うと思います。「華奢」については、ルビを振ることで対応しました。
4.重要なキーワードを英語で表現していないか？
日本人向けのデザインでは、英字を雰囲気を作るための「ビジュアルデザイン」として採用することがあり、ユーザーは英字を読み飛ばす傾向があります。どうしても英字を使用したい場合は、 雑誌などでよくあるような、英字と日本語両方を並べて配置することを検討すると良いと思います。
5. 他のページで名称が異なっていないか
サイトの改善を繰り返していると、同じことを指しているのに、名称がばらばらになることがあります。漢字とひらがなの違いにも注意しましょう。例えばダイエットのサイトだと、「痩せる」と「やせる」についてどちらを採用するか検討したことがあります。バナーなどでコンテンツを魅力的に見せるために、またはSEO対策として、あえて別の言葉を使うことはあると思いますが、UIについては基本的には同じ機能は同じ文言でリンクしても良いと思います。 また、日付の表記・時間の表記も、統一できているかどうかを見落としがちな項目です。
6.別の機能を同じ名称にしていないか
逆に、サイトが大きくなってくると、違う機能やページなのに、似た名称になり、同じ文言でリンクをしてしまうことがあります。特にウェブサービスの場合は、どのページからユーザーの回遊がスタートするかわかりません。どのページからでも目的の１ページにたどり着けるように注意しましょう。
7.ユーザーの期待に沿っているか
これは意外と見落とされがちな項目で、「分かりやすい」だけではクリックされないことがある、という話です。例えばダイエットサイトでは、「ニュース」というコンテンツがありましたが、「やせる情報と知識」に変更したところ、クリック率が上がりました。ダイエットに興味を持っているユーザーの期待するキーワードがUIやボタンに入れられると良いようです。期待するキーワードの候補を出すために、例えばgoogle Adwordsのキーワードプランナー等で検索ボリュームや組み合わせ候補について調べることができます。
8.ページ全体のバランスを考慮しているか
一部だけ難しい言葉になっていたり、トーンが変わっていないか確認します
9.初見の人が理解できない言葉を使っていないか（無意味な造語になっていないか）
サービスのオリジナリティを模索するあまり、機能やページ名が、分かりづらい造語になってしまうことがあります。例えばクックパッドでも、「つくれぽ」という言葉がはじめてクックパッドを見た人には分かりづらいという話があり、現在は「つくれぽ（つくったよフォトレポート）」とできるたけ併記するようにしています。どうしても言葉選びに悩む場合は、類似サービスをいくつか見て一般的にはどう言い換えるかを参考にします。
10.SEOに強い文言か
画像でUIを作成する場合でも、リスト要素やaltタグとして、文言を入力することができます。ユーザの期待に沿うことと近いですが、同じように検索されやすいキーワードを考慮するという視点を持つことで、より良い言葉選びができると思います。
11.ユーザー名を活用できているか
重要でどうしてもユーザーにぜひ目に留めてもらいたいところでは、「○○さん」というようにその人のユーザー名を表記して呼びかけるようにすると効果的です。人混みの中でも、自分の名字を呼ばれるとはっとするように、UIの中でも自分のユーザー名が表示されていると「自分に関係があるコンテンツかな」と目に止まりやすくなります。マイページなどにユーザ名を置くことは一般的ですが、緊急性の高いものや、パーソナライズした重要な情報などに利用できると思います。
おまけ：実際にテストしてみる
文言を変更した時は、簡単にでも良いので、結果を確認できるようにしておきます。
例えばトップページの離脱率を減少するために、グローバルナビゲーションの変更を行ったことがありました。 ユーザインタビューから、文字が多いという意見があったため、冗長すぎるのではということで思い切って文言を削除しました。
結果、ナビゲーションのクリック率は全体的に減少しましたが、直帰率が6パーセント減少しました。ページ全体のバランスを考慮するという点から、ナビゲーションの文字量を減らすことで、下のコンテンツに目を向けてもらえるようになりました。
UIの中の文言は、小さな要素に見えますが、ほとんどのユーザーが目を通し、次の行動を決める重要なものです。特に項目7~11は「環境・文脈」という視点からのチェックポイントで、その影響力は強く、ケースバイケースで最適な文言は変わってくると思いますが、気に留めておきたい項目だと思います。 クックパッドも、クックパッド ダイエットも、まだまだ良くしていきたい・良くしていくべき箇所があります。ユーザの幸せが増すように、一緒に考えてつくってくださる方を募集中です！クックパッドの仕事に興味がある方はご一報ください。