サイトを見る

制作概要

京抹茶アイス専門店の一般向けのWebサイト（架空サイト）
上品な和のテイストと、美味しそうなアイスの魅力をいかにお客様に伝えて
お店に足を運んでもらえるかを考えました。

ターゲット

・スイーツに興味やこだわりがあるお客様
・京都に観光に訪れている方や、予定のある方

使用ツール

Illustrator / Photoshop / Figma / VSCode / HTML /CSS /Java Script

制作ポイント

ブランドカラー：
抹茶を思わせるグリーンを基調とし、 その他は白やナチュラルなテクスチャーを 組み合わせることで、上品な和のテイストを崩さずに 抹茶を印象をづけるよう考えました。

フォント：
上品な曲線がアイスとの親和性も感じられることから、なめらかなオールドスタイルの明朝体を採用しました。
縦書きでも横書きでも美しく映えるのでサイトと相性が良いと感じました。

デザイン：
ファーストビューには和風の引き戸をイメージしたアニメーションを実装し、その後すぐに美味しそうな商品が出てくる流れで興味を引き付けるよう工夫しました。
トップページ1枚で全体像がわかるような構成にしました。
スクロールエフェクトやホバーエフェクトについてはゆったりした動きをつけることで、和の雰囲気を損なわずにアクセントをつけるよう配慮しています。
また和柄や金箔で装飾を取り入れながら、適度な余白を持って落ち着きのある印象を持たせました。

ロゴ：
なめらかな明朝体をベースに「京」の上部は急須の蓋をイメージし、はらいの部分は茶葉をイメージした形にレイアウトしました。 カラーは深いグリーンで落ち着きと可読性を重視しました。

制作期間

約2週間

担当範囲

Planning / Design /HTML,CSS

学び得たこと

自分が食べたいと思えるかどうかを意識し、構成一つひとつの細部まで丁寧に考えることを意識した。
和の世界観を保ちながら見やすく分かりやすい設計を目指す中で、わずかな配置のズレやエフェクトの選び方で、良くも悪くも印象が大きく変わることがわかりました。
始めての人にも興味を持ってもらえるように大胆なアニメーションを取り入れたが、サイト内で推移して再びTOPに来た際には実行しないようにするなど、ユーザーに支障がないように制御する点で大変苦労したので慎重に考える必要があること学びました。