<h2 id="hd6b71a9c8d">そもそもペルソナの背景とは？？</h2><blockquote>ペルソナ法とは…調査などをもとにしてユーザーのデータを統合して架空の人物を記述しデザインに利用する</blockquote>という手法で、もともとクーパー社（ユーザーエクスペリエンスデザインと戦略のコンサルティング会社）を率いるAlan cooperによって生み出されました。 この概念の背景には、多くのユーザーに合わせて最大公約数的に機能を拡大していくと、結局誰にとっても使いにくいものになってしまうよね！という考え方があります。ここから、特定のユーザーを具体的に考慮することで、最終的にいろいろな人にとって使いやすいものを作れるという考えが導き出されました。 <h2 id="h300f82494e">なぜペルソナをやるのか</h2><h3 id="ha9c11462b9">ユーザー視点の精度を高めることができる</h3>定量データや多くの情報をもとに詳細な情報まで設定したペルソナは、1つの人格のようなものです。ペルソナのニーズを満たすような製品を考えることは、そのほかの多くのユーザーのニーズを満たすことにつながり、結果的にユーザー視点の精度を高めることができます。ユーザー視点の精度を高め、ユーザーが求めるものを製品に集約すれば、製品の完成度を高めることにもつながります。<h3 id="ha071f2b158">ターゲットとなるユーザーに対する理解をより深められる</h3>結局プロダクトを使ってくれるのは「人」というお話が前回のワークの最初でありました。使ってくれる人すなわちユーザーが何を考え、どのような場面でどんな行動をするかを把握しておく必要があります。一般に商品企画を行う際には、年齢層や性別、居住地といった定量的な属性の組み合わせとして「ターゲット層」が定義されます。 たとえば女性向けの化粧品なら、「30代、女性、主婦、既婚者」といった具合ですね。しかし、こうした属性情報の組み合わせだけでは、生き生きとしたユーザーの姿を思い浮かべることはできません。そこで、ターゲットの属性情報に加えて趣味や性格、ライフスタイル、好きな雑誌…といった定性的な情報を肉付けし、よりあたかも実存する人物のようなペルソナを定義するのです。 ペルソナを定義しておくことで、カスタマージャーニーの検討やコンテンツ設計といった様々な場面で、「ペルソナのタナカさんならどうするだろう？」…というように、よりユーザーの視点に立って考えることができるようになります。<h3 id="h537169dc20">関係者の認識共有を促進できる</h3>属性情報の組み合わせであるターゲット設定だけでは、見る人によって解釈に差異が出てしまう懸念があります。具体的なペルソナを関係者全員で共有することで、認識のブレ幅を最小限に抑えることが可能となります。 担当者間で認識がズレたままでは、無駄な作業が発生したり、スケジュールが遅れるといったトラブルになりかねません。ペルソナという1人の代表的な人格を設定することで、異なる分野の担当者とも共通の人物像をイメージすることができ、効率よくプロジェクトを進行することができます。 <h2 id="h19e008275e">ペルソナの作成方法</h2>ペルソナの作成方法は多岐に渡りますが、どんな方式であれ作成目的を達成できるかどうかを考えて書くことが大切になります。数あるペルソナ記述法の中で、今回の記事は<code>Putting Personas to Work in UX Design: What They Are and Why They’re Important</code>というAdobe社が出している記事を参照しています こちらの記事→(<a href="https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/" target="_blank" rel="noopener noreferrer">https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/</a>） <h3 id="h1b83dce853">ユーザーに関する情報を収集する</h3>すでに決めてあるターゲットを対象に、インタビューやアンケートを行います。年齢などの基本情報から、プロダクトに関わる質問を聞きましょう。例えば、オンライン通販サイトに関するインタビューであれば、使用デバイス、買い物の内容、予算などなど聞いていきます。ここで完全な想像で作ってしまうと今後のプロセスが全て根拠のない情報の土台の上に出来上がってしまうので重要なパートです！<h3 id="h1c3d3e157a">調査データから行動パターンを特定する</h3>次は調査から分析パート！調査結果から多くのインタビュイーに共通しているような行動パターンを見つけます。例えば、上記に続いてオンライン通販サイトに関するインタビューの場合、複数の人が「商品を買う前に他のサイトも見にいっている」という行動を述べたとします。この人たちは他の質問に対しての回答は異なっているかもしれませんが、ここでより重要なのは違いよりも共通点なので「商品を買う前に他のサイトも見にいっている」ことは行動パターンとみなすことができます。<h3 id="hd999286b34">ペルソナを作成し優先順位を付ける</h3>ユーザーを理解するのに十分な理解と共感を表現するような方法でペルソナを作り上げましょう。このステップでは多くの個人情報をデタラメに追加することを避けます。詳細が多すぎると気が散り、分析ツールとしてのペルソナの信頼性が低下するからです。 <h2 id="h8eb9c82481">ペルソナはいらない？（おまけ）</h2>今回の記事ではペルソナを開設してきましたが、ペルソナに関しては様々な意見があり、ペルソナばかりに頼ることに警鐘を鳴らす人もいます。理由としては、「結局は存在しない架空の人物でありその人を用いてプロダクト開発に活かすのは難しいから」以下引用です。（引用元：<a href="https://note.designing.jp/n/n12ebf3e00d33" target="_blank" rel="noopener noreferrer">https://note.designing.jp/n/n12ebf3e00d33</a>）<blockquote>私たちはペルソナに家族や職業、持ち家、車、ペットの有無などの特徴を与える。名前を、仮にテッドとしよう。プロダクト開発ではこのようなディスカッションが行われる。「テッドはこのプロダクトの機能を使うだろうか、気に入ってくれるかな？」「テッドのプロフィールから推測するに、これはテッド向きじゃないかもしれませんね」…テッドってそもそも誰だ？結局のところ、誰もテッドが何を気に入るか知らない。そもそもテッドは存在していないのだから。そんなことは当然だと思うだろう。しかし、理解しつつも、テッドが存在しないことを忘れてしまうケースは多い。細かい設定を加え、テッドを人間らしくするにつれ、私たちはテッドが実在しないという前提を忘れてしまう。無意識にテッドをステレオタイプに当てはめていることにも気づかない。</blockquote>どれだけユーザー調査に基づいて作ったとしても、自分たちの都合のいいように設定をしてしまう危険性があるということです。そんな事態を避けるためペルソナ・スペクトラムという方法を提唱しいている方もいらっしゃいます。詳しくは上記の文章を引用元であるこちらの記事をご覧ください。

なぜペルソナを作成するの？

ピンボケしていた。 何故か襟元にピントが合っている。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/9a6629ce4a8241c0ae7c77bd8dbb80bc/1664152039140-5cXu5OXZXI.webp" alt=""> でも被写体さんの表情や角度が素敵だし、玉ボケもバランスいいし、ボツ にするのはあまりにも勿体ない。 なんならこれは夜ポトレなので、オールドレンズ風の柔らかいレタッチも上手くいかなさそう。 被写体さんを活かし、暗さを活かし、納得いくレタッチを探しているとたどり着きました。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/b088936e9a9e4c938463d253bcc8af3c/1664152521259-SrzZkhiO0Y.webp" alt=""> 必殺・モノクロ やり方は簡単。調整レイヤーで白黒を選択します。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6bbc37a95e404f4aa4a8cdd632cc8a17/monochrome_1.png" alt=""> その時点で白黒に変わるので、あとはプリセットより、好きな濃度を選ぶだけ。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bdfeeb569de54d98aa02e5aa20c822ef/monochrome_2.png" alt=""> 都会的でかっこいいポートレートに仕上がりました！

【Photoshop】ピンボケしちゃった！でもいい感じにしたい時のレタッチ

こんにちは！今回はアニメーションでめちゃくちゃ重宝するバウンズアニメーションを簡単に付ける方法を紹介します。<h2 id="h5c3efc7b40">バウンズアニメーションって？</h2>バウンズアニメーションは緩急のある動きや跳ね返りなどで使えるアニメーションです。これが無いとかなり不自然なアニメーションになってしまいます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/dad3814f09714a9e8d3eeea85fe8dc35/%E3%83%8F%E3%82%99%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%97.gif" alt=""> バウンズアニメーション無し <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/2be2e89cea7b45f38f6f68e39e2d9fc6/%E3%83%8F%E3%82%99%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%82%E3%82%8A.gif" alt=""> バウンズアニメーションあり 見てもらったらわかる通り、これだけの差が出ます。<h2 id="hb3884229f4"> 適応方法</h2>適応方法は簡単でエクスプレッションの機能(位置のプロパティの上でOptionを押しながらクリック)を使い、下のテキストを貼り付けるだけです。<blockquote>amp = .1; freq = 2.0; decay = 8.0; n = 0; time_max = 4; if (numKeys &gt; 0){ n = nearestKey(time).index; if (key(n).time &gt; time){ n--; }} if (n == 0){ t = 0; }else{ t = time - key(n).time; } if (n &gt; 0 &amp;&amp; t &lt; time_max){ v = velocityAtTime(key(n).time - thisComp.frameDuration/10); value + vampMath.sin(freqt2Math.PI)/Math.exp(decayt); }else{value}</blockquote> 他にもMotion Toolsというプラグインをダウンロード(40$)すればボタン一つで適応することもできるのでもっとアニメーションを追求したいという人は是非！！ <a style="color:inherit" href="https://motiondesign.school/products/motion-tools/" target="_blank" rel="noopener noreferrer">Motion Tools - Motion Design School</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">Our exclusive After Effects Script contains only the most nec</a> <a href="https://motiondesign.school/products/motion-tools/" target="_blank" rel="noopener noreferrer">motiondesign.school</a>

[After Effects]たった5秒でバウンズアニメーションを付ける方法！

こんにちは！今回はAfter Effectsで最も時短につながると言っても過言では無い、アニメーションプリセット保存方法を紹介します。<h2 id="h1a1b539dde">アニメーションプリセットって？</h2>前もって作ったアニメーションを保存しておいて後で呼び出せる機能。エフェクトやレイヤースタイルも保存することができます。<img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/dbca98c9706f44b2a602a5ea7c29d63b/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%82%9A%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88.gif" alt="">こういうアニメーションを作ったとして何回も使いたいという時があると思います。そういう時にプリセットに保存しておけばすぐに呼び出すことができます！<h2 id="h087b4efba0">やり方</h2><blockquote>保存方法 保存したいアニメーションなどを選択し、アニメーションのアニメーションプリセット保存方法から保存する。 呼び出す方法 エフェクト＆プリセット(Ctrl + 5)から保存したアニメーションをダブルクリックする。</blockquote><h2 id="he4fe5ca3e1">保存先について</h2>保存先は書類 ＜ Adobe ＜ After Effects ＜ User Presets となっています

[After Effects]最も時短につながる！アニメーションプリセットの保存方法

こんにちは！今回はエクスプレッションの中のtimeとwiggleという機能を使ってアニメーションを操作する方法を紹介しようと思います！<h3 id="he46238ff2b">エクスプレッションって？</h3>文字でアニメーションを操作する機能で、CSSをイメージしてもらえればわかりやすいです！いろいろな種類があるのですが、その中でも今回はtimeとwiggleを紹介します！<img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/06694aa76e1a4bafad57fbc14ed704c5/%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3-%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png" alt="">こんな感じ！<h3 id="h2c3e821f23">time</h3>timeは時間に合わせて数値を変動させるエクスプレッションで書き方はtime*60 これを回転のアニメーションに入力した場合、秒間60度回転となります。<img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6d0f8541144d4235b76ecd08f524693e/time.gif" alt="">timeを使って回転<h3 id="hfb98e74173">wiggle</h3>wiggleは動きのエクスプレッションで書き方は wiggle(1,60) 初めの値は変化する速度、二つ目の値は変化量を表しています。<img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/41b9c3ca8ecd40cba39786aa5c87c5bc/wiggle.gif" alt="">wiggleで位置を動かす<h2 id="h3bcda3e6b0">最後に</h2>エクスプレッションは他にもさまざまな種類があるのでまた紹介していきます！

[After Effects]エクスプレッションでアニメーションを操作しよう！

こんにちは！最近After Effectsを勉強しているので面白かったり使えそうだなと思う機能を紹介していきます。今回はモーフィングです！<h2 id="h19f84ada1e">モーフィングって？</h2>モーフィングは形状が別の形状に変化することで、例えば四角形が楕円形になったり、楕円形が星形になったりすることです。<img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a56424bd187a4546aaa8e9101269dec9/%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99.gif?w=500&amp;h=500" alt="">こんな感じ！<h2 id="h441226ddc9">やり方紹介</h2>今回は上のgifのような楕円形から星形への形状変化の方法を紹介します。<blockquote>1. 楕円形を作成し、同じレイヤー内でも外でもいいので星形を作成 2. 多角形パスの上で右クリックを押し、星形をべジュパスに変換。パス1が&nbsp;&nbsp;&nbsp;&nbsp;追加されるのでキーを打ち、コピーする。すると星形の形状が記憶される 3. 星形はもういらないので非表示にする 4. 楕円形を2のようにべジュパスに変換し、パスにキーを打ち、お好みのフ&nbsp;&nbsp;&nbsp;&nbsp;レーム数でコピーした形状をペーストする。と完成！</blockquote><h2 id="h3bcda3e6b0">最後に</h2>どうだったでしょうか？やり方さえわかれば簡単にできるのでぜひ試してみてください！

[After Effects]モーフィングで図形を変形しよう！

こんにちは！木下です。今回は、Vtuberさんのロゴを実際に案件として作ってみた感想や気をつけるべきだと感じたことを語ろうと思います！ 自分以外の誰かに何かのデザイン物をつくることをお考えの方に参考になると嬉しいです。 1.お仕事探し 知り合いの方にVtuberをしている人がおり、ロゴを作りたいと話して「じゃあ私の作ってよ！」とありがたいことにお話をいただくことができました。 そのほかに試したことは ・「ココナラ」というスキルマーケットのアプリでお仕事を募集してみる ・Twitterで「ロゴのプレゼント企画」を行う です。しかし私の場合は、ココナラはDMで声がかかったり質問がきたりしても実際に案件になることがなく、プレゼント企画はロゴ制作をしてプレゼントして終わり、になってしまいどちらもお仕事につなげることは難しかったです(制作の内容調整をしたり、ロゴのお仕事の呼びかけをしてみたら変わるかも知れないので、もっと模索してみます！)。企業のポスターやチラシ制作をしたこともありますが、そちらも家族経由でこちらから頼み込んで貰えたお仕事です。 結論、学生デザイナー・駆け出しフリーランスデザイナーは自分から発信しなければお仕事がもらえません(泣) 私もいつか声がかかるだろう！と思いTwitterを行なっていましたが、 だれかが私に「お金を払ってこれを作ってもらおう」 となるには知名度と実績が必要になると身にしみて感じました。 2.「誰かへのロゴ制作」で学んだこと 相手も自分も初めての依頼だったことから、ヒアリング不足でのやり直しが多く、正直痛い目をみました笑 相手が知り合いということもあり、何度も何度も改善したものを見せて直してを繰り返すことで、お互いが満足のいくものを作ることができたのは良かったなと思いました。 知り合いじゃない人がお客さんの場合は絶対にヒアリング不足は避けましょう・・・！！！！最低でも色コード、ロゴのイメージ、キャラデザ、キャラコンセプトはロゴ制作の前に聞いておきましょう！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/0faba807fd6241f98e595edc80fd772a/0.png" alt=""> <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/f9bcb073481d4b99a04133f435de376a/2.png" alt=""> ↑このロゴが実際に作ったものです！水星やむ(Twitter:@mizuboshi_yamu) 文字数が多くイラストがあるため、文字間は狭くしコンパクトにまとめつつ、ロゴを小さくしても見えやすいよう意識しました。キャラのコンセプトによると思いますが、細いフォントよりも太いフォントの方がロゴが目立つかな、と個人的に思います。 ロゴ全体の形が逆台形になるよう、メインの文字を大きく、ローマ字などの読み仮名は小さくしバランスを取りました。Vtuberロゴでは、枠あり・枠なしの２つが必要(枠ありは影つき)なので、ぜひ参考にしてください！ 3.人にデザインを作ってみた感想 自分が設定したターゲットでデザイン物を作ることや、自分が思い描くままデザイン制作をすることが今まで多かったので、実際に人から指示されたものをかたちにするのはとても難しいことだと感じました。 自分から発信すること、ヒアリングをおろそかにしないこと。初めて人にデザイン物を作ることで、デザインにおいて気をつけることを見つけ出すことができました。 この記事が、デザインのお仕事を行うときに参考になれば嬉しいです。 追伸：かわいいものを作る時間、最高。

Vtuberロゴを実際に作ってみた話。

こんにちは！木下です。今回は学校で缶バッジ制作をしたので、制作の流れや成果物の紹介をします。 学校にある缶バッジ制作ができる機械と、バッジのテンプレートを使って制作しました。使用デザインツールはIllustratorのみです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/447ddb74c4564049803358afb2a669bd/1654738898285-gw4GyspLQJ.webp" alt=""><blockquote>缶バッジ製作キット(缶バッジマシン バッジオ!スタンダード)</blockquote><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/ca3267cc40994035940fcbc4fd41a34d/1654738926800-IWYhKoPHsM.webp" alt=""><blockquote>使用したテンプレート(ダウンロードできるテンプレートもたくさんあるので調べてみてください！)</blockquote> 私はIllustratorで絵を描くとき、このような手順で進めます。<blockquote>1.イラストを紙に描く。(今回はクラスの人をモデルにした動物を描きました！) 2.写真に収めるorスキャナーでスキャンし、パソコンにデータを送る。 3.描いたデータを下絵にするために、写真の不透明度を下げて一番下のレイヤーにしてレイヤーをロック。 4.ペンツールや図形ツールでなぞり、Illustratorで形を整えて完成。</blockquote>出来上がったイラストを缶バッジにしていきます！(テンプレートは消します) <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/476c58ebaa2341c99f9e208f7da54cbc/1654739071080-PhODNzGNkF.webp" alt=""> この画像、彩度が少し低く見えませんか？ このデータは、カラーモードをCMYKにしています。RGBは主にweb上で扱うデザインに使用するカラーモードで、CMYKは印刷用のカラーモードです。<blockquote>カラーモードについて RGB(光の３原色) red、green、blueの三つの色の光によってさまざまな色を表現している。 →混ぜ合わせると白になる。(加色混合) CMYK(色の３原色) cyan、magenta、yellow→混ぜ合わせると黒になる。(減色混合) 印刷物は、CMYKの４つの色の掛け合わせで色を作成する。</blockquote>印刷をする場合はカラーモードをCMYKにしましょう！ 次に、Illustratorのデータをコピー機を使って印刷しました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c3ad1dbb8d0f42499deef4e23ea9cdf7/1654739256606-GnRE4vdGJ6.webp" alt=""> 切りたい箇所を丸く切り抜くことができる機械を使って、切り抜いていきます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/e3b0d2a30b8b4e19a256db8b674c0f2d/1654739290081-wfn2bx12j6.webp" alt=""> <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7b3237856fee48d6ae0bdca77c911900/1654739358699-zln9fyh5dp.webp" alt=""> 綺麗に切り抜くことができました！ 次に、缶バッジを制作する機械に土台と紙とフィルムをはめ込みます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c52924f9c2254ee0bb8d7a441f4d9a2e/1654739382684-qcsGLcLlcd.webp" alt=""> <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6cf412b57e2d4d8ca90bb0f9c431ecf2/1654739406967-Sx2B6uxDLg.webp" alt=""> こういった構造です！画像引用:https://jitan-eshi.com/archives/998 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/46a4b76e5c924055b4dfebffd614b722/1654739450928-wCW9dWZ5CB.webp" alt=""> 向こう側にくるっと回して <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bc12d5f5f5de47248e1de47f56fa5ff6/1654739466812-4pv3Mg8L2X.webp" alt=""> プレスします！！(先生にしてもらいました😅) <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/feb0f8ee0e514c27b5065a112ba0297c/1654739488670-vfOSsnard6.webp" alt=""> 土台となる一番下のパーツを手前にはめ込み、 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3250c5e190484b3091b26a6577f1cf62/1654739520015-PEQS0cldtr.webp" alt=""> もう一度プレス！！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bdbe06c7d9bc410980c2daa6e4572a64/1654739555850-NcSpML7noE.webp" alt=""> 完成しました😭😭😭 最高にかわいい缶バッジが出来上がりました😭😭😭 手順は簡単なので、残りの缶バッジは1人で作ることができました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a07436ae39ef41fdb198d0695e98ebe5/1654739536011-Ucu9WkmUn1.webp" alt=""> かわいい〜〜〜〜〜〜〜〜〜！！！！ 以上が缶バッジ制作の流れや成果物の紹介でした！欲しいといってくださる人がいるんじゃないか！？というくらい、かわいい缶バッジができて嬉しかったです！ この記事が参考になったり、みなさんのグラフィックデザインへの興味を惹くものになったりしていたら幸いです。 最後まで読んでくださり、ありがとうございました！

缶バッジ制作してみた！！

こんにちは！木下です。「カラーマネジメント」についてご紹介します。 内容もややこしく暗記することが多いですが、デザインやイラストに関わることが好きな方は知ってて損のない知識です。 <h3 id="ha47d69f756">カラーマネジメントについて</h3>入力機器や出力器間のカラー変化をなるべく最小限に抑えて、色味を統一させるための方法や手段のことです。 簡単に言うと、デザインデータやイラストデータ、写真データなどをモニターやプリンタなどに移行し、そのモニターやプリンタでデータをみた時にパソコンで見た時の色と同じ色味に合わせることです。 印刷したときに、出力される印刷物がデータと同じ色味にならない場合、カラーマネジメントが必要になります。 <h3 id="h4df613ecca">CIEカラーについて</h3>「正しい色」の基準は、「実物」が「太陽光」に当たった時の色です。 人間の判別できる範囲において、誤差のわからないレベルのカラー基準をCIEといいます。↓ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7f9d7b1f602e4f3e81687b0e5108c8ec/325px-CIE1931xy_CIERGB.svg.png" alt=""> デジタルカメラ、家庭用プリンタ、DDCP・印刷機、モニタ、自作の絵、スキャナなど入力から出力までのカラーが一定のルールによって守られるため、かなり近い色に合わせることができます。 色の範囲のことを色空間(カラースペース)といいます。 ただし、RGBはCIEカラーの全てをカバーできません。↓ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/925c349c1b464bdbb800fe61a6a33d48/image_03.png" alt=""> RGBはそれぞれ256段階の階調をもち、1677万7216色の表現が可能です。 主なカラースペース ・CIExyカラー(人が見える領域) ・sRGB ・AdobeRGB ・Japan Color 2001 Coated(CMYK用色空間)　日本国内で実用的なCMYKのカラースペースは「Japan Color 2001」のみ 共通に使用するカラースペースを作業用カラースペースといいます。 色空間→色空間への変換 ・ベースとなる色空間が同じにしてあるか ・色空間の変換が正しくなされているか 色空間の範囲を「ガモット」といい、色変化を最小にするために分布し直すことを「ガモットマッピング」といいます。 <h3 id="ha214098e44">まとめ</h3>スキャナ・モニタ・プリンタの色が合わない。 ↓ 機器のカラー情報は、それぞれが独自の情報。各機器のカラー設定をあわせよう！ ↓ 何かカラーの共通した基準が欲しい。 ↓ 人間の認識の限界といえるCIEカラーを基準にしよう！ ↓ 「デジタルはRGBで表現してるのに、最初からRGBを基準にしちゃダメなの？」 理由1：人間の色認識の基本がCIEだから。 理由2：RGBはCIEカラーを全て認識できない。 理由3：そもそもRGBには複数の規格があって、基準にできない。 ↓ 色のトラブルをなくすためには、スキャナやデジタルカメラ、プリンタ、扱うファイルなどのすべての色空間を同じものに合わせる必要があります。また、こういった共通の色空間で作業する時の色空間のことを作業用カラースペースといいます。 ↓ 機器を独自のカラー情報から、決められたカラースペースの範囲内に収める(またはその逆)ために、プロファイルという情報を使用します。 プロファイルの設定 MacintoshHD→Finder→Mac環境設定→ハードディスクにチェック 色空間と変換 規格の色空間(AdobeRGBやsRGB)以外にも、機器ごとに独自の色空間があります。 ↓ スキャナなどの色空間から、規格の色空間(AdobeRGBやsRGB)に正しく変換させるためにはパソコン内にスキャナ用のプロファイルが必要 ↓ 作成したデータには、どの色空間で作ったかがわかるようにプロファイルを埋め込んでおきます。 ↓ 規格の色空間(AdobeRGBやsRGB)で作られた画像を、プリンタやモニタなどへ出力するときにも、各機器は独自の色空間で動いているのでプロファイルを使って正しく変換する必要があります。 ↓ 色空間の形は同じではないので、変換時には色の分布を新しい色空間内に分布し直すことをガモットマッピングといいます。 <h3 id="hf8d81ad5c9">色温度</h3>蛍光灯は発光している。モニタも発光している。両方とも、光源と言える。 ↓ 光の色合いは色温度で表す。単位はK(ケルビン) ↓ 印刷の色を気にする場合には、蛍光灯の色温度とモニタの色温度を合わせる方が望ましいです。 以上がカラーマネジメントについての紹介でした！ この記事が参考になったり、みなさんのグラフィックデザインへの興味を惹くものになったりしていたら幸いです。 最後まで読んでくださりありがとうございました！

カラーマネジメントについて

こんにちは！木下です。 今回はフォントの種類やその使い方、そして文字が与える印象について紹介します！<h2 id="h5a4acc6146">フォントの種類と使い方</h2><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/9273e3e959ed472dbf2b9db0c10a7f40/1654337424082-SrPhT7W9Br.webp" alt=""><h2 id="hcf83e1357e"> </h2>ゴシック体 文字の太さが均一で装飾がなく、可読性が高いフォントです。(可読性が高い…文字を理解するために頭を使う時間が短い) 文字にクセがなく可読性が高いフォントは、遠くから見ても文字を判別することができます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/8c1bb1bda4614cb1baf860fb921ee25e/1654348045586-MorKLHRaN9.webp" alt=""><blockquote>ゴシック体を使用したwebサイトの一部。暗い背景であるが、ゴシック体を使用しているため可読性を損なっていない。 遠くから見ても文字を判別することができる太めのゴシック体はプレゼン資料が適し、細めのゴシック体はwebサイトの本文など読ませたい文章に適しています</blockquote><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/63fbfbebd20c49e19e458f374386cec8/1654337434749-Wzhb5PAB9Z.webp" alt=""> 明朝体 文字の太さが細く、文字数が多くてもすっきりとして見えるため、小説や教科書などの長文に適しています。 プレゼン資料のフォントの違い。遠くから見ると ゴシック体のプレゼン資料の方が視認性が高い。<blockquote>明朝体の可読性の高さを発揮するのは「読み物」であるため、ゴシック体のようにプレゼン資料やwebサイトの本文に使用することにはあまり適しません。</blockquote><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/d6fc660161944b8ca3d955cd9ba143b0/1654348657168-7sHcN8FgVL.webp" alt=""><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3443817d772f4f4f98d4f77424cf7ef3/1654337444395-kzGpfM7D3I.webp" alt=""> デザイン書体 文字に装飾がついていたり、大きさにばらつきがあるフォントです。可読性が低いものが多く、読ませる文には適しません。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/100592729dd9452399415bbbbb5d1055/1654350363290-mDPeA6rcxZ.webp" alt=""> 一番目立たせたい箇所にデザイン書体を使用した制作物。<blockquote>可愛さやかっこよさなどの印象を与えるフォントが多いため、目立たせたい箇所にだけ使ったり、グラフィックデザインやバナーデザインの場で使用してみるとインパクトを与えるデザインにできます。</blockquote><h2 id="hcd07ec3fd1"> 文字が与える印象</h2>人と人のコミュニケーションに欠かせないのが「言葉」であり「文字」 です。どんな言葉をどんな印象で伝えたいのか。 デザインする上でとても大切な要素になります。 実際に、文字はどういった印象を与えるのかを比べてみました。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3f6d966f82444559a78b163acb67d9a9/1654347169424-2MzgoeGKjU.webp" alt=""> ①のように、画像のみだとなんの広告かがわかりませんが、②のように具体的な情報や書体のイメージを組み合わせると効果的に伝えることができます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/295c6cb2601f45d2a6d14655fb5a7ba8/1654347550544-JHo7Iid2Hh.webp" alt=""> どちらの広告が適していると感じますか？ほとんどの方が、右の画像だと答えると思います。 左の画像のように、画像・イラストにテキストと書体が合っていないと、全体のイメージが統一されず見る人を混乱させてしまいます。 キャッチコピーと画像のイメージを揃えデザインを考えましょう。<h2 id="ha214098e44"> まとめ</h2>いかがだったでしょうか？文字をイメージにあわせることはとても重要だということが少しでも伝わっていれば幸いです。 最近は紙よりディスプレイ上で文章を読むことが多くなり、特に長文は読み づらいと感じる人が増えています。フォントの違いだけでなく、視線の移動距離や余白のリズムなど読みやすさへの工夫も施しましょう。 普段フォント選びをする際に迷ってしまう方に、この記事がフォント選びのお手伝いができたならば嬉しく思います。最後まで読んでくださり、ありがとうございました！

初学者向け！文字が与える印象について

最近はイラストを無料で提供してくれるサービスが増え、非デザイナーでもそれっぽいイラストが制作できるようになっています。そのような背景なのか、Webサイトを見ていると「イラストが装飾だけの役割になっていてもったいないなぁ」と感じることがあります。イラストは、ユーザーがサービスや商品についての理解を深めるために必要不可欠な要素です。今回は、そのような装飾だけのイラストにならないために、大切な考え方を紹介します。<h2 id="h8d027c8ed3">はじめに</h2>私たちはなぜテキストだけでなく、イラストを配置するのでしょうか？ それは、ユーザーにとってテキスト内容を認識しやすくするためで、その結果、内容の齟齬を生まないためです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/0b2bf344b74b4169a2e323a78c2123a9/il-blog01.png" alt=""> テキストだけだと内容を認識しにくい <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/99bc61103e9548c3aa3897c9646cf76b/il-blog02.png" alt=""> イラストがあると、認識しやすい 内容の齟齬を生まないイラストを作るためには、文章とイラストが1対1にマッチかつ、ユーザーにサービスやプロダクトの価値を理解してもらうことが必要です。 ※ マッチとは、文章とイラストの内容が一致していることです。 マッチしていないと、伝えたいことが正しく伝わらない確率が高まります。そのようなことが起きないため、２つ大切なことがあります。<ol><li>文章を読んでイラストを考えること</li><li>ユーザーにとっての価値を問うこと</li></ol>この２つがなぜ大切なのか、今から考えていきます！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/2f55b77786454eacb5988a2754d378fa/il-blog03.png" alt=""> イラストを考える上で大切なこと <h2 id="hdaa2393eff">実際に考えてみる</h2>上記の文章だけだと「ホンマに大切なのか、あんまようわからん（ゴリゴリ関西弁）」と思います。なので今から、架空の学習サービスサイトのイラスト作成の過程を覗いていきます。作成に協力してくれた、AさんとBさんの作成方法に着目しながら、なぜ大切なのか考えていきましょう！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/b2064c856fe24454acfdf5ffbafca192/il-blog04.png" alt=""> サービスの良し悪しはおいといて、、<h3 id="he282541649">Aさんの場合</h3>Aさんはまず、「24時間」というワードに着目してイラストの作成に入りました。「24時間受付してくれるのが、ここで伝えたいことだ！」と考えました。<h3 id="h755bc78301">Bさんの場合</h3>一方で、Bさんは最初に「24時間質問の受付によってユーザーにどのような価値があるだろう？」と考えました。ここでの価値は、「困ったときにいつでも相談に乗れる」ということ。BさんはAさんと違い、機能部分をイラスト化したのではなく、ユーザー価値をイラスト化した点に着目したことが大事なところです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a13fe94be162425d834c9c864dbcbd6a/il-blog05.png" alt=""> Aさんは機能、Bさんはユーザー価値に注目 あなたは、どちらのイラストの方が良いと感じましたか？ Bさんの方が良いと感じた方が多いと思います。 なぜ、Bさんのイラストが良いと感じたのでしょうか？ それは「サービスやプロダクトが与えてくれるユーザーの価値を理解してもらえるようなイラスト」だからです。ユーザー価値をイラスト化することで、ユーザー自身がサービスのイメージをしやすくなり、より魅力的に感じてもらえたり、興味を持ってもらえるきっかけになります。<h2 id="ha214098e44">まとめ</h2>以上、「イラストを考える上で大切なこと」は<ol><li>文章を読んでイラストを考えること</li><li>ユーザーにとっての価値を問うこと</li></ol>この２点についてよく考えられているイラストが良いイラストだと思います。1番目は大丈夫なのですが、2番目のユーザー価値まで考えたイラストは少ないように感じます。これを気に、ユーザー価値についても考えてイラストを作成してみましょう！ ==========<h2 id="h397e38daae">補足</h2>ここからは余談になります。イラストを作成していく中で、自分が大切だなと感じたことを上記以外にも書いていきます。 「フィードバックを受けることです」 「もっと自分の納得した作品を見せたい」「言われると、自分自身が悪く言われたような気持ちになる」などフィードバックを受けることに対して抵抗を感じる人もいると思います（自分もそうです） そのように感じる人はフィードバックを「方向性を整えるため」と考えると良いと思います。自分だけで考えて制作をしていると、自由にできる裁量が大きい故に趣旨がずれたりしがちです。フィードバックを繰り返すことによって、徐々に適切なイラストになっていくと思います。周りの人に頼りまくりましょう！

イラストを考える上で大切なこと: Web編

デザイン作成や資料作成など、イラスト素材を使用する機会は数多くあります。そこで役に立つのがフリーイラスト素材サイトです。 今回は商用利用可能な無料フリーイラスト素材サイトを厳選して8個紹介します。 <h2 id="h7b1c0c724d">1.アイコン作りに便利[ICOOON MONO]</h2><a style="color:inherit" href="https://icooon-mono.com/" target="_blank" rel="noopener noreferrer">アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO</a> <a href="https://icooon-mono.com/" target="_blank" rel="noopener noreferrer">icooon-mono.com</a> ヘッダーや文字の補助などに使うアイコンを探している人には一番おすすめのサイトです。種類も多く色や大きさも変えることができるので、きっと欲しいアイコンが見つかります。<h2 id="h777026d21f">2.豊富な種類でこれだけで完結[Loose Drawing]</h2><a style="color:inherit" href="https://loosedrawing.com/?sf_paged=5" target="_blank" rel="noopener noreferrer">Loose Drawing | 無料で商用利用可なフリーイラスト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">シンプルなイラストが見つかるフリー素材サイト Loose Drawing。広告、フライヤー、ポスター、企画書、スライド資料</a> <a href="https://loosedrawing.com/?sf_paged=5" target="_blank" rel="noopener noreferrer">loosedrawing.com</a> シーンごとに様々なイラストが用意されているので、このサイト一つで完結します。人物のイラストが中心になっています。<h2 id="ha0f2092605">3.シンプルなイラストでデザインの邪魔にならない[unDraw]</h2><a style="color:inherit" href="https://undraw.co/" target="_blank" rel="noopener noreferrer">unDraw - Open source illustrations for any idea</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">The design project with open-source illustrations for any ide</a> <a href="https://undraw.co/" target="_blank" rel="noopener noreferrer">undraw.co</a> 色合いを自分でカスタマイズすることができるので、作りたいものに合わせてイラストを使うことが出来ます。<h2 id="h38efed76c7">4.可愛いデザインをしたいときに最適![shigureni]</h2><a style="color:inherit" href="https://www.shigureni.com/" target="_blank" rel="noopener noreferrer">shigureni free illust │ 素朴で可愛い、女の子のイラスト素材サイト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">｢shigureni free illust｣で配布しているイラスト素材は、規約の範囲内であれば個人・法人・商用・非商用を</a> <a href="https://www.shigureni.com/" target="_blank" rel="noopener noreferrer">www.shigureni.com</a> 種類は少ないですが、可愛い女の子のイラストを探している人には一番おすすめのサイトです。<h2 id="hfa6a5bc5f3">5.様々なシーンで欲しい素材が絶対見つかる [ソコスト]</h2><a style="color:inherit" href="https://soco-st.com/" target="_blank" rel="noopener noreferrer">商用可・フリーイラスト素材｜ソコスト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">商用可能なフリーイラスト素材サイト。Web・広告・企画書・資料などご自由にお使いください。</a> <a href="https://soco-st.com/" target="_blank" rel="noopener noreferrer">soco-st.com</a> シンプルで汎用性の高い素材が揃っています。ダウンロード形式も豊富で色を変えたり線の太さを変えたりすることもできます。<h2 id="h8e19dce66b">6.実はめちゃくちゃ使える[いらすとや]</h2><a style="color:inherit" href="https://www.irasutoya.com/" target="_blank" rel="noopener noreferrer">かわいいフリー素材集</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。</a> <a href="https://www.irasutoya.com/" target="_blank" rel="noopener noreferrer">www.irasutoya.com</a> いらすとやというと少し抵抗のある人もいるかもしれませんが、かなり種類があり、他のサイトでは出てこないようなイラストも用意されています。<h2 id="hd123c01a08">7.欲しい素材が絶対に見つかる[イラストAC]</h2><a style="color:inherit" href="https://www.ac-illust.com/" target="_blank" rel="noopener noreferrer">無料イラストなら「イラストAC」</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">おしゃれでかわいい無料イラスト・人物・フレーム・動物・年賀状などの素材がフリー。AI・EPSやJPEG・PNG形式の画像も</a> <a href="https://www.ac-illust.com/" target="_blank" rel="noopener noreferrer">www.ac-illust.com</a> 無料でダウンロードでき加工もできる数少ないサイトです。素材をダウンロードするには新規登録が必要ですが素材点数の多さは圧倒的です。<h2 id="h33f2d70ce7">8.吹き出しに困ったらこのサイト[フキダシデザイン]</h2><a style="color:inherit" href="https://fukidesign.com/" target="_blank" rel="noopener noreferrer">ふきだし素材専門サイト「フキダシデザイン」 – フキダシ素材が1000以上集まるサイト</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">デザイン向けふきだし素材を配布するサイト</a> <a href="https://fukidesign.com/" target="_blank" rel="noopener noreferrer">fukidesign.com</a> 吹き出しを使う場面は数多くあると思います。そのときにこのサイトを使うことで、欲しい吹き出しがきっと見つかるはずです。