【未経験から独学で】プログラミング学習ロードマップ公開中!記事はこちらから!

【初心者必見】模写コーディングの正しいやり方と注意点 – おすすめのサイトは? –

【初心者必見】模写の正しいやり方 色は?余白は?フォントは?
悩む人

模写をするといいって聞くけどやり方が分からない…
どんなサイトを模写すると良いんだろう…
体系的に学べる教材とかないかな…

みと

これらの悩みすべて解決します!!

こんにちは、みと(@mito_710_1)です!

今回はPrigateやドットインストールを終え、いざ模写をしよう!としている方向けの記事となります。

模写のやり方に困っている方必見です!

目次

模写の正しいやり方は?

Progateなどを終えたばかりの人には最初から完璧に模写をするのはかなり難しいです。

そのため始めて模写をする人は次のようなステップで少しずつ上手に模写ができるようにスキルアップしていきましょう!!

STEP
目視でレイアウト模写
STEP
フォントや要素の大きさを意識した模写
STEP
SNSの埋め込みやOGPなど模写+αのスキル習得

ひとつひとつ見ていきましょう。

目視でレイアウト模写

基礎学習後すぐにフォントの種類やサイズ、色、要素の大きさ、余白の幅、etc…これらすべてを完璧に模写することはかなりむずかしいです。

逆にある程度HTML・CSSは使いこなせる自信があるよって人はこのステップはとばしてOK

STEP1の目標

適切なHTMLタグでマークアップすること、CSSのプロパティの使い方を身につける

プロパティの「値」はあまり気にせずにとりあえずHTML・CSSを使いこなせるようになりましょう!!

コーディングルールはこちら

  • 色はほぼ同じ色であればOK
  • フォントの種類は気にしない(デフォルトでOK)
  • フォントサイズも元サイトと見比べなが「だいたい」合わせる
  • 要素の大きさ・幅は元サイトと見比べながら目視で「だいたい」合わせる

かなりゆるいルールですね

こちらの記事でコーディングに関する注意点や効率的な方法を解説しているのでぜひご覧ください

最初から完璧は求めずにコーディングになれるところから始めましょう!

フォントや要素の大きさを意識した模写

HTML・CSSをある程度使えるようになったら今度はフォントやCSSプロパティの「値」を意識してコーディングしていきまよう!

STEP2の目標

Googleの拡張機能や検証ツールの使い方を身につける

CSSプロパティの「値」まで正確な模写ができるようになる

ポートフォリオに載せられるような完成度の高い模写ができるようになりましょう!!

STEP2では先ほどとは違い、フォントやCSSプロパティの値を取得して完成度の高い模写を目指します。

模写に挑戦する初心者さんにありがちなのが

悩む人

そもそもCSSの値とかってカンニングしていいの?

という疑問。

実はコレ…

カンニングOKなんです!

というのも、実案件では「デザインカンプ」というコーディング設計書およびサイトの完成図をもとにコーディングをすることになります。

デザインカンプには

  • 使用するフォント
  • フォントのサイズ
  • カラーコード
  • 要素の大きさ
  • 影や文字間
  • 余白の幅

などなど

コーディングに必要な値がすべて載っていて、それらを見ながらコーディングすることが可能。

そのため模写の段階からフォントの種類やCSSの値を取得しながらコーディングする方が正しいというわけです。

ではどのようにしてそれらの値を取得するのか。

方法は二つあります。

  • Google Chromeの拡張機能を使用する
  • Google Chromeの検証ツールを使用する

それぞれの使用用途と使い方はこんな感じ

Google Chromeの拡張機能

使用用途

「CSSのプロパティ」に焦点を当てた取得方法

  • 即座にピンポイントで値を取得したいとき
  • サイト全体の全要素から、特定のプロパティの値だけ取得したいとき

これだけだとあまり意味が分かりませんね(笑)

使ってみると言っていることが分かると思うのでまずは一度使用してみましょう!

使い方はこちらの記事を参考にしてください

HPcode(えいちぴーこーど)
Webサイトをコーディング模写するやり方と使用するツール コーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコード…

Google Chromeの検証ツール

使用用途

ひとつひとつの「要素」に焦点を当てた取得方法

ある特定の要素に対して、適用されているCSSプロパティとその値を取得したいとき

こちらもまずは一度使用してみることをおすすめします。

検証ツールはWeb制作必須のスキルなのでしっかりと身につけましょう!

使い方はこちら

Webクリエイターボックス
新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方 皆さん、使っていますか?Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム!Chr...

少なくとも検証ツールは使いこなせるようになると良いですね!

拡張機能は検証ツールよりも値の表示がシンプルなので入れておくと値を即座に取得したいときに大変便利です。

SNSの埋め込みやOGPなど模写+αのスキル習得

STEP2までのスキルが身についたと思った方はただ「コーディング模写」するだけでなく、SNSの埋め込みやOGPタグの設定など、実案件を意識した「サイト制作」のスキルを身につけましょう!

実案件ではデザインカンプどおりにCSSで見た目を整えるだけで終わりではなく、企業のSNSやGoogleマップの埋め込み、TwitterカードなどのOGPタグやファビコンの設定etc…

こういった様々なスキルが必要になります。ぜひ「模写スキル」を「サイト制作スキル」に進化させましょう!

こういった内容は調べたら出てくるものもありますが、自分で調べてやり遂げる自信が無いという方は次に紹介する教材をおすすめします

Web制作おすすめ教材

今回紹介するのはWeb制作者なら誰でも知っているような有名ブログ、「Webクリエイターボックス」を運営しているManaさんが書かれた教材「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」です!

さきほどの検証ツールの使い方でご紹介した記事もWebクリエイターボックスさんの記事ですね。

こちらの教材ではプロの解説付きコードが見られるほか、

  • 制作の流れ
  • レイアウト
  • OGPの設定
  • Webフォント
  • レスポンシブ化
  • HTMLタグの解説
  • ファビコンの設定
  • サーバー・ドメイン
  • CSSプロパティの解説
  • カラーコードと配色例
  • flexboxとCSSグリッド
  • おすすめ写真素材サイト
  • Webデザインの基礎知識
  • SNSプラグイン・YouTube動画の挿入

などなど、かなり濃い内容が詰まっています!

模写に挑戦する初心者に限らず、Web制作をしている人なら誰もが持っておきたい1冊。

正直Progateやドットインストール後のHTML・CSSの学習のために教材を買うとするならこれひとつで十分すぎるというぐらいに優秀な教材です。

「1冊ですべて身につく」というだけあって、HTML・CSSを使用したサイト制作に関するスキルがすべて載っており、学習を終えた人でも持っておくとふとした瞬間の辞書代わりに使えて大変便利です。

おすすめサイトと注意点

ここからは模写をする際の注意点について触れていこうと思います。

模写の時は次の3つのことに気をつけましょう!!

  • 模写するサイト選び
  • 時間を計る
  • 最後までやりきること

模写するサイト選び

ほとんどの人は模写したサイトをそのまま制作実績としてポートフォリオサイトに載せたりすると思います。

ではどのようなサイトが見栄えが良いのでしょうか。

良く模写おすすめサイトのように検索すると「iSara」「Airbnb」の二つがヒットします。

しかしこれらは既に多くの先人が模写をしてポートフォリオとして提出してきたため、WEB制作に精通している依頼主からしたら「初心者マーク」のようなイメージになっているんですね。

できればそういったサイトは避けて模写すると良いと思います。

模写サイトはこちらの記事を参考に選ぶと良いですよ!

HikoPro Blog | IT・テクノロジー...
【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog HikoPro こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していま...

時間を計る

ポートフォリオサイトに載せるときに模写したサイトの画像の他、使用したスキルを載せるとポートフォリオを見る側としては分かりやすくおすすめです。

しかしそれ以上に、「どれぐらいの日数、一日どのくらいの時間でそのサイトが完成させることができたのか」が案件の納品締め切り日とのすりあわせの指標として役に立つのでできればサイトをコーディングする際は時間を計って、ポートフォリオサイトに載せておくと良いでしょう。

最後までやりきること

どれだけ時間がかかっても良いです。最後までやりきりましょう。

さきほど「時間を計って」といった矢先に、「時間をかけても良いから」といっても焦ってしまうと思いますが、大切なのはポートフォリオの見栄えを意識して時間を気にしてコーディングすることではなく、しっかりと模写を通して知識・スキルを身につけることが最優先です。

まずは模写を通して技術力を上げる。

それができたら時間を意識して模写に挑戦すると良いと思います。

分からないことはしっかりと調べて身につけておきましょう!

まとめ

今回は「模写」に焦点を当てて解説してきました。

模写は最初から完璧を求めると容易に挫折する原因になり得ます。

実際模写の段階で挫折してしまう初心者も多いです。

挫折しないためにも今回ご紹介したステップで少しずつコーディングスキルを身につけていきましょう!!

こちらの記事で模写以外にも気をつけたいことを解説しているので是非ご覧ください。

ブログランキング・にほんブログ村へにほんブログ村
  • ブロックエディター『Gutenberg』に完全対応
  • 豊富なカスタマイズとシンプルで美しいデザイン
  • 100%GPLテーマだから複数サイトで使用可能
美しく高機能なテーマ「SWELL」で楽しく記事を書こう!
【初心者必見】模写の正しいやり方 色は?余白は?フォントは?

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる