WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
previous arrowprevious arrow
next arrownext arrow

【HTML/CSS/JS コーディング練習】上級編:広告代理店サイト

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

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

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

今回は、模写サイトの第六弾になります!お題は、「広告代理店のコーポレートサイト」です!複数ページがある点、ローディングアニメーションをこだわっている点、JavaScriptを使用した様々な動きが実装されている点が今回の特徴です!

そして、「100万円前後の単価」と非常にレベルの高い内容になっています!

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

目次

練習方法

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

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

  1. 模写コーディング
    公開している「デモサイト」を見ながらソースコードを写していく方法です。実際のサイトの動きを見ながら作成します。
  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
  • 必要な機能
    ローディングアニメーション/フェードイン/ホバーアクション/スライドショー/タブ切り替え/アコーディオンメニュー/ハンバーガーメニュー

確認作業

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

デモサイト

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

ソースコード

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

WithCodeを体験できる初級コース公開中!

初級コース(¥49,800)が完全無料に!

  • 期間:1週間
  • 学習内容:
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!

この記事を書いた人

WithCode(ウィズコード)は「目指すなら稼げる人材」というコンセンプトを掲げ、累計300名以上の卒業生を輩出してきたプログラミングスクールです。Web制作・Webデザインに関する役立つ情報や有意義な情報を発信していきます。

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら
  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次