【課題】コワーキングスペースのLPデザイン
SHElikes MULTI CREATOR COURSEの課題。架空クライアントからの要件書とワイヤーフレームをもとに改めて情報設計し、PC/SPのワイヤーフレームとデザインカンプを制作しました。
|制作概要|
制 作 期 間 ◆ ワイヤーフレーム作成: 1 週間、デザインカンプ作成:1 週間
制 作 範 囲 ◆ 情報設計・ワイヤーフレーム・デザイン
使用ツール ◆ Photoshop
目次
1. 制作物
2. 制作要件
3. 情報設計(ワイヤーフレーム)
4. デザインで工夫した点
5. 課題を通して学んだこと
1.制作物

2.制作要件

3. 情報設計(ワイヤーフレーム)
情報設計にあたり提供されたペルソナを深掘りし、ペルソナがWORK lounge AOYAMAに求めることを考えました。その上で、クライアントから提供されたPC版ワイヤーフレームにおける過不足箇所を洗い出しブラッシュアップしました。


4.デザインで工夫したこと
デザインの方向性=「洗練された」「落ち着いた」「高級感」が感じられるデザイン
◾️ 配色
「落ち着いた大人の女性」をイメージし、ベースカラーに「ベージュ」と「白」を使用。「ベージュ」は、ヘッダーとフッターに使用している「濃いベージュ」の不透明度30%を使用することで全体に統一感を出しました。また、ペルソナから「キャリアアップに積極的で行動力のある女性」をイメージし、アクセントカラーに「落ち着いた赤」を使用しました。

◾️ フォント
可読性を考慮し、和文に游ゴシック体、欧文にFutura PTを選択しました。また、明朝体でセクション名をあしらいとして使用することで「高級感」「洗練された」印象を演出しました。

◾️ 余白
コンテンツ最大幅を960px、見出しの前後に120pxの余白を取ることで、「落ち着いた」「高級感」を演出を演出しました
◾️PHOTO
「利用してみたい!」「行ってみたい!」という気持ちを後押しする効果を狙い、WORKloungeAOYAMAの魅力を最大限に引き出す写真を選択しました。

5.制作を通して学んだこと
・提供されたワイヤーフレームをそのまま使用するのではなく、ペルソナが求めていることを深掘りし、情報設計やデザインの方向性を決めていくことが重要だとを学びました。
・デザインカンプを作成する際はムードボードを作ることで、写真や配色、デザインのイメージが事前に沸き、ブレずに作業を進められることが分かりました。