デザイナーとクライアントが円滑に依頼のやりとりを始めるには

こんにちは、藻です。
今回のテーマは 「デザイナーとクライアントが円滑に依頼のやりとりを始めるには」です。

バナー業務を中心に最近はUIデザインなど業務の幅が広がってきました。
その中でこのように依頼・案件を進めるとスムーズだ…!と気づいた点がいくつかございました。
デザイナー側ももちろん、クライアント側も「こう依頼したらいいのか!」など参考にしてみてくださいね。

ずばり最初にお伝えしますが、必要なのはこの5つです。

今回はこれらのポイントに沿ってご紹介します!


1.締切をはじめに提示する。

お互いに「これいつまでだ…?」と認識にずれがあるとなかなか効率よく進みません。お互いに余裕かな…と思っていたらぎりぎりという可能性もあります。
クライアント側はまず締切を提示し、デザイナー側はその締切までで可能かを確認してゴールを設定します。また、複雑な依頼の場合は締切自体もこまめに作成していると良いです。
たとえばロゴ制作であれば

といった具合の分け方です。これでお互いに確認しつつ安心して進めることができます。

2.参考画像を共有する。

作り始める前に、イメージする雰囲気の画像があれば、双方で可能な限り複数共有します。
色のイメージのみでも、テイストでも構いません。
このあたりの〇〇を!など指定しておくと完成した際にイメージとの大きなずれが発生しにくいです。イメージする広告もあるとなおスムーズかと思われます(パクリにはならないよう注意…)。

3.使用したいカラー・テーマカラーを決めて共有する。

ひとまず1色は決まっているとイメージを考えやすいです。カラーコードでこの辺の色味!などがあればコードごと送ってしまえば間違いはありません。写真の色味でもいいかもしれませんね。
例えば、「青緑」を使って作成していく場合もこのように伝えるとイメージの共有が確かになります。

言い方は同じでも想像しているカラーリングの雰囲気がまったく違うということも起こりがちです。テイスト自体も変わってしまうことが考えられるため意識していきたいです。

余談ですが、配色に困った際のおすすめはAdobeの出しているAdobe Color CCというWebサイトです。コミュニティに参加しているデザイナーたちが、各々が作成したカラーやテーマを公開・共有しているため、アイデアとして見るのにかなり便利です。

4.入れてほしい文言・イメージなどがある場合は共有する。

デザイナー側がクライアント側の望む範囲まで理解ができていることがもちろん一番ではありますが、
必ずしも深く理解しきれていないこともあります。
デザイナー側はわからないことがあればはじめのうちに聞き、ビジョンを明確にする必要があります。
進めてから理解できていない箇所があると進行の遅れはもちろん、デザインにもずれが出てきます。
クライアント側もこれは確実に入っていてほしい…という内容があれば先に伝えるとお互いに修正を減らすことができます。

5.デザイナー側からも提案をする。

クライアントの要望に沿うことはもちろんですが、イメージを崩さないでこうした方がいいな…と依頼を受けた時点でデザイナー側が思うこともあるはずです。
その際はクライアントの要望に沿ったものにプラスして、簡単にでもはじめから別案をお送りしてみるのも良いです。あくまで簡単であることが重要で、必要以上に固めてしまうのはおすすめしません。
必ず元の案自体を消さないように注意してください。
基本的に完全にいらない!となるまではアートボードを追加するなどで対応し、いつでもやり直しや修正ができるよう備えておくことで素早く対応ができます。

※完成してからではなく、途中経過は必ず送ることを薦めます。
お互いに満足がいくようなコミュニケーションを取ることで、よりよいものが作れるはずです。


おわりに

この5点を押さえると、かなり依頼に使う要素がまとまるはずです。
重要なのはある程度の融通を利かせるのは大事ですが、お任せで作らないということです。
具体的なイメージを持ち、共有していればそれだけクライアント側もデザイン側も望んだものが製作できます。
とにかく依頼のやりとりでは抽象表現を避けることがおすすめです。後からやっぱりこんなはずじゃなかった…と修正が多くなればなるほどに、両者に負担が掛かる上に時間も掛かってしまいます。
はじめのうちから決められるところは決めてやりとりを進められるといいですね(*^_^*)

簡単・時短【Photoshop】木目テクスチャーの作り方

木目の柄を作れないかなと色々試した結果、簡単!時短!な方法を見つけたので紹介していきたいと思います。
リアルさよりも、それっぽさが勝っているのでメインを際立てる背景に使用されることをオススメします!
さっそくですが、さくっと作ってみましょう♪

※あくまでも個人的な主観で書いております。
※動作確認/環境:Windows10/IllustratorCC2021

 
必要なところだけ読みたい方はこちらから↓

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼木目テクスチャーの作り方

①下準備

※説明がしやすいようにある程度のサイズを決めております。

・縦600px横900pxの新規ファイルを開きます。
・新規レイヤーを追加し、この段階で分かりやすくレイヤー名を「木目」にします。
※もともとあった背景は消してOK
・追加したレイヤーを右クリックし、スマートオブジェクトに変換を選択します。(後の木目の柄を決めるのに重要です)

②フィルター効果1

・塗と線の色を[6d3e07/a37144](どっちでもOK)にします。
・[フィルター]→[描画]→[雲模様1]を選択します。

③フィルター効果2

・塗と線の色を[6d3e07/a37144](どっちでもOK)にします。
・[フィルター]→[フィルターギャラリー]→[パレットナイフ]を選択し、ストロークの大きさ8、ストロークの正確さ1、線のやわらかさ10にします。

④フィルター効果3

・[フィルター]→[表現手法]→[風]を選択し、種類を激しく揺らす、方向を右からにします。
・この効果は一度おこなったら、もう一回同じことを繰り返してください。

風の効果を二回かけることで、大きく動きを追加しています。
木目の雰囲気がみえてきました!

⑤フィルター効果4

・[フィルター]→[フィルターギャラリー]→[水彩画]を選択し、ブラシの細かさ14、シャドウの濃さ0、テクスチャ3を選択します。

⑥柄の調整

それっぽくなってきましたが、木目が全体的になじむように調整をしていきます。
・木目のレイヤーを複製し、右クリックでメニューを開きラスタライズをかけます。
・[編集]→[変形]→[水平方向に反転]を選択します。
・次に反転したレイヤーにスクリーン効果をかけます。

反転しているので柄が線対称のようになっています。このままですと不自然なので、反転してスクリーン効果をかけた方のレイヤーを拡大してすこし位置を変えてあげます。
今回は以下のようにしました!

⑦木目の線を入れる

次に木目の線を入れていきましょう。
・新規レイヤーを追加し、高さ2px[色:624326]の横線をひきます。今回は長方形ツールで作成しました。

・線を作成したら、同じものを5個複製します。(お好みで変えてくださいね)
・複製したら、グループ化します。グループ名は「線」にしました。

・一番上と一番下の線の位置をしっかり決めます。

・次に、線のレイヤー5つすべて選択し、整列ツールで均等幅にします。

⑧木目の線の効果

・線のグループにレイヤー効果をかけます。[色:624326]

・線のグループに乗算の効果をかけ、不透明度を80%にして線を板になじませます。

これで全体的には完成となり、このまま使用可能です。
この後はよりつめたプラスアルファを紹介していきます!

▼[作成後]木目の柄を変える

作成した木目があまり好みでない場合、少し変えることができます。
・レイヤーのスマートフィルターの「雲模様1」をダブルクリック
・ダイアログが出てくるのでOKをクリック
雲模様の効果が変化します。気にいる木目になるまでトライしてみてくださいね。


よく見ると柄に違いがあるのが分かります。大きな差ではないですが細かいところに着目するのも良きことです◎

▼[作成後]木目の色を変える

今回は白木(白色)に変換していきます!

①色相彩度変換1
・フィルターが沢山かかっている方の木目レイヤーを選択。
・[イメージ]→[色調補正]→[色相・彩度](Ctrl+U)
 色相0/彩度-70/明度+35にします。

②色相彩度変換2
・上にのせている木目のレイヤーをスマートオブジェクト化します。
・[Alt押したまま]→[動かしたい効果をドラッグしてくる]

③線の色も木に合わせて自然な感じになる様に色を変えます。
・ドロップシャドウ/長方形→[色:6a5d59]

▼[作成後]フローリングっぽく

短辺の方にも線を加えてあげると、フローリングっぽくなりました。(長辺にかけた効果を短辺にもかけてます)

▼さいごに

いかがでしたでしょうか?本物のように鮮明なものではありませんが、ちょっとそれっぽいのが使いたい!と思ったときに役に立てば嬉しいです。
ここで紹介した数値は説明用ですので、色々試して自分のやりやすいようにしてみてくださいね!
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

ポジショニングマップの作り方/バリュープロポジションキャンバスの作り方【STP分析】

【STP分析】の「P」にあたる「ポジショニング」と関係する「バリュープロポジション(提供価値)」の概念と、
「ポジショニングマップ」と「バリュープロポジションキャンバス」の作り方を説明します。
STP
 ↓「S」セグメンテーション、「T」ターゲティングについてはこちら
【STP】セグメンテーションとターゲティングの概念


目次


ポジショニングマップの作り方

「ポジショニング」とは、効果的な市場を見つけるマーケティング手法である「STPマーケティング」の「P」にあたる部分です。
ポジショニングマップ

ポジショニングにより自社サービスとの競合を分析をすることでサービスの特徴を明確化でき、既に他社に先行され新規参入が難しいセグメントや要因を確認/回避することが出来ます。

「ポジショニングマップ」の作り方は、「縦軸」と「横軸」を使った二次元マップを作ります。

入れ込むデータとなるKBF(購買決定要因)は顧客のニーズから外れてはいないか十分確認しましょう。

例えば、同じサービスであっても、「サービス料金」なのか「サービス内容」か「口コミレビュー」で、判断要因の軸が変わります。

注意点として、「サービス側の目線」ではなく、セグメンテーション、ターゲティングによって定まった「ターゲット目線」で自社と「競合」の特徴を明確化する必要があります。※サービスの特徴を判断/利用するのは利用者

しかし、相関性のあるKBFをそれぞれの軸に設定しても意味がありません(例.「価格」と「品質」)


ポジショニングに影響する要素

特徴の明確化

 「サービス内容」「価格」「手軽さ」「付加価値」「顧客経験」等。

SWOT分析

「強み」「弱み」「機会」「脅威」による分析ですが、
「競合」と「顧客」を明確に定めた戦略確定後におこなうことで効果を発揮できます。

明確なビジョンと強みが無い時点でサービスの成功はありません。

価値基準

※M.トレーシー氏&F.ウィアセーマ氏 提唱

顧客に対する価値の設定に有効な考え方で、競争優位性を持てます。

「目指すポジション」に達するまで、水準を上げていく必要があり、活動の指針となります。

【サービスリーダーシップ】
 ・最新のサービスの提供をし続ける
 ・競合他社が真似しにくい高い価値の提供

【オペレーションの卓越性】
 ・運用方法やコスト最適化
 ・提供手法の定型化

【顧客との親密さ】
 ・「顧客ロイヤルティ」による親密性を築きフィードバックを得る
 ・顧客側とのネットワークにより得たノウハウ/技術で、重要プロセスをソリューションする


バリュープロポジション(提供価値)

そして、
バリュープロポジション(提供価値)を設定することで、サービスの価値を明確に出来ます。

バリュープロポジション概念

必要なデータとして、「市場/顧客」「競合」「自社」3C分析やSTP分析が必要。

バリュープロポジションが、「お客様がサービスを買う理由」となります。


バリュープロポジションキャンバス

「バリュープロポジションキャンバス」フレームワークにより、「サービス側が認識しているの価値」と「顧客側が認識している価値」のズレを確認出来ます。
アレックス・オスターワルダー 著作『バリュー・プロポジション・デザイン』
バリュープロポジションキャンバス

進行手順は下記の順番で記入
バリュープロポジションキャンバス手順

顧客への提供価値

顧客セグメント

・顧客の課題
・ゲイン:メリット・恩恵
・ペイン:障害・リスク

を設定して

自社の製品/サービスを記入

・ゲインクリエータ:顧客の利益をもたらすもの
・ペインリリーバー:顧客の悩みを取り除くもの

以上でそれぞれの思う価値を確認出来ます。


さいごに

ポジショニング、そしてバリュープロポジションの設定をおこない明確化された双方の思う価値を一致させれば販促活動にも活用できます。

商品/サービスの紹介ページで自社だけの強みを訴求していきましょう。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

簡単に見やすいレイアウトへ!バナーの装飾5つのアイデア

こんにちは!藻です。
今回のテーマは 「簡単に見やすいレイアウトへ!バナー装飾5のアイデア」です。
広告から動画サイトのサムネイルなど幅広く目を留めてもらいたいところで作ることを避けられない「バナー」。
ちょっとした装飾の工夫やレイアウトのコツを押さえておくと、ただ文字を打つだけよりもぐんと見やすくなります。

今回は特に押さえておきたい5つのアイデア を絞ってご紹介します!


1.帯をつける

縦に、横に、斜めに長方形を外側からはみ出るように引くだけでできます。幅一直線に引けばインパクトも大。目立たせることができます。

2.図形の中に入れてみる

帯と似たような使い方にはなりますが、これも簡単でおすすめです!円や四角、三角などの図形を用意しその中に文字を配置します。フォントサイズは図形ギリギリではなくある程度の余白を残した方が見やすいです。また、フリー素材で可愛いレースの図形などがあるのでそういったものをダウンロードして使うのも◎。
図形は角からはみ出すようにしたりといった帯の使い方を応用してもポイントとして扱いやすいです。

3.フォントを使い分ける

多くのフォントを使いすぎても見にくくなり、バランスが悪くなったりとしてしまいます。しかしゴシック体と明朝体を組み合わせたり、一部だけフォントを遊ばせてもメリハリがついて見やすくなります。特に目立たせたいところはゴシック体などの太いものを使うと良いです。

4.左右に飾りをつける

簡単な図形や線を置くだけで変化がついて見やすくなります。ポップな印象も与えやすく、デザインの邪魔になることもあまりありません。

5.バナーを色や外枠などで思い切って区切る

余白を作るとただ大きくするよりも見やすくなります。また、使い方によってデザイン自体にもゆとりや勢いが生まれます。
写真やイラストを使う際は文言のスペースを確保しやすくなります。

また、上記のテクニックを使い、色や図形で区切ったり使い過ぎると画面が重たくなります。その際は代わりに線で区切るのもおすすめです!ライトな印象になります。

全体として大切なのは文字やパーツ自体はなるべく揃えて配置をすることです。
あえてはずす箇所はポイントとしてあるのはインパクトがあり良いですが、全体がばらばらになると見づらい&読みにくい印象を与えてしまいます。
逆に言えば、揃ってさえいればある程度の見やすさは守ることができます。


実際に作ってみる

それでは実際に5つのテクニックを使って全く異なるジャンルのサンプルを3点作成しました!
それぞれ要素を見ていきましょう。
①バレンタイン特集でのチョコレート販促のバナー

少ない文言でもパッとそれぞれの文字が目に入りやすくなっているかと思います。また、色合いなどは写真の色を使うなど、テーマで揃えると雰囲気がまとまりやすくなります。

②飲食店のハッピーアワーの告知バナー

お洒落なバーのような想定で作成しました。文言は多めですが、余白を思い切りとって落ち着きがあるように意識しました。

③冬の旅行特集の宣伝バナー

今回は図形をぐにゃぐにゃっとしたものを取り入れました。PhotoshopでもIllustratorでも、曲線ツールを使うと簡単に作成できます。旅行といえば楽しげになるように…と遊んだ要素が多めです。

このように意識していくだけでもメリハリのある見やすいバナーが考えやすくなると思います!


おわりに

いかがでしたでしょうか?
ここ一年たくさんバナーを作っていく中で絶対これはやる!といったレイアウトのテクニックを絞って紹介させていただきました٩(๑^o^๑)۶
どうしてもうまくまとまらないな…どうしよう…と悩んだときはぜひこの5つを思い出して挑戦してみてくださいね。
以上、まだまだ模索しながらバナーを作成し続ける藻でした。

簡単・時短【Illustrator】芝生とコルクテクスチャーの作り方

Illustrator内でどうにかそれっぽい芝生とコルクを作れないかなと試行錯誤していたところ、簡単!時短!な方法を見つけたので紹介していきたいと思います。
どちらもメイン画像に扱う(芝生やコルクを主役にして扱う)というよりは、背景にそっと使用したい場合に向いているかなと思います!
さくっと作ってみましょう!

※あくまでも個人的な主観で書いております。
※動作確認/環境:Windows10/IllustratorCC2021

 
必要なところだけ読みたい方はこちらから↓

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼芝生の作り方

①下準備

※説明がしやすいようにある程度のサイズを決めております。

・縦600px横900pxの長方形を[長方形ツール]から用意します。
・長方形の色を[04a82b(緑)]にします。

②効果をつける1

・[効果]→[ピクセレート]→[点描]を選択しセルの大きさを10にします。

③効果をつける2

・[効果]→[効果ギャラリー]→[ブラシストロークのストローク(スプレー)]を選択し、ストロークの長さ20、スプレー半径23、ストロークの方向を右上から左下にします。


この段階で、遠目から見たら芝生っぽく見えてきていますが近くで見るとガビガビしているので違和感のないように整えていきます。

④効果をつける3

・[効果]→[ぼかし]→[ぼかし(ガウス)]を選択し、ぼかし下限を0.5にします。(容量が気になる人はこの単元を飛ばしても問題はありません)

⑤整え

このままでも良いのですが、よく見ると白い部分がまばらにあるので色味調整をしていきます。
・再度同じ大きさの長方形を作成します。
・色は[8de55a]
作成したら、先ほど効果をつけた芝生のオブジェクトの上に重ねます。(整列ツール使うと便利です)

・上に重ねた長方形のオブジェクトを選択し、透明パネルの乗算を選択します。透明パネルがない場合は[ウィンドウ]→[透明]で開いてください。

▼コルクの作り方

①下準備

※説明がしやすいようにある程度のサイズを決めております。

・縦600px横900pxの長方形を[長方形ツール]から用意します。
※完成後は上下左右に一部白い部分ができるので、少し大きめに作成し、最後にマスクをかけることをお勧めします。
・長方形の色を[d1a882(薄めの茶)]にします。

②効果をつける1

・[効果]→[効果ギャラリー]→[光彩拡散]を選択し、決めの度合い4、光彩度0、透明度10にします。


ぱっと見て分かり辛いですが、一面塗にすこしボツボツした点が追加されました。これを起点に効果を掛けていきます。

③効果をつける2

・[効果]→[効果ギャラリー]→[アーティスティックの塗料]を選択し、ブラシサイズ1、シャープ8、ブラシの種類を幅広(ぼかし)にします。

④効果をつける3

・[効果]→[効果ギャラリー]→[アーティスティックのパレットナイフ]を選択し、ストロークの大きさ9、ストロークの正確さ3、線のやわらかさ3にします。

⑤効果をつける4

・[効果]→[効果ギャラリー]→[ブラシストロークのはね]を選択し、スプレー半径25、滑らかさ15にします。


▼さいごに

実際にはIllustrator上でPhotoshopの機能であるフィルタギャラリーを使用していますが、イラレ上で完結できると思いのほか便利です。
色々試して自分のやりやすいようにしてみてください!
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

【資料 レイアウト】わかりやすい パワーポイント レイアウト

今回は、PowerPoint(パワーポイント/パワポ)などの資料作成について、極力シンプルで情報量少なくわかりやすいレイアウトを紹介します。


目次


テキスト構成

まずはページに乗せるテキスト情報を箇条書きで設定します。
載せる情報を先に「メモ帳」などで作成してまとめ、決めておくことで、効率的にレイアウト作業に集中出来ます。

文字量は多めにしておき、後ほど短く集約して伝わる(読んでもらえる)文章量に落とし込みます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

箇条書きしていた文章をコピペしてザックリと配置していきます。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

各項目名の文字サイズを説明文より一回り大きく変更して優先度を高くします。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

さらに、各項目名の中でも優先度順に文字サイズを一回り大きくします。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

説明分の方にも優先度順に文字サイズを変更してしき、長めに用意していた文章を要約して短くして伝えられる文章量に落とし込みます。

表題やキャッチコピーは1行で、

大項目は2行で、

その他の説明文も最大3行~4行でまとめる意識を持てれば、伝わる文章量の出来上がりです。
※みっちり長々と書かれた文章は読む気力を削いでしまいます。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
この状態でテキストの設定は完了です。

続いて、目線の誘導と関連項目のグループ化がおこなえる、余白設定(ホワイトスペース)を施します。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
余白設定はレイアウトの要です。
詰め込みがちな資料に十分な空間を持たせることで、読み手(資料を確認する人)に「わかりやすさ」と「親しみやすさ」をイメージしてもらえます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
ここまでシンプル化出来れば必然的にわかりやすい文章量とレイアウトになり、装飾が無くても伝わる状態になっています。


面と線を使った装飾

それでは、「面」と「線」を使った装飾に移りますが、
構成のNG例を展開します。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
面を使った題名の装飾例ですが、
「圧迫感」「威圧感」があり、構成も一辺倒なため、固い印象を与えてしまいます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
こちらは、やってしまいがちな枠線の入れ子オンパレードです。

目が回りますし、注力ポイントも判別できず、不鮮明で不安な印象を与えます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
こちらは、装飾表現は被りもなく特徴的/説明的で問題ないですが、テキスト文章量の要約を怠った際に見られる状態です。

多くを伝えよう、よりよく分析しようと気持ちが先行すると、読み手を意識出来ない圧倒的な文字量を構成してしまいます。

そうなると、「読みたくない」「読まれない資料」が出来上がってしまい、プレゼンの際にも文字を追うことで気が飛び、頭に入ってきません。

表現の被り、「面」と「線」の優先度/訴求力に注意して装飾すればレイアウトの完成です。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
「面」と「線」の優先度については、塗りの面積量で判断できます。

塗り面積の狭い「線の表現」は、
塗り面積の広い「面の表現」には勝てません。

より目立たせたい項目には塗りの表現を施し、文字を白抜きしてコントラストを高めて存在感を増します。

装飾が完了したら、最後に色で華を添えて仕上げです!
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
「ブランドカラー」「サービスカラー」をメインカラーとして多くを使い印象付けをし、挿し色アクセントカラーで「トピックポイント」際立てます。

「赤」は警戒色/警報色ですので、適切に使って親しみやすさを維持させましょう。

「見やすく」「わかりやすく」「親しみやすい」資料に見えますでしょうか。


さいごに

資料を作るとき、多くを伝えたくなり、それぞれ情報の優先度が平均化してしまいます。

取っ掛かりのワードをストレスなく見てもらうことで、次の優先度の訴求に関心が生まれ自然と目が移動します。

細部の細かい文字や説明まで読んでもらえれば十分な訴求が完了していることと思われます。

今回の情報が、毎日の資料制作にプラスになれば幸いです。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

【Photoshop】簡単!Adobe Camera Rawで荒い画像を綺麗にする方法

こんにちは、藻です。
今回のテーマは 「【Photoshop】Adobe Camera Rawで荒い画像を綺麗にする方法」です。

撮った写真やネットでゲットした写真素材を使おうと思ったとき、
「あれ…画像、荒くない?」ということに直面したことはありませんか?私はよくあります。綺麗に撮れるはずのiPhoneで撮影したのになんだかぼんやりかすんでいる…。暗い…などなど!

そこで、Photoshopのプラグイン、Adobe Camera Rawでノイズ軽減をして簡単に画像を綺麗にする方法を紹介します!

今回はサンプル用に画質をガビガビにしたこちらのパンの画像をきれいにしていこうと思います。

※フリー素材です。

またおまけ程度ではありますが、このツールを使用して写真としての
クオリティをあげるコツも紹介します。

使用するソフト
■Photoshop 2020
※Camera Rawフィルターはもともと入っているプラグインです。


目次


1.Adobe Camera Rawとは?

Adobe社が提供しているPhotoshopのプラグインです。
本来はデジタル一眼レフなど高品位な写真編集を行い、
Rawデータを現像するためのツールです。(※Rawデータは現像用データのことです!)
しかしながらこのツールではjpegといった通常の画像も編集することが可能です。
画像の編集に特化しており、バーを触って調整していくだけで
機能に詳しくなくとも美しい画像を作る ことができます。
ちなみにAdobeからはLightroomというRawデータ現像用ソフトも出ており、似たように写真の編集・色合い調整が可能です。が、Camera rawはそのままPhotoshopの加工にも入れるところが魅力ですね。Photoshopのみで編集を完結することができます!

2.Adobe Camera Rawでノイズ軽減をしよう

先ほど載せた画像を綺麗にしていこうと思います!
Photoshopにノイズを軽減するフィルター自体はあるのですが、
Camera Rawの方が詳細に設定ができるためより綺麗に画像を補正できます。
フィルターでCamera Rawフィルターを起動するとこのような画面が表示されます。

今回使うのはここ、ディテール欄!

確認しながら作業するためにこのように100%以上に拡大して作業するようにしましょう。
それにしても画像の荒さが余計にわかりますね…。

ノイズがかっていてこれではおいしそうなパンのアピールができません…。
さっそく補正していきましょう。

個人的には[カラーノイズの軽減]→[ノイズ軽減]→[シャープ]の順に調整してから
全体の調整をすることがおすすめです。
操作方法は簡単で、スライダーを右に少しずつずらしていくだけです。
一気に右にずらしてしまうとむしろ不自然になってしまうこともあるので、
様子を見ながら行います。

写真の中でも暗い箇所にはノイズが発生しやすいため、漏れなく画面全体を注意していじります。

だいぶ軽減されましたね!

さて、全体を見てみます。

全体は記事だとわかりにくいかもしれませんが;;当初のような荒い印象はなくなりました。
数値は写真によってまちまちのため参考程度ではありますが、こんな感じになりました。

画質がきれいになるまででいいや!という方はここでOKを押して完了となります。あっという間ですね!

3.さらにちょっとした手間で写真のクオリティを上げよう

画質自体はだいぶ改善されましたね。しかしなんとなく写真自体としてはまだいまいちなのは事実です。ほんの少し手を加えるだけでより雰囲気の良い写真にすることができます。
次に使うのはここ、基本補正欄 です。

項目が多くあるのですが、今回は絞ってこの4つのみで行いましょう。
ここだけでも十分に調整できます(*•̀ᴗ•́*)و ̑̑

あとは様子を見ながら先ほど同様にスライダーを左右に動かして自分好みに仕上げてください!実際に触ってみれば直感的に行えるはずです。
私はパン屋さんらしい温かみを出したかったため色温度を黄より(右側)に調整しました。そうして出来上がった画像がこちらです。

だいぶ雰囲気も変わったのではないでしょうか?
アイキャッチに使用したのはこちらの補正後のものなのですがなかなかいいはず…!

今回は4つの項目のみで補正しましたが、他の項目も慣れてきたら触ってみるとさらに表現の幅が広がるかと思います!

4.最後に

いかがでしたでしょうか?
Adobe Camera Rawを使うことでPhotoshopで通常通り補正するよりも一気に、かつ簡単に様子を見ながら画像の補正ができます!
せっかく用意した画像がうまく撮れていない…といったときにあきらめず試していただけたらと思います٩(๑^o^๑)۶
以上、最近寒さに勝てていない藻でした。

【Illustrator】和風柄 簡単!パターンの作り方

今回は和風柄パターンの作り方を紹介していきたいと思います!
年末年始や、もちろん普段から和風柄を使いたいなと思ったときに和風柄パターンが自分で用意できると便利ですし、アレンジもできるので楽しいですよ!一度作ってしまえば、編集したりして改修できるのでまずは作ってみましょう!

※個人的な主観、作り方で書いておりますので参考にどうぞお役立てください。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

◎目次◎

縁起の良い末広がりの意味も込めて、今回は8種類の和風柄パターンの作成手順を紹介していきます!
見たい柄を選んでくださいね♪

1.市松2.鱗3.鹿の子4.七宝つなぎ(線ver/塗ver)5.青海波6.麻の葉7.毘沙門亀甲8.矢絣

さいごに

いかがでしたでしょうか?
一部の和風素材を作るだけで、簡単にパターンが作れました!
和風柄は今回紹介した以外にもたくさんあります!
こちらの記事を参考に様々な和風柄にチャレンジして自分だけの和風柄パターンを作ってみてくださいね♪
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

和風柄パターン 8.矢絣

8.矢絣

柄の意味
射た後の矢は戻ってこないことから婚礼の際の縁起物として用いられたり、破魔矢のように邪気を払う意味も込められている。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】横30px 縦100pxの長方形(色992032)を1つ用意します。
【2】右側の上下アンカーポイントのみ選択し、縦の半分のサイズ下に動かします。今回は50pxになります。

【3】オブジェクトと同じくらいの長方形を作り、オブジェクトの右側垂直に、ほんの少し重ねます。(この部分が矢絣の真ん中の部分になります。)

【4】次にそのまま1つ複製し、元の画像は長方形を消し、複製した方はパスファインダーの交差で型抜きします。

【5】型抜きした方が上に来るようにして右下ぞろえをします。
整列ツール使うと楽です。

【6】[Ctrl+K(環境設定→一般)]で30(横幅)を入力します。
・オブジェクトを選択し[Alt+→(右矢印)]で複製。
・[Alt+O+T+E→垂直(オブジェクト→変形→リフレクト→垂直)]でオブジェクトを反転させます。

【7】背面のオブジェクトと真ん中のオブジェクトが左右それぞれバラバラになっているので、パスファインダーで合体します。

【8】[Ctrl+K(環境設定→一般)]で100(最初に用意した長方形の縦)を入力します。
・オブジェクトを選択し[Alt+↓(下矢印)]で複製。
・色の調整をしました。(追加色ea738a)

【9】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。


【10】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。

一言でいえば、矢のとんがりは初めに用意した長方形の縦半分のサイズを動かす場合のみ有効って感じですね。(私のやり方なので他にいい方法があるかもしれませんが…)
上手くいかない場合はパターンオプション編集時に、プレビューで
見えてる部分を拡大してオブジェクトのズレを調節することをお勧めします。


→戻って他の柄を見る


和風柄パターン 7.毘沙門亀甲

7.毘沙門亀甲

柄の意味
亀甲とは亀の甲羅を言い、長寿の意味を持っている。
七福神の毘沙門天の鎖鎧に三盛亀甲をつなげた形から毘沙門亀甲と呼ばれるそう。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】角の部分が上に来るように高さ120pxの六角形(色c8beed)を用意します。
【2】用意したら横幅のサイズを確認して[Ctrl+K(環境設定→一般)]に数字を入力します。今回は、103.923です。
・オブジェクトを選択し[Alt+→(右矢印)]で複製。

【3】複製して六角形が2個並んでいる状態を、グループ化[Ctrl+G]してさらに複製します。複製したら、片方のオブジェクトを
[Alt+O+T+E(オブジェクト→変形→リフレクト)]で画面を開き、角度の部分に120と入力してOKします。(正三角形の集まりなので)

【4】以下の二つの画像を、三角形になる様に合わせた時に上に六角形1個、下に2個来るように整列ツールで揃えます。

【5】パスファインダーの合体で1つのオブジェクトにします。

【6】線の淵を使って毘沙門亀甲の柄を入れましょう。
ここでは線の位置をすべて内側に揃えます。
・内線8px(色b7a780)を追加しました。

【7】今作ったオブジェクトを1つ複製します。
線の幅をより太くして、(今回では)紫の部分が良い感じにほっそりする様に調整します。今回は内線44pxにしました。

【8】次に[オブジェクト→パス→パスのアウトライン]で分解、
[パスファインダー→分割(左下にある)]でオブジェクトを分割します。
そしたら、真ん中のオブジェクトをダイレクトツールでコピー&ペーストし、元のオブジェクトはいらないので消しちゃいます。


【9】内線8pxのオブジェクトが下になる様に、整列ツールで中央に揃えます。この時、真ん中のオブジェクトの色を淵と同じ(色b7a780)にしました。

【10】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【11】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。


→戻って他の柄を見る