イメージヘッダー

manato_portfolio ( DESIGN )

arrow_left

I'sのweb

I'sの使用例

I'sの仕様書1

I'sの仕様書2

I'sの競合分析1

I'sの競合分析2

ヘッダーイメージ

『I's (Web)』

『I's (Web)』

このWebサイトは架空のものになります。
I'sという眼鏡メーカーから、Webの制作を依頼されたという設定で作りました。
制作するにあたり、参考となる競合他社を分析し、どのようにターゲットに対してアプローチするか方針を固め、Webサイトの制作をしました。

I'sのWebサイトはこちら

競合分析のPDFファイルはこちら

(1)コンセプト

" I ‘sの作る機能性の高いメガネを、10代,20代の若者に理解してもらえるWebサイト"

(2)クライアント情報

眼鏡・コンタクト業

ターゲット: 10代、20代でUV対策、ブルーライト対策の出来る、機能性の高いメガネが欲しい購買者。

使用対象: WEBサイト

使用目的: ブランドの認知、商品の認知

開始予定: 2020年 2月

(3)要望

商品の見せ方: メガネはジャンル毎に別々のページとして作って欲しい、出来れば紹介文を軽く添えてブランドっぽい感じも出して欲しい。

色: 色はTOPページはカラフルに、でもパステルチックな色で若者受けを狙いたい。

イメージ: 見せるところは元気良さそうに、読ませるところは簡潔にクールさがあって欲しい。

その他: こちら側で用意した着用モデルの写真を使用して欲しい。

(4)最終成果物

コンセプトである" I ‘sの作る機能性の高いメガネを、10代,20代の若者に理解してもらえるWebサイト"を、シンプルなグリッドデザインで演出しました。
背景色を真っ白にし、クライアントの要望通り見せるところは元気良さそうなパステル色で、読ませるところは色を極力抑え、余白を広く使用しました。
商品の見せ方も、UVメガネ,PCメガネ,サングラスとジャンルを別にして作成しました。
またクライアントの求める 紹介文を軽く添えてブランドっぽい感じも演出しました。
ターゲットが10代や20代と比較的若いため、堅苦しい印象は避けました。文字数も最低限に抑え、写真や説明もグリッドでまとめ、自然と読める導線にしました。
そして、TOPページのカルーセルにクライアントが用意した写真を使用しました。
以上で、要望を全て満たし、ターゲットを考慮したデザインに仕上げました。

(5)開発ツール

  • HTML
  • CSS
  • Illustrator
  • Photoshop
  • Dreamweaver
  • Bootstrap
  • Numbers
  • Adobe Color

PORTFOLIO ONLY 

arrow_left

arrow_right

arrow_right