概要
サイト名
Camp with My Dog サイトを見る
サイト概要
飼い犬の同伴や車の乗り入れが可能なキャンプ場のWebサイト
目的
利用者に向けて雰囲気やシステム、料金、施設などを紹介する。
最終的なアクション
問い合わせ、来客数の増加。
デザインイメージ
「ポップでわかりやすいデザイン」を重視する。複雑な構成にならないようにする。
使用色
薄いクリーム色と緑をベースにする。リンクは原則オレンジのボタンにして分かりやすくする。
参考サイト
群馬みなかみ ほうだいぎキャンプ場
キャンプラスいいづな（飯綱東高原オートキャンプ場）
スプラッシュガーデン秩父オートキャンプ場
制作時間
構想1時間、情報収集4時間
デザイン17時間(PCサイト14時間、モバイルサイト3時間)
素材収集2時間、加工3時間、作成2時間
コーディング28時間(HTML7時間、CSS20時間、Javascript1時間)
計57時間
詳細
職業訓練の修了制作の作品の1つ。「ポップなモノに挑戦したい」と思い、実家にいる犬と猫から着想を得てこの題材にしました。ドッグラン併設のカフェのサイトにしようかなとも考えたのですが、せっかくならもっとアウトドアなモノにしようと思いキャンプ場になりました。訓練中にバナー作成で扱った「アウトドアな雰囲気のある中古車売買のキャンペーン」という題材からも影響を受けています。
頑張ったところ
ロゴの文字はあえて画像を使用せず、HTMLとCSSで組みました。レスポンシブに対応させるためにフォントサイズやレイアウトの書き方に試行錯誤したのは良い勉強になったと思います。また、border-raidusプロパティによる画像の切り抜きや、SVGの積極的な使用など、傍目には微妙かもしれませんが個人的には初挑戦、頑張ったところが多いサイトです。
レスポンシブ対応についても、部分的にmin()やmax()、clamp()などを使用する方法を取り入れています。
また、今回はJavascriptが無効の状態でも問題なく閲覧できる状態を目指しました。そのため、スマホ用のハンバーガーメニューはすべてCSSで実装しています。Javascript(JQuery)を使用しているのはコンテンツのフェードインや、BGSwitcherを併用したトップページのファーストビューの画像の切り替えのみとなっています。
制作を終えて
ポップなものを目指したのですが、結局は割と落ち着いた雰囲気になったのかなと思います。「あしらい」をもっと積極的に使用したほうが良かったなと思う反面、実際に盛り込んでいたら、かなりの手間がかかって間に合わなかったかもしれない、とも思います。新しいことに挑戦するにはそれなりの時間がかかります。沢山の制作を通して沢山の「新しいこと」を経験していけば、それは自分の手札になって、もっといろんなことを盛り込める余裕が生まれるのかなぁ…と感じます。