Web制作おすすめ!作業効率アップができる便利なツールをご紹介!

記事公開日:2018.05.10

最終更新日:2018.05.11

1,154 PV

Webデザイナーのみなさま、作業中に「この作業を効率的にできたら、もっと早く仕事がこなせるのに・・」というような悩み、一度は思ったことありますよね?悩んでいるあなたに、いくつかの便利ツールをご紹介します!

おすすめのブックマークレット

まずはWeb制作におすすめしたいブックマークレットをいくつかピックアップ。

ブックマークレットとは、通常、ブラウザでお気に入り(ブックマーク)を選ぶと指定のホームページに飛びます。ブックマークレットは、登録URLの代わりにJavaScriptで構成されたプログラムをブックマークすることで、選んだ時に指定のプログラムがページで実行され、早く、簡単に機能が実現できるのです。インストールもお手軽で、コードをブックマークするだけで行うことができます。

画像のalt属性を一発で確認出来るブックマークレット

web制作中に、画像を入れて、altが入っているか、最終チェックが必要ですよね。便利なのが、ご紹介するブックマークレット。
例えば、Yahooのトップのaltを確認しようとすると、画像のような表示になります。少し画面が崩れますが、画像のalt属性を全て検証モードで確認するよりは手軽に確認ができ、web制作の効率がアップしますね。

useful-tools-02

alt属性を確認するブックマークレット。|trustworks

HTMLタグの閉じ忘れを教えてくれるブックマークレット

web制作中に、閉じタグ忘れ、よくありませんか?ご紹介するブックマークレットは、閉じタグが多かったり少なかったりするのを教えてくれます。急なページの崩れが起こったら、まずブックマークレットで確認してみましょう。

HTMLタグの閉じ忘れを教えてくれるブックマークレット

HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]|とっくりばー

フォントの名前を知らせてくれるブックマークレット

サイトでなんのフォントが使われてるんだろう?とweb制作中に気になった方におすすめのブックマークレットです。検証モードでcssを探さなくても、なんのWebフォントが使われているか教えてくれます。

フォントの名前を知らせてくれるブックマークレット

WHATFONT TOOL|Chengyin Liu

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

クロームなどは特に拡張機能でも同じようなものがありますが、よりデザイン的で、より視覚的で見やすいですね。デザインも整っているので、レスポンシブが楽しくなりそうです。

ただし、ブラウザ幅を取得し、viewport(ビューポート)でデバイスサイズ別に表示させているサイトでのみご使用頂けます。アクセス時にパソコンかスマートフォンかを取得して振り分けているサイトにはお使いいただけませんので、お気をつけて。

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

VIEWPORT RESIZER|maltewassermann

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

web制作をしている時に、画像や要素の幅・高さを、いつも検証モードで調べているのですが、パッと確認したい時にはオススメです。背景画像のサイズ取得までできれば最高なのですが、背景の時はブロック要素のプロパティを取得してしまうようなので、まだ検証モードが必要そうですね…。
画像や要素の幅や高さ、プロパティを表示できるブックマークレット
XRAY: look beneath the skin|westciv

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

titleやdescriptionなどのMETA情報をはじめ、サムネイルなど、ページの基本情報を見ることが出来ます。個人的に一番オススメなのは、短縮URLを表示できることですね。長いページの短縮URL発行にいちいちGoogleのサービスページまで飛ばないのは結構便利な気がします。

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

Get URL Info | ウェブページのあらゆる情報を取得、解析する Get URL Info

おすすめのChrome拡張機能

最近だと、標準ブラウザに動作の早いGoogle Chromeをお使いのユーザーも多いのではないでしょうか?Chromeにはたくさんの便利な拡張機能があります。拡張機能のインストール自体はとても簡単で、

chromeウェブストア

から、欲しい拡張機能を選択するだけ。クリックしてインストールすれば、もう使うことができます。web制作がちょっと早くなる、おすすめChrome拡張機能をご紹介します。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

htmlページにファーストデザインなどの画像をうっすらとしたレイヤーで乗せることができるChrome拡張機能です。レイヤーの透明度を変更する箇所や、矢印キーで細かな位置調整ができる箇所もあるので、PSDが分かれていたりしてもパーツごとに重ねてチェックもできますね。デザイン通りにコーディングされているかのチェック以外にもブラウザ上で画像を横に置いて比較したい時にも便利です。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

PerfectPixel by WellDoneCode|Chrome拡張機能

増えすぎたブラウザタブを整理させるChrome拡張機能

個人的な意見ですが、だいぶ画期的です。よく調べ物をしていると、ブラウザにタブが増えすぎますよね?私もよくなります。よく迷子になりますが、下手にタブを消すと、せっかくの参考サイトがURLわからなくなったりするので迷子の中探し回ることがしょっちゅうです。(都度閉じればいいんですけどね)

拡張機能があれば、 OneTabのメニューを押すだけで、1 つのタブにサイトのタイトルとURLを一覧で見やすく表示してくれるのです!いつもタブ迷子になっている方、ぜひインストールしてみてください。

増えすぎたブラウザタブを整理させるChrome拡張機能

OneTab|Chrome拡張機能

1クリックでキャッシュをクリアできるChrome拡張機能

構築中のサイトのキャッシュがきつくて、画像やcssを差し替えるたびにキャッシュをクリアしなくてはいけない・・。もしくは、軽微なサイト修正があり、差し替えたはずのバナー画像が切り替わらない・・。

画像のURLを変えるのがベストですが、ちょっと修正したいだけなのに!というときも根強いキャッシュ。

キャッシュをクリアする方法はご紹介する拡張機能がおすすめ!

最近Chromeのキャッシュクリアが設定から2、3クッションおかないとクリアできなくなって、非常に面倒だと感じていた私には、かなり便利な拡張機能。

一瞬ボタンを押すと、アイコンが緑にふわっと切り替わるのですが、無駄な数秒をコンマ数秒に省けて大変重宝しています。毎度毎度のキャッシュクリアに辟易しているあなたは、ぜひChrome拡張機能を使ってみてください。

1クリックでキャッシュをクリアできるChrome拡張機能

Clear Cache|Chrome拡張機能

初心者向けのツール

web制作者向けのおすすめツールをご紹介してきました。ホームページを作成したことがない、無料で手軽に作りたいという方にはホームページ作成ツールはいかがでしょうか。

Wix

写真などをドロップすることで配置することができるのでおすすめのツールです。コードを書く必要がないので、簡単にホームページを作成することができます。また、テンプレートも沢山ありますので、Webデザインに悩むことも少ないのではないでしょうか。

他にもテンプレートやテーマなどがあるホームページ作成サービスや紹介記事は沢山ありますので、自分にあったツールを見つけてみてください。

おすすめツールのまとめ

ご紹介したおすすめツールで、特に初心者の方は毎日の制作が少しでも早くなり、ストレスフリーな制作に近づけられるといいですね。ぜひお試しください。

このエントリーをはてなブックマークに追加

筆者

A.Yabe

Bigmac制作部に所属。まだまだひよっこなので、早く一人前になれるよう、勉強の日々です。覚えることは沢山ありますが、新しい知識が増えることがとても楽しいなと感じます。ぼんやりと空を見上げていると、気持ちがリフレッシュし、新しいアイデア浮かんだりするので好きです。好きなデザインに出会えると、恋をしたようにドキドキが止まりません。人の心を射止めるようなデザインができるように頑張っていきたいです。よろしくお願いします。

筆者が最近執筆した記事