【実践課題】LP制作 デザインカンプ
SHElikes MULTI CREATOR COURSE 4つ目の課題 LP制作です。 架空のコワーキングスペース&カフェのLP制作依頼です。PCデザインカンプとSPワイヤーフレームを作成しました。 [制作時間:40時間 / 制作期間:3週間/使用ツール:Photoshop]
●課題概要
架空のビジネススクール会員限定のカフェ&コワーキングスペースオープンに際した、利用方法やアクセス情報を載せたWebサイトの制作依頼。
<クライアント> WORK ,inc.
・女性向けのビジネススクールを展開。
・会員は20~30代の女性が多い。
・キャリアアップのためにビジネススキルを学べる。
・定期的にビジネスコンテストなどのイベントを開催。
<要件定義>
ターゲット:WORKの会員、会員ではないがWORKが気になっている女性。
目的:WORK lounge Aoyamaについて知ってもらうこと
<ペルソナ>
<要素>
・ロゴ(素材提供)
・ヘッダー
・ファーストビュー(メインビジュアル)
・コンセプト
・ドリンクメニュー
・システム(ご利用方法)・アプリダウンロード
・FAQ(よくある質問)
・アクセス
・フッター
●情報設計
要件定義をもとにユーザーストーリを考え、下記のように情報を整理。
・ファーストビュー・コンセプト
「WORK lounge AOYAMA」の立ち位置を印象づけ、ターゲットの興味を惹きつける。
・サービス
ユーザーに「WORK lounge AOYAMA」を選んでもらうための、アピールポイントとしてセクションに追加。サービス内容・設備を記載。目的にマッチしているかをユーザー側も確認できるセクション。
・システム(利用方法)
前2セクションでユーザーの利用欲が高まった直後に、実際のアクションにつなげるためのセクション。アプリダウンロードも同時に促し、すぐに予約できることをアピール。
・カフェメニュー
重要項目ではないと考え、プラスα要素としてコンパクトに。
・FAQ
ユーザーの疑問解消・お問い合わせができるセクション。
・アクセス
「WORK lounge AOYAMA」の基本情報掲載。
ファーストビュー〜利用方法:利用するアクションを起こしてもらうためのセクション
メニュー〜アクセス:利用を決めたユーザーにさらに情報提示するためのセクション
■デザインコンセプト
「WORK lounge AOYAMA」の提供するカフェ&コワーキングスペースとしての心地よさと、ターゲット女性の向上心やキャリアアップへの意欲を、サイトデザインで表現。
■配色
サイト全体は白とベージュの淡いラテカラーにし、気軽に使用できる居心地の良いカフェの印象に。アクセントカラーは明度を少し落とした赤を使用し、ペルソナの女性の洗練さや向上心を表現した。
■フォント
「WORK lounge AOYAMA」のロゴとマッチするように、ゴシック・サンセリフを使用。さらに、欧文フォントは、幾何学的な形のフォントを選択。
ゴシックだがPOPにならないように、文字間や行間を多めにとり、落ち着き、余裕のある印象に。
■モチーフ
●こだわったポイント
●今回の課題を通して学んだこと
デザインを始める前の段階で、クライアントの目的に対する理解を深めて、情報設計をしっかりと構築し、ワイヤーフレームの精度を上げ、完成をイメージすることが大切だと学びました。
情報設計とワイヤーフレームの段階で、セクションの順番や配色やフォントまでイメージできていたので、デザインカンプの大枠は迷わずに作成することができました。
●今回の課題の感想
クライアントの目的や、ペルソナを意識してデザインのコンセプトを考え、配色・余白・デザインにそれぞれ、しっかりと理由づけしながら制作するのはとてもわくわくしました。
最初にデザインコンセプトと情報設計を固め、サイト全体を通してブレないデザインにすることは重要だと学びました。
今回はデザインカンプまででしたが、実際の案件になると、実装しやすいデザインという点も意識しながら制作しなければならないなと感じました。