みったに

Webサイトを模写コーディングするときのツールまとめ【効率を上げよう】

CODE HTML CSS

こんにちは!みったに(@mittani_s)です。
先日に、下記のツイートをしました。

Webサイトを模写するときのツールについてまとめたのですが、わりと反響があったので、ブログにまとめることにしました。

現在の僕は、Web制作のフリーランスでして、模写をするときに、どういったツールを使えばよいかわからない方や、効率良くサイトを模写したい方の助けになったら嬉しいです。

もくじ

  • Webサイトを模写コーディングするときに使うツール
  • Webサイト模写でツールを使って効率よく進める方法

それでは、書いていきます。

Webサイトを模写コーディングするときに使うツール

Webサイトを模写コーディングするときに使うツール
Webサイトを模写するときに便利なツールをジャンル別に紹介していきます。

  • エディタ周りのツール
  • ブラウザ周りのツール
  • 確認するときのツール

分類としては、上記の通りです。順番に解説していきます。

エディタ周りのツール

エディタはVSCodeがおすすめです。とはいえ、既に愛用のエディタがあれば、それでも良いかなと思います。なお、VSCodeなら、使用している人も多く、検索したときの日本語の情報も豊富なので、調べつつ進める場合に進めやすいかなと思ったので、紹介してみました。

おすすめの拡張機能

模写する際に、おすすめなVSCodeの拡張機能は下記の通り。

  • LiveServer
  • Live Sass Compiler
  • Auto Rename Tag
  • Bracket Pair Colorizer

このあたりはおすすめです。
上記の他にも、VSCodeに入れておくと便利な拡張機能があり、下記にまとめました。模写に限らず、コーディングをする際には、わりと必須かなと思います。

Visual Studio Codeのおすすめ拡張機能【これだけで生産性が上がる】
VSCodeのおすすめな拡張機能知りたい人「VSCodeに拡張機能を入れたいけど、種類が多くて何を入れたら良いか迷う。作業効率を上げて、快適にプログラミングするために、必須の拡張機能を知りたい」 こういった疑問に答えます......

エディタの設定

僕はエディタを下記の設定にしています。

  • フォント:Ricty Diminished
  • テーマ:Monokai

このあたりは、完全に好みの問題ですが、フォントは下記の感じで、全角スペースを視覚化することが出来るので、全角スペースで誤動作することが減ります。

こんな感じですね。わりと見やすいです。

ブラウザ周りのツール

ブラウザはChromeを使用します。模写におすすめの拡張機能は、冒頭のツイートの通りです。下記に、再度まとめてみます。

上記の通り。順番に解説してみます。

長さを測る:Page Ruler

Page Ruler Redux
A Web DeveloperDesigner ruler to get perfect pixel dimensions and positioning to measure elements on any web page. 💻

要素の長さを図る際に使用します。widthやheightを指定する際の参考になります。

色を調べる:ColorPick

ColorPick Eyedropper
A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

要素のカラーコードを調べるときに使用します。
色を調べる
こういった感じで、カラーコードを見ることができます。きれいなサイトを見つけたときに、どんな色を使っているのか気になったときとかにも使えますね。

画像を取得:Image Downloader

Image Downloader
Browse and download images on a web page.

サイトで使用している画像を取得するときに使用します。取得したい画像を選択して、まとめて保存することができます。

スマホ確認:Responsive Viewer

Responsive Viewer
Show multiple screens once, Responsive design tester

サイズが異なるデバイスでの見え方を確認するときに、一覧として、一気に確認することができます。
スマホ確認
こういった感じで、まとめて確認できます。検証ツールでサイズ変更しつつ見るのもありですが、こちらを使うと一気に見ることができたり、比較がしやすいというメリットもあります。

フォント確認:What Font

WhatFont
The easiest way to identify fonts on web pages.

サイトで使われているフォントを確認することができます。
フォント確認
確認したい文字をクリックすると、こういった感じで表示されるので、フォントやサイズ、太さや色など、文字に関する情報を確認することができます。

確認するときのツール

作成したページもツールでチェックするとスムーズです。いくつか紹介しておきます。

Prettier – Code formatter

Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier

こちらはVSCodeに拡張機能があるので、そちらを使用すると便利です。保存したときに、自動でコードを整えてくれます。

dirtyMarkup

dirtyMarkupというサイトを使うのもありかなと思います。

こちらにコードをコピペすると、誤り部分に赤い印が付きます。なので、コピペするだけで、ミスを見つけられます。「clean」をクリックすると、自動でコードを整えてくれます。

Webサイト模写でツールを使って効率よく進める方法

Webサイト模写でツールを使って効率よく進める方法
ツールを上手く使って、効率良く模写を進めるなら、下記の感じが良いかなと思います。

  • ブラウザとエディタを横に並べる
  • ブラウザは常に検証ツールを開く
  • 細かい調整はブラウザに直接書く
  • エディタは画面分割しておくと楽

こういった感じです。1つずつ解説していきます。

ブラウザとエディタを横に並べる

ブラウザとエディタは切り替えずに、一つの画面に並べて表示すると良いかなと思います。イメージとしては、下記の感じ。
ブラウザとエディタを横に並べる
こうするとコードを書きつつ、確認できるので、スムーズです。

ブラウザは常に検証ツールを開く

ブラウザでは、常に検証ツールを開いておくと良いです。理由は、すぐに確認できるから。どこの要素が、どのコードなのかが、すぐにわかるので、余分な作業が減ります。

ちょっとした作業でも、積み重なると大きな作業時間になったりしますからね。

細かい調整はブラウザに直接書く

CSSの細かい調整はブラウザに直接書いてしまった方が、簡単だったりします。
細かい調整はブラウザに直接書く
上記の感じでCSSを直接変えると、そのまま反映されるので、ここで調整しつつ、まとめてエディタに貼り付けると、簡単です。

エディタは画面分割しておくと楽

コードの複数の箇所を同時に書き換えるときは、エディタを分割すると、見やすいです。例えば、下記の感じです。
エディタは画面分割しておくと楽
片方が画面では、上の方の行を変えて、もう片方の画面では、下の方の行のコードを変えるときなどは、同時に変更できて便利です。

分割方法は、下記あたりをどうぞ。

Visual Studio Codeでエディター画面を分割する方法【ショートカットキーあり】
こんにちは、みったにです。 この記事を書いている僕は、Visual Studio Code(VSCode)を使用してプログラミングしています。 今回は備忘録の意味も含めて、エディタ画面を分割表示する方法を紹介します。 V......

模写コーディングするときの注意点

おそらく、この記事を読んでいるあなたは、コーディングを始めてまだ間もないかなと思います。そこで、結論として、下記を意識すると良いかなと思います。

  • 時間を制限して進める
  • 完璧を、求めすぎない
  • とにかく、数をこなす

こういった感じで、ちょっと根性論っぽいところもありますが、コーディングは、ある程度のところまでは、慣れの部分が必要かなと思ったりします。

連立方程式を解くのに、四則演算は必須の知識ですよね。そして、その四則演算はわりと力技で覚えたと思います。そのあたりの理屈に近いかなと思います。

CSSがうまく効かないとき

CSSを書いているのに、なぜか反映されないというときがありますよね。そういった場合の対策を下記にまとめましたので、お困りでしたら併せてどうぞ。

CSSが効かないときの原因5パターン【調べ方のコツとミスしない対策】
こんにちは、みったにです。 「CSSが効かない」ということでお悩みではないでしょうか? CSSを書いているのに、全く効かない。どうやって確認したら良いのだろう。どこが間違っているのかわからず、何から調べたら良いのかがわか......

ブレイクポイントについて

プレイクポイントは「これが正解」というのはなく、サイトのデザインとかによって変わったりします。困ったら、下記辺りで良いかなと思います。

  • パソコン:768px〜
  • スマホ:〜767px

場合によっては、パソコンとスマホの間にタブレットがあったり、スマホが2つに分かれて細かったりとかあるかもですが、模写なのでそこまで気にしなくても良いかなと思います。ひとまず、スマホのデザインもコーディング出来ればOKと割り切ってやってみましょう。

まとめ

模写は、今まで学習してきたことをアウトプット出来る学習方法なので、ある程度のインプットできたら、早めにやってしまうのが近道かもです。

というわけで、以上となります。
それでは、また!