ひだまりカフェ LP制作実績 | WORKS

1. プロジェクト概要

コーヒー豆の定期便販売を目的とした、iPhone（375px）特化型のランディングページ。「ラグジュアリー＝心理的な価値」と定義し、時間に追われない「朝のゆとり」を提案。HTML5/CSS3のみによる軽量化と、心理学に基づいた導線設計を両立させました。

店舗向けLP制作の実務を想定し、短期間で構成設計からデザイン・実装までを一貫して行うスキル強化を目的として制作しました。
今回はレスポンシブのみで構築し、軽量で読み込みの早いLPを短時間で仕上げることをテーマとしました。
また、「強→静→美→余韻→行動」のUXストーリーを1ページ内で再現し、ユーザーの感情変化に沿った導線設計を実務レベルで検証することを目標としました。

ページ全体を軽量化するため、画像点数や装飾を最小限に抑えつつ、必要な情報が直感的に理解できる構成を設計しました。
UXストーリーに沿って、FVでは光と湯気のビジュアルで「強（インパクト）」を演出し、続くセクションではベージュ背景で「静（共感）」を作り、ユーザーの心理的負荷を軽減しています。
「美（解決）」では写真で質感を伝え、375pxの縦長画面を活かして「Before→After」を縦並びにし、「余韻（変化）」を視覚化。
最後は親指の可動域を意識したCTA配置で「行動」へ自然に誘導しました。
レスポンシブのみで構築することで、スマートフォン閲覧時の操作性を最優先に最適化しています。

短期間でLPを制作する際の情報整理や、軽量化を意識したデザイン・実装の重要性を実践的に学ぶことができました。
特に、UXストーリーを1ページ内で再現することで、ユーザーの感情変化に合わせた導線設計の理解が深まりました。
レスポンシブのみで構築したことで、スマホユーザー向けの表示速度・操作性・CTA配置の最適化など、実務で求められる改善ポイントを体系的にまとめられたことが成果です。

短工期ながら、インフラエンジニアの視点で「表示速度」と「安定性」を最優先に管理。

※「HTML/CSSのみ」という制約をあえて課すことで、圧倒的な表示速度と、3日間という短期間での確実なデリバリーを実現しました。

サンドベージュ / Base (#FAF3E0): 陶器のような質感で空間の広がりを支え、安心感を醸成する「基調色」。
コーヒーブラウン / Main (#6F4E37): 黒を避けることで威圧感を排除し、深い品質と「格」を表現する「主役色」。
ソフトオレンジ / Accent (#F27A2C): 太陽の光や明日への活力を付加し、視線を自然に導く「強調色」。朝日や活力を連想させ、視線を自然にCTA（行動）へと導く強調色。

「強（インパクト）→ 静（共感）→ 美（解決） → 余韻（行動）」のフローを実装。

本サイトは、ユーザーがスムーズに情報を理解し、行動につながるよう構成を意識したランディングページとして制作しました。

コーディングでは、セクションごとの役割を明確にし、情報の流れが途切れないよう構造設計を行っています。

また、再利用性と保守性を考慮したクラス設計により、今後の改修にも対応しやすい実装としています。

レスポンシブ対応では、375pxを基準としたスマートフォンファースト設計を採用し、ユーザーがストレスなく操作できるようレイアウトや導線を調整しています。

デザインカンプをもとに、再現性と実用性を両立したコーディングを意識しています。