使用ツール
対応範囲
コーディング/CMS(WordPress)
制作時間
6ヶ月
下記を実装しました。 Pinterest風のグリットデザイン(プラグインjQuery Masonry)、 スライダー、ハンバーガーメニュー、ホバーアニメーション、 WordPressオリジナルテーマ、 カスタム投稿タイプ(functions.phpに追記)、 カスタムフィールド(プラグインCustom Field Suite)、 レスポンシブ対応
使用ツール
対応範囲
コーディング/CMS(WordPress)
制作時間
6ヶ月
下記を実装しました。 Pinterest風のグリットデザイン(プラグインjQuery Masonry)、 スライダー、ハンバーガーメニュー、ホバーアニメーション、 WordPressオリジナルテーマ、 カスタム投稿タイプ(functions.phpに追記)、 カスタムフィールド(プラグインCustom Field Suite)、 レスポンシブ対応
使用ツール
対応範囲
コーディング
制作時間
1週間
コードの管理がしやすいようDartSassを導入し制作しました。
なるべくpositionでの配置をなくすため、オレンジと水色の背景は擬似要素で実装しました。
メディアクエリをPC、スマホ、タブレットで分け表示崩れを最小限に抑えました。
スクロール、フェードインアニメーション、レスポンシブ対応を実装しました。
使用ツール
対応範囲
コーディング
制作時間
1週間
コードの管理がしやすい様、DartSassを導入しました。
TOPの画像が切り替わるアニメーションやスクロールボタンからコンタクトへゆっくり飛ぶアニメーションをつけることで、ユーザーがページに飽きず操作できる様にしました。
「フルーツのこだわり」6つの要素が並ぶ部分で、ユーザーのデバイス幅が変わっても文字が画像の中央に位置する様、擬似要素とbackground-imageを使用しました。
そのほかに、お問い合わせフォームを実装しました。
使用ツール
対応範囲
デザイン/コーディング
制作時間
1週間
コードの管理がしやすい様、DartSassを導入しました。
スマホ表示の際、ハンバーガーメニューをクリックすると右から出てくるアニメーションをCSSのみで作成しました。