【HTML/CSS/JS コーディング練習】上級編：広告代理店サイトの模写で学ぶマルチページ制作と高度なJS実装
目次
この記事の結論
この記事は、上級編・模写サイト第六弾となる「広告代理店のコーポレートサイト」の模写コーディング教材です。複数ページ構成、こだわりのローディングアニメーション、JavaScriptによる多彩な動きが特徴で、実案件なら想定単価100万円前後（コーディング10ページ）というレベルの高い内容になっています。デザインカンプやソースコード、想定仕様が公開されており、デモを見ながら写す模写コーディングと、仕様とカンプだけを見て作るデザインカンプコーディングの2つの練習方法から選べます。
Web制作を勉強されている方の中で、基本的な文法事項やデザインツールの勉強方法を学んだが、実際にホームページやランディングページを作ったことがないという方は多いのではないでしょうか？
そのような方のために、Web制作会社が運営するプログラミングスクール「WithCode」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します！
今回は、模写サイトの第六弾になります！お題は、「広告代理店のコーポレートサイト」です！複数ページがある点、ローディングアニメーションをこだわっている点、JavaScriptを使用した様々な動きが実装されている点が今回の特徴です！
そして、「100万円前後の単価」と非常にレベルの高い内容になっています！
実際の案件だった場合の想定単価・納期・仕様も公開しますので、Web制作・Webデザインを学習中の方は、ぜひ積極的にご活用ください！
練習方法
模写コーディングの練習方法は2種類あります。ご自身のスキルレベルに応じて、選んでください。
模写コーディングが難しいという方は、ソースコードを丸写しする写経からお試しください！
- 模写コーディング
公開している「デモサイト」を見ながらソースコードを写していく方法です。実際のサイトの動きを見ながら作成します。 - デザインカンプコーディング
次章以降に公開している想定仕様とデザインカンプを見ながら、実際のサイトを見ずにコーディングする方法です。こちらの方が難易度は高いと言えます。
事前確認事項
前提として、模写コーディングをするにあたり、可能な限りソースコードは見ないようにしましょう。また、細かいフォント等にもこだわらず、同じようなデザインを自分の技術力で再現できるか確認しましょう！
まずは、デザインを確認して全体のレイアウト構成を考えてから、各パーツのレイアウト構成決めてコーディングを始めましょう。
デモサイトを見ながらコーディングする際は、フェードインやホバーアクションなどのアニメーションを確認するようにしましょう。
完成イメージ
PC表示
タブレット表示
スマホ表示
↓ その他 デザインカンプ(.png)
依頼内容
概要
某広告代理店のコーポレートサイト制作です。
今回は、レスポンシブ対応もお願いします。レスポンシブはスマートフォンだけではなく、タブレットも含まれます。
想定単価
コーディングページ(10p)：100万円
素材
デザインデータ
↓ Figma デザインカンプ(.fig)
ダウンロードファイルを開くには、ツールのアカウントまたはインストールが必要です。
コーディング仕様
- コンテンツの幅
横幅が1500px、 内部コンテンツが1000pxです。 - index.html
> ローディングアニメーション
> フェードイン
> ホバーアクション
> スライドショー を実装します。 - service.html
アコーディオンメニューを実装します。 - voices.html
カテゴリーに応じたタブ切り替えを実装します。 - voices-con.html
ボイスページの個別ページとなります。 - company.html
画像の自動スライドショーを実装します。 - topics.html
カテゴリーに応じたタブ切り替えを実装します。 - topics-con.html
ブログページの個別ページとなります。 - news.html
カテゴリーに応じたタブ切り替えを実装します。 - news-con.html
ニュースページの個別ページとなります。 - contact.html
form/label/input/buttonタグでフォームを配置します。 - レスポンシブ対応
ブレイクポイント：480px/768px/1024px - 必要な機能
ローディングアニメーション/フェードイン/ホバーアクション/スライドショー/タブ切り替え/アコーディオンメニュー/ハンバーガーメニュー
確認作業
コーディングが完了したら、以下の「デモサイト」と「ソースコード」を参考に、レイアウトとコードをチェックしてみましょう！
デモサイト
デモサイトとコーディングしたサイトを比較して、デザインや動きなどを確認してみましょう。
ソースコード
コーディング例です。コーディングの方法に正解はないので、あくまでも参考としてご自身のコードと比較しながら確認してみましょう。
関連記事
- 【HTML/CSS/JS コーディング練習】上級編：建設会社サイトを模写で学ぶマルチページ制作とアニメーション実装
- 【HTML/CSS/JS コーディング練習】中級編：貿易会社サイトの模写で学ぶマルチページ制作とJS実装
- 【HTML/CSS/JS コーディング練習】中級編：クリニックサイトで学ぶ模写コーディング
- 【初心者必見！】HTML/CSS/JS コーディング練習 サイト模写 入門編：バイヤーページ
- 【完全ガイド】ペット紹介ページ作成のポイント | Webサイトで魅せるコツと実例付き
参考リンク（公式・一次情報）
よくある質問（FAQ）
Q1. この模写課題はどのくらいのレベルですか？
A. 上級編で、実案件なら想定単価100万円前後（コーディング10ページ）というレベルの高い内容です。複数ページ構成、こだわったローディングアニメーション、JavaScriptによる様々な動きが実装されている点が特徴です。
Q2. 模写コーディングの練習方法にはどんな種類がありますか？
A. 2種類あります。1つはデモサイトを見ながらソースコードを写す「模写コーディング」、もう1つは想定仕様とデザインカンプだけを見て実際のサイトを見ずに作る「デザインカンプコーディング」です。後者の方が難易度は高くなります。
Q3. このサイトにはどんな機能を実装しますか？
A. ローディングアニメーション、フェードイン、ホバーアクション、スライドショー、タブ切り替え、アコーディオンメニュー、ハンバーガーメニューなどを実装します。ページごとにアコーディオンやタブ切り替え、自動スライドショーなどが割り当てられています。
Q4. レスポンシブ対応のブレイクポイントは？
A. 480px・768px・1024pxの3つのブレイクポイントでレスポンシブ対応を行います。スマートフォンだけでなくタブレットも含めた対応が求められます。コンテンツ幅は横幅1500px、内部コンテンツ1000pxが想定仕様です。
Q5. 模写コーディングを進めるときの注意点は？
A. 可能な限りソースコードは見ず、細かいフォントにこだわらず同じようなデザインを自分の技術で再現できるか確認します。検証ツールで確認しながら進めるのは問題ありません。まず全体のレイアウト構成を考えてから各パーツの構成を決めて始めるのがコツです。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
