【実践課題】LP制作(PCデザイン・SPワイヤーフレーム)

OVERVIEW

SHElikes【MULTI CREATOR COURSE】の課題にて架空コワーキングスペースのLP制作に取組み要件書を元にワイヤーフレームの改善、PCのデザインカンプとSPのワイヤーフレームを制作しました【制作時間:10日(20時間) /使用ツール:Photoshop】

YEAR 2023

│制作したデザインカンプ・SPのワイヤーフレーム

【落ち着いた女性が集うカフェ&コワーキングスペース】

ペルソナから「ビジネスの少しカチッとした印象(ネイビー)と女性らしさの柔らかさ(ブラウン)を併せ持ったサイト」をテーマに制作しました。

│課題概要

架空のビジネススクール会員限定のカフェ&コワーキングスペースオープンに際したWebサイトの制作。

女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

●クライアント WORK ,inc.

●要件定義
ターゲット:WORKの会員、会員ではないがWORKが気になっている女性。
目的:WORK lounge Aoyamaについて知ってもらうこと



|ワイヤーフレームの提案・改善について


|スタイルガイド

│工夫した点・頑張った点

クライアントから提示のワイヤーフレームを優先順位やもっとこうであればユーザー視点でいいのではないかという部分をブラッシュアップし、デザイン提案までしっかり考えました。コンテンツ内容の追加提案や情報設計からの順番の変更を考え工夫しました。

一番しっかり作り込んだのはペルソナや要件書から事前にムードボートを作成し、しっかりとペルソナに刺さるトンマナ・フォントの選定に力を入れました。

|課題を通して学んだこと

ワイヤーフレームから修正するところでたくさんのコワーキングスペースのサイトを見て、必要な要素であったり自分が使うのだったらどうか?この情報があったほうが嬉しい、をしっかり考えながら自分なりにワイヤーフレームをブラッシュアップする力を身に付けられました。前回の課題(LPトレース)で余白感やフォントサイズなどを調べたことを活かしながら実際に制作していくことができました。SPの方も実際にいろいろなサイトをPCとSPと見比べながらワイヤーフレームを作成して改めて見せ方の違いなど学ぶことができました。