【課題】ランディングページ

■課題内容

【テーマ】

［サイトの概要］

• レンタルスペースの賃貸・運営を行っている会社Calm Spaceの、レンタルスペース紹介のLP（架空サイト）

［ターゲット層］

• 仕事やリモート等で利用できる個室スペース、勉強等で集中できる自習室、数人程度で利用できる会議室を探している方

［目的・ゴール］

• レンタルスペースの宣伝と体験利用の募集、プランの予約を増やす

■情報設計

【ペルソナ】

• 性別：男性
• 年齢：34歳
• 職業：フリーランス
• 近況：固定された職場がないので自由に活動できるワーキングスペースを探している。ビデオ通話など周りを気にせず喋れる個室があれば嬉しい

■ビジュアルデザイン

【コンセプト】

落ち着き、静寂さを出し、派手さがないナチュラルな空気

チープさを出さない雅やかさと少しのエネルギッシュさ

【配色】

• 類似したトーンで安定感を生み、トーンを少し変更することで動きを感じる配色に。アクセントは明度で差を出し、補色を参照しコンセプトから逸脱しない範疇で色を決定

落ち着いた雰囲気で主張が弱いグレー、清潔感が出る白

静けさの中に弱めの崩しとして小さな活発性を感じる淡めの橙

重厚感があり閑静さがイメージされる青紫

【フォント】

［本文／見出し］

• 全体的に細めのウェイトで高潔さを出し、丸みがあって強調さを弱めたフォントの使用

Urbanist／游ゴシック

■実装内容

■デザインのポイント

【ファーストビュー】

【レンタルスペースの種類／見出し】

【よくある質問】

【CTA】

■制作のポイント／学んだ点

【制作のポイント】

限定されたスペースに多くの写真を使いたかったので、スライダーを実装することで省スペース化を目指しました。セクション毎に背景色を変更させることで境界線を明確にしました。CTAボタンは一番目立たせたい要素だったので、際立つ配色を考えました。

【学んだ点】

矢印の記号、ドロップシャドウでクリックできる部分なのか、開閉できる要素なのかを明確にするなど、ユーザーの立場に立って使いやすさを考えること。全体的に統一された落ち着きや、ナチュラル感を作る配色やフォントを決めること。