こんにちは。Webデザイナーの増田右京です。
Web制作をしていて、Chrome拡張機能を使わないのは非常にもったいないです。
ちなみに僕はWeb制作を始めてしばらく経ってからChrome拡張の存在を知りました。「便利なのを見つけた！」と、同時に「もっと早く存在を知りたかった…。」と思ったのを覚えています。
Chrome拡張機能の存在を知ってから、無駄な作業が減り作業効率が少し上がったと感じてます。
この記事は、
- 駆け出しのWebコーダー、デザイナー
- 作業の効率化を図るWebコーダー
に向けて書いています。
目次
【個人的必須】Chrome拡張機能7つ
今回は僕が実際仕事の時に使っているChrome拡張機能を厳選して7つご紹介します。
1.Google翻訳
このGoogle拡張機能があれば、ページ全て一気に翻訳できます。もちろん分からないところだけ翻訳するのも可能です。
分からないことがあって調べ物をしている時や、海外のサービスを使う時に突如現れるのが…そう、英語ページですね。結構前はいちいち新しいタブを開いてGoogle翻訳を開き翻訳していたのですが、今思えばかなり時間の無駄でした。
2.ato-ichinen
検索結果を”1年以内”など指定する拡張機能。
こちらはGoogle検索の時に使う拡張機能です。WebコーダーやWebデザインの世界は流れが早いもので、その時最新でも1年経ったらもう古かったりします。検索しても古い情報しか出てこない時に使うのがこのato-ichinenです。
これを使えば検索結果を、
- 1年以内
- 1ヶ月以内
- 1週間以内
- 24時間以内
- 1時間以内
と細かく指定することができるので、古い情報に振り回されずに最新の情報を検索することができます。
3.Clear Cache
これを使えば1クリックでキャッシュクリアできます。
コーディングをしている時に、「あれ？CSSが反映されないぞ…。」ってなったらまず疑うのはキャッシュですね。Chromeの設定画面→観覧履歴→キャッシュの削除とできるにはできるのですが、非常に面倒なので設定しておきましょう。
Clean MasterというChrome拡張機能も人気があったので使ってみたのですが、キャッシュクリアまでに2クリック必要です。UIも綺麗でこっちの方がオシャレなのですが、要はキャッシュがクリアできれば良いので1クリックで削除できる方をオススメします。
4.WhatRuns
サイトが何のツールやスクリプト、プラグインで作られているか1クリックで分かる拡張機能
参考のWebサイトをみている時に、「このサイト何で作られてるんだろう？WordPressテーマかな？」みたいなことが結構あると思うのですが、実は1クリックでわかります。
「うわーやっぱthree.jsかー！俺には無理！」的なこともしばしば。
WordPressなら使用しているプラグインまで分かるという優れもの。
5.CSS Brio
CSSアニメーションをブラウザ上で試せる拡張機能
使い方としては、ページ内のid/classを記述してアニメーションを選択すると、入力した要素が動くといった感じです。
自分で作ったページはもちろん、普通に公開されているサイトにも自分で動きを加えられるのが遊びでやると結構楽しいです。もちろん実務で「ここもう少しだけ動かしたいな。」って時に試験的に色々な動きを確認することができるのでオススメです。
6.CSS Peeper
直感的にWebデザインに必要な情報を調べることができるツール
Google検証ツールはできることが多すぎて使いこなせないって人にもオススメです。カラーコードやフォント、paddingやmarginなどを一発で確認できます。UIも綺麗でみやすいです。
7.HTMLエラーチェッカー
HTMLの記述、構文の間違いによるエラーを確認します。
意外と編集中に閉じタグとかを間違って消してしまった時とかに便利です。たまに使うのでいざと言う時に入れておいたほうが良いです。
【番外編】個人的オススメChromeテーマ3つ
必須ではないですが、あればすごく良いなと思うGoogleテーマを番外編としてご紹介します。
GoogleテーマとはGoogleの検索画面を変えることのできる機能です。デフォルトでもシンプルで格好いいですが、ちょっと人と違うのが良いとかオシャレにしたいという方は良いです。
1.Muzli 2
Googleを開くたびにお洒落なイラストや写真、デザインが表示されて感性が刺激されます。
特にデザイナーやイラストレーターの方にオススメのGoogleテーマです。
2.Momentum
時間帯に合わせて綺麗な風景がランダムに表示されます。しかもTodo管理もできると言う優れもの。
クリエイティブの合間に綺麗な風景を見れば心はとても癒されます。これで窓が無い事務所に何日こもってても快適に作業できますね。
3.Just Black
シンプルなブラックのGoogle公式テーマ
目にも優しいしやっぱりオシャレ。タブの部分も全て黒orグレーになるので見た目の印象が結構変わります。シンプルにオススメ。
必要に応じて自分専用のChromeに
今回ご紹介したのはChrome拡張機能のほんの一部でしか無いです。
もちろん使う人によって用途が違うので人によっては必要無いものもあるかもしれません。逆に人によってはもっと便利な拡張機能があるかと思います。
ただ沢山入れても使わなければなんの意味も無いので、自分の必要だと感じたものを入れてみましょう。気がつけば自分専用のChromeになっているはずです。
もっと便利な機能があるよーって人は是非僕にも教えていただきたいです。Chrome拡張機能でみんなで快適なクリエイティブライフにしましょう。