こんにちは、構成担当のアッキーです。

今回は「業務効率化！構成担当者がおすすめする便利ツール！」ということで、普段私がサイト構成を考える際にかなりの頻度で使用しているツールをご紹介していきます。

サイト構成を考える際、ネット上での事前調査は欠かせません。
クライアント様から提示される参考サイトや競合、同業他社、市場背景や業界理解のための情報収集、ターゲットの周辺事情、既存サイトの構成や情報整理など、とにかく調べることから始めています。

大量の情報から必要な情報を抽出したり共有したりするときにChromeの拡張機能を多く活用しています。
今回はその中でも特に私が頼りにしている機能をご紹介します。

構成やディレクションを担当されている方だけでなく、様々な場面で活用できそうなものもありますので
是非参考にしてみてください。

HeadingsMap

まずは「HeadingsMap」です。
HTMLドキュメントの「HTML5アウトライン」や「見出しの構造」のナビゲートマップを表示してくれるツールです。

ワンクリックでページ全体がどのような構造になっているのかh1、h2、h3…と見出しやセクションレベル、階層で表示してくれます。

このページにはどんな内容が書かれているのかということを効率よく俯瞰してみることができます。

情報の多いページになるほど見出しの数も増えて目で追うのもかなり大変になるので、このツールは全体感をつかみたいときに、かなり重宝しております。

また見出しをクリックすることで対象の箇所へジャンプできるので、目次代わりとしても大変便利です。

ResponsiveViewer

PCでサイト調査をしていると、スマホ、タブレットでの表示はどうなってるか確認したくなることあると思います。
皆さんはどのような方法で確認してますか？　

レスポンシブ画面のチェックはデベロッパーツール（要素の検証機能）を使うのが一般的だと思いますが、デバイスごとカーソルを合わせて確認するのはちょっと面倒ですよね。

私が使用しているこのツールはワンクリックで複数サイズの画面を一括で確認することができます。

スクロールを進めれば、タブレットやPCの画面もまとめてチェックできます。

Web開発時に各端末ごとの見え方を確認するときにも便利です。

OneTab

おなじみのツールでご存じの方が多いかもしれません。「OneTab」のご紹介です。

Chromeで調べものをしていると、いつの間にか開きっぱなしの大量タブに囲まれてしまいませんか？

そんな時「OneTab」はワンクリックで開いているページをリスト化して1つのタブにまとめてくれます。
本当に一瞬でコンパクトになります。かなり爽快です～

Chromeはタブをたくさん開いているとかなりメモリを使用してしまいますので、メモリ使用量の節約にもなりますね。

まとめられたタブリストはグループ化して名前を付けることもできます。

その他機能として「Webページとしてシェア」することもできるため、発行されたURLでメンバーに共有するという使い方も良いかもしれません。

Pasty

複数のURLのリンクをもらったけど、一つずつ開くのはいちいち大変…　そんなとき「Pasty」はワンクリックで複数のリンクを一気に開くことができます。

こちらもおなじみの拡張機能ですが、重宝しております。

ato-ichinen　

情報の鮮度って重要ですよね。

Googleで検索しても、情報が古すぎて必要な答えが得られないなんていうことがあると思います。

「ato-ichinen」はその名の通り、1年以内～直近1時間以内に更新された記事に絞って検索結果に表示させることができます。

これで最新記事をスムーズに検索できます。

BlogLinkClipper

現在表示中のページの URL とタイトルを様々な形式でクリップボードにコピーする拡張機能です。

リンクをタイトル付きで共有したり、ドキュメントに保存したいときに大変便利です。
予めタイトルとリンクの間を改行して表示してくれるので（細かい部分ですが）助かります。

また「リンクタグ」で生成すれば、サイトに載せるときそのまま使えるリンク形式でコピーできます。
コーディングの作業効率化にもなりますね。

まとめ

いかがだったでしょうか？

わりと地味なツールも多い印象かもしれませんが、塵も積もれば山となる…

時間短縮として作業効率化にお役立てください。

今後も引き続き新たに発見したツールやお役立ち情報を見つけたら、発信していきたいと思います。