LP制作【架空案件/PCデザイン・SPワイヤーフレーム】

■クライアント情報

クライアント名：WORK ,inc.（架空の会社。ビジネススクールWORKを運営）

女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、されにそのアプトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

■要件

目的 ：WORK lounge Aoyama（会員様限定のカフェ＆コワーキングスペース）について知ってもらうこと。

ペルソナ ：30代女性、都内在住。仕事が好きでスキルアップに投資している。

ペルソナのニーズ：仕事の成果をもっと出したい。同じような目標を持った女性との人脈を作り、高めあいたい。

■制作したLP

＜MENU hover時＞

<TOPスライダー>

<TOP gallery>

<EVENTスライダー>

＜FAQアコーディオン＞

■ワイヤーフレーム

デザインカンプを制作する前に、ワイヤーフレームを作りました。今回はPCのデザインカンプのみの制作でしたが、SPを制作する際は下のワイヤーフレームを元に実装予定となります。

■デザインガイドライン

LP制作を行う際に、デザインガイドラインを作成しました。配色や文字、コンセプトの一覧表となります。

■余白

コーディングをする際の参考に余白も細かく設定しました。

■工夫した点

今回のサイトでは「キャリアアップへの強い思い」を感じたためこのコワーキングスペースに通うことでしっかりと自分のキャリアの糧になるということを示したいと思って制作しました。そのために、ある程度のブランドイメージが保てること女性の柔らかさを表現しつつもここでは本当に学びたい人が集う場所であるということを示しました。

女性性は色のベタ塗りをなるべく避けて細いストライプを背景に使ったり写真の選びたを気をつけたりという箇所で表現しました。また全体的に①色数を少なくする②誤魔化しが聞かないシンプルなサイト③本格的な学びや繋がりが想像できるサイトの3つをポイントに制作しました。

■今回の課題を通して学んだこと

Webサイト全てを作るということでWebデザインの基礎を学びました。PCに表示されるデザインの幅や適切な余白、文字サイズなどを学びました。またWebデザインならではの離脱をなるべくさせないデザインを学びました。

今回は企業からのペルソナ像の提示があったのでそれに沿ったデザインとは何かを追及しました。クライアントからの要望にデザインで答えるにはどうしたらいいのかということを学びました。デザイン性が高いだけではクライアントの要望にも答えられない、ユーザーにとってもわかりにくいサイトになると感じました。今後はこの学びを通してデザインを活かしつつも、クライアントユーザー双方が満足するサイトをデザインしていきたいと思います。

■向上したスキル

• LP制作における基本制作
• LP制作における情報設計