【HTML/CSS/JS コーディング練習】中級編：クリニックサイトで学ぶ模写コーディング

2024年2月25日

この記事の結論

本記事は、Web制作学習者向けにクリニックサイトを題材にした中級編の模写コーディング教材を公開したものです。複数ページ構成、Googleマップの埋め込み、ホバー時のポップアップ表示が特徴で、レスポンシブは非対応のPC表示のみが対象です。デモサイトとソースコードで答え合わせしながら、実案件を想定した仕様・単価で練習できます。

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

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

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

今回は、模写サイトの「第三弾」になります！クリニックのサイトとなっており、複数ページがある点、グーグルマップが埋め込まれている点、ホバー時のポップアップが実装されている点が今回の特徴です！

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

練習方法

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

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

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

事前確認事項

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

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

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

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

完成イメージ

今回はレスポンシブ実装は不要です。

複数ページのサイトとなるのでトップページのみ添付します。

PC表示

PC表示

↓ その他デザインカンプ(.png)

ダウンロード

依頼内容

概要

都内の某眼科クリニックのランディングページ制作。
今回は、ページ数や機能が多いため、レスポンシブの実装は不要です！PC表示のみ作成してください。

想定単価

コーディングページ(8p)：10万円

素材

ダウンロード

デザインデータ

↓ Figma デザインカンプ(.fig)

ダウンロード

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

コーディング仕様

コンテンツの幅
横幅が1500px、内部コンテンツが1200pxです。
index.html
背景色とコンテンツの重ねて表示させます。
new.html
ページネーションは未実装で構いません。
about.html
画像ホバー時にポップアップを表示させます。
medical.html
ブロックを並列で表示させます。
surgery.html
ブロックを並列で表示させます。
disease/symptom.html
同様のレイアウトになります。
access.html
ブロックを並列で表示させます。
レスポンシブ対応
非対応。
必要な機能
ボタンホバー/ポップアップ/Google Map実装

確認作業

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

デモサイト

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

デモサイトはこちら

ソースコード

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

ソースコードはこちら

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

よくある質問（FAQ）

Q1. クリニックサイトの模写コーディングはどのくらいの難易度ですか？

A. 中級編に位置づけられており、模写サイトの第三弾として公開されています。複数ページがある点、Googleマップが埋め込まれている点、ホバー時のポップアップが実装されている点が特徴で、入門編より難しい内容です。

Q2. このクリニックサイトはレスポンシブ対応が必要ですか？

A. レスポンシブ対応は非対応で、PC表示のみを作成すればよいとされています。ページ数や機能が多いため、今回はレスポンシブの実装は不要とされています。

Q3. 模写コーディングの練習方法にはどんな種類がありますか？

A. 2種類あります。1つはデモサイトを見ながらソースコードを写していく「模写コーディング」、もう1つは想定仕様とデザインカンプだけを見て実際のサイトを見ずに作る「デザインカンプコーディング」です。後者の方が難易度は高くなります。難しい場合はソースコードを丸写しする写経から始める方法もあります。

Q4. コーディングの仕様やコンテンツ幅はどうなっていますか？

A. コンテンツの横幅は1500px、内部コンテンツは1200pxです。必要な機能としてボタンホバー、ポップアップ、Google Mapの実装があり、各ページでブロックを並列表示させたり、about.htmlでは画像ホバー時にポップアップを表示させる仕様になっています。想定単価はコーディングページ8ページで10万円とされています。