ハシビロコウ のすべての投稿

ハシビロコウ

ハシビロコウ について

ハシビロコウさんと、古墳、埴輪、お城、商店街めぐりが 大好きなデザイナーです。 野望は、「日本の城100選」のコンプリート!

オススメのChrome拡張機能5選

こんにちは。
いつもFAbankブログをご覧くださりありがとうございます。
「十条銀座」を言うとき、いつも噛んでしまうデザイン担当のハシビロコウです。
「じゅうじょうぎんぢゃ」ってなってしまいますよね。
「三車線」も苦手です。

まず、最近ワタシ的にショッキングだったお話をひとつ。
先日Yahoo!ニュースでも取り上げられていたので
目にされた方もいらっしゃるのではないでしょうか。

★マジョマジョ、終わったな…」魔法が抜けた新ビジュアルに嘆きの声

そうです!
「資生堂/マジョリカマジョルカ」のサイトが一新されていました。
おとぎ話の世界に迷い込んだかのような魔法の世界観がサイト全体で
作り上げられていたあの「マジョマジョ」のサイトが!!!
普通のただの「きれいなサイト」になっていましたΣ( ̄ロ ̄lll)
『あんなサイトが作れるようになりたい!』と目指していたサイトが
なくなってしまったのは大変ショックです。
「きれいなデザイン」のサイトは探せばいくらでもありますが、
マジョマジョの秀逸なところは、デザインとブランドコンセプトが
すごくマッチしていました。本当に本当に残念です。

 

さて、本日のテーマは
『オススメのChrome拡張機能5選』

今回は、私が日々の業務で使用している便利なGoogle Chromeの拡張機能を
ご紹介します。
どの拡張機能も、『CHROME に追加』ボタン1発でインストールできて
難しい説明書を読まなくても直感的に使えるので大変便利です。
気に入ったものがあればぜひ活用してみてください。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
1.ColorPick Eyedropper
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

サイトで使用されている色を抽出してくれる機能拡張です。
例えば、私がデザインしていてよく迷うのが「赤」です。
明るすぎず、暗すぎずといった「赤」はなかなか難しいです。

他のサイトをいろいろと見ているときに
『この色いいな!』
と思ったら、すぐにこれを使います。
マウスをあてると、カラーコードを表示してくれます。
その際に「#」での表示だけではなく、rgbやhslのコードも
一緒に表示してくれるので大変便利です。
クリックすると、そのカラーコードがポップアップで表示されるので
コピペも簡単です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
2.FireShot
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

私はワイヤーやモックを作る際に、ダミー画像をあてたりするんですが
その際にスクリーンショットで撮った画像を使用します。
そのスクリーンショットを撮影する機能拡張です。

他にも「Full Page Screen Capture」を併用していますが
FireShotの便利なところは、
・全体(スクロールもすべて)
・目に見える範囲(画面上で表示されている部分だけ)
・必要な範囲(例えばバナーやボタンだけとか必要な部分だけ)
と選べるところです。
保存形式もpngやjpg、pdfなど選べます。
ただ、画質の面では「Full Page Screen Capture」のほうが
良いような気がします(使い方の問題?)。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
3.WhatFont
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

こちらは、サイト内で使用されているフォントの種類を
調べてくれる機能拡張です。

例えば、
『このフォント、カッコイイなぁ!サイズ、行間も読みやすい!』
と思ったときに、わざわざソースコードを見なくても
この機能拡張を使えば、テキスト上にマウスオーバーするだけで
「font-family」が表示されます。
さらにクリックすると
・font-weight
・font-family
・font-size
・line-height
・color
までポップアップで表示してくれるんです。
デザインしていて、line-heightに迷うときは、これを使って
「気持ちの良い」サイト作りに活用しています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
4.Page Ruler
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

こちらはサイト上の任意の箇所のサイズを測ってくれる機能拡張です。
例えば
『この画像、サイズいくつだろう』
『ここのマージン、読みやすくていいな』
というときに、わざわざソースコードを見なくても
調べられるので大変便利です。

使い方は簡単。測りたいサイズの上でドラッグするだけ。
・Width
・Height
・Left
・Top
・Right
・Bottom
が表示されます。
ホワイトスペースを活かしたサイトをデザインする際に
他のサイトなどを参考にできるので活用しまくっています。
formやボタンなどのサイズを決める際にも活かされています。

 

★ここからは番外編

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
5.その本、図書館にあります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

その本、図書館にあります。
https://chrome.google.com/webstore/detail/%E3%81%9D%E3%81%AE%E6%9C%AC%E3%80%81%E5%9B%B3%E6%9B%B8%E9%A4%A8%E3%81%AB%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82/ldidobiipljjgfaglokcehmiljadanle?hl=ja

みなさんは本を購入したあとで、「この本、ハズレだったな」ってこと
ありませんか?
マンガや小説など好きな作家さんであれば私も無条件で買いますが、
デザイン本や技術系の本など買う際、高価なだけに大変迷います。
レビューなどを参考にしますが、自分にそれが合うかは
ある種ギャンブルです。
そこで、まずは図書館で借りて、自分に合うか使用してみてから
購入を検討します。

これは名前そのまんまですね。
Amazonで欲しい本を見つけたときに、その本が図書館にあるか
調べてくれます。
この機能拡張は、まず自分が利用する図書館を登録しておけば
Amazonで本を調べたときに、その本が
・図書館にあるか?
・利用可能か貸し出し中か
を瞬時に調べてくれます。
さらに便利なのが「予約する」をクリックすると、登録した図書館の
サイトに飛んでくれるという機能付き!!
技術系の本だけでなく、ミステリー好きで月に20冊以上乱読する私には大助かり!
本当にこの機能拡張を作ってくれた方には感謝です。

 

今回ご紹介するにあたり、「気持ちの良い」というワードを
多用してしまいましたが、見やすい・使いやすいサイトを作る上で、
フォントの種類、行間、色使い、余白は大変重要です。
自分が見て「いいな!」と思ったサイト(デザイン)は、
こういった便利な機能拡張を使い調べまくって、自身のデザインの
引き出しを増やすことをオススメします(^O^)

また、Chromeでのご紹介でしたが、Firefox版にもあると思います。
Chrome、Firefox問わず、同じような機能のものはたくさんあります。
いろいろと追加してみて、自分にあったひとつを見つけてはいかがでしょうか。
ではまた次回。

自分だけのネタ帳を作ろう

はじめまして。
デザイン担当のハシビロコウです。
FAbankのデザインを担当しています。
このブログを通じて、いろんな役立つ情報をお届けしていきたいと思います。
よろしくお願いします!

早いもので、もう1月も半分終わっちゃいましたね。
つい先日「あけましておめでとうございます」だったような…。
「今年こそは○○をするぞ!」と、お正月に決意したのに、
早くも”休憩(あくまで、休憩。決して挫折ではないw)”している人
いませんか?

うわさによると「お正月に『今年こそ○○をやるぞ!』と決意表明するのは、
目標を達成できない人の典型的なパターン」らしいです。
新年の勢いで、できそうにない大きな目標を立てるのではなく、
きちんと『自分ができる目標』を立てろ、ということらしいです。
耳が痛いですね。。。

さて。本日のテーマ。
=====================================
自分だけのネタ帳を作ろう
=====================================
です。

グラフィックデザインの仕事に長いこと従事しているせいか、
街中でラックに置かれているフリーペーパーやポストカード、お菓子の包み紙、
自宅に投函されたデリバリーのチラシ、サイトのバナーなどなど…。
自分が『いいな!』と思ったものを日々集め『ネタ帳』を作っています。

『いいな!』の基準は
・色使いがいい!
・イラストがかわいい!
・ロゴがカッコイイ!
・キャッチコピーがささる!
・デザインがGood!
・文字の処理がうまい!
・写真のポーズがおしゃれ!
・折り方がめずらしい!
…などなど。

ジャンルやデザインも、モノも何でもアリです。
特に自分ではあまりやらないデザインや色使いのものを多めに集めています。
でもこうしたものは、集め始めると、集めることに満足して二度と見返さない、
という本末転倒なこともよくある話で。
私も、整頓する時間がなくて、クリアフォルダーに入れっぱなし…ということも
よくありました。

そこで、重要なのが
=====================================
自分ルールで仕分けして、いつでも見られるようにする
=====================================
です。

私の場合は、

★派手
★シンプル

とざっくり分けて、ノートやクリアファイル、書類ボックスなどに、採取(笑)した
日付を入れて保存しています。
業界別に分けようかな、と考えたこともありますが、結局、業界でくくるより
デザインで考えることが多いのでこの分け方になっています。
スクラップを始めたばかりの頃(もう四半世紀近く前ですが…)は、
ペーパーセメント(懐かしいですね!)で貼っていたので、すっかりボロボロに。
コピーで保存し直しましたが、裏写りしちゃって無残です(泣)。

始めたきっかけは、Macを買って(初MacはPower Mac 7500/100、当時30万円以上したと
思います。秋葉原電気街で購入し、大量にくじをもらいましたが、1枚も
あたらなかった思い出が…)、高価なデザイン本が買えなかったというショボイ理由ですが、
メリットもたくさんあります。

・その時々の流行がわかる
・自分の引き出しが増える
・イメージの共有ができる
・業界ごとで必要なワードがわかる
・自分の得手不得手なデザイン・色使いがわかる
・なにより無料!!

「イメージの共有」というのは、例えばクライアントから「赤でカッコイイ感じにして」と
注文が来た場合、一言で「赤」「カッコイイ」にもいろいろとバリエーションがあります。
クライアントの頭の中でイメージしているものを『引き出す』ためにも「こんな赤ですか?」
「カッコイイというとこんな感じですか?」と、ラフを描きながらも、ネタ帳を見せることで、
イメージをガッチリつかむことができます。(もちろん、自分のポートフォリオでやるのが
一番ですが、バリエーションというイミではネタ帳でいいと思います)
そうすれば、プレゼンした際に「う~ん、なにか違うんだよね」といった恐ろしいやりとりが
格段に減ります!

また、撮影に慣れていない営業さんなどにクライアント先での撮影を依頼する場合にも、
言葉で注文を出すより、「こんな感じの写真撮ってきてください」と渡すことで、
確実に伝わります。

あとは、このネタ帳を元に
=====================================
自分だったら、こんな風に作るな
=====================================
というのを実際に作ってみます。

実際に手を動かしてやってみることで、デザインワークにも慣れますし、実作業のスピードも
上がります。こうして新しい自分の「デザインの引き出し」も増えます。

いざ「ネタ帳作るぞ!」といっても、前述の『目標』ではないですが、勢い込んで最初から
大掛かりなものを作ろうとしても、よほどマメな人じゃないと続かないし、「ごみ」を
溜め込むだけになってしまう危険性もあります。

まずは、自分なりのルール(ストックの方法)を決めて、ちょっとずつ始めてみては
いかがでしょうか。

ではまた。