webサイト制作、便利アプリ、Apple製品について考えるブログ

Webサイトの画面設計書作成時に陥りやすいミス、落とし穴6選。

2021年07月03日 2021年08月04日
Wireframe

東京のWeb制作会社でプロデューサーをしています。
プロデューサーの仕事って分かりにくいと思います。
以前仕事内容を紹介する記事を書いたのでよろしければそちらもご覧ください。

その仕事の中に「ワイヤーフレーム(画面設計書)のレビュー」というものがあります。「ワイヤーフレーム(画面設計書)」は、Webサイトの主要なページ単位で、表示要素、機能、コンテンツ、情報の優先度などを定義するもので、主にWebディレクターが作成します。

そのレビューで何をするかというと、プロジェクトの責任者であるプロデューサーがその内容でクライアントに提示して問題ないか、提示した見積と差異がある内容になっていないかということをチェックします。

今回はそのワイヤーフレーム(画面設計書)のレビューでよく自分がディレクターに伝えることをまとめておきます。
大体いつも一緒のことを言っているので、もうまとめておこう、という、そういう感じです。

ちょっと言葉が刺々しいかもしれませんが、実際は優しく話してます。^ ^;

1. 「隠さないで、出そうよ。」

これ、一番言っているかも。
隠すというのは、いわゆる

  • アコーデオン
  • カルーセル
  • タブ

とかそういう類のUIです。なんですかね、このUIみんな大好きですよね。
そして私は大嫌いです。これらってだいたい最初に表示されているものしか見られてないです。データ見ても大体そう。

例えばタブを例にしましょうか。
タブは最初に表示されているものが100回表示されているとして、一番右のタブがクリックされて見られている回数なんて3回とかそんなレベルです。
最初から表示されているタブは、見たくない人も見るわけなので、単純比較はできないもののあまりにも押されない。
なのに、タブで出しわけするものは並列扱いと勝手に思い込んでいる人が多すぎ。1回クリックさせるというハードルは高いのです。

2.「なんで英語?誰向け?」

これも多いです。
何でワイヤーフレームに英語を入れる必要があるんだと。。。
Service、Case Study 、Aboutってワイヤーフレームに書くな。
サービス、事例紹介、会社概要って書いとけよ。。と。
ワイヤーフレームを定義する人はまず、どういうUIであるべきか、どういうコンテンツを配置するべきか、どういう優先順位で情報配置するべきか、そういうことに心血を注ぐべきなんです。
閲覧するターゲットユーザーが日本人なら日本語で書いておくべきです。
装飾として英語を入れたいなら、それはデザインフェーズでデザイナーと相談して入れてください。ただ、それはあくまで装飾としてです。ナビゲーションや見出しに英語を入れるのはやめてほしい。お前はどこの国の人間だと言いたい。英語の方がかっこいいからとかいうデザイナーもいるようなんだけど、英語を入れたらかっこいいと思ってるその考えがダサいと気付け。

3.「言いたいことは・・・何?」

ユーザーは悩みを抱えてWebサイトに訪問する。
だとするとそのランディングページで課題解決のためのヒントを提示してあげるべき。あれもこれも伝えたいとなって、何言っているページかわからなくなってるケースがたまにある。ページはユーザーのニーズ(つまり検索ワード)の答えになっているべき。このページで解決できるユーザーのお悩みは何か?そこにもっと設計者はコミットすべき。

検討に検討を重ねた結果、もしくは、クライアントからのFB対応で情報整理が追いつかなくなった時に起こりがち。

何が何に従属して、どことどこが並列なのか。
とにかくごちゃごちゃしてて何を言いたいページかわからない。
まず結論が欲しい。

一旦「ひとことで強みが分かるキャッチ的なもの置きません?」
的なアドバイスをすることが多いですね。

4.「見出し読むだけで分かるようにして。」

キャッチコピー、リード文、見出し、、、これらうまく使えていないワイヤーをよく見る。ユーザーは16ポイントの本文テキストをいきなり読んでくれない。見出しテキストを流し読みして「自分の持っている課題を解決できそう。」と思った時に初めて詳細テキストを読んでくれる。
なので、パッと目につくテキストでいかにそういう訴求ができるかが大事なんだけど、見出し部分に単なる項目ラベルを入れているだけ、というケースは結構多い。ラベルよりもユーザーにとって何が、メリット、利益になるのか、そこを伝える。

5.「このあと、ユーザーにどうして欲しいの?」

ページを読んだユーザーがその内容を理解してくれたとして、その後に起こして欲しい動線が見当たらないときに伝える言葉です。
もちろん、お問い合わせ動線はあったりするのですが、ユーザーが見ているページにより、最終コンバージョンへの興味度合いも違うわけです。
そういう時は第2コンバージョン、第3コンバージョンの設置をアドバイスすることがあります。

例えば、
「ナレッジ記事」→「お問い合わせ」というような遷移をほとんどのユーザーはしません。
「ナレッジ記事」→「関連サービス」→「事例」→「資料請求」→「お問い合わせ」
みたいな。

お問い合わせは最終コンバージョンとしてもちろん固定で置くのですが、それに至るまでにどういう情報を見て期待感を高め、理解を深めて、納得してもらうのか、そういうユーザーのモチベーションに合わせた訴求ができているか、、できていないなぁ、、と思う時にこのセリフはよく使います。

6. 「このラベル意味ある?」

「このラベル意味ある?」ということもよくありますね。
具体的にどういうラベルかと言うと

  • ピックアップ
  • おすすめ

といったものですね。

これらは、本当に使いがちです。
使っても良いのですが、使うならば「どのような視点でピックアップされたものか」「どういうポイントでおすすめなのか」という情報も付記してあげる必要があります。

それはご自身の購買活動にあてはめていただければそうだと思うのです。

「これおすすめでーす」って言われて買いますか?という話。
「おすすめポイントはどこですか?」って聞きたくなりますよね。それと一緒。
つまり、ピックアップ、おすすめ、といったラベルはそれ単体では何の意味も持たず、理由に当たる情報があって初めて意味を持つラベルということになります。

意味を持たないものはノイズです。
安易にこういうラベルで情報を区分けするのは危険です。