class="works-template-default single single-works postid-44"

新人Webデザイナー・アラフィフ小学生ママのポートフォリオと学習ブログ

  • Top
  • Profile
  • Works ▼
    • Website
    • Cording
  • Blog
  • Contact
TOP Works 茶の香

茶の香

サイトを見る

Webサイト

コーディングはシンプルにし、背景にアニメーションを使うなどして、シンプルな設計ながら動きがあるサイトにしました。 地図やフッターにCSSでフィルターをかけるなど、CSSを使って和の雰囲気作りを心がけました。 商品紹介のページでは、モックアップで作成したイメージを使用しています。

ロゴバナー

・ブランドのこだわりである「ほうじ茶の香り」を表す。 ・黒い鉄板の上でほうじ茶の葉を焙煎し、茎状に変わっていく過程、香りが立ち上がっていくシーンを再現

(お年賀) ・お正月のお年賀という季節感とブランドイメージの上品さを表現 (桜) ・背景色や全体に桜を取り入れ、季節限定であることを強調 ・看板商品のシフォンケーキの写真で訴求するとともに「限定品」であることを強調し、オンラインストアへ誘導

ロゴ・バナー提案書

コンセプト

ブランドプロフィール ほうじ茶の新たな楽しみを提案するほうじ茶スイーツブランド
ペルソナ スイーツ好き、和にこだわりを持つ30代以上の女性
サイトの目的 商品へのこだわりや茶葉の情報発信を通してブランド価値を高める

詳細

担当 デザイン、コーディング
種別 Web制作、ロゴ・バナー、
言語 HTML、CSS、JavaScript、jQuery、Photoshop、Illustrator
実装した機能 レスポンシブ、アニメーション、アコーディオン、モーダル、スライダー、背景動画
  • Top
  • Profile
  • Works ▼
    • Website
    • Cording
  • Blog
  • Contact
  • Twitterアカウントへのリンクアイコン
  • Instergramへのリンクアイコン
©2022 AYUMI YAMAZAKI All Rights reserved