技術/知識

【Google拡張機能】WEB編

【Google拡張機能】WEB編

クリエイターのみなさん、こんにちは!
今回はGoogle拡張機能シリーズ第3弾!
WEBコーダーがサイト制作の際などに実際に使っている拡張機能をご紹介します!
ポートフォリオサイトを作りたい方ぜひ参考にしてください👀

目次

  1. 拡張機能とは?
  2. 素晴らしい画面の並べ替えとスクリーンショット
  3. Check My Links
  4. Responsive Viewer
  5. HTML5 Outliner
  6. Lighthouse
  7. まとめ

拡張機能とは?

そもそもGoogle Chromeの拡張機能とはChromeの機能を増やしたり強化できる特殊なプログラムのことです。
Chromeウェブストアに数万種類の拡張機能が登録されているので、さまざまな用途で使用できます。

インストール方法は以下の通りです。

Chromeウェブストア→左上の検索欄から対象の機能名入力→機能詳細ページ「Chromeに追加」選択
→追加するかどうかのパネルで「拡張機能を追加」選択→インストール開始

インストールしたものはChromeのアドレスバー横にあるパズルのピースマークのアイコンから見ることができます。
その中の「拡張機能を管理」を選択すると管理画面に移動でき一旦機能をOFFにすることや削除ができますよ。
注意点としては、拡張機能の開発者が悪質なところに権利を売っていて、ウイルス化させていたり個人情報を抜かれる危険性もありますので
何でもかんでもインストールせず、評価など参考にして使用しましょう。

素晴らしい画面の並べ替えとスクリーンショット

表示箇所やフルページでスクリーンショットをとることが可能です。
画面録画も可能でこれ1つで使い勝手の良い拡張機能です。

Check My Links

リンク先が指定されているか、外部リンクなのかなどを色分けして表示してくれる拡張機能です。
ポートフォリオサイトやhow toブログを作成している方など、リンク切れのうっかりミスをなくすチェックができます。

Responsive Viewer

画面幅ごとにどう見えるのかを比較できる拡張機能です。
画面幅によってレイアウトが崩れることはよくあることです。
この拡張機能ではiPhoneからandroid、Macなど幅広い画面幅で比較できるので、レイアウトの崩れを簡単に見つけることができます。

HTML5 Outliner

WEBサイトの構築の際に使用するpタグやh1タグなど。
これらをわかりやすく簡易的に表示してくれる拡張機能になります。
タグを適切に使うことでSEOの観点から評価が高くなります。

Lighthouse

サイトのパフォーマンスやセキュリティを測定できる拡張機能です。
サイトパフォーマンスが良いほどサイトを長時間閲覧してもらえる可能性が上がります。

まとめ

いかがでしたか?
WEBコーダーが実際に使っている拡張機能をご紹介しました!
素材制作に直接関係のある拡張機能は少なかったかもしれませんが、ブログなどを書いている方も多いかと思い今回紹介してみました!
少しでも参考になったら嬉しいです!

最後まで読んでいただきありがとうございました!

PICTY(ピクティ)はイラストを販売・購入することができるマーケットプレイスサイトです。
報酬率は売り上げの60%!自分で価格を決めてプロ・アマチュア問わず素材を自由に販売することができます♪
楽しく販売できるPICTYへ是非ご参加ください✨