期間限定でWordPress開設が41%OFF!11/8まで

【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】

【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】


模写コーディングがオススメされていたけど、そもそも何をすればいいの?
模写コーディングのやり方と、準備を教えて欲しいです!

HTMLとCSSの基礎が終わったら模写コーディング!

・・・と行きたいところですが、そもそもどうやってやるものなのか?どんな準備が必要なのか?

が分からなくて困っている人もいるかと思います。

そこで今回の記事では、

  • 模写コーディングのメリット
  • 模写コーディングのための準備

に分けて、じっくりと解説していきます。

この記事を書いている私自身、現役のWeb系のエンジニアなのでやり方の正確性はある程度保証できるかと。

この記事を参考にしつつ進めていくだけで、模写コーディングに取り掛かれるようになりますよ!

この記事は解説記事ですので、実際にPCで作業しつつ読み進めて行くことをおすすめします。

Ken

今回の場合は模写コーディングがどこにも公開されない方法なので大丈夫ですが、公開する場合は著作権などに気を付けて取り組んでください!

コーディングの学習をするなら模写コーディングがうってつけ

HTMLとCSSの基礎学習はProgateなどでサクッと学べるから良いとしても、初学者が躓きやすいのはそこから先。

ここで良く分からなくなって挫折、またはスクールに切り替えて学習する人も多いと聞きます。

結論ですが、HTMLとCSSを学習した後は模写コーディングをすればOK。

模写コーディングとは

お手本となるサイト(もしくは画像など)を用意し、そのサイトと同じ見た目になるよう近づけることを目標にコーディングしていくことですね。

模写の最中は必ず「試行錯誤」が多く発生し、これで一気にコーディングスキルを伸ばせるわけです。

模写コーディングなら完全無料で学習できますし、誰に教えてもらわずとも学習可能です。

分からなくなったら、最悪模写しているサイトのコードを見ればいいだけ。

Ken

模写コーディングは、コーディング技術を高めるのであれば一番手っ取り早いかつ経験値も貯まりやすい手法というわけです。

模写コーディングの大きなメリット

模写コーディングのメリットは以下の3つ。

模写コーディングのメリット

  • 実践的な練習になる
  • 理解が一気に進む
  • 綺麗な書き方が分かるようになる

実際、Progateなどで基礎学習を終わらせたあとはマジで何もできません。

学習中はレベルアップしているように思えるのですが、「じゃぁやってみてね」と言われるとどこから手を付ければいいのか・・・という状況です。

そんな状況を打破できるだけの実践的な練習になり、鬼成長できます。

模写コーディングの知識を自分の物にする
模写コーディングを通して、今までの学習を自分の中に落とし込むことが狙いです。

ページを作る際の構成を考えるステップや、クラス名の付け方など、今まで気にしていなかったことが模写コーディングで学べます。

基本的に模写するサイトはプロが作ったものですので、きれいな書き方を学べるという点でもおすすめですね。

模写コーディングのやり方【前準備】

模写コーディングをする前に準備が必要なのですが、以下の流れで進んでいきます。

模写コーディングの前準備のステップ
  1. 模写するサイトを決める
  2. エディタの用意
  3. 基本のファイルの用意
  4. 画像の準備
  5. 模写コーディング開始!

どれも必須になってきますので、一つずつ解説していきます。

Ken

基本的には解説の通りに真似をすれば完了です!

模写コーディングのためのお手本サイトを決める

お手本にするサイトは正直何でもOKなのですが、もちろん難易度差があります。

初心者向け:レスポンシブサイトだが、スマホ/PC間でそこまで大きな差がない

上級者向け:レスポンシブサイトで、要素の変化が激しい

というような感じですね。

【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選』にてお手本におすすめなサイトを紹介しています。

【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選 【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選 初心者にもおすすめな模写コーディングにうってつけなサイトを9つ、初級者・中級者・上級者に分けて紹介します。最初は簡単な模写コーディングから始めて、自分でサイト作成ができる技術レベルまでもっていきましょう!

最初は「LP(ランディングページ)」と呼ばれる、1枚だけのページの模写コーディングから入るとシンプルでやりやすいです。

LPは商品を売るためのページとして使われていまして、実務でもコーディングの機会が多いですし、複雑でもないのでLPから模写がベスト。

模写コーディングのためのエディタの用意

次に、コーディングを書き込むためのエディタをインストールしましょう。

メモ帳とかでもできなくはないんですが、見にくいですし、どうせ今後使うようになるので今の内から練習しましょう!

よく使われているのはVSCode(Visual Studio Code)というエディタ(無料)でして、こちらをインストールします。

Ken

『c』と打っただけで『class』が予測で出てきて、Tabキーで補完できるなど、便利な機能がたくさんあります。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/にアクセスしまして、DownloadNowをクリック。

VSCodeインストール

使っているPCに合わせてインストール開始。(Windowsなら一番左、Macなら一番右)

VSCodeインストール2

その後は保存したexeファイルを実行してデフォルトの状態のまま次へ次へをクリックしていくとインストール完了です。

VSCodeを日本語化しておきましょう

英語のままでOKという人は無視していいのですが、一応分かりやすいよう日本語に変更しましょう。

VSCodeの日本語化手順
  1. インストールしたVisual Studio Codeを開く
  2. メニューから『View』 > 『Command Palette』を選択
  3. 『Configure Display Language』を選択
  4. 『Install Additional Laugage』を選択
    サイドバーに拡張言語パックが一覧表示されます
  5. サイドバーから『Japanese Language Pack for Visual Studio Code』を探し、『Install』ボタンをクリック
  6. 右下にポップアップが表示されるので、『Restart』をクリック
    VS Codeが再起動したら日本語化完了

ここからの説明では、VSCodeは日本語化した状態で進めます。

模写コーディングのための基本ファイルの用意

ここからは実際に模写コーディングをしていくだけ・・・

なのですが、一旦VSCodeからは離れて、各ファイルの前準備だけ終わらせた状態で取り組んでいきましょう。

Ken

例えばHTMLのheadタグ内とかにCSSを適用するためのコードを追加した状態から始めると躓きにくいです!

これから準備していくこと

ディレクトリの作成

htmlファイル(index.html)の作成

cssファイル(style.css)の作成

ではまずディレクトリの作成から。

ディレクトリを作成していく

模写コーディング用のディレクトリ

practiceというファイルの中に、css・imgフォルダおよびindex.htmlを入れていきます。

cssフォルダの中にstyle.css(cssファイル)を入れて、imgフォルダの中に画像を全部入れます。

以下の図のような配置にしていきましょう。

模写コーディングのためのディレクトリ

practiceファイルはデスクトップにでも置いておけば分かりやすいでしょう。

index.htmlとstyle.cssは

右クリック > 新規作成 > テキストドキュメント
作成したテキストドキュメントの名前を変更

で作成します。中身はまだなにも書いてなくてOKです。

拡張子の変更
画像のように、「.txt」の部分まで含めてまるごと名前を変更します。警告が出ますが「はい」をクリック。

HTMLファイルの準備

VSCodeを起動して、『ファイル』 > 『ファイルを開く』よりindex.htmlを開きまして、以下をコピペして保存します。

index.html
<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>practice</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  </head>
  <body>
    <header>
    <!-- ここにヘッダー -->
    <h1>ページタイトル</h1>
    </header>
    <main>
    <!-- ここにメイン -->
    </main>
    <footer>
    <!-- ここにフッター -->
    </footer>
  </body>
</html>

少し解説を入れると、

index.html
<meta name="viewport" content="width=device-width, initial-scale=1">

この部分でレスポンシブに対応できるようにしています。

index.html
<title>practice</title>

この部分はタイトルで、画面上に表示はされませんが、ブラウザのタブなどに表示されます。
Googleなどで検索したときに出てくるタイトルはこれですね。

index.html
<link rel="stylesheet" href="./css/style.css">

この部分でCSSを読み込みます。
解説通りのCSSファイル配置であれば、この書き方でOKです。
CSSファイルの配置によって書き方は自由に変えてみてください。

index.html
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

この部分でjQueryを読み込ませています。

jQueryの必要のない模写コーディングも中にはありますが、もし多少動きのあるサイトを模写する場合は必須となります。

基本的に毎回コピペで問題ありませんので、毎回使う基本テンプレートとして別途保存しておくのも良いでしょう。

CSSファイルの準備

続いてCSSファイルを準備します。

『ファイル』 > 『ファイルを開く』よりstyle.cssを開きまして、以下をコピペして保存します。

style.css
@charset "UTF-8";

html {
  margin: 0;
  padding:0;
}

/* ----------------------------------------
ヘッダー
 ----------------------------------------*/
.header {

}

/* ----------------------------------------
メイン
 ----------------------------------------*/
.main {

}

/* ----------------------------------------
フッター
 ----------------------------------------*/
.footer {

}

CSSは多くなってくるとかなり見にくくなるので、上記のようにパーツごとにコメントを入れるなどして区分けしましょう。

画像ファイルを準備しよう

最後に、画像ファイルを取得して『img』ファイル内に入れていきましょう。

例えば『img』ファイルにsample.pngという画像を入れた場合、

HTML
<img src="./img/sample.png">

のようにすることで、画像の表示が可能となります。

画像ファイルは最初にサイトから持ってきましょう。

画像を右クリック > 名前を付けて画像を保存 などで保存していきます。

模写コーディング中の編集ファイルの確認方法

ここまで出来たら、現状の見た目を確認してみましょう。

ブラウザでの確認方法

GoogleChrome(ブラウザ)に、index.htmlをドラッグ&ドロップすれば現状の見た目が確認できます。

Ken

「ページタイトル」しか表示されていない味気ないサイトが表示されたら成功です。

ちなみに模写コーディング中は、毎回ドラッグ&ドロップをするのは面倒です。

ファイルを書きかえて保存→開いているサイトをリロード

で変更を確認できますので、この方法で素早く確認、修正を繰り返していきましょう。

模写コーディング中のソースコードの確認方法

模写コーディング中は、お手本にしているサイトの幅の長さや余白の大きさが必要になってきます。

こちらを取得するには、Chromeのデベロッパーツールを使用します。(初期状態から使えます)

デベロッパーツールを使えるようになろう

デベロッパーツールの開き方

Macの人:option + + i
Windowsの人:ctrl + shift + i

上記方法でデベロッパーツールが使えますので、以下のgif画像のようにして、特定要素のCSSを変更してみます。

デベロッパーツールの使い方

右上にある矢印アイコンをクリックすることで、Web上の要素をひとつひとつ詳しく見ていくことができます。

選択したのは記事のタイトルのh2タグなのですが、そこのCSSを編集して文字色を赤色にしました。

上記のデベロッパーツールを使用することで

  • お手本と自分の書いているHTMLの違いがあるか確認
  • お手本の特定の要素のCSSを見てどのような実装になっているのか確認
  • 自分の作っているCSSに何を追加すればいいか確認

など、本当に多くのことができます。

Ken

特に余白の大きさや要素の大きさ、画面の横幅が何pxからCSSが切り替わるのかなどはこちらで確認しないといけませんね。

他にも画面の大きさの変更が先ほどの矢印アイコンの右のアイコンからできますし、コーディング中にはデベロッパーツールの使用が必須となります。

詳しい使い方についてはかなり長くなってしまうので、以下のサイトから確認してみてください。

参考 初心者向け!Chromeの検証機能(デベロッパーツール)の使い方サルワカ

模写コーディング中の要素の確認方法(デザインカンプで確認する方法)

お手本にしているサイトがWebサイトだったらいいのですが、デザインカンプの場合は要素の大きさや余白をどうやって確認すればいいの?

という話になります。

Ken

デザインカンプからのコーディングは、そもそもデザインカンプを見るためにAdobe XDというソフトが必要になります。

なにはともあれダウンロードしなければ始まらないので、Adobe公式サイトにてダウンロードしましょう。

AdobeXDを無料インストール
下の方にあるスターターキットの『XDを無料で入手』をクリックで無料プランでインストール可能です。
Adobe IDを作成する必要あり

初めてAdobe製品を利用する方はここで『Adobe ID』の作成が必要となります。

サイトの案内に従って作成していきましょう。

それではAdobe XDを使用して模写コーディングに必要なものを取得する方法を紹介します。

画像を取得する方法

デザインカンプから画像を保存する方法は簡単で、画像を選択してからctrl+Eで可能です。Adobe 画像の取得

画像のように好きな形式で画像を保存できますので、この機能を使って実際のページにも画像を貼り付けます。

各種値を取得する方法

デザインカンプから要素の大きさであったり、文字の色やフォントサイズなど、各種値を取得する方法は、ただただ要素を選択するだけ。

Adobe 要素の大きさなどを取得

幅520px、高さ531pxということが分かりました。

Ken

なお、テキストについてはダブルクリックで選択可能となっています!

余白の幅などを取得する方法

模写コーディングをやっていくなかで意外と必要になるのが余白の幅。

marginやpaddingの値をどうすればいいのか悩む人も多いと思います。

要素を選択後、altキーを押しながら他の要素へホバーすることで幅の長さが分かります。

Adobeでの余白の取り方

上記では、テキストをダブルクリックした後に他要素との距離を測っています。

上記ができるようになれば、デザインカンプからの模写コーディングはできるようになりますので、コツコツ頑張っていきましょう!

模写コーディング中の注意点

模写コーディングをしていく中でのコツや注意点を最後に紹介して終わりにします。

模写コーディング中のコツ・注意点

  • 分からなくなってもコピペはNG
  • 最初はできるだけ答えを見ずに挑戦してみる
  • 時間がかかってもOK

特に最初はわからないことだらけなので、最初からコードを確認してそっくりそのまま真似るようになるかと思います。

考えつつ真似るのであれば何度やっても構わないと思いますが、なにも考えずに写すのはNGですね。

学習中のコピペは一番やってはダメですね。(分かりきっている部分ならいいのですが)

学生の時に答えを写した経験がある人が大多数だと思いますが、「とにかく課題を出せばOK」という考えで写しているとなんにも勉強になりませんよね。

でも、考えつつ答えを写す(参考にする、と言った方が正しいでしょうか)と多少は勉強になったという経験もあると思います。

最初は答えを見ずに挑戦して、「だめだ」と思ったら見て真似る。

最初の内は上記の繰り返しでかなり成長できます。

最初は初心者向けの模写コーディングでも10時間近くかかるかと思いますが、どれだけ時間がかかってもOKだと思っています。

Ken

私も最初はかなり時間がかかり、「これ仕事になると結構しんどくないか・・・?」と思いました。
やっているうちに段々速度も上がってくるので、心配不要でした。

むしろ、かなり時間がかかるのがデフォルトでして、焦らずじっくりと模写コーディングをしていきましょう!

模写コーディング中のよくある質問

模写コーディング中によくある質問をまとめました。

デザインカンプからの模写コーディング練習って必須?

必須じゃありません。私はしませんでした。

デザインカンプからのコーディングを実務で使う人は限られていまして、例えばWeb開発をする人は大抵使いません。

デザイナーでも、「デザインカンプを作る」可能性はあっても「デザインカンプからコーディングする」ことはないという人もいます。

デザインカンプからのコーディングは難易度が高いので、絶対使うなという人以外はしなくてOKでしょう。

模写コーディングをネット上に公開するにはどうしたらいい?

レンタルサーバーを借りるのが簡単です。

この記事で紹介している方法は、「あなたのPCからしか見れない」状況です。

全世界に公開されている状態ではないので、「ホスティング」という作業が必要になります。

ざっくり解説
  1. 有料でレンタルサーバーを借りて、WordPressを開設←どうせなら今後の事も考えて開設するのがオススメ
  2. サーバー内に作成したファイル群をアップロード
  3. ファイル形式に従ってURLを入力すれば閲覧可能!

レンタルサーバー代として月700円程度かかってしまうのですが、それで案件を取得できるなら安いもんです。

ホスティングの方法は『ポートフォリオを作る際にホスティングする方法』で詳細に解説しています。

模写コーディングで鬼成長しよう

私も模写コーディングで一気に成長できました。

ほとんどの人が通る道だと思っていまして、模写コーディングを通して

どんなデザインでも、調べつつだったら模写できるな

というところまで行けたらコーディング案件をとれるレベルの技術力が身に付いたと思っていいでしょう!

ここからは時間がかかりますが、ちょっとずつ上達していきましょう。

さっそく模写コーディングの見本を探すなら

【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選 【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選 初心者にもおすすめな模写コーディングにうってつけなサイトを9つ、初級者・中級者・上級者に分けて紹介します。最初は簡単な模写コーディングから始めて、自分でサイト作成ができる技術レベルまでもっていきましょう!

模写コーディングの後のステップで悩んでいる人向け

【目標月5万】大学生がプログラミングで稼ぐ全手順【バイト以外で稼ぐ】 【目標月5万】大学生がプログラミングで稼ぐ全手順【バイト以外で稼ぐ】 大学生がプログラミングで稼ぐ手順を全公開します。半年で達成可能でして、それでバイト以外でもガッツリ稼げるようになります。プログラミングを学んでからWordPressを学習し、案件を取得するまでを解説していきます。

こちら、「大学生が」と書いてあるものの、全年齢参考可能です。