Blog ブログ

サイトのデザインをするときに、参考にするサイトを見つけて「この背景色いいなぁ」となることってありませんか？

ColorZillaはサイトからワンクリックで色を抽出することができるカラーピッカーです。

クリックして抽出した色のコードは自動でコピーされるので、デザイン制作ソフトや、コードエディターなどですぐにペーストして使うことができます。

▲ 機能をオンにして「Pick Color From Page」を選択後、カーソルに合わせて自動で色を判別します。

そのままクリックすることで色を抽出してくれます！

また、抽出した色をヒストリーとして保存しておいてくれるので、過去に抽出した色もすぐにわかります。

さらに、1箇所だけではなくページ全体で色を抽出することもできます。

▲カラフルな色使いのサイトで試してみました！

「Webpage Color Analyzer」という項目をクリックすると一覧で表示されます。

直感的な操作で、誰でも使いやすいカラーピッカーだと思います。

ColorZilla

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

サイトのテキストで使用しているフォントや大きさなどの基本情報を調べられるツールです。

機能をオンにすれば、あとはカーソルを合わせるだけで情報が表示されます。

また画面上で、サイズや文字間の調整などフォントの使用感を確かめることもできます。

▲画像中央のように、フォント名・フォントサイズ・行間・文字間・色の情報が表示されます。

画面右に表示されるパネルからさらに細かな操作ができるようになっています。

▲画面右に表示されるパネルでフォントサイズなどを操作して、フォントの使用感が確認できます。

フォントをブックマークしておくことをできますし、有料か無料か、システムフォントかの情報も見ることができます。

無料のものはダウンロードサイトへ、有料のものは購入サイトへのリンクが付いているのですぐにフォントを利用できる設計になっています。

Fonts Ninja

https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja&gl=JP

公開されているサイトのテキストを表面上で擬似的に編集できるツールです。

文字数に変更があったときにコードを変更せずに簡単に確認したいときや、参考のサイト使われているフォントの使用感を試したいとき、などなど色々な使い方ができると思います。

実際にサイトに影響を与えることなく、サクッと簡単にテキストを変更できるのが便利です。

ただしリンクなどは、遷移が優先されて改変できない場合があります。

特徴的なフォントが使われているサイトで試してみました！

▼変更前

▼変更後

Design Mode

https://chrome.google.com/webstore/detail/design-mode/kcohlfofdggbjmbjoiopaddbjjblgnkl?hl=ja&gl=JP

サイトのページ全体を画像で保存できる拡張機能です。

画像の保存形式は、PDF/JPEG/GIF/PNG。

PDFの編集、印刷、クリップボード、メールの送信などが利用できます。

ワンクリックで使えて、次へのアクションも豊富に選べるのでシンプルで使いやすいツールです。

FireShot

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

Chromeの拡張機能は本当に多くありますが、今回は厳選して紹介しました！

ぜひ作業を効率化できる機能を探して使ってみてはいかがでしょうか＾＾

おすすめのツールがあればぜひ教えてください！