ピクトグラムを作成するときのポイント

1964年の日本でのスポーツ大会をきっかけに広がっていったと言われているピクトグラム。名前を聞きなれない方も多いかもしれませんが実は誰もが必ずと言っても良いほど、日常生活でピクトグラムを目にしているのです!
例えば、緑色に点灯している非常口の逃げようとしている人のイラストが一番分かりやすいと思います。
ピクトグラムを言葉で表すと、イラスト文字という名の記号(以下:イラスト文字)という所でしょうか。

今ではピクトグラムをフリー提供してくれている所もあり、私たちでも気軽に使えるのですが(ありがたいですね!)、「ちょっとイメージと合わない」「○○のピクトグラムが無い」等、こちらの条件と合わない場合も…ないとは言えません。

そういう時はピクトグラムの作成にチャレンジしてみてはいかがでしょう!自分で作成することで、イメージに寄りやすくなったり、愛着も湧くかもしれませんしね。
では、ピクトグラムを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

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

point1.誰にでもわかる表現

国籍問わず老若男女、年齢関係なしに、ピクトグラムは誰が見ても理解できる表現が求められます。そもそもイラスト文字であるため、自立した指示表示が出来ることが使命とされているといっても過言ではございません。

「じゃあ、どんなものが誰にでもわかるの??」
「そうですね。例えば物であれば、必要性が無い限り最新の表現を省くのも効果的です。新しいものをすべての人が知っているとは限りませし、場合によっては認知率が低い可能性があるかもしれないです。」
「なるほど…」

さっそくですが、下記のピクトグラムをご覧ください。

Aは、家電よりもスマートフォンを使用する時代と考えれば間違ってないと思います。ですが電話のイラスト文字として考えた時に、近しいものにタブレットなどもあるため少々表現に難しさを感じてしまいます。今回、ボタンのないスマートフォンであるのも後押しし、イラストにしたときに分かり辛い印象を覚えてしまいます。

Bは、いまや見る機会は少ないと思われますが、電話と言われたときに頭によぎる人は割といるのではないでしょうか。また、近しい形もないため“この形=電話”と認識しやすいと考えます。また機能が電話しか無いことが後押しし電話という印象が残りやすいのかもしれません。

また、イラスト文字をシルエットにしてみた際に、認識しやすいかどうかも大事なポイントだと考えています!

point2.形状のシンプル化

ピクトグラムが何を指しているかを瞬時に認識しやすいものは?と考えた時、描かれているイラスト文字の情報量が少なくシンプルなものが効果的です。手描き等のイラストとは違い、描きこめば描きこむほど伝わり辛くなる可能性があがってしまいます。

■例:ショッピングビル等に入っているカフェの表示

デパート内には様々なお店が入っており、カフェでは、紅茶もコーヒーもお茶等々も飲めるお店が多く(専門店の場合もありますが)、今回「ショッピングビルに入っているカフェ」という表題もあるため、シンプルに「カップから飲み物が飲める」事を連想させることで十分成り立つと考えます。
Bに対しAは考えさせてしまう要素が入ってしまっております。
イラストに情報量が多いと捉え方に差異ができてしまうこともあったり、たいした時間ではなくても考えさせてしまったりする可能性も無きにしも非ずです。また、遠目で見た時に情報量が多いと、ごちゃごちゃとしやすく場合によっては近くで見ても認識し辛いことも考えられます。

■AとBのピクトグラムをそれぞれ遠目と近くであてこんでみたら…

情報を正確に伝えるために、伝わる最小限の表現に留めつつ、考えさせてしまう部分は削ぎ落して形状がシンプルになる様、心掛けることが大切です。コンセプトによってはピクトグラムにオシャレ、遊び心を入れる場合もありますが、基本的には指示に値するので「伝える」ことに念頭に置いて作成する必要がありますね。

point3.メリハリ

ピクトグラムはイラストの部分と背景(地の色)の部分を明度差のある2色で構成されています。そのためメリハリがつき基本的にはある一定の距離や、瞬時の認識がしやすくなっていると考えられます。

さいごに

ピクトグラムを簡単にまとめると、

・イラスト文字という名の記号
・シンプルかつ明確な形状が求められる
・遠目(常識の範囲)からの視認性が良い
・地の色とイラスト文字部分を明度差のある2色で構成することでメリハリ良く
・瞬時の解読が可能
・言語を超えた伝達方法

場所によってさまざまな表現のイラスト文字がありますが、共通して言えるのはそれがなんであるかしっかりと分かるということです。

簡潔に表現することは簡単に思えて実は難しいところがあります。もしピクトグラムを見かけたらちょっとながめてみてください。伝えるための工夫や最小限の表現が見えてくると思います!

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

伝わりやすい!デザインのポイント

こんにちは!ユイPです。季節はあっという間に夏ですね!
晴天が恋しいので早く梅雨が明けてほしいものです。

今回のテーマはタイトルの通り「伝わりやすい」デザインです。
伝わりやすい、見やすい、わかりやすい。そんなデザインをする時のポイント(フォントの選び方や、色づかい、配置など)をご紹介します。


≪伝わる!文字編≫

フォントは太めのものを使う

これは前に文字についての記事を書いた際にも少し書きましたが、ゴシック等の太いフォントは視認性(目で見たときの確認のしやすさのこと)が高いのでとにかく見やすいです。
見やすさ重視の場合は太くて力強いフォントを使いましょう。

大小の差をつける

一番見せたい文章と、補足的な文章がある場合どちらも似たような大きさだと見せたい部分が真っ先に目に入ってきにくいです。
なのでしっかりと差をつけて、大事な部分を目立つようにします。
この画像の場合「モモ太郎」がメインのタイトルで「~いぬ、サル、キジをお供につれて~」がサブタイトルになるのでタイトルの「モモ太郎」の部分を大きくしました。

≪伝わる!配色編≫

色の明度で差をつける

白と黒のように明るさに大きく差がある色を組み合わせると可読性(読みやすさのこと)が高くなります。
二色で構成する場合、有彩色(赤や青など色味をもった色)に白と黒(無彩色)のどちらかの色を使うと上手くまとまる配色が出来ます。

彩度の高い色を使う

鮮やかな色はとにかく目を引きます。「ビビッドカラー」と呼ばれるような色です。
反対に「パステルカラー」に分類される色は、とても可愛い。けれど目立たせたいデザインの際は不向きかもしれません。
ただしビビッドカラーは考えて配色を行わないと安っぽくなったりとてつもなくダサくなったりします…取扱いにはご注意を。

補色を組み合わせてみる

補色とは、色相環で正反対に位置している色同士の事を差します。
真逆に位置している色なので使う事でインパクトのある色合いにする事が出来ます。例えばクリスマス(赤と緑は補色関係)ただし真逆なので純粋にその2色だけを使うとチカチカして見づらくなってしまう事も…そんな時は、白や黒などの色を間に挟んでみる(縁をつけたり)と見やすくなります。

≪伝わる!レイアウト編≫

視線誘導はZ型もしくはF型の法則

「Zの法則」「Fの法則」というのがあります。人の視線の動きを文字の形で表した法則です。
【Z型】視線は左上から順番に左上→右上→左下→右下とZの形に移動していきます。
主にチラシやポスターなどの媒体ではこの動きになります。
【F型】左上から始まって右上→左下と動き、下に下がってまた左→右と移動していきます。
右下は見られにくいという特徴があります。WEB上ではこの視線の動きになる事が多いと言われています。
媒体によって、この法則を意識しながらどこにどの要素を置くか考えて配置を行いましょう。

一か所だけ位置を変えてみる

一つ目立たせたい要素がある時は、一か所だけ位置を変えてみるのもあり。人間の視線は揃っていないものに目がいきやすいからです。
位置じゃなくて色や大きさを変えてみるのも◎


以上、伝わりやすいデザインをする際のポイントでした。
さらっと覚えておくときっと役に立つはず!

今年の夏は去年ほど暑くないといいですね。ユイPでした。
Have a nice summer!

ツイッター↓
ユイP@デジマースブログ

挿絵イラストを作成するときのポイント

資料、チラシ、広告などなど、内容をよりイメージしやすくするために、挿絵イラストを使用することがありますよね。
現在では多くの商用フリーイラストがあり、気兼ねなく誰でも使用することができます。
その一方で、「このイラスト見たことある」「○○の所のだ」「イラストがかぶってしまった」となることも少なくはありません。
特にイラストの種類が豊富であれば尚更多くの人が使用するわけですから、当然仕方のないことです。
ですが、提供してくれている方がいるから使用できていることは忘れてはいけませんね。

そこで、挿絵イラストを自分で作成してみてはいかがでしょう!
自分で作成することで、より内容に適したもの、他との差別化がしやすくなるかもしれません。
では、挿絵イラストを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

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

point1.万人受け

挿絵イラストの前提として、「文章の補完、内容イメージの促進」があります。つまり見る人に、より理解してもらう為の手段の1つというわけですね。
また、挿絵はこうでなければいけないという様な決まりはありませんので多種多様なものを見かけます。

資料、チラシ、広告などによって挿絵のイメージ(絵のタッチ等)が異なることはもちろん、各々の内容に合ったものを使用する事が望ましいですよね。
その中でも共通して言えることは見る人を選ばない万人受けのものをなるべく使用することです。

※内容等、ターゲット層による場合がございます。

「なぜ、見る人を選ばない万人受けのものが良いの?」
「あくまでも挿絵イラストは“補助的な役割”であることを念頭に」

個人的な制作物であればさほど気にしなくても良いかもしれませんが、多くの人が見る可能性があるのであればそれぞれ思うこと、受ける印象は異なるので見てくれる人、出来る限り全員に伝わる様に最低限の配慮が必要です。

Aの方は大きな特徴もなく「小学生が楽しそうにしている」感を自然と後押ししてくれる印象を受けます。
Bの方は楽しそうにしている感は伝わるものの個性が強く、「小学1年生の遠足」という内容にはあっていない印象を受けますね。

挿絵を見た時に深く考えず、スルー出来るくらいの存在感がちょうど良いのではないでしょうか。

point2.シンプル化

多くの人が受け入れやすいイラストを一言でいうと基本的にシンプルなものと考えています。
シンプルなものは必要最低限の情報で構成されているため、誰がみても分かりやすく理解しやすい傾向があります。

■情報量が多い

それでは情報量が多いイラストはいかがでしょうか。
ほとんどのイラストは描きこめば描きこむほど複雑化していき、情報量が多くなることで個性が強くなっていきます。
(情報量が多くなることが悪いというわけではございません。)
見る人に考えさせる要素は極力抑えた方が、万人に受け入れてもらいやすいのではと考えます。

■目立つ特徴:指さしマークの場合

下記のイラストA、Bを見るとお分かりかと思いますが必要最低限、手と分かる範囲で描かれています。

そんななかBの方を見るとネイルが施されており、描きこみが少ないにもかかわらず、目立つ特徴があるため個性を強くする要因になっています。

一般的な指さしマークを考えた時に、爪にネイルをしているものはあまり想像しませんよね。
もしくは軽く爪が描かれている程度ですね。

※ネイルを扱うところであれば例外ですが…

情報量の多いもの、目立つ特徴を持つものは見る人を選んでしまうことがあるため、描きこみという名の情報量を抑えシンプルに、かつ明快にまとめられるかが重要ではないでしょうか。

また、個性が強くなるにつれてそのイラストに対する好き嫌いなどの感情が出やすくなる傾向があります。

point3.色、模様

特に色や模様(柄)に注力する必要が無い場合は、細かく表現しない方が情報量が少なくなり、見やすくなります。
例えば、白黒で使用されるものであれば、色が必要ない場合もありますし、色や模様よってはイラストがつぶれてしまったりすることも考えられます。

着色の仕方ひとつでイメージが大きく変化するため、あくまでもそれがなんであるかがわかる程度で表現をしてあげることをお勧めします。
特殊な着色の仕方を行うだけで、一見シンプルなイラストも個性を持ち存在感を放ち始めます。
どんな内容、ターゲット、公か私的かを見極めたうえで、適切なものを用意しましょう。

まとめ

■挿絵イラストは“補助的な役割”であることを念頭に
■見る人を選ばない万人受けを心掛ける
■挿絵を見た時に深く考えずスルー出来るくらいの存在感
■イラストの線の情報量は少なく
■色味、模様は必要最低限極力抑える
■白黒の場合はメリハリをつけてイラストを見やすく

自分がこれが好きだからという思想は一旦しまい込み、その内容に合うものを選定することが大切です。
補助的な役割である挿絵が「内容にあってないよね」と思われてしまったら元も子もありませんよね;
また、時には情報量の多いものや個性が強いもの等、内容やターゲットによっては相乗効果をもたらすこともあります。
作成するときには何に対する挿絵なのかをしっかり把握しましょう。

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

ドロップシャドウ(影)とボカシ/濃淡のUI活用

『ドロップシャドウ』のほか、『ボカシ』と『透明度(アルファ)』をつかって、単純なグラフィックデザインの表現としてではなく『UI』の機能/優先度を補助する設定をしてみます。

今回の内容は、
この先である将来のUIの機能による表現を、手軽にCSSやプログラムで動的にインタラクションとして組み込んだ場合の想定ですのでご理解ください。

それでは早速ボタンUIを作ります。


ドロップシャドウの設定あれこれ

ボタン単体としてみると、Aのシンプルなドロップシャドウがない表現で十分に機能しますが、

実際には、バナー画像やサムネイル画像、テキスト本文が含まれる総合的な画面のなかでUIとして十分に認識でき機能しなければいけません。

ドロップシャドウの表現もCSSで細かく設定できます。

box-shadow: 2px 2px 4px 0px gray;

最初の「2px」部分はx座標、
次ぎの「2px」部分はy座標
次ぎの「4px」部分はボカシ具合
次ぎの「0px」部分はドロップシャドウの大きさ
次ぎの「gray」部分は色設定 ※「#000000」系の記述も可
末尾に「inset」をつけると影が内側に設定できます
※間は半角スペースを入れる

box-shadow: 2px 2px 4px 0px gray inset;

「,」(カンマ)を入れて複数ドロップシャドウを設定出来るので、「inset」でボタンの質感のテカリを再現、その他にドロップシャドウでボタンの影を設定もできます。

box-shadow: 2px 2px 4px 0px gray,2px 2px 4px 0px #ffffff inset;

↓値を変更することで、画像のAのようなパキッとした表現や、Bのようなボカシを設定して実際の影のような表現も段階で表現できます。

トレンドでは、影がさらにぼやけて広がり拡散した状態のドロップシャドウが、WEBデザイン、グラフィックデザインで多く使われています。

それでは複数課金のボタンUIでのドロップシャドウに、意味合いと優先度を設定してみます。

ドロップシャドウの表現を揃えれば、優先度は横並びとなり、上下左右の設置位置による些細な優先度だけが存在している状況です。

この並びのボタンUIにドロップシャドウのボケ具合の程度で差異を出すと、コントラストの違いにより、ボカシが弱く濃い左上のボタンの優先度が高くなります。

次に、
実際の影の付き方を再現して、ボタンに「高さ」と「奥行き」の距離感を設定してみます。

手前に飛び出て見える感もありますが、微妙な表現の違いにとどまっており、4つのボタンの優先度に大きな違いはありません。

さらに、
ボタンの面部分とそのボタンから落ちるドロップシャドウの距離を離して違いをだしてみました。

ここまでの表現は現在のブラウザCSSでも設定できますが、これから先の内容を動的インタラクティブなUIとして現在機能させるには、JavaScript/jQueryなどの重い処理を利用し疑似的に力技で処理する必要があり、ユーザー体験にも処理が重く読み込みに時間もかかりデメリットがあります。

今後のブラウザ側の機能追加とデバイス側の処理速度向上が必要です。


ボカシの設定あれこれ

「ボカシ」表現自体は、OSネイティブアプリレベルではホーム画面やsafariブラウザ上部領域の透かし処理などのエフェクト処理として確認出来ますが、WebのCSS3レベルでは、画像を部分的にぼかすことができず一部のブラウザのみ画像全体のボカシ処理にとどまっています。
※CSS3のfilter:blur(ぼかし)は現在SafariやGoogleのChromeなどのwebkitブラウザだけ実装されています

将来的には「視線追跡機能」等により、見ているUIパーツや優先度の高いパーツの「ピント具合」を動的に調節できる機能が実装されるとおもわれます。

他にも利用者が注力して見ている場所以外のレンダリング解像度を落とし、デバイスの処理を軽くすることでバッテリー持ちを良くしたり、閲覧レスポンスを快適にするなどUX向上メリットも期待できます。

それでは話を戻して「ボカシの優先度」をUIに活かして設定してみます。

この段階まで表現できて、やっと判断しやすい優先度に見えるようになりました。


濃淡(透過/アルファ)の設定あれこれ

最後の表現として「手前」「奥」の濃淡表現(空気遠近法)を対象UIパーツに透過/アルファの数値設定を行い、優先度の低いUIコンポーネントパーツの透明度を下げ視認性を下げてみます。

メリハリがでてわかりやすくなったところで、訴求金額の上下を逆にしてみると、また見え方が変わってみえますね;

ボタンの並び方を変更して大きさに遠近感を出すとこのような感じです↓

使いやすくユーザビリティに問題なくUIが機能できるかはこの表現が動的にインタラクションする必要があります。


さいごに

スマートフォンなどのUIにおける画面要素の「重なり構造表現」へ意識は、マテリアルデザインへの意識向上、新技術のデバイスへの組み込みにより今後さらに必要となってきます。

SF映画のなかで登場する「未来的でシンプルなUI」は、カッコいいけど簡素過ぎてわかり難いものばかりでした。今後、技術が追いついた時、それらについて適切な情報設計が出来るかどうかは、表現とUIデザインの意識次第なのではないでしょうか。

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

女子度高め?映えるデザインのコツ

こんにちは!ユイPです。
れ、い、わ~令和になりましたね!令和もよろしくお願いします!
元号が変わる瞬間、世の中は年越しみたいで面白かったです。

今回の記事は女子度高めな「映える」デザインをするコツです。
昨今「インスタ映え」という言葉が流行り、街中や行楽スポットにもそれ向けのコンテンツが増えていますね。
デザインにも「映え」は重要です(時と場合によりますが)。

普段そういったデザインは、インスタグラム、女性誌、化粧品やファッションなどのWEBサイト…などからインプットしています。
そこから得た情報を私なりに、普段のデザインに落とし込んでいる際のコツをご紹介していきたいと思います。
とは言え映えや可愛いの基準は人それぞれなので、こんなのもあるんだな~というテンションで参考にして頂けたら嬉しいです。

point.1 文字よりもビジュアルで「映え」

例えばこの2つ、どちらが「映え」てますか?

左の方が情報量は多くてわかりやすいけど、カラフルなアイスをより全面的に押し出した右の画像の方が「映え」てませんか?
文字でつらつらと説明を書くよりもこうしてビジュアル重視の方が印象に残りやすくなります。

point.2 手書き風にしてみる

手書き風の文字やイラスト、雑誌やグッズなどでもよく見かけます。

こういうロゴも、右のように手書きフォントにしてみると印象が変わります。
もちろんデザインによっては左の方が適している事もありますが、手書きの方がラフな感じになりますね。

コラージュ風にするというアプローチも。
他にも、手書き風の人物のイラストが取り入れられているのデザインも近年よく見かけます。イラストを使ったデザインは華やか◎可愛さ◎ですね!

point.3 文字に+してみる

例えばこれは化粧品のブランドの紹介画像のイメージです。
それぞれ商品の名前に「CHERRY」「PEACH」「APPLE」の名前がついていますが…

文字だけでなく、こんな風にモチーフをアイコンにしてみました。
こうする事で、わかりやすくかつ可愛らしくなりますね~。イメージも膨らみます。
実際に化粧品には食べ物や飲み物の名前がついているものがよくあり、パッケージにもそれが印刷されていたりするので、そういったモチーフを取り入れたものが好まれるのかなと思います。

point.4 曲線を意識する

曲線や丸みのあるモチーフを使用すると直線よりも柔らかく、優しい印象になります。
これは映えというよりかは女子度が高くなるコツです。

丸く切り抜いたり角丸長方形を使ってみたり。
直線のラインではなくゆるくカーブさせてみたり。

四角を使ったデザインにしたい時も、角をちょっとだけ、ほんのちょっとだけ丸くするだけでもいい感じになります。

上が普通のゴシック、下が丸ゴシックです。フォントも角ばったものよりも丸みのあるものを使うと可愛らしく柔らかくなります。

point.5 色味

ピンク、黄色やベージュ、オレンジなど「暖色」の色を使うと女子度の高い「映え」を作る事が出来ると思います。
水色など寒色の場合は、彩度が高すぎないパステルカラーよりの色がよく使われている印象です。ミントグリーンなんかも人気ですよね。

■トレンドは「シンプル」「単色」?
昔、携帯をラインストーンでゴテゴテに装飾したり、プリクラの落書きがキラキラ!ギラギラ!だったりした時代があったかと思いますが…。
最近はそういうデザインよりも、シンプルなものがトレンドなのかなと思います。色数も多くなく、単色でデザインされたWEBページなどもよく見かけます(2019年現在)。
特に女性はめまぐるしく流行が変わるので、トレンドをチェックして取り入れていくのも大事ですね。

以上、ユイPがお送りいたしました!
五月病に負けないよう頑張りましょう。

ツイッターの方もよろしくお願いします♪
デジマースブログ公式Twitter

Illustrator 日本語のロゴデザイン 作り方

「ロゴ作成」で検索すると見栄えの良い英語で作成されたロゴばかり紹介されていて、日本語のサービス名/商名でロゴを作る参考になりません。
今回は日本語ロゴ作成のサンプルとしてロゴデザインを作成し、その作り方を紹介いたします。

ロゴとは

『ロゴ』とは、「サービス/商品」の名称/文字をビジュアル化し、ブランドの顔としてつかったデザインされた画像です。
デザインする場合は主に、イラレ(Illustrator)で作成しますが、ゲームやアニメのタイトルロゴの用途の場合は色数やグラデーションを多く使うなど、構成が複雑化する場合が多く、その場合はPhotoShopや3DCGソフトなどで制作作成する必要性があります。

主な用途
・企業ロゴ
・製品ロゴ
・サービスロゴ

身近な用途
・TV番組のタイトルロゴ
・ゲーム機のロゴ
・ゲームソフトのタイトルロゴ
・アニメのタイトルロゴ

どんな文言でもロゴ(意匠)として認識しやすい個性的なビジュアル/シルエットにすることが認知の目的を達成できますが、
近年は「雰囲気」を重視して、文字数が半端なく多い作品ロゴ(むしろタイトル画像と呼ぶべきですが)が増えており、
シルエットも似通っており差別化がなくなってきています。

流行/潮流後に残るかどうかはこの先になってみないと分かりませんが、雰囲気は和の文化も感じさせます。

商標登録するということ

『商標登録』とは、「名称」を他社が使用できない「唯一」のものとして商用利用する権利(「著作権」とは性質が違う)を登録、特許庁に認めてもらい使用することです。

ここで気付きますが、「既存フォント」を使用または要所を改変アレンジしてロゴとして使うことは、その時点でオリジナルではなく、「既存フォント」から派生した類似となり、そのまま『商標登録』を行ってしまうと著作権の侵害により金銭要求発生の可能性があります。

『商標登録』するロゴを「既存フォント」でつくる場合は、必ずフォント利用規約を確認してから著作権の持ち主に連絡、契約する必要があります。(そもそも権利を全て放棄した商標利用OKのフリーフォントを使用して「ブランドの顔」をつくることは適切ではありませんね)

ロゴタイプ向きなフォント形式

ロゴタイプ向きなフォント形式の比較:英字と和字(日本語)

ロゴタイプは「英字」で作ると、シンプルにまとまり使いやすいですが、「和文(日本語)」は「英文」に比べてデザインをクールにしにくい傾向があります。

ロゴタイプ向きなフォント形式の比較:明朝体とゴシック体

また、「明朝体」は視認性の問題からロゴタイプには向きません。

フォントの違いによる視認性の変化

「ロゴ」は広義なことばで、「ロゴタイプ」と「シンボルマーク」を内包します。

ロゴはロゴタイプシンボルマークを内包する

制限のアウトプット/雰囲気のアウトプット

1970年~2000年の昭和から平成の中では「制限」の環境化でアウトプットを考えなければいけない時代がありました。

「印刷表現」だけを考えていればよかったそれ以前の産業では「デジタル」での制限制約はなく、アナログ表現での限界のなかであれば、自由にデザインが出来ました、セリフのついた「セリフ体」や「明朝体」などの表現もその時代の象徴的なタイプ表現です。

古い印刷物に個性的雰囲気を感じるのもそういった完成された表現があってと感じます。

そしてデジタル黎明期1970年~2000年は、コンピュータの登場とともに解像度の少ない「SDディスプレイ」に文字を出力することになりますが、
その制限は唐突に8ドット×8ドットと、スマホ時代の現在の環境とは天地の差があり「フォント」を表現する事は出来ず「雰囲気」はグラフィックデザインから」なくなりました。(代わりに生まれたのは無垢なドットのレトログラフィック)

2000年はじめの、モバイル/携帯電話(フィーチャーフォン)では一時期進んでいた家庭用ゲーム機や据え置機器解像度の高解像度化(VGA640×480)は技術の制限によりQVGA (240x320)の解像度しかなく、漢字の正しい画数などの表現もままならず(「魔」などの文字も、部首「まだれ」中を「マ」にするなど;)「雰囲気」は二の次でした。

携帯電話にも高解像(VGA640×480)端末が登場してきますが、「下位互換」の制約はついて回り、高解像度端末も表面上物でしかなく、内部処理/基本アーキテクチャは低下移動度を踏まえる必要がありました。

制約がなくなり、「文字のデザイン」が行われるようななったのは2012年ごろから登場したスマートフォンからです。

私は昭和生まれのグラフィックデザイナーですので、デザインの根幹には、日本人が得意とされてきた制約の中でのデザインがあります。
常に制約を考慮して仕事をおこなってきましたが、

これからは、表現、雰囲気の時代です。

やれること、使える色、容量も増え、時間もかかりとても大変な時代になりましたが、
これから紹介するロゴ制作作成方法は、従来のシンプルな商標登録もできるやりかたです。

それでは、まずは「ロゴタイプ」をillustrator CCをつかい、画像中心に作り方を紹介していきます。

illustratorでのロゴタイプの作り方

文字の基本ガイドをつくりあたりとしガイドをロック、別レイヤーを上に作り、その上に「線」で文字のラフを大胆に置いていきます。

置き終わったら縦軸横軸のポイントを可能な限り揃えておくと統一感が出ます。

イラレによるロゴタイプの作り方:ガイドに文字をラフで描く

作った線の幅を太くしてロゴらしい存在感にします。

線を太くすることで高さがまたズレてしまうため、ガイドレイヤーを頼りに再度調整します。

調整に時間がかかる場合もありますが、この状態でシルエット自体は完成形に近くなりました。

イラレによるロゴタイプの作り方:線を太くしてガイドに合わせる

文字のそれぞれに特徴的な形ががあり、縦長だったり、横長だったり、逆三角形だっだりとシルエットがありますので、文字の面積差が均等になるように、大きくしたり小さくしたり調節してみると文字のバランスが良くなります。

真四角は特に大きく見えるので小さく、丸型は小さく見えるので大きくするのが基本です。

説明:文字の面積差を整えるルールとは

それでは、先ほどの調整ルールで文字の大きさを整えてみます。

画像を見ていただくと分かりますが、今回は説明用に大げさに調整をおこなっていますので、実際作業される場合はもう少し抑えて調整してみて下さい。
「ザ」「イ」は説明する目的で縦長になってしまっています

文字の大きさを整える
※細かい調整なため細部を拡大(スマホはピンチイン)して確認ください
文字の大きさを整える(拡大状態)

変更前後を比較すると、大きすぎた「ロ」「ゴ」「ン」が小さくなってます。
「ザ」「イ」下を他の文字と揃えてしまっても問題ありません。

文字面積調整後の比較
※細かい調整なため細部を拡大(スマホはピンチイン)して確認ください

さらに「錯視」の資格調整を行っていきます。
変更前後で縦某の細さが緩和され、横棒と同程度の太さで見えるようになりました。
※錯視については個人差があります

錯視の視覚調整

「錯視」についてはコチラの記事を参照ください。

それでは、素の状態と各調整を行った状態を比較してみます。
※しつこいようですが、「ザ」「イ」は下の棒の高さを他の文字と揃えてしまっても問題ありません;説明用にあえて長くしてます。

錯視の視覚調整後の比較

最終整えを行っていきます。

「濁点部分」は少々情報量が多いので小さくし、文字の本体の優先度をあげます。
「ザ」「イ」は下の棒を調整します。

基本形の最終整え

次に、文字の角のエッジを少々丸くして仕上げていきます。
角を丸くすることで、尖り(バリ)がなくなり柔らかく優しいシルエットになります。
※高級家具の角もそういった加工がされており、危険性がなくなり触り心地も良くなります

エッジを丸くして調整1

エッジを丸くして調整2

エッジを丸くして調整3

それではベーシックな基本形が出来たので、バリエーションをつくってみます。

基本形を弄ってバリエーションを作る1

基本形を弄ってバリエーションを作る2

ワンポイントのアクセントカラー(挿し色)入れてロゴタイプ部分の完成です。
挿し色は色分布割合を少なくするようにします。

アクセントカラーを設定してロゴタイプを完成させる

「ロゴタイプ」の横に「シンボル」を配置すれば「ロゴ」の完成です。

ロゴをみるひとは目線の行きやすいシンボルをキッカケにロゴタイプに視線をずらしロゴを認識すると思いますので、シンボルはキャッチーなビジュアルが望ましいのではないでしょうか。

ロゴタイプとシンボルを組み合わせてロゴの完成
以上でロゴ作りの説明を終わります。

さいごに

今回は比較的簡単な直線の組み合わせで文字デザインをしてロゴタイプを作りましたが、曲線を使う場合は「角度」や「長さ」「太さ」をルール化して統一化する決めの流れは今回と同じです。

今後、曲線や太さのルールが複雑なロゴタイプを組み合わせたロゴ作成を進め、作り方も追記していきます。
デジマースのネモトでした。

タイトルロゴ風 文字デザインをしてみよう vol.2

こんにちは!ユイPです。
今年は年女なので昨年以上に猪突猛進で突っ走っていきたいと思います。よろしくお願いします!

さて、今回のテーマは「文字デザインをしてみよう」です。Vol.2と書いてあるように第二弾です。
前回は白黒文字オンリーで文字作りの基本を紹介しましたが、今回は色をつけて「この2つが出来ればロゴっぽくなる」という効果を紹介していきます。


★使用ソフト:Adobe Illustrator CC 2019


Illustratorでの詳しい基本の文字の作り方はタイトルロゴ風 文字デザインをしてみようの記事で詳しく説明しているのでここでは簡潔に文字のみで説明します。
★更に文字の基礎編⇒文字デザインをしてみよう Vol.0 文字組みの基礎

「テキストツールで文字を打つ」→「選択してアウトラインを作成」→「グループ解除」を行って文字を一文字ずつ動かせる状態にしていればオッケーです。


その① グラデーションをかける

グラデーションはロゴのテッパンですね。ちょっとかけるだけでそれっぽくなると思います。

①まず上の通りにベースとなる文字を準備します。ベースの色は基本的になんでも大丈夫です。

オブジェクト選択ツールで文字を選択→文字の塗りを○のついている部分を押してグラデーションにします。

グラデーションの調整はこのグラデーションパネルで行います。パネルの説明はざっくりですがこんな感じです。

③文字の塗り部分をグラデーションにし、パネルで色などの設定を行ったら、○のついているグラデーションツールでグラデーションを調整していきます。オブジェクトを選択してグラデーションをかけたい方向にマウスをドラッグしていきます。パネルから角度指定でも出来ますが、ドラッグの方がさくっと出来る気がします。そこはお好みで。

文字全体に一気に下方向からグラデーションをかけてみました。こんな感じになります。いちごチョコレートって感じの色合いになりましたね~。

全体に一気にかけるだけでなく、一文字ずつかけるとまた雰囲気が変わってきます。グラデーションツールでグラデーションをかけたい文字を選択すると黄色の○のようにバーが出てくるのでここで色の幅や向きを調整してみてください。

これだと一文字ずつチョコがかかっているみたいになって可愛いですね~。

方向を変えたり色を増やす事でグラデーションの幅は広がってくるので色々と試してみてください!


縁・影をつける

文字に縁、影をつけていきます。単体で使う事もありますが、今回は両方盛りで私がよく使う効果を例に紹介します。

①通常通り文字を用意します。漢字で書くといかついけど平仮名にするとなんかかわいい。
今回は文字を変形および解体した後は、もう一度オブジェクトをグループ化してください。

レイヤーをもう一つ作成して、1のレイヤーの下に引きます。そうしたら文字をコピーして、下のレイヤーに「同じ位置にペースト」します。
上のレイヤーは動かないようにロックをかけておきます。

③アピアランスパネルを開き、右下の「新規線を追加」で線を追加します。これで文字に肌色っぽい縁がつきました。太さや線の形状(線パネルで調整出来ます)はお好みで!

②、③を同じ手順で繰り返して更に太めの枠をつけます。白枠の予定ですが見えやすいようにとりあえず赤にしておきます。

⑤オブジェクトを選択して「効果」>「スタイライズ」>「ドロップシャドウ」を選択します。プレビューを見ながら好きなように影をつけてみてください。

太枠を白に戻して、完成です!

ドロップシャドウを使わなくても、縁を重ねるだけで色んな表現が出来ますね。「スタイライズ」には他にも役立つ効果が色々あるので試してみてください。


「グラデーション」「縁・影」の簡単なやり方2つを紹介しました。
という事で、サンプルとしていくつかロゴを作ってみました。前回の記事で作った際に気に入っていたロゴにも色をつけてみました~。

使っている効果はグラデーション、縁、ドロップシャドウ、光彩、ワープ(アーチ)のみです。
簡単な表現だけでも結構ちゃんとロゴっぽくなっているんじゃないかな?と思います。

こんな感じでお手軽ロゴ、是非作ってみてくださいね!


「文字デザインをしてみよう vol.2」ユイPがお送りいたしました。ずっとやりたかった!ようやく書く事が出来ました~。
Vol.1のタイトルロゴ風 文字デザインをしてみよう、Vol.0の文字デザインをしてみよう Vol.0 文字組みの基礎の記事と合わせてよろしくお願いします!

それでは、みなさまよいバレンタインを!また次回!


<使用させて頂いたフリーフォント>
「チェックポイント★リベンジ」
よく飛ばない鳥 / マルセ / http://marusexijaxs.web.fc2.com/
「マキナス Scrap 5」
もじワク研究 / https://moji-waku.com/index.html

<それ以外のフォント>
モリサワフォント


★ゆるーくつぶやいています デジマースブログ公式Twitter

文字の大きさと距離のレイアウト【利用シーン】

文字の大きさはディスプレイの大きさや種類、視認できる距離などに影響をうけるため、状況により変化させる必要があります。
今回はそういった利用シーンによって変化する文字レイアウトや大きさを考えます。


様々な大きさのディスプレイ

下記の様な大きさの違うデバイス向けクリエイティブを制作する場合、文字の大きさやレイアウトは同じではいけません。

理由は、デバイスによっては数メートル離れた場所から確認する利用シーンもあり、モバイルデバイスなどと同一のレイアウトでは文字の視認性が悪いからです。


「必然」と「適切」な文字サイズ

図のAとBはフィーチャーフォン向けのバナーサンプルです。

フィーチャーフォンの画面は3インチ程度と小さくさらに解像度も粗いため「文字の再現」と「可読性」を求めると、文字サイズはそれなりの大きさになってしまいます。

スマートフォンのようにきめ細かい小さな文字や画数の多い漢字の再現はできませんので、
バナー効果を上げるためにはバナーの全体を余白なく隅々まで使い、訴求を行います。

また、
Bのような文字サイズと余白を設けてしまうと、肝心の訴求文言は周辺の情報量と差異が無いため溶け込み、読まれる機会を失います。

したがって、実際によく目にしたAのような余白の無いバナーが必然と使われ効果を出しました。

次に、余白の無い表示物として、身近な電車の「車内案内表示ディスプレイ」を紹介します。

ディスプレイを見る距離は数メートル離れる状況ですが、扉上部の限られたスペースにディスプレイがあり、
扉から離れている利用者も確認できるように文字の大きさが優先され、ディスプレイ内にレイアウトの余白はなく、ぎっしりと可能な限り大きく優先度の高い文字が表示されています。

先程のAのバナーように、まわりの情報量に埋もれず、ターゲットに訴求を伝える為には、想定された利用シーン/環境での可読性がまず重要視されなければなりません。

あらためて「車内案内表示ディスプレイ」の周りに目を向けると、ディスプレイ外に適切な余白が設計されていることが分かります。

ディスプレイの中の情報表示としては文字(次の停車駅)を大きく見せる優先度で表示されてますが、
「車内案内表示ディスプレイ」自体の優先度と視認性はその周りの余白によって保たれているのです。

このような構成は、車両構造の影響とも考えられますが、色々な車両も確認してみたところ、「車内案内表示ディスプレイ」には隣接して広告物が貼りだされている構造は多くありませんでした。
もっとも、「車内案内表示ディスプレイ」内に表示ローテーションとして「PR映像」や「広告」が差し込まれているケースも増えてきておりますが。


余白が使えるスマートフォン

バナーに話を戻します。
CとDのバナーはスマートホンを想定したサンプルです。

フィーチャーフォンの3インチの画面から、4.7インチと大きな画面と倍以上のきめ細かい解像度となっています。
文字の大きさはフィーチャーフォン向けのサイズで十分な可読ができているので、なおざりになっていた「余白」を有効的に使うことができ、バナーへの目線の誘導に大きな効果を発揮しています。

Cのバナー構成は、フィーチャーフォンの環境では最適で効果を出していたのですが、スマートフォンの画面の大きさと繊細な文字表示の中では必要以上の大きさになってしまい、周辺情報量のバランスが悪く浮いてしまっています。
この状況ではCのバナー構成は利用者にネガティブな印象を与えてしまうのです。

こうして、スマートフォンの「画面の大きさ」と、紙印刷同等以上の「繊細な解像度(ppi)」を得たことで、フィーチャーフォンでは不可能であった「余白のデザイン」が表現できるようになりました。
つまりは本来あるべき「レイアウトデザイン」が、やっと出来るような環境が整ったのでした。


まとめ

クリエイティブを作る際、「キレイ」「カワイイ」「カッコいい」といった雰囲気は、最終的な表層制作をする工程で対応するもので、それを優先度高く真っ先に工程に盛り込んでしまうことは、伝わらないクリエイティブを生み出す原因となります。

ターゲット、需要、環境、状況、目的を踏まえ、
過剰にならない、利用者の利便性を考えて、
「大きさの優先度」「余白」を利用した「伝わる」設計を自身も注意していきたいものです。

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

バナー制作でおさえておきたいポイント

こんにちは。ユイPです。
最近2年使ったiPhone 7をiPhone XSに機種変更しました。画面とカメラの綺麗さにはテンションがあがりますが、まだ使いこなせている気はしません。

今回は「バナー制作の時におさえておきたいポイント」がテーマです。
以前「新米デザイナーが作る!バナーの作り方」という記事を書きましたが、あれから約10ヶ月…制作したバナーの数も10ヶ月前の時点では約300個でしたが、この記事を書いている時点で約800個まで増えました。1000個までもう少し。

前回の記事ではバナーの作り方を作業工程と共に解説していきましたが、今回はタイトルの通り、「バナー制作時におさえておきたいポイント」を解説していきたいと思います。

※前回の記事と少々書いてある事が被る部分もございます。
※またこの記事で使われているバナーは全て架空のバナーです。


バナーとは広告や宣伝などのために使われる画像の事です。
バナーの目的は主に「見た人にクリックしてもらう」事です。
掲載場所やターゲットによってデザインや訴求ポイントは変わってきますが、クリックしてもらうために「このバナーで誰に何を訴求したいのか」を考えて作っていく事が大切です。

これを踏まえて制作時のポイントを解説していきます。


1.めりはりをつける

例えばこの2つのバナーだったら、どちらの方が大事な文言がより強調されていると思いますか?
答えは下です。文字サイズの強弱や色の差がついているので「人気作品”無料”」という言葉が一番見せたい部分なんだなとわかります。
めりはりは文字サイズ、フォント、文字色などでつける事が出来ます。

掲載場所や内容によっては、文字や色のトーンが統一されたものなども使用されています。
そういったバナーは訴求力が重視されているのではなく、「雰囲気にあった」バナーである事が多いかと思われます。
広告などで使われるバナーは目を引く事が大事になってくるので、人の目に触れてほしい部分がどこかを考えて、強調する部分と控えめでいい部分、差をつけて作っていきましょう。

2.不自然な”余白”は埋める

このバナー…どうにも真ん中の文言と写真の間の余白が気になりませんか??文字や写真/絵を調整すれば埋められそう?…そんな時はどうにかして埋めてしまいましょう。

という事で文字の組み換え、写真のサイズ調整などをしてみた所、見事に埋まりました。
変な余白があるとなんだかそこに目が行きがちですし、画面も寂しくなります。文字を大きくする、組み方を変えてみる、文字間や行間の調整、画像があればその位置を調整してみる、図形や線を足してみる…など余白の埋め方は色々あります。
もちろん余白を活かしたデザインというのもありますので、埋めるのは”不自然な”余白です。

3.要素を散らばせない

人の目線は左上から始まり右下で終わる、Z型の流れのレイアウトが見やすいというのはどんな媒体にも言える事ですね。
もちろんバナーも、そういった流れを意識して自然と読みやすいように制作しています。

例えばこのバナー、要素が四方に散っているし、図形は多いし、どこが大事でどこから読めばいいのか…読めない事はないけど散らばっていてなんだか気持ち悪い…。
なので流れを意識して作ってみます。

これなら、上の情報と下の情報、混乱せずにスッと読む事が出来ると思います。要素を分散させずに、図形や線を使う時もバランスには注意しましょう。

4.困ったら位置変え・傾ける

基本の法則は守っているけれど遊び心がない。つまらない。そんな時は思い切って文字の位置を変えたり、傾けてみたりしましょう。

ちなみに傾ける時は左下から右上に向かって↗この角度で傾けた方が文章が読みやすいです!

5.表示されるサイズを考えて作る

私は普段1020×360のサイズのバナーを作る事が多いです。そのサイズを開いていると、普通にPhotoshopの画面いっぱいくらいに大きく表示されていますよね。
ここで陥りがちなのが、「スマートフォンの画面サイズで見た時に、文字がちゃんと読めるか?」という問題です。

このバナー、PCの画面では大きく見えていても、実際にサイトに掲載されたら…(スマートフォンでこのブログを読まれている方には既に見えづらいかもしれません)

こんな風に小さくなりますよね。こうなった時、このバナーの上の部分の白文字、読めますか?正直読みにく~~いですよね。
こうならないためにも、ある程度サイズが小さくなった時の事も考えて制作しましょう。
今回はこのように調整してみました。

白文字の部分に太字の効果をかけ、背景に濃い色を引いてみました。先ほどのよりは少しは見やすくなったかと思われます。

このように情報量が多いバナーだと限界もありますが、出来るだけ配慮して制作しましょう。

6.文字間・行間の設定はしっかり

文字が主役なバナーにとって、これは本当にとっても大事な事です。

文言・配置は同じでも、上のバナーよりも下のバナーの方が、読みやすいと思いませんか?文字間を調整する事で「55%OFF」の部分は更に大きく強調されていますし、緑枠の中の説明文も間を開ける事で読みやすく、無駄な余白もなくなりました。少し調整するだけで、こんなにも変わります。
文字は手動で調整してバランスを美しく整えましょう!


以上が、私がおさえておくべきだと思うポイント6つになります。

とは言え私もまだまだ勉強中で完璧ではありません。上記の内容も最初からわかっていたものではなく、色んなバナーを見て学んだり、たくさん指導して頂いて覚えたものです。
バナー作りにこれから携わる方は、色んなバナーを見て、学んで、たくさん作ってみてください!

それでは、また。
ありがとうございました。

UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】

こんにちは!ユイPです。もうすぐ梅雨ですね。
私は傘を持ち歩くのを忘れがちで、夕方から雨予報なのに傘を持ってない…なんて事がたまにあります。
そんな時いつも、(ここで私に「この傘よかったら使ってください」なんて言ってくれる素敵な男性が現れないかな~)という妄想をします。
しかし現実にそんな恋愛ゲームのイベントみたいな事起こるはずもなく…大抵小走りで帰るので家に着く頃にはびしょ濡れです。

前振りが長くなってしまいましたが、これも伏線…今回のテーマは、
UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】です。
恋愛シミュレーションゲーム(以下・乙女ゲーム)のUIにどんなものがあるのか、それぞれどんな役割をしていてどんな体験を得られるのか…分析してみたいと思います!
ちなみに冒頭の妄想からわかる通り、ユイPは普段から乙女ゲームをそこそこに嗜んでいます。


♥今回は”家庭用ゲーム機用のゲームのUI”として考えていきます。
♥”ゲームのプレイ画面”とそこに関わる機能のUIに触れていきます。
♥ゲームの形式はノベル形式のもので考えています。


基本のプレイ画面

まず、乙女ゲームの基本的なプレイ画面を確認してみましょう。

いや本当にこういうイベント現実に起きないんですか?
私の記憶と経験と乙女ゲームのサイトを巡って導き出した最適な解がこちらです。もちろんゲームによって差異はあります。
これを基本として、それぞれのパーツが何の役割を果たしているか書きだしてみます。

①人物名
台詞を話している人物の名前が表示される。主人公が喋っている時は主人公名が表示される。
②メッセージウィンドウ
台詞が表示される。台詞の表示速度は基本的に変更可能。ユーザーの好みで変える事が出来る。
ゲームによってはここの不透明度を調整出来るものもある。キャラクターを透かすか文字の読みやすさを優先するかはお好みで。
③台詞送りマーク
台詞が全文表示されると表示される。「台詞を次に送れるよ」という合図。
チカチカするアニメーションがついている事が多い。
④自動台詞送りマーク
台詞が自動送り(操作しなくても勝手に進んでいくモード)になっている時だけ表示される。自動に設定していない場合は出てこない。
画面右上に表示が出るゲームが多かった。ただ右上に日付など他の要素が表示されているゲームの場合、テキストウィンドウの横など別の場所に表示されることも。

ゲームをプレイしている際、常に画面上に表示されている最低限のパーツはこの4つが多いです。
ゲームによっては日付だったり、主人公の顔も表示されていたりするものもあります。世界観にあわせてゲームによって色々変わってきますが、あくまで「男性キャラクター」がメインなのでそれを邪魔するほど目立つ要素は配置されていないように思います。

また、これらのパーツはボタン1つで簡単に表示/非表示が出来るようになっています。(後ほど詳しく説明)

プレイ中に呼び出せる機能

常に表示されているパーツ以外にも、ゲームをプレイする際に必要な機能は他にもありますよね。セーブやロード、設定などです。

これらのメニューや機能は普段は画面上に表示されていない事が多く、それぞれ対応したボタンを押す事で呼び出す事が出来ます。
(※「MENU」が常に表示されていたり、各機能がメッセージウィンドウの下に表示されている場合などもあり)

乙女ゲームでプレイ中に呼び出す事の出来る機能は、

①「セーブ/ロード」
その名の通りセーブやロード。タイトル画面に戻るのも大体ここから。
②「クイックセーブ/クイックロード」
ボタン1つ(もしくは2つ)でセーブやロードが出来る。
③「オートON/OFF」
上記でも説明した台詞の自動再生のON/OFFが切り替えられる。
④「スキップ」
既読の部分をスキップする事が出来る。速度は自由に変えられる。
周回する事が多い乙女ゲームにおいて大事な機能。もちろん未読でもスキップは出来る。
⑤「履歴(バックログ)」
これまでの台詞の履歴を見る事が出来る。ボイス再生が出来るものが多い。
⑥「メッセージウィンドウなどの表示/非表示」
一瞬で画面上のキャラクター以外のパーツの表示/非表示が切り替えられる。
キャラクターの絵の隠れていた部分や、スチルと呼ばれる1枚絵をじっくり見るための機能です。
⑦「キャラクター/ステータス」
キャラクターのプロフィールや好感度、イベントの発生条件などを見る事が出来る。
⑧「用語解説」
ゲーム中に通常した用語の解説。難しい世界観や特殊な設定のあるゲームには必須。
⑨「タイトルに戻る」
タイトル画面に戻ることが出来ます。
⑩「オプション(設定)」
台詞の速度やキャラクターボイスの音量調整など、ゲームの各種設定が出来る。

…など、このような機能が多いです。

これがどのように各種ボタンと連動しているかというと、
例えばとあるゲームでの、ボタンと機能の関係はこのようになっていました。
※S社の某携帯ゲーム機です。

「クイックセーブ」や「履歴」「スキップ」「表示/非表示」といった即時に行いたいものはボタン1つで出来るようになっていました。
このゲーム以外にも基本ワンタッチで行いたい操作はボタン1つで呼び出せるものがほとんどでした。ストレスフリー。
セーブやロード、キャラクターのページなど画面自体が切り替わるものはメニューを呼び出して開くようになっています。

選択肢や好感度などのUI

ノベル形式なので読み進めていく事がメインですが、「ゲーム」ですのでただただイケメンとのストーリーを読んでいくだけでは話は何も発展していきません。
途中で「選択肢」というものが登場します。この選択によってルート分岐というものが行われ、ハッピーエンドかノーマルエンドかバッドエンドか…つまりは結末がわかれていきます。

選択肢は乙女ゲームにおいて運命を左右するものといっても過言ではありません。なので、どの選択肢を今自分が選択しようとしているか、見てわかりやすいように工夫されている事が多いです。(色が違う、カーソルが表示される…など)
ちなみにこの画像の選択肢の場合、真ん中の選択肢が大正解です。1番上は普通、1番下は論外ですね。

そして正解(1番好感度があがるもの)を選んだ場合、その証拠としてエフェクトが出る事が多いです。

正解が可視化される事で「よかった~合ってた~!」という安心を得る事が出来ますね。逆に出なかったり、好感度が下がるエフェクトが出ると焦ります。切羽詰っているとクイックロードで選択肢のちょっと前に戻ったりします。シビアな世界なので。
また、正解がわかる事によって「このキャラはこういう返しをされるのが好きなんだな?」と、なんとなく性格が読めてくるのでその後の選択肢も選びやすくなります。

その他、気になったゲームの工夫

これは私が今までプレイした中でユーザーに配慮されているな…と思った要素の一つなのですが、
とあるゲームで「主人公(つまりプレイヤー)」の顔の描写をON/OFFに出来るという機能がありました。
恋愛シミュレーションゲームにおいて、主人公を自分と重ねて実際に自分がキャラクターと恋愛している気分になるか、はたまた第三者の視点で主人公とキャラクターの恋愛模様を楽しむかプレイスタイルは人それぞれです。でも前者だった場合、あまりにも主人公の個性が前面に出ているとちょっと没入出来ないよ…って人がいるかもしれません。
そこで「イベントCG(1枚絵で表示されるイラストのこと)」で表示される主人公の表情をOFFにする事が出来る!という機能のついているゲームがあり、没入系プレイヤーへの配慮がされていて手が込んでいるなあと思いました。だって表情ありとなしの2パターン用意されているわけですからね…。
イベントCGの顔は消せなくとも、メッセージウィンドウ横に表示される主人公の顔をOFFに出来るゲームも多いですね。

まとめ UIが生み出す世界観

ノベル形式のゲームでは、メッセージウィンドウなどの要素はゲームをプレイしている間、常に目に入ってくるものになります。
メインはキャラクターや背景などのグラフィックかもしれませんが、UIもゲームの世界観の一部を表現しているといっても過言ではありません。私はどんなにキャラクターや背景の絵が綺麗でも、それをとりまくUIに手が込んでいなかったらなんだかテンション下がってしまいます…。
例えば幕末が舞台で新撰組隊士と戦争の中恋愛していくシリアスなお話なのに、UIがピンクでキラキラしたメタリック!だとおかしいですよね。和風のお話ならUIも和風なテクスチャを使用したり、使うフォントもゴシック体よりは明朝体とかだと世界観を壊さずにゲームをプレイする上でしっくりきます。
もちろんこれは恋愛シミュレーションゲームに限った話ではなくどんなゲームのUIにも言える事ですが、常に視界に入ってくるノベル形式の恋愛ゲームでは特に大事と言えるのではないでしょうか。

乙女ゲームがUIによってどんな世界観を生み出されているか、どれほど手が込んでいるのか、気になった方は是非乙女ゲームブランドさんのサイトを見てみてください。


以上、UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】ユイPがお送りいたしました。
この記事で例にあげたゲームが何かわかった貴方はユイPのお仲間です♥

★ユイPおすすめ乙女ゲームをツイートするかも?
デジマースブログ公式Twitter