Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

【知らずに大損】模写コーディングに役立つツール/アイテム5選

プログラミング

本記事の対象者

「プログラミングでWeb制作を学習中。
まずはProgateを終えて、サイトの模写コーディングに挑戦したいところ。
始める前に、便利なツールとかあれば知っておきたい!
こういった方向けです。

この記事を書いている僕も、現在Web制作の勉強中です。

僕は初の制作案件をProgateが終わった段階で受けてしまい、
無駄に大量のコーディングを行い、体力・精神を消耗しまくりました。

同じ失敗をして欲しくないので、
「もっと早く知りたかった」と心から思った効率化ツール/アイテムを5つ紹介します。

それぞれの役割と、導入までの手順を説明します。

Full page screen capture + Perfect pixel

1つ目は、2つで1セットになりますが、
模写する際、制作物とオリジナルサイトのズレを確認するためのツールです。
(どちらもChromeアドオン)

Full page screen captureでオリジナルサイトを画像としてキャプチャし、
Perfect pixelで、キャプチャ画像を自分の制作物を重ね合わせて、
ズレを簡単に特定できます。

Full page screen capture

オリジナルサイトのページをキャプチャするためのツールです。
Google chromeのアドオンですので、
chromeウェブストアからインストールできます。(無料)
インストールするとchromeの画面右上にカメラのマークが表示されるので、
クリックすると表示中ページが1枚の画像としてキャプチャされます。
例に、本ブログのトップページをキャプチャした画像が以下です。

Perfect pixel

キャプチャ画像と制作サイトを重ね合わせるツールです。
こちらもchromeウェブストアから入手できます。(無料)
インストールすると、chromeの画面右上にピンク色の四角いアイコンができます。
クリックすると、右上に以下の画面が現れます。

「ここをクリック」エリアをクリックすると画像選択画面になるので、
Full page screen captureでキャプチャした画像を選択します。
すると、表示中のページに、画像を重ねてくれます。

上記の例では、サイドバーのところがブレたような感じになってますよね。
これがズレている箇所です。
その他の場所はきれいに写っているので、ズレがないということです。
一目瞭然ですね。

実案件のコーディングでは、
1ピクセル単位で合わせることが要求されることもあるようです。
練習段階で導入して操作に慣れておくべきだと思います。
※XDやPhotoshopのカンプデータを模写する場合も、
 それぞれ画像キャプチャはできるので、Perfect pixelが役立ちます。

What Font

オリジナルサイトのフォント情報をスピーディに抜き出すためのツールです。
こちらもchromeのアドオンなので、
Chromeウェブストアで入手してください。(無料)

通常、フォント情報を確認するにはデベロップメントツールから
CSSを確認しますが、What Fontを使うとめっちゃ簡単になります。
導入手順を説明します。

What Fontがインストールできたら、
Chromeの画面右上に「f?」のアイコンが追加されます。
アイコンをクリックしてWhat fontを起動後
画面上の調べたいフォントをクリックすると、

黒い付箋が貼り付けられ、フォントの情報が記載されています。
拡大すると以下のようになっています。

いちいちデベロップメントツールを開かなくても、
2クリックでフォント情報にたどり着けます。
閉じる際は、再度右上の「f?」アイコンをクリックで完了。
とてもシンプルな作り。

Sass

続いてはSassを紹介します。
SassとはCSSのプリプロセッサと呼ばれる言語で、
一言でいうと、CSSを簡単に、短く書けるようになる言語です。

すでに使っている方はスルーで良いですが、
僕のように、ProgateでHTML/CSS → 模写制作で考えてる人は
Sassを知らないパターンが殆どかと思います。

「新しい言語の勉強はしんどい。。後でも良いのでは?」
僕も初めそう思ってましたが、騙されたと思って、
模写コーディングの前にProgateのSassコースを受講してください。
100%やってよかったって思います。
(たったの1.5hで終わるコースです)
Sassは、新しい言語というよりは「CSSをより簡単にしたもの」です。
難しい概念も無くてめっちゃ簡単。

僕はSassを知らずに実案件を受け、CSSを約1800行書きましたが、
Sassを使っていれば半分以下の記述量に抑えれたと思います。
実案件の後にSassを知ったとき「こんなんあるかい!!先に言ってや!!」
と発狂した事を覚えています。

SassはWeb制作業界ではほぼ全員使ってると言われるくらい一般的なようです。
もちろん、本で学ぶのもOK。

僕は始めにProgateで学び、更に深めたいと思い、
アマゾンで一番評価が高い本で勉強しました。


Live server

HTML/CSS/JavaScriptのブラウザ表示を自動更新させるツールです。
表示を確認するのに、いちいちブラウザの更新ボタン押すの面倒くさいですよね。
Live serverを使えば、リアルタイムで入力結果を自動更新してくれます。

導入手順を説明します。

Live serverはVS codeのプラグインツールです。
VS codeの画面の左側からプラグインのメニューを選んで、

検索窓に「Live server」と入れれば出てきます。

インストールすると、VS codeの画面右下に「Go Live」ボタンが追加されます。
確認したいhtmlファイルを開いた状態で「Go Live」ボタンを押すと、
自動的にブラウザが起動され、リアルタイム更新が始まります。

リアルタイム更新の様子はこんな感じ。(以下動画)

書いたら、すぐに右側のブラウザに反映されます。
ファイルが保存されたタイミングで表示更新される仕組みですが、
VS codeでファイルの自動保存をonにしておけば、
リアルタイム更新システムの完成です。

モニター

コーディング作業が流れに乗ってくると、こう思うはずです。
「画面切り替え面倒くせえ」
そう、モニターは最低2台あったほうが良いです。
模写コーディングをしていると、画面の行き来が激しいです。

  • コーディング画面(HTML,CSS,JavaScript)
  • 表示確認用のブラウザ画面(PC, スマホ表示)
  • 分からない時にググる用のブラウザ画面


表示エリアを増やして画面切り替えの回数を減らすのに、
追加モニターが役立ちます。

安くない買い物なので強引には進められませんが、
僕は買って大正解でした。
最初は、将来増やせばいいか感覚でMacBook1台で頑張っていましたが、
将来買うなら今買っても同じだなと気づいて買いました。

実際にモニターを追加すると、めちゃくちゃストレス減ります。
画面切り替えのスワイプ回数が1日に数百回レベルで減らせるので、
手の体力にも影響するかと思います。

僕が買ったモニターを紹介します。
https://www.amazon.co.jp/%E3%80%90Amazon-co-jp%E9%99%90%E5%AE%9A%E3%80%91Dell-%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4-SE2416H-23-8%E3%82%A4%E3%83%B3%E3%83%81-IPS%E9%9D%9E%E5%85%89%E6%B2%A2/dp/B017SMDGAI/ref=asc_df_B017SMDGAI/?tag=jpgo-22&linkCode=df0&hvadid=265896822920&hvpos=&hvnetw=g&hvrand=2434727233314658944&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009326&hvtargid=pla-445193225412&psc=1&th=1&psc=1

  • Web制作に必要な最低限の機能
  • ノートPCの隣においても違和感のないサイズ感
  • コスパ重視


この条件で絞ってくと、これ1択でした。
1週間使ってみて、めちゃくちゃ満足してます。
(コスパ重視モデルみたいですが、普通に映像綺麗です。)
USB-CのみのMacの場合は、HDMIの変換ケーブルが必要です。
僕が買ったものは以下です。

効率化して無駄な体力消耗を抑えよう

僕はこれらを知らずにホームページ制作の案件を受けてしまい、
体力と気力を消耗しまくりました。
僕と同じ目に遭わないように、
先にどんどん効率化アイテム揃えちゃってください!

それでは、今回は以上です。

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ