Web制作の勉強はじめたけど、他の人よりスピードが遅くて
それ、ツールで解決できませんか？
Web業界において「速い・遅い」は
効率的なやりかたを知っているかどうか
簡単にいうと「知識ゲー」
知らないと１日かけて
手作業でやらなきゃいけない業務も
ツールを使えば２秒で
終わることがザラにある
本記事では、Web制作業務を
爆速化する拡張機能やツール、
ショートカットキーを紹介します！
知っているだけで
時給単価が大きく上がるはず
＼本記事の内容／
- Web制作に必須の拡張機能５選
- 業務効率化サイト
- 無料デザイン作成ツール
Web制作必須のGoogleChrome拡張機能5選
- ページのキャプチャ撮影｜Fireshot
- パディング・マージン確認｜UI Build Assistant
- Webサイトから色コード取得｜ColorZilla
- ピクセルコーディング｜Perfect Pixcel
- ワンクリックでキャッシュ削除｜Clear Cash
全部使う機能ばかりなので
入れてないのあったら
入れておくのを推奨します！
ページのキャプチャ撮影｜Fireshot
↑これもFireshotで撮影
Webサイトのキャプチャ（スクリーンショット）を撮影するツール
- ページ全体をキャプチャ
- 表示部分だけをキャプチャ
- 選択した範囲だけをキャプチャ
３種類の方法で利用可能
【ctr(command) + shift + S 】
のショートカットキーでもOK
パッディング・マージンを可視化｜UI Build Assistant
Web制作初心者がレイアウトを作成するのに役立つツール
なんか横がずれてる気がするけど、原因不明。。
コーディングしてると、謎のスキマができることありますよね。
「どのパーツのパッディングなのかな？」
そこで役立つのがUI Build Assistant
Web上のパーツが可視化されます
🔻通常のWebサイト
🔻UI Build Assistantを使った状態
鬼便利。
使い方はこちらの動画で解説されてます。
Webサイトから色コード取得｜ColorZilla
Webサイト上の色をクリックするだけで、色コード取得できる
このサイトの色イケてるな！と思ったら
ColorZillaでワンクリック
模写コーディングの際の色取得にも役立ちます！
ピクセルパーフェクトを実現｜Perfect Pixcel
デザイン画像とWebサイトを重ねて、デザインとのズレを確認
コーディング案件によっては、「ピクセルパーフェクトでお願いします」と依頼されることも。
Perfect Pixcelを使えれば、1ピクセルのズレまで確認できます。
ClearCash
キャッシュをワンクリックで削除
「Webサイトを修正したのに、反映されない！！」
原因は98%キャッシュです。
Webサイトの読み込みを高速化するために、ブラウザがCSSや画像情報を記憶している。これをキャッシュといいます。
GoogleChromeの設定からキャッシュ削除もできますが、面倒なのでワンクリックでOKなClearCashを使いましょ。
Web制作の業務効率化に必須のサイト
- 一気に文章校正｜デュフフ
- 画像軽量化・加工｜iloveimg
- コピペで実装｜動くWebデザインアイデア帳
- フォント設定｜font-familyメーカー
- アイコン｜Font Awesome
ブクマ推奨です。
サイト完成後の文字校正｜デュフフ
デザインカンプとサイトのテキストに、相違がないかチェック
誤字脱字があると、こんな感じで表示されます🔻
誤字はWeb制作者の信頼を大きく損ねてしまうので
目視だけでなくツールで校正しましょう
画像軽量化・加工｜iLoveImg
ドラッグ＆ドロップで画像を軽量化
画像は原則として軽量化して利用しましょう
SEOで有利になります。
他にもツールがありますが
- どれだけ軽量化されたか明確
- カンタンな加工も可能
- 速くて使いやすい
という点からiloveimgを愛用しています。
動くWebデザインアイデア帳
初心者でもコピペで「ハンバーガーメニュー」「スライドショー」などが実装できる
コピペしてカスタマイズすれば、自分の思い通りのデザインになります
コーディング効率化のために利用してください
Font-familyメーカー
font-familyの指定が簡単にできる
使いたいフォントをドラッグ＆ドロップで使用できる
とりあえずサイト見てみるのがヨシ(๑•̀ㅂ•́)و✧
Font Awesome(フォントオーサム)
アイコンを簡単に利用できる
Webサイトに利用されているアイコンはFont Awesomeが多いですね。
コードをコピペするだけで利用できるのでカンタンです。
無料で使えるデザインツール
- 自由なデザイン作成｜Figma
- テンプレを使った美しいデザイン｜Canva
有料ツールと同じかそれ以上に、素敵なデザイン制作が可能
ブログのアイキャッチ、Webデザイン、バナー制作、インスタ投稿なんでもござれ
無料版Adobe XD｜Figma
自由なデザインが可能なFigma。
もはや無料のAdobe XDといっても過言ではない。
Webデザインツールですが、バナーやヘッダーの作成にも使えます。
フリーランスWebデザイナーになりたいなら、最初に覚えるべきツールですね
ブロガーやコーダーさんも、これだけは覚えておいて損ないです
勉強するならカイクンさんの動画がオススメ🔻
プロのデザインが使える｜Canva
Canvaはプロが作成した高品質なテンプレートが使用できるのが魅力です
インスタ投稿やブログアイキャッチは０から作成が面倒なので、Canvaのテンプレートを活用します
- Twitterのヘッダー
- Baseの商品画像
- インスタ投稿
- プレゼンの資料
など多様なテンプレがあります。
まとめ
本記事では、Web制作で必須のツールや拡張機能を紹介しました。
ツールを利用するだけで、作業時間が半減というのはよくあること
「知らなかった！」というツールがあれば、ぜひ活用してみてください。
「本記事が役に立った！」という方は、
感想ツイートしていただけるとうれしいです！
＼関連記事／
ブログで役立つ記事デザイン🔻
フリーランス・副業で案件獲得したい方🔻
コメント