公益社団法人被害者支援都民センター公式サイト

クライアント : 公益社団法人被害者支援都民センター様
URL : https://www.shien.or.jp/
ジャンル : コーポレート・団体サイト
事業内容 : Web制作
分野 : 広報・PR
担当範囲：情報設計∕ディレクション∕デザイン∕コーディング∕CMS構築（WordPress）∕サーバ移管サポート
仕様 : CMS（WordPress）∕レスポンシブデザイン（PC・SP）
プロジェクト期間：約10か月

犯罪や交通事故の被害者やご遺族などへの支援活動とともに、被害者が配慮を受けられる社会を目指した広報啓発活動などを行っている公益社団法人被害者支援都民センター様（以下、被害者支援都民センター様）。
今回オレンジ社では、被害者支援都民センター様の全28ページのサイトのフルリニューアルを担当させていただきました。

■リニューアルの背景

“被害者支援センター”は認知度の高い団体ではないため、Webサイトを通じて「信頼できる団体であり、安心して相談できる存在であることを伝えたい」という目的がありました。
一方で、リニューアル以前のサイトは文章中心の構成で、余白や文字サイズにメリハリが欠けており、画像などの視覚的な手掛かりも不足していたため、ユーザーにとって分かりにくいサイトとなっていました。そのため、より直感的で分かりやすい情報設計への改善が課題となっていました。

・相談時の主な課題やご要望

リニューアル以前は閲覧する端末（パソコン・スマートフォン）に応じて表示させるページを異なるものに切り替えていたため、閲覧する端末によっては表示される情報に違いが出てしまったり、閲覧する端末や画面サイズによっては見づらくなってしまうなど、更新の面でも負担がかかるといった課題がありました。
これらを解消するため、パソコンとスマートフォンのページを1つに統合し、さまざまな端末に対応可能なレスポンシブ設計へと改善しています。

また、サイト全体の構成が分かりづらく、見たいページへたどり着きにくい、現在どのページにいるのか分かりにくいといった点も課題となっていました。
そのため、情報の整理やサイト構成の見直しを行い、必要な情報や目的のページにスムーズにアクセスできる、分かりやすく見やすいサイトへ改善いたしました。

さらに、トップページについては、文字量が多く読みづらいという課題があったため、文字量を見直し、すっきりとしたデザインにしたいというご要望がありました。
これらの課題を踏まえ、文字量の整理や余白の調整など、デザインの見直しを行いました。

■デザインコンセプト

お客様の目的を達成するため、「信頼感があって分かりやすいサイト」・「安心感や優しさ、あたたかみがありつつ開放感の感じられるデザイン」をコンセプトに作成いたしました。
また、このサイトに訪れた支援を必要としている方が、自分も対象だと思えるようにということを常に意識していました。老若男女さまざまな方たちが対象であるということに配慮して、全体のカラーやテイスト、写真やイラストなどを選定するうえでも、年齢や性別に偏りが出ないように作成しています。

・トップページについて

トップページのメインビジュアルには、澄んだ青空の写真を採用いたしました。
ブルーを基調としながら花や鳥のイラストを重ねることで、やわらかく開放感のある印象を演出しています。さらに、キャッチコピーには手書き風フォントを使用し、親しみやすさを加えました。
また、スライドショーでは年齢や性別に偏りが出ないように配慮し、老若男女さまざまな方たちが登場する構成となっています。
また、背景にパララックス（背景を固定にすることで、画面をスクロールさせた時に背景が動かない見せ方）などのアニメーションを取り入れ、動きのある開放的なサイトに仕上げています。ページ下部の「ひとりで悩まないで相談してください」のセクションでは、相談に踏み切れない人や悩んでいる人も一歩踏み出せるようなイメージで、前向きになれるように、心が少しでも晴れるようにという想いを込めて、背景に青空を採用いたしました。

・全体的なデザインについて

ベースカラーは明るく落ち着いたベージュを使用しており、多様性を感じられるカラフルな差し色と調和した配色にいたしました。
モチーフには丸みのあるものを取り入れ、やわらかく流れるような印象に。グラデーションのあしらいを加えることで優しいふんわりとした印象に仕上げています。

下層ページでは、ページタイトルの背景色をグローバルナビゲーションの色と連動させることで、視覚的にも現在地が把握しやすいデザインにいたしました。直感的に理解できる構造を意識し、全体を通して「見やすさ・分かりやすさ」を重視しています。

・TOPICSの見せ方の改善とCMS導入

リニューアル以前のサイトでは、TOPICS（新着記事）はトップページにのみ掲載されており、内容は文字のみで最新のお知らせが数件表示されるものになっており、個別記事やアーカイブが存在しない仕様となっていました。過去の情報が残らないため、いつどんなイベントを行ったかの履歴が追えなかったり、新着情報の詳細を後から確認したりすることができない環境となっていました。
今回のリニューアルでは、TOPICSごとに記事の個別ページを作成し、アーカイブとして残すことができるように改善いたしました。
また、CMS（WordPress）を導入したことで、更新や記事管理を行えるようになりました。さらに、今回のリニューアルの内容に即したマニュアルを作成したことで、今までCMSに触れてこなかった方でも操作ができるようになりました。このようにセンターの担当者様が更新や記事管理を行えるようになったことで、掲載したい情報をタイムリーに発信することができる環境になりました。

・紙媒体からWebへの情報最適化

リーフレットなどの紙媒体に掲載されていた情報を整理し、Webに適した形で再構成いたしました。
グラフについては既存の紙媒体のデータをそのまま流用するのではなく、サイトに合わせてカラーやフォント、レイアウトなどのデザイン面も含めて新たに作成しています。
また、年度ごとに更新が必要なデータであるため、継続的な更新を前提としたデザイン設計といたしました。

・オリジナルキャラクター

被害者支援都民センター様のオリジナルキャラクター「結ちゃん」。
センターの案内人という位置づけでセンターの施設の入口のモニターや、YouTubeの活動報告動画にも登場しているイメージキャラクターです。
以前はトップページにのみ登場していましたが、より活躍させたいというご意見もあり案内人としてナビゲーションや利用者の疑問に答えるような形で、様々な場面で登場させることを提案いたしました。
なお、イラストはすべて被害者支援都民センター様に本サイト用としてご用意していただきました。

＜該当ページ＞

本プロジェクトは、被害者支援都民センター様とオレンジ社が打ち合わせを重ねながら、協力して制作を進めてまいりました。
課題や方向性を共有し、サイト全体の表現や見せ方を検討することで、より良いサイトづくりを実現することができました。

お客様の声

　「犯罪被害者支援」というテーマをホームページ上に落とし込むのは、とても悩ましい問題でした。また、イラストだけでオリジナリティを出すのは難しく、人物写真等を盛り込んだページ構成ができないか、センター内でも様々な意見がありました。オレンジ社様は、度重なる打合せの際に、私たちの活動への思いや意図を親身に聞いてくださいました。こちらが質問したことにも丁寧にご説明いただき、見ていただいた方にわかりやすいホームページを一緒に目指してくださいました。
　それから、当センターのキャラクター（結ちゃん）をこのホームページにどう活用するか悩んでいたところ、「結ちゃんは、都民センターの案内人である。」というお言葉をいただき、あちこちに案内人として登場させることができました。当センターの活動に愛を持って接して作成していただいたこと、心より感謝しております。