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