uji様　企画書

ファッションブランドuji WEBサイト ブランディングサイト

Uji様 Official Website 企画 / デザイン / コーディング ２ヶ月（2023.01〜） Illustrator / Photoshop / Dream weaver アパレルブランドuji様の公式webサイトを制作させていただきま した。 商品の魅力のみならず、クライアント様のメインコンセプト WILD&SENSITIVITYの世界観を魅力的な写真と共に感じていた だけるようなサイトを目指しました。

PC SP Webサイトの全体像は下記のURLからご覧ください。 https://ujif.sakura.ne.jp/

• https://ujif.sakura.ne.jp/

お客様 ブランド名 : ▶お客様・世界観 uji 様 事業内容 ： インスタグラム/BASEを中心としたワンピース・シャツの販売 ブランドロゴ : 課題とゴール ペルソナ設定 サイト概要 サイト名 uji Official Website 世界観 シンプル、スタイリッシュだけど独創的、エキゾチック。

課題 ・ブランドのファンを獲得する。 ・商品購入までをスムーズにする。 ・ブランドのコンセプト、世界観を十分に伝えられていない。 現状 ・アートワーク(写真)を掲載する場所がない。 ・商品やオーダー方法の詳細がなく、お客様の問い合わせに追われている。 お客様・世界観 ・商品の魅力について伝える場所が少ない。 ▶課題とゴール アピール ペルソナ設定 ☑アートワークを中心に世界観を創造。 ☑購入から納品までが明確なサイト構成。 ☑商品のこだわりや独自性を提示。 ☑商品の魅力を写真と共に伝える。 サイト概要 ゴール 世界観・コンセプトに興味を持ってもらい、展示会来場・商品購入に繋ぐサイト。 世界観・コンセプトを具体化し、文章はお客様にとって必要な情報を取捨選択、最低 限掲示することで、アートワークを中心に興味を持ってもらう。また、展示会情報・ オーダー方法を提示することで、商品購入までの流れをスムーズにする。ブランドの ファン獲得とオーダーまでの効率化を目的としたサイト制作を行う。

ペルソナ 行動の傾向 ・ 趣味 →美術館・展示会巡り。まだ流行っていない素敵なファッショ ンブ ランドやカフェを平日の就寝前や土日にインスタグラムでチェックすること。 ・ ブランド お客様・世界観 →よく購入するブランドは、BEAUTY＆YOUTH、BEAMS、ユニクロ 、古着も 好き。 現状と目的 ▶ペルソナ設定 サイト概要 ☑最近仕事が忙しく、店舗で洋服をゆっくり見る時間がないため、ネット通販 での購入が増えている。 小林 梨花子 ・25歳 ・女性 ・162cm xxkg ・独身 ・都内在住 ・デザイン会社勤務 ・社会人３年目 内面の傾向 ・ 勤務時はシャツとパンツでカッコいいスタイル。平日はスタイリッシュな格 好が多いが、その日の気分に合わせたファッションや自分らしさを主張でき る個性的なファッションが好きなので、休日に楽しむ。 ・ スタイリッシュで個性的なかっこいい自分を持った女性が好き。 ☑インスタグラム発のアパレルブランドも気になっているが、決定打にかけ、 購入までに至っていない。

サイト方針（クライアント視点） サイト制作の目的をもとに、下記３点について特にアピールする。 また、現時点でインスタグラムのDMにてお問い合わせ対応に追われているため お客様・世界観 可能な限りサイト上で解消し、作業負担を減らす。 課題とゴール Point１コンセプト・世界観を伝える ペルソナ設定 ▶サイト概要 ブランドイメージを具体化し、世界観やコンセプトのファン（共感者）を獲得する。 Point２ こだわりを伝える 手作り・商品への想いなどを写真や文章で伝え、他とは違うujiの強みや独自性を伝える。 Point３ 商品購入までをスムーズする 商品のオーダー方法から納品までを明確にし、顧客の不安解消と制作者の作業負担を減らす。

サイト方針（ユーザー視点） サイト制作の目的をもとに、購買意欲が高まるよう下記３点についてアピールする。 また、スムーズに購入できるよう導線をつくる。 お客様・世界観 Point１応援したくなる 現状と目的 商品だけでなく、世界観やコンセプトに共感できる、自分が見つけたお気に入りのブランドが見つかる。 ペルソナ設定 Point２ 個性をアピールできる ▶サイト概要 流行りにとらわれない、独自性やこだわりを持つブランドの商品を着ることで、 個性やファッションのこだわりをアピールできる。 Point３ 商品を購入しやすくなる 商品のオーダー方法や着用イメージが明確になることで、店舗を持たないブランドに対する購入ま での不安が減り、購入しやすくなる。

Point① コンセプト・世界観を伝える。 コンセプト・世界観を具体的にし、文章は最低限。アートワークを中心に構築する。 ◆コンセプト 「WILD&SENSITIVITY」 ブランド名“uji”は藤の花が由来。 ① 藤のように人々は変わるところと変わらないところがあり、そこが魅力的。 ②日本的な藤の花。日本人のような繊細さとワイルドさ(大胆さ)を持ち合わせているところを伝えたい。 ◆世界観 シンプル、スタイリッシュだけど独創的、エキゾチック。

Point① コンセプト・世界観を伝える。 「シンプル、スタイリッシュだけど独創的」を演出できるような書体・配色を選定。 メインカラー : テクスチャ : スタイリッシュな印象とエキ 背景に粒状テクスチャを使用し、 ゾチックな土臭さを感じられ 質感とカラーで土臭さを感じる独 る黄味がかった白色を選 特な印象を演出。 択。 フォント : 縄文文字のようになエキ ゾチックさが感じられ、可 読性もあるサンセリフ体。 中抜きや飾りとしても印象 的なフォントを選択。 フォントカラー : 黒に近い灰黒色の「墨色」を選択。 日本らしさを表現すると同時に、ス タイリッシュになりすぎないような 黒色で表現。

Point① コンセプト・世界観を伝える。 「WILD&SENSITIVITY」を演出できるような写真を選定。 ①MV ③ABOUT MVはワイルドさ（左）繊細さ コンセプト・世界観を統一す （右）の対照的な写真を選 るため、モノクロ写真で統一 択。ファーストビューでユー （一部を除く）。表情や動き ザーを惹きつけられるよう から変化が伝わるような写 演出。 真を大胆に使用することで、 写真だけでメッセージや心 情の変化を楽しんでいただ ②CONCEPT コンセプトを最低限の文章 で、表情の移り変わりが分 かる写真と文字で魅せるこ とを意識。 く。

Point② こだわりを伝える。 ブランドのこだわりを演出できるようなデザイン、写真を選定。 世界観の構築 : 手元の写真 : 写真やサイト全体から 商品のこだわりを伝えるセク 商品販売だけでなく、世 ションでは、手元の写真を選 界観の構築も重視して 択。 いることをアピール。 ユーザーに「手作り、職人」 などのイメージを持たせ、一 制作風景 : つひとつ丁寧に想いを込め 制作風景を順にスライ て制作しているのが伝わる ダーでまとめることで、 ように演出。 制作の様子を想像でき るように表現。また、こ だわりを持って制作して いることが伝わるよう意 識。

Point③ 商品購入までをスムーズにする。 購入までがスムーズになるような構成を意識。 ①興味： ユーザーを惹きつ けるファースビュー を意識。 ②共感： 写真を大胆に使用 することでユー ザーの興味を惹 き、コンセプトや Aboutujiの文章が 目に留まるように 表現。 ③強み・信頼： ④購入意識： ujiの強みをまとめ スクロールで右半 他のブランドとの差 分に商品着用写真 別化を図る。また、 と物撮りを表示さ ユーザーの信頼を せ、ユーザーの商 獲得するため、手 品着用イメージを掻 元の写真を使用し き立てた。 「丁寧さ・手作り感」 を提示。 ⑤購入： 展示会、オーダー 方法、購入ボタン で購入までの導線 を確保。

Point③ 商品購入までをスムーズにする。 購入までがスムーズになるような構成を意識。 STEP形式 : ホバーで写真変化 : 商品が気になる→着 用時の雰囲気を知り ホバー後 オーダー方法をSTEP形式 でまとめることで、ユー ザーの商品購入時の不安 たいという心理を意識 を減らし、購入の壁を低く し、商品写真をホバー 設定。特に質問が多い「ご すると、商品を着用し 注文」は赤文字で説明す ている写真に変化する ると共に、すぐにインスタ よう工夫。 グムに飛べるようリンクを コーディネート : 設置。 商品ページにはコー イラスト : ディネート写真を挿入 注文の流れを分かりやす し、組み合わせや着用 くするため、花が咲く過程 時の雰囲気が伝わる のイラストで表現。世界観 よう工夫。 を壊さないよう意識。

Point③ 商品購入までをスムーズにする。 購入までがスムーズになるようなデザイン、動きを意識。 ホバー後 スクロール : ボタンアニメーション : ホバーで変化 : 商品は物撮りに加えて商品着用写真も挿入 シンプルなデザインで世界観を統 PC版のボタンは、ホバーで背景色 することで、ユーザーが商品着用時をイメー 一。文字が垂直方向に動く演出で が変わる演出に。シンプルかつ分 ジできるように演出。右半分がスクロールで 目に留まるデザインに。 かりやすいデザインに。 動く演出で、コンパクトに表現。