【Ae豆知識】覚えて時短!After effectsの便利なショートカットを厳選して紹介

今回のテーマは「覚えて時短!After effectsの便利なショートカットを厳選して紹介」です。
After effectsのショートカットはたくさんあるので、今回は基本的なものから「これができるのは地味に助かる…!」といったものまで私が実際によく使用するものを一部厳選してご紹介しようと思います!

※各ショートカットの記載ボタンはWindows対応のものになります。Macの場合は「Ctrl」を「Command」に、「Alt」を「Option」に置き換えてお読みください。


1.まずは基本のショートカット

ショートカット表01-1_選択したオブジェクトをコピー,コピーしたオブジェクトをペースト,選択したオブジェクトを複製,プロジェクトデータの上書き保存

このあたりまでは大体の編集ソフトで同じ機能を備えているのですでに知っている人も多いかと思います。以下はAfter effectsならではの機能です。

ショートカット表01-2_選択したオブジェクトを現在再生バーがある部分で分割,新規コンポジションを作成,コンポジション設定を開く,新規平面レイヤーを作成,選択しているレイヤーをプリコンポーズ,レンダーキューに追加


2.オブジェクトの各パラメータを開くショートカット

パラメータを変更するたびにトランスフォームを開くのは面倒だし、レイヤー数が増えてきたり複数のオブジェクトを一気に変更したい場合には全パラメータを開くとスペースをとって煩わしいですよね…。
この項目では各パラメータを変更したいものだけ開くことができるショートカットを紹介します。

ショートカット表02_オブジェクトのアンカーポイントのパラメータのみが開く,オブジェクトの位置のパラメータのみが開く,オブジェクトのsケールのパラメータのみが開く,オブジェクトの回転のパラメータのみが開く,オブジェクトの不透明度のパラメータのみが開く,オブジェクトのマスクのパラメータのみが開く,オブジェクトのエフェクトのパラメータのみが開く

任意のレイヤーを選択している場合はそのレイヤーのステータスが開き、何も選択していない状態ではすべてのレイヤーのパラメータが開きます。
パラメータが開いている状態でもう一度各ショートカットボタンを押せば閉じることができます。


3.知っておくと便利なショートカット

実際にAfter effectsで作業をしていると「いちいち手動でやるには面倒な操作」ってありますよね。そんなときに使えるショートカットの一部です。

ショートカット表03_選択しているフッテージをドラッグしたものと入れ替える,起点または終点を基準に複数のキーフレームの幅を一律で変更できる,再生バーを1フレームずつ移動する,プレビューの再生,選択しているレイヤーのひとつ前のキーフレームに移動,選択しているレイヤーのひとつ後ろのキーフレームに移動,選択しているレイヤーのインポイントに移動、選択しているレイヤーのアウトポイントに移動、選択しているレイヤーのインポイントを現在再生バーのある位置に移動,選択しているレイヤーのアウトポイントを現在再生バーのある位置に移動
↓「任意のキーフレームを複数選択してAltを押しながら起点または終点をドラッグ」する操作のイメージです。
Alt説明_複数のキーフレームを選択し、「Alt」を押しながら選択したキーフレームの起点または終点をドラッグで移動するとキーフレームの間隔を変更することができます


おわりに

いかがでしたでしょうか?今回ご紹介したショートカットはたくさんあるうちの一部ですが、実際の作業の中で私が「これを覚えてから時短につながった」と感じたものを厳選してご紹介させていただきました。始めは慣れなくても使っているうちに自然と指に染みつくので、映像制作や編集の機会が多い方はぜひ活用してみてください。

今後も映像系(After effectsやPremiereなど)の知識や制作アイデアなどを発信していこうと思います。もしよろしければご覧ください。

それではまた!デジマースのフジでした。

紙の年賀状をよりよく使うには~SNSが主流になりゆく中から考える~

こんにちは!今回のテーマは「紙の年賀状をよりよく使うには~SNSが主流になりゆく中から考える~」です。

近年、はがきによる年賀状送付が減少してきていると言われています。特に企業では恒例行事であるはがき送付も廃止されることが多くなってきております。
私はというと紙の年賀状が大好きです。届いた年賀状でお気に入りのものはとっておいています。

そんな中、日本郵便はSNSを使って友達であれば住所を知らない人にでも紙の年賀状を受け取ることができるサービスを実施するなど、紙の年賀状が疎遠になっている人向けに工夫が行われています(とはいえWeb上のものをコピーすることになるので手書き文字などは入れられませんが…)。
そこで改めて紙のはがきの良いところや、ユーザビリティとは何か、またデジタル化が進む中あえてはがきを使うメリットについて、紙の年賀状の活用方法中心に考えてみました。


年賀状を紙で出すことのメリット

まずは紙を使うメリットについて考えてみます。

1.手元に残る

形として残るのは丁寧なイメージを与えますよね!手間がかかるぶん、貰った側の印象としても誠実な印象があるかと思います。残るからこそデザイン面に工夫をする楽しみがあります。

2.それぞれに手書きの文字や絵を添えることができる

一言やちょっとしたイラストでも手書きが個別にあればつい気になるものです。様々な面において個性が出しやすく、気持ちも伝えやすいです。

3.Web上で渡すのと異なり、万が一の文字化けのリスクがない

環境依存文字などを使うことによる文字化けの心配がありません。テキストのみであると華やかさには欠けてしまうので、重要ですね。

4.住所を知っていれば確実に届けることができる

聞く手間もかかりますが、メールの山に埋もれてしまったり迷惑メールに分類されてしまうこともありません。特に新年は多くの企業の年賀状がメールに転換したこともあり、より埋もれやすくなることも想定できます。

5.目に留まる可能性が高い

はがきのため、封を開く手間もなければメールのようにそのまま削除される心配もありません。一面でアピールすることが可能です。


年賀状を紙で出すことのデメリット

1.送る数が多いと手間になる

例えば取引先にまとめて送りたい!といった場合、ある程度の自動化はできるようになったものの、デザイン決めから、住所の確認や記入、届けに行くなど時間は掛かります

2.実物として届くので受け取った側の邪魔になることも考えられる

メールであれば場所を取りませんが、薄いとはいえはがきはスペースを取ってしまいます。個人間ならまだしも、企業ともなれば束にもなります。(しかしご挨拶でお届けするものなのでいただいてそうは感じないかと思いますが…)

3.送料・印刷代ともにお金がかかる

枚数が多ければ多いほど当然のごとく結構なお金がかかります。また、仮に年賀状の印刷を凝るなどすればするほど費用はかさんでいきます。

4.気軽さに欠ける

上記の点でも気軽さには欠けていますが、それだけではなく手書きでいくらか書こうとするとさらに時間がかかります。裏を返せばメールでの送付はまとめて送れる上に実際にペンを持って丁寧に文字を書く手間もなく、時間短縮にもなります。

5.直接紹介したい案内ページなどに誘導するとっかかりに欠ける

QRコードを載せるといった策は立てることができますが、実際にリンクを組み込んでクリックするだけとはいきません。読み込んで飛ぶとプレゼントやギフトコードが当たる!などと言われたら開くかもしれませんね。例えば…dgiftみたいに…


紙で年賀状を送る「ひと手間」をより特別にするためのアイデア

さて、ここまで書いてくる中で、メリットでもありデメリットでもあることは大きな共通点は「ひと手間」という点になります。それを長所と取るか短所と取るかで判断が左右されるかと思いますが、ひと手間をかける価値のある年賀状になるかどうか、ひと手間をせっかくかけるならと、考えていくのはいかがでしょうか。メリットとデメリットを踏まえてメールではできないことに価値を見出して、選ぶことができるとよいはずです。
そこで、デジマースのデザイナーでは毎年年賀状を作成していることもあり、あえて紙の年賀状を「推す」アイデアをいくつか考えてみました。

1.自分自身で伝えたいメッセージが明確にある場合に紙を選ぶ

ずばり、シンプルではありますが「今年の〇〇はこんな風に一味違う…!」などインパクトを残したい場合は紙の方がおすすめです。見てもらえる可能性も高い上に、先方が気になった・気に入った場合はわかりやすく取っておけるわけです。その場合、新年らしさというよりはアピールしたいことやインパクトに絞ってデザインを作成することがおすすめです。主張を中心に添えることで見た人に伝えやすくなります。

2.紙だからこそ使えるクーポンや価値をつけて特別なものにする

ファッション系DMなどで見たことはないでしょうか?「こちらのはがきを持ってきていただけると50%OFF!」のようなアレです。先ほどデジタルギフトについて触れましたが、それもまた同様です。「年賀状の紙」自体に価値を付与することで受け取った側もなんだかおめでたい気持ちになる工夫です。メールやSNSでも行えますが、紙の場合は利用するまで手元に取っておいてもらえるのも利点ではないでしょうか?丁寧なギフトらしい印象を与えられるはずです!個人としてお送りする場合は、そのデザイン自体に自分ならでは写真を使うなどといった工夫でも十分特別な価値が与えられると思います。

3.「手書き」「手作り」要素を少しでも入れる

そうは言っても、紙の年賀状の大きな利点はそれぞれに「書く」ことができるという点にあります。ただ印刷されただけの年賀状より、手書きであったり、どこかしらワンポイントで何か書かれていたりとそれだけで唯一の年賀状に昇華できます。メールでは平坦に見えるとしても、手書きであれば必ず個性は出る上に、誰でも一読はするはずです。枚数が多いなどであれば、はんこなどもおすすめですね。せっかく手間をかけるのであれば、さらにひと手間を加えるとより丁寧で印象深い挨拶となることでしょう。


おわりに

今、社会の状況やSNSの普及によってどんどん顔を合わせて挨拶をする機会が失われつつあると思います。実際、メールやSNSで挨拶をお送りするのは簡単で、効率も良いです。
しかし紙の年賀状を使用することが減ってきているからこそ、紙の年賀状をあえて使うことで丁寧な印象を与えるという利点は大きくあるのではないでしょうか。手間と言うとマイナスイメージがあるかもしれませんが、「おもてなし」のひとつでもあるはずです。せっかくの新年ですから、特別な意味を込めて紙の年賀状を使ってみるのもいいかもしれませんね。

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

Illustrator パスの変形のパンク・膨張を使って一瞬でオブジェクトを作成する方法

Illustratorには様々な便利機能があります!
今回は「パスの変形のパンクと膨張」を使用した簡単、手軽なオブジェクトの作成方法の一例を紹介していきたいと思います♪

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

目次↓


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

パンクと膨張

パンクと膨張を使うと一瞬でオブジェクトのイメージを変えることができます。また、アピアランスを分割してオブジェクトのパス化をしない限り(最下部で説明あり)再編集が可能なので手軽に扱えるのも魅力の1つではないでしょうか。
さっそくですが、パンクさせたものと膨張させたものをいくつか紹介します。
簡単なベース素材的なオブジェクトですが、欲しいときにサクッと作れたらとても便利ですし、ここから様々な方向に応用もきかせられるので覚えておいてソンはないと思います!


パンク例:キラキラ

それでは「パスの変形>パンク」を使ってキラキラを作ってみましょう!
※説明がしやすいようにある程度のサイズを決めております。

■手順1:図形準備

直径300pxの丸を[楕円形ツール]から用意します。色は何でもOKです。

■手順2:効果をかける

直径300pxの丸を[楕円形ツール]から用意します。色は何でもOKです。

図形を選択したまま[効果→パスの変形→パンク・膨張]
ダイアログが出てきたら、今回は「-60%」を入力します。
※0より右側の-1%~-200%が指定できるパンクの範囲です。


あっという間にキラキラオブジェクトの完成です。とっても簡単ですがパスのパンクが良い働きをしてくれますね。今回はわかりやすく簡単なモチーフを選択していますが、これらも入力する数字や元の図形が変わるだけでイメージがグッと変化します。


パンクの機能はトゲトゲしいイメージを生成できるので効果的なオブジェクトが欲しいときに使ったりしています。


膨張例:花

次は「パスの変形>膨張」をつかって花を作ってみましょう!
※説明がしやすいようにある程度のサイズを決めております。

■手順1:図形準備

横幅400pxの六角形を[多角形ツール]から用意します。色は何でもOKです。

■手順2:効果をかける

図形を選択したまま[効果→パスの変形→パンク・膨張]
ダイアログが出てきたら、今回は「70%」を入力します。
※0より左側の1%~200%が指定できる膨張の範囲です。


あっという間に花オブジェクトの完成です。当時、何か色々できないかなとツールをさわっていた際に多角形が花になったときは無性に感動した覚えがあります。また、これらも入力する数字や元の図形が変わるだけでイメージがグッと変化するので色々試してみてくださいね。


膨張の機能は、花はもちろん飾りのオブジェクトが欲しいときに使用することが多いです。



あとがき

いかがでしょうか?作業の手順などはとても簡単ではございますが、覚えておくと、いざというときにササッとオブジェクトが作れるので便利です!
同じ図形でも角が丸いか丸くないかでイメージが変わったりと、幅広くいろいろな形を作れるのでたくさん試してみてくださいね。
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

SDGsとアクセシビリティ前提のユーザビリティについて

長くユーザビリティに取り組んでおりますが、会話などやり取りのなかで、「ユーザビリティ」のワードに加え、「アクセシビリティ」のワードが使われることが増えてきました。

※アクセシビリティ⇒Webにおいては、どんな環境の人でも状況に左右されることなくWebサイトを利用できるように設計すること/機能

「ユーザビリティ」というワードは、古くは1995年からヤコブ・ニールセンが発信を始めました。

※ユーザビリティ⇒「use」と「ability」合わせた造語で、「使いやすさ」「使い勝手」などの意味合い

「アクセシビリティ」がW3Cにより、ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) で策定されたのが1999年で、その10年後の2009年発表の「iPhone 3GS」に、「アクセシビリティ機能」が追加されています。

つまり、
スマートフォンからモバイル端末を本格的に使い始めた方には、最初から目にする項目/名称であったようです。

「アクセシビリティ」と「ユーザビリティ」の違い

アクセシビリティとユーザビリティの違い
日本で「アクセシビリティ」が大きく一般化したキッカケは、2015年の国連総会で採択された「SDGs(エスディージーズ)」(持続可能な開発目標)による企業活動や認識変化によるところなのでしょうか。

「アクセシビリティ」は、「ユーザビリティ」による使いやすさ向上を進める上でクリアされていなければいけない必須項目です。

したがって、
「アクセシビリティ」により、どんな環境の人でも、Webサービスの場合はそのサービスが利用/操作可能でない限り、その先の「使いやすさの向上」フェイズには移行できないことになります。
ユーザビリティとして前提なアクセシビリティ
そうなると、まず「使えるサービス」「やりたいことが達成可能なサービス」が作れているか確認が必要です。


SDGsにより配慮されはじめた利用者

SDGs(エスディージーズ)により、Webサイト/UI設計にも大きな変化が起き、プロフィールやアンケート項目には自由度が増し、ジェンダー等に振り回されることが少なくなっています。
SDGs
アクセシビリティが考慮されることでユーザビリティはより深く設計され、エクスペリエンスの向上に繋がります。

そして、多様性によるセグメントの枝分かれは、より細分化/最適化されて需要を満たせるサービス設計の可能性を現実的にさせました。

しかしながら、長期的運用を前提としたマスに向けたサービス設計から、特定層に特化したスポットサービス設計に変化すると、様々な問題が運営側にでるのかもしれません。


機能によるアクセシビリティ

アクセシビリティでもっとも身近で自発的に利用していけるのは、デバイスに組み込まれた「機能」です。
アクセシビリティの機能
視覚、色覚、聴覚等は、「ズーム」「スピーカー/読み上げ」「字幕」「色調整による色覚多様性対応」などにより、利用者に設定と利用を分かりやすく提供しています。

「ダークモード」や「ナイトモード」など生活習慣に適応する機能も充実してきました。


プロダクトによるアクセシビリティ

アクセシビリティのなかでも製品企業にもっともコストを発生させるのが、プロダクトによるアクセシビリティではないでしょうか。
プロダクトのアクセシビリティ
肢体不自由等は、モビリティ面の困難者対応デバイスにより、「出来なかったことが出来るようになる」十二分なエクスペリエンスを提供し、企業価値を高めます。

さらに、多くの製品企業には、その研究開発過程で得られる視野拡大/成果/技術を主力製品にフィードバックして製品価値と独自性を高めていけるメリットがあります。

昨今では、ゲーム機のコントローラとしてもハードメーカーからアクセシビリティデバイスがラインナップされており、多様化の具現化がされています。


さいごに

SDGsを境に「アクセシビリティ」は、ユーザビリティに取り組むうえで避けられない多様化への課題になっており、その切っ掛けにより既に多くの相乗効果を生んでいるのではないでしょうか。

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

簡単!ニュートラルフィルターで美しい絵画調の画像を作成する方法【Photoshop】

デザインやイラストを作成する中で、「いい感じにきれいな絵画っぽい背景素材とか画像素材が欲しいな…」と思うことはありませんか?
例えば山の素材が欲しい、空の素材が欲しい、海の素材が欲しい…いろいろあるかと思います。
しかし絵のような素材となるとなかなか探すのも難航します。

そこで今回の記事のテーマは「簡単!ニュートラルフィルターで美しい絵画調の画像を作成する方法【Photoshop】」です!
Photoshopの機能「ニュートラルフィルター」の「スタイルの適用」を使うことで、5分足らずで簡単に美しい名画のような画像を作り出すことができます。


1.「ニュートラルフィルター【スタイルの適用】」を開く

まず使いたい対象の写真を開いて、上のツールバーから「フィルター>ニュートラルフィルター>スタイルの適用」にてこちらのウィンドウを呼び出します。

今回はこの花の写真を加工していきたいと思います!


2.適応させるスタイルを選択する

予め、プリセットに著名なあの画家の作品や様々なアートスタイルが登録されています。適用させる方法は簡単で、好みのものを選択してクリックするだけです。


3.変換されたデータを調整する

選択すると自動的にAIがスタイルを合わせて絵画調に仕立ててくれます!今回はモネの睡蓮を選択してみました。その際色合いが暗くなったりしてしまうので、好みの質感になるよう右のスライダーで様子を見ながら調整していきます。

この際、画像データが大きすぎたりすると少し時間が掛かるので、用途に合わせて調整することがおすすめです。
明るさなどを調整するとこのような画像になりました!

筆のようなタッチや色遣いが反映されていますね。ここまで作業するのに5分も掛かっておりません。ちなみに色味が変わらないようにする場合はカラーを保持のチェックボックスにチェックを入れておけば色合いを保ってくれます(絵画らしさを求めるならオフの方がおすすめではあります)。
完了しましたら忘れずにOKを押しましょう。これだけの工程で終了です。


【応用】カスタムで好きなテイストの画像を作成する

上記のものは予め登録されているプリセットからの作成でした。しかしそれ以外に「自分の描いた絵とテイストを揃えたい」「ほかのイメージで作りたい」といった場合はカスタムを選んで、持っている画像から作成することができます。画像追加後の要領は同じなのでぜひお試ししてみてくださいね。


おまけ

せっかくなので同じ写真でプリセットから複数パターンも作成してみました。このように印象の全く違うパターンが簡単に作れてしまいます!テクスチャなどにも使いやすそうです。

このようにお気に入りの写真を使ってオリジナルの壁紙を作ったりしても楽しいかもしれませんね!色味を鮮やかに調整すると絵画らしくなりやすいかと思います。


おわりに

今回の方法は背景素材やアクセントとしてかなり応用が効きやすく、簡単に美しい画像が作れるのでおすすめです。人や動物でも作れるのでデザインでぜひ取り入れてみてくださいね。写真を単純に使うだけであったり、絵画素材を探すといっただけの今までの選択肢が広がるかと思います!

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

Illustrator リピート機能を使って描く方法

イラストレーターにある、リピート機能をつかうと、簡単にオブジェクトを並べられたり、回したり、鏡にしたりできるのです。さっそく紹介していきたいと思います!
(対応:バージョン25.1以降のPC版)

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

目次↓


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

リピート機能3種

一例ですがこんな感じになります。


リピート機能:ラジアル

さっそくですが「ラジアル」を使ってみましょう!

■準備1(共通)

今回は説明なのでわかりやすく以下のオブジェクトを用意します!
横200px×縦200pxの丸

■準備2(共通)

使用する機能はここにあります!


■手順1:リピートオプション

オプションを開いたら編集したいものを選択します。
今回は[ラジアル]を選択。

インスタンス数ですが、入れた数字の分だけオブジェクトがリピートされます。
今回は[インスタンス数:5]にしています。


■手順2:実装しましょう!

リピートしたいオブジェクトを選択し、
[オブジェクト>リピート>ラジアル]を選択しましょう。

先ほど設定しましたインスタンスの数だけ、丸がリピートされました。
これでことたりる場合は完成です!
また、ここから編集することが可能ですので少ししてみましょう。


■手順3:編集しましょう!

いろいろできるので1つずつみていきましょう。

①インスタンス数を変える
丸の中に矢印があるマークをクリックしたまま上下に動かしてみてください。インスタンス数が変化します。

②円上のインスタンスを消す
半丸の中に矢印があるマークをクリックしたまま円状に沿って動かしてみてください。円上のインスタンスが消えます。もちろん、復活もできます。

③円の半径を変える
オブジェクトの中心を軸として半径を変えられます。丸をクリックしたまま中心から離れたり近づいたりしてみると、とても簡単に半径を変えることができます。

なるほど、必要に応じていろいろ試せて良いですね。ちなみに、半径など細かく設定したい場合はリピートオプションや、オブジェクト選択時にコントロールバーにも編集画面が表示されるので使ってみてもOKです。

■ラジアルリピートの一例


リピート機能:グリッド

次は「グリッド」を使ってみましょう!
※準備は上記「リピート機能:ラジアル」と同じになりますので割愛致します。

■手順1:リピートオプション

オプションを開いたら編集したいものを選択します。
今回は[グリッド]を選択。

グリッドの間隔ですが、入れた数字の分だけオブジェクトどうしの間隔が開きます。
今回は[縦も横も:10]にしています。


■手順2:実装しましょう!

リピートしたいオブジェクトを選択し、
[オブジェクト>リピート>グリッド]を選択しましょう。

先ほど設定しました縦横の間隔[10px]をあけつつ、丸が繰り返し配置されました。これでことたりる場合は完成です!
また、ここから編集することが可能ですので少ししてみましょう。


■手順3:編集しましょう!

いろいろできるので1つずつみていきましょう。

①オブジェクトの列の増減

②オブジェクトの横方向/縦方向の間隔を変える


間隔が広がった分、オブジェクトが見切れてしまいましたね。必要な方は横長の棒を動かして見切れを解消してあげてくださいね。

③グリッドの種類を編集
グリッドの種類は3種類あり、デフォルトでは①のグリッドになっています。②は水平方向オフセットグリッド、③は垂直方向オフセットグリッドと言います。

グリッドの種類を変えるだけで印象も大きく変わりますね。
作成する内容に応じて効率よく使えたら最高です!


■グリッドリピートの一例


リピート機能:ミラー

次は「ミラー」を使ってみましょう!
※準備は上記「リピート機能:ラジアル」と同じになりますので割愛致しますが、よりわかりやすくするためオブジェクトの形を丸から星にしました。

■手順1:リピートオプション

オプションを開いたら編集したいものを選択します。
今回は[ミラー]を選択。

ミラー軸の角度ですが、入れた数字の分だけ傾きます。
今回は[90度]にしています。


■手順2:実装しましょう!

リピートしたいオブジェクトを選択し、
[オブジェクト>リピート>ミラー]を選択しましょう。

90度にすると、右となりに鏡のように複製されました。これでことたりる場合は完成です!また、ここから編集することが可能ですので少ししてみましょう。また、角度を変えてみた例をいくつか載せますね。


■手順3:編集しましょう!

いろいろできるので1つずつみていきましょう。

①オブジェクトの間隔を変える
オブジェクトをダブルクリックすると、以下のような編集可能な線がでてきます。真ん中の丸をクリックしたまま点線(軸線)に対して水平に動かすとオブジェクトどうしの間隔を調節できます。

②オブジェクトの角度を変える
次に角度を変種する際は上下にある丸をクリックしたまま動かしてみてください。また、このとき真ん中の丸が回転軸になるので必要に応じて線上を動かしてあげてくださいね。

ちなみに角度だけを決め打ちで入力したい場合はリピートオプションや、オブジェクト選択時にコントロールバーにも編集画面が表示されるのでこちらを使用してもOKです。


■ミラーリピートの一例


あとがき

いかがでしょうか?使ってみると便利な上に楽しいです。
説明ではわかりやすく段階を踏むため書いていませんが、オブジェクトをダイレクトに動かして編集するのも可能なので色々お試しください♪
使ってみると結構ナルホドとなることがありますので!
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

【公共サイン/停車駅案内/駅サイン】奥行表現とユーザビリティについて

交通機関を利用していると目にする交通サイン/公共サインについて、電車内の液晶ディスプレイに表示された路線停車駅の案内インフォメーション図の奥行表現が、いまさらですが目に留まったので記事にします。

停車駅の案内の表現について


シンプルに停車駅の情報量を組み込むと、長い駅名が入りきらず重なってしまいます。

設計者をまず悩ませますが、ある程度の文字の大きさは維持しないと小さいので利用者が読めません。

文字の重なりを解消する必要があります。


必要な情報を収める


文字の重なりを、上下に広げることで解消させましたが目線が散りとても不便です。

無理のない一定の目線移動に留める構成変更をおこないます。


無理のない目線移動構成


見やすく目線移動も無理なくなりましたが、長い駅名表示が切れてしまっています。

解消するために文字サイズを犠牲にしてみます。


情報をなんとか納める


文字サイズを小さくしましたが、文字の角度も斜めなため利用者に辛い構成です。

せめて読みやすい角度に変更します。


文字角度をシンプルに


何とか読みやすい角度ですが小さいです。

劇的に変更対応が必要です。


文字の視認性を上げる構成の大幅な変更


文字以外に、劇的な角度変更をおこない、四隅まで有効活用できる対角線グリッド構成にしました。

文字の視認性が解決しましたが、路線の進行方向や現在駅の表示場所に違和感があるため、更なる構成変更を続けます。


構成を固める


路線のラインを縦にして、横組の文字との相性が良くなりました。

現在駅が目線の遠く高い場所にあるのは直感的な理解に繋がらないので、停車駅の順番を逆転させます。


構成に表現を組み込む


現在駅が目線の近くに来たので構成が最適化されました。

構成が出来上がったところで、仕上げの「表現」に入っていきます。

・現在地とその先を視覚化
・近い順に停車駅の優先度付け
・現在地の分かり易さ

以上のポイントを表現しようとすると、ここで「奥行表現」が登場します。


奥行表現を+アルファする

馴染みのある見慣れた停車駅案内にたどり着きました。

視覚的にも直感的にもとても分かり易く想像が付きやすい表現です。


さいごに

構成を考えるとき、縦、横、そして斜めの変化球でシンプルに設計しがちですが、利用者の利用シーンに「移動」と「時間」の要素が加わるときは、Z軸な奥行を活用してみてはいかがでしょうか。

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

簡単!Illustratorでデザインの色変え・色調補正をする方法

Illustratorで色の違う差分を用意したりすること、デザインではよくあることですよね?
いわゆるカラーバリエーションというものです!バランスは気に入っていても他の配色が見てみたい…とやや面倒ではあるものの、いつも手作業で編集しておりました。しかしこれがなかなかうまくいかないことも多いうえに手間もかかります。

そこで先日あれこれ触ったり調べていたところ、「カラーを編集」という機能で細かに編集しなおさずにPhotoshopのように簡単に色調補正をしてカラーバリエーションを増やせることに気が付きました!

今回の記事のテーマは「簡単!Illustratorでデザインの色変え・色調補正をする方法」です!
もしかしたら今更…?という情報かもしれませんがとっても簡単なので同じように困ったことのある方はぜひお試ししてほしいです。


「カラーを編集」の使い方

まず使うには対象のオブジェクトを選択し、上のツールバーから「編集>カラーを編集>オブジェクトを再配色」にてこちらのウィンドウを開いて使っていきます!

項目は上からカラーライブラリ、カラー、カラーテーマピッカー、すべてのカラー・目立つカラー、詳細設定です。それぞれ簡単に説明してまいります。


カラーライブラリ

予めセットされたカラーテーマから簡単におしゃれな色に変えることができます。ワンタッチでがらっと印象を変えることができるので気軽です。


カラー

オブジェクトの色数を1~5色に減らすなどでまとめることができます。単色で使いたい!orもっとシンプルにしたい!という際にはおすすめです。形はそのままに雰囲気のみを変えられますね!


カラーテーマピッカー

オブジェクト選択後、こちらのツールで色を取りたい画像・オブジェクトにスポイトをあてることでその画像の色に置き換えてくれる便利なツールです!全体に統一感を出したいときや、色の案だしに役立ちそうですよね。オブジェクトだけではなく画像から読み取ってくれるところが便利でいいですよね。なるべくシンプルなものをスポイト元とするとうまくいきやすいです。


すべてのカラー・目立つカラー

カラーホイールではハンドルをドラッグして移動させることで、Photoshopの色調補正のように色味を変更することができます。
また、色味の割合を「目立つカラー」にて簡単に変更できます。色の境目をつかんで動かすのみの動作で完了します。上記のカラーテーマピッカーなどで思うような割合にならなかった場合などに使うと便利です。


詳細設定

一部だけ色の変更をしたい場合に使えるのがこの詳細設定です。ここだけまとめて調整したい…などといった際に簡単で役に立ちます。
例えばここではこの水色のところを緑に変えたい場合です。

詳細設定を開くとこのようなウィンドウが開きます。ずらりとこのオブジェクトで使われている色が並びますので、下記の手順で調整します。プレビューで確認しながら調整ができるのでかなり手軽です!ひとつひとつ選択することなく色調補正ができます。


おわりに

今回はオブジェクトでバリエーションを作りましたが、パターンやロゴのカラーバリエーションを増やしたりといった際にも役に立つ手軽なテクニックです。多くのパーツを使って作業するときほど便利になるかもしれませんね。ぜひ色々とお試ししてみてください!

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

Photoshop 放射状・マンダラ対称を使って模様を簡単に描く方法

フォトショップにある、ペイントの対称オプションをつかうと、簡単に複雑な模様が描けてしまうのです。どんなものがかけるのか気になりますよね?さっそく見ていきましょう!

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

目次↓


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

こんな感じでつくれます

「放射状」「マンダラ」の対称軸を使って描いてみました。
色んな対称軸がありますが今回は、個人的に面白いなと思った「放射状」「マンダラ」に特化して紹介していきます。


作成1:放射状対称で描く

早速ですが「放射状」を使って描いてみましょう!

■準備

最初に作成したいカンバスサイズを開きましょう。
説明用に今回は1200×1200pxにしています。
開いたら、ブラシツールを選択し、オプションバーにあるチョウチョのマークをクリックしてください。


■手順1:対称のオプションを設定

オプションを開いたら使用したい対称を選択します。
今回は[放射状]を使用します!
選択すると、セグメント数を選択する画面が出てきます。

セグメント数は[下は2/上は12]まで選択できます。
選んだ数字の分だけ描かれる場所が分割されます。
今回は[セグメント数:5]にしています。

■手順2:放射状の特性

各部屋(線で分かれている部分)に番号をつけました。
1の部屋に矢印を描いたら、それ以外の2、3、4、5も同じような動きをします。

もし4に描いたら、1、2、3、5が4の真似をする・・・というような感じです。言葉での説明は少々分かり辛いところがあるかと思うのでまずは何でもOKなので描いてみましょう!

■手順3:描き始めます


単純に1本線を中心から外側に向かって描きました。
(わかりやすい様にピンク色にしています)
このように1つの動きをセグメントの数だけ同じ動きをおこなってくれます。

さらにハートを描き足しました。(わかりやすい様に青色にしています)
ここまでで、3つの要素しか描いていませんが放射状の対称を使用していることで不思議と良い感じになっています。
このような感じで、いろいろと描き加えて描きましょう。

■完成:描いてみました!

わかりやすくするため、あえて対称の線はそのままにしています。
(対称の線は消せます)


作成2:マンダラ対称で描く

次はマンダラをつかってより複雑なものを描いてみましょう!
※準備は上記「放射状対称で描く」と同じになりますので割愛致します。

■手順1:対称のオプションを設定

オプションを開いたら使用したい対称を選択します。
今回は[マンダラ]を使用します!
選択すると、セグメント数を選択する画面が出てきます。


セグメント数は[下は3/上は10]まで選択できます。
選んだ数字の分だけ描かれる場所が分割されます。
今回は[セグメント数:6]にしています。

■手順2:マンダラの特性

各部屋(線で分かれている部分)に番号をつけました。
マンダラでは、更に部屋の中を二分割した見えない線(下記ピンクの線)で分かれています。その部分を境に部屋の中で線対称のような動きになります。(つまり鏡!)
1Aの部屋に矢印を描いたら、1Bが鏡のように動いて、なおかつそれ以外の2、3、4、5も同じような動きをします。

もし4Bに描いたら、4Aが鏡のように動いて、なおかつそれ以外の1、2、3、5、6が4の真似をする・・・というような感じです。
何よりも実際に描いてみるとナルホド!となると思うので何でもOKなので描いてみましょう♪

■手順3:描き始めます


単純に1本線を中心から外側に向かって描きました。
(わかりやすい様にピンク色にしています)
このように1つの動きを鏡合わせに動きつつセグメントの数だけ同じ動きをおこなってくれます。
1本の曲線だけで、このようにお花になるのはすごいですね!


さらに2本線を描き足しました。(わかりやすい様に青色にしています)
ここまでで、3つの要素しか描いていませんがマンダラの対称を使用していることで要素がつまったものになっています。
このような感じで、いろいろと描き加えて描きましょう。

■完成:描いてみました!

わかりやすくするため、あえて対称の線はそのままにしています。
(対称の線は消せます)

■アフター:色付けてみました!

一部のものに色をつけてみました。色がつくとまた違った良さがありますね。



あとがき

いかがでしょうか?フリーハンドでこれらを描こうとすると骨が折れそうですが、対称オプションを使うと魔法がかかったかのように描けてしまいます!
わりとテキトウに描いても、それなりのものができるのが嬉しいですね。
今回紹介したもの以外にも色んな対称線がありますので、いろいろ試してみてくださいね!
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

明度とは_配色と視線誘導のレイアウト

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

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

白に目が行く

白に目が行く

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

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

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

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


黄色に変えてみる

黄色に変えてみる

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

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


白を使わず黄色と水色

白を使わず黄色と水色

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


水色と緑

水色と緑

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


黄色と緑の構成

黄色と緑の構成

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

何故でしょうか。


色の明るさ

色の明るさ

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

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


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

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

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


七色は光の三原色で構成

七色は光の三原色で構成

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

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


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

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

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


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

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

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


中間色で落ち着いた色へ

中間色で落ち着いた色へ

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


さいごに

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

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

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