【Chrome拡張機能】模写コーディングのやり方が分からない方へ…必須な拡張機能5選＋α
前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。
▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。
ただそれでも初挑戦するような方はやり方が分からないという人も多いと思います。
今回は模写コーディングをする上で役に立つ、必須ともいえるGoogleChromeの拡張機能を紹介させて頂きます。
これから模写コーディングに初挑戦するという方、行き詰ってる方のお役に立てれば幸いです。
ではやっていきましょう。
模写コーディング必須Chrome拡張機能5つ＋α
今回は必須レベルのものを5つ紹介いたします。
- Image Downloader(イメージダウンローダー)
- 背景画像を表示
- ColorPick Eyedropper(カラーピックアイドロッパー)
- Page Ruler Redux(ページルーラーリダックス)
- GoFullPage(ゴーフルページ)
さらに＋αとして、あったら便利なものをいくつかご紹介します。
- Perfect Pixel(パーフェクトピクセル)
- WhatFont(ワットフォント)
模写に必須！まず入れる拡張機能5選
必須レベルの拡張機能から、それぞれどういった機能か紹介していきます。
画像収集に「Image Downloader」
こちらはサイトの画像を収集して一括保存する拡張機能です。
ただ、imgタグから収集するので、背景画像など一部画像が保存できない事があります。
そういった場合には後ほど紹介「背景画像を表示」の拡張機能を利用してください。
模写コーディングの始めの画像素材集めは、この２つを合わせて使って模写を効率化させましょう。
「背景画像を表示」
日本語の名前の通り「背景画像を表示」する拡張機能。
HTMLのimgタグではなく、CSSのbackground-imageプロパティとして表示されている画像のみを別タブで表示してくれます。
imgタグの要素は右クリックから「名前を付けて画像を保存」や、一つ目に紹介した「Image Downloader」の拡張機能で手軽に保存できます。
ただ背景画像は同じ方法が使えません。
そこでこの拡張機能を使うと、画像ファイルのみを表示させて右クリックから「名前を付けて画像を保存」が出来るようになります。
背景画像がふんだんに使われたサイトの模写には必須といえるでしょう。
▼拡張機能の導入は以下リンクから「Chromeへ追加」をクリック。
カラーコードを抽出「ColorPick Eyedropper」
サイトの一部分の色のカラーコードを取り出すことが出来るカラーピッカーです。
指定されたカラーコードではなく、Photoshopなどの描画ツールのスポイト機能が使えるイメージです。
16進数のコードとRGBのどちらも抽出できて、便利な拡張機能です。
定規で大きさ・長さを計測「Page Ruler Redux」
Rulerとは物差し・定規のこと。サイト内のどこでもドラッグアンドドロップでサイズを計測できます。
余白の調整や様々な要素のサイズを把握して模写するのに必須の拡張機能といえるでしょう。
サイト全体を画像キャプチャ「GoFullPage - Full Page Screen Capture」
サイト全体上から下までをキャプチャーできる優れものです。
画面内に収まらない部分まで自動でスクロールしてキャプチャしてくれるので模写サイトを画像化して保存することが出来ます。
模写するサイトも時間が経過して内容が変更されたり、急に表示されなくなったりすることが起こりうるので、一度保存しておくとよいでしょう。
また後程＋αとして紹介する「Perfect Pixel」の拡張機能で、ブラウザの表示に画像をオーバーレイとして重ねて表示出来るので、模写と元サイトを重ねて見比べるという使い方も出来ます。
模写以外でも参考サイトの収集など重宝する機能なので是非追加しておきましょう。
実際に拡張機能を使っている場面のキャプチャ
参考までに、実際にColor Picker EyedroperとPage Ruler Reduxを使っている場面のGIFアニメーションを掲載しておきます。
これは模写コーディングではなく、デザインの画像データをブラウザで開いて拡張機能を使って調べてるところです。
模写でも使い方は同じなのでご参考頂けるかと思います。
▼コーディング中の思考フローを解説した以下記事内のシチュエーションから抜粋。
あったら便利な拡張機能＋α
画像をオーバーレイ「PerfectPixel by WellDoneCode (pixel perfect)」
先ほどGoFullPageの項で少しご紹介してる通り、ブラウザの表示に画像を半透明で重ねて表示できる拡張機能です。
GoFullPageで模写元サイトをキャプチャし、模写の際にプレビューに画像を重ねて表示することで、ピクセル単位で調整した模写が可能です。
ただし個人的には模写でそこまでの精度は求めなくてもよいかと思うので、何度か模写をしたことがある方など、よりスキルアップを求める方におすすめです。
実際の業務でもデザインデータにピクセルのズレも許されない事があったりします。
そういった場合に向けての特訓として導入するといいと思います。
フォントを調べる「WhatFont」
「WhatFont」を使うと部分部分で使われているフォントが何か、文字の太さやスタイルも含めて調べることが出来ます。
これは必須レベルにかなり近い拡張機能だと思います。
ただし、初心者の初挑戦の模写ではフォントを一致させることは後回しにしてもいいかなと考えています。
というのも、近年ウェブフォントが用いられるケースが増えているからです。
そうすると模写を実践する前にウェブフォントについて学ぶ必要が出てきて、模写が形になるのが遅くなるからです。
まずは形にするということを目指すと、やっていてテンションも上がるのでおすすめです。
模写の最終工程などでは是非導入してフォントも模写していってください。
chrome.google.com
Chromeの拡張機能は非常に便利です
今回紹介させて頂いた拡張機能以外にも、色々な拡張機能があります。
模写におすすめなもの以外にも、実際の業務で役立つもの、調べものに向くもの、Webサービスと連携したものなど非常に多く存在します。
▼多すぎるので定番のChrome拡張機能を厳選し紹介した書籍もあります。
模写にはまず今回紹介した機能と、デベロッパーツールを使いこなすことが重要になってくると思います。
今回紹介したような機能もデベロッパーツールをよく見ていけば、フォントや色、背景画像など調べられるものがほとんどです。
コーディングしていく中ではデベロッパーツールの使い慣れる必要があるでしょう。
模写コーディングの導入としては拡張機能を使った方が非常に早く便利だと思いますので是非活用して頂ければと思います。
最後までお読みいただきありがとうございました！
▼模写コーディングにはHTML/CSSの基礎が重要です。まずは基礎を固めましょう。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
できるポケット Web制作必携 HTML\u0026CSS全事典 改訂版 HTML Living Standard \u0026 CSS3\/4対応 できるポケットシリーズ
▼Chrome拡張機能は誰でも作って登録出来ます。実は私も登録していたり、、。興味ある方はKindleで書籍もあるのでご参考あれ。
Chrome拡張の作り方
