Webサイトの分析や制作で使えるChrome拡張・ツール10選
このnoteでは、私が実際に使っている&仲間たちに教えてもらったChrome拡張やツールを紹介していきたいと思います!
🔎 世の中のWebサイト分析に使えるもの
🖥 実際に制作で便利なもの
を中心に、デザイナーかどうか関係なく使えるものを選んでみました。
1. Webサイト検証の王道ツール - Chromeデベロッパーツール
Webサイトを見るときに最も高頻度で使う、王道中の王道、Chromeのデベロッパーツールでは、Webサイトのコードを見る以外にも、フォントサイズや色などのデザイン変更テストやソースの確認などができます。
中でも一番多く使うのが、他のデバイスでどう見えるかを確認する機能です。下記のように、iPhoneやタブレットのサイズ、また表示幅を指定することで様々な画面サイズでの見え方をチェックします。
右クリックで [検証 (Inspect)] か、⌘ + Opt + I のショートカットキーで検証画面になりますが、コードを見慣れていないとウッとなるかもしれないので、このデバイスごとの見え方を確認する機能だけでも使えると良いかと思います。
2. サイトのアクセス解析 - Similar Web
3. Webページ全体のキャプチャ - GoFullPage
4. サイトで使われているフォントが分かる - Fonts ninja
ちなみに、画像になってしまっているフォントを知りたい/近しいものを探したい場合はPhotoshopのマッチフォント機能を使うと便利です。
5. 今見ているページのQRコードをすぐ生成 - QRコードジェネレータ
6. コンテンツや画像のサイズを測る - Page Ruler
7. Macのメニューバーから使えるコントラストチェッカー - Contrast
8. Webサイトのテキストを擬似的に変更 - Design Mode
類似プラグインでEditという有料ツールもあり、Design Modeの機能にプラスで色やフォントを変える機能もついています。
9. ライブサイトにコメントしてチームで共有 - MarkUp
10. サイトで使われている画像を一括表示&ダウンロード - Image Downloader
その他のオススメChrome拡張
▼ Muzli 2 - 毎日のデザインインスピレーションに
Chromeで新規タブを開くと、デザインの様々なインスピレーションや記事を表示してくれます。
▼ Product Huntプラグイン - プロダクトに関する情報収集を気軽に
上記のMuzli2と同じように、Chromeの新規タブでProduct Huntに投稿されている情報が見られます。
▼ Chrome Better History - Chromeの履歴を見やすく
Chromeデフォルトの履歴を、カレンダーで日付指定できる等使いやすいデザインになっているものに変えてくれます。最近教えてもらって重宝しています。
▼ Bitly - URL短縮をChrome拡張で
これまでわざわざ毎回「URL短縮」と検索していたのですが、最近教えてもらってとても役立っている、URL短縮のChrome拡張です。
▼ Trends Everywhere - 検索ワードのトレンドがわかる
Google検索結果に検索ワードのgoogleトレンドグラフを表示してくれて、押下でGoogle Trendsの詳細が見れます。入れておけば勝手に毎回の検索結果に表示されます。「みんな同じこと検索してる!」みたいなのがわかったりすると楽しいです。
この記事が気に入ったらサポートをしてみませんか?