コーディングの基礎学習終わったけど次は何すればいいんだろう。
実践的な練習したいな。
「模写コーディング」ってどうやるんだろう
おすすめのサイトあるかな
コーディングの基礎学習が終わった方の、
こんなお悩みに解説します。
コーディング基礎学習終わったら次は実践
動画やテキストの基礎学習が終わったら、
次は実際にコーディングの練習をしましょう。
動画やテキストで学んだことがまだ理解できていない状態でも大丈夫です。
実践して、いろんな疑問が出てくるので、
その都度調べながら学んでいきます。
コーディングの練習方法
コーディングの実践練習の方法は、２つあります。
・デザインカンプのコーディング
・模写コーディング
デザインカンプのコーディング
PhotoshopやIllustratorなどのデザインツールで作成された、
デザインカンプと呼ばれるものから
必要情報を取得して、コーディングをしていきます。
実際の現場では、このデザインカンプを見ながらコーディングしていくことがほとんどです。
※デザインカンプのコーディング練習には、Adobe社のデザインツールが必要になります。
模写コーディング
模写コーディングは、web上にあるサイトを見ながら
コーディングをしていきます。
実際に公開されているサイトを見ると、非常に勉強になります。
どういったレイアウトが多いのか、
今はどんな機能やデザインが主流なのか、
などと公開されているサイトだからこそ学べることがたくさんあります。
最初のうちは、答え(ソースコード)を見ないで自力でコーディングをしてほしいのですが、
慣れてきたら、様々なサイトのコードを見るといいです。
同じようなデザインでも、違った記述方法が学べます。
この記事では、模写コーディングのやり方を解説していきます。
模写コーディングのやり方
それでは早速、模写コーディングの方法を詳しく解説していきます。
模写コーディング手順は、
- サイトから必要情報を取得する
- コーディングをする
サイトから必要情報を取得する
模写コーディングをするための拡張機能
コーディングをする前に、フォントやカラー、余白、画像など
必要情報を取得します。
サイトから必要情報を取得するには、googleの拡張機能を使います。
【模写コーディングに使う拡張機能】
ColorPick Eyedropper
文字や背景などのカラーを取得します。
WhatFont
フォント情報を取得します。
Page Ruler Redux
要素の幅や高さだけでなく、余白も取得します。
Image Downloader
サイト上の画像をダウンロードします。
拡張機能の追加方法
※ブラウザは、google Chromeを使用します。
拡張機能はchromeウェブストアからインストールします。
インストールする拡張機能を検索します。
Chromeに追加をクリックします。
ポップアップが出たら、拡張機能を追加をクリックします。
これで拡張機能が追加されました。
右上のパズルピースのマークをクリックし、
該当の拡張機能のピンをクリックするとブラウザのバーに追加することができます。
各拡張機能で情報の取得の仕方
ColorPick Eyedropper カラーの取得
ColorPick Eyedropperをクリックして、
色を調べたいところにカーソルを合わせるだけでカラーコードを調べることができます。
カラーコードは、rgbで調べることもできます。
WhatFont フォントの取得
WhatFontをクリックし、取得したいフォントをクリックするとフォント情報が表示されます。
フォント情報は、
・font-family
・font-style
・font-weight
・font-size
・line-height
・color
を取得することができます。
Page Ruler Redux 余白、コンテンツサイズの取得
Page Ruler Reduxをクリックして、余白やサイズを測りたいところをドラッグして測ります。
上部にwidthやheightなど表示されます。
Width, Height, Left, Top, Right, Bottomを取得することができます。
Image Downloader 画像を取得
Image Downloaderをクリックして、ダウンロードしたい画像を選択します。
表示されない画像がまれにあるのですが、
その時はデベロッパーツールからダウンロードすることができます。
コーディング
必要情報を取得できたら、コーディングをしていきます。
効率がいいコーディング手順は、
HTML→CSS →js→レスポンシブ
です。
基礎学習後の模写コーディングは、とても難しく感じられるかもしれません。
しかし、どんなコードを書けばデザインを再現できるかを考えて、
実践を積み重ねることが最速の習得方法です。
できるだけ答え（ソースコード）は見ずに自力でやってみましょう。
どうしてもわからなかったら、
ググりましょう。
「文字」 「色」 「変わらない」 「HTML」
などと検索すれば答えが見つかります。
それでもわからない時は、
デベロッパーツールでソースコードを確認します。
おすすめの練習サイト
効率よく習得するには、
よくあるレイアウトをコーディングしてみることです。
サイトには、よくあるレイアウトというものが存在します。
ここにいくつか、コーディングできるようになっておきたいレイアウトのLPやサイトを記載します。
ぜひ練習をしてみましょう。
おすすめ模写コーディングサイト
ランディングページ
シノケンハーモニー
・画像とテキストの横並び
・ホバー付きボタン
・googleマップの埋め込み
・テーブル
のレイアウトを練習することがでます。
ペライチ
ペライチは、ランディングページや１ページのサイトを作れるサイトです。
おしゃれなテンプレートがたくさんあり、これを模写すると勉強になります。
さまざまなジャンルのテンプレートがあるので、
ジャンルごとに適したレイアウトを学び、練習することができます。
まずは、興味があるジャンルのテンプレートを模写してみましょう。
サイト木舟歯科
こちらは上級者向けになります。
サイトに必要なページや機能を練習することができます。
・ナビメニュー
・positionで画像を重ねる
・コンポーネント化（同じレイアウトのコードを繰り返し使う）
・SNSリンク
・アコーディングメニュー
・ホバーの速さ
・スライダー
・レスポンシブデザイン
・ハンバーガーメニュー
・電話発信
・ドロップダウンメニュー
参考サイトやLPを探せるサイト
もっと模写コーディングをしたい方や、ソースコードを見て勉強したい方は
さまざまなサイトをまとめてくれているサイトを活用するといいです。
見るだけでもすごく勉強になります。
web制作の勉強になるサイト
イケサイ
幅広いジャンルのサイトがあります。
81-web.com
更新頻度が高く、おしゃれなサイトが多いです。
LPアーカイブ
ランディングページや１ページのサイトを集めたサイトです。
LPの色で検索ができます。
RWDJP
レスポンシブデザインの勉強、練習に最適です。
パソコン、タブレット、スマホ表示を一度に確認できます。
まとめ
コーディングの実践練習は、難しく感じるかもしれませんが、
デザインを見て、どんなコードで実装するべきかと考えることが重要です。
実装してみて、ブラウザで確認して、
うまくいかなかったら違う実装を試して、
いろいろやってもうまくいかなかったら、
検索しながら調べます。
これを繰り返していくうちに、
コーディングスキルが上がっていきます。
ぜひ、いろいろなサイトを模写してみてください。