WEBサイトのバナー製作やレイアウトをする際に、
幅を計ったり、いいなと思った色味を真似したり、、、などなど
結構やることは多くあります。
そのため、少しでも作業効率をあげるために、
いくつか便利ツールをご紹介するので、ぜひ知っておきましょう。
おすすめブラウザ「Google Chrome」
「そもそもブラウザってなに？」という方のために解説すると、
ブラウザとは「ネット上のウェブページを画面上に表示するための閲覧ソフト」です。
もっと簡単に言うと、
「どこでもドア」が世界中のどこでも行ける「入り口」であるように、
「ブラウザ」がインターネット上のどのページでも見れる「入り口」というわけです。
だいたいの端末にはデフォルトでブラウザがすでにインストールされています。
・WindowsではInternet Explorer（インターネットエクスプローラー）
・MacではSafari（サファリ）
こちらに関してはアイコンが見覚えがあるのではないでしょうか。
「Google Chrome」は無料で使える便利ツールが多々あるので、
デザイン以外でも使用をおすすめするブラウザです。
インストールする場合には、既存のブラウザで「chrome」と検索し、
最初に出てきたリンクをクリックしましょう。
あとは、手順に従ってクリックを押して行けばインストールすることができます。
サイトの画像のサイズを計る「インスペクタ」
例えば、サイトのバナー画像の新規作成依頼がきた場合を想定します。
「ここのバナー新しくしたいからデザインよろしく」と言われたものの、
依頼主はそのバナーのサイズを把握していない。
そんな時にとても役に立ちます。
今回はわかりやすく、私のサイトを元に説明していきます。
下に赤枠されている画像のサイズを知りたいとします。
まずページを開いている状態で、
「option」+「command」+「I」をクリックします。
そうすると、右に新しい画面が表示されます。
下画面の①をクリック後、②画像にカーソルを合わせると、
③のように自動で画像サイズが表示されます。
しかし、新しい画面が表示されたことで、
元々見たかった部分が隠れてしまいました。
その場合は、下画像の右上赤枠部分をクリックすると、
ページ全体が見えるようになるので、
先ほど同様サイズを計りたい画像にカーソルを合わせます。
今回の画像サイズは「147×139」ということがわかりました。
調べ終わったら、再度「option」+「command」+「I」で非表示にできます。
サイトの色コードを調べる「ColorZilla」
色んなサイトを見ていて、
「このサイトの色合いを真似したい」
という場合に便利な機能「ColorZila」を説明します。
まず、こちらは先述した「Google Chrome」で使用できる拡張機能になります。
Chromeを開いてから、画面右上の赤枠をクリックし、
下赤枠の「さらにもっと」をクリックします。
次画面で「Chromeウェブストア」をクリックします。
検索欄に「ColorZilla」と入力し、
下画面の拡張機能が出てきたら、「Chromeに追加」をクリックします。
画面が変わったら再度「Chromeに追加」をクリックします。
下のような画面が表示されたら追加完了です。
実際に使う場合は、Chromeの画面右上に、
スポイトのようなアイコンが表示されるようになるので、
そちらをクリック後、「Pick Color From Page」をクリックします。
実際にサイトを開いていれば、カーソルを画像の上に合わせれば、
その画像のカラーコードが表示されます。
コピーしたいカラーコードが見つかったら、その画像上でクリックすれば、
自動でカラーコードをコピーしてくれます。
後は、実際にPhotoshopで長方形ツールなどを使う場合、
カラーピッカーを表示し、カラーコードを直接入力すれば、
参考サイトと同じカラーを使用することができます。
