このブログでは、模写コーディングが無料で出来る！やり方と絶対に便利なツール拡張機能おすすめ8選について解説していきます。
こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。
【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者 (https://coconala.com/users/2367002)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)
上記のような、模写コーディングに関するお悩みにお答えします。
この記事の内容
- 模写コーディングのはじめかた準備編
- 模写コーディングに必要なChrome拡張機能
- 実際の記述方法
本記事では、初心者が挑戦しやすい摸写コーディングを行うときにおすすめのChrome拡張機能を全部で8つ紹介します。HTML/CSSで模写コーディングをするにあたって足踏み状態になっている方にお役立ていただければ幸いです。
目次
模写コーディングのおすすめなやり方
初心者がいきなりコーディングを一から始めるのは難易度が高いため、摸写コーディングに進む人が多いでしょう。しかし、自分のスキルにマッチしていないサイトを摸写しようとすると難しく感じます。
摸写コーディングを楽しみながら、Webサイトを作成したりカスタマイズするスキルを簡単に身に付けることはできないのでしょうか。
摸写コーディングが「難しい」と感じる理由
摸写コーディングは決して難しすぎて初心者が手を出せない勉強法ではありません。難しいと感じている人や挫折しそうな人は、正しい方法を知らないだけかもしれません。
摸写コーディングが「難しい」理由
- 手順が間違っている
- スキルにマッチしていない
- 自力で問題を解決しようとしている
摸写コーディングで何をすればよいのか分からず悩んでいるなら、正しい手順を学べばすぐに取り組めるでしょう。高度なコーディングスキルを必要とするサイトではなく、自分のスキルにマッチしたサイトを見つけてください。
分からないことはネット検索したり、スクールを利用したりして早めに解決するようにおすすめします。
摸写コーディングの正しい手順
コーディングの進め方は人それぞれなので、「こうすればだれでも簡単にできる」という方法はありません。しかし、摸写コーディングに初めて挑戦する人は、手の付け方さえも分からず悩んでしまう場合もあるでしょう。
初心者が始めやすい摸写コーディングの手順を紹介します。
摸写コーディングの手順
- 下記に記載している摸写のルール必須項目４つを確認
- お手本にするサイトのレイアウト構成を確認する
- ヘッダーからHTMLとCSSの摸写コーディングをする
- 細かいパーツのHTMLとCSSのコーディングをする
- 必要な場合はJavaScriptのコーディングをする
- 全体のデザインとコードのチェックをする
では、手順を踏んでいくうえで知っておきたいポイントについて解説していきましょう。
摸写のルール必須項目４つをまずは確認
摸写コーディングをする時は、自分のスキルに合わせてルールを設定しましょう。初心者の人はお手本にしたいサイトと全く同じコーディングができなくても大丈夫なので、少し緩めにルールを決めます。
模写コーディング必須確認項目
- コンテンツ幅の確認
- フォントサイズなど書式の確認
- カラーの確認
- レスポンシブの確認
細かい部分を一致させるよりも、同じようなデザインをコーディングできるようになることが目標です。こだわらずに進みましょう。
初心者の場合、ディベロッパーツールで調べる時間がかかりすぎてしまうようなら、グーグル拡張機能を率先して使っていくほうが楽です。
コンテンツ幅の確認
お手本にしたいサイトがあるけれど、ボタンや余白のサイズが分からずなかなかコーディングが進まないと困っているときにはPage Ruler Reduxを使ってみましょう。
（※Page Ruler Reduxは現在2022年6月時点停止されています。）
昔はこの拡張機能が便利だったのですが今は使えないので、検証画面（デベロッパーツール）からコンテンツ幅を確認しましょう。
フォントサイズなど書式の確認
フォントデザインはサイトのイメージを大きく左右する要素の一つです。気になるフォントがあったらWhatFontという拡張機能を使って調べてみましょう。
初心者のHTMLCSSコーディングにおいてフォントの摸写はそれほど重要ではないかもしれませんが、後々Webフォントについて学ぶ必要が出てきます。真似したいサイトに使われているフォントを自分のサイトで形にすることを目指していると早い段階でスキルアップできます。
カラーの確認
Webページ内のカラーコードを抽出できる拡張機能がColorPick Eyedropperです。「このカラーは何という値で利用できるのだろう」と気になったときにすぐに調べられます。
ColorPick Eyedropperでは、16進数やRGB、hslのカラーコードを表示できます。
お手本にするサイトのレイアウト構成を確認する
お手本にするサイトを見つけたなら、摸写を始める前によく観察しましょう。
デベロッパーツールを確認することがまだ苦手な初心者の方は、以下の記述にある拡張機能を使って確認していくと楽です。
レイアウト構成の確認
- ページ構成
- header、footer、sectionなどの主要ブロック
- スクロール・マウスオーバー・クリックの動き
- レスポンシブデザインの変化
真似したいサイト全体をスクリーンショットにおさめて保存したい、というときに便利な拡張機能がGoFullPageです。
画面内のスクリーンショットを取る方法はいろいろありますが、GoFullPageを使えば画面内に収まっていないサイトの部分を自動スクロールしてキャプチャ出来るという点が魅力的です。
摸写コーディングをしたいのに、お手本にしていたサイトが時間の経過により変更されてしまったり、削除されてしまったりすることがあります。GoFullPageを使って保存しておけば真似ながらコーディング作業をしやすくなりますよ。
HTMLとCSSの摸写コーディングをする
全体の動きやレイアウトを把握できたら、ようやく摸写コーディングに入っていきます。
まず、レイアウト構成をもとに大まかなHTMLコーディングを行いましょう。主要ブロックのみをコーディングしたあとに、html、body、imgなどの全体に適用するCSSをコーディングしてください。
細かいパーツのHTMLとCSSのコーディングをする
全体の大まかなコーディングが完了したら、細かいパーツのコーディングを行いましょう。ヘッダーから下に向かって順番に作業すると初心者でも混乱せずに進められます。
全てコーディングしてからレスポンシブ調整すると、問題が見つかったときに該当箇所を探しづらくなります。初心者は各パーツのコーディング時にレスポンシブも対応させておきましょう。
全体のデザインとコードのチェックをする
摸写コーディングが完了したら、デザインとソースコードがきちんと反映されているか確認しましょう。
チェックポイント
- 同じようなデザインでレイアウトされているか
- スクロール・クリック時の動作
- レスポンシブ時の画面の変化
ソースコードのコーディングはいろいろな方法があるため、お手本サイトから新しい記述方法を学びましょう。摸写コーディングで発見したことは次のコーディングに生かすと次々にスキルアップできます。
模写コーディング初心者に便利なツール！あったらもっと便利なChrome拡張機能
初めてHTMLCSSで模写コーディングに挑戦するときには、すでに存在しているサイトのデザインを真似てコーディングする「摸写コーディング」がおすすめです。では、HTMLCSSを摸写コーディングするにあたり、上記では説明しえいないプラスαで必要と言えるレベルの拡張機能を厳選して紹介します。
「摸写コーディングの精度を高めたい」「お手本サイトとフォントを一致させたい」というときに、初心者とはいえ、できるだけ模写コーディングのスキルアップを図りたいという方におすすめの拡張機能です。
あったらさらに便利4つの拡張機能
- Image Downloader
- 「背景画像を表示」
- Perfect Pixel
- CSS Pepper
それぞれの拡張機能の特徴について解説していきます。
Image Downloader（イメージダウンローダー）
Image Downloaderは、Webページ上の画像を一括ダウンロードできる拡張機能です。1枚ずつダウンロードすることもできますが、参考にしたいウェブページに掲載されている画像が複数枚多いと、一つ一つのダウンロード作業に時間がかかってしまいます。
画像をまとめてダウンロードしたいときや、右クリックで画像保存できないときにはImage Downloaderが非常に便利です。
ただし、収集される画像はimgタグのついているものなので、一部保存できない画像の種類もあることを知っておきましょう。その場合には、次に紹介する「背景画像を表示」という拡張機能が役立ちます。
「背景画像を表示」
お手本にしたいWebページの背景画像を前画面に表示したり、ダウンロードしたいときには「背景画像を表示」という拡張機能を利用できます。
多くの場合、背景画像は「Background-image」としてCSSコーディングされているため、右クリックで画像としてダウンロードできません。その場合にはWebページのソースコードをチェックして画像URLを開く作業が必要ですが、「背景画像を表示」という拡張機能を利用すれば、単純な操作で表示できます。
Perfect Pixel(パーフェクトピクセル)
GoFullPageと合わせて使うと便利な拡張機能がPerfect Pixelです。真似したいサイトから1㎜もずらすことなく再現することを求められることはほとんどありません。しかし、再現度を高めコーディングをスキルアップするうえで、Perfect Pixelは非常に便利な機能です。
Perfect Pixelを使えば、自分がコーディングしているブラウザ表示画面にお手本サイトのキャプチャを重ねて表示できます。大きくズレが目立っている箇所は微調整を行いながら完成度を高められます。
何度か摸写コーディングの経験があり、より精度の高い摸写を行いたいときやピクセルのズレを許さないほどの厳しい実務を任されたときに便利です。
CSS Pepper（CSSペッパー）
さらにあったら便利な＋α拡張機能としておすすめするのは、ウェブサイト内の要素をクリックするだけでCSSを調べられるCSS Pepperです。サイト内の幅や高さ、色、パディング、マージン、フォントを調べられます。
サイト内で気になった要素のデザインがどのようにCSSコーディングされているのかチェックすることができる拡張機能です。中にはjavaScriptやJqueryを使っているものもありますが、CSSコーディングで自作サイトに実現させることができるものも増えています。
複雑なCSS設定が必要なデザインであってもCSS Pepperがあれば、楽にコーディング内容を知ることができるので便利です。
模写コーディングにおすすめな本「コーディングは本でも学んで大丈夫？」
オリジナルサイトを作成したい場合、コーディングについての理解は必須ですが独学派には学習本がおすすめです。初心者は基本を重点的に、実践できる具体的な手法まで修得できる本をチョイスすると良いでしょう。
「HTML&CSSとWebデザインが1冊できちんと身につく本」は、コーディングの基礎から実践までを1冊で習得できるようになっています。付属されているサンプルデータをダウンロードして、自分のコーディングに利用できるのも魅力です。
HTMLやCSSの基本的な記述方法はもちろん、サイト作成でよく使われているレイアウトのパターンやレスポンシブ対応の方法についても本で学べます。
オンラインで学べる模写コーディングおすすめ学習サービス
HTMLとCSSについての知識を習得する方法は豊富にありますが、教材選びで悩んでしまい先に進めない人も少なくありません。費用を抑えながら効率よくコーディングスキルを身に付けられるおすすめのオンライン学習をご紹介します。
実践で書きながら教えてくれるプログラミング学習サービス「プロゲート」
初心者の方には必ずおすすめできるプログラミング学習サービスです。1ヶ月無料で
https://prog-8.com/
パイザとは
初級コースなら無料で学べます。初心者の方には必ずおすすめできる学習サイトになります。
https://paiza.jp/
ユーデミーとは
2009年にアメリカで誕生し、現在はベネッセグループが運営しているオンライン学習プラットフォーム。プログラミング・ビジネススキル・財務会計・マーケティングなど幅広いコンテンツの学習ができます。
5.7万人の講師により、15万以上の講座が公開されているのでオンラインで効率よく学習したい人の強い味方です。
ユーデミーのおすすめ講座
ユーデミーのコンテンツを使ってHTMLやCSSのコーディングスキルを身に付けたいと思われる方におすすめの講座を紹介しましょう。
HTML/CSSのおすすめ講座
- 未経験からプロのWebデザイナーになる！400レッスン以上の完全マスターコース
- [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
- HTML5+CSS3 手を動かしてマスターする WEBデザイン／プログラミング動画講座
一からHTMLとCSSを学んで、Webサイトの制作を行いたい方から、実際に簡単なWebページを作成したい方、コース履修終了後にWeb業界で戸惑うことなくスキルを活かせるようになりたい方などに適した講座が展開されています。
初心者は便利なツール拡張機能を使って模写コーディングまとめ
WordPressを利用するにあたってChrome拡張機能は非常に便利です。コーディング初心者でも、拡張機能を役立てて、既存のサイトを真似た素敵なウェブページを作ることができます。拡張機能には今回紹介したもの以外にも色々な機能がありますので、コーディングのスキルアップにぜひ役立ててください。
です。主にホー){kind=link}