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」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します!

今回は、模写サイトの「第二弾」になります!スマホアプリのページとなっており、ランディングページであることが今回の特徴です!

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

目次

練習方法

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

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

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

事前確認事項

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

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

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

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

完成イメージ

PC表示

スマホ表示

依頼内容

概要

仲介サービスのスマートフォンアプリのランディングページ制作。
今回は、PC表示とスマホ表示の二つを用意しました。可能ならばレスポンシブ対応まで実装してみましょう。

想定単価

コーディングページ(1p):5万円

素材

デザインデータ

↓ Figma デザインカンプ

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

コーディング仕様

  • コンテンツの幅
    横幅が1500px、 内部コンテンツが1200pxです。
  • fv
    画像と各要素を横並びに配置します。
  • company
    複数ロゴを無限スクロールで実装します。
  • about
    2つのブロックを横並びに配置します。
  • use
    3つのブロックを横並びに配置します。
  • item
    複数項目をスライドショーで実装します。
  • app
    2つのブロックを横並びに配置します。
  • レスポンシブ対応
    ブレイクポイント:480px/768px/1024px
  • 必要な機能
    ボタンホバー/無限スクロール/スライドショー

確認作業

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

デモサイト

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

ソースコード

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

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

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

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

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

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

この記事を書いた人

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

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

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

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

    実案件サポート

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

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

    就転職サポート

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

    詳細はこちら

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

目次