抽象のメリットと必然性

Pocket

モバイル向け画像を製作する作業は、
画面解像度の低い携帯電話向けに作っていた時代から、高解像度のスマートフォン向けにシフトしており、非常に多くの情報を扱う必要があります。

240pixel → 320pixel → 640pixel → フルHD/2K → 4K

結果、
レイアウトや素材を製作する場合の情報選択肢/余地が増え、判断に時間がかかり、細部まで作りこみが出来てしまう為、終わりが見えなくなる作業を生む可能性が高まり、
また、高まった表現力は「具体性」「趣向」の判断を生む状況にも及んできております。

…今回はそんな予期せぬセグメントを避ける表現情報量との適切な向き合い方を考えてみました。


制約の中での可能性

日本人は制約を受けた状況下での、アイデアと効率化を得意としているといわれています。
理由として、限られた島国国土の中で生活をしてきた影響もあるのでしょうか。

1980、90年代の量産性に長けたアニメフォーマットの確率や、家庭用ゲーム機ハードとソフト面での成功、
そして、携帯電話とハード/ソフトの開発においても世界の指標たる結果を残してきた状況は、
いずれも、「黎明期から成長期へ向かう中でのテクノロジーが後追いする制限下」であったといえます。

しかし、
逆の視点から見てみると、
日本人は可能性溢れる選択肢状況下では目的を見失い、
多彩な表現力の状況下でも方向性を見失いがちな思考を持っているとも考えられます。

話を「表現」「UI」に絞ってみると、
日本人は、シンプルで捉えやすいUIに長けている可能性が考えられるのではないでしょうか(強引ですが)。


シンプルで捉えやすい表現とは?

わかりやすさの条件は「単純構造」で「敷居が低い」でしょうか。

グラフィックデザインでは標識やマークなど「アイコン化」されたものがその代表ですが、
そのわかりやすさを追求して結果が、私たちが良く見るシンプルなデザインになっています。

いずれのマークも初見の記憶がないくらい一般的に生活に浸透しており、
作りこんだ表現にする必要がないことを理解いただけるのではないでしょうか。


セグメントしない表現とは?

人を選ばない(セグメントしない)表現とは、狭義ではなく広義で抽象的であることです。
作りこみ、具体的にすることが目的である以外はシンプルな表現で進めることのメリットが多いのではないでしょうか。
例えば、

・運用性/更新性の向上
・容量削減
・表示速度改善

でしょうか。

ピンク色の画像は描き込みが多く具体的で、見る人にカテゴリ(犬/車)を越えて詳細(犬種/車種)まで想像させています。


まとめ

情報設計に「更新」は付き物です。
運用パフォーマンスを考えた場合、
グラフィックデザインはトータルコストを抑えられる素材を選ぶ必然があり、
アーティスティックなグラフィックであれば、
芸術品として「想い」を込める必要があります。

限界の作りこみが価値に大きな影響を与えるコンテンツはありますので、
都度案件の「目的と訴求対象」を意識して、
適切な情報設計を運用してみるメリットは十分あるのではないでしょうか。

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

Pocket

UIと配色

Pocket


配色とは、2色以上の色を組み合わせ、配置および構成をする事です。
UIデザインでは、どのような配色を行うのかによって、使用感やユーザーに与える印象が大きく変化します。といってもUIデザインに限りませんが…。
色の扱い方はとても奥が深く、国や地域によって色に対するイメージは変わります。また、組み合わせ方は数え切れないため一言で配色について語りきる事はできません。一言でなくとも語りきれないと思います。
今回はよりカテゴリを絞り、色は色でもUIデザインにおける色(配色)のポイントについていくつかご紹介致します。


70% 25% 5%の配色

UIに使用する色数の目安は3色です。3色以上にする事が間違いと言うわけではありませんが、色数を増やしすぎると、どこを強調しているのか、どこに触れる事ができるのかなどが伝わりにくくなり、情報が整理されていないような見づらいUIになってしまいます。
しかし、色数を押さえたからといって適切に配色ができているわけではありません、使用する量も重要になります。UIにおいて実際に3色をどのようにして選び、使用するのかということは「70・25・5の法則」を意識すると選びやすくなります。70・25・5の配色はベースカラー70%、メインカラー25%、アクセントカラー5%にする配色法です。ちなみにこの「70・25・5」の考え方はwebデザインでは基本とされている配色方法です。

70% ベースカラー:ベースカラーは主に背景に使用される色であり、一番使用される色となります。多くのアプリケーション・WEBでは白が使用されています。
基本的には原色などの彩度の高い色は使用しません。使用すると文字が読みにくくなってしまう事があるためです。そのためベースカラーは控えめな色にする事が望ましいです。料理で言うところのお皿です。ピンク色のお皿に料理が盛られて出てきたら、落ち着いて食べる事ができないですよね…!?

25% メインカラー:メインカラーはサービスのイメージや方向性に沿った色を使用します。使用するのは25%で70%のベースカラーほどではありませんが、ここで使用する色によってユーザーの第一印象が変化します。一般的にはサービスのイメージカラーや、コーポレートカラーが使用されています。

5% アクセント(サブ)カラー:ボタンや通知・警告などユーザーに特別な何かがあると感じさせるために使用します。また、メリハリを出し全体を引き締める効果もあります。メインカラーと補色の関係にある色と組み合わせるとアクセントとしての役割を高めることができます。
アプリケーションの配色を検討していると、3色ではまとめ切れない箇所が出ててくると思います。その場合は3色以上になりますがアクセントカラーを追加してみてください。アクセントカラーは機能として追加されているのであれば、増えても問題ありません。ただ、アクセントカラーを使用しすぎてしまうと、アクセントとしての効果が薄れるばかりか、安っぽい質の悪いUIに見えてしまいますので使用する量に気を付けてください。

※)補色
色相環と呼ばれる色の順番と関係を円にしたものにおいて、正反対に位置する色の組み合わせ。

文字に「黒」は使わない!?

皆さんがWEBサイトで「黒」だと思っている文字の色は、見た目は黒でも実際には「グレー」が使用されている可能性があります。

●吾輩は猫である  ●吾輩は猫である

左の文字はディスプレイ上で最大の黒(#000000)です。そして右はグレー(#323232)です。
どちらも比較して出さなければ「黒」と認識するはずです。では、どちらも「黒」として扱う場合どちらの黒をオススメするのか…。それは右の黒(グレー)です。
その理由はディスプレイ上で再現される最大の黒(#000000)はとても強いからです。
ベースカラーが白の場合に文字を黒(#000000)にするとコントラストが高い状態となります。そのため他の要素よりも主張が強くなり、文字を読む際の疲れの原因の一つになってしまいます。また、文字の主張が強いためレイアウトの優先順位に影響を与える可能性があります。以上の事から黒ではなくグレーの使用をオススメします。
ですが黒(#000000)を使用することは間違いではありません。レイアウトの表現上必要になることもあります。ただ、使用する際にはグレーにする事も検討してみてください、少し黒を押さえるだけでも印象は変わります。


配色によってサービスのイメージは大きく変わります。目的に合った色を選別し、適切な配分で使用する事が大切です。
配色にはこうした方が良いという基本は存在しますが、絶対にこうしなければいけないというものではありません。絶対にこうだと言う正解もありません。しかし、基本から外れると扱うことは難しく、それ相応の経験と技術が必要になります。
 

Pocket

デザインでグループを作ろう!

Pocket

こんにちは!今回のテーマは「デザインでグループを作ろう!」です。
デザインでグループを作るとは何か、どのような時に使うのかお話していきたいと思います。


デザインでグループを作る

デザインでグループを作るとは、「情報をグループ化すること」です。
関連する情報は近くに、関連しない情報は離すなどして、項目や特定の意味ごとにグループを作ります。
こうすることで視覚的に見やすく、わかりやすくすることが出来ます。


なぜグループを作るの?

何故グループを作る必要があるのかと言うと、見た目にわかりやすくなるのは勿論のこと、要素が持つ意味を直感的にわかりやすくなるからです。
こうすることで、ユーザーにとってストレスのないデザインにすることが出来ます。

まず、下の図を見てみて下さい。乱雑に配置された情報を、共通する項目ごとに整理してグループを作りました。

「“りんご”と言う単語を探して」と言われた時に、探しやすいのは右側のグループ化された方かと思います。
「“果物”のカテゴリがあるから“りんご”はきっとそこにあるだろう」と想像し、順序立てて探すことが出来るので、ストレスなく見つけることが出来ます。

グループ化されていないと、気付きのキッカケがない上に目線も定まらず、わかりづらくストレスに繋がってしまいます。


更にもう1つ図を見てみて下さい。

バラバラに並んでいる情報を、共通の項目でグループに分け、規則的に並べ替えました。
グループ化されていない状態だとなんの意味も感じられなかったかと思います。ですが、グループ化することで「赤と黄色と青のグラデーションになっているんだ」と一目でわかったかと思います。

このようにグループ化することで、言葉がなくても視覚的に、要素の持つ意味や関連性を伝えることが出来ます。


グループ化の方法

代表的なグループ化の方法3つを使い、下にある、要素がぐちゃぐちゃで見づらい図を整えていきたいと思います。

1.近くに配置してグループを作る

要素と要素の近さでグループかそうでないかを表します。最も簡単でポピュラーな方法です。
グループ化したい物は近くに配置して、そうでない物は十分なホワイトスペースを確保してあげましょう。

2.見出しを付けてグループを作る

テキスト要素でよく使うグループの作り方です。
見出しとなるテキストのサイズを大きくすることで、メリハリを付けて文章を読みやすくします。
また、タイトルの優先度を上げることで視線を誘導することも出来ます。

3.色を付けてグループを作る

タイトルやカテゴリ名など、近接していなくても同じ意味を持つものに色を付けます。
同じ意味を持つ要素に統一した色を付けることで、「この色は○○を表しているんだ」と自然とユーザーに覚えてもらうことが出来ます。

完成!

これで完成です!
最初の無秩序な配置と比べると、格段に分かりやすくなったのではないでしょうか!


おわりに

いかがでしたでしょうか?
グループを作ること事体はそんなに難しくないと感じてもらえたのではないでしょうか。

グループを作る為には、まず作り手側が要素の意味を理解しなければなりません。
要素や関係性を理解して配置することで、ユーザーにとってわかりやすいデザインを作ることが出来ます。

「デザインを考えてみたけど、どうしたらもっとわかりやすくなるかな…」と悩んでしまった時は、ぜひ思い出してみて下さい!

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

Pocket

画像配置について考えてみる

Pocket

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

▼画像配置の考え方①

ユーザーがストレスなくサイト回遊をするうえで意外と忘れられがちなのが画像の配置の仕方です。

突然ですが、下記サイトAとBどちらが見やすいですか?
A・Bは同内容のサイトとします。


ヘッダーからフッターまでゆっくりサイトA、Bを見ていったときに違和感を感じることがほとんどなく見やすい方と思うのはAと答える方が多いのではないのでしょうか。

それではなぜAなのでしょうか。
AもBもコンテンツの内容は同じです。
しかし、よくよく見てみると画像の配置の仕方が異なるのが見て分かるかと思います。
配置によって違和感を感じてしまっているのでしょうか?
考えていきたいと思います。

▼画像配置の考え方②

今回はより違和感を感じるであろう部分よりピックアップをしていきます。

★前提★
このサイトはよく見ると左右にある程度の余白をとっている。

またこの部分の画像の見せ方として、サイト全体の余白に合わせAのように余白を整えることが改善への近道ですが優先度によっては画面いっぱいに画像を表示する事で他の部分との差別化を図ることも可能です。
現在ではそのどっちつかずの状態が違和感を与える原因になっています。

▼ ▼ ▼

これら部分の横幅のずれは、作成している画像であれば画像のサイズがそもそも異なってしまっている。
またはCSSだけでのHTML構成、画像配置のCSSが崩れてしまっていることが大いに考えられます。
小さな差ですが、揃っている方がコンテンツ内の統一感を感じられ見ていて気持ちの良いものです。

▼ ▼ ▼

一言で言いますと面積率の高い物から配置するイメージです。
そうすると自然と訴求内容が大きなものから並びますよね。

▼最後に

サイトの提供内容がユーザーにとって「本当に唯一無二である」または「細かいことは気にしないユーザー」であれば多少、画像の配置に違和感があっても気にならないかもしれません。
ですが、全部のサイトがそうとは限りませんし取り除ける違和感であれば取り除いておいた方がユーザーにも運営者側にもメリットは有るでしょう。
1つでも違和感に感じる所を見つけてしまうとどうしてもその印象は残ってしまい、ずっと改善されなければ「まだ改善されていない」と負の要因になってしまう可能性も考えられます。
画像の配置について少しでも気にかけてあげると、ユーザーのサイト巡回はよりスムーズになるかもしれません。

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

Pocket

速度制限でもストレスのないWEBページ

Pocket

現在主流の4G通信回線の実行速度は、
15Mbps(15,000kbps)程度といわれています(規格上は150Mbps~225Mbps)。
※「bps」=バイト・パー・セカンド/1秒間に受け取れるデータ量

そんな中、利用者は、契約ギガバイト数を超過すると厳しい速度制限を受けることになりますが、その「128kbps制限」を体験している利用者は65%程度いる様ですので見過ごせません。
※『スマートフォンに関する意識調査』NTTコミュニケーションズ調べ

今回はそんな方のなかでもデータ容量の追加購入せずに月末を乗り切る利用者を考慮して、
「128kbps制限でもストレスの少ないWebページ」
を考えてみました。


回線速度の変遷リスト

まずは、通信の歴史、
固定電話回線と携帯電話回線の変遷をリストにしました↓


<固定電話回線>

電話回線(アナログ回線)1990年代  ※銅線
28.8kbps

ISDN回線(デジタル回線)      ※銅線
64kbps/128kbps(2チャンネル時)

ADSL回線              ※銅線
512kbps/47Mbps

光回線               ※光ファイバーケーブル
100Mbps前後


<携帯電話回線>

3G回線
2Mbps程度(実行速度)(規格上数Mbps/14Mbps)

4G回線
15Mbps(15,000kbps)程度(実行速度)(規格上150Mbpsや225Mbps)
速度制限を超えると通信速度が最大128kbpsに制限

※記載の速度実数値は参考程度となりますのでご了承ください。


上のリストは1990年代から「通信」を経験してきた年代には懐かしく、若年層には見慣れない項目が多いと思われますが、
制限状態にある「128kbps」という通信スピードがいかに遅い回線状態だったか理解いただけるのではないでしょうか。


128kbpsでできること

それでは速度制限を逆手にとって、
制限中もストレスなくサービスを利用出来ないかと考え、
分析を進めてみます。

まずは過去のFP時代のページ総容量レギュレーションを確認してみると…

・1ページあたりの容量は100kバイト以内(※概ねの指標)

とありますので

128kbps制限下でも、容量数字上は2秒もあれば表示されます。

FP(フィーチャーフォン)向け程度のページ情報を表示する分には十分なスピードです。


文字中心のページ製作へ

テキストは1文字につき、

・半角英文は、1バイト
・全角が必要な日本語は、2バイト(アジア地域などは「2バイト圏」と呼ばれます)

容量を使います。

単純計算すると、
128kバイトであれば、タグやスタイル、JavaScriptを含めて、
128,000文字の文章が書けます。
ブログ記事は2,000文字(4kバイト)程度が多いので、テキスト本文だけで考えると十分足りる計算です。
今回、
1秒程の読み込みを目指すのであれば、
タグや画像に、残りの124kバイト使用できます。
読み中心の静的ページであれば十分なのではないでしょうか。

さっそくサンプルページ作りを始めます。


読み物中心のページを作る

画像を載せる場合は容量制限を設定し、
大きすぎず適切な減色による容量削減が必要です。

ポイントとしてこちらでしょうか。
・グラデーションは使わない
・PNG8形式(インデックスカラー)で保存
・CSSスプライトで画像を1ファイル化(アクション発生件数を減らす)

今回、この記事ページ自体をサンプルとして扱い、使用画像含め128kバイト以内で作りました。
本文テキスト部分の文字数は2,000文字程度です。

ページ内容のみの容量は25kバイト程度ですので、
通常の電波状況ではストレスなく表示が出来ると思われます。


最後に

動画や画像中心のリッチなコンテンツページは、128kバイト以内では作れませんが、
制限下でも情報を問題なく表示できるページ作成は可能です。

ここまで詰め切る需要も少ないと思われますが。
FPのころの通信インフラにやさしいエコなサービス作りに挑戦するのも新鮮ではないでしょうか。
是非お試しください。

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

Pocket

デザインと錯視

Pocket

ロゴやフォント、イラストなどの大きさ・長さ・色・角度は、特定の条件が重なると、想定していた見え方と実際の見え方とで異なった見え方をする事があります。これを「錯視」と呼びます。いわゆる“目の錯覚”です。

デザインを行う前にはある程度錯視を理解しておく必要があります、なぜなら数値上は同じ位置・同じ間隔で揃えていても、実際に目で見て確認すると、錯視により同じ間隔ではないように見えてしまったり、ある要素だけが小さく見えてしまうという事が起きるからです。“なぜこの見え方になるのか”を知っておく事で錯視が起きた場合の修正をスムーズに行うことができます。今回はそんな錯視についてご紹介いたします。


フィック錯視

突然ですが問題です。①~③の図形のうち「A」「B」の長辺が同じ長さの図形はどれでしょうか?

正解は

「③」です。同じ長さに見えましたか?
フィック錯視とは同じ長さの図形でも、水平にされた図形よりも、垂直にした図形の方が長く見えるという錯視です。(なぜこのような見え方をするのか詳しいメカニズムは解明されていないそうです)ロゴデザインやイラスト製作などで、このような組み合わせが発生する場合は、数値に囚われず、自分の目で見て調整を行う必要があります。(下図参照)

また、同じ幅の図形でも、垂直にされたものよりも水平にされた図形の方が太く見えるため、ロゴやフォント制作の際は、縦線を太めに製作し錯視を調整する事があります。太さの変化は顕著に現れるわけではないので、調整は微調整程度に行われます。そのため普段目にするロゴやフォントでは、このような調整が行われていることに気づく人はいません。

エビングハウス錯視

同じ大きさの図形でも、周りに大きい物を置いた場合と、小さい物を置いた場合とでは大きさが異なって見える錯視です。

図のような配置をした場合、自分の想定よりも中心の図形のサイズ感が変わってしまうため、中心の図形のサイズを目で見て調整する必要があります。

デルブーフ錯視

同じ大きさの図形の周りに描く円のサイズによって、囲われた図形のサイズが異なって見える錯視です。

上記の錯視とは若干条件が異なりますが、同じ大きさのドット柄でも、枠(イラスト)のサイズの関係で左のドット柄よりも右のドット柄の方が大きく見えます。(Tシャツの柄という先入観もあるためより大きく見えるのかもしれません)


ロゴやフォントを制作した時やレイアウトを行った際に大きさ・長さ・色・角度などに違和感が出るようならば、何かしらの錯視が起きている可能性があります。数値的にサイズや位置が整えられていたとしても、最終的には目で見て確認を行うことをおすすめします。
このほかにも錯視は沢山あります、また、今回ご紹介した大きさにまつわるものだけではなく、色や角度に関する錯視も存在します。こちらはまた別の機会にご紹介したいと思います。
 
 

Pocket

ホワイトスペース【余白は怖くない!】

Pocket

こんにちは!
今回のテーマは「ホワイトスペース【余白は怖くない!】」です。
ホワイトスペースとは何なのか、どのような時に使うのかなど、アプリ開発の観点から説明していきたいと思います。

ディレクターや企画職などノンデザイナーの方、これからデザインを勉強する方向けの内容になっています。


ホワイトスペースとは

ホワイトスペースとは、簡単に言うと「余白」です。
アプリで言うと、画面の両端や上下に設けられている空間、要素と要素の間など、何もない空間を指します。

画像と画像の間だけでなく、字間と行間などの余白もホワイトスペースとなります。

“ホワイト”スペースと言っていますが、白い余白だけに限定されている訳ではありません。無彩色・有彩色・柄・写真でも、「余白」があればそこはホワイトスペースとなります。


なぜホワイトスペースが必要なのか

ホワイトスペースは視覚的な表現をする上で必ず必要な物です。
なぜ必要なのかと言うと、ホワイトスペースがあることで「見やすく」「わかりやすく」「使いやすく」なるからです。

1番大事なことは、ホワイトスペースを“余った場所”ではなく、重要なレイアウトの一部として捉えることです。

余白があると柄や要素を入れて隙間を埋めたくなったり、余白がありすぎると手抜きに見えるのでは…と不安に思う余白恐怖症の人もいるかもしれません。
ですが、余白がないと視認性が悪くなったり、そのページに設定した意味が薄れてしまったり、目的を果たせなくなってしまうなどデメリットが出てきてしまいます。


見やすさ

デザイン制作はもちろん、パワポでの資料作成やテキストだけの表現でも、ホワイトスペースのレイアウトは大切です。
ギチギチに画像や文字が詰まっているより、見やすく読みやすくなりますよね。みなさんも日常、自然と行っているのではないでしょうか。

アプリ画面で言うと、読んだり押したりする要素がある画面の両端には、必ずホワイトスペースを設けましょう。
5%ほどホワイトスペースがあれば十分視認性と押しやすさが保てます。
上下のホワイトスペースについては状況にもよる為一概に言えませんが、「目立たせたいものは多めにホワイトスペースを設ける」「優先度や項目ごとにホワイトスペースのルールを統一する」ことに注意するだけで見やすさが変わってくるかと思います。


わかりやすさ

十分なホワイトペースを設けることで、その中にある要素が強調され、ユーザーが目的を達成しやすくなります。
注目して欲しい要素や、優先度の高い要素を強調したい時に効果的です。


使いやすさ

ユーザーにとって使いやすいサイトにする為に、ホワイトスペースは必須です。
例えば押せる要素があったとして、それが複数並んでいた場合、ホワイトスペースを設けることで押しやすくなります。

また、ユーザーが何か探し物をしていた時に見つけやすくなります。


おわりに

いかがでしたでしょうか?
ホワイトスペースはただの余白ではなく、立派なレイアウトの1つです。
今までは何気なくテキストを改行していた、画像を配置していた、という方は、ぜひこれを期にホワイトスペースを意識してみて下さい。
今まで以上に良いデザイン、資料作成が出来るかと思います!

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

Pocket

簡単!パターン素材の作り方-応用編-

Pocket

今回は前に更新しました【パターン素材の作り方-基礎編-】の応用版を紹介したいと思います。
「どこがパターン素材の切れ目なの?」と思うような、より複雑な柄を使用してのパターン素材となります。

ですので初めてパターン素材を作る方は基礎編より見て頂けますとより理解がしやすいかと思います。

—————————————————————-
★作成環境:IllustratorCC2017
★動作確認:Windows7
★所要時間:20分(素材ありき)
—————————————————————-

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

[おさらい]パターン素材とは

★自分で作ったパターン素材をスウォッチに登録することで、色を選択する感覚でいつでも使える。
★作ったパターン素材は描画対象に縦横敷き詰める形で配置。

『花柄繰り返しパターン』
メイキング

上下・左右の絵柄、スペースのつながりに注意しながら作ってみましょう!
※ここで紹介しております内容は、一作例となります。
サイズ、比率等は説明のしやすい様に書いております。

【ゴール】複数の柄(モチーフ)がバランスよく入っている包装紙のようなもの。
素材の切れ目が分かり辛い。

【用意する物】花素材。以下のものをイラレで作成しました。

【1】ツールの長方形ツールで長方形を描く。
【縦180px横140px・色#132d4c】今回、見やすい背景色を選択しています。

【2】長方形に花の素材をバランスよく配置していきます。
ですが、ただ置きたいように置いてしまうと、敷き詰めたときに上下左右が繋がらなくなってしまうので手順を踏んで配置していきましょう。

【3】土台のサイズに合わせてクリッピングマスクをかけます。

【4】パターンを登録します。
【ウィンドウ】の中にある【パターンオプション】を開きます。
開いたら作成したパターン画像を選択したまま、右上のメニューを開き【新規パターンを作成】をクリックします。

【5】ポップアップのOKを押すとパターンが登録され編集画面が出てきます。
任意の名前とパターンの縦横サイズを記載します。

【6】縦横サイズを記載するとパターンの枠サイズが変更されます。
パターン素材を枠に当て込みます。

【6】当て込んだら左上の完了をクリックして閉じます。

【7】スウォッチに登録され完了です!

使ってみた

最後に

花柄繰り返しパターンの作成の際にはより壁紙っぽく見せるため素材の
それぞれが孤立しすぎないことです。
蔓を伸ばして花と花をつなぐことで全体的に滑らかな雰囲気に、また、
花のサイズの大小をつけすぎないことがポイントです。

いかがでしたでしょうか?
繰り返しパターンの応用編を紹介させて頂きました。
使用する素材のサイズがバラバラな、規則性の無い柄でもパターン素材に
することは出来ます。あくまでも、ここでの作成法は一例ですので是非
参考の上、作成しやすい方法を試みてくださいませ!
以上スガがお送りいたしました。

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

関連リンク  * * * * * * * * * * * * * * * * * * * * * * * *

パターン素材の作り方-基礎編-

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

 

 

Pocket

初心者向け!エンドロールの作り方②[After Effects編]

Pocket

こんにちは!
今回のテーマは「初心者向け!エンドロールの作り方②」です。
エンドロールの中でも、結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!

前回のIllustrator編の続きとなっています。
Illustratorで文字が組めたら、After Effectsで文字が上へ流れていく動きを付けてみましょう!


使用するソフト

今回は1種類のソフトを使用して動画を作ります。

■After Effects(アフターエフェクト)

バージョンは「CC 2017」を使用しています。


作成の全体の流れ

作成の全体の流れは大きく分けて3つです。

①作るべき動画のサイズと素材を確認。
②Illustratorでテキスト作成・文章の構成確認。
③After Effectsでテキストが上にスクロールする動きを付けます。

今回は③についてお話していきたいと思います。


エンドロールを動かそう!

1.After Effectsで新規コンポジションを作成

After Effectsを立ち上げ、「ファイル」→「新規コンポジション」を選択。

「幅」は640px、「高さ」は360pxと入れます。
「デュレ―ション」は動画の長さを決められます。ここはエンドロールの長さで必要な時間がそれぞれ違うかと思います。後で時間の長さは変えられますので仮で入れておいて下さい。今回は一旦「40秒」としています。
「背景色」は黒にして下さい。ここもエンドロールの背景色に合わせて変えて下さいね。

OKを押すと、「コンポジション」パネルが真っ黒な状態で開けたかと思います。


2.IllustratorのデータをAfter Effectsに取り込む

「プロジェクト」パネルにIllustratorのデータをドラッグ&ドロップします。

下記のようにモーダルウィンドウが出てきたら、「レイヤーを統合」を選択してOKを押します。
こうすることで、Illustratorで作ったデータがレイヤーで分かれていても、背景や文字などを1つの画像として読み込むことが出来ます。


3.読み込んだデータをタイムラインに乗せる

「プロジェクト」パネルにデータが読み込めたら、そこから「タイムライン」パネルにドラッグ&ドロップします。

ここまで来たら、「コンポジション」パネルでIllustratorで作ったデータが見れるようになっているかと思います。


4.位置を整える

エンドロールの始まりは、テキストの映り込んでいない真っ黒な画面から始まるのが一般的です。
※今回は背景が黒いシンプルなエンドロールなので上記のようにしていますが、写真を使用していたり状況が違う場合はそちらに合わせて下さいね。

今のままだとエンドロールの中盤あたりが中途半端に「コンポジション」パネルに表示されていますので、まずエンドロールの頭の部分が表示されているように位置を整えます。
「整列」パネルの「垂直方向の上に整列」を選択してください。

次に、エンドロールを「選択ツール」で直に選択し、画像を下げてテキストが全く見えない状態にします。


5.エンドロールを動かす為の指定

エンドロールのように、下から上へ要素が流れていく動きを付けたい時は、画像が動く始まりと終わりの「位置」を指定する必要があります。

まずは、開始位置を指定します。
「タイムライン」パネルの「ソース名:エンドロールムービー.ai」の左側にある、三角のアイコンをクリックします。
クリックすると下部に「トランスフォーム」と出てくるので再度クリックします。
いくつか項目が出てきますので、「位置」と書いてある行のストップウォッチのようなアイコンをクリックします。

ここまで来ると、同じく「タイムライン」パネルの右側が下記の図のようになっているかと思います。

「キーフレーム」と言う青いひし形のアイコンが表示されています。これで、エンドロールの開始位置を指定することが出来ました。
今の状態は、「0秒の時、エンドロールムービー.aiはここにいるよ」と言う事を表しています。

次に、終了地点を指定します。
「タイムライン」パネルの「時間インジゲーター」を右端(終了時間)へ寄せます。

「整列」パネルの「垂直方向の下に整列」を選択してください。
続けて、エンドロールを「選択ツール」で直に選択し、画像を上に移動させてテキストが全く見えない状態にします。

ここまで出来たら、「タイムライン」パネルに「キーフレーム」が出来ているか確認してみましょう。
下記の図のようになっていたら、エンドロールの終了位置を指定することが出来ています。


6.実際にエンドロールを動かしてみる

動画を書き出す前に、動きをチェックしましょう。「プレビュー」にある再生ボタンで再生できます。

問題ない方は、手順8へ行ってください。
動画が早すぎたり遅すぎたりして、文字が読みづらい…と言う方は、手順7を確認してください。


7.動画の時間を変更する

メニューバーの「コンポジション」→「コンポジション設定」を選択。
「デュレ―ション」の時間を変更します。動画を都度再生しながら最適な長さに調節してみて下さい。

エンドロールの特性上、多くの人が一斉に見たり読んだりすることになりますので、読むのに十分な時間を確保してあげてください。


8.動画を書き出す

「ファイル」→「書き出し」→「Adobe Media Encoder キューに追加」を選択します。
Adobe Media Encoderが開きますので、下記の図の再生マークを押すと書き出しが始まります。

これで、エンドロールは完成です!
実際に書き出した動画が下記になります。この流れで作るとこんな風になるんだなと言う参考程度に見てみて下さい。

※この動画はブログ掲載用に設定を調整しています。


おわりに

いかがでしたでしょうか?
実際に動画として完成するとちょっと嬉しくなるのではないでしょうか!

今回はスタンダードなエンドロールの作り方でしたが、背景を変えたり、写真を載せたりするだけでもガラッと雰囲気が変わります。
ぜひ色々試してみて下さい。そして、思い出に残る素敵な結婚式のエンドロールムービーを作って下さいね!

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

Pocket

シネマグラフ

Pocket

シネマグラフってご存知ですか?
映画の何かかなと思ってしまうかもしれないのですが、映画の業績表などではないのです。
私も何かわからなかったため、ちょっと調べてみました!!
何らかの形でデザインにも活かせそうなことがありましたので(私の主観ですが)紹介させて頂きます。

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

▼シネマグラフとは??

そもそもシネマグラフとは、映画の業績表などではなかったら何のなのか?
一言でいうと「一部のみを動かしてループさせた画像」です。

―――はぁ…い、一部ですか?

―――調べてみたらそうでした。

下のようなアニメーションGIFの様に万遍なく動くTHEアニメーションではないのです。


▼実際に見てみましょう


永遠にあふれることのない紅茶


水だけが出続ける


水の勢いで溜まった水だけが動く
説明用に作成を致しましたため、かなり手軽な生活感有るものばかりですがおゆるしをば。

シネマグラフは特に多くを語ることが無いくらい分かりやすいものだと思います。

一部のみ繰り返しの動きがついていると何だかとても不思議な世界です。
つい、ぼーっと見てしまいますね。
作成上の関係で生活感ある水系のものになりますが、逆に言うと誰でも簡単にシネマグラフが作れるという事ですね!
編集も思っている以上にサクッとできます。
(申し訳ございませんが、作成方法は割愛させて頂きます。)
また、多くのものが動く所や、動物など様々なもので作成するともっと臨場感あふれる不思議な光景が作れるかもしれませんね。

EX)
・後ろにある影だけが動き続ける
・人で賑わう縁日の頭上で花火だけが繰り返し動く
・夏の草木が静止する中、風鈴だけが繰り返し動く
・交差点で信号だけが動き人は静止
・ワンちゃんの尻尾のみが動き続ける
・溶けずに燃え続ける蝋燭
・ひたすら瞬きだけを繰り返す人
・人間の持ち物だけが動く

ちょっと考えるだけでもたくさん出てきます。

▼使いどころ

個人で楽しむため、人に作ったものをSNSで見てもらいたい等といった所や、はたまた企業のブランド訴求の延長線として、使うことも効果的です。

全体が動いていないことにより動く箇所にピンポイントで目が行きやすくなる構造になるため「特に見せたい」箇所などの訴求が強くできますね。

例えば、“新しいハンドバッグ”をHP上で訴求したい場合以下のような訴求も考えられます。

※写真動画のシネマグラフが用意できないためイラストで表現させて頂いております。

ハンドバッグだけが繰り返し動く。
一見とてもシンプルな構造ですが、ハンドバッグだけが動いていると、自然と目がそちらに向かいますよね。
見てくれる人の目線を自然な形で商品へ誘導することでストレスなく新商品の訴求が出来ているのではないでしょうか?
場面や動かす一部の大きさによって、様々な表現が期待出来そうです。

▼最後に

いかがでしたでしょうか?
見ているだけで不思議な感覚になりますよね~!
一見静止画かと思いますが一部だけ不可思議に動いていたら、ついつい人は見てしまいます。
何かしらの惹き画像にもなりますので効果的に使えたら良いですよね。
もしもこれを機に気になった方は是非シネマグラフを検索してみて下さい。

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

Pocket