おはようございます。こんにちは。こんばんは。

HCD-Net認定 人間中心設計スペシャリスト 井山貴弘です。

今回が「CipherCraft/Mail 7」編、最後の記事となります。

まずは、各篇に遷移しやすいように、かんたんな見出しを用意しました。

最初から見出しのある記事が望ましいですが、あえて使いづらい印象を与えて、なにが必要か気付いてもらう、そんな取り組みを、今回の連載を通して行っていました。

過去4回、見出しがないまま、全文読むか、ブラウザのスクロールや検索機能を使うか、ともかく、ご自身で読みたい箇所を探してください、という、おもてなしの心がない記事に頑張って付き合っていただき、誠にありがとうございました。

本当の使いやすいものは、気付きづらいもの、相手に気付かせず、相手が自然としたいことができるようになっている、それが理想の姿です。

いかに相手を楽にするか、そのための頑張りを怠ってしまうと、相手が頑張らなくてはいけません。

例えば、病院へお見舞いにりんごを持って行ったとします。「りんご丸ごと、ナイフと一緒に相手に渡すのか」「りんごの皮を剥いて一口大に切ってから相手に渡すのか」どちらでも『りんごを食べてもらう』という行為は満たせます。

もう少しITっぽいお話にすると、ショッピングサイトでのお届け先入力時、「郵便番号、都道府県、市区町村、番地を全て相手に入力させるか」「郵便番号を入力したら、都道府県、市区町村、番地までシステムが埋めるか」どちらでも『住所を入力してもらう』という行為は満たせます。

相手のためにあなたは、どこまで頑張りますか？あなたは相手に、どこまで頑張ってもらいますか？

送信するメールの宛先やその他情報を再確認させることで、誤送信ゼロを目指す「CipherCraft/Mail」は、今回のカイゼンで、どこまであなたのために頑張ってくれる製品に仕上がったのでしょうか。

今回は、プロトタイプ構築のお話です。

色のついた「ワイヤーフレーム」

前回ご紹介した通り、ホワイトボードに画面案を書きながら、シナリオを検討していたので、この工程に入る前に、画面のレイアウトは固まっていました。

また、最終的な提案資料では、点検項目や表示する付帯情報など、画面を構成する機能や要素も、ほぼ用意できていました。

既存の画面を調査した結果、「重要な項目が初見でわかりづらい」「画面にメリハリがない」というUI上の問題があったため、重点を置くべき項目を目立たせる見た目の装飾を検討する必要がありました。

更に人間工学の視点を組み込んで、「いかに目立たせて、点検しやすく促すのか」を中心に、表示するメッセージの文言まで含めて設計を行い、ワイヤーフレームを構築することとしました。

レイアウトは前回時点で決まっていましたが、実際の配色などは、未着手でした。

ワイヤーフレームに色をつけることは、画面全体の検討にならず、各パーツの配色など、細部の検討に注力してしまう結果を生み、通常は望ましくありません。

しかし今回は、人間の持つ特性を考慮し、「誤送信を防ぐためにどのような配色にすると人の注意を惹けるか」というレベルの話まで検討を行う必要がありました。

そこで、選択前、選択中、選択後の色の変化にまでこだわった、ワイヤーフレームを検討し、3名のデザイナで4つの案を作成しました。

各種都合上、ボヤけた画像しか用意できませんでしたが、みなさまはどの画面がお好みでしょうか。

右に行くほど洗練はされていますが、見た目をトレンドに合わせて刷新し、スタイリッシュで直感的な操作に近づけるカイゼンが、必ずしも成功に繋がらないことは、過去多くの事例が示しています。

特に今回は、いろいろな業種の会社で日常的に利用され、間違わずに点検をさせなくてはならない画面となります。

「今風の見た目」という依頼があったとしても、ターゲットとなるユーザの、ITリテラシと慣れ（PC利用年数）を考慮した、見た目にすることが重要となります。

そんな要素を踏まえて説明し、最終的に選ばれたのは、以下の画面案でした。

この画面の見た目、そして配色のポイントを細かく見ていきましょう。

見た目のポイント

改めて、こちらが既存のCipherCraft/Mail点検画面となります。

Windows XPライクな見た目となりますが、慣れ親しんだ見た目と、全く違う見た目の画面を扱うと、認知に戸惑ってのヒューマンエラーを発生させてしまう恐れがあります。

そのため、大きく変化を感じさせる見た目は避けることとしました。

ITリテラシは高過ぎず、PCに触れている年数は長い、40代男性をメインターゲットとし、トレンドのデザインを追い過ぎずない、Windows 7くらいの時代感を持たせました。

これにより、Windows XPライクな現行版から乗り換えるお客様も、違和感なく移行できるデザインにする、という要件も満たすことができます。

長い海外旅行後に感じる「やっぱり日本食だよね」という安心感を、この点検画面に持たせた、という言い方もあるかもしれません。

配色のポイント

配色については、初見でも重要な箇所がすぐわかるよう、人間が色に抱く感情を踏まえて、点検ボタンの着色を行いました。

• 警告の感情 → 赤色

• 注意の感情 → 黄色

• 平常の感情 → 灰色

その上で、点検ボタン上の文字、メールアドレスが目立つように、背景の色味は落ち着いたものにしました。

同時に40代男性が好むライトな配色とすることで、点検にネガティブな印象を持たせないよう配慮しました。

外出先でのメール送信も考慮し、薄暗い場所でも点検ボタン内の文字が認識できるよう、点検ボタンは白背景に黒文字としました。

これらの配色のコンセプトは、ブラッシュアップを経た、現在販売している画面でも、変わらず採用されています。

動く「プロトタイプ」

以上のように、ワイヤーフレーム案は決まりましたが、その後の開発工程においてプロトタイプで構築したHTMLのソースを流用したい、という相談も受けていました。

そこで、作成したワイヤーフレーム案から、実際に遷移するだけでなく、操作時のアニメーションも動作するHTMLベースのプロトタイプを作成することとしました。

製品にも実装するソースとなることから、当社内にあるHTML5推進室（現デザイン工房）のメンバの協力を受けて、品質の確かな、動くプロトタイプを用意することができました。

実画面相当の、操作できるプロトタイプができたことで、製品担当やその上長、社内の関係者との調整がスムーズに進みました。

更に報道発表や、代理店様説明の場で、点検している画面の様子を、アニメーションまで含めて見せることができ、多くの好評の声をいただきました。

複雑化に向かっていた点検方針を覆し、シンプルにした今回の画面に対して、このように、社外のみなさまからも好感が得られたことで、関係者は、今回のカイゼン方針が正しかった、という確証を持つことができました。

その後、プロトタイプを用いてテストを行い、製品販売までに反映すべき、操作感の改善ポイントや向上すべき見た目のポイントを、関係者全員で、共有することができました。

そして全ての関係者が納得し、課題を共有した上で、ブラッシュアップを依頼するデザイン会社への要求仕様を、作成することができました。

完成した「CipherCraft/Mail 7」

報道発表から2ヵ月後の2016年9月、その間、見た目のブラッシュアップと各種機能の実装を行い、販売開始をしたのが、現在の「CipherCraft/Mail 7」となります。

今製品は、メールを送信すると点検画面が表示され、アドレスや本文、添付ファイルなど内容を再確認を促すものです。

【誤送信防止強化】と【見た目の向上】という2点が、製品担当から求められました。

誤送信した人、そして点検がマンネリ化した人を調査・分析して、いかに点検を促し、使いやすさを向上させて、効果を上げられるか。

そして人間工学という要素を取り入れて、いかにミスする要因を減らして、ユーザのサポートを担えるシステムになるか。

そのふたつを、徹底的に追及して生まれた製品となっております。

無料評価版も提供しておりますので、ご興味がありましたら、ぜひ一度お試しください。

以上で、「CipherCraft/Mail」編は最終回となりましたが、このUXブログ自体は最終回でありません。

このUXブログ自体は最終回でありません。（大事なことなので、2回書きました）

冒頭でりんごを例に出しましたが、うちのワイフが青森出身のため、千葉出身の私は、共に帰省しても、言葉がわからず、冬は歩くこともできません。

国を跨がなくても、同じ日本国内であっても、育ちや環境の違いによって、使いやすいもの、愛されるもの、は変わってしまう恐れがあります。

そんな中で、いかに愛される共通解を見つけていくのか。

過去の事例紹介から、現在や未来に話題を移して、こころを動かすICTデザイン室のメンバも加わりながら、このブログは、もうちょっとだけ続きます。