イメージヘッダー

manato_portfolio ( DESIGN )

KOKIのweb

KOKIの使用例

KOKIの仕様書1

KOKIの仕様書2

KOKIの競合分析1

KOKIの競合分析2

KOKIの競合分析3

KOKIの競合分析4

ヘッダーイメージ

『KOKI (Web)』

『KOKI (Web)』

知り合いのプロダクトデザイナーからWebサイトの制作依頼があり、作成させて頂きました。
クライアントと密に話し合いをし、情報の整理を最初にしました。
まずドキュメントを作成し、掲載するテキストを確認し、使用する画像と映像を決定しました。
そこからAdobe Colorを使用してテキストに使用する色等を決め、余白と導線の作り方を決めた後にコーディングをしました。
この段階で、すでにクライアントと細かく打ち合わせが出来ていたため、スムーズに段階を踏めました。
このクライアントには、以前ロゴとモーショングラフィックスの制作依頼をして頂いただいたので、デザインするにあたり重要視しているポイントをある程度把握しながら進める事が出来ました。

KOKIのWebサイトはこちら

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

(1)コンセプト

"stand out , fit in"

(2)クライアント情報

業種: デザイン業(プロダクト、インテリア、空間)

ターゲット: 20~30代で家具やプロダクト商品に少し多めに投資できる購買者。

使用対象: WEBサイト

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

開始予定: 2019年 12月

(3)要望

製品の見せ方: クリックした時にTakramのような製品の詳細提示をしたい。

色: 色が多く、騒がしいのは避けたい。なるべくシンプルにしたい。

イメージ: サイトのぼんやりとしたイメージは「無印良品」のようなシンプルさ。

こだわり: クライアントもデザイナーで、余白や導線の作り方にこだわりがある。

その他: サイトに自身のロゴを利用してファビコンを作って欲しい。 またまだ明確に決まっていないこともありブランディングからの協力も求めたい。

(4)最終成果物

コンセプトの"stand out , fit in"は、目立つがしっかりはまるというものです。
そのためメリハリを持たせ、しかし違和感のある目立ち方はさせない事を念頭に置きながらデザインしました。
メリハリと、情報の見やすさは余白を大きく使用する事で表現しました。
色はロゴに使用した2色と、薄い黒のみを使用しシンプルにしました。
また製品の詳細ページではカテゴリーと、サブカテゴリーで色を分ける事で、混乱せずに情報を読める色彩計画をしました。
導線作りでは、トップページのモーショングラフィックスで製品の紹介をし、その映像をクリックして頂いてもその詳細ページに飛べるようにしました。
それによりナビゲーションのみではなく、映像からも製品に辿り着く導線としてまとめました。
そしてクライアントのデザインコンセプトの言語化もさせて頂きました。
以上で、クライアントが望むコンセプト、要望を満たし、満足していただけるWebサイトとして完成させて頂きました。

(5)開発ツール

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

PORTFOLIO ONLY 

arrow_right

arrow_right