【課題】カフェ&コワーキングスペース LP (デザイン)

OVERVIEW

SHElikes PRO デザイナーの課題で、架空のビジネススクールからの要件書とPCのワイヤーフレームをもとに、要件定義を行なった上で、SPのワイヤーフレーム作成と、PCのワイヤーフレームのブラッシュアップとデザインカンプの作成に取り組んだ。

YEAR 2025

制作期間:2週間

使用ツール:Photoshop


要件


ワイヤーフレーム

PCのワイヤーフレームのレイアウトを見直しを行なった上で、SPのワイヤーフレームを作成した。


ムードボード

デザインイメージに沿った写真、イラスト、文字、チラシ、バナーなど素材を集めてコラージュしたムードボードを作成し、言葉の定義に対する曖昧な部分を明確にした。


LP (デザイン)


ビジュアルデザイン


工夫したポイント

  • 配色にこだわり、デザインの世界観を作り込むことに加えて、文字がしっかり読めるかどうか、ボタンが目立つかどうか、視認性を意識した
  • 本文、見出し、補足文章におけるWebサイトで使われる標準的なフォントサイズと適切な行間を把握した上で、フォントの種類、サイズ、行間、文字間、余白等に機能に応じた一貫性を持たせることによって、統一感があって読みやすいサイトとなるように配慮した
  • 基本原則の整列と近接を意識し、要素の頭が揃い、情報のグループの塊が適切に伝わるようにレイアウトした
  • ドリンクメニューの写真の表示を、サイトにアクセスした全員の目に止まりながらも、途中離脱を防ぐことと、他にどんなドリンクメニューがあるのか興味を持ってご覧いただけるよう、カルーセルに変更した
  • サイトを最後までご覧いただけるように、FAQの回答を隠れるように設計した

制作を通して学んだこと

  • クライアントへのヒアリング、SPのワイヤーフレーム、PCのデザインカンプの作成に至るまで、LP制作の手順を実践的に学び、体得することができた
  • ヒアリングの際に目的とターゲットとペルソナについて深堀りを行うことと、納品形式等を詳細に確認することによって、相互の認識を一致させた上で目的に沿ったデザイン制作ができることから、クライアントとの細やかなコミュニケーションの大切さも学んだ