【完全ガイド】ペット紹介ページ作成のポイント | Webサイトで魅せるコツと実例付き

2024年2月21日

この記事の結論

本記事は、Web制作学習者向けにペットの預かりサービスのランディングページを題材にした模写コーディング教材（第一弾）です。レスポンシブ非対応のPC表示のみが対象で、想定単価は1ページ3万円とされています。ボタンホバーの実装やフォーム配置など、実案件を想定した仕様で練習でき、デモサイトとソースコードで答え合わせができます。

WithCode生が受講内のカリキュラムで制作したものになります！

Web制作を勉強されている方の中で、基本的な文法事項やデザインツールの勉強方法を学んだが、実際にホームページやランディングページを作ったことがないという方は多いのではないでしょうか？

そのような方のために、Web制作会社が運営するプログラミングスクール「WithCode」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します！

今回は、模写サイトの「第一弾」になります！ペットのお預けサービスのページとなっており、ランディングページであることが今回の特徴です！

実際の案件だった場合の想定単価・納期・仕様も公開しますので、Web制作・Webデザインを学習中の方は、ぜひ積極的にご活用ください！

練習方法

模写コーディングの練習方法は2種類あります。ご自身のスキルレベルに応じて、選んでください。

模写コーディングが難しいという方は、ソースコードを丸写しする写経からお試しください！

模写コーディング
公開している「デモサイト」を見ながらソースコードを写していく方法です。実際のサイトの動きを見ながら作成します。
デザインカンプコーディング
次章以降に公開している想定仕様とデザインカンプを見ながら、実際のサイトを見ずにコーディングする方法です。こちらの方が難易度は高いと言えます。

事前確認事項

前提として、模写コーディングをするにあたり、可能な限りソースコードは見ないようにしましょう。また、細かいフォント等にもこだわらず、同じようなデザインを自分の技術力で再現できるか確認しましょう！

検証ツール等で確認しながら進めることは問題ありません！

まずは、デザインを確認して全体のレイアウト構成を考えてから、各パーツのレイアウト構成決めてコーディングを始めましょう。

デモサイトを見ながらコーディングする際は、フェードインやホバーアクションなどのアニメーションを確認するようにしましょう。

完成イメージ

PC表示

依頼内容

概要

ペットの預かりサービスのランディングページの制作。
レスポンシブの実装は不要なので、PC表示のみのコーディング。

想定単価

コーディングページ(1p)：3万円

素材

ダウンロード

デザインデータ

↓ Figma デザインカンプ

ダウンロード

ダウンロードファイルを開くには、ツールのアカウントまたはインストールが必要です。

コーディング仕様

コンテンツの幅
横幅が1500px、内部コンテンツが900pxです。
fv
背景画像の上に要素を配置します。
worry
3つのブロックを横並びに配置します。
service
同じレイアウトのブロックを3つ縦並びに配置します。
voice
4つのブロックを横並びに配置します。
fee
2つの白背景ブロックを横並びに配置します。
contact
form/label/input/buttonタグでフォームを配置します。
レスポンシブ対応
非対応。
必要な機能
ボタンホバー実装

確認作業

コーディングが完了したら、以下の「デモサイト」と「ソースコード」を参考に、レイアウトとコードをチェックしてみましょう！

デモサイト

デモサイトとコーディングしたサイトを比較して、デザインや動きなどを確認してみましょう。

デモサイトはこちら

ソースコード

コーディング例です。コーディングの方法に正解はないので、あくまでも参考としてご自身のコードと比較しながら確認してみましょう。

ソースコードはこちら

模写コーディングで力をつける進め方

模写は「見た目をそっくり作る」こと自体より、完成形を分解して考える練習に価値があります。次の手順で進めると、行き当たりばったりを防げて実力がつきやすくなります。

まず全体をブロックに分解する：ヘッダー・メインビジュアル・紹介セクション・フッターなど、大きな箱に区切ってから細部に入る
HTMLの構造を先に固める：見出し・段落・画像・リストなど、意味のあるタグで骨組みを作ってからCSSを当てる
共通パーツからCSSを書く：色・フォント・余白などサイト全体で使う値を最初に決めると、後半が一気に速くなる
レスポンシブは後回しにしない：PC完成後にまとめて対応すると崩れやすい。主要セクションごとにスマホ表示も確認する

つまずきやすいポイントと対処

横並びのレイアウトが崩れるときは、多くがFlexboxやGridの指定漏れです。まずは親要素にdisplay: flex;を付け、要素の間隔はgapで調整するとシンプルにまとまります。

/* 紹介カードを横並びにする基本形 */
.pet-cards {
  display: flex;
  flex-wrap: wrap;   /* 幅が足りなければ折り返す */
  gap: 24px;         /* カード同士の余白 */
}
.pet-cards .card {
  flex: 1 1 280px;   /* 最小280pxで自動的に伸縮 */
}

うまくいかないときは、ブラウザの検証ツール（右クリック →「検証」）で要素のサイズや余白を確認しましょう。どのCSSが効いているかが一目で分かり、原因の特定が速くなります。

参考リンク（公式・一次情報）

よくある質問（FAQ）

Q1. ペット紹介ページの模写はレスポンシブ対応が必要ですか？

A. レスポンシブの実装は不要で、PC表示のみのコーディングが対象です。必要な機能はボタンホバーの実装とされています。

Q2. このページのコンテンツ幅はどうなっていますか？

A. 横幅が1500px、内部コンテンツが900pxと指定されています。想定単価はコーディングページ1ページで3万円とされています。

Q3. 各セクションはどのようなレイアウトになっていますか？

A. fvは背景画像の上に要素を配置し、worryは3つのブロックを横並び、serviceは同じレイアウトのブロックを3つ縦並び、voiceは4つのブロックを横並び、feeは2つの白背景ブロックを横並びに配置します。contactはform・label・input・buttonタグでフォームを配置します。