【制作課題】LP制作（コワーキングスペース＆カフェ）
コワーキングスペース＆カフェのLP制作課題に取り組みました。PC版・SP版ワイヤーフレームの修正と、PC版デザインカンプを制作しました。
-制作時間：48時間（ワイヤーフレームの修正：10時間、デザインカンプ作成：38時間）
-制作期間：2週間
-使用ツール：Illustrator/Photoshop/Lightroom
目次
・制作したLP
・課題要件
・スタイルガイド
・制作のポイント
・課題を通じて学んだこと
制作したLP
課題要件
・クライアント情報：
＜クライアント名：WORK ,inc.＞
女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。
・サイト制作の目的：
会員様限定のカフェ&コワーキングスペース「WORK lounge Aoyama」をオープンするにあたり、会員様・非会員様に「WORK lounge Aoyama」を広く認知してもらうため。
・ペルソナ：
制作のポイント
・ユーザーストーリーの設定：
イベントの開催情報を追加し、やンセプトを上部に配置することで、ペルソナのニーズである「つながりがほしい」や「スキルアップをしていきたい」というニーズを満たすことができるようにしました。
・ワイヤーフレームの修正：
・デザインコンセプト：
①サイトを見た時に「このコワーキングスペースおしゃれ！仲間もできそう！」と思ってもらう
②スッキリとしたクリアな環境で仕事ができるような印象をもってもらう
-コンセプトの理由-
①：ペルソナは、バリバリ働き部長クラスの女性ということで、収入もあり自己研鑽にも惜しみないと想定しました。そのため、おしゃれな雰囲気や落ち着いた雰囲気を好むのではないかと推測しコンセプトに設定しました。
②：ゲーム事業部のベンチャー企業に勤めているため、企画に携わる仕事も多いと考え、ペルソナが綺麗で落ち着いた空間の中で仕事ができるような雰囲気を感じ取ってくるようにサイトのコンセプトを設定しました。
・キーワード：
都会的、誠実、落ち着いた、おしゃれ、かっこいい、バリキャリ、少し女性らしい、スッキリ
・スタイルガイド：
・配色の理由：
今回のペルソナから、「バリキャリではあるものの泥臭さを感じない、クレバーでどこか可愛らしさを持ち合わせた女性」をイメージしました。
-ブルーを選択した理由
クレバーで落ち着いた大人の女性、誠実、スッキリとしたイメージを表現したかったため選択しました。
-オレンジを選択した理由
①今回のコワーキングスペースのコンセプトが繋がりをテーマにしていたからです。オレンジ色はコミュニケーションを活性化させる意味をもつ色のため、今回のコワーキングスペースのコンセプトにマッチしていると思い選択しました。
②女性らしさを表現する際に、今回イメージした女性は、ピンクではかわいらし過ぎてしまい、赤だと印象が強すぎると感じたため、オレンジを選択しました。
・フォント選択の理由：
-游ゴシック体
視認性が高く、読みやすい書体のため、コンセプトなどの長文の箇所もストレスなくみてもらえると考えました。また、デバイスの汎用性が高い点も含めて選択しました。
-游明朝体
【理想の姿に向かって頑張るあなたへ】は、ペルソナの目にしっかりととまってほしい部分のため、見やすくインパクトがある游明朝体を選択しました。また、都会的で落ち着いたおしゃれな雰囲気を演出するには、ゴシック体ではなく明朝体の方がマッチすると考えたため、選択しました。
-Montserrat
少し横幅が広めの書体で丸みがありつつも視認性も高い書体です。今回のデザインはクールやシンプル、スッキリなどがテーマになっていますが、どこか可愛らしさもあるデザインにしたいと思い、Montserratを選択しました。
-Adobe Calron pro
視認性があり、おしゃれな雰囲気とクールな印象を与えてくれると感じ選択しました。
・工夫したポイント：
①ヘッダーにマイページボタンとビジネススクールworkの外部リンクを設置
今回、ターゲットがworkの会員とworkが気になっている非会員だったので、ページのヘッダー部分に、マイページへのログインボタンと非会員向けにビジネススクールworkへの外部リンクボタンを設置しました。実装した時に、この部分を固定し、コワーキングスペースが気になった会員はいつでもマイページにログインすることができ、非会員はworkの外部ページにアクセスできるように工夫しました。
②写真に柔らかい光を入れ、統一した世界観を表現
写真と配色のトーンを揃え、世界観を表現できるようにしました。写真はトーンカーブだけではなく、上にライトリークを重ねてデザインイメージに近い写真にしています。特にコンセプトの箇所は、見た瞬間に「私のことだ」と思ってもらえるように写真選びと加工、文章の余白感にこだわりました。
課題を通じて学んだこと
・ワイヤーフレームの作成：
ペルソナとLPの目的を理解した上で、必要な情報を見やすく配置することが重要だと学びました。情報はあればある程言い訳ではなく、必要な人に必要な情報が届くサイトになっていることが大切だと実感しました。
・デザインカンプ ：
整列や統一はデザインの基本原則ですが、全体のバランスを見て配置を変えることでメリハリが出て、より魅力的なデザインになると学びました。ただ揃えるだけではなく、動きやメリハリなども意識して構成していきたいと思います。
・シンプルなデザイン：
シンプルなデザインにすると余計な色や文を削ぎ落とすことになるので、丁寧なデザイン（文章や写真などを使用した丁寧な説明など）と両立が難しいと分かりました。ペルソナはどんな人なのかを理解した上で、シンプルなデザインをとるのか親切なデザインにするのかを考えていきたいと思います。