LP制作（PCデザイン・SPワイヤーフレーム）

制作時間：ワイヤーフレーム検討　5時間

　　　　　デザインカンプ　10時間

制作期間：2週間

制作範囲：提供されたPC版ワイヤーフレームの再検討、SP版ワイヤーフレーム、ムードボード、PCデザインカンプ

使用ツール：Photoshop

成果物

SP版ワイヤーフレーム

ムードボード

PCデザインカンプ

課題内容

架空クライアントからの依頼内容

クライアント情報

クライアント名：Work inc.

働く人々に新しい可能性を提供する事業を複数展開。事業のひとつに都内で働くビジネスパーソン向けのコワーキングオフィスを運営。会員は30代の女性が多く、キャリアアップのために日々仕事や勉強に励む意欲的な人々が集まるコミュニティとしても機能している。

要件定義

情報設計

提供されたワイヤーフレームの再検討

デザインの工夫

＊配色

・ターゲットが男女問わずであったため、ベースカラーやメインカラーはニュートラルな配色にしました。

・堅苦しくない、あたたかみのある場所を表現するため、茶色系の色味にし、柔らかさと親しみやすさを表現しました。

・同時にビジネス感も表現するため、アクセントカラーに青を使用しました。

・「ご利用プラン」の表の一部にグレースケールを使用することで、情報の優先度を表現しました。

＊フォント

・全体的に他のコワーキングスペースとは差別化できるよう、綺麗めでシンプルなデザインに仕上げたかったため、タイトルは游明朝（日文）とPT Serif（英文）、本文は読みやすいように游ゴシックとしました。

＊ビジュアルデザイン

全体

・ただのコワーキングスペースではなく、「頑張る人を後押しする特別な場所、つながりが生まれる場所」というコンセプトで制作しました。

・「綺麗め」を表現するため、文字間や全体的に余白を多く取りました。

ファーストビュー

・一目でコワーキングスペースとわかるように、メインビジュアルはワーキングスペース内装の写真とし、「作業できる空間」を表現するため、机のコンセントが見えるように真ん中のロゴの配置と大きさを工夫しました。

・抜け感を出すため、メニューバーを半透明にしました。

・メニューバーは日本語と英語を併記することで、初めて見た人がわかりやすいように配慮しました。

・メニューバーは、ユーザーが各項目にすぐにアクセスしやすいよう、追従仕様にしています。

施設・設備

・利用できる設備(Wi-Fi、電源など)をアイコンで表示し、フリースペースや会議室以外にどんな設備が使用できるか分かりやすくしました。

・写真はクライアントから支給を想定していますが、写真を準備してもらう際に「こんなイメージの写真はありますか？」と提案できるよう、イメージに近い写真を選定しました。

・多くのコワーキングスペースのサイトではフロアマップがあり、どこにどんな設備があり、どのくらいの広さなのか等が分かりやすかったので、フロアマップのページへの遷移ボタンを作りました。

イベント

・「つながりが生まれる場所」がこのコワーキングスペースが提供する重要な価値であり、それをLPで伝えることで、他のコワーキングスペースとは差別化できると考え、この項目を設けました。

・そのようなニーズを持ったユーザの興味を引くことができ、ページの途中離脱を低減できると考えました。

ご利用プラン

・ご利用プランを表にすることで、ユーザーが知りたい情報をすぐに理解できると考えました。

・表の中に、申し込みボタンを配置し、ユーザーが気になったらすぐにアクションに移せるようにしました。

利用申し込み・見学予約

・コンセプトを改めて伝えることで、最後の一押しとするためにメッセージを追加しました。

アクセス・地図のデフォルトの表示を、駅を含めた表示にすることで駅からの距離感がわかりやすいようにしました。

頑張ったポイント

ペルソナ像をもとにしたユーザーストーリーとUIを考慮した設計とすることを意識しました。
このコワーキングスペースの特徴を表現するためには、どのような要素が必要で、どんなデザインとするか、という点を意識しながら作成しました。

学んだこと

当初MS明朝を使用していたのですが、講師の方にFBいただいた際に「よくあるフォント」を使うとデザイン性があまり感じられなくなってしまうとアドバイスをいただきました。フォント一つでも、そのような考えをもって選ぶことが大切だと感じました。
説明文は左揃えにすることで、コーディングをしたときに不自然に文字が配置されてしまうことを防ぐということを学びました。
ムードボードを制作することで、クライアントとの意識のズレを無くすこともでき、さらにデザインを制作している中で、方向性に迷うことも少なくなると感じました。