コーポレートサイト株式会社 世田谷サービス公社

街を支える活動が区民へ伝わるように
コーポレートサイトリニューアル

世田谷サービス公社様のコーポレートサイトリニューアルを担当させていただきました。同社は「区民のための企業」として、世田谷区の発展と区民福祉の向上を目指して事業を展開しています。公共性の高い事業内容を世田谷区民の方々に広く知ってもらい、親しみを持っていただけるサイトにするにはどうすればいいか。社員の方にお話を伺いつつ、情報の整理やデザインについてご提案し、プロジェクトを進めました。

  • 親しみやすいキャッチとイラスト
  • 視覚的な情報を増やし情報をわかりやすく伝える

プロジェクト期間とスコープ

撮影のディレクションも行い、会社の透明性を強調

プロジェクト期間はおよそ7ヶ月。関係者の方々への確認をしっかりとしつつ、プロジェクトを丁寧に進めていきました。クーシーでは企画・設計からデザイン、システム開発に至るまでの全工程を担当しています。「社内の様子がわかる写真を使いたい」というご要望がありましたので撮影も行いました。こちらについては、カメラマンの手配から撮影のディレクションまで弊社で行い、社内の雰囲気が伝わるものにするべく、賑やかな雰囲気のなか撮影を行なっていきました。

クライアントの課題

事業内容をわかりやすく伝えたい

リニューアル前はデザインとのミスマッチもあり、事業内容が見る人にうまく伝わっていないのが課題でした。世田谷サービス公社は地域社会の発展と区民福祉の向上に向けて、老若男女を問わず幅広い層に向けてサービスを提供しています。公共性が高く、社内外で関わっている人が多いのが特徴です。したがって、誰にとっても見やすい「親切なサイト」でなければなりません。「見やすさ」と「親しみやすさ」に配慮しつつ、地域を支える企業の取り組みをいかにわかりやすく伝えていくかが制作のポイントとなりました。

配色のコントラストにより視認性を向上

クーシーの提案

情報が整理された誰もが使いやすいサイトに

企業の活動内容をわかりやすく正確に伝えるために、サイトの情報を整理し、視覚的な情報を増やすことを提案いたしました。テキストベースの情報の羅列では、そもそもページを見てもらえないかもしれません。ページ数はリニューアル前から半分以下にまで削減し、サイト内の情報をスリム化。写真やイラストを多用することで閲覧をスムーズにすると同時に、企業の活動をイメージしやすくしました。
また同社の公共性を考慮すると、年齢や身体機能に関わらず誰もが情報にアクセスできることにも配慮が必要です。同社の方からも「色弱の方への配慮をしてほしい」というご要望をいただいていました。そこで主に色弱の方を想定して、「アクセシビリティ」を意識したデザインを提案しました。例えば「色にコントラストをしっかりとつけて文字を見やすくする」「ボタンにだけグラデーションをつけて目立たせることでクリックできる箇所であるとわかるようにする」などです。

制作のポイント

サイトの信頼感と親しみやすさのバランスを考慮

公共性の高さを保ちつつ、あまり杓子定規にならず、興味・関心を持って見てもらえるサイトにするため以下のような工夫をしました。
まずはコントラスト。アクセシビリティを意識して文字と背景色にコントラストをつけたのは前述の通りですが、あまりはっきりさせすぎると温かみに欠けてしまいます。ゆっくり動くアニメーションや背景色の淡さでバランスをとり、柔らかい雰囲気になるようにしました。世田谷サービス公社様のロゴの緑色を踏襲し、元々のイメージを大きく崩さないような配色でリニューアルできたと思います。
イラストも親しみやすさの演出に一役買っています。トップページのキービジュアルをはじめ、サイトの至るところにアイソメトリックのイラストを使用しました。これは同社が関わる事業や区民生活の場面を表現しています。よく見ると実在する建物があるので、区民の方には楽しんでいただけるポイントではないかと思います。
キービジュアル直下に、同社で働く方々の写真が流れてくるセクションを作りました。施設や事業内容だけのサイトでは、どんな会社か見えづらいかもしれません。働いている人の顔や様子が見えると、サイト訪問者の方々に同社を身近に感じていただけるのではと考えました。

まとめ

細部までこだわりが詰まったイラスト

今回のリニューアルによって、当初目指していた「事業のわかりやすさ」「親しみやすさ」「アクセスのしやすさ」は実現できたかと思います。ちなみにイラストは、クライアント様から参考画像をご提供いただき、類似するレンポジ(ストックフォト)を編集し可能な範囲で業務風景に似せて作りました。またデザイナーのこだわりで、世田谷FM放送のマスコットキャラクター「DJせたハチ」もアイソメトリックで作成し、サイトに入れてあります。そんなところも含めて、サイトを訪れた皆様に楽しんでいただき、お役に立つサイトとなっていれば幸いです。

SP表示
URL
https://www.setagaya.co.jp/

コーポレートの制作実績

Webサイトやアプリの
お問い合わせ

Webサイトのご相談・お見積りは
こちらから。

お問い合わせする

制作実績TOP