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

この記事をブックマークする0

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

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

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

模写の正しいやり方は？

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

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

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

目視でレイアウト模写

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

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

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

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

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

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

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

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

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

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

という疑問。

実はコレ…

カンニングOKなんです！

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

デザインカンプには

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

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

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

方法は二つあります。

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

Google Chromeの拡張機能

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

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

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

HPcode（えいちぴーこーど）

Webサイトをコーディング模写するやり方と使用するツール | HPcode（えいちぴーこーど） コーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすることですね。 実際に...

Google Chromeの検証ツール

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

検証ツールは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クリエイターボックスさんの記事ですね。

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

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

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

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

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

おすすめサイトと注意点

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

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

模写するサイト選び

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

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

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

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

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

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

HikoPro Blog | IT・テクノロジー...

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

時間を計る

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

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

最後までやりきること

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

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

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

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

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

まとめ

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

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

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

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

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

にほんブログ村 この記事をブックマークする0