見出し画像

[あべちゃん #03] Webサイト作成〜構成編〜

ワイヤーフレーム を作ってみました。
KNAPデザイナーのあべです(@abe44355904)

画像1

前の記事はこちらです!(今回の記事だけ読んでも大丈夫です)

----------------------------------------------------------------

紅茶の商品のブランドサイトを作っていこうということで、
ワイヤーフレームを作成しました。意図して作った点などを記録しておきます!(今回はトップページのみの作成になります)

■作成ツール:Adobe XD

画像2

01. メインビジュアル 

画像3

・ロゴとキャッチコピーを置いています。ロゴは一部商品名ともなるので大きく打ち出します。
・右上のボタンはオンラインショップに飛べるものになります。スクロールしても追従させることで、興味を持った時点ですぐ購入できるようにします。
・メイン画像は、実際 自分の部屋にIROCHAがあるような、"空間"が伝わるものにする予定です!

momo のコピー


02.コンセプト

画像4

このブランドの一番の目的は、
商品を通して、素敵な空間を作り、自分だけの特別な時間を過ごしてもらう。」というものになります。
購入者にこうなって欲しい、そうするために自分たちがいる。というメッセージ性のあるブランドなので、コンセプトを一番に持ってきました。

abe のコピー 4


03.<紅茶1>定番商品

画像5

定番商品を大きく載せて、下で他の商品を見せていきます。
(クリックで商品詳細ページへ飛びます)


04.<紅茶2>はじめてセット

画像6

普段紅茶を家で淹れたりしない方がターゲットにいるので、基本のセットを次に大きく載せます。「自分でも始められそう!」と思わせられる工夫をしようと思います。

abe のコピー


05:<空間>グッズ商品等 

画像7

テーブル周りのグッズで空間づくりの商品を載せます。
また、その下では紅茶時間を楽しくする音楽やお話のコンテンツに飛べるバナーを置きます。

abe のコピー 6


06:ニュース/フッター

画像8

あとはニュースなど入れる予定ですが、
もっと分かりやすくするためにコンテンツ増やすかもです。


IROCHAは商品で日常を彩る役割を担っているので、背景は白系にしようと思ってるのですが、シンプルになりすぎないように色々デザインで考えなきゃと思っています・・・!

画像10

次回予告
次回は、、ロゴが、、できてると、いいよね、、
こうご期待!

画像11

この記事を書いているメンバーが働いている会社
よかったら見に来てください!

画像12

この記事が気に入ったらサポートをしてみませんか?