【課題】ワイヤーフレーム修正・デザインカンプ制作

本ページの構成

• 課題の概要
• 作成したデザインカンプ
• 課題の取り組み
• ワイヤーフレームの修正点とその理由
• 制作時にこだわった点
• 学んだこと

課題の概要

下記がLP制作時に与えられた課題の要件です。

●背景：架空のクライアントWORK ,inc にて会員様限定のカフェ&コワーキングスペースであるWork lounge をオープンすることになった。

●目的：WORK lounge Aoyamaについて知ってもらうこと 

●ターゲット：ビジネススクールWORKの会員様 、ビジネススクールWORKの会員ではないがWORKが気になっている方

●ペルソナ

顔と名前コピー：川上希美（32）　仕事で成果を出したい

属性；東京在住、某メガベンチャーゲーム事業部部長（8年目）

背景や行動；仕事が大好きで今までスキルアップには多くの投資をしてきた

同じような目標を持った仲間と切磋琢磨し合いたい、会社外での人脈を作りたい

ニーズやゴール；仕事での成果をもっと出していきたい、経営への理解も役員になりたいが、起業も考えている

強いチームを作るためマネジメントやコーチングのスキルも学びたい

作成したデザインカンプ

実際に作成したデザインカンプは下記です。

課題への取り組み

上記の課題を進めるにあたりターゲット・目的についての理解を深めることに重点を置きました。架空の案件であるため、想定できるところと想定できないところをメモとして記載し、連想されるキーワードを出すことでペルソナに対する理解を深めるように努めました。上記のアウトプットとワイヤーフレーム毎の改善点を洗い出し、実際にワイヤーフレームの修正とデザインカンプの作成を行いました。

ワイヤーフレームの修正点とその理由

ワイヤーフレームの修正点とその理由は下記の通りです。

制作時に特にこだわった点

1. ワイヤーフレーム修正（コンテンツの追加）

ターゲットは自分と興味関心を持った仲間とつながりたいというニーズを持っているため、実際に顔写真のある利用者の声を出すことでより施設の利用イメージが想定できるよう、またターゲットのニーズにこたえるような声を配置しました。またコンテンツの順番を変更することでドリンクメニューの優先度は下げました。

2. デザインカンプ（トンマナの統一感）

トンマナの統一感を持たせるために配色、フォント、余白を選択しました。一番押してほしいボタンにはアクセントカラーを設定し、その他のボタンとの差別化を図ることでターゲットに自然と押してもらいやすようにデザインしました。

【配色】

女性ということでアクセントカラーをピンクに、ただし大人女性ということで落ち着いたピンクに設定しました。メインとベースカラーには大人で落ち着いた印象を出すために茶色を選択した。

【フォント】

上品で落ち着いた印象になる明朝体と手書きの筆記体を選択しました。

【余白】

Conceptでは世界観を伝えるために余白を大きく取るようにしました。

学んだこと

• ワイヤーフレーム時点で気にならなかった点がデザインカンプを作成する際に気になる事があり、ワイヤーフレーム作成時点で、ある程度デザインも意識する必要があるとわかりました。
• FB会で指摘いただいた余白に関する違和感(コンテンツ毎の間隔を気持ち広めにとる)については、まだ感覚が分からないため、できるだけ多くのWebデザインを見てトレースする事で感覚をつかめるのだということが分かりました
• 文字量が多い時はアイコンやイラストなどで内容をまとめると視覚的に視聴者に伝える事ができることが分かりました。