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

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


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

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


なぜグループを作るの?

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

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

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

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


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

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

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


グループ化の方法

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

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

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

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

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

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

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

完成!

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


おわりに

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

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

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

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

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

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

▼画像配置の考え方①

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

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


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

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

▼画像配置の考え方②

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

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

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

▼ ▼ ▼

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

▼ ▼ ▼

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

▼最後に

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

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

スマホが速度制限でもストレスのないWEBページについて

現在主流の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のころの通信インフラにやさしいエコなサービス作りに挑戦するのも新鮮ではないでしょうか。
是非お試しください。

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

デザインと錯視

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

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


フィック錯視

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

正解は

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

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

エビングハウス錯視

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

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

デルブーフ錯視

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

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


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

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

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

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


ホワイトスペースとは

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

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

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


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

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

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

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


見やすさ

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

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


わかりやすさ

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


使いやすさ

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

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


おわりに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使ってみた

最後に

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

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

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

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

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

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

 

 

シネマグラフ

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

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

▼シネマグラフとは??

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

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

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

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


▼実際に見てみましょう


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


水だけが出続ける


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

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

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

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

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

▼使いどころ

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

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

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

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

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

▼最後に

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

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

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

簡単にドット背景、星柄背景を使えたら…!と思った事はないでしょうか?
今回はパターン素材の作り方を紹介したいと思います。
内容のレベルとしては基礎編ということで初めてパターン素材を作る方やどんなものだったけなと復習に適したものになっております。
—————————————————————-
★作成環境:IllustratorCC(作成に置いてCSシリーズも対応)
★動作確認:Windows7
★所要時間:10分(慣れると5分)
—————————————————————-
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼パターン素材とは

・自分で作ったパターン素材をスウォッチに登録することで、色を選択する感覚でいつもで使えるようになります。
・作ったパターン素材は縦横敷き詰める形で配置されます。


そのため、どんな形においても敷き詰めた際に繋がる上下・左右は絵柄、スペース等の違和感が無いように計算して作成をする必要があります。
パターンを作る際に最も重要な1つとなります!

それでは上記を踏まえ、まずは簡単なパターン素材を一緒に作って行きましょう!

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

上下・左右の絵柄、スペースのつながりに注意しながら作ってみましょう!

※ここで紹介しております内容は、一作例となります。
サイズ、比率等は説明のしやすい様に書いております。

【1】ツールの長方形ツールで正方形を描く。
【縦200px横200px・色#afd8f9】

【2】柄に使用する星を用意します。今回は縦横16px×16pxの星にします。

【3】星と背景を選択し、整列ツールを使って左上にピッタリ配置します。

【4】星を右側に50pxずつ動かす準備をします。
【Ctrl+K】で環境設定を開きキー入力を50pxに設定しOKを押します。

【5】星を選択し【Alt+→(右)】で星をコピーします。

【6】【Ctrl+K】で環境設定を開きキー入力を25pxに設定しOKを押します。
星4個を選択し【Alt+↓(下)、Alt放して→(右)】
【Alt+↓(下)、Alt放して→(左)】を交互に行い星を増やします。

【7】出来上がった画像を全選択して【Ctrl+G】でグループ化します。
その後、スウォッチが画面にない場合は上部のウィンドウからスウォッチ
を選択してください。

【8】出来上がったパターンを選択しスウォッチにドラッグします。

【9】スウォッチにパターンが追加され、これでパターン作成完了です!

【10】ハート型の図形にパターンを使ってみました。

▼最後に

いかがでしたでしょうか?
基本的な繰り返しパターンの作成を紹介させて頂きました。
柄が星ではなく、ストライプやドットの場合でも同じことが言えます。
また、規則性の無い柄になると少し難しい話になるかもしれませんので
それはまた次の機会にて!以上スガがお送りいたしました。

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

初心者向け!エンドロールの作り方①[Illustrator編]

こんにちは!
今回のテーマは「初心者向け!エンドロールの作り方①」です。
エンドロールの中でも、結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!
「結婚式の費用を節約したいからエンドロールは手作りしたい!」「友人から頼まれちゃった」「でも作り方がわからない…」と言う方はぜひ参考にしてみて下さい!

今回は、まずどうやって文字を組めばいいの?と言う方向けにIllustrator(イラストレーター)を使用した静的なエンドロールの作り方をお話したいと思います。
「初心者向け!エンドロールの作り方①[Illustrator編]」の続編、「初心者向け!エンドロールの作り方②[After Effects編]」では、After Effects(アフターエフェクト)を使用した動的なエンドロールの作り方をご紹介しています。
ぜひそちらもご覧ください!


使用するソフト

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

■Illustrator(イラストレーター)

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


作成の全体の流れ

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

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

After Effectsでテキスト作成をすることも出来ますが、名前の抜けや誤変換などミスがないかのチェックがしづらい為、まずはIllustratorでテキスト作成を行い文章の構成まで確認することをオススメします。
今回は①と②についてお話していきたいと思います。


エンドロールを作ろう!

1.作るべき動画のサイズを確認
作るべき動画のサイズを確認することはとても大切なことです。式場のプロジェクターのアスペクト比が4:3なのか、16:9なのかなど、動画を再生する設備によって作るべき動画のサイズは変わってくるからです。
いざ本番で再生しようとした時に上手く動画が映らなかった…なんて事が起きないように、利用する式場などにしっかり確認して下さい。

2.動画に使用するゲストの名前リストやメッセージリストを用意しましょう
エンドロールには名前が不可欠です。また、新郎新婦からゲスト1人1人へお礼のメッセージを添える場合もあります。ゲストの人数と名前をしっかり確認し、メッセージは誰に宛てているのかリストを作っておきましょう。
後ほどIllustratorで作業する中で、「新郎ゲスト」→「新婦ゲスト」の順番で並び替えたり、更に細かく「会社関係」→「友人」→「親族」→「家族」に並び替えますので、リストの段階でその並びになっていると後が楽ですよ!

3.Illustratorで新規ドキュメントを作成
Illustratorを立ち上げ、「ファイル」→「新規」を選択。今回は640×360(16:9)の画面サイズを想定して作成していきます。
※必要な動画サイズに関しては、[1]で説明したように利用する式場に確認してみて下さいね。

4.背景の作成
レイヤー1に「長方形ツール」で黒い縦長の長方形を作ります。これがエンドロールの背景になります。レイヤー名を“背景”にしておくとわかりやすいです。
高さは仮で5000としていますが、結婚式に出席する人数に合わせて自由に変えて下さい。

この段階では「整列」の設定は「選択範囲に整列」にしておいてください。

5.テキストボックスの作成
レイヤー2を作成します。このレイヤーに出席する人達の名前やメッセージを記入していきますので、レイヤー名は“テキスト”などとしておいて下さい。
「長方形ツール」で3種類の長方形を作ります。それぞれ「名前」「敬称」「メッセージ」のテキスト領域となります。
長方形が作れたらグループ化してしまいましょう。3つ選択した状態で「オブジェクト」→「グループ」でグループ化することが出来ます。

文字を組む際はルールを作ると見やすくなります。右揃えなのか中央揃えなのか、文字は1行に何文字まで入るのか決めることで、読みやすく統一感のあるエンドロールにすることが出来ます。
今回は「名前」は6文字まで対応で、「メッセージ」は4行かつ1行に14文字収めると言うルールで作成してみました。また、「敬称」は“○○ちゃん”にも対応できるように3文字分の領域を確保しています。
名前やメッセージ領域をもっと広く取りたいと言う場合は、長方形のサイズを大きくするなどして調整してみて下さい。
文字領域はこのくらいがいいけど名前が6文字以上の方がいる…と言う場合は、6文字の領域の中で文字を縮めて記載したり、2行で記載しても良いかと思います。

6.テキストの作成
「文字ツール」を選択し、長方形の左端にカーソルを合わせて左クリックします。これで長方形の中にテキストを配置することが出来ます。
上手くいかない時は、カーソルの形が「文字ツール」から「エリア内文字ツール」に変化した所でクリックして下さい。

名前やメッセージを入力すると下記の図のようになります。使用しているフォントや文字設定の情報も載せていますので、参考にしてみて下さい。
メッセージのフォントサイズは名前より小さくするとメリハリが付き読みやすいです。名前より70%~80%ほど縮小して下さい。

7.テキストと背景の整列
作成したテキストを先ほどの黒い長方形の背景の上に重ねると、下記の図のようになります。

図のようにテキストを背景の真ん中に配置したい場合は、背景とテキストを選択した状態で「整列」→「水平方向中央に整列」とします。

8.テキストをコピペして書き換える
[7]のテキストをコピペして、名前やメッセージを書き換えて下さい。
親族や友人グループなどまとめてメッセージを書きたい場合は、[5]の「名前」と「敬称」の長方形の高さを変えます。
例として親戚の叔母さん家族の設定で組んでみました。夫、妻、お子さんの“目上の方”順で、兄弟がいる場合は年齢順です。お子さんの敬称は“様”のままでも良いですが、小学生など若い方でしたら“○○ちゃん(くん)”など砕けた言い方でも良いかと思います。

9.テキストの並びを整える
名前とメッセージの入力が完了したら、「新郎ゲスト」→「新婦ゲスト」の順番で並び替えます。更に細かい順番は「会社関係」→「友人」→「親族」→「家族」の優先度が一般的です。
下記の図のようにグループごとに間隔を空けて配置していきます。文字が動くことを考慮して、読みやすいように間隔は広めに取りましょう。
今回の場合はテキストボックス同士の間隔が107px空くように配置しました。

空けたい間隔のサイズの正方形を作ると作業がしやすいです。ここで作った正方形は“作業”レイヤーを作って置いておきましょう。
作業が終わったら、レイヤーウィンドウの「目のマーク」をクリックして非表示にして下さい。

最後に、出来上がったテキストを全選択します。レイヤーウィンドウの右端にある“○”をクリックすると一括で選択できます。

選択出来たら「オブジェクト」→「グループ」でグループ化します。

10.アートボードを整える
[9]まで完了したら背景(黒い長方形)の高さを確認します。
名前やメッセージの量によっては、最初に設定した高さと異なっている場合があるかと思います。

確認できたらその数字をアートボードの高さに反映させます。※今回は初期設定のままの5000pxで進めます。
「アートボード」→「高さ」で数値を変更します。

11.アートボードに整える
それが終わったら「整列」の設定を「アートボードに整列」にします。

背景を選択して「整列」→「水平方向中央に整列」「垂直方向中央に整列」とします。
テキストも同じく、選択して「整列」→「水平方向中央に整列」「垂直方向中央に整列」とします。
※上記の後、テキストを背景に対して左右どちらかに寄せたい場合は「選択ツール」で手動で移動させてください。

これで、アートボードに全ての要素が配置されたかと思います。
下記の図はIllustratorの画面全体を見た時のイメージです。(12.5%の画面表示です。)

最後に名前やメッセージに間違いがないか確認して、問題なければ静的なエンドロール作成は終わりです!
おつかれさまでした!


おわりに

いかがでしたでしょうか?
黒い背景にテキストが整然と並んでいると動いていなくてもエンドロールっぽさが出てきますね。

そして次回は、いよいよAfter Effects編です!
今回作成したIllustratorのデータを使ってAfter Effectsで動きを付けていきますので、ぜひそちらもご覧ください!

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

たのしい文字組み 字間を調整してみよう

こんにちは!
みなさんお花見はしましたか?会社の近くの桜はもうほとんど葉桜になってしまいました。
桜が満開になってくると、大抵大雨が降ってすぐ散ってしまうので、毎年気が気ではありません…

さて、今回のテーマは「文字組み」についてです!
前回は文字組みの「字間と行間」について基礎的な部分のお話をしましたが、そのレベルアップ版で「字間」についてもう少し掘り下げていきたいと思います。

これから新入社員やデザイナーになる方に向けて、字間の調整方法や、漢字や記号などそれぞれの特徴に合わせた字間の空け方を書いていきます。
文字組みに気を配ることで、読んでもらう人にスムーズに内容を理解してもらうことが出来ます。デザイン作りはもちろん、日頃のプレゼン資料作りにも役立ちますので是非ご一読ください!


“字間を調整する”とは?

字間とは、文字通り「字と字の間」を指す言葉です。
字間の調整方法には、「字送り(トラッキング)」「カーニング」「文字ツメ」があります。


トラッキング(字送り)

テキスト全体の文字間隔を一定に整えるのに適しています。テキスト全体の中から一部を選択して任意の部分だけ間隔を調整する、と言う使い方も出来ます。
トラッキングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

カーニング

2文字(文字とそれに隣接する文字)の間隔を調整するのに適しています。調整方法として、自分で数値を選択・入力して整えることが出来る他、Adobeソフトなどでは自動で文字組みを調整してくれる機能「和文等幅」「オプティカル」「メトクリス」があります。
カーニングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

文字ツメ

そのままですが、文字を詰めるのに適しています。0%から100%の値を選択して文字と文字の間を詰めます。設定の値が100%に近づくと、組み合わせによっては隣り合う文字がくっついてしまいますので注意が必要です。
文字詰めの設定の値をプラスにすると間隔が縮まります。


そもそも字間を調整したい時はどこで編集すればいいの?と言う方は下記を参考にしてみて下さい。
よく使用される代表的なソフト2つ、「Adobe Photoshop」と「Microsoft PowerPoint」の字間の設定画面です。


文字の特徴に合わせて字間を調整しよう!

文字には、漢字、ひらがな、カタカナ、英語、記号など様々な種類があります。更に同じひらがなの括りの中でも、丸っこい字、四角い字、細い字など形も様々です。
種類や形の組み合わせによって、字間が広かったり狭かったりと変わることがあります。
まずは全体の字間はどれくらい広げようかな?と目的を定めます。「ゆったり読めるようにしたいから広げよう」「既定のサイズに収めたいから縮めないと」など、ざっくりでいいのでいいので決めます。

それでは早速、下記の例文のバランスを見てみて下さい。また、この例文を調整する目的は「デフォルトの設定を元に、バランスを均一になるように調整する事」です。

デフォルトの設定で文字を打ち込んだままだとこのようになります。
まず「、」と「家」の間が開きすぎているなと思った方も多いのではないでしょうか。
、。「」などの記号は、デフォルトの設定だと字間が広いくなってしまいますので、調整が必要な事が多い部分です。
特にタイトルや短い文章で記号を使う際は、記号の前後の間隔が広いと不格好さが目立ってしまいます。その為、全体のバランスを見ながら調整してあげましょう。

では、実際に字間を調整してみます。
今回は「、と家の字間が広すぎる」ので、カーニングで調整します。

そもそもテキスト全体のバランスをまず変えたい…と言う方は、カーニングを弄る前に、トラッキング設定を行いましょう。全体を整えてから、細かい微調整を行うイメージです。
例えばもう少しテキスト全体の字間にゆとりを持たせたいと言う方は、トラッキングの値をプラスすることで選択した全ての文字の間隔を広げることができます。

話を戻しまして、今回使用している「小塚ゴシック Pr6N 36px」のカーニング設定を変更して文字を詰めたいと思います。

「、」と「家」の間のカーニングの値を、0pxから-400pxにしました。ここだけ飛び抜けて字間が広かったのが、周りと均衡が取れるようになりました。
私はカーニングをよく使うのですが、詰めるだけなら文字ツメの値を変更するやり方でも大丈夫です。むしろ文字ツメの方が早くて使いやすい!と言う方もいるかもしれないので、自分の使いやすい方で調整してみて下さい。

次に「W」と「は」、英文と和文の字間です。細かい部分ではありますがここも若干広くなっていますので、カーニングで調整を行います。「W」と「は」の間のカーニングの値を、0pxから-150pxにしました。

余談として応用編にはなってしまいますが、どうしても綺麗に組めない、納得いかない時は、フォントから調整する必要があります。英文には欧文フォントを使用した方が綺麗に組むことが出来ます。また、和文がゴシック体なら英文にはサンセリフ体を使用する、線の太さや雰囲気が似ている物と組み合わせるなど、フォントから気を配ることが望ましいです。
例えば「HGSゴシックE」は、デフォルト設定では下記の図のように英文が半角で表示されてしまいます。比率が縦長の文字と正方形の文字が並んでいてバランスが悪く、見る時に違和感を感じてしまいますね…
そんな時こそ欧文フォントに変えてみて下さい。和文で使用しているゴシック体に合うように、欧文フォントはサンセリフ体の「Myriad Pro(フォントの太さ:Semibold)」を使用します。

文字のバランスが統一されて、自然で読みやすい文字の並びになったのではないでしょうか。
もちろん、和文フォントをそのまま使用する事も間違いではありませんよ!あくまで見易さの観点からバランスを考える時、こだわりのデザインを表現したい時に考慮してみて下さい。

また和文フォントと欧文フォントを組み合わせる際の注意点ですが、同じフォントサイズでも欧文フォントの方が小さく見えることがあります。
その為、欧文フォントは少し大きめに設定してあげると綺麗に見えます。今回は「GW」の部分だけ、「小塚ゴシック Pr6N 36px」から「小塚ゴシック Pr6N 38px」にちょっと大きくします。

微妙な変化ではありますが、バランスが良くなったのではないでしょうか。特に英文と漢字の大きさを比べるとバランスが改善されたのがわかるかと思います。

他にも字間の特徴は様々で、デフォルトだと漢字は少し詰まり気味、ひらがなは開き気味などもあります。隙間のバランスをどこに合わせるのかを決めて、広げたり縮めたりしてみましょう。
上記を踏まえて、最後に例文の微調整をしてみたいと思います。

これで目的達成です!
まったく字間を調整しなかった場合より、調整してあげた方が全体のバランスが統一されて見やすくなったのではないでしょうか。
ちなみに字間の調整を行った箇所は全部で6ヵ所になります。

もしここまで来て「やっぱり全体の字間を広げたい…」「縮めたい…」と思ったら、トラッキングの値を変えてイメージに近づけて下さいね。


おわりに

いかがでしたでしょうか?
バランスは文字や文章によって様々ですし、美的感覚も人それぞれなので具体的な数字で正解を出すことが難しくもあります。だからこそ、まずはやってみることが大切でもあります。
A4の紙の中で組むのか、幅640pxのバナーで組むのかなど、様々な条件や目的に応じてやってみることで、適切なバランスに作っていくことが出来ます。
興味を持って頂けた方は、今回の例文などを参考にぜひ試してみてください!


↓↓前回のおさらいがしたいなという方は、ぜひこちらもご覧ください!↓↓

たのしい文字組み―字間と行間―


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