PRODUCTION

さあ、海の生き物たちに会いに行こう

水族館サイトのモックアップ画像

#フレーム設計 #デザイン #ロゴ作成 #コーディング #制作途中

※トップページのコーディング途中です。

サイトについて
岡山県瀬戸内市にある架空の水族館サイトです。Webデザインの勉強を始めた時から水族館のサイトを作ってみたいと思っており、今回、施設の名前やコンセプトから全て自分で考えて制作しました。水族館好きだからこそ、痒いところにも手が届くようなサイトが作れたと思います。
※サイト内で使用している生き物達の写真は全て自分で撮影した写真です。
概要・コンセプト
サイト概要、コンセプト
制作範囲
フレーム設計/デザイン/ロゴ作成/コーディング
使用ツール
ワイヤー/デザイン ▷ Figma
ロゴ・バナー作成、 ▷ Photoshop
制作期間
約1ヶ月(デザイン)
コーディングは制作途中です。
意識した点
《キャッチコピー》
『さあ、海の生き物たちに会いに行こう』
生き物を色々な角度から間近で見れたり、ふれあいのスペースも多くあったりするので、”見に行く”のではなく、”会いに行く”という表現にしました。また、ワクワク感や行きたくなる衝動感を感じられるように文頭に、『さあ、』とつけて声かけのようなキャッチコピーにしました。
《設計》
下記の2点を意識して作りました。

①迷わない分かりやすいサイト

情報量がかなり多かったため、トップ下に大カテゴリのページを3つ設置(総合案内・館内情報・ニュース)し、そこからまた各カテゴリの詳細ページに飛べるようにしました。また、そのページで知りたいことが解決できなかった時のために、各詳細ページの最下部にはよくある質問ページに飛べるボタンを設置。よくある質問ページでも、分かりやすいよう上部にカテゴリごとに分けたボタンを置き、すぐに知りたいことを見つけられるように工夫しました。

②あったらいいなを詰め込む

あらゆる情報を掲載し、十分な情報を得られるサイトにしたいという方向性だったので、水族館好きだからこそ思う、あったらいいなと思う情報を詰め込みました。例えば、トップのファーストビューに載せている、瀬戸内市の天気や営業時間・ショースケジュールは、まさにこれから行こうかなと思っている人にとっては、あるととても助かる情報です。また、レストランのメニューをPDFで載せることで、子連れの方でも子供が食べられるものはあるか、事前にメニューを見ることができれば安心できると思います。このようにあったらいいなを詰め込んで、見る人にとって親切なサイトになるよう心がけて作りました。

《配色》
ロゴにも入っている黄色(#FFF59D)をアクセントカラーとして使用し、メリハリをつけています。また、海を連想させる青系色も多く使用しました。
《デザイン》
写真を交互に少しずらしたり、背景を波模様のデザインにしたりと、動きのあるデザインにすることでワクワク感や躍動感を表現しました。また、全体的に明るい印象になっていますが、フッター背景を暗くすることで、引き締まった印象にしています。
《ロゴ》
詳しい詳細は のページに掲載しております。
制作物一覧へもどる