概要
架空のハウスメーカー「間 -MA-」を想定し、Web制作のコンペ作品として制作したコンセプト LP のサンプルサイトです（仮想案件）。要件定義・ワイヤーフレームからデザイン・実装まで一貫して担当し、デザインの立ち上げには生成 AI を活用しました。「余白を設計する。」という引き算のコンセプトを軸に、写真を多く使った 1 ページ構成としています。制作会社さまの視点では、企画から実装までを一人に任せたときの仕上がりと、動きの質にこだわった LP の実装力を確認いただける一例です。
課題
注文住宅ブランドのサイトには、暮らしの世界観を伝える情緒的な訴求力が求められます。同時に「余白」という引き算のコンセプトを、言葉だけでなく体験そのものとして感じてもらう表現が欠かせません。写真を多用したリッチな見せ方でありながら、動きが軽々しく見えないこと。そしてスマートフォンでも快適に閲覧できること。この両立を想定した課題としました。
解決アプローチ
コンセプトを動きで表現： 「余白を設計する。」という思想を、スクロールの間合いと見せ場のアニメーションで表現しました。スムーススクロールで全体の速度に一貫した心地よさを持たせ、見せ場では要素の現れ方を主役に絞って設計しています。ease-out 系を基調に、動かすのは transform と opacity のみとし、落ち着いた品位のある動きを目指しました。生成 AI で立ち上げたデザインが「ポンと出したもの」に見えないよう、動きの質を作り込んだ点が中心です。
操作性への配慮： 邸宅の写真を並べるギャラリーは、ネイティブの横スクロールで実装しました。専用スライダーに頼らず標準の挙動を生かすことで軽さを保ちつつ、スクロールで続きがあると気づけるヒント表示を添えています。詳細はライトボックス形式のモーダルで拡大でき、スマートフォンでの操作にも配慮した導線としました。
表示パフォーマンスへの配慮： 写真を多く使うリッチな LP でありながら、軽快に表示できることを重視しました。画像は次世代フォーマットを含む複数形式を用意し、閲覧環境に応じて最適なものが読み込まれるようにしています。動きのアニメーションを控えたい方への配慮として、その設定を有効にした環境では過度な動きを抑える対応も入れています。
工夫したポイント / 想定効果
最大の工夫は、架空のハウスメーカーを題材に、要件定義からデザイン・実装までを一貫して短期間（3 日間）で成立させた点です。デザインの立ち上げに生成 AI を活用することで、企画から公開できる形までを一人で通しました。デザインを外部に発注せず AI 活用で立ち上げ、そのまま実装まで任せられる。その進め方の実物サンプルとして制作しています。
動きの面では、スムーススクロールと見せ場のアニメーションを主役に絞って作り込むことで、写真主体のページに落ち着いた品位を持たせることを狙いました。派手さで押すのではなく、余白と間合いでコンセプトを伝える表現が、ブランドの世界観への共感につながることを期待しています。制作会社さまにとっては、デザインの立ち上げから実装までをまとめて任せたいときの選択肢として、参考にしていただける一例です。