配色はiPhoneだけでOK!WebデザイナーのためのiOS版Adobe Kuler入門

    
2013/10/10
    

Iphone kuler 01 こんにちわ!ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。
みなさんはWebサイトの配色、困っていませんか?

配色は難しい

配色は難しいものです。メインカラーをオレンジに決めた時、他の色が白やグレーばかりになってしまったり、 街で見かけた鮮やかなポスターや女性誌の配色を意識してみたけれど、何か違う気がする……という経験、ありますよね。リアリティのある美しいグラデーションを作るのは、並大抵のことではありません。

iPhoneを使った驚きの配色術

今回はiPhone版Adobe Kulerで撮影した写真をもとに、カンタンでキレイなグラデーションを作るコツをご紹介します。iPhoneをかざすだけでOK!驚きの配色術です。

1. 配色のネタ帳になる! Adobe Kulerとは?


配色に悩むデザイナーの方にオススメのツールが、ご存じAdobe Kuler。自然な配色をWebページで作ったり、他のユーザーに人気の配色を見ることもできます。


しかしAdobe Kulerと言えども、街で見かけた鮮やかなポスターや女性誌のイメージをKulerで再現しようとすると、なかなか大変です。

そこで今回ご紹介するのがiOS版のAdobe Kuler。なんとiPhoneのカメラをかざすだけで、一瞬で素敵な配色をスポイトしてきてくれるんです。


Image12

気になる場所にカメラをかざすと、一瞬で最適な配色をチョイスしてくれる。


カメラロールから画像を登録することもできます。
女性誌からハイセンスな配色を抽出するのも一瞬です。

IMG 6819

お気に入りの雑誌の配色を参考にしたい


画像出典: VOGUE US


それでは詳しい使い方を見ていきましょう。

1.アプリで夕日を撮る

まずはiPhoneで「Adobe Kuler」をダウンロードしましょう。

Jpeg
iTunesからダウンロード。もちろん無料




今回はカンタンな作例としてキレイな夕日を参考に、美しくリアルなグラデーションを作ってみましょう。
アプリを起動するとさっそくカメラが立ち上がり、画面内の色を元にクールな配色を選んでくれます。これでキレイな夕焼けや朝焼けを写しましょう。

Image17

カメラを向けると一瞬で配色を決めてくれる。面倒な操作は一切不要


2.採取する色を調整する

取りたい色があるときは、スポイトをタップしたままスライドさせればOK。


Image08

微調整可能!


左からダンダンと色が変わるようにしておけば分かりやすいですね。
作ったあとに細かい調整を行うこともできますので、厳密でなくても大丈夫です。


Image10

グラデーションを順番に並べておくと後々ラクになります


3.Photoshopで開けるようにする

OKボタンを押して完了です。これまでに作った色テーマも見ることができます。

Image00

いままで作った色がストックされていく


Photoshopで開くにはAdobeアカウントがあった方がラクチンです。アカウントを作成しログインしておけば、KulerのWebサイト上にも同期され便利です。

Image11

Adobe IDでログインすると自動的に同期される


iPhoneで作ったテーマがKulerのWebサイト上にも反映されるのでダウンロードします。

Image09

作った配色はアセットファイルとして出力される


ダウンロードしたい配色の上にマウスを載せると「Download」というボタンが表示さるのでクリック。ファイルの保存場所はどこでも大丈夫です。

※ Photoshopで作ったものをWebからそのまま開けるようになるといいのですが、まだできないようです。


4.Photoshopで開く

アセットファイル(拡張子:ASE)として保存されるので、CS6以降の場合はPhotoshopのアイコンにドラッグ&ドロップすればスウォッチとして登録されます。

Image01

Adobe Kulerの配色をPhotoshopに読み込むには、アセットファイルを一度書き出す必要がある


CS6以前の場合や、うまく認識されない場合、Photoshopのスウォッチパネルから読み込みましょう。

スウォッチパネルの右上に小さな矢印アイコンがあります。クリックするとオプションメニューが開きますので「スウォッチの読み込み」を選択して、さきほどダウンロードしたaseファイルを開きましょう。

Image02

5.グラデーションを作る


今回は夕焼けを使い、自然なグラデーションを再現してみます。
この画像を夕焼けにしてみましょう。

Image19

空を除外して太陽を追加、さらに地面も夕焼けらしい色に変更しておきます。

Image06
先ほど作った配色をグラデーションにしました。

Image18
Kulerで取得したグラデーションを入れると、こんなふうに夕焼け空が表現できます。
円形にしたり、ノイズを入れるとよりそれっぽくなります。
Image05

かなり自然な夕焼け空が作れました



6. Webデザインに応用する


もちろんWebデザインへの応用だってできます。散歩にでかけた時に見つけたキレイな夕日を元に、以下のような配色がとれたのでさっそくWebデザインに応用してみました。

Image13
このページは火星をイメージした配色です。夕日をもとに調整を加えた配色がバッチリ決まってます!(このページの元写真は、富士山山頂からの景色です)

Image15

(応用編)よりリアルにするには?

ここまで見てきたように、グラデーションは何も参考にせずパレットの上だけで作るとウソっぽくなってしまいます。リアルとリアリティには差があり、デザインで求めてられているのは限りなくリアルに近い「リアリティ」であることが多いのです。

青空は青一色じゃない

頭の中にイメージはあっても、Photoshop上だけで色を組み合わせグラデーションを作ると、思い通りにならなくて「なにか違う……」と思ってしまうこと、多いですよね。たとえば「青空」を表現する時に、どうしても見たままの色ではなく「空は青いもの」というイメージが先行して、青と白だけでグラデーションを作ってしまうのです。

Image14

(左)青→白のみで作ったグラデーション。真ん中がうすぼやけた色になってしまう。(右)中間に赤を含めた色を加えたところ、自然な青空を表現できた。空は上にいくにつれて青味を増すが、下部はさまざまな色が入っている


iPhone Kulerを実際の空にかざすと青→白といった単調な色味にはならないはず。間の色を細かに設定することでよりキレイなグラデーションを作ることができます。

iPhone Kulerを使わない時でも覚えておいて損はないでしょう。

まとめ

理想とする色を掴むためにも、独断と偏見で決めた色でなく、今回見てきたように日常の風景から配色を抽出するのがおすすめです。ぜひKulerを使ってさまざまな色の組み合わせを試してみてください。

これを機に、iPhone Kulerを持ってのお散歩、はじめてみませんか? 日常のいろんなところに素敵な配色、転がっているはずです。

著者

イシジマ ミキ ( ザ・マーズナレッジ )
1393233_10201372008555038_925818335_n デザイン業の他、執筆やコワーキングスペース事業も。表現でなく考え方で遊びを持たせるものが作りたい。越冬できるキリギリスを目指して、少し働いて好きに遊べるよう人生実験中。好きな言葉は「人生を棒にふるくらいヒマとゆとりをもって遊ぼう」。制作実績など掲載、おまけでデザインの考え方や制作フローも書いています。
http://blog.woopsdez.jp
・twitter : @woopsdez
・facebook : http://facebook.com/woopsdez

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2017 mixi recruitment, Inc. all rights reserved.