トルコグラス認知設計サイト

URL
https://aze95.stars.ne.jp/selam/index.html
担当範囲
企画設計/UIデザイン/コーディング(HTML・CSS)/ビジュアル設計
使用ツール
Illustrator/VisualStudioCode
制作期間
6日(6時間/日)
Keywords
, , , , , , , ,

商品理解を目的に設計した架空トルコ雑貨ECサイト制作(Selam)

概要

架空のトルコ雑貨ブランド「Selam」のECサイトを、企画・デザイン・コーディングまで一貫して制作しました。

本サイトは、”販売”を最優先とするのではなく、「トルコグラスという文化や魅力を知ってもらうこと」を目的に設計しています。

トルコグラスに馴染みのないユーザーでも興味を持てるよう、ビジュアルと情報構成の両面からアプローチしました。

目的設計

  • トルコグラスの認知拡大
  • 商品の世界観を視覚的に伝える
  • 最後までスクロールしたくなる体験設計

制作のこだわり

①写真を主役にした構成

商品理解を深めるため、写真を大胆かつ多く使用。
ビジュアルで魅力を直感的に伝えられるレイアウトを設計しました。

②「トルコグラスとは?」の明確化

単なる商品一覧ではなく、文化や背景を説明するセクションを配置。
”知らないものを知る”体験を意識した情報設計を行いました。

③スクロール体験の演出

背景に斜線アニメーションやグラデーションを取り入れ、下へ下へと視線が流れるような動線を設計。
自然とスクロールしたくなるリズムを意識しています。

技術面

CMSは使用せず、HTML/CSSを用いてゼロから構築。
ブランド世界観を損なわないよう、細部のレイアウトや余白設計にも配慮しました。

BACK TO LIST