おすすめプログラミングスクールの口コミ・評判・体験談がわかる比較サイト

プログラミングスクール 掲載数No1 * プログラミングスクール 掲載数No1 *

【駆け出しエンジニア向け】模写でスキル爆上げ!手順から模写すべきサイトまで

【初心者エンジニア向け】模写コーディングでスキル爆上げ!手順からおすすめの模写すべきサイトまで

プログラミング学習

公開日 : 2019年12月18日 | [更新日] 2020年10月01日

HTML・CSS・JQuary・javascriptの基礎を学んだ後に、必ずWebサイトの模写コーディングをおすすめされますよね、、、。

正直、基礎を学び終わった後に、いきなりWebサイトの模写コーディングしろと言われても初心者なので「どんな手順でやったらいいの?」「どんなWebサイトを模写したら上達するの?」といった疑問が生まれ、戸惑っていることでしょう。

お察しします、、、笑

私もそんな戸惑いを覚えた1人で、何から初めていいのか分からず上達に時間がかかってしまったので、みなさんには迷わず上達して欲しいという思いがあります。

そこで今回は、Webサイトの模写コーディングの手順と初心者向けの模写すべきおすすめサイトをいくつか用意したのでぜひ参考にしてみてください。

模写コーディングの手順

テキストエディタを準備する

まず初めにテキストエディタを準備しましょう。「テキストエディタって何?」「どのテキストエディタを使えばいいのか分からない」といった方は以下の記事を参考にしてみてください。

【初心者エンジニア必見】テキストエディタ機能付きのツール13選

模写コーディングで利用する素材のダウンロード

テキストエディタの準備が完了したら、模写コーディングで利用するWebサイトの画像をダウンロードしましょう。ダウンロードの方法は、基本的に以下の2通りです。
①Chromeの拡張機能「Image Downloader」を利用

1.以下のリンクからChromeの拡張機能「Image Downloader」をダウンロード

インストール後、設定画面が表示されます。特に設定画面の変更をする必要はありません。

2.画像をダウンロードしたいWebサイトに行き、右上にある「Image Downloader」のアイコンをクリック

好きな画像をダウンロードするとダウンロードフォルダに画像が取り込まれます。

②Chromeの検証ツールを利用
1.画像を保存したいページで右クリック→検証をクリック

2.Google Chromeの検証ツール内のタブを「Element」→「Source」へ切り替える

3.「Source」の中の「img」フォルダーから該当する画像をクリックして表示させる


4.画像を右クリックして画像を保存する

以上の2通りの画像を保存する方法がありますが、コードラン編集部は1つ目のChromeの拡張機能「Image Downloader」を利用する方法をおすすめします。

ルール決め

上記の2つが揃えば、あとは実際に模写コーディングをしていくだけなのですが、ただ模写をするだけでなくルールを決めましょう。

このルールが結構大事で、筋トレでいう負荷(何キロのバーベルをあげるか)をどれだけかけるのかみたいなものです。←

ルールが厳しければ厳しいほど、上達のスピードが上がります(筋トレでいうとマッチョになります)。

もちろん初心者が負荷をかけすぎるのもよくないので、自分に合ったルールを設定することも重要です。

コードラン編集部が選ぶ「上達する6つのルール」を紹介するので参考にしてみてください。

  1. 文字のコピペはOK
  2. フォントの種類は何でもOK
  3. 少しのズレはOK
  4. 背景画像も入れる
  5. 角丸やフォントの大きさも近いものにする
  6. レスポンシブデザインにも対応する

以上のルールになりますが、文字の入力やフォントも同じにするなど細かい部分は、省いた方が効率的です。

逆にコーディングに関わってくるレスポンシブデザインなどの部分はしっかりと真似しましょう。

これで準備が整いました。さあ実際に模写コーディングしていきましょう!

【ステップ1】HTML・CSSのみの模写コーディング

HTML・CSSの基礎が終わって、復習したいという方におすすめのWebサイトをご用意しました。以下のWebサイトをソースを見ずに模写コーディングできると、HTML・CSSはバッチリだと思います。

facebookログインページ

https://www.facebook.com/
HTML・CSSのみのコーディングにおすすめのWebサイトは、「facebook」のログインページです。こちらは私がHTML・CSSを学習した後に初めて模写コーディングしたWebサイトで、ラジオボタンや、プルダウンなどの機能も付いているのでいい勉強になります。

【ステップ2】HTML・CSS・jQueryを使用した模写コーディング

次はHTML・CSSに加えてjQueryを使用した模写コーディングにおすすめのWebサイトを紹介します。

こちらはLP・コーポレートサイト ・ブログ型の3種類に分けました。Webサイトといってもそれぞれに特徴があるので、大きく分けてこの3種類を模写コーディングしておくことをおすすめします。

LP

< ISARA >

こちらは、マナブさんふるさんなど多くのフリーランスエンジニアが模写コーディングをおすすめしているLPです。コーディングの量が多いので、難易度は少し高いですが、こちらのLPを模写できるとHTML・CSS・jQueryは習得したといってもいいでしょう。最新の技術が盛り込まれているのもおすすめできる点です。

コーポレートサイト

<住友商事>

こちらは住友商事のコーポレートサイトです。オーソドックスなコーポレートサイトになっているので模写コーディングにぴったりです。ヘッダーの追従などの機能も備わっているのもおすすめの点。

大企業のWebサイトは、ユーザーテストや専門家の分析が行われていることが多いので、使いやすく良質なWebサイトになっています。他のコーポレートサイトも模写したいという場合は、大企業のWebサイトを選んで見てください。

ブログ型

< JIN Demo 10 >

こちらは、WordPressの大人気テーマJIN Demo 10です。WordPressの利用を考えている場合は、こちらを模写しておきましょう。動的な部分や、flexboxの使い方を勉強できる点がおすすめです。

JINには他にもシリーズがあり勉強になるので、そちらも模写してみるとかなり腕が上がるでしょう。

本気でWebデザインを学びたいなら【デジタルハリウッド STUDIO by LIG

有名Web制作会社LIGが手がけるWebデザインスクール

まずは無料体験から試してみてください。

オンラインで受講可能
6ヶ月でWebクリエイターになれる
Web制作のプロ集団LIGが運営

もっと模写コーディングで勉強したい方へ

もっと模写コーディングして上達したい!という方におすすめのサイトを紹介します。
おすすめのWebサイトをまとめたサイトなので、この中から模写するものを選んでみてください。

MUUUUU.ORG

Web Design Trends

ランディングページ集めました。

Webデザインが学べるおすすめのオンラインスクール【TECH ACADEMY

もっとガッツリ学びたいと思ったら、スクールに通うのもアリ!

Webデザインコースがおすすめ!
現役エンジニアに教えてもらうことができる
HTML・CSS/javascript/photoshopなど学習可能

 

まずは無料カウンセリングを受けてみる

まとめ

Webサイトの模写コーディングの手順からおすすめサイトを紹介しましたがいかがでしたか?

私がそうだったように初めは何から始めていいのか分からないと思います。ですが、慣れてくると簡単に感じてくるので安心して下さい。

初めのうちは少ししんどいですが、少し踏ん張って今回紹介した手順を参考にWebサイトの模写コーディングをしてみてください。

多くのWebサイトを模写をすることで、必要なスキルを網羅的に習得できますし、どういったWebサイトが質がいいのかなどが分かってきます。上達するには、手を動かしてコードを書くのが一番重要なので、どんどん模写コーディングしていきましょう!

WRITER

学生時代にインドの人材紹介会社にジョインし、新規メディアの立ち上げに従事。日本に帰国後、インターンとしてインバウンド向けサービスを展開するINDIE.incにジョイン、サービスオペレーションを担当。大学卒業後、新卒で大手IT企業に入社し、WEBディレクター業務に従事。その後ケニアにて独立。帰国後はOYO LIFEの日本立ち上げに参画。独特なイラストと共にハンドメイドピアスを販売中。インスタでmAki_earringsと調べてくれる人は神。

オススメの
プログラミングスクール

RUNTEQ

Ruby

ウェブカツ

Webアプリ

ポテパンキャンプ

HTML/CSS/jQuery

TechAcademy(テックアカデミー)

AI・人工知能

TECH::EXPERT(テックエキスパート)

CSS

侍エンジニア塾

HTML/CSS/jQuery

tech boost

HTML/CSS/jQuery

.Pro(ドットプロ)

Python

おすすめの
プログラミングスクール記事一覧

コードランとは
コードランとは、プログラミング初心者や副業/フリーランス向けに、プログラミングスクールの評判や口コミを比較できるサイトです。 実際に受講をした方の生の声を配信することで、プログラミングスクール選びの際に、自分にあったスクールを選べるよう、サポートしています。また、コードラン編集部では、プログラミング学習や、副業/フリーランスなどの働き方、副業の時の見積もりの出し方などなどをわかりやすく伝えております。

コードランの特徴①リアルな受講生の声が見れる!
侍エンジニア塾,Progate(プロゲート),TECH::CAMP(テックキャンプ),CODE MONKEY(コードモンキー),インターネットアカデミーなど、プログラミングスクールに実際に通った方の口コミ情報を掲載しております。 中立・公平性を維持するために弊社では口コミ内容の修正、削除は原則行っておりませんので、他のサイトよりも信頼性が高いと評判です。

コードランの特徴②目的にあったプログラミングスクールが見つかる!
東京や大阪などの場所はもちろん、作りたいサービスや、学びたい言語、転職支援があるか、Webサイトを作ってみたい、iOSアプリを作りたいなど、プログラミングを学ぶ目的からスクールを探します。未経験歓迎か、オンラインでの受講があるかなど、プログラミングスクールごとに特徴も選択できるようになっています。もちろん調べる際には価格や時間も大事な要素になってくるかと思いますので、評判や口コミも是非参考にしつつ、目的別に徹底的に比較をして、自分に合ったスクールを見つけてみてください。

コードランの特徴③現役エンジニアの体験談や学習記事がたくさん!
プログラマーと一言に言っても、使っている言語や働く環境が違えば、気付きのヒントや新たな視点は必ずあるはずです。コードランでは現役エンジニアたちが現場で活躍できるようになるまでのストーリーやスクールのインタビューをご紹介しています。また、 IT業務が未経験でもプログラマーになれるの? スキルアップするには何からはじめればいいの? フリーランスはみんなどうやって稼いでるの?実際のお給料は? など、プログラミングを志すみなさん向けの記事を集めています。 今もし何かの壁にぶち当たり悩んでいるのだとしたら、あなたの不安の解決の糸口が見つかるかもしれません。

コードランはこんな方におすすめ
はじめてスクールに通ってみたい方や、独学で学んでプログラマーを目指している方、スキルアップのために新たにスクールを探している方におすすめです。実際の口コミや評判をもとに、コードランではプログラミングスクールを徹底解剖していますので、あなたに合ったプログラミングの学び方やスクールが必ず見つかるはずです。 コードランはブログランキングサイトに参加しています
コードランは、人気ブログランキングのシステムエンジニアおよびアプリ開発、WordPressなどのカテゴリーでランキングに参加しています。また、にほんブログ村 プログラミング教育IT技術ブログWebエンジニアの各カテゴリーのランキングに参加しています。

*1 当社調べ