インテリアスタイルを伝えるランディングページ制作

プロジェクトの背景

このプロジェクトは、インテリアスタイルを専門とする架空のショールームのランディングページを制作するという課題から始まりました。ターゲットは30代〜40代の住宅購入層で、信頼感と洗練された印象を同時に伝えるデザインが求められました。

デザイン上の判断

カラーパレットはウォームグレーとテラコッタをベースに選定しました。フォントはNoto Serif JPを見出しに、本文にはInter系の和文フォントを組み合わせ、読みやすさを優先しています。余白の取り方は特に意識した部分で、コンテンツ密度を下げることで高級感を演出しました。

レイアウト構成の工夫

ファーストビューにはフルスクリーンの画像を配置し、スクロールと同時にテキストがフェードインする動きをCSSアニメーションで実装しました。モバイル表示でのフォントサイズ調整にはclamp()関数を活用し、breakpointごとの微調整を最小限に抑えています。

実装にはHTML・CSS・Vanilla JSのみを使用し、フレームワーク非依存の構成にしました。ページ全体の読み込み速度をLighthouseで計測したところ、パフォーマンスのスコアは94を記録しました。

指導担当・篠原奈緒子より：余白の使い方とカラーの一貫性が高く評価されました。