便利な機能

最近見つけた便利なchrome拡張機能

  • このエントリーをはてなブックマークに追加

こんにちは!制作部の梨本です。
今日は最近見つけた、これは使える(`・ω・´)シャキーン!と感じたchromeのアドオンを紹介します~

見ているサイトのプラグインやフレームワークの種類を一発で確認!「Wappalyzer」

Wappalyzer-ウェブストア

有名企業さんのサイトなんかを見ていると、これは何の機能を使っているんだろう?って気になるときありますよね?手軽にサクッと確認したいときに便利です。

使い方

ここからWappalyzerのアドオンをインストール!
②するとツールバーにアイコンが追加されます。ワードプレスなら下の画像のような表記になりますね。

スクリーンショット (24)

③このアイコンをクリックすると・・・

スクリーンショット (26)

おおおお!!
全部みえちゃうよおお(〃ノωノ)
CMSの種類だけじゃなく、jsやPHPのバージョン、グーグルアナリティクス、SNSまで・・・

ぱっと確認できて良いですね!
ただ、たまにですが何も表示されないサイトもあります・・・何故かは分かりません(´・ω・`)

手軽に画像キャプチャ&編集「Awesome Screenshot」

Awesome Screenshot-ウェブストア

作成したサイトを社内でチェックするとき、スクショとって「ここもっと余白ほしいです!」といった感じで修正をお願いするときがあるんですが、今まではとっても手間でした。自分のwindowsの場合はショートカットカットキー(windowsボタン+PrintScreenキー)でスクショを取り、さらにそれをPhotoshopまたはペイントツールでいちいち開いてトリミング・コメント記入・・・
はぁ、しんど・・・でもこのAwesome Screenshotを使えば解決です!

使い方

ここからインストール。

②こんなアイコンが出てくるのでクリック!

スクリーンショット (28)

③あっ…英語・・・

スクリーンショット (30)

ご心配なく!
上から順に日本語で、

■caputure visible part of page
→表示している画面のキャプチャ・編集する

■Delayed caputure
→3秒後に開いている画面をキャプチャ・編集する

■caputure selected area
→キャプチャする範囲を選択する

■caputure entire page
→ページ全体をキャプチャする

■select a local image
→ローカルフォルダの画像を編集する

■caputure desktop
→デスクトップ画面をキャプチャ・編集する

・・・てな感じです!

③実際に選択した部分をキャプチャ&編集してみます。「caputure selected area」をクリックするとこんな感じで表示されるので、スクショ取りたい部分をドラッグし、下の「caputure」ボタンをクリック。

スクリーンショット (31)

④「caputure」ボタンクリックで、編集画面に勝手に別ウィンドウで遷移します。

スクリーンショット (32)

⑤上に表示されているツールバーで編集して、「Done」ボタンを押します。
フォントも選べるし、矢印も簡単に編集できて、とてもラクですね!ぼかし機能や切り抜き加工もできるので、簡単なコメント指示でしたら、いちいちPhotoshopやペイントツールを開く必要が無くなります♪

⑥ページ遷移したのち、ダウンロードボタンを押して完成!

スクリーンショット (33)

どうでしたか?修正依頼って複雑だったりすると結構細かく記載しなければいけないときがあるので、そんなときにひとつのツールで完結できるってとても有り難いですよね!

それではこのへんで~

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ