- サイトURL
- works-etelliahackathon.siroto-portfolio.com
サイト設計 / コーディング / Figma / HTML / CSS / jQuery
制作期間:1週間
参加しているコミュニティ
ETELLIA ONLINEのイベント 「オンライン・ハッカソン」でチーム制作した架空のケーキ通販専門サイトです。figmaのオリジナルデザインカンプを元に、HTML/CSSコーディングを行いました。
「お家で出来る簡単デザートビュッフェ販売のウェブサイト制作」という目的の元、ターゲット・クライアント情報・訴求したいポイントの情報からサイト設計(共同)とコーディングを担当しました。デザイン担当:みわ様
サイト設計時に話し合ったこと
- 全体的なセクションの配置位置
-
「コンセプトの強みと通信販売」を消費者に意識していただく為、TOPページスクロール後すぐにキャッチコピー・ショップ・コンセプトのセクションを設置
- アニメーションのイメージ
- 最終的なデザインのすり合わせ
コーディング時のポイント
- 追従ヘッダーにして、右上のショップページリンクからのアクセスを容易に
- ターゲット層を意識し、アニメーションはあまり勢いを付けすぎず、ふわっと、ゆっくりとした、上品な印象のフェードインに
- TOPのスライダーはCSSでのみアニメーションを実装して動作を軽く
- ページ下部のギャラリーはGridプロパティを使用しています
実装機能のご紹介