アイコンをクリックすると画面の上と左端に目盛り(グリッド)が現れて、グリッド部分をクリックしてドラッグすると、線が引けます。これがあれば「ボタンに対して文字がずれていないか」だとか「リストがきれいに並んでいるか」だとかを確認しやすくなります。かっこいいサイトがどんなレイアウトになっているかをチェックするのにも使えますね。:案件によってはあらかじめ文字コードが指定されていて、普段の環境とは違う文字コードでコーディングしないといけないときがあります。そんなときに便利なのがテキストエンコーディングです。ワンクリックで指定した文字コードに変換してくれます。Eyedropperです。アイコンをクリックするとスポイトが出てきて、クリックしたところの色をカラーコードで表示してくれます。カラーコードで出るのが何がいいって言いますと、グラデーションや透明度を変えることで色を表現しているところでも、それに近いカラーコードで出してくれるので、コーディングやデザインをするときにやりやすいということでございます。クリックした部分周辺を拡大してくれるので、狙った部分を逃しません。Eyedropperのフォント版がWhatFontです。ワンクリックで使われているフォントの種類が丸わかり。文字の大きさや色、line-heightなど、フォントに関するプロパティだって丸裸でございます。コーディングよりはデザインを検討する段階で役立つ拡張機能かもしれません。Insightsです。項目ごとに分析してくれます。最適化されていない部分で重要なものから順に表示してくれるので、効率よくサイトのパフォーマンスを修正することができます。:「ホバーしたときの動きが見たい」「ヘッダーが追従したときの様子は?」なんてときに便利なのがScreencastifyです。ワンクリックで動画キャプチャが記録できて、タブ内の音声を入れる/入れないなど細かい設定もできるので、解説動画などでも重宝しそうですね。使用する際にGoogleアカウントへのログインが必要になりますが、シェアも簡単にできて、こうしてサイトに貼り付けるのも簡単なので入れておいて損はしないはずです...!Screencastifyでブラウザの動きを記録してみるフォームの自動入力ならAutofillこれはもっと早く知っておきたかった・・・・。:フォームのテストで名前やらメールアドレスやら入力しないといけないときがありますよね。何度も何度も同じ項目を入れるのって面倒です。そんなときに便利なのがこのAutofillです。URLを指定し、そこで入力しないといけない項目を一度設定しておけば、フォーム入力の手間が省けちゃいます。使い方は簡単で、1まず普通にフォームに項目を入力します。Rules」をクリックすれば完了です。:機能がどうこう、というものではありませんが、日々の作業でブラウザのタブを開くことは多いですよね。そんな時に気持ちが和みそうな拡張機能をご紹介しておきます。Catタブを開くと上記の画像のような、かわいい猫のイラストがランダムで出てきます。地味に癒されます・・・!また、カーソルをあてるとぶるぶる震えるのも可愛さポイントですね。色遣いもかわいいので、デザインの参考にもなるかもしれません。ちなみに課金すると猫以外の動物も選べます。個人的にはペンギンが気になるところです。Culture2019年10月1日はこんな絵。「Webサイト上で世界中の名画を鑑賞できるようにしよう!」というGoogleアートプロジェクトの取り組みのひとつとして提供されている機能です。こちらは日替わりで世界中の名画からひとつを鑑賞することができます。右下のアイコンをクリックすると閲覧上位のサイトへのリンクが出てくるあたり、さすがGoogleといったところでしょうか。筆者も使っているのですが、風景画が多めで、大きいディスプレイで開くと絵の中の世界に引き込まれそうです。Motivationアインシュタインの名言「想像力とは遊び心を持った知性である」。シンプル派にはこちらがおすすめ。タブを開くたびに名言格言が出てきます。日本語対応していないので、英語力が求められるのが玉に瑕でしょうか・・・笑。名言でモチベーション上げてみる拡張機能を使うデメリットも意識しよう正しく使えば業務効率化に役立ち、心の癒しにもなりうる拡張機能ですが、用法用量を誤ると思わぬトラブルに巻き込まれてしまうかもしれません。拡張機能で起こりうるデメリット1マルウェアが侵入する可能性がある拡張機能はアプリなどに比べて公開するのが簡単です。そのため品質に問題があるものや、はじめから悪意を持って作られた機能だってありえます。したものをインストールしてしまうと、個人情報が流失したりウイルスに感染してしまう可能性もあります。したトラブルを防ぐには、導入する前に評価やユーザー数を確認するといいでしょう。実際どんな”悪いこと”が起こりうるのか、どうやって安全な拡張機能を選べばいいのかを知るために、以下の記事を一読しておくことをおすすめします。拡張機能で起こりうるデメリット2動作が重くなるなんでもそうですが、いろいろ詰め込みすぎると動きが鈍くなります。拡張機能も例外ではありません。あれこれインストールせずに厳選しておくのが一番です。全部有効化するのではなく、使いたいときだけ有効化するのも手です。直前に開いていたタブを開く、ページの一番上までスクロールするなど簡単な機能であればキーボードのショートカットで対応できますし、Chromeの標準の機能で提供されていることもあるので、導入前に「本当に拡張機能じゃないといけないのか」を検討しましょう。まとめ:拡張機能と正しく付き合って快適ライフ!今回はWeb制作で役に立つであろうChromeの拡張機能を10+αご紹介してきました。chromeウェブストアには、他にも便利な拡張機能があり、人気の機能などもチェックできるので、業務に合間にチェックしてみてもいいでしょう。WEB制作に限らず「複数のデータに一括で同じ効果を適用したい!」という場面があると思います。Photoshopで誰でも簡単にできる人物写真のレタッチ方法をご紹介します。オリンピック開催年の2020年!最新のWebデザイン参考サイトをサイト、レスポンシブ、ランディングページ、バナー別にまとめてみました。ワイヤーフレームとは別称「画面設計」と呼ばれるもので、Webサイト制作の工程の中で一番初めに作成されるものです。ビジュアル的には簡素ですが、非常に重要な工程です。