株式会社BTM

BTM Blog

Menu
株式会社BTM
  • News
  • Company
  • Who we are
  • Service
    • System Engineering Service
    • System Solution
    • Media Service
  • Media
  • Blog
  • Recruit
    • Career
    • Guideline
  • Contact

BTM Useful

2016.12.07

WEBサイトの資料作成を効率化するChrome拡張機能を紹介!

デザインチェックや資料作成、楽したいよね?

どうも。フロントエンドエンジニアの杉原睦弘です。
WEBサイト制作で付きものなのがデザインチェックと資料作りです。
意図したフォントが当たっているか、フォントサイズは合っているか、カラーコードは間違ってないか。
そしてそれらのチェックした項目を資料にまとめることとなります。

はたまたバグがあればそれも資料にまとめる必要がありますし、納品となれば先方に提出するように別途資料を作成しなければなりません。
そんな作業をちょっとでも楽にしてくれるChromeの拡張機能を紹介します。

「WhatFont」で文字チェック

デザインチェックで案外抜けてしまうのが、フォントの指定です。
リセットCSSでちゃんとフォントが当たっていると思っていたのに、実はform系のタグでフォントが当っていなかったなんてことはあるものです。
また、他のセレクタとバッティングしてfont-size, line-height, colorが意図しないものになっているなんてこともありがちです。

そういった懸念を、容易に判別してくれる拡張機能が「WhatFont」です。
要素を選択することで簡単に行間、文字色、文字サイズ、フォント種別が表示されます。

WhatFontで文字チェック

WhatFont : Chromeウェブストア

「ColorPick Eyedropper」で色チェック

「ColorPick Eyedropper」は画面上の要素を選択してカラーコードを表示してくれる拡張機能です。 CSSでのカラー指定以外にも、画像のカラーコードも取得できます。

「ColorPick Eyedropper」で色チェック

ColorPick Eyedropper : Chromeウェブストア

「Smart QrCode Generator」で実機チェック

スマホサイトを作成する時は、Chromeの開発者ツールでスマートフォン表示を確認しながら作成している方が多いかと思います。
しかし、最終的に実機での確認が必要となりますよね。
その際に、実機にurlを手で打ち込むなんてことは、スマホじゃなくてもやりたくはない作業だと思います。
「Smart QrCode Generator」は表示中のサイトのQRコードを生成してくれるので、PCでサイトを開いてQRコードを生成して、スマホで読み取るということで、容易にアクセスできるようになります。

「Smart QrCode Generator」で実機チェック

Smart QrCode Generator : Chromeウェブストア

「Window Resizer」でウィンドウサイズ調整

画面サイズによってファーストビューに含まれる要素は変わってきます。
「この画像だけは絶対にファーストビューに表示しておきたい」
「この言葉はファーストビューにいないと困る」
といった要求が、クライアントから上がってくることがあったりしますよね。

そいういった要望のチェックを簡便にするには「Window Resizer」が実に有用です。
色々なディスプレイの一覧が用意されていますので、その中から選択したディスプレイサイズにウィンドウサイズを変更してくれます。
選択したサイズでキャプチャを撮れば、各ディスプレイサイズのファーストビューをまとめた資料を作成するのも簡単です。

「Window Resizer」でウィンドウサイズ調整<

Window Resizer : Chromeウェブストア

「Webpage Screenshot」でスクリーンショットを保存

WEBサイトのスクリーンショットを撮る時に、パソコン標準のプリントスクリーン機能を使っているあなた。
お疲れ様です。「Webpage Screenshot」を使えばその面倒な作業も改善されます。

プリントスクリーンではブラウザだけでなくパソコンに表示している全体のキャプチャをとってしまいますが、 「Webpage Screenshot」はブラウザに表示されている部分だけをキャプチャしてくれます。
また、スクロールを必要とするページも、自動でスクロールして全体のキャプチャをとる機能もあります。

しかも、キャプチャした画像に対して、線や枠を書いたり文字を入力して注釈をいれたりといった、画像編集機能まで提供してくれます。
プリントスクリーンでキャプチャを撮って、画像編集ソフトを起動して画像編集してませんでしたか?
「Webpage Screenshot」使えばキャプチャを取って画像編集するという一連の流れがスムーズになります。

「Webpage Screenshot」でスクリーンショットを保存

Webpage Screenshot : Chromeウェブストア

「PrettyPrint」でソースを整形

WEBサイトのソースを資料にまとめることもありますよね?
デバッグの報告のために資料にまとめたり、差分を説明するためにソースを資料にまとめたり。
ソースをそのままコピペしてもいいんですけど、ものによってはファイルを自分が持っていなかったり、 画像ファイルとして「ここからここまで」という風に指摘した方が分かりやすい時もあります。

しかしブラウザでソースを表示すると、ファイルがミニファイされていたり、文字色が黒一色で読みづらかったりします。
「PrettyPrint」を使ってJavaScriptやCSSを整形して表示すると綺麗にフォーマットされて読みやすくなります。

PrettyPrint使用前

PrettyPrint使用前

PrettyPrint使用後

PrettyPrint使用後

PrettyPrint : Chromeウェブストア

まとめ

資料作成は文章を作成するのがメインですが、キャプチャ画像を添付すると途端に理解しやすくなります。
しかしキャプチャを撮る作業が面倒だと、どうしても文字だけで説明しがちです。
キャプチャを撮ることが簡便であれば、資料を書くときも気軽に画像を添付できるようになり、 読み手に取っても書き手にとっても、ウィンウィンな状態になれるはずです。

ではでは!

コーディングをもっと快適に!単純な入力作業こそ効率化しよう WEB初心者?ならまずタイプミスをなくす環境を整えよう!
  • ツイート
  • 前へ
  • 次へ
  • もどる
writer

杉原睦弘

2014年入社のフロントエンドエンジニア。アメコミヒーロー映画が好きだったりする。

category

  • cate Allすべて
  • Company会社の話
  • BTM LifeBTMの毎日
  • BTM Useful活かせる技術
  • Careerキャリアアップしよう
  • BTM Case Study導入事例

pickup

  • pickup01
    BTM Life

    七夕イベント開催~「ちょっとした夢」叶える編~

  • pickup01
    BTM Life

    ヤフオクドームリレーマラソンに参加してきました!

  • pickup01
    BTM Life

    「we work」に行ってきました!

  • Who
    we are
  • Service
  • Recruit
    Career
  • Media
株式会社BTM

株式会社BTM

〒150-0002 東京都渋谷区渋谷二丁目12番19号 東建インターナショナルビル別館5階

TEL
03-5784-0456
FAX
03-5784-0455
  • levtech_back image 取材記事を見る|ITエンジニア・クリエイターの求人・転職ならレバテックダイレクト
  • pmark

©2022 BTM, Inc.

  • サイトマップ
  • プライバシーポリシー
  • 情報セキュリティ基本方針
  • 派遣マージン率
  • 安全衛生 基本方針
  • お問い合わせ