Reproduction

Web制作会社サイト（架空サイト）の模写作品

• 

• 摸写元のサイトアドレス

  https://webdesigner-go.com/template/coding-tutorial/

• サイトの概要

  ねこぽん様のコーディング練習用サイトの模写作品
  「Web制作会社（架空サイト）」

• 摸写の目的・ゴール

  Adobe XDのデザインからコーディングを行い、様々なレイアウトのコーディングを確認する。
  トップページを含めて8ページ、ブレイクポイント2箇所のボリュームがあるため、事前設計を考え効率良くコーディングを行う。
  時間を計って作業をし、実際の業務を意識してコーディングする。
  完成した摸写作品を制作実績としてポートフォリトサイトへ掲載する。

• 制作の作業範囲

  コーディング（レスポンシブ）

• 制作期間

  8日間（38時間程度）

• 使用ツール

  HTML, CSS, Javascritp(jQuery), Visual Studio Code, Adobe XD

• 摸写のポイント・過程

  今回は特にレイアウトの仕方やCSSによるボタンや文章の装飾、アニメーションやjQueryを用いたスライダー等を実装して確認することができました。

  これまで学習してきた経験を活かして、特に効率やコードの美しさを意識して時間を計りながらコーディングを行いましたが、結果的には思ったよりも時間がかかってしまいました。

  こちらも完成版のコードを掲載してくれており、作成後に自身が作成したコードと比較して、特に不安があった点やキレイに書けなかった点、効率的に書ける点を見直すことで、かなり勉強になりました。

  ここまで摸写を行ってある程度のスキルを定着させてきたので、自身のオリジナルサイトの制作に着手していきました。

制作サイトキャプチャ画像

※トップページ（パソコン表示、スマフォ表示）