Be419f4fa5e0cd81

架空LP制作(カフェ&コワーキングスペース) A案 2021.Oct

OVERVIEW

SHElikes MCC受講中に、"WORK lounge Aoyama"という会員制カフェ&コワーキングスペースの架空LPのデザインカンプを制作。既存のPC版ワイヤーフレームの修正、PC版・SP版のデザインカンプの制作を行いました。(使用ツール:Illustrator)

1.要件定義とペルソナ設定


2.ワイヤーフレーム


3.デザインカンプ


4.デザインコンセプト


5.スタイルガイド


6.情報設計


7.課題を通して学んだこと

情報設計に基づいた配置やヴィジュアルデザイン

ページの全体の流れや目的への誘導を考えながら要素を配置していくことでユーザーがよりスムーズにLPをみることができるので情報設計の大切さを実感した。また、競合他社のLPも見ることで第三者の目線に立ってみることができ、必要な要素や見せ方がわかるので大切だと思いました。

レスポンシブ対応を考慮した設計

PCのデザインカンプやワイヤーフレームの制作中にSPになるとどういう表示になるか、どういう表示にするのかを考えながら制作することで、PCの設計をよりスムーズにSPに移行できることがわかった。また、PCではスクロールとクリックだが、SPではスワイプとタップになるので、操作性の違いやどういう気持ちで見る(より詳しくみたい、軽い気持ちでみたいなど)のかということも考慮しながらデザインできるといいのかなと思いました。

様々なアプローチからのヴィジュアルデザイン

ヴィジュアルデザインの方向性を決める段階で、多くの関連するキーワードやイメージ画像をあげ多方向からアプローチすることで、少ない情報でもデザインの幅を広げられることがわかりました。さらにそのキーワードなどを合わせていくことによって、よりしっかりとした意図があるデザインができることがわかりました。


8.使用ツール

Illustrator


最後まで目を通していただき、ありがとうございます。