LP・ホームページ制作サンプル集

デザイン支給を前提とした静的コーディング（HTML / CSS / JavaScript）の制作サンプルです。 レスポンシブ対応・アクセシビリティ・表示速度を重視し、外部ライブラリを使わずに実装しています。

制作サンプル

クリックすると実際のページが開きます。スマートフォンでもご確認いただけます。

CLINIC / LANDING PAGE

あおば歯科クリニック

歯科医院の集患用ランディングページ。ファーストビューから予約フォームまで 全11セクションを1ページで構成し、スマートフォンには追従CTAを設置しています。

  • 1カラムLP
  • 予約フォーム
  • アコーディオン
  • スライダー
  • 追従CTA
サンプルを見る

REAL ESTATE / LANDING PAGE

みなとリアルティ

不動産会社の集客用ランディングページ。物件を条件で絞り込める検索UIを中心に構成し、 明朝体・紺×ゴールドで落ち着いた印象にまとめています。

  • 物件絞り込み
  • タブ切替
  • モーダル
  • カウントアップ
  • 2段ヘッダー
サンプルを見る

WORDPRESS / CUSTOM THEME

歯科LPのWordPress化（自作テーマ）

上の歯科LPをWordPressの自作テーマに変換したものです。医院名・電話番号・キャッチコピー・ よくある質問を、コードを触らずに管理画面から更新できます。

  • 自作テーマ
  • カスタマイザー
  • カスタム投稿タイプ
  • PHP
  • Docker
コードと解説を見る

制作時に必ず行っていること

  • レスポンシブ対応：スマートフォン（375px）・タブレット（768px）・PC（1024px以上）の3段階で崩れがないことを確認します
  • 表示速度：jQuery等の外部ライブラリを読み込まず、画像もSVG・WebPを使って軽量に保ちます
  • フォームの入力支援：未入力・形式誤りをその場で表示し、離脱を防ぎます。スマホでは適切なキーボードが出るよう指定します
  • アクセシビリティ：キーボード操作、スクリーンリーダー向けの属性、「動きを減らす」設定への対応を行います
  • あとから編集できるコード：色や余白はCSS変数にまとめ、JavaScriptは機能ごとに関数を分けています