![]()
もくじ
- 使用フォント・サイズを決める
- カラーパレットを作る
- Illustratorでデザイン
- デザインをIllustratorからPowerPoint形式に変換
- PowerPointで読み込み・最終調整
- 媒体資料デザインに役立つフリー素材＆サービス
- 資料デザインのインスピレーションを得られるサイト
1. 使用フォント・サイズを決める
いざ資料を印刷してみた時に、「なんだか読みづらい」と感じる資料だと商談相手に読んでもらえないかもしれませんよね。手に取った時にきちんと内容が伝わるよう、適切なフォントや文字サイズを知っておきましょう。
基本的にはゴシック体を使用する
明朝体は可読性（長い間読んでいても疲れにくい「読みやすさ」のこと）が高いフォントと言われていますが、媒体資料の場合は疲れが生じるほど長文になることはほぼありません。であれば、視認性（パッと見ただけでも認識できる「見やすさ」のこと）の高いゴシック体を使うのがベターです。
![明朝体・ゴシック体]()
とは言っても、必ずしも明朝体を使うのがNGということでもありません。例えば、「BLOGOS」の媒体資料では、見出しや短いテキストに明朝体が用いられており、それによって媒体の洗練された雰囲気が強く印象づけられています。
基本的には資料にはゴシック体を用いたほうが適切ですが、デザインに意味をもたせる場合には、あえて部分的に明朝体を用いるケースもあります。
![BLOGOS媒体資料]()
互換性を重視するなら標準インストールされているフォントを
どんなに優れたデザインでも、デザイナーの選んだフォントが他の編集者のPCに入っておらず、見た目が変わってしまったら台無しですよね。そんな事態を防ぐためには、フォントはPCに標準インストールされているものを選ぶ必要があります。
また、その際にはデザイナーと営業など、編集する人同士の使用OSも確認しておきましょう！
![互換性を重視するなら標準インストールされているフォントを]()
和文フォント・欧文フォントを使い分ける
英単語や数字を表記する際には英数字に特化した欧文フォントを使用したほうが、より文章が読みやすくなります。媒体資料で言うところのページビュー数や価格などの表記ですね。
とはいえ、中には文字のサイズや太さが合わなかったりと相性の悪いフォントの組み合わせもあるので、実際に使ってみて、より自然に和文の中に馴染む欧文フォントを見つけましょう。
![和文フォント・欧文フォントを使い分ける]()
おすすめ和文フォント
「メイリオ」はWindowsに標準インストールされているフォントです。視認性もいいため、資料を複数人で編集する場合はこのフォントを使えば間違いないかと思います。
また、使用OSがMacであれば、標準インストールされている「ヒラギノ角ゴ」、OSがWIndowsとMacでバラバラの場合などは両方に共通でインストールされている「游ゴシック体」を使うといいかもしれません。
![資料作りにおすすめの和文フォント]()
おすすめ欧文フォント
「Segoe UI」はWindowsに標準インストールされており、太さや大きさなどがメイリオと組み合わせた時に相性がいいフォントです。また、使用OSがMacなら、可読性もよく、デザイン性にも優れている「Helvetica」が多くの場面で活躍してくれそうです。
なお、WindowsでもHelveticaと似た雰囲気のフォントを使いたいなら、「Arial」というフォントが限りなくHelveticaに似た書体として知られています。WindowsにもMacにも標準インストールされているため、使い勝手も抜群です。
![資料作りにおすすめの欧文フォント]()
読みやすいフォントサイズを知る
基準となるフォントサイズを決めておくと、デザインの過程でもスムーズになります。私は制作する際、以下のように大まかなサイズ感を決めてからデザインに入りました。
- スライドタイトル：32pt
- 見出し：20pt〜22pt
- 本文：14pt〜16pt
- 注釈など：8pt〜10pt
![読みやすいフォントサイズを知る]()
スライドタイトル（32pt）
![スライドタイトル（32pt）]()
「スライドタイトル」は全スライドで共通の場所に入るタイトルです。そのページに書かれていることを一言で表現するものなので、きちんと目に入るよう一番大きく設定します。
見出し（20〜22pt）
![見出し（20〜22pt）]()
「見出し」はスライド内の内容を細分化する時や、内容を強調したい時、一言で説明する時などに用います。デザインにメリハリをつける役割でもあるため、しっかりと読み手の目に留まるよう、本文よりも大き目のサイズに。
本文（14pt〜16pt）
![本文（14pt〜16pt）]()
「本文」は説明文や箇条書きなど資料を形成する文章にあたるものなので、フォントサイズの基準とも言えます。14pt〜16pt程度が文章として読みやすいフォントサイズです。
注釈（8pt〜10pt）
![注釈（8pt〜10pt）]()
「注釈」は文章を補足したりする注意書きにあたるものなので、本文より小さいサイズで記載します。個人的にはどんなに小さくても8ptまでが、無理なく読めるギリギリのラインだと考えています。
参考サイト
読みやすい資料を制作するための適切なフォントサイズについては、以下のサイトが参考になりました。なんとサンプルのパワーポイントデータまでダウンロードできます！
2.カラーパレットを作る
カラーパレットを作ることで資料の雰囲気が統一されるのはもちろん、媒体カラーも印象づけることができます。色数はあまり多くなるとゴチャゴチャしてしまうので、5〜6色までにしておくとデザインがまとまりやすいです。
以下はある媒体資料を作成した時のカラーパレットです。カラーパレットを作ったら、それ以外の色はなるべく使わないよう心がけました。
![カラーパレット]()
カラーパレットを作成するツールはたくさんありますが、私のお気に入りはAdobe Color CCです。オンラインでカラーパレットを作成でき、Adobe IDを持っていれば作ったテーマを保存しておけるという利点もあります。
![Adobe Color CC]()
Adobe Color CC
3. Illustratorでデザイン
デザインの方向性が決まったら、さっそく制作に入りましょう。使うツールは好きなものでいいと思いますが、私の場合はデータをPowerPoint形式に変換する必要があったため、Illustratorで作成しました。
アートボード機能が便利！
Illustratorにはひとつのファイルで複数のキャンバスを描ける「アートボード」という便利な機能があります。資料はどうしても複数ページになるため、アートボードを使えば、ページごとの管理もグッと楽になりますよ。（最近はPhotoshopでもアートボード機能が使えますけどね！）
![Illustratorアートボード機能]()
アートボードのオプション
新規ドキュメントの作成で、以下のようにオプションを設定します。PowerPoint形式で横向きの資料を作成する場合は、A4を横にしたサイズに設定すればOKです。
ちなみに、上下左右に余白を作らないデザインにする場合、3mm程度の塗り足しを作っておくと、PowerPointに配置する時に便利ですよ！
![Illustratorオプション画面]()
参考サイト
Illustratorで資料を作成する時の設定や作り方のコツが詳しく記載されています。
Illustratorならグラフ作成も簡単！
媒体資料に必須なグラフ作成にもIllustratorが便利です。グラフはPowerPointでも簡単に作成できますが、やはりIllustratorのほうが圧倒的にデザインしやすいんですよね。
データを読み込んでグラフを作成できるので、後で値を変更したりもできます。
![Illustratorでグラフを作る]()
参考サイト
作成方法は、以下のサイトで大変わかりやすく紹介してくださっています！
4. デザインをIllustratorからPowerPoint形式に変換
Illustratorで作ったデザインをPowerPointで読み込めるようにする方法は、以下の3通りの方法があります。
- IllustratorでWMFに書きだし→PowerPointで読み込む
- IllustratorでPDFに書き出し→AcrobatでPowerPoint形式に変換
- IllustratorでPNGに書き出し→PowerPointに貼り付け
私は1番目の「WMF(Windows MetaFile )」形式で書き出すという手段をとりました。少し手間がかかりますが、Illustratorで作った図やイラストを、形や色を維持したままPowerPointで編集することができます。
ですが、複雑なデザインの場合は変換の際に色々と不具合も多く出るため、3番目の「PNGに書き出してPowerPointに貼り付ける」方法が確実です。
WMFの書き出し手順
Illustratorでの書き出し手順は以下の通り。
ファイル→書き出し→書き出し形式→「Windows MetaFile (wmf)」を選択→書き出し
![Illustrator書き出し画面]()
5. PowerPointで読み込み＆最終調整
Illustratorから書き出したWMFをPowerPointで読み込んだら、ここでデザインの最終調整をしていきます。
5. WMFを読み込む手順
PowerPointでの読み込み手順は以下の通り。
挿入→図→「ファイルから…」を選択→書き出したWMFファイルを読み込む
位置やサイズに若干のズレがありますが、うまく微調整して配置しましょう。読み込み時は、ファイルは全てグループ化されているため、必要に応じてグループ化の解除を行ってください。
![PowerPointで読み込み]()
注意点としては、Illustratorでパスで描いたオブジェクトはPowerPointでは「オートシェイプ」となるため、後から色や形を変更できます。ですが、グラデーションなどをつけたオブジェクトの場合は「図」として変換されるため、PowerPointで後から編集することはできません。
また、テキストも編集できなくはないですが、文字詰めしたテキストについては1文字ずつバラバラになってしまうので注意が必要です。
参考サイト
llustratorからWMF形式に書き出してPowerPointで読み込む時の手順や、注意点については、以下のサイトに詳細に記載されています。もっと知りたい方はこちらをご参照ください。
最新版ならもっと簡単にPowerPoint形式に変換できる！
使っていたIllustratorやPowerPointのバージョンが古かったため実践できませんでしたが、Adobe CCやOfficeの最新版では、なんとコピー&ペーストでIllustratorで作ったオブジェクトをPowerPointで使えるらしいのです。
しかも、やりとりはSVGで行われるので、後からサイズや色の変更もできるとのこと。すごすぎる！！私のあの苦労はなんだったのでしょうか。
どのバージョン以降なら実現可能なのか詳しくはわかりませんが、情報科学屋さんを目指す人のメモの記事によると、「Office 365 Solo版 PowerPoint 2016 バージョン 1701 (ビルド 7766.2060）」+「Adobe Ilustrator CC 2017.0.2 21.0.2 (64-bit)」でなら可能とのことでした。
詳しくは以下の記事をご参照ください！
6. 媒体資料デザインに役立つフリー素材
最後に、媒体資料をデザインする時にとってもお世話になった素材サイトや参考になる記事をご紹介します！
アイコン
![媒体資料デザインに役立つフリー素材（アイコン）]()
グラフなどに、アイコンを加えてひと工夫加えるだけで、グッとわかりやすくなります！
ICOOON MONO
今回と言わずいつもお世話になっているアイコン素材サイト。なんと6000個以上のアイコン素材がダウンロード可能！ここに来れば大体どんなアイコンも揃うという安心感があります。
![ICOOON MONO]()
ICOOON MONO
icon rainbow
こちらも多くのフリーのアイコン素材を配布してしているサイト。マーケティング関連のアイコンが多い印象なので資料デザインには重宝しそう！
![icon rainbow]()
icon rainbow
iconSweets2
「iconSweets2」というアイコン集をパワーポイント向けにコンバートし、配布してくださっています！IllustratorなどのデザインツールがなくてもPowerPoint上でアイコンが使えるため、資料作りに重宝しますね。アイコンの収録数は全部で331個とのこと。
![iconSweets2]()
プレゼン資料の表現力が増す！ビジネス用途に使いやすいフリーアイコン（×331個）のご紹介｜PowerPoint Design
FLAT ICON DESIGN
フラットデザイン風のアイコンがダウンロードできる素材サイト。カラーバリエーションも豊富なため、デザインの手間を大幅に削減できます！実は、この記事のアイキャッチにもお世話になってます！
![FLAT ICON DESIGN]()
FLAT ICON DESIGN
human pictogram 2.0
インフォグラフィック作成に重宝するピクトグラムをダウンロードできる素材サイト。ピクトグラムは男女比のグラフなどでよく使われてますよね！
![human pictogram 2.0]()
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
モックアップ
![媒体資料デザインに役立つフリー素材（モックアップ）]()
PCやスマートフォンなどの画像にサイトのキャプチャを当てはめるのに重宝するモックアップ素材とWebサービスをご紹介！
3flab inc. | Vector Materials
さまざまなIllustratorのスクリプトを無料で公開してくださっている「株式会社三階ラボ」さんのダウンロードコンテンツ。iMacやiPhoneなどのフラットなモックアップ素材もベクターデータで配布してくださっています！
モックアップ素材は他にもたくさんありますが、ベクターデータの素材って意外と少なかったので、本当に重宝します！
![3flab inc. | Vector Materials]()
3flab inc. | Vector Materials
Dimmy.Club
PCやスマートフォンのモックアップにサイトのキャプチャをはめこみ、ダウンロードできるWebサービス。最近知ったのでまだ使ったことはないですが、すごく資料作りに重宝しそうです！
機能自体はいたってシンプルですが、カラーバリエーションが選べたり、立体的なデザインとフラットデザインの2種類が用意されているのが便利だな〜と思いました。（ただし、ライセンスの記載が見当たらないため、使用に関しては自己責任でお願いします）
![Dimmy.Club]()
Dimmy.club
7. 資料デザインのインスピレーションを得られるサイト
情報をより直感的にわかりやすく見せることができるインフォグラフィックは、資料作成に欠かせませんよね。デザインのインスピレーションを得られるサイトをご紹介します！
infographic.jp
![infographic.jp]()
インフォグラフィックのギャラリーサイト。他にもインフォグラフィックのギャラリーサイトは複数ありますが、個人的にはここが見やすいと感じています。
infographic.jp - インフォグラフィックス by econte
Pinterest
![Pinterest]()
今回に限らず、私はよくデザイン制作時にはPinterestでデザインの情報収集をしています。「インフォグラフィック」など特定のキーワードで検索するとたくさんヒットするので、デザインをザーッと一覧で見渡したい人にはこちらがオススメ。
Pinterest
Pixeden
![Pixeden]()
インフォグラフィックの素材が無料でダウンロードできます！
Displaying items by tag: infographic | Pixeden
さいごに
初の前後編となった「媒体資料のデザインを制作した時の手順【デザイン編】」でした。デザインより前の段階の【構成編】は以下の記事にまとめましたので、興味があればぜひ見てみてください！
以上、彩でした！
年賀状素材の専門サイト。テンプレートやイラスト、背景、文字パーツに至るまで幅広く配布しています。また、年賀状の文例まで用意してあるという、かゆいところに手が届く便利なサイト。
年賀状テンプレート・年賀状素材の無料ダウンロードサイト「年賀状AC」
「イベントデザイン」は、正月などの行事やイベント向けの可愛いイラストを配布している素材サイト。ベクターデータだけでなく、EPSやSVG、PNGやJPGなど様々な形式でダウンロードできるのでとても魅力。
お正月 | クリスマス・ハロウィン、お正月イラストEVENTs Design
「イベントデザイン」の系列サイトである「シルエットデザイン」。いろいろなシルエット素材が置いてありますが、中には年賀状作成に便利な和風のシルエットも。
以下では年賀状デザインに使えるシルエットをピックアップ！
先述した「年賀状AC」の系列サイト「シルエットAC」。無料会員だとダウンロードできる形式はJPG・PNGのみで、AIなどのベクターデータをダウンロードするにはプレミアム会員になる必要あり。「年賀状」で絞り込むと年賀状デザインに便利なシルエットが見つかります。
年賀状｜シルエット イラストの無料ダウンロードサイト「シルエットAC」
「シルエットAC」や「年賀状AC」の系列サイトである「イラストAC」。色々なシーンで使える無料イラストが用意してあります。無料会員だと1日に1回だけベクターデータがダウンロードできます。PNGやJPGは何回でもOK。こちらも「正月」で絞り込むと年賀状デザインに便利なイラストが見つかります。
正月イラスト／無料イラストなら「イラストAC」
前回書いた「秋らしいデザインを制作する時に参考になるWebサイト＆紅葉や落ち葉のフリー素材まとめ」という記事でもご紹介したフリーのベクター素材配布サイト「ベクタークラブ」。「イベント・季節行事」のタグで絞り込むと正月っぽいベクター素材が見つかります！
以下では年賀状デザインに使えるベクターイラストをピックアップ。
「ピクト缶」は、ポップなベクターイラストが豊富な素材サイト。EPSとPNG両方の形式で同時にダウンロードできますよ。カテゴリーの「季節の行事」や「正月」のタグで絞り込むと可愛い和風イラストが見つかります。
「素材ライブラリー」は、年賀状イラストはもちろん地図のベクターイラストやぬり絵・線画イラスト、フレームなど幅広いジャンルのイラスト素材を配布してあるサイト。しかも、EPS,JPG,PNGの3種類の形式が一括ダウンロードできてとても便利！喪中はがきテンプレートもあるので助かりますね。「年賀状」タグで絞り込むと正月っぽいイラストがたくさん見つかります。
年賀状 | 全てのイラストが無料・かわいいテンプレート
少し前の記事ですが、Handy Web Designさんで年賀状用のフリー素材を配布してくださっています。切り絵や版画のように角ばったラフ感がいいですね。ベクターデータで作られているので使いやすそう。
年賀状に使えそうなフリー素材を作ってみました。 | Handy Web Design
あたたかみのあるイラスト素材が豊富なサイト「いらすとや」。ダウンロード形式はPNGのみですが、印刷にも使える大きいサイズなので大丈夫！イラストだけでなく、「明けましておめでとう」などの賀詞やテンプレートも見つかるので便利。
「お正月」や「お年賀状」というタグで絞り込むと年賀状デザインに使えるイラストが見つかります。
「イラストK」は、コラージュ風の可愛いイラストが見つかる素材サイト。イラストだけでなく、置いてある素材を使った年賀状テンプレートも置いてあるので、素材の活用例の参考にもできますね。「年賀状」というタグで絞り込むと、干支のイラスト素材が見つかります。こちらも配布形式はPNGです。
和柄のフリー素材サイトですが、和風のイラストや写真も配布してくださっています！パターンはAIやEPS、高画質なJPG形式など様々な形式でダウンロードできるのが魅力。印刷データを作る時も困りません！
和柄商用フリー素材【wargo pattern】
日本の伝統文様やパターンを配布しているサイト。日本の伝統色もカラーコードつきで掲載されているため、配色決めにも便利。
粋屋-日本の伝統文様と伝統色
フリーのテクスチャを配布しているサイト。和紙のテクスチャが見つかります。ダウンロード形式はJPGですが、印刷にも対応できる大きいサイズなので安心！また、素材によってはPhotoshopにパターン登録できるPATファイルも同時にダウンロードできます。
フリーテクスチャ素材館／トップページ(Top Page)
千代紙をイメージしたようなカラフルな和風のパターン。かなり色彩が鮮やかでインパクトがあるため、背景に敷くよりは部分的に使用するのに向いているかも。ダウンロード形式はPhotoshop用のパターンファイルであるPATファイル。
Japanese style pattern by gimei on DeviantArt
「写真AC」は「年賀状AC」や「イラストAC」の系列サイト。年賀状にピッタリな写真素材や、背景にも使えそうな画像が見つかります。Largeサイズの写真素材は無料会員の場合は1日1回ダウンロードできます。プレミアム会員なら無制限でダウンロード可能。
「年賀状」タグで絞り込むと使える素材がたくさん見つけられますよ。
年賀状｜写真素材なら「写真AC」無料（フリー）ダウンロードOK
色々なテイストの年賀状のテンプレートを豊富に配布しているサイト。イチからデザインするのではなく、簡単に可愛い年賀状を作りたい時に最適！
年賀状2016無料イラスト素材集 - おしゃれ、かわいい、筆文字、和風、猿…
私がよく素材探しでお世話になっているのは、たくさんのテクスチャを配布してくださっている「
ちなみに、このスクロールフィルタの「ラップアラウンド」は言葉では説明しづらいので、ちゃんと知りたい人は以下のLIGさんの記事を参照してください。とてもわかりやすく「ラップアラウンド」の説明をしてくれていますよ。
コピースタンプツールは好きなブラシを使うことができます。私はたいてい「基本ブラシ」の中の「ソフトメカニカル」という輪郭がボヤボヤしたブラシをつかっています。今回は48pxの大きさのものを選択。こちらは用途に合わせてお好みで調整してくださいね。
中央の継ぎ目付近で何回かコピースタンプツールを使ってなじませると、だいぶ継ぎ目が目立たなくなりました！
ここでもう一度「スクロール」フィルタを適用して中央付近の継ぎ目を端に移動させます。すると・・・
シームレスパターンのできあがり！
このパターンを「編集」→「パターンを定義」でPhotoshopにパターン登録します。これで、どんなに大きなカンバスでもずっと続くシームレスパターンが適用できますよー！
なんか、急いで作ったのでよくよく見るとちょっと不自然な出来かもしれませんが、コピースタンプの段階で綺麗に継ぎ目を修正できればもっとうまく繋がりますよー！
会社では女性向けのデザインなんてほとんど手掛ける機会がなく、実は私自身「ガーリー」なデザインとは無縁でその辺りのセンスがまるでゼロです…。ですが、美容院のターゲットといえば何と言っても「女性」！この機会に色々な記事やスライドを読んで女性に好まれるデザインの研究をしました。
上：表面 / 下：裏面[/caption]
「Clement Salon Bull（クレメント サロン ブル）」さんと「alpha（アルファ）」さんは姉妹店のため、ほぼ同じデザインで2店舗ぶん制作しました。私がいつもお世話になっているのは「Bull」さんですが、どちらの店舗も店員さんが優しく、技術力も確かなので安心してお任せできます。また、お店の内装がとてもオシャレで、なんとデザイナーさんに依頼せずオーナー自らがデザインやインテリアをセレクトしているのだとか。
私は超がつくほどのくせ毛で、それをどうにかするためにパーマやカラーなど色々やりすぎて髪がボロボロになってしまい、数年前にこちらに駆け込みました。その際、とても丁寧に話をきいてスタイリングやヘアケアをしていただいたため、それ以来ずっとお世話になっています。
ちなみにカラーなどの待ち時間で出してくれるコーヒーがとても美味しいので、コーヒー好きにもオススメです。機会があればぜひ！
以上、彩がお送りしました。
上記の錯視についての解釈はいくつかあるらしいですが、どれも無意識に矢印の斜め線も含めて長さを測ってしまうためだったり、「下の矢印の方が遠くにある」と認識するためだったりと、受け取った情報を脳が自動的に補完してしまうことが原因とされています。
このように、たとえデザイン上のふたつの要素が全く同じ大きさや色でも、ユーザーにとっては違うように見えてしまうことがあり得るのです。
次からは、私がWebデザインの際に遭遇した錯視と、それに対する視覚調整の方法を挙げていきます。
これは、白が「膨張（進出）色」であるのに対し、青が「収縮（後退）色」であることが原因で起こる錯覚です。文字通り、「膨張（進出）色」とは他の色に比べて膨らんだり進出して見える色のことです。白などの明度の高い色や、オレンジなどの暖色が膨張（進出）色にあたります。反対に、黒などの明度の低い色や青などの寒色は「収縮（後退）色」と呼ばれます。
そのため、左側の白抜き文字は実際の大きさより大きく感じられます。これを回避するために、デザイン時はあらかじめ白抜き文字のフォントサイズを1px小さくしておくなどしてバランスを取ってあげる必要があります。
※膨張（進出）色と収縮（後退）色の効果については、以下の記事でも触れていますので、あわせて読んでみてください！
ここでは、ふたつの錯視が働いています。まずひとつは先述した「色の膨張（進出）・収縮（後退）」の錯視。明度の高い背景（白）に対し、明度の低い見出し（黒）は収縮して見えます。
もうひとつは、色と色の隣接部分で起こる「縁辺対比」という錯視です。以下の図を見ると、ひとつひとつの色の左側は暗く、右側は明るく見えませんか？これは、色の隣接部分で隣の色との明度差が強調されて認識されてしまうために、まるでひとつひとつの色が波を打つように感じられる現象です。
この錯視によって、要素全体を囲っているグレーのボーダーは、黒い見出しに隣接している部分では元のグレーより明るく見え、ボーダーの存在を感じにくくなります。すると、全体で見た時に見出しの部分でボーダーが途切れてしまっているような印象を受けるため、先述した「キュッと」引き締まって見える錯覚が起きるのです。
この現象を回避するためには、要素全体をボーダーで囲ってしまうよりも、見出しだけ1pxずつ横幅を広くして調整するなど一手間を加えることでバランスを取ることができます。
「色の面積効果」とは、明るい色は小さな面積で見た場合に比べ、面積が大きくなるにつれて、より明るく見えるという錯視です。逆もまた然りで、暗い色の場合は大きな面積になるにつれてより暗く見えます。この場合は、アイコンのほうが面積が大きいためにテキストより明るく見えたということになりますね。
これを回避するためには、ふたつを全く同じ色にするのではなく、テキストの色の明度を上げるなどして調整する必要があります。
ちなみに、このような微妙な加減の調節には、HSBまたはHSLモードを使用するとやりやすいですよ！たとえば以下の図では右側のテキストの部分で、PhotoshopのHSBモードでS（彩度）とB（明度）の値をそれぞれ5%ほど調整しています。HSLモードではBではなくL（輝度）という指標を使って調整します。
さきほどの例をもっと極端にしたのが以下の図です。赤色を背景にしたオレンジ色と、黄色を背景にしたオレンジ色がありますが、どちらも同じオレンジ色なのに違った色に見えます。
赤を背景にしたオレンジ色は、赤の補色である青緑色方向に誘導されて黄色に近づくことで、実際の色よりも黄色っぽく見えます。対して、黄色を背景にしたオレンジ色は、黄色の補色である青紫方向へ誘導されて、より赤みを増して見えます。
ここでも、錯視を避けるためにはどちらかのテキストの色を微調節してあげる必要があります。以下の図では、赤ベースのテキストに少し赤みをプラスして、黄色ベースのテキストとの印象を合わせています。
基本ステージはフォントの中から1文字だけ違うフォントを見つける間違い探し。最初は明らかにちがうものばかりですが、後半はよーく画面を眺めるか、フォントに精通していないとクリアが難しくなってきます。
他にも「覚えて当てて」や「マニアッククイズ」というミニゲームもあります！「覚えて当てて」は、フォントについてよく知らない人や、新米デザイナーに最適なゲームではないでしょうか。
逆に、「マニアッククイズ」は、フォントにかなり詳しい玄人デザイナー向けな印象を受けました。かくいう私も全然フォントには詳しくないため、ほとんど知らないことばかりでした…。勉強になります！
たとえば、錯視のなかでも恐らく最も有名な「ミュラー・リヤー錯視」。上下の線はどちらも全く同じ長さですが、なぜか違う長さに感じられるという錯覚です。
基本的にはどのステージもふたつの物体のサイズ感や色が同じになった瞬間を見極めるというもので、すぐにルールがわかるはず。登場する錯視は全部で7つです。
また、以前にデザインの中で起こる錯視についての記事を書いたので、興味があればそちらも見てみてください！
画面下部の文字や円の色と同じ色を、画面上部のパレットの中から選びます。時間がたつにつれ、画面下部の円の面積が大きくなるというヒントの出し方が面白いです。色の面積が大きければ判断もつきやすいですよね。
「WHEEL」は選択肢の中から適切な色を選んで色相環を完成させるというゲーム。様々なトーンの色相環が出題され、中にはひっかけの色もあったりします。
そして「SCHEMES」は、画像の中に使われている色を見つけるゲーム。絵の中の小さな部分の色まで見極める必要があるため、非常に難しいです！
どのゲームにも時間制限があるため、集中してサクサク遊べます！また、「彩度」とか「色相環」ってなに？という人のためにも、リファレンスページが用意されているという親切設計。楽しみながら色の勉強ができます。
最初の方はとても簡単ですが、後半のほうからはパレットの色数も多くなり、難易度が上がってきます。適度に頭をつかうため、色彩感覚アップに加えて脳トレにもなりそうな作品。
短時間でクリアできると、「世界平均を超えた！」と表示されるのが地味に嬉しいですw自己ベストが世界平均を上回るように、つい何度も挑戦したくなってしまいますよ！
こちらもいかに早くクリアするかでスコアを競うゲームなので、ついついもう一度！と何度でもやりたくなってしまうはず。ゲームが終わると「色彩ベテラン」などの称号がもらえますw直感と色彩感覚が鍛えられますよ！
夏はありませんが、他にも春と秋のデザインについての記事を書いたので、よければそちらもぜひ見てみてください！
以上、彩がお送りしました〜！
たとえば統計データの上位項目のみ掲載し、「その他」にあたる雑多なデータを大胆にグレーアウトするなど、「必要な情報」と「それ以外」で大きく区分することで、読み手に伝えたい情報が瞬時に伝わります。
メディアの「媒体力」を数値化して、1ページまるまる使って打ち出しているページがあり、意外と他に見ないデザインだなと思いました。面白いのはPVやユニークユーザーより、TwitterなどのSNSの拡散力をメインに持ってきているところ。メディアならではの「注目してほしいポイント」がひと目でわかりますね。
「説明とかはいいから、どれだけの実力があるか見せてよ！」というせっかちな営業さんに有効な気がします（完全に想像）。
図やグラフを組み合わせたインフォグラフィックが使われていて、とてもわかりやすいでデザインです。また、色をメディアのブランドカラーのみに絞ることで、メディアの個性がより引き出されているように感じます。
全体的な色づかいの秀逸さはもちろん、各所に散りばめられたイラストが見ていてとても楽しいですね。モックアップやフキダシ、フレームなど全て手書き感のある素材で雰囲気が統一されているので、装飾がふんだんに使われているのにゴチャゴチャした印象は全く受けません。
大きな余白を活かして必要な情報にすぐに目が留まるよう、うまく視線を誘導しています。見出しに明朝体が使用されていたり、通し番号が大きく右上にあるというレイアウトも見やすく、斬新ですね。
媒体資料を作ってると、ついつい説明文をたくさん盛り込みたくなりますが、文章って実はあまり読まれてないんじゃないかと思うんですよね。初見でたくさんの文章を読むのは大変ですしね。
Rettyの媒体資料は、とにかく文章を読む負担が少ないなと感じました。メディアの特徴を一言で簡潔に表現していたり、「伝えたいこと」を3つに細分化して説明するなど、少ない文章でも分かりやすくまとまっています。
媒体ロゴと見出しを入れたヘッダー、通し番号やコピーライトがキチンと配置されたフッターなど、プレゼン資料のお手本のようなデザインです。
ページの面積を圧迫するヘッダーとフッターは、個人的には使い方が難しいなと感じているんですが、ここでは潔くメディアカラーで塗りつぶすことでデザインの一部にしていますね。
広告の内容について説明するには、実際に実施した時のキャプチャを載せてしまうのが手っ取り早いですが、契約の関係上できないこともありますよね。こちらでは、メニューごとにワイヤーフレームを作成し、誘導の流れなども図でわかりやすく説明されています。
ぱくたその媒体資料の面白いなと思った点は、Webサイトのように「上から下に読みやすい」ということを意識して作られているところです。
媒体資料って、「紙に印刷して左上にホチキスで留めて見せる」というイメージが強かったんですが、Webで公開しているならブラウザで見る機会のほうが多いだろうし、上から下に読みやすいほうが嬉しいですよね。
ぱくたその媒体資料では、画面左側のラインがブラウザで見ると綺麗に繋がって見え、内容構成もすべて縦方向に展開されるため、視線の動きが一方向のみで済むのスルスルと読み進めることができます。
「
このへんは人それぞれだと思いますが、私は何か作る前には、とりあえず最初にざっくりと箇条書きにして制作に必要な要素を書き出します。デザインに入る前のラフスケッチやワイヤフレームのようなものですね。
今回も、自社メディアを紹介するのに必要な要素を箇条書きで書き出しました。
例えば以下のように、ざっくりとでもいいので各ページの見出しと内容をイメージしながら骨組みを作ります。
これで、媒体資料の骨組みができました。最初に箇条書きにすることで、素早く全体を俯瞰して見ることができるため、方向性を決めたり内容を整理する時におススメです。
私はこの段階まで作成できたら、いったん上司や営業に確認してもらい、内容の追加や修正を行いました。
媒体資料に関わる各担当者に確認すると、それぞれの立場から違った意見が出てきます。私が確認の大切さを再認識したのは、営業に「
会社によるかもしれませんが、うちの会社の場合は媒体資料のデータや数字を更新するのは営業の役目です。
そのため、媒体資料を制作するツールとしてはデザイナーが使い慣れているPhotoshopやIllustratorでもOKですが、その後に営業が内容を更新できるように、営業が使い慣れている形式に変換する必要が出てきます。
というわけで、今回は以下のような流れで制作・編集する流れを作り、制作と営業の役割分担を行いました。
