サイト概要
Project
スマートフォンに特化したレイアウトを使い、キャンプ情報サイトを制作しました。PC時は背景画像を固定させ、コンテンツはスマートフォンを想定した幅でレイアウトしています。それによってサイト制作の工数を削減することができました。
また、WordPressのカスタムフィールドを活用し、定期的に情報を更新できるようにしています。さらに画像投稿部分にはCSSのみでフィルタリングを実装し、ユーザビリティーの向上を図りました。
Goal
- スマートフォンに特化したレイアウトの作成方法を理解する
- WordPressのカスタムフィールドを活用し、情報の更新を効率化する
- CSSのみでのフィルタリングの実装方法を理解する
- CSSでのscroll-snapの実装方法を理解し、ユーザビリティの向上を図る
- 動画の実装方法とiOSでの自動再生方法を理解する
Details
- 制作時間：3週間
- 使用言語：HTML, Sass, JavaScript, jQuery, PHP, WordPress
- 使用ツール：Visual Studio Code, Photoshop, Local
制作を通して学んだこと
- 最近増えつつある、スマートフォンに特化したレイアウト方法と、通常のレスポンシブデザインよりも工数が削減できる事が学べた。
- スクロールスナップやカラムズといったスマートフォン向けのUIの実装方法と利便性が理解できた。
- CSSの:not()擬似クラスや「〜」（後続兄弟結合子）を活用することで、より効率的なスタイルの適用が可能であることが分かった。
- font-sizeにremを使用し、直感的にサイズ調整出来るようにSassで自作関数を実装した。
- カスタムフィールドの機能でコンテンツを作成することにより、今後より簡単にコンテンツの差し替えを行えるようにした。
制作の流れ
- 1サイトのコンセプト・設計
- 2ラフデザイン作成
- 3文章コンテンツの作成
- 4HTMLとSassで静的データの作成
- 5HTMLデータをWordPress化
- 6カスタムフィールドの設定
- 7テスト・デバッグ
CSSのみで作成した様々なUI
今回のサイトでは、ナビゲーションのホバーアニメーションや画像投稿のフィルタリング部分などをJavaScriptを使用せずにCSSのみで実装した。
マウスに追随するホバーアニメーション
ナビゲーションのホバー時にカレント要素が追随してくるアニメーションをCSSのみで実装した。
カテゴリー分けした要素をフィルタリングで表示・非表示を切り替える
画像投稿部分では、「~」や「:not()」を活用することで、CSSのみでフィルタリングを実装し、選択したカテゴリーに応じて表示・非表示を切り替えることができるようにした。
また、将来的にWordPressのカスタムフィールドでカテゴリー別に投稿できるようにすることで、クライアント側で更新が容易にできるようにした。
キャンプファイヤー
ホットサンドに挑戦！
コーヒー体験
湖の近くでキャンプ
初テント張り
友達と乾杯！
カスタムフィールドを使ったコンテンツ更新
今回「参加者の声」というコンテンツを入れたが、ここは定期的にクライアントの方でテキスト内容を更新できるようにしたい為、カスタムフィールドを活用することにした。
林田 リタ
初めてのテント体験！
キャンプをしてみたい気持ちはありましたが、うまくテントをはれるか心配でなかなか挑戦できずにいました。今回ツアーでスタッフさんのお手伝いをお願いしたので、安心してテントを張ることができました。スタッフさんにはコーヒーの淹れ方も教えてもらい、自然の中でのんびりと過ごせて素敵な時間が過ごせました。木々のざわめき、満点の星空、きらめく焚火...。非日常的な体験を手軽に楽しめて本当に参加してよかったです。
深谷 祐樹
友人と一緒に自然の中で語り合い
大学時代の同級生とキャンプがしたいという話になり、僕たちはグランピングに興味があったので、埼玉県・秩父市を選びました。昼過ぎに到着し、夕方はみんなでお酒を飲みながらバーベキューを楽しみました。周りの人たちのテントとも距離が離れていたので、自然の音をBGMに消灯時間までゆっくりと語り会うことができました。普段は仕事でなかなか会えないので、ツアーをきっかけにみんなで集まれたので良い経験になりました。
カスタムフィールド側で設定
