ノンプログラミング言語を含め、Web アプリ開発は 4 年目になり、私も「なんか UI はもっといい感じにして。」「とりあえず使いやすい機能であればいい。」みたいな要望をいただけるようになりました。
これらの要望は、よくデザイン業界などで "NGとされる指示" だと噂には聞いておりましたが、じっさいに言われるとその意味がよくわかります。本当にどんな UI・仕様にすればいいのか分からないのです。
「任されている」からといって調子に乗ってはいけません。要件は必ず聞かねばなりません。これは開発における鉄の掟です。私は、まず一般的なアプローチでこんなヒアリングを試みます。
①具体的なゴールの認識合わせをする。
・どこかイメージに合うWebページやサービスはありますか？
・視覚的に強調したい部分（重要な機能や情報）はありますか？
②簡易的に作成してみて意見をもらう。
・この部分のレイアウトについて問題なさそうですか？
・感覚でよいので、色や配置についてどう感じるか教えてください。
③ターゲットユーザーや使用目的を聞いてみる。
・どういった環境で利用することを想定していますか？
・利用者ユーザーが最初にしたいアクションは何だと思いますか？
しかし、残念ながらこれらのアプローチは IT 業界のおじさんに通用しません。
利用ケースや現場の声など、情報は出てくるのですが UI・仕様の案に関しては「だからこうして欲しいんだ。」がまったく出てこないのです。
それはなぜか。
彼らにも正解が分からないからです。
そして、私もプロではないので「これが正解です。」とはとても言えませんし、そもそも判断することができません。さらに "見やすい"; "分かりやすい"; "使いやすい" といった感性は人それぞれです。
そのため、仮でデザイン・機能の案を作ったとしても「なんか配置とか違う気がする。」「本当このデザインが使いやすいの？」「この仕様って一般的なの？」みたいなことを無限に言われるワケです。
最初はこれに腹を立てていました。
しかし、真面目にこの問題に向き合う機会があり、今年は「頑張って」みました。「そういう心配があるのは当たり前だよな…」という気持ちも分かるからです。（あいまいな指示しかしないお前も悪いけどな！）
どうすればいいか考えたとき、すぐに、頑張ること自体が無駄だということに気が付いてしまいます。全員が使いやすくて、全員が使い慣れているデザイン・機能にすればいい。それは分かっているのですが、そんなデザインがあるのなら苦労はしません。
───と、ここで「いや、あるか」と思いついたのです。みんなが普段から触れているサービス、例えば Google、Amazon、食べログなどのサービスや Web サイトが。
そして、引き寄せられるように答えに辿り着いたのです。
「なんか UI はもっといい感じにして」を1発で黙らせる方法、それは既存のサービスや Web サイトの UI を完全にコピーすることです。
既存のサービスや Web サイトをコピーする
私の経験上、「なんかもっといい感じにして」には2つのパターンがあります。
①不満点があるが明確化できていない。デザインの現状に何かしらの不満があるものの、それを明確に言葉にできない。お客さんの「いい感じ」には、具体的な改善提案が必要。
②具体的な目的ややりたいことがあるにも関わらず言ってこない。面倒な性格なので、どういうことを重要視したいのか聞かれないといわない、もしくは聞かれてもいわない。
「既存のサービスや Web サイトをコピー」する方法では、こんな面倒くさいおじさんに付き合う必要はありません。どちらのパターンだとしても黙らせることができます。
なぜなら、「いい感じか / いい感じでないか」「使いやすいか / 使いにくいか」という判断基準ではなくなり、実績で評価されるようになるからです。
また、「なぜこの UI・仕様にしたか？」の説明になるため、お客様側も OK の判断しやすかったりします。ほとんどの場合で「Google と同じ仕様なのか。だったらいいか。」となります。私は「まぁこれ以上考えるのも面倒だよな」と思い、ほくそ笑むワケです。
もし「やっぱり使いにくい気がする」と粘られたら「すみません、Google よりいい案が思いつかないので、希望があるなら教えてもらっていいですか？（では、あなたは Google よりもすばらしいアイディアを思いつけるというのですね？）」と言えばいいです。
--
この方法のよいところは、簡単に UI・仕様が決まるかもしれないということです。
あなたが自分で考える労力を減らせるほか、面倒なヒアリングをすっ飛ばすことができます。あなた自身ですら「これは本当に使いやすいのか？」を意識する必要はありません。なんなら、あなたの意見もノイズでしかないです。
あなたがやるべきことはただ一つ、「この UIは Google と同じ仕様で作りました。」と事実のみを言うことです。
「そんなにうまくいくわけがない」と思う方も多いでしょう。実は、少し大げさに書いて、興味を引くようにしています。次に言いたいことは、私たちが意外と既存のデザインに慣れてしまっている、ということです。3つの例を通して、それをご覧いただければと思います。
①確認ダイアログ
まずは、次の確認ダイアログメッセージを見てください。
これは私が自作したものです。パッと見、ふつうの確認ダイアログに見えますが、なにか違和感があります。
次に、Windows の標準メッセージを出してみます。
そうなんです。ふだん我々が目にしているポップアップメッセージは、「はい」が左、「いいえ」は右なんですよ。
みなさんも、きっとこの並びに慣れてしまっています。このような Yen/No のポップアップメッセージが出たときに、肯定的な選択をする場合は、選択肢をみなくても左を押せる人が多いはずです。
②「週末」っていつ？
スケジュール アプリを作るとします。あなたは予定表の設定に「週末」を入れることにしました。では、あなたにとって「週末」とはいつのことでしょうか。
あらためて聞かれると、週の終わりである日曜日だけな気がします。しかし、多くの人は土日の意味で使っていることでしょう。最近では、金曜日を含めて週末といったりする人もいるようです。
───これ、実は答えはありません。言葉というのは時代とともに意味が変化するのです。事実、総務省の統計局ですら答えを出せていません。
ここでいう「週末」は、特に定義がなされていないことから字義どおり解するのだと考えられることから、広辞苑を調べたところ「一週間の末。土曜日、また土曜日から日曜日へかけていう。近年は金曜日を含めてもいう。」とされ
（…）
「週末」を特定することはできませんでした。
出典：総務省統計研究研修所 - "週の始めは何曜日なのか？"
https://www.stat.go.jp/library/pdf/minigougai01.pdf
では、さっそく Microsoft Outlook で「週末」の設定をしてみましょう。
すると「土曜日」と「日曜日」に予定が入りました。じゃあこれでいいでしょう。人によって認識が違うものも、既存をマネれば考える必要はありませんね。
③検索ボタン
データの検索機能も、よくある機能でしょうか。
みなさんは、いつから Google Chrome の検索バーに「検索ボタン」がないのかご存じでしょうか。ちなみに私は知りません。いつの間にかなくなっていましたし、だからといってそれで困った記憶もありません。
なぜ困ってないかって、それは「Enter キー」で検索をするからです。
しかし、よく考えたらコレ─── Enter キーで検索されること───はあまり直感的な操作ではない気がします。それでも困らなかったのは、Enter キーで検索する動きに慣れているからです。
あなたの Web アプリに、検索ボタンは必要でしょうか？もしかしたら必要ないかもしれません。むしろ、検索ボタンではなく「 Enter キーで検索できる機能」の方が必要かもしれません。
まぁ、ふだんPCを触らないユーザーをターゲットにするのであれば、古き良き、みんな大好きYahoo Japan 様を参考にすればいいと思います。
まだまだ検索ボタンがご健在であり、そのUIも非常に分かりやすいです。
--
いかがでしょうか。意外と「既存のデザインに慣れてしまっている」ということを再認識できるものがあったのではないでしょうか。「この UIは Google と同じ仕様で作りました。」の力が、少しでも伝わっていると嬉しいです。
既存のサイトこそ正義
あたりまえですが、UI・仕様によって参考にするサービスや Web サイトは変わります。各サービスごとに特化した機能があるためです。
最後に、私の考える「これらのサービス、Web サイトのマネをしておけば大体の機能は間違いない！」を共有して終わろうと思います。
Gmail（Google Mail）
表示のシンプルさに比べ、できることが多いデザインです。データの一覧表示、サイドバー、ヘッダーともに無駄がなく、どのアクションについても直感的な操作ができます。
特に、ユーザーが一番最初にやりたいアクション（メールを見る）に重点を置かれていて、「じゃあ次にこれがしたいよね？」も考えられていると思います。データ一覧に対しての操作がかなり優秀だと思ってまして、メール読んだ後は、すぐに削除したりラベルをつけたりできます。
メールをまとめて選択できたり、一括操作をしたりできます。
Amazon
非常に多くの商品を扱うためか、強力な検索機能と絞り込みフィルターが魅力です。膨大なアイテム数から目的のものを見つけやすくするため、カテゴリー別フィルタや人気ランキング、評価順など、非常に細かくフィルタリングが可能です。
おすすめ機能や購入履歴、閲覧履歴など、データ表示における最強の見本だと思います。私は作成したことがないのですが、レビューや評価システム───特に写真とコメントの表示───については何気に優秀な UI だと思っています。
フィルターの見せ方、種類、配置が完璧です。
トリバゴ（旅行サイト）
とにかくデータの比較の場面で使えます。情報を収集し、簡単に比較できるインターフェースが特徴です。ユーザーに複数のオプションを一目で見せることができるデザインです。
カレンダー機能による日付選択機能が非常に優秀なほか、目的地、予算、評価、施設の特徴（Wi-Fi、駐車場など）など、複数フィルターによる検索機能はデータの一覧表示とその検索機能の最高峰だと思っています。
日付フィルターがこんなに大きいのも珍しいです。
ホットペッパー グルメ
選択したデータの詳細表示にはグルメサイトが優秀です。席数、予算、営業時間、アクセス、喫煙可否などの情報がひとめで分かるように表示されています。テキストに限らず、メニューやお店などの写真の表示方法も参考になります。
地図表示機能では、検索以上の情報をユーザーに与えることができるほか、地理的な位置関係を「視覚的」に確認できます。私はとあるアプリで、各工場や支社の位置情報などを表示するさい、参考にさせていただきました。
表示は結構シンプルなんですが、機能としては十分なんですよね。
おわりに
Webアプリを作るとき、UIや機能を設計するのも、開発者としての楽しみではあります。しかし、私のようにデザインに慣れていない開発者の作ったシステムは、使いにくいものになる可能性があります。
それを避けるためにも、あえて自分で考えないというのも戦略のひとつだと思います。我々が考えないといけないのは、ターゲットユーザーにマッチしたサイトや Web サービスの例を探すだけです。あとはそれをコピーすれば、自然とユーザーにとって使いやすい（そして使い慣れた）アプリになるはずです。
以上です。