1. トップページ
  2. コラム
  3. 地味に便利なブラウザ上のツールたち

地味に便利なブラウザ上のツールたち

私は主にWEBサイト制作におけるコーディングを担当しています。
今回は、制作中や制作以外の業務に役立つ、地味に便利なツールをご紹介します。

Quick HEX to RGB


https://manabox.github.io/quick-hex-to-rgb/
その名の通り、カラーコードをRGB値に変換したい時に使っています。
基本的に、cssでの色指定にはカラーコード(例:#FFFFFF)を使用しますが、背景色の透過などRGBAカラーモデルで色を指定したい時に便利です。

このツールは有名なWEBクリエイターボックスの中の方が作られています。
他にもこのようなツールはあるのですが、見た目の可愛さと分かりやすさ・クリックでコピーできる手軽さがよくて、よく使っています。

ちなみにVue.jsで作られているらしく、制作方法まで公開してくれています。
Vue.jsでカラーコードからRGB値にサクッと変換する方法
WEB制作に関する情報を幅広く掲載しているため、いつもお世話になっているサイトです。

FontFace Ninja

FontFace Ninjaは、Chromeの拡張機能として使うことができます。
safariとfirefoxでも使用できるみたいですね。

サイト内のテキストにマウスカーソルを重ねると、使用フォントを確認することが出来ます。
気に入ったフォントをお気に入り登録したり、そのフォントを使って好きな文章を試しに打ってみることも出来る、便利で楽しい機能です。

ちなみに、画像になっているテキストのフォントも教えてくれます。
こちらの精度はまちまちかもしれません。

Google翻訳


https://translate.google.co.jp/
言うまでもなく便利なGoogle翻訳。

私たちはWEBサイト制作でGithubを使ったソースコードのバージョン管理をしています。
その為に使用しているSource Treeでエラーが発生した際、そのエラー文をそのままGoogle翻訳にコピペ。

この場合に限らず、エラー文は英語で表示されることが多いので凄く難しいことを言っているように感じてしまうのですが、翻訳するとなんとなく単純なものに感じられます。
心を折られないためにも、小さな工夫は大事ですね。

WEBサイト制作に関する情報なども、英文のみで公開されていることは多いです。
サイト全体の場合、Chromeでは翻訳アイコンを押すだけで翻訳してくれます。
英文だからと諦めず、翻訳機能を使ってみることで見える世界もあるかもしれません。
自力で読めるようになることが、一番理想的ですが…!

時間計算.com

http://xn--kjvu88b4qkyhl.com/

開始日時と終了日時を入力すると、「日時分秒」と「日換算」「時間換算」「分換算」「秒換算」で経過時間を計算してくれるツールです。
これはちょっと需要が偏るツールなのですが、私はとても助けられています。

ブラウザ上ツールの良さ

私は上にあげたようなツールをブックマークして、すぐに使えるようにしています。
ブラウザ上のツールの良さは、アプリを起動したり自分が動いたりせず、スッと出してパッと使えるところ。

使わなくても済むけれど、毎日のめんどくさいをほんの少し楽にしてくれます。
「地味に便利なツール」をさらに発掘して、効率的で楽しいWEB制作を続けていきたいです。

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!


この記事を書いた人

小畑舞乃

Creative & Development Division