サウンド波間田キャンプ場 公式サイトのデザイン
広島県因島からフェリーで3分。瀬戸内海に浮かぶ生名島にある芝生フリーサイトキャンプ場。
サウンド波間田キャンプ場 公式サイトのデザインをさせて頂きました！
＜今回くにさだが行ったこと＞
- ロゴ制作
- webデザイン（コーディング含まず）
- イラスト制作
- アニメーションイラスト制作
- バナー制作
瀬戸内の海を臨む自然豊かなキャンプ場。ワイルドさの中にも親しみやすさを持ったロゴを目指して
穏やかな瀬戸内の海と由緒ある立石山に囲まれた豊かな自然を満喫できるロケーションを、ワイルドさの中にも親しみを持ってもらえるよう可愛らしいテイストで表現しました。白背景で使われる際には賑やかで清々しいキャンプ場の昼の姿、黒背景で使われる際は海や空いっぱいに静謐をたたえた夜の姿が見えるよう配色を考えています。
まず今回の制作、web制作の仕様が決まっていく中で先に取り掛かったのがロゴデザイン。
ロゴでサイトデザインの大体の方向性が決まるため、緊張しながらも楽しく制作に取り掛かりました。
予約システムを念頭に入れたwebデザイン
今回はキャンプ場の予約システムを入れることが制作の段階で決まっていました。
特に気をつけて制作したのが以下の点です。
- 予約システムやキャンプ場の写真の邪魔をしないデザインに
- ボタン類の形・配色と動きかた
予約システムは海外のプラグインを使用しています。
日本語になった際どのように表現されるか、キャンプ場の予約システムとしてどの部分を使うかなど、ディレクターが考えたワイヤーフレームを元にデザインを考え、予約までの行動を邪魔しないよう、ボタンの位置などもディレクター、コーダーと意見を交わしました。
また、このサイトのデザインコンセプトとして、＜旅のしおり＞を意識していました。旅行の際に配られる冊子ですね。
持ち物リストのようなチェック欄やメモ帳を模したあしらいを取り入れ、カードのようにしました。旅行といえばトランプですね（？）
情報が載らない部分はカードを伏せたようなデザインに実装してもらいました。
親しみやすい太めの線画イラストやアイコン
あちこちに散りばめられた太めの線画イラストや、地図イラスト、バナーなど全て制作しました。
私の制作で、地図イラストは定番になりつつあります。サイトの世界観を表現できるのでおすすめです。
アニメーションとバナー制作
webページのフッター部分と404 not foundページにはアニメーションがあり、こちらのイラストやデザインも全て行いました。
アニメーション
フッター部分にはキャンプ場の風景を表したアニメーションが実装されています。
こちらもロゴと同様、昼と夜の姿を繰り返しています。
404 not foundアニメーション
存在しないページへのアクセス時に表示される、404 not found(404エラー)ページ。
あまり表示されることのないページですが・・
ペープサートをモチーフに、リスとウサギがキャンプ場の周りをぴょんぴょん飛び跳ねているように、遊び心を取り入れました。
こちらのgifアニメもぜひ見て頂けると嬉しいです。↓下記サイトURLに「/404」をつけると、数秒間表示されます。
バナー
今回の制作は年始の頃にロゴ制作が始まり、web制作の仕様を決定しつつ2月からデザインラフを制作、5月のGWに間に合うよう予約システムを動かす第一フェーズ、その後アクティビティページとイベント予約フォームを追加する第二フェーズ（6月末頃完了）に分かれた制作でした。
ボタンやアイコンにテクスチャを余すことなく入れ、手間はかかりながらも楽しんで制作が出来ました。
一緒に製作してくださったチームの方々、本当にありがとうございました。
瀬戸内海に浮かぶ生名島にある芝生フリーサイトキャンプ場、雄大な自然の中で素敵なキャンプになること間違いなしです。
サウンド波間田キャンプ場公式サイトはこちらからどうぞ↓
