【架空のカフェサイト】

制作サイト
サイトURL
works-etelliahackathon.siroto-portfolio.com

サイト設計 / コーディング / Figma / HTML / CSS / jQuery

制作期間:1週間

参加しているコミュニティ ETELLIA ONLINEのイベント 「オンライン・ハッカソン」でチーム制作した架空のケーキ通販専門サイトです。figmaのオリジナルデザインカンプを元に、HTML/CSSコーディングを行いました。 「お家で出来る簡単デザートビュッフェ販売のウェブサイト制作」という目的の元、ターゲット・クライアント情報・訴求したいポイントの情報からサイト設計(共同)とコーディングを担当しました。デザイン担当:みわ様

サイト設計時に話し合ったこと

  • 全体的なセクションの配置位置
  • 「コンセプトの強みと通信販売」を消費者に意識していただく為、TOPページスクロール後すぐにキャッチコピー・ショップ・コンセプトのセクションを設置
  • アニメーションのイメージ
  • 最終的なデザインのすり合わせ

コーディング時のポイント

  • 追従ヘッダーにして、右上のショップページリンクからのアクセスを容易に
  • ターゲット層を意識し、アニメーションはあまり勢いを付けすぎず、ふわっと、ゆっくりとした、上品な印象のフェードインに
  • TOPのスライダーはCSSでのみアニメーションを実装して動作を軽く
  • ページ下部のギャラリーはGridプロパティを使用しています

実装機能のご紹介

  • スライダー

    swiperで実装しています。レスポンシブに切り替えてもデザインが大きく崩れないよう高さの調整を行いました。

  • フェードイン・フェードアウト

    jQueryで実装しています。ターゲット層を意識し、ふわっとした動きにしました。