ウェブ制作が捗るChrome拡張機能

どうも!安里です。
今日のブログは、ウェブ制作が捗るChromeの拡張機能を紹介しようと思います。
なんでChromeだけと思いましたか?
なぜかというとstatcounterで公開されているデータになりますが
(デスクトップ)2021年9月:日本 Chromeシェア率62.47%
半数以上がChromeということは、このブログを読んでいらっしゃる方もChromeを使用中なはず!
と思いまして、Chromeの拡張機能について記事にしてみました。
Chromeの拡張機能とは?といった説明や追加方法については
この記事では、割愛させていただきます。
ちなみにスマートフォンからは追加することはできませんので気を付けてください。

FireShot

URL:https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

ウェブページのスクリーンショットを撮ることが出来ます。

  • 現在、表示している部分
  • 範囲を選択して必要な所だけ
  • ページ全体など
  • PNG、PDFで保存
  • GmailにPNG、JPEG、PDFで送信
  • クリップボードにコピー
  • そのまま印刷

スクリーンショットだけを使いたいならこちらがおススメです。
 

Lightshot

URL:https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp?hl=ja

こちらは、選択した範囲のスクリーンショットを作成することが出来ます。
選択した範囲をスクリーンショット後、マーカーやテキストを追加することも出来ます。
選択した範囲のスクリーンショットと編集を同時で行い方はこちらがおススメです。
 

Super Simple Highlighter

URL:https://chrome.google.com/webstore/detail/super-simple-highlighter/hhlhjgianpocpoppaiihmlpgcoehlhio?utm_source=chrome-app-launcher

ウェブサイトのテキストにマーカーを引くことが出来ます。
複数マーカーを引くことも出来ますし、色も分けることも出来ます。

間違えてブラウザを更新してもマーカーの場所とコンテンツを記憶しているので消える心配もありません。
こちらのマーカーとスクリーンショットの拡張を組み合わせて使うのもおススメです。
 

Page Ruler Redux

URL:https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=ja

ウェブサイト上でピクセルを測定することが出来ます。
ウェブサイトを見ている時に「このサイトのブロック要素の大きさってどのぐらいだろう?」と思ったときに私は使っています。
 

CSS Pepper

URL:https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

検証ツールを使わなくてもブロック要素を調べることが出来ます。
 

ColorPick Eyedropper

URL:https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ja

ウェブサイトで使われている色や写真などから色の値を調べることが出来ます。
あると便利な拡張機能です。検証ツールを開いた時にブラウザの幅が変わるのが嫌な方は追加しておくと良いと思います。
 

What Font

URL:https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

ウェブサイトで使われているフォントを調べることが出来ます。
フォントの種類、スタイル、色、行間、サイズを調べられます。
 

Fonts Ninja

URL:https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh

こちらもWhat Fontと同じようにフォントを調べることが出来ます。
What Fontと違うことはフォントの購入・ダウンロードをすることが出来ます。
フォントをブックマークする機能もあり拡張機能内でフォントブックマークを管理することが出来ます。
 

Wordmark Extension

URL:https://chrome.google.com/webstore/detail/wordmark-extension/plafaneablgcojpbaeefkmnheilloopl?hl=ja

自分のパソコンにインストールしているフォントを一覧で表示することができます。
テキストを入力して(キャッチコピーなど)一覧表示します。
私はバナーを制作時、キャッチコピーを入力して自分のイメージに合うフォントを探すために使っています。
 

The QR Code Extension

URL:https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb

現在開いているウェブページのQRコードを生成し、ウェブカメラを使ってQRコードをスキャンすることができます。
私は、実機で確認をする時によく使っています。
すでに追加しているよ!とう方もいらっしゃるのではないでしょうか?
比較的Chromeウェブストアでも使用している人が多いものを紹介してみました。
便利な機能ですが、たくさん追加してしまうとブラウザの動作が遅くなってしまう可能性もあるので気を付けてください。
使用頻度が多い作業や時間が掛かるものを追加することをおススメします。
ぜひ気になった拡張機能を追加してみてください!!

ファイブスターコーポレーションでは、ホテル・宿泊施設の集客や運営に
お困りの事業主様・オーナー様をサポートする様々なサービスを提供しています。
まずはお気軽にご相談ください。

ファイブスターコーポレーションの紹介動画はこちら⇓

関連記事

カテゴリー

最近の記事

  1. 売上向上!ホテルのパッケージ予約がもたらすメリットとデメリットとは?

  2. インターンシップを開催しました!

  3. 【最新版】マップコードを使ってみよう!

  4. Booking.comでの子供料金と定員の設定方法

  5. ホテル選びの新キーワードは「デジタルデトックス」⁉

月間ランキング Monthly Ranking

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

採用情報はこちら

TOP