web制作を効率的に進めるコツをご存知ですか？
実は、便利なツールやウェブサイトを活用するだけで、作業がぐっと楽になります。
今回は、私が日々のweb制作で重宝している6つのサイトを紹介します。
どれも実用的で、すぐに役に立つはずですのでぜひチェックして、web制作に活かしてみてください。
コーディング単位計算ツール
崩れないコーディングができるようになります！
コーディング単位計算ツールはwebクリエイターのしょうみゆさん作られたサイトで、サイト制作でよく使う単位の計算が一瞬で出来る超便利なサイトです！
私はコーディングでmin関数とvwを組み合わせたものを使用しているので、毎回このサイトにお世話になっています。
使い方も数字を入力するだけでいいのでわかりやすいし、計算後もクリックでコピー出来るのがすごく使いやすい！
また、vwの計算だけではなくて、行間から余白の計算ができたり、px→emの計算もできたりと、めちゃくちゃ便利です！
毎回変わるトップの名言も印象的ですね！
フォントファミリーメーカー
「標準のフォントって何があったっけ…？」がなくなるツールです！
web制作をしていると、AdobeフォントやGoogleフォントなどの「webフォントを使用しない」という場面が多々あります。
こういった時に発生する作業は下記のようなものがあります。
- 標準フォントに何があるか調べる
- 適切なフォントを探す
- コーディング
そんな手順を1つのサイトで出来るのが「フォントファミリーメーカー」というサイトです。
Windows、Mac、iOSに標準搭載されているフォントを一覧で参照することができて、ドラッグアンドドロップでコードまで制作してくれます！
font-familyの指定は長くて書くのが大変なので、コピペ出来るので間違えもなくなります！
HTMLバリデータ
ルールに則ってコーディングできているか1瞬でわかります。
コーディングは実はしっかりとしたルールが存在しています。
例えば初学者さんによくある間違いとしては下記のようなものがあります。
- altタグが空
- sectionの中にhタグが存在しない
- ulの中にli以外のタグが存在
- タグの欠損
これらは実際にコーチングの生徒さんや添削依頼でお受けしたサイトで、よく見られる間違いです。
これらは目視では確認しにくいことがあります。
そんなときに便利なのが、この「HTMLバリデータ」です！
該当箇所にコードを貼り付けることで、一気に添削して、エラー箇所を探し出してくれます。
すべて英語ですが、ChatGPTなどを使用したりすることで効率的に修正できます。
あっしゅくま
使いやすさNo.1の画像圧縮サイトです！
画像圧縮のサイトは沢山ありますが、この「あっしゅくま」が一番使用感が良かったです！
30個まで一気に画像圧縮ができて、高性能な圧縮が魅力です！
圧縮のサイズを5段階で決めることができて、目的にあわせて容量を節約してくれます。
ドラッグアンドドロップだけで使用できて、一括で保存してくれますし、その時に別フォルダとして保存してくれるので、非常に使いやすい！
三角形 CSS ジェネレーター
シンプルで使いやすい三角形作成ツールです。
こちらはCSSプロパティで三角形を作ってくれるサイトです！
9方向の向きと、サイズ、形、色を決めるだけというシンプルな設計で、とても使いやすいので、重宝しています。
CSSで三角形を表現するのは1から作るとかなり考えて実装になりますが、「三角形 CSS ジェネレーター」を使うと下記のたった3ステップで1瞬で作成できてしまいます。
- デザインカンプで三角を見つける
- サイズと色を持ってくる
- コピペ
ピクセルラボブックマークレット
サイトが正しい構造でできているのかが、一瞬でわかります。
HTMLバリデータの部分でも解説しましたが、コーディングには明確なルールがあります。
それに加えて正しく構造を組む必要もあります。
ブックマークレットを使用すると、構造が正しいかどうかを一瞬で調べることができます！
例えば当ブログのある記事の構造を調べるためにブックマークレットを使用すると、以下のように表示されます。
右上の黒い部分がこのサイトのブックマークレットを使用したときのもので、拡大すると以下のようになっています。
このようにしっかり構造化されていて、タイトルも適切であることが確認できます。
これを把握するのに、HTMLで確認するのはとても大変なのですが、ピクセルラボのブックマークレットを使用すると1クリックで把握できます。
使い方は、わずかに2ステップで
①コチラのURLから下記の部分をブックマークにドラッグアンドドロップする
②構造を確認したいサイトで先程追加した、ブックマークを開く
これだけです。
これはかなり便利なので、使わない手はないですね！
まとめ
今回は「web制作でよく使うサイト6選」について解説しました。
よく使うサイトをすぐに出せるようにしておくと効率が上がりますので、非常に大事です。
さらに効率化するためにはスニペット登録がおすすめです！
以下の記事ではスニペット登録について解説していますので、あわせて参考にしてみてください。
コメント