もう配色に困らない!AdobeColor(カラー)の使い方

進撃の日田地区MTG開催しました!

こんにちは^ ^

日田地区を担当していますICT教育サポーターの矢幡です。m(._.)m

先日、8/10日(木)、台風接近で開催が危ぶまれましたが、何とか日田地区の自主的な勉強会「進撃の日田地区MTG」を開催させていただきました(≧∀≦)

サポーター参加者8名と事務局、TNCさん合わせて12名ご参加いただき、課題解決のグループワークなどを通して各校の問題点を探ったり、皆さんと大変有意義な時間を過ごさせていただきましたm(._.)m

Adobeカラーは無料のカラーデザインサイト!

いろいろと、研修内容を考えて実施しましたが、好評だったのが「keynoteの資料作成講座」の中のデザインについてのお話の中で、我らが講師、田中先生から教えていただいた、カラーデザインツール「Adobe Color (アドビ カラー)」の使い方でした。^ ^

Adobe ColorはAdobeが、提供している無料の配色デザインサイトです。

KeynoteやPowerPointで研修、プレゼン資料など作る時悩むのが、配色ではないでしょうか?
Adobeカラーがあれば、私の様にデザインセンスが無くても、何となくおしゃれな配色を真似るだけでカッコいい資料が作れます( ^ω^ )

↓Adobeカラーはコチラから
https://color.adobe.com/ja/create/color-wheel

カラーホイールで配色が自由自在!

Adobeカラーのサイトにアクセスするとメニューの「作成」からさまざまなカラーパレットが作成できます(^.^)

メインの色を選んで、カラーホイール(色相環)上で自由に動かすとさまざまなな色が反映されます。

・類似色
・補色
・分割補色

メインの色に似た色を自動的に選んでくれる「類似色」や互いに鮮やかさを増す補色関係の色を瞬時に選んでくれる「補色」などいろいろ用意されています。

あの名画の配色を画像から抽出!

作成で、さまざまカラーパレットが作成出来ましたね( ^ω^ )

次は、メニューの「作成」の横にある「画像」

画像を選ぶと、ファイルからドラッグアンドドロップまたは、デバイスから写真を選択するのか選びます。

今回は江戸時代の人気浮世絵師、葛飾北斎先生の名作「富嶽三十六景 神奈川沖浪裏」をチョイス!
すると、浮世絵の中の色を抽出してカラーパレットを作成してくれます^ ^

ほんとこの機能は凄いですねo(^▽^)o

瞬時に名作のカラーパターンを抽出してくれるので、抽出された色を使えば、「富嶽三十六景 神奈川沖浪裏」っぽい配色が作れます。

※グラデーションを抽出することも可能

アカウント登録をしておくと、保存ボタンでマイライブラリーに保存してくれます^ ^
便利ですね^ ^

アクセシビリティツールでスライドの読みやすさもチェック!

グラデーションの横にあるのはこれまた便利な「アクセシビリティツール」

背景色とテキスト(文字)のコントラストチェックをしてくれます。

指定した色で、コントラストをチェックしてくれて、文字の読みやすさを合格、不合格で判定してくれます(^.^)

不合格の場合は、見やすくなるコントラストを提案してくれていて「提案」を押すと、合格する見やすい文字のコントラストに調整してくれます^ ^:

自分で作成したスライド資料をチェックするときは、スライドを画像保存しておいて、カラーの読み込みを押して画像から背景色とテキストカラーを抽出してくれます。^ ^

探索からイメージに合う色を選び放題!

そして、メニュー「作成」の横に「探索」の機能があります。^ ^

この機能は文字通り、いろいろなカラーパレットを探索することが出来ます( ^ω^ )

作成では自分で色を作成しましたが、探索ではすでに出来上がったカラーパレットを選ぶだけ!

おしゃれな配色のパレットがたくさんありますよ(^。^)

「夏休み」とか日本語でもイメージカラーが検索出来る!

試しに、虫眼鏡のマークがついた検索窓に「夏休み」と入れてみると…

夏休みに関連する夏の青空と海やひまわりが咲いた配色、夏の田舎の風景写真から抽出された配色が選び放題!

青、黄色、緑など夏休みをイメージした画像のカラーが保存出来ます。

この中から、スライドのイメージする色を決めてスライドを作ると統一感がでますね^ ^

色には赤、黄色、オレンジなどの暖色系や青、緑、白などの寒色系があって暑さ寒さをイメージさせる色や
ポジティブな色や、ネガティブな色など感情を表す色もありますよね。

意図的にこう言った色を使うと、感覚に訴えかけるデザインのスライドが出来ると思います^ ^

トレンドから今流行りのカラーパターンを知ろう!

トレンドは、Adobeのプロ向け写真素材Stockから各ジャンルごとに、厳選された流行りのカラーパターンが選べます^ ^

・ファッション

・グラフィックデザイン

・イラスト

・UI/UX

・建築

・ゲームデザイン

・自然

・フード

・旅行

お気に入りのカラーパレットをマイライブラリーに保存!

作成や画像抽出、探索などで気に入ったカラーパレットは、マイライブラリーに保存出来ます^ ^

保存したカラーパレットは、ダウンロードする事ができて、JPEG形式で写真ファイルやアルバムなどに保存出来ます。

実際に、KeynoteでAdobeカラーで保存したカラーパレットを使いたい時は、画像から保存したカラーパレットをKeynoteに挿入して、カラーのスポイドツールから色を抽出します^ ^

これで、Adobeカラーで保存した色をKeynoteでも使えますね^ ^

デザイン上達のコツは真似ること!

ここまでAdobeカラーの使い方をお伝えしてきましたが、スライド資料などで使う色は、大体3色に抑えた方がいいですね^ ^

色が多いとゴチャゴチャとまとまりが無くなります。^ ^:

おすすめの配色の割合は、背景色は白で70%

メインの色は原色を使わず落ち着いた色で25%

アクセントや強調の色は、メインの補色で5%

70、25、5%このぐらいの割合をおすすめします^ ^

最後に…

デザインセンスは持って生まれたものではなく、センスは磨くものです!
そして上達のコツは真似る事!

参考サイトをご紹介します^ ^

皆様のスライド資料作りの参考になれば幸いです(≧∀≦)

alle (アレ) 日本語のスライド・企画まとめサイト
▶︎ https://the.alleslide.com/

スライド作成ツール「Prezi」Gallery見放題
▶︎ https://prezi.com/l/gallery

Slideshare 世界最大のプレゼン共有公開サイト
▶︎https://www.slideshare.net

以上、「もう配色に困らない!AdobeColor(カラー)の使い方」でした。m(._.)m

ICT教育サポーター 矢幡 正人

関連記事