誰かに見てもらうための、簡単なデザイン

Web制作初心者さん向けの、Google Chrome拡張機能13個+α

前の記事「Mac歴3ヶ月の私が最初にやった設定と入れたアプリ色々」の続きです。Google Chrome拡張機能のお話。これも姫路IT系勉強会でお話したことのまとめになります。勉強会でお話したことに加え、その後教えて頂いた便利な拡張機能も含めてまとめました。Web制作関連の機能が多いかな…色々教えて頂いて、実際自分で試してみて「使いやすい!」と思ったものを主に紹介しています。私はWeb制作技術が高くないので、そんな私でもできました!という感覚の、初心者さんに優しい内容となっております。

Chromeエクステンション

ちょろめー、ちょろめー、と呼んでて思い出したのですが、ア太郎さんとこのニャロメ先生は元気でしょうか…。

なぜChromeを使うのか

私の場合は「なんや知らんけどみんなChrome使っとる…」というところから始まっています。それ以外に特に意味はないです。このブログを見て下さる方もChromeユーザーさんが一番多いです。そんなにアクセスはないんですが(;´Д`)。今はMac使っていますが、Windowsを使っていた頃はInternetExplorerとFirefoxを使っていました。それに比べるとChromeは余計なものがなくて見やすくてサクサク使えるところがいいのかな、と。InternetExplorerは動作も遅かったしごちゃごちゃしていたような印象があります。Firefoxは動作が遅い印象がありますが、それ以外は特に不便を感じていません。今もChromeがちょっと調子悪い時などはFirefox使っていますが、拡張機能をこんだけ揃えてしまったので、乗り換えする気はあまりないです…。

現在の状態

元々使っていたもの、勉強会で教えて頂いたものを含めて、現時点でこのように落ち着いております。計13個です。

5-chromeapp_03

左からいきまーす!

 

Chrome Sniffer

5-chromeapp_05GoogleChrome

現在見ているWebサイトがどのようなもので構成されているかをアイコン表示してくれるツール。

GoogleAnalytics、WordPress、JQuery、facebook…左のように色々なアイコンが出てきます。

Speed Dial

5-chromeapp_06

よくアクセスするページを登録することで、ワンクリックでそのページに飛ぶことができます。新しいタブを開いた時にSpeedDialのページを表示するようにしておけば便利です。↓こんな感じで。

5-chromeapp_18

その横の☆マーク…Chromeのブックマークアイコンは飛ばします。

 

はてなブックマーク

5-chromeapp_07

人気のはてなブックマーク。気に入った記事を登録(オンライン上でブックマーク)しておけるシステムですね。オンラインなので、外出先でスマホ等で確認できるのもいいところ。スマホアプリもあります。このアイコンをクリックすることで、今見ているWebサイトを簡単にはてなブックマークに登録できます。Chrome拡張機能ではなく、ブックマークレットとかでも登録はできるのですが、Chrome使ってるので入れちゃいました。

Web Developer

5-chromeapp_08

フバタロウ(@foobartaro)さんに教えてもらった機能。その名の通りWebをDevelopするツールです。クリックすると…

5-chromeapp_20

こんな表示が出てきます。英語ー!えいごなのです…(´Д⊂グスン。大丈夫!英語が理解しやすくなる拡張機能も教えてもらったよ(*・ω<)☆!ていうかWebDeveloperはそんな難しい単語はないので、見たら何となく分かると思いますが…。これで今見ているサイトのCSSをオフにしたり、そのWebサイトのカラーパレットが表示されたり、idやclassの振り分けが分かります。

5-chromeapp_22他にも色んな機能があるようで、レスポンシブデザイン(パソコンやタブレット、スマートフォンの画面サイズでも最適なWebサイトを表示する)のための画面の大きさ切り替え機能とかもあります。左はyahoo!JAPANのトップページをCSSをオフにして、idとclassを表示させてみました。CSSを読み込んでないとこんな感じなんですね…(゚A゚;)ゴクリ

ちなみにChromeユーザーさんは、右(副ボタン)クリックメニューにある「要素の検証」でソースを見て検証される方も多いようです。選択した部分にどんなCSSが適用されているかを一覧で見ることができたりとか、便利です。

MeasureIt

5-chromeapp_09

定規ツール。Webサイトの大きさや画像の大きさをその場でサクッと測りたいときに使っています。ソース見たらいいんですが、ほら…ソースってなんかややこしいし…ってことで。

5-chromeapp_21

選択すると青い枠が表示され、枠の大きさが出ます。見た目の感覚でサクッと測れるので便利です。

webページショット – Webpage Screenshot

5-chromeapp_10

Webページをまるまる撮れるスクリーンショット機能。普段スクリーンショット撮る時はSkitch使っていますが、それだと画面に表示されている部分しか撮れないので、Webページ全体を撮る時に使っています。【追記・2015年7月現在で使えなくなってるみたいです…】

Evernote Web Clipper

5-chromeapp_11

Evernote。これはあまり説明いらないんじゃないかと思いますが…。ブログ記事を書く時や、ちょっとしたメモを取る時にEvernoteを使っています。これはWebページのクリップの拡張機能です。保存したいWebページでアイコンをクリックするとEvernoteに保存してくれます。私は、はてブ→技術系の記事、Evernote→行きたいお店とかその他プライベート系、のWebページを保存する、といった風に使い分けています。

Create Link

5-chromeapp_12

tatsuさんのブログで知った拡張機能。Webページ上で右クリック(副ボタンクリック)すると、そのページのタイトルとURLをテキスト形式やHTML形式で書き出してくれます。そのままクリップボードにコピーしてくれるので、あとはペーストするだけでOK!主にブログを書く時、リンクをはることが多いので重宝しています。

Facebook Share Button (by Shareaholic)

5-chromeapp_13

見ているWebページをfacebookにシェアする機能。「いいね!」された数も表示してくれます。ブログ書いた時に自動的にfacebookにお知らせする機能をつけていないので、これで手動でしています。facebookの友達はWebやデザイン関係ではない人もいるので、あまりにこのブログの更新情報が流れるとウザいかな…と思ったりするので、手動でたまにシェアしてます。赤枠の数字はそのページが「いいね!」された数です。他のページがどれくらい「いいね!」されているかも分かるので、結構役立ってます。

(un)clrd

5-chromeapp_14

ワテ(@aWebprogrammer)さんに教えてもらったもの。これが…!目からウロコ…!!Webデザインの勉強を独学でしていますが、アクセシビリティとか、Webに最適な配色、とかよく分かっていないのが現状でして。これはクリックするだけで見ているWebページを白黒(グレースケール)に変えてくれます。白黒で見ることによって、背景に文字が溶け込んでしまって見づらくなっている部分とかが分かる…!デザイン性と見やすさのバランスって実に微妙で難しいところがあると思うんですが、色に左右されている部分も大きいです。これによって、色使いを考えさせられることもあるかな、と。ただ白黒になっただけで、色々発見があるもんだ。

5-chromeapp_26

自分のブログを(un)clrdで見て分かったことは、あまり派手なことしてないシンプルで地味なデザインだから、白黒で見てもあまり違和感がない、ってことかな…。色んなことをちょっとずつ改善はしていこうかな、と思ってますが…。

Terminal for Google

5-chromeapp_15

ワテ(@aWebprogrammer)さんに教えてもらったもの。Googleが提供しているサービスにこのアイコンから飛ぶことができます。

5-chromeapp_29

開いた状態。GmailとかGoogleカレンダーとか使ってる人には便利ですね!Youtubeもあるー。ブログやホームページ運営している人にはAnalyticsやAdsenseにもアクセスできるのでかなり良い機能ではないかと。

Weblioポップアップ英和辞典

5-chromeapp_16

長尾(@wildwest_kazya)さんに教えてもらったもの。英単語にマウスカーソルを合わせると、その単語の意味を教えてくれます。英語のサイトとか見る時に便利ですねー!

5-chromeapp_32

とか言って、例が私のブログで本当にごめんなさい…。アイコンをクリックすると、簡易検索&翻訳機能が出てきます!

Q Pad

5-chromeapp_17

ワテ(@aWebprogrammer)さんに教えてもらったもの。メモパッドです。簡単なメモ書きを保存しておいてくれます。Evernoteより簡単で、メモしてさらっと表示できる簡単な機能なので手軽に使えます。

5-chromeapp_36

こうやってよく使うタグを登録しておくと、コピペで使えたりします。Gmailなどに送ることもできます。

使っているのはこれだけです。あとは、教えてもらったけど、合わなかったりレベルが高かったりで入れていないものを、勿体ないのでさらりと紹介します。

他に教えて頂いた拡張機能色々

Resolution Test

5-chromeapp_39
長尾(@wildwest_kazya)さんに教えてもらったもの。一発で見ているページの画面サイズを変えることができます。元に戻すのもボタンひとつでOK!レスポンシブデザインに便利。先に紹介したWeb Developerにもこの機能はあるのですが、画面サイズはこっちの方が豊富です。

Tag Assistant(by google)

ワテ(@aWebprogrammer)さんに教えてもらったもの。Google Analyticsなどのタグが正常に埋め込まれているかチェックしてくれる機能。サイトを運営している人には便利かも。

HTML5 Outliner

ワテ(@aWebprogrammer)さんに教えてもらったもの。HTML5の階層構造を視覚的にわかりやすくしてくれる機能。階層構造…難しい…。

Pendule

ワテ(@aWebprogrammer)さんに教えてもらったもの。先に紹介したWeb Developerとほぼ同じ機能を備えているもの。インターフェイスはこちらのほうが綺麗かも。ただ、私の環境だと、何故か正常に動作しないことがあり…なので外しています。

Awesome Screenshot

5-chromeapp_41

ワテ(@aWebprogrammer)さんに教えてもらったもの。Webページの一部や全体をキャプチャできたり、注釈等も加えることのできる高機能なスクリーンショット系機能。私はSkitchと先に紹介したwebページショットを使っているので使用していませんが、Skitch使っていない人には良い機能かも。

以上です。ブラウザだけでこんなに出来てしまうなんてすごいなぁ。前回のMacの設定に引き続き、Chromeの拡張機能も色々アドバイスいただけて、教えて頂いた皆様には本当に感謝します!そして、感謝します!
参考になれば幸いです。

それでは!Have a nice design!