【練習】ランディングページ

■架空サイトのテーマ

【業種】

• 住宅・不動産

【目的】

• 新規住宅の認知をアップさせる
• 住宅の資料請求・見学・オンライン相談の集客を増やす

【ターゲット】

• 2人以上の夫婦やカップル、ファミリー層

【内容】

• FV、Concept、Point、Design、Location、Information

■情報

【ペルソナ】

• 3人のファミリー中間層（40代男女／小学生）でマンションの購入を検討している
• 住宅の立地、施設や環境の充実度を重視して探している
• ビジュアルデザイン

【コンセプト】

• 「安心感」「落ち着き・冷静さ」「少しの高級感」

【配色】

• ベースカラーはグレーを使い、落ち着きを与えた。アクセントカラーに濃い目のベージュを使用し、安らぎを与え安心感を出した。メインカラーにはホワイトを用いて純潔さを出し、"新築さ"を強調させた

【フォント】

• 可読性が高く、高級感を感じられる「Lora」を欧文フォントとして使用。日本語フォントも可読性が高めで高級感や真面目な雰囲気が伝わる「Noto Serif JP」を使用しました

■実装内容

【cssにて実装】

• ナビゲーションメニューを横スクロール対応で作成（SP）

【jQuery/JavaScript にて実装】

• ナビゲーションとPointのメニューをスムーススクロールに対応させました
• 専有部と共有部の写真をSwiperでスライダーの実装をしました
• 一定量のスクロールでページトップボタンの表示・非表示の設定をしました

■ポイント

【スムーススクロール】

• サイト内の移動距離を視覚的に体感できる（自分がいる位置を認識）

【スライダー】

• 写真紹介をスライダーで作成して全体的なスペースを省いた
• 左右に写真を表示させ、スライダー（2枚以上の写真）であることを強調

• ページネーションを作成してスライドの枚数と現在地を認識させる

【余白】

• ファーストビューなどボリュームが大きくなりがちな部分にも「隙間」を生み出し、全体的に余白を広く取り、ゆったりとした落ち着きを与え、高級感を出した