Smartphone スマホ

 
スマホデザイン・UI

【効率化ツール】Webサイト制作に役立つスマホアプリ

カラーの打ち合わせ

Webデザインを構築する時に、まず何を考えるでしょうか?
ターゲット、コンセプト、サイトの方向性などさまざまあると思います。それに応じてデザインのトンマナを決めますよね。
すでに優れたWebデザインのまとめサイトや、参考になる相性のいい色の組み合わせなどをまとめたサイトなどがたくさんありますが、今回は私が最近ちょっとハマっているスマホアプリをご紹介します。

トンマナを固めるときに役立つアプリ「色彩ヘルパー」

PhotoshopやIllustrator、ブラウザ上のアドオンなど、PC上で気になった色をピックアップしてRGBやCMYKの数値を教えてくれるツールはさまざまにありますが、スマホ上で同等の役割を果たしてくれるツールはなかなか無いですよね。
そこで最近見つけたのがこのアプリ「色彩ヘルパー」。これはiPhoneの画面上で気になる色を、スポイトツールのようにピックアップできるアプリです。しかも、RGBやCMYK値だけでなく、色の名前まで教えてくれる画期的機能付き。日本語は単純な赤、青、黄色などの色名だけでなく、茜色や藤色、向日葵色などさまざまな色名があります。知識としては知っていても、名前だけで具体的な想像がつきにくい色名もたくさんありますよね。
特にWebディレクターはデザインの司令塔にもなるので、共通認識として色名は知っておきたいところ。
「色の名前は知っているけど、どんな色かわからない」「こんな色にしたいけど、どう指示していいかわからない」そんなときに役立つアプリです。

色彩ヘルパーでできること

では、色彩ヘルパーでできることを具体的に紹介しますね。

カメラに写した色をピックアップ!

私にとって便利だと思ったのはこちらの機能。百聞は一見にしかず、ということで早速やってみたのでご覧ください。

カメラに写した色をピックアップ

カメラに写した色をピックアップ

こちら、写っているのは私のスマホケースです。実際はもう少し明るめの色なんですが、黄色系だと思っていたら実は抹茶色、つまり黄緑よりの色味だったとは・・・驚きです。まぁ、照明の関係もあるので一概にこれは抹茶色!とは言えないのですが、少なくとも色の方向性の指針としては十分なのではないでしょうか。
例えば、雑誌や写真で使われている素敵な配色を参考にしたいとき、この機能を使ってしまえば簡単に何系の色を使えば似た配色になるかがわかるのです。クライアントから「この写真と似たような雰囲気のサイトにしてくれ」と言われたときに、このアプリがあればどんな色が使用されているかが分かるのでその場で共通のイメージを作りやすいですよね。
ちなみに、ピックアップしたい部分はタップやスライドで移動可能です。

カメラロールにある写真から色をピックアップ!

前途した「カメラに写した色をピックアップ」と基本の機能は変わりませんが、こちらはすでに撮影またはiPhone上に保存してある写真を読み込んで、色のピックアップができます。
試しにちょうどカメラロールにあったバラの花束の写真から、花びらと茎の色をピックアップしてみました。

左→バラの花びら:カーマイン、右→バラの茎:鶯色

左→バラの花びら:カーマイン、右→バラの茎:鶯色

てっきり花びらのほうは「バラ色」とかが表示されると思ったんですが・・・いい意味で期待を裏切られました。茎の色は比較的明るめに写っている色を選択したつもりでしたが、意外とくすんだ色味の鶯色が表示されました。
人物写真や風景写真も試してみましたが、普段想像している色の名前よりも「えっ? この色が出てくるの?」と驚かされることばかり。まぁ、写真なので実際の色とは違うというのは当たり前なのですが・・・。デザイン以外にもイラストレーターさんの着色の参考にもなりそうですね。

ピックアップした色を保存できるクリップ機能

こちらは上記のカメラや写真からピックアップした色を保存しておける、クリップ機能。画像で言うと、左の画像の下のほうに「色クリップ」とあるのがそれです。

左→保存した色一覧、右→保存した色の個別データ

左→保存した色一覧、右→保存した色の個別データ

気になった色をクリップできるので、相性の良さそうな色の組み合わせも保存できるのがいいところ。「あの時言ってたあの色の組み合わせ、何だっけ?」と悩まなくて済むのはうれしいですね。

JIS規格の色見本付きで、5種類の色一覧を見ることが可能

ちなみに私は、アプリの機能の中では一番この色見本を見ています。どんな色の名前があってどんな色なのか、普段から目にしておかないとパッと思い浮かんでこないので・・・。

左→5種類の色見本、右→物体名の色名(慣用色)一覧

左→5種類の色見本、右→物体名の色名(慣用色)一覧

ピンク系と一口に言っても、これだけの数があると思うと全部覚えてカラーマスターになりたいとさえ思いますよね!

ピックアップ時の選択範囲の設定が可能

その他に設定できるものとして、色をピックアップする際の選択範囲や、パネルの透明度などを変更できます。スマホは画面が小さいですから、自分の使いやすいように表示を設定できるのがうれしいですね。

ピックアップ時の範囲指定や表示設定など

ピックアップ時の範囲指定や表示設定など

PC上だけでなくスマホ上でもピックアップできることが画期的

今回ご紹介した「色彩ヘルパー」の画期的な点は、スマホの画面上で気になる色をその場でピックアップできること。使いどころとして、例えばサイトデザインなどの打ち合わせ中にスマホで共通認識の色名を定められると便利ですよね。色クリップ機能を活かして、その場でサイトの使用カラーを定めることも可能ですし、まさに効率化にピッタリのツールと言えます。
打ち合わせの中でターゲットやコンセプトなどを決められても、トンマナイメージがあやふやな状態のままデザインフェーズに進んでしまった場合、イメージに合うデザインになるまで出し戻しの繰り返しで、最終的に何がよくて何がダメだったのかも分からない状態になってしまうことも・・・。成果物は良いものができたとしても、工数や制作費に見合わない場合、今後も同じ方と一緒に仕事をしたいと思える方は少ないのではないでしょうか?
ディレクターは制作進行がメイン業務です。そのディレクターを名乗るのですから、制作チームが最大限の力を発揮できるように、いかに気持ちよく効率的に仕事ができるかを優先的に考えてみてはいかがでしょうか?

今回は私がiPhoneユーザーなので、iPhoneアプリのご紹介になってしまいましたが、少し調べたら同じような機能のアプリがAndroidにもあったので、気になる方は調べてみると今後のお仕事がうまく行くかもしれませんね。

タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事