配色と目線誘導、明度のレイアウト

色にはそれぞれ、隣り合わせた色、囲む色により影響を受けます。

配色の組み合わせについても目線を誘導するメインの色と、それを引き立たせる周りの色があり、それらが逆転すると構成レイアウトの目線が変わってきます。

白に目が行く

白に目が行く

グレーと白の構成ですが、白に目が行きます。

赤丸が置かれた白の領域に目線(意識)が誘導されます。

右側の画像は、周りの白に誘導され、差分のグレーに行き着きます。

余白が白い構成は多いですが、目線は、左の画像に比べて多少寄り道しています。


黄色に変えてみる

黄色に変えてみる

薄いグレーから明るい黄色に変えても目が行くのは白の領域です。

黄色の方が目が行くかたも、「明るい」「暗い」の「明度」を意識してみてください。


白を使わず黄色と水色

白を使わず黄色と水色

黄色と水色の構成に変更しましたが、ここでも「明度」の違いが表れます。


水色と緑

水色と緑

「明度」が僅差ですが、水色に目が誘導されます。


黄色と緑の構成

黄色と緑の構成

黄色と水色、
水色と緑、
2つの構成よりも黄色の明度差が引き立ちます。

何故でしょうか。


色の明るさ

色の明るさ

白を含めた7色を、色の明るい順(明度順)に並べてあります。

先ほどの「黄色と緑」の構成がより黄色が目立ったのは、隣り合わせの構成ではなく、水色を飛ばしコントラストが高まった影響です。


明度をグレースケールで確認

明度をグレースケールで確認

7色の色をグレースケールに変換すると明度の違いに納得ができるのではないでしょうか。


七色は光の三原色で構成

七色は光の三原色で構成

白はすべての可視領域の光(今回の場合は光の三原色)を含んだ一番明るい色です。

原則、一番明るい部分に目線は誘導されます。


明度の違いが小さい組み合わせ

明度の違いが小さい組み合わせ

隣り合わせた色で構成レイアウトしてしまうと、明度の差異が小さく見にくい組み合わせになります。


明度の違いが大きい組み合わせ

明度の違いが大きい組み合わせ

補色など、離れた色で構成レイアウトすれば、明度の違いによるコントラストが高まり視認性が上がります。


中間色で落ち着いた色へ

中間色で落ち着いた色へ

しかしながら、
明度はある程度離れていれば視認性は十分確保されるため、目に優しい中間色に落とすことで、疲れを意識する必要があります。


さいごに

印刷(色の三原色_CMYK)を必要としないデジタルサービスが中心となってきた影響もあり、スマートフォンの画面の中にはRGB(光の三原色)による目に刺さる明度の高い色が増えてきました。

明度の違いを上手に取り入れながら、計算された配色レイアウトを意識していきましょう。

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

塗りや線から考える、色が変わるボタンのUI

こんにちは、藻です。

先日Twitterのアップデートが入り、ボタンのUIについて話題になりましたね。だいたいこのような変更のされ方をしております。色とともに線と塗のルールも反転しています。

私は未だに慣れておらずうっかりフォローしたり外したりをしてしまっております。InstagramといったSNSの仕様に合わせるようなモノクロボタンへの変更ですが、私のようにTwitterをよく使っていた場合、まだ慣れていない方も多いのではないでしょうか。

そこで今回の記事のテーマは「塗りや線から考える、色が変わるボタンのUI」です!
改めてボタンについて考えていきたいと思います。


まず、色の変わるボタンとは?

大きく分類として、4つに分かれるのではないでしょうか。
(1)押したり取り消したり何度も押せるボタン
(2)一度押すと取り消しのできないボタン
(3)文字などを入力すると押せるようになるボタン
(4)カーソルを合わせると色が変わるボタン(ホバーボタン)

それぞれどのような表現があるかを今回は紹介していこうかと思います。


1.押したり取り消したり何度も押せるボタン

基本的に線白抜き→色塗りつぶしで作成することが多いです。といいますのも、押すと白抜きのボタンが全面塗りに変わる→塗りつぶしできた!というように、視覚的に判断しやすいからです。
例えば、SNSのいいねなどで活用されるハートマークで比べてみるとわかりやすいのではないでしょうか。従来のフォローボタンもこのような作りになっていましたね。


2.一度押すと取り消しのできないボタン

これはマッチングアプリでのいいねや、ソーシャルゲームでのフレンドポイントを送る機能などが該当しますね。ポイントを消費して押す際や、押せる回数に制限があり取り消すことを想定していない場合などに使われます。このボタンは標準的に塗りで表示され、押すとグレーアウト、あるいは薄いカラーになり押せないものと判断させるように作成されます。積極的に押してもらうことに意味があるので目に入りやすい塗りボタンで作成されるのかもしれませんね。


3.文字などを入力すると押せるようになるボタン

こちらに関しては、必須で項目の選択、または入力する情報が必要な際に表示されるボタンです。入力するまで押せないと一目で見てわかるよう、グレーアウトあるいは薄い色で予め表示されます。入力が完了することで色が付き、押せると視覚的にも伝わりますね!説明で文字として「必須」と書くだけではなく、こういったUIを取り入れることで親切なホームページになるはずです。


4.カーソルを合わせると色が変わるボタン(ホバー)

こちらは最近のホームページではよく見かける表現ですね!カーソルを合わせる(マウスオーバーする)と色が変わる、アニメーションが動くといった動作自体をホバーと呼びます。押せる!といったことがわかりやすく目に留まり、つい押したくもなっちゃいます。ホームページのデザインに個性もつけやすいですよね。ユーザーの視点でも飽きさせることを避けたりできそうです。


おわりに

いかがでしたでしょうか。こう考えてみると一概にボタンとはいえ、使い分けをしていくことでよりよいUIが作れたり、気づきになりそうですよね!せっかく設置するのであれば、単なるボタンで済ませるのではなく効果も考えて表現を組み込んでみることがおすすめです。
Webページやアプリケーションデザインをする際に何気なくではなくここはこのボタン!こういった配色!と判断していくことでデザイン的にも利用者側にも効果的に使いやすくなるかと思います。
ぜひいろいろと試してみてくださいね。

それではデジマースの藻でした。

Photoshopのボタンクリックだけで木を作る方法

フォトショップの機能をつかうと、ボタンのクリックだけで色んな木が作れてしまうのです。とっても気になりますよね?さっそく作ってみましょう!

※あくまでも個人的な主観で書いております。ご了承の上お読みくださいませ。
※動作確認/環境:Windows10/PremiereProCC2021

 

目次↓


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

こんな感じでつくれます

ざっと様々なパターンで10種類を作成してみました。これも設定など細かくすればするほど表現の幅が広がります。リアルなものからイラストまで作れてしまいます。


作成1:生い茂った樫の木

基本的にどんな木も手順としては同じです。選ぶ内容や設定で差がだせます。今回はわかりやすく「生い茂った樫の木」を作ってみましょう。

■準備1:カンバスサイズ

説明用に今回は600×600pxにしています。
作成する木のサイズですが基本的に、開いたファイルの大きさが基準になります。

※いつでもサイズの拡大縮小ができるフォントとは異なり生成後の木の編集はできなさそうなので最初のカンバスサイズが大切です。

■準備2:新規レイヤー

説明用に今回は600×600pxにしています。
選択されているレイヤーにそのまま木が生成されますので、背景透過で使用したい場合は新規レイヤーを作成しましょう。

※すでに内容があるレイヤーを選択していると中身が重なってしまいます。

  

■準備3:木の編集画面

【フィルター>描画>木…】をクリックして編集画面を開きましょう。


■手順1:ベースの木の選択

編集画面を開いたら最初にベースとなる木の種類を選択します。今回は[1:樫]を使用します。
(何も編集してなければデフォルトで樫になっているかと思います)

■手順2:木の調整①

次に木の基本設定を調整していきましょう。設定したらOKクリック。
[葉の量:65/葉のサイズ:92/枝の高さ:125/枝の太さ:138]
[初期設定の葉:ON]
それ以外はすべてOFFまたは0

■手順3:木の調整②

次に木の詳細設定を調整していきましょう。設定したらOKクリック。
[葉にカスタムカラーを使用:ON/赤104/緑179/青60]
[枝にカスタムカラーを使用:ON/赤147/緑115/青85]
それ以外はすべてOFFまたは0

■完成


作成2:イラストちっくな木

次にリアルな表現を薄めた「イラストちっくな木」を作ってみましょう。
※準備①~③は上記「生い茂った樫の木」と同じになりますので割愛致します。

■手順1:ベースの木の選択

編集画面を開いたら最初にベースとなる木の種類を選択します。
今回は[6:トウヒ]を使用します。

■手順2:木の調整①

次に木の基本設定を調整していきましょう。設定したらOKクリック。
[照射方向:92/葉の量:79/葉のサイズ:200/枝の高さ:119/枝の太さ:200]
[初期設定の葉:OFF/葉の種類12]
それ以外はすべてOFFまたは0

■手順3:木の調整②

次に木の詳細設定を調整していきましょう。設定したらOKクリック。
[カメラの傾き:9]
[葉にカスタムカラーを使用:ON/赤0/緑94/青47]
[枝にカスタムカラーを使用:ON/赤77/緑55/青38]
[フラットシェーディング-葉:ON]
[フラットシェーディング-枝:ON]
[葉の回転をロック:ON]
それ以外はすべてOFFまたは0

急にイラストっぽくなるのはなぜ?ざっくり言うと…
★フラットシェーディングで精密に立体的だった表現を抑えているよ
★葉の回転をロックすることで、葉の立体的な表現(葉を側面から見たときに線みたく見えたりする)をせずに葉の面が、基本的にこちらを向く様になり奥行きが抑えているよ

■完成


作成3:デザインちっくな木

次は現実的な表現を薄めて「デザインちっくな木」を作ってみましょう。
※準備①~③は上記「生い茂った樫の木」と同じになりますので割愛致します。

■手順1:ベースの木の選択

編集画面を開いたら最初にベースとなる木の種類を選択します。
今回は[29:観葉植物]を使用します。

■手順2:木の調整①

次に木の基本設定を調整していきましょう。設定したらOKクリック。
[葉のサイズ:139]
[初期設定の葉:OFF/葉の種類16]
それ以外はすべてOFFまたは0

■手順3:木の調整②

次に木の詳細設定を調整していきましょう。設定したらOKクリック。
[カメラの傾き:4]
[葉にカスタムカラーを使用:ON/赤239/緑46/青104]
[枝にカスタムカラーを使用:ON/赤218/緑148/青101]
[コントラストを強調-葉:ON]
[フラットシェーディング-枝:ON]
[葉の回転をロック:ON]
それ以外はすべてOFFまたは0

★コントラストを強調を入れると普段であれば立体的な要素を後押しする役割のイメージがありますが、今回の場合は色数を増やす目的と色味にメリハリを持たせる意味合いでONにしています。なのでフラットシェーディングの葉はOFFにしています。

■完成


あとがき

いかがでしょうか?初心者でも玄人でも楽しく作れちゃいますね!
設定する数字1の差でだいぶ見た目に変化が起こったりするのでいろいろ試してみてくださいね!
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

レイアウトのやり方/文字/画像【情報量が極端に少ない場合】

バナー画像などを作成する状況で、組み込む情報量が少なくレイアウトに困ることがあります。

  • メイン訴求のビジュアル素材がない
  • 文章量が少ない
  • 公式ではない画像要素の追加が難しい

ビジュアル素材がそもそもない状況はさすがに稀ですが、
文章量が少ない状況は多く、また、確定したテキスト情報は変更できないため、なかなか苦しい作業になりがちです。

今回はさっくりと確認できる記事で紹介します。
まずはテキストレイアウトについて確認していきます。

ビジュアルとテキストを均等に配置(1)

文字情報量が極端に少ない画像レイアウトのやり方
均等に配置しているので大きな問題はないですが、平均的すぎます。


ビジュアルとテキストを均等に配置(2)

文字情報量が極端に少ない画像レイアウトのやり方
均等間隔で配置されているのでビジュアルを見た後の目線の誘導に不安が残り、文言の優先度もまだまだ設定できます。


文言の優先度と目線の誘導を設定(1)

文字情報量が極端に少ない画像レイアウトのやり方
左のメインビジュアルを見た後の目線移動を自然にするために、文言の上部余白(A)を下部余白(D)よりも、やや広めにとっています※今回はサンプルとして広めに確保してます

文言の優先度順は下記。

  1. 曲名 50px
  2. アーティスト名 36px
  3. 詳細情報 20px

文言の優先度と目線の誘導を設定(2)

文字情報量が極端に少ない画像レイアウトのやり方
適応させてみました。
上部余白を少々広くとってますが、
「曲名」を中心に優先度のメリハリを付けたので、注目するポイントが定まり目線の移動が安定しました。


「カタカナ」と「漢字」のバランス調整

文字情報量が極端に少ない画像レイアウトのやり方
カタカナ/ひらがな/英字については、文字自体の情報量が漢字と比較してシンプルなため、少々小さくすることで文字のチープ加減を軽減させることができます。


カタカナの場合

文字情報量が極端に少ない画像レイアウトのやり方

英字の場合

文字情報量が極端に少ない画像レイアウトのやり方
また、英字にすることで文字の意味合いが薄れ、純粋にビジュアル的なシルエットとして見ることもできます。

それでは、本題である文字情報量が極端に少ない画像を見てみます↓


文字情報量が極端に少ない画像

文字情報量が極端に少ない画像レイアウトのやり方
この状態は非常にシンプルで、レイアウトのバランスとりも非常に難しくなります。

したがって、
このまま進めるよりも、文字情報量を増やす試みが適切です。


ビジュアル的要素に置き換える

文字情報量が極端に少ない画像レイアウトのやり方
ロゴ画像などのビジュアル要素は、画を華やかに変化させてくれます。


詳細情報を追加する

文字情報量が極端に少ない画像レイアウトのやり方
詳細情報を追加で貰うことが何よりも改善できます。


さらに詳細情報を追加する

文字情報量が極端に少ない画像レイアウトのやり方
さらに画像の説得力を演出するために、権利者表記などを追加することも有効です。


さいごに

文字情報入りの画像を制作する場合は、優先度(文字サイズ)が異なるメリハリある文言で訴求することが望ましく、可能であれば豊富な文字情報から有効な情報だけを残す調整/精査ができると、なお効果的です。

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

Adobe Colorを使ってセンスのいい配色を学ぼう【デザイン・資料作成】

こんにちは、藻です。

デザイナーもノンデザイナーも絶対悩んだことのあるであろう「配色」。かく言うWebデザイナーである私も、昔は配色がかなり苦手でした。今でもデザイン中にぐるぐる悩みがちですし、どういう風にすればさっぱりともなります。
さらに言えば色さえよければなんでもある程度よい感じに見えるという偏見を個人として持っているのでなんていうかもう…

こうなってます。しかし現代はとにかく便利です。気軽におしゃれかつセンスの良い配色アイデアを収集できます。
そこでこんな悩みを解決するべく、今回はAdobeの提供するサイト、Adobe Colorのご紹介です。
参考にするだけでかなり整った色使いをすることができます!なにより見ているだけでトレンドのカラーを押さえたりと勉強になります。
デザインやUIに組み込むのはもちろんパワーポイントなどの資料で使うのもかなりおすすめです!たとえば…

同じ図でも印象が変わりますよね。左は原色でとりあえず作ったもので、右はAdobe Colorのパレットを参考にしたものです。


Adobe Colorとは?

公式サイトはここ!→https://color.adobe.com/ja/create/color-wheel
Adobeの提供するWebサービスで、コミュニティに参加しているデザイナーたちが、各々が作成したカラーやテーマを公開と共有をしています!
さらに無料で使用できます。写真からパレットを作成したりなんかもできちゃうのですが、今回は配色を学ぶこと・アイデア収集を中心にご紹介していきます。


テーマを検索しよう

まず、ページに飛んでヘッダー部分から「探索」を選びます。

あとは検索サイトさながらにキーワードを入れて調べるだけです。
たとえば「夏」で調べると夏らしい写真やデザインのカラーパレットがずらっと出てきます。
検索してでてきたサムネイルをクリックするとこのように様々な形式でカラーパレットを保存することができます。

今回は「夏」で出てきたカラーパレットをjpegで保存して並べてみました。夏っぽくてかわいらしいパレットを一気に見ることができました!

ここから自分がどういう夏のイメージにしたいのか?など考えていきやすいですね。カラーコードも表示されているので試作もしやすいです。


トレンドについて知ってみよう

でもって、今どういう感じのが流行っているんだ?Adobeの一押しとかあるのか?と思ったときは、ヘッダーから「トレンド」を選択してみましょう。

画像にも書いてはありますが、BehanceやAdobe Stockといったクリエイティブコミュニティからの様々な業界の最新のカラートレンドがピックアップして紹介されています!
この画面ではファッション界の流行カラーの紹介ですが、グラフィックデザイン、イラスト、建築、ゲームデザインなどなど広い範囲でのトレンドをここを開くだけでチェックできます。もちろんパレットも見れます。詰まった際はぜひ参考にしてみたいところです。


【おまけ】Adobeソフトで使ってみる

Adobe ColorはCreative Cloudの一部のため、カラーテーマをアドビのアプリ(IllustratorやPhotoshopなど)で、Creative CloudライブラリまたはAdobe Colorオンラインサービスを介して利用することができます。
早速さきほどと同じ工程で保存画面まで行き、「ライブラリへ追加」を選びましょう。

AdobeにログインさえしていればこれだけでCreative Cloudに保存することができました!
さて、次はIllustratorを起動しCCライブラリの項目を見ると…

もう、すぐに使えるようになってます。テーマごとスウォッチに入れられるのも便利ですよね。
PowerPointなどAdobeアプリ以外で使う場合はjpegで保存してスポイトでカラーをテーマとして登録していくのが早いかと思います!


おわりに

デザインの際に配色というのはやはりつきものです。それは必ずしもデザイナーでなくても、資料を作成したりデザイナーに要望を出したりなどなど、様々なシーンがあるかと思います。しかしこれは自論にはなってしまいますが、慣れないうちや考えるだけではうまくできないものです。ぜひ参考になるサイトを知っていたり、アイデア収集のきっかけとして頭に入れて、見ておくだけでもかなり学びになり、センスを養っていけると思います。

おしゃれな資料やグラフィック、制作物を作ってぜひ楽しいデザインライフをお過ごしくださいね。

初心者の備忘録【Premiere Pro】動画のスローモーションの仕方

今回は備忘録もかねて、動画のスローモーションの仕方を書いていきたいと思います。分かるととても簡単なので、まずはやってみましょう!

※あくまでも個人的な主観で書いております。ご了承の上お読みくださいませ。
※動作確認/環境:Windows10/PremiereProCC2021

 
目次↓

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

最初に

映像+音が一緒になっている動画データは、「映像」と「音」がリンクした状態になっているので別々に作業をおこないたい場合は、最初にリンクを解除してしまいましょう。

必要に応じて、音と映像を切り分けましょう。

1.パーセントで指定する①

※「映像」と「音」はリンク状態を解除しています。
細かいことは考えずに、これくらい遅くしてみよう!というときにシンプルにやりやすい方法かと思います。

■編集画面を開く

タイムライン上の該当する部分を選択し、右クリックでメニューを開き[速度・デュレーション]を選択します。

■編集画面を開いたら以下のように設定

【速度/今回は50%】【リンク/リンクさせる
今回は15秒の動画を2倍の遅さにするので、シンプルに半分の50%を入力しています。

■編集完了です

タイムラインを見てみると、2倍の遅さ[50%]の表記は追加され、動画も2倍にのびているのが分かりますね。


今回は「映像」と「音」のリンク状態を解除していますが、リンクしていると両方とも、ひきのばされます。

2.パーセントで指定する②

※「映像」と「音」はリンク状態を解除しています。
流れ自体は「1.パーセントで指定する①」と同じですが、追加条件として元の動画の秒数は変えたくない場合はこちらが向いています。

■編集画面を開く

タイムライン上の該当する部分を選択し、右クリックでメニューを開き[速度・デュレーション]を選択します。

■編集画面を開いたら以下のように設定

【速度/今回は50%】【リンク/リンク解除
今回は15秒の動画を2倍の遅さにするので、シンプルに半分の50%を入力しています。
リンクを解除することで元の動画の長さには触れずに、速度だけを減速させています。

■編集完了です

タイムラインを見てみると、2倍の遅さ[50%]の表記は追加されましたが、動画自体の長さは変わっていません。

本来15秒を2倍の遅さにしているので30秒になるところ、見た目15秒におさめているので、どうしてもはみ出てしまう部分があります。

■表示範囲の移動

もし、表示される動画の位置を変えたい!という方は、はみ出したところは、削除しているわけではないので必要に応じて編集を試みてください。(以下一例です)

①該当する動画部分をダブルクリックをし「ソースモニター」を表示します。
②ある程度全体像が見えていた方がわかりやすいので右の丸をドラッグさせて帯を見やすく調整してください。今回は一番右まで動かしています。
③「表示されている部分」の真ん中をよく見ると縦線3本並んだ記号があります。この上にカーソルを合わせると手のマークが出てくるので、クリックしたまま動かすことで表示範囲の移動ができます。

3.秒数で指定する

※「映像」と「音」はリンク状態を解除しています。
ひきのばしたい秒数が決まっている場合に向いている方法です。

■編集画面を開く

タイムライン上の該当する部分を選択し、右クリックでメニューを開き[速度・デュレーション]を選択します。

■編集画面を開いたら以下のように設定

【デュレーション/今回は00;00;30;00】【リンク/リンクさせる
今回は15秒の動画を26秒にひきのばしたいので、26秒を入力しています。入力したら、この画面内の適当な余白をクリックすると内容が確定され速度のパーセント数値が変化したのが分かります。

■編集完了です

タイムラインを見てみると、動画自体が少しのび、秒数をのばしたことで変化したパーセントの表記が追加されていますね。

あとがき

スローモーションの仕方は以上となります。
一度やってみれば、さほど難しくはないので色んなものをスローモーションさせてみてください。
あくまでも個人的な主観で書いておりますので、こちらは参考程度に自分のやりやすいを見つけてくださいね!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

Adobe XDのアセット・コンポーネントを使って楽&簡単Webデザイン!

こんにちは、藻です。

今回のテーマは「Adobe XDのアセット・コンポーネントを使って楽&簡単Webデザイン!」です。

プロトタイプを作成する中でこのボタンや色何度も使うな…毎度コピペめんどくさいな…これ色だけまとめて変えたりできないかな…一括して変えたいよ…といった悩みに直面することはUIデザインに関わる方やXDユーザーにとって少なくはないはずです。
デザインをする上で統一感は重要です。なるべく同じものは同じように使いまわしたりしたいところ。

そこでかなりこれは使える…と思ったXDの機能、アセット機能をご紹介します!案外アセット機能の使い方がうまくわからないという方もいるのではないでしょうか。(私が最初はそうだったため笑)
初心者向けで簡単かつ、これさえできれば活用しまくれるかと思いますので是非お試しを。


アセット機能とは?

まず、簡単に言えば「使う色やボタンの設定を保存しておける機能」です!こんな感じにフォントやグループ化したオブジェクトに対して【右クリック】→ぽちぽち【追加】していくだけでアセットパネルにまとまってくれます。

開くにはワークスペース左下にある、一番上のアイコンを選択してください。

使う文字スタイルやカラー、ボタンを予め作成して登録しておくとかなり楽に、美しいデザインができるようになります。ばらけさせずに統一感のあるデザインに役立ちますよ。デザインガイドとして登録するのもいいですね。
毎度フォントサイズを確認したりする手間も省けます。なんと文字は色設定も込みで登録できます。
ちなみにボタンやヘッダーといったかたまりを登録する場合はコンポーネントを選びましょう。もちろんメイン以外のコンポーネントは文字やカラーを変更するのも個別に変更したり打ち換えるのみなので簡単です。


コンポーネントを整理しよう

中でも少しややこしいアセットの設定はコンポーネント。おすすめは都度登録するのではなく、一枚コンポーネント用のアートボードを用意することです。これで開発側にも親切に作れる上になんといってもまとめて管理ができるようになります。このおおもとの素材ってどれだ…?という手間を省けます。
サンプルはこんな感じですね!今回実際に作成したアセット用アートボードです。


コンポーネントの登録のコツ!

まず直面するかもしれないミスはこちら。よし!コンポーネントを登録したぞ~とウキウキで使おうと文字を打つとうまくいかない悲しい事態。

そんなこんなで作成したアセットパネルからドラッグアンドドロップ、あるいは適応させたいものをクリックしていくだけであっという間にルールを守った画面を作っていけます!やはり統一感があると美しく見えますね。

今回は花をイメージから贈ることのできる架空のサービスを作っています笑


アセット機能を使った簡単一括修正!

やっぱりフォントを変えたい…メインカラーを変えたい…ボタンの形が気に食わない…とデザイン中に修正が入ったり苦しむことはデザイナーにありがちです。
しかしXDでアセット機能を活用していればそれも一瞬で対応できます!
まず、コンポーネントを編集したい場合はメインコンポーネントを選択しましょう。ここでアセット一覧に並べておくとかなり探す手間が省けますが、もし見失ったら該当するコンポーネントをクリックしたのち、右のプロパティから鉛筆マークを押しましょう。メインのパーツに飛んでくれますよ。
今回は例えばボタンの角をとる修正をしました。すると該当するコンポーネントもまとめて一緒に変更されていきます。色やフォントまで合わせて変えることができます。

また、カラーの変更とフォントの変更も簡単です。ここではメインに使っているカラーであるピンクをグリーンに変更してみます。
左のアセットツールから変更したいアセットを選択して【右クリック】→【編集】を選択しお好きなカラーをピックするだけです。

これでまとめて変わっている様子を見ながら調整できます。一括でできてしまうのはかなり強みですね!


おわりに

ここまでアセット機能がどのようなもので、簡単かつうまく活用する方法をご紹介しました。
慣れてくるとこれなしで作れないくらいには便利なものです。人への共有や修正をする案件であればなおさら活用していきたいですね(*^_^*)XDを使う人はぜひぜひ試していただけたらと思います!
以上、最近暑さに負けつつある藻でした。

初心者の備忘録【Premiere Pro】動画のカットの仕方

初めてプレミアプロを使ってみましたが、最初は動画をカットするだけでとっても苦労しました…
今回は備忘録もかねて、シンプルに動画をカットするだけの方法を書いていきたいと思います。分かるととても簡単です!

※あくまでも私が試行錯誤したうえでのカット方法なので他にスムーズな手順があるかもしれません。ご了承の上お読みくださいませ。
※動作確認/環境:Windows10/PremiereProCC2021

 
目次↓

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

最初に

映像+音が一緒になっている動画データは、「映像」と「音」がリンクした状態になっているので別々に作業をおこないたい場合は、最初にリンクを解除してしまいましょう。

必要に応じて、音と映像を切り分けましょう。

1.ざっくりカット

※「映像」と「音」はリンク状態を解除しています。
とりあえず、大体でカットしたい方は、細かな説明はいりません。
下のツールからカットのアイコンを選択しましょう。


レーザーツール(カッターのようなアイコン)を選択します。
カットしたいタイムラインのデータをクリックするだけで簡単に分割できてしまいます。
以下では3箇所カットしています。


カットできましたね。カットした部分でいらないものがあれば選択ツール(矢印)を選んで、該当する部分を[選択+delete]で消すことができます。もちろん移動も可です。

削除できました。

2.細かく指定してカット

※「映像」と「音」はリンク状態を解除しています。
カットしたい秒数があらかた決まっている、細かい編集をおこないたい場合などにとても向いています。

■削除の開始点、終了点を決める

【開始点/今回は5;00】【終了点/今回は9;00】
ソースモニターの一番下にあるメーター上にある青い矢印を動かして地点を決めていきます。クリックしたままで動かしても良いですし、メモリ上でマウスのローラー部分をくるくるしても可です。
ソースモニターに映る動画の動きをみながら細かくいい地点を探しましょう!
「ここ!」という場所を見つけたら一番左にある[マーカーを追加]アイコンをクリックして印をつけましょう。

■カット

開始点と終了点の印部分をカットしましょう。
レーザーツールを選択し、タイムライン上にある緑の印の上に合わせてクリックします。(ある程度近づくと勝手に照準があってくれます)二か所カットしましょう。

■いらないところは削除

カットできましたね。今回は5秒~9秒だけを使う想定でしたのでそれ以外のところは、選択ツール(矢印)を選んで、[選択+delete]で消してしまいましょう。もちろん移動も可です。

削除できました。

あとがき

カットの方法は以上となります。
とりあえずカットをしたい場合も、細かく指定しながらカットをしたい場合も使用するツールさえ覚えてしまえば、あとはカットし放題です!
他にスムーズな方法があるかもしれないので、いろいろ試して自分のやりやすいを見つけてくださいね。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

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

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

バナー業務を中心に最近は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:スガ