国連UNHCR協会 WEBサイトリニューアル

国連UNHCR協会について

国連UNHCR協会は、国連難民高等弁務官事務所（UNHCR）の日本における公式支援窓口です。主に日本から難民への寄付金を集める活動をしています。

今回のリニューアルで実現したかったこと

支援者の方々がよりスムーズにストレスなく寄付を実施できることを目的に、WEBサイトのリニューアルを行いました。

寄付者中心をコンセプトに、より使いやすくするにはどうすればいいか、設計から見直しを行いました。

課題

課題は大きく3つありました。

・スマホ最適でなく、ユーザービリティが低い。

・情報整理が訪問者に親切でなく、欲しい情報になかなかたどり着けない。

・ABテストなどの改善や、寄付者一人ひとりに合わせたコンテンツ配信ができない。

寄付者中心デザインアプローチ

まず寄付者はどのように難民について関心をもち、そして最終的に寄付へと繋がるのかを分析しました。

そして、その寄付者のおかれているシチュエーションを定義し、それぞれのシチュエーションにおいて寄付者が求めていることはなんであるか分析しました。

その分析を踏まえてSEOの観点もプラスし、サイト構成を大幅に組み替えました。

ユーザービリティとコンバージョン率の改善試作の例。トップのカルーセル（横並びのスライドショー）は、2枚目以降の閲覧数が少ないため、カルーセルは廃止しました。

右上に小さく存在したスマホメニューは、指の可動域に入るように左下に配置しました。

ブランドイメージの統一

以前のWEBサイトは青と赤色で構成されていました。グローバルなUNHCRのブランディングカラーである青と黄色に統一し、ベースは青と白、コンバージョンカラーを黄色に定義しました。

ABテストとパーソナライゼーションの実現

以前のWEBサイトでは柔軟な更新作業と、要素のスピーディな改善ができませんでした。Sitecoreシステムを採用し、ABテストとパーソナライゼーションを実現しました。

デザインとコミュニケーションにはAdobe XDを活用

UI/UXの検討にあたり、Adobe XDを利用しました。画面設計から、最終的なデザインまでAdobe XD上で一気通貫して行いました。実際にブラウザ上で画面イメージが操作できるため、使い心地までも開発段階からイメージを掴みやすくコミュニケーションが進みました。最終的にはデザイン設計ページ数は140ページに及びました。