Web制作の勉強はじめたけど、他の人よりスピードが遅くて
それ、ツールで解決できませんか?
Web業界において「速い・遅い」は
効率的なやりかたを知っているかどうか
簡単にいうと「知識ゲー」
知らないと1日かけて
手作業でやらなきゃいけない業務も
ツールを使えば2秒で
終わることがザラにある
本記事では、Web制作業務を
爆速化する拡張機能やツール、
ショートカットキーを紹介します!
知っているだけで
時給単価が大きく上がるはず
\本記事の内容/
- Web制作に必須の拡張機能5選
- 業務効率化サイト
- 無料デザイン作成ツール
Web制作必須のGoogleChrome拡張機能5選
- ページのキャプチャ撮影|Fireshot
- パディング・マージン確認|UI Build Assistant
- Webサイトから色コード取得|ColorZilla
- ピクセルコーディング|Perfect Pixcel
- ワンクリックでキャッシュ削除|Clear Cash
全部使う機能ばかりなので
入れてないのあったら
入れておくのを推奨します!
ページのキャプチャ撮影|Fireshot
↑これもFireshotで撮影
Webサイトのキャプチャ(スクリーンショット)を撮影するツール
- ページ全体をキャプチャ
- 表示部分だけをキャプチャ
- 選択した範囲だけをキャプチャ
3種類の方法で利用可能
【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はプロが作成した高品質なテンプレートが使用できるのが魅力です
インスタ投稿やブログアイキャッチは0から作成が面倒なので、Canvaのテンプレートを活用します
- Twitterのヘッダー
- Baseの商品画像
- インスタ投稿
- プレゼンの資料
など多様なテンプレがあります。
まとめ
本記事では、Web制作で必須のツールや拡張機能を紹介しました。
ツールを利用するだけで、作業時間が半減というのはよくあること
「知らなかった!」というツールがあれば、ぜひ活用してみてください。
「本記事が役に立った!」という方は、
感想ツイートしていただけるとうれしいです!
\関連記事/
ブログで役立つ記事デザイン🔻
フリーランス・副業で案件獲得したい方🔻
コメント