かごしま環境未来館
WEB構築グループ デザイナーです。今回、かごしま環境未来館様 WEBサイトリニューアルを担当させていただきました。今回のリニューアル以前から、弊社の方で保守と運用支援をさせていただいておりましたが、2020年3月の本館のリニューアルに合わせて全面的なHPリニューアルを行わせていただきました。特にイベント関連に力を入れられていらっしゃいますので、デザインだけで無く、そちらの機能面での強化も対応させていただきました。
環境未来館様 アウトライン
かごしま環境未来館様は鹿児島中央駅から甲突川沿いを徒歩約20分。特徴的な屋根がポイントで、落ち着いた空気も漂う敷地内は”環境未来館”という名称の通り、緑に囲まれながらも前衛的な雰囲気も兼ね備えています。
以下公式HPより。
市民･事業者が環境について関心や理解を深め、日常生活や事業活動において、自発的に環境保全活動を実施するとともに、その活動の輪を広げていくことを促進するため、様々な事業を行っています。
- 環境学習を推進
- 環境情報を収集・提供
- 環境学習・保全活動を支援
- 考え・行動する人を育む
- リユース・リサイクル活動を促進
上記をベースとした様々な活動を通して、市民や事業者が環境についての関心を深め自発的な環境保全活動を実施するとともに、その活動の輪を広げていく促進するため様々な事業を行っておられます。
デザインレビュー
ファーストビュー～イベント周り
環境未来館様では、日々非常に多くのイベントや活動を行われています。スタッフの皆様はそれぞれリーフレットやフライヤーといった掲示物の作成に非常に力を入れられています。それらの作品をしっかりとイベント告知に活かせるよう、トップのイベント表示枠は大きめのサムネイルを用いています。
イベント詳細ページから直接申し込みが可能。-
サムネイルも管理画面から自動で取得表示出来るようになっており、運用者様が運用しやすい作りにもなっています。また、イベントへの参加申し込みも、詳細ページからダイレクトに行えるようになっています。機能とデザイン性が両立したコンテンツになっています。
申し込みフォームの設置も、管理画面のGUIでいくつかのステップを踏むだけで簡単に付与出来るようになっています。
イベント告知、募集から応募フォームまでの一連のフローですが、弊社では運用者様がいかに負担を少なく更新出来るかという部分にフォーカスし、フロント部分だけでなく、バックエンド側の機能的な部分も視野に入れたトータルのご提案を致します。
ご利用ガイド
画面全体に広がる大胆なフォトを配置しています。環境未来館様の特徴的な佇まい。芝生が埋め込まれた屋根、そしてからりと晴れた晴天。こちらの写真を提供頂いた際、デザイナーとしては、絶対に活かすべき写真と感じ、大胆に使う事にしました。
ボタンリンクのボックスをはみ出させる事で、間延びの無い特徴的なデザインになったかと思います。ただ実際にコーディングする際は、様々なディスプレイサイズが存在します。デザインを優先し、リンク等の機能に影響が出ては本末転倒なので、そういった構築時のあれこれも考慮しながらデザインを行う事が重要ですね。
デザインのヒントは日常の風景から
モダンな雰囲気が漂う環境未来館様なので、それに負けじと前衛的なレイアウトでデザインを行いました。特徴的なのはパネル型のバナーリンク。縦長に大胆に配置しました。こちらのデザインについては、私が日常生活をしていて見かけた、公園に設置されたモノリス型のモニュメントを参考にしました。こういったデザインのヒントは身の回りの全てのものが参考になります。そういった“デザインの種”をつね日頃から自分の中で育てられるようにしたいですね。
展示ゾーン
グレーを効果的に使う。
環境未来館様の中でもひときわ特徴的でデザイン性のたかい展示ゾーン。写真で見る通り非常に素敵な空間となっており必見です。こちらを紹介するコンテンツのデザインですが、頂いた写真が非常に素敵な写真だったため、この写真を最大限伝えるべく、あえてシンプルなデザインにしました。
グレーカラーは便利なカラー
グレーカラーはデザインをする時に非常に便利なカラーです。色の知識があれば何故かという事はしっかりとした理由があるのでそちらを参考にしていただき…
WEBに関して言えば、グレーというカラーはデザイン的なセクションわけだったり、デザイン的情報量の調整等、無彩色という色は非常に便利だったりします。
今回はデザイン的”セクションわけ”をのためグレーを背景にひきましたが
たとえば、デザインがちょっと寂しい、もしくは散らかったように感じる場合グレーカラーを背景に引くと、ぐっとまとまりが出る事があります。あまり濃く使うと全体が暗くなってしまいますので、あくまでさり気なく引くことが重要です。ほんのりが鉄板です。人間の目はこういった微妙な濃淡も感じ取れるからです。
フッター
今回、ご提供頂いた写真が全体的に素敵な構図が多く、その中でも個人的に一番気に入っていたのはフッターに使用した夕日をバックにした本館の写真です。鮮やかなオレンジ色と、それに照らされる本館の構図はそれだけでストーリーを感じる写真です。
フッターという事で関連情報バナーの配置が多いエリアですが、各種SNSのリンクに背景を引くか・引かないかという部分はデザイン的に悩みました。写真背景上にコンテンツを配置する際はどうしても視認性が下がってしまうからです。
ただ、各種SNSアイコンは昨今はもう、多くの人がそれだけで機能を予想出来るほど浸透していると思います。なので、今回はデザイン性を重視して背景色は引かず配置しました。
最後に
いかがだったでしょうか。今回のリニューアルではやはり写真の構図が良かったという点が大きいですね。これら写真をしっかりと活かせるように作るのもデザイナーの腕の見せ所かなと感じます。主にデザインの話がメインでしたが、現在、環境未来館様の方でしっかりと管理機能を使っていただき、多くの素敵なコンテンツを配信されています。やはり”使っていただけるホームページ”は製作者としては大変うれしく思います。
| Client | かごしま環境未来館 様 |
|---|---|
| Site | https://www.kagoshima-miraikan.jp/ VIEW SITE |
| Launch | 2020.03.01 |
| Genre | 環境活動・団体 |
| Information |
Webに関するお問い合わせはこちら
まずはお気軽にお問い合わせください。