【スクール課題】 LP制作_コワーキングスペース (ワイヤーフレーム・デザインカンプ)

OVERVIEW

架空クライアントよりPC版ワイヤーフレームを提示された状態から「PC版ワイヤーフレームの再考」「ムードボード・PC版デザインカンプ・SP版ワイヤーフレームの作成」を行いました。 使用ツール:photoshop  所要時間:40時間程度 製作期間:2週間

【目次】
①制作物
②課題要件
③情報設計
④デザインで工夫した点
⑤制作を通じて学んだこと 

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

①制作物

②課題要件

■架空クライアント

「Work ink.」様

家でもオフィスでもない、働く人のための新しい場所としてコアワーキングオフィス「WORK lounge AOYAMA」の運営をしている。キャリアアップのために日々仕事や勉強に励む意欲的な人々が集まるコミュニティとしても機能している。

■制作目的

新規会員獲得。 利用申し込みや見学予約などのアクションに繋げたい。

■ターゲット

都内で働くキャリア志向の強い人、自己成長・自己投資に積極的な人、

メイン層は30代前後

■ペルソナ(架空クライアントから提供されたもの)


③情報設計

④デザインで工夫した点

■デザインイメージ

#落ち着いた #上品な #快適な #心地よい

ペルソナが大切にしていることとして、「成長」「自由」「上質な空間」などが挙げられていたことから、上記なようなキーワードを設定しました。

このキーワードをもとに適切な配色やタイポグラフィ・余白を考えました。


■配色

上品で落ち着いた空間、木のぬくもりが感じられることを体現するため、メインカラーとして”ブラウン”を選択しました。

また、CTAボタンなど目立たせたい箇所については明るいかつ目立つ色である”オレンジ”を選択しました。

■タイポグラフィ

上品さや洗練さを表現するため、細めのゴシック体などのフォントを活用しました。

ゴシック体を用いることで可読性を重視しつつ、洗練されたビジネス感も意識しました。

■余白

セクションごとの余白を大きめに設定することで、ゆったりとしていて落ち着いた空間であることが伝わるようにしました。

⑤制作を通じて学んだこと

・今回は自分がユーザーだったらどう思うかというユーザー視点を第一にデザインを行いました。ユーザーにどのような行動を取ってほしいのかを考えたうえでカルーセルの設置やCTAボタンの設置を行うことが重要だということを学びました。

・あらかじめデザインの方向性やサイトのトンマナを決定しておくことで、デザインカンプの制作がスムーズにできることを学びました。

・コーディングがしやすいかどうかまで考慮したうえでデザインを行う必要があることを学びました。