スマホ向け抽象的デザイン

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

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

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

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


制約の中での可能性

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

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

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

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


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

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

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

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


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

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

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

でしょうか。

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


まとめ

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

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

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

マスコットキャラクターの作り方

こんにちは!
今回のテーマは「マスコットキャラクターの作り方」です。
マスコットキャラクターを作る時の考え方や制作方法などをまとめてみました。

前置きはいいから早く作り方を知りたい!と言う方はコチラ からご覧ください!


マスコットキャラクターとは

マスコットキャラクターとは何かというと、『身辺に置いて大切にする人形や、何らか団体(グループ)のシンボルとする動物などである。(マスコット-Wikipedia)』です
アプリやWEBサービスを利用する際、ゆるっとした可愛らしいキャラクターを見かけたことはありませんか?
あの子たちを、マスコットキャラクターと呼びます。
WEBに限らず、都道府県や市町村がたくさん作っている「ゆるキャラ」などもそうですね。

マスコットキャラクターを起用するメリットは、「サービス認知」です。
サービスがどのような物なのか直感的に伝えられるので、効率の良い宣伝効果があります。
テキスト情報だけの場合より瞬時に認識しやすく覚えやすくなります。何かを説明する際、文字だけで説明されるより、イラストがあるとわかりやすいですよね。

また、キャラクター自体を気に入ってもらえれば、それがサービス利用のきっかけになる場合もあります。
ゲームや漫画系のキャラ物サービスはもちろん、公共機関など真面目で堅い印象のあるサービスでも見かける事は多いかと思います。
お堅そう、難しそうと言う印象を持ってしまいがちなサービスでも、マスコットキャラクターがいることで親しみを感じてもらい、サービス利用の敷居を低く出来る効果もあります。

マスコットキャラクターについての前置きはこのくらいにして、実際に作ってみましょう!


01.サービスコンセプトを確認する

まず初めにサービスコンセプトを確認しましょう。
自分1人で考える場合でも、企画側から依頼される場合でも、コンセプトとイメージが明確になっていることが大切です。

企画側から依頼を受ける際、コンセプトやイメージがハッキリ決まっている場合は、それに合わせて提案を行って行きます。
その一方で、コンセプトは決まっていても、具体的なイメージまで決まっていないと言う場合もあるかと思います。
「可愛い感じのイメージです。」と言う抽象的な情報だけで進めるのは危険です。可愛いと一口に言っても人によって価値観は違いますし、テイストも沢山ありますよね。
企画側とデザイン側で共通のイメージが出来ていないと、いくらデザインを提案しても「イメージと違う…」となってしまい、修正や作り直しが多発するので非効率的です。
そういう時は、もっと具体的な情報を企画側に確認して下さい。
ネット検索でイメージに近い物を探すなどして、プロジェクトメンバーみんなで共有できると認識の相違が軽減できます。


02.アイディアを考える

どんなマスコットキャラクターにするか、アイディアを考えます。
いきなりラフを描いても良いのですが、テキストで箇条書きするのも良いですよ。

アイディアを考える時のポイントは、常にサービスのコンセプトやイメージを意識する事です。
これを行う事で、自然と整合性の取れたキャラクターを作ることが出来ます。

例えば、スポーツ関連のアプリのマスコットキャラクターであれば、スポーツと言う特徴から「スポーツの種類に合わせて、色々なポーズが出来ると汎用性がある」と考えられます。
この事から「手足が長い方がポーズを付けやすいな」「等身は低すぎない方がいいな」など連想する事で、デザインの方向性を決める事が出来ます。

モチーフの選択、ビジュアルやデフォルメのバランスなど、デザインを考える上でも作りやすくなります。
キャラクターありきになって迷走したり、悩んで手が止まってしまった時は、改めてコンセプトを見直してみて下さい。


03.ラフを描く

それでは実際にラフを描いていきます。
今回は例として、「求人アプリのマスコットキャラクター」を作っていきたいと思います。
あくまで一例ですので、状況によって工数など様々かと思いますので、考え方の参考にご覧ください。

企画側から下記のようなコンセプトやイメージを貰いました。

上記を元に、まずはデザインの方向性を決めます。
貰った情報から、「仕事が見つかる=目が良い、探すのが得意」「堅実=真面目、やる気、働き者」「ゆるさ」「特徴的なロゴを活かそう」と言うデザインの方向性を決めました。
そこから思いつくアイディアを沢山描いていきます。今回はポーズ違いなども含めて、約90個ほどのラフを描きました。

約90個の案の中からいくつか候補をまとめて企画側にプレゼンした所、最終候補として2つ残りました。
フクロウと蜂です。どちらのキャラクターも、先ほど決めたデザインの方向性を取り入れたデザインにしています。

候補が2つまで絞れたら、更にラフを描きます。
デザインの修正や、ポーズのパターンなどを増やしていきます。
企画側から「もっとこうして欲しい」など指示がある場合も多いかと思いますので、その要素も取り入れつつデザインを行います。

今回は「フクロウは、バイトをしている姿などのポーズ違いが見たい」「蜂は、手足の関節が生々しいのでもっとデフォルメして欲しい」と言う指示があったので、そのようにラフを描きました。

このように何度かラフを描いたり直したりして、最終的に「フクロウ」のアイディアが採用されました。


04.描き起こす

IllustratorやPhotoshopなどのソフトを使い、ラフを描き起こします。今回はIllustratorを使いました。

描き起こす段階でキャラクターのテイストを詰めていきましょう。
ラフの段階でテイストを確認してもいいのですが、その際はあくまで方向性レベルに留めて下さい。
ラフの段階でガチガチに決めても、いざ描き起こした後で「思っていたのと違う…」となる場合があるからです。
ガチガチに決めたばかりに修正がしづらかったり、最悪1から作り直しになる可能性もあります。

テイストを変えつつ、描き起こした物が下記になります。

アウトラインの正確さや左右のバランスを変えることで「ゆるさ」の強弱を付けることが出来ます。
また同じラフから描き起こした物でも、アウトラインの線の有無で異なる雰囲気にすることが出来ます。
線がハッキリしていると、見やすく力強い印象にすることが出来ます。シチュエーションや媒体を問わない汎用性の高い表現方法です。
線を薄くしたり、なくした場合は、ナチュラルで優しい印象にすることが出来ます。ナチュラル系のサービスはもちろん、難しい・怖い印象を払拭したいサービスで運用するのも有効な表現方法です。

企画側に都度確認しながら調整を行い、最終的に下記のテイストに決まりました。
決まったテイストを元に、パターンも描き起こします。

これで、マスコットキャラクターの作成は完了です!


おわりに

いかがでしたでしょうか?
難しく考えず、まずはアイディアを出すことから始めてみて下さい。
ぜひ、サービスにピッタリなマスコットキャラクターを作って下さいね!

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

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

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

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


使用するソフト

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

————————————

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

————————————

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


作成の全体の流れ

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

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

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


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

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

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

サイズはIllustrator編に合わせ、「幅」は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が開きますので、下記の図の再生マークを押すと書き出しが始まります。

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

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


おわりに

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

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

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

新米デザイナーが作る!バナーの作り方

こんにちは!あけましておめでとうございます。ユイPです。
今年もよろしくお願い致します。
私は学生の頃、年末年始は巫女さんのバイトをしていたので今年は久しぶりにゆっくりしたお正月を過ごす事が出来ました。
お正月が終わったら次のイベントはバレンタインですね!


さて、今回のテーマはズバリ!「バナー制作」です。

私がデザインチームに配属になって半年が経ちますが、この半年間での私の主な業務はバナー制作でした。これまで制作したバナーの数は約300個弱です。
そんな私がこの半年間でバナーについて学んだことを踏まえて、制作過程を解説していきたいと思います!

バナーとは、広告や宣伝のために使われる下のような画像の事です。

バナーをクリックする事で見せたいページに飛ぶ事が出来るので、主に「クリックしてもらう」事が役割となります。
表示される場所は自社サービス、もしくは他社のサービス上です。
文字のみのバナー、画像と文字を組み合わせたバナー、縦型や横型と種類やサイズも色々とあります。

掲載場所やターゲットによってバナーのデザインや訴求ポイントは大きく変わります。
種類は多々あれど、「このバナーで誰に何を伝えたいのか」まずはそこをしっかりと踏まえて制作する事が大事です。

ちなみに私がバナーを作り始めた初期のバナーは大体こんな感じでした。

作り始め感満載ですね…。

今回はこのような依頼が来たという設定で制作していきます。
————————————————————————————————
▽サイズ 1080×360
▽掲載場所:自社サイト内
▽少女漫画の特集のバナー(無料試し読みあり)
▽ターゲット:女性
▽掲載文言
【もうすぐバレンタイン!青春する準備はいい?甘い恋物語10冊無料♡】
▽イラスト素材2点(どちらを使っても両方使ってもよい)

————————————————————————————————

早速作っていきますが、まずは深く考えずにキャンバスを作成してイラストや文言を何も加工せずに配置します。

とりあえず女の子のイラストのみを使用することにして、イラストは右、文言は左側かなとざっくり配置しました。フォントも普通のゴシック体のままです。
後から加工しやすいように文言はここであらかじめ分解しておきます。
色やサイズを変えそうだな…という場所は特に細かく分解します。ちょっとめんどくさい作業ですがのちのち作りやすくなりますよ。(もうすぐ/バレンタイン!/青春/する準備はいい?/甘い/恋/物/語/が/10冊/無料/♡)
素材の画像の編集(透過作業など)があればここで行っておきます。今回使用しているイラストは自前です!

また私は実際に作品を扱うバナーの際、作り始める前に公式サイトを検索してみたりどんな内容のお話なのか軽く試し読みしてみたりしています。
作品に100%合わせる必要はないですが、どんな作品か知っておくと純粋に作りやすいです。

バナーの目的はただ見てもらう事ではありません。クリックしてもらう事です。そのためには、どこに目をつけてもらうか考えて制作していかなければなりません。まだほぼ加工してないこの状態で、文言の強調したい部分を決めていきます。

見やすく、遊び心も加えながら大体こんな感じかなと文字を置いてみました。
今回まず一番強調するべき点は「無料」だと考え、無料の文字を一番サイズを大きく目立つ位置に配置しました。
あとは何が無料なのかも伝わらなければ意味がないので無料の次に「恋物語」も強調していきたいですね。恋物語と書いてラブストーリーです。

ピンクで囲ってある部分①がメインとなる目立たせたい文言、青で囲ってある部分②がそれを修飾するサブとなる文言です。
強調したい部分が決まったらフォントや背景も決めていきます。

文言のテーマ的に背景はやっぱりピンクかな~フォントは可愛らしく落ち着いたやつがいいかな~というイメージでこのようにしてみました。
あとはやはり「恋物語」の特集だし女性がターゲットならば男の子も欲しいな?いうことでイラストの配置も少し変えてみました。

強調したい部分や大体のレイアウトも決まった所でさあ色をつけていくぞ!

…といいたい所ですがその前にまずとても大事な作業があります。
「字間の調整」という作業です。

現時点でのバナーをよく見てみると…

このピンクで○した部分や線の部分、文字が詰まりすぎていたり、広がりすぎていたり…なんとなくまとまっていないと思いませんか?
見やすいバナーにするために、ここを調整していきます。調整は使うフォントを決めてからやりましょう。
(Photoshopでの細かい調整のやり方やそもそも字間って何?という方はこちらの記事をご覧ください。→たのしい文字組み 字間を調整してみよう)

調整したものがこちらになります。
細かいですが、文字のバランスが良くなって見やすくなったと思いませんか?
同時に「青春する準備はいい?」という文言の「する」や「は」や、「恋物語が」の「が」といった接続詞のひらがなを少し小さくした事で文章にメリハリがつきました。

また文字の位置の揃えも調整しました。
文章の端っこと端っこのラインをあわせてあげるとバランスよく整います。
変則的な組み方をする場合でなければ、端っこは出来るだけ揃えておく事が大事です。

文字の調整も終わった所で、次に背景を装飾していきます。
え?文字の装飾じゃなくて背景からやるの?と思うかもしれませんが、私の場合は背景の装飾を決めてからその背景の上でも見やすい文字の装飾を行っていきます。

ピンクの色合いを少し変え、キラキラしたテクスチャを載せてみました。なぜこれにしたかというとチョコレートっぽさを感じたからです。

背景が決まったところで遂に念願の(?)文字に色をつけていきます。

まず強調したい部分から色を決めていきます。
ここが強調したい部分にはやはり濃いめの色、赤や青、オレンジ…背景が黒の時は白、など目立つ色を使っていきます。

まずこのように色を置いてみました。
このようなバナーの場合、色数は多くても3~4色程度に抑えて出来るだけごちゃつかないようにしたいです。
ただこれでは色合いも同系色でメリハリがなく、白文字も少し読みづらいですし何より面白みがないですね…。
なのでメリハリを意識しつつ、遊び心も感じられるように装飾していきます!

こんな感じになりました。
茶色の地を入れて文字を黄色にした事で目立たせたい文言が更に強調されましたし、画面に締まりが出たと思います。
何よりピンクと茶色の色合いがバレンタイン感をより強めてくれました!

ここまできたらあとはもう色味や文字、イラストの位置などレイアウトを再度確認して調整するのみです。
字が間違っていないか…文字間の調整の見落としがないか…などもここで確認してしまいましょう。

微調整が終わってしまえば晴れて…完成です!
「もうすぐバレンタイン!青春する準備はいい?甘い恋物語が10冊無料♡」バナーが完成しました。


いかがでしたでしょうか。

今回の記事ではイラストを使用し、「無料」という文言を強調させるようなバナーを制作しましたが、最初に書いた通りバナーにもたくさん種類があります。今回この記事で作成したバナーは、オシャレさというよりかは「見やすさ」や「訴求力」が重視されるバナーです。
普段私はそのようなバナーを作る事が多いのですが、最初の頃はやはりオシャレに作りたくて細めのフォントを使ったり色数を少なくしたりして作ってしまっていました…。それが悪いわけではありませんが、求められているものと遠いものを作ってしまうのはいい事ではありませんよね。

最初に書いた事の繰り返しとなってしまいますが、掲載場所やターゲットによってバナーのデザインや訴求する部分は大きく変わります。
「このバナーで誰に何を伝えたいのか」ターゲットを見据え、求められているものを作る。そこをしっかりと踏まえて作る事がバナー制作において大事な事だと思います。

私もまだまだ勉強中です。日々先輩方に助けて頂いています。
これからもたくさんバナーを作ってもっと成長していきます!

長くなってしまいましたが以上、ユイPがお送りいたしました。
皆さんもこの1か月、バレンタインに向けて美味しいチョコレートをたくさん食べてください♡

————————————————————————————————

デジマースブログ公式ツイッター・インスタグラムを開設いたしました。

★Twitter https://twitter.com/digi_design_
★Instagram https://www.instagram.com/digi_design_/

記事と合わせましてこちらもよろしくお願い致します。

パッとしないレイアウトにはメリハリを

緩めることと張ること。強めることと弱めること。(声のトーンなどを)上げることと下げること。などの強弱がはっきりしていること。を【減り張り】と呼びます。

プレゼンテーションソフトウェアでのスライド製作や、バナー制作などをしていると、どうしてもデザインが上手くまとまらない…と思うことはありませんか?
実はメリハリを意識して製作をするだけで見栄えが大きく変わります。
デザインにメリハリを付ける事でレイアウトが単調になる事を抑えることができます。また、画像や文字の要素の優先順位が明確になり、視認性、可読性を上げることができます。
では早速、デザインにおけるメリハリの出し方をいくつかご紹介いたします。

文字サイズでメリハリをつける

本文に対して小見出しや大見出しを大きくすることでメリハリがつきます。「当たり前だろ!」「私もそのぐらいやっているよ!」と思うかもしれませんが、この状態の事を専門的な用語で表現すると「ジャンプ率が高い」と呼びます。
文字におけるジャンプ率とは「本文の大きさに対する大見出しや小見出しの大きさの比率」です。このジャンプ率を意識する事でレイアウトにメリハリを出す事ができます。ジャンプ率が低い場合はメリハリが出にくくなるためホワイトスペースや色でバランスを調整します。また、ジャンプ率の調整により印象も変化します。
あなたがレイアウトに不慣れで構成に迷った場合はジャンプ率を高めに設定する事をオススメします。高めに設定した方がメリハリが強くなるため構成をまとめやすくなります。

ジャンプ率が高い状態: 元気・明るい・活発・ダイナミック・アクティブ な印象

ジャンプ率が低い状態: 高級・落ち着いた・ 優美・高尚 な印象

ホワイトスペースを活かしメリハリつける

要素の周りにホワイトスペース(余白)をとる事で「間」と「要素」というメリハリが出ます。それだけではなく、見ている人の注目する要素を限定するため、要素を目立たせる事ができます。また、スペースが大きくとられていると上品で洗練された印象になるため、ファッション系の広告やwebサイトで良く取り入れられています。
ホワイトスペースを大きく広げたシンプルなレイアウトは、バランスが悪かったりなどの粗が目立ちやすいので注意が必要です。
私が学生だった頃、先生が「間(ま)の美」を大切にしろと言っていた事を思い出しました…。

色でメリハリをつける

全体が同系色でまとめられていると落ち着きのあるレイアウトになります。そのレイアウトにあなたが物足りなさを感じた場合、どこか一ヶ所だけ色を変えてみてください、あるいは加えてみてください。メリハリが出るだけではなく目線を優先度順に自然に動かす事ができます。
複数の色をいくつも組み合わせることは、慣れていない方が行うと難しいため、差し色で1色足すぐらいがいいと思います。


色を足す場合、目立たせたいからといって大量に足す必要はありません、少量でも周りとの対比により目立たせることができます。

修正前(うわぁ…いかにもあのソフトウェアを使用した感じ…どうしよう…)
※メイリオを使用しています。

修正後(色を追加)レイアウト全体が黒で構成されているため、このように黄色が少量でもとても映え、メリハリが出ます。


さらに、ホワイトスペースを意識したレイアウトにするとこのようになります。

さらに、要素を削り(ページ分け)前述したジャンプ率・ホワイトスペースを意識したレイアウトにするこのようになります


どこかに違和感のあるしまりのないレイアウトだと感じた場合には、メリハリが出るように修正してみてください。文字のジャンプ率を変えたり、ホワイトスペースをとってみたり、色を付けてみたり…。いずれも思い切って調整をしてみると以外に良くなったりします!

(はら)

Webデザイントレンドとテクノロジー

「トレンド」と書くとポジティブで先進的なイメージですが、
「流行」と置き換えると少なからずネガティブを感じます。

今回はそんな流行り廃りもあるWebデザイントレンドとテクノロジーの関係を考えてみます。


過去のトレンドとテクノロジー

まずは、
歴史ある量産性ともなう印刷技法として、
「シルクスクリーン印刷」を紹介します。

メッシュ目の素材に特殊な薬品を使って、
インクが通過する部分をつくることで版を作ります。
プリントTシャツなど単色表現、もしくは重ね合わせによる多色構成が可能な技法ですが、
その独特な仕上がりと印刷される側の自由度が高いため、
現在も活用され、1950年代後半から、商業、ポップ・アート、
芸術作品の表現手段として用いられました。
引用元:google画像検索
アンディ・ウォーホル/ マリリン・モンロー/1967年

シルクスクリーンによる表現も当時は先進的なグラフィックデザインとして捉えられ、
数多くのポップ・アートが商用利用されておりました。

重要なのは、その表現にはテクノロジー/テクニック(技術/技法)が伴っていたことです。

コンピュータの進化により、
独特な手順と工程、器具が必要であったこれらの表現も、
コンピューター上で疑似的に再現が可能となりました。

「規則的に凹凸のある紙にクレヨンで引いた線」や、
「こすれたマットな表面ながらも鈍く光るエッジを持つスチール表現」など、
デザイナーとして本質を知らなければ組み込みの発想に至らないため、
表現理論を知ることは必要です。


画面のトレンドとテクノロジー

それでは、過去のソフトウエアなどの画面表現について確認してみましょう。

画面表現は制約の歴史です。

1980年代の「8ビット」の時代は、限られた画面解像度と色パレット制限がありました。
使える色は、光の三原色をオンオフして再現可能なわずか8色
(黒、白、赤、緑、青、黄、紫、水色)でしたが、


この時代でも技術を駆使して高見を目指し、トレンド表現を作っておりました。

代表的な表現として、
少ない色数から新たな色を認識させる「タイルペイント」技法がありました。

2色をタイル状に交互に並べることで、
遠目で見ると2色の中間色を再現しています。
間隔を調整することで濃淡も再現できます。
モニターのコントラストが低く滲んでいる方が自然に見えたりもします。
この苦肉の策の技法は、現在も
「ディザ」処理(インデックスカラー256色など、少ない色数で段階の多い素材を再現する)として使われています。


テクノロジーの違いによる表現の違い

それでは最近のWeb表現トレンドである、
「グラデーション」について比較説明します。

グラデーションはGIFやPNGなどのビットマップ画像の場合、段階表現を増やし滑らかな色変化を再現するには多くの容量を必要とするため、利用できる機会が必然的にありませんでした。

グラデーション画像を運用する為には、容量を可能な限り軽くする必要があり、結果、滑らかなグラデージョンは失われ、再現できませんでした。

現在ではアイコンをはじめ多くの表現としてグラデーションが使われていますが、可能にしたのは下記要因です。

・回線情報転送量の拡大 ※【秒間】64kバイト程度 → 数メガバイト単位
・画像表示メモリ増
・演算によるリアルタイム表示 ※従来は書き出した画像での表示

CSSやSVG[Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)]
で表示出来るようになった点もありますが、
もっとも影響が大きいのは、
画像を減色等、最適化しなくても実運用に持ち込めるようになった回線速度テクノロジーの進化の影響ではないでしょうか。


高速かつ複数コア化したCPUの恩恵

回線速度の進化と並行して強力高速になったのはプロセッサ類です。
機器の処理速度をつかさどる頭脳ですが、
一旦の高速化鈍化を迎えながらも、
複数コア化によりさらに多くの情報を処理できるようにテクノロジーが進化したため、
いわゆる「力技」が出来るようになったのも大きいと考えます。

過去の非力なCPUでは画面の描画に時間がかかり、
JavaScript等による処理も足かせになって表示ストレスを生んでいましたが、
悪い意味で、無駄が多くで扱いやすい低速プログラミング言語や不適切なマークアップでも、
そこそこに見れるものが再現出来てしまう時代になりました。

結果、
段階表現がとても多く重いメガバイトレベルのグラデーション画像でも、ストレスを感じさせないレベルで運用できる環境が出来てしまっています。

不自由を感じる状況があるとすれば、
速度制限を受けたユーザー利用シーンの場合でしょうか。


まとめ

以上のように、
過去は制約上なしえなかった表現が現在のテクノロジーでは可能となり、
リッチでマテリアル感を押し出した表現ができている、
という見方もできるのではないでしょうか。
また、
最適なマークアップやプログラミングが出来ていなくても運用できることで、
専門工程職の必要性がなくなりつつあるのも時代の流れと感じますが、
Webやアプリに関係するグラフィックデザイナーに対しては、
必然的に総合スキルを求められる時代になってきたのだと深く考えさせられました。

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

WEBページの構築/運用/注意点

今回は、弊社コーポレートWEBページのレスポンシブ化とリニューアル再構築にあたり感じたことを記事にします。


HTMLのワンソース化

今回のリニューアルではまずはじめに

「HTMLのワンソース化」

が目的として上がりました。

理由は単純で、「SP版」「PC版」と静的にソースを分けて運用する運用者の「2度手間」の改善です。
したがって、
レスポンシブ化(HTMLは複数用意せずにCSSを解像度等により出しわける)は担当者の必然として話が進みました。


レスポンシブ化のメリット

レスポンシブ化により得られたメリットはこちらです。

・ワンソースによる更新リソース減

・表示器機の画面幅解像度によるレイアウトの出し分け

・PC/SP集約によるSEO効果改善


レスポンシブ化のデメリット

それでは反対に今回の実装で感じたデメリットはこちらです。

・SPでの表示画像容量拡大
(PC版と同じ大きさの画像を扱うため/状況に応じて非表示になる画像も読み込むため)

・レイアウトの最適化が難しくそれぞれを考慮した構成が必要(縦横比率/可読性の考慮)

以上の2点です。

グラフィックデザインの視点から見ると、最適な状態の画像が使われるのではなく、
問題が出ない範囲で一つの画像が使いまわさせるネガティブを感じました。
(適応されるCSSに応じて読み込む画像も変更出来れば解決できますが…)


別手段を考えてみる

ワンソースでの運用はレスポンシブに限ったものではないはず!と他のやり方を考えたときに、
CSSの出し分けではなく、運用者が直接変更した「外部テキストファイル」をPHP等により参照、構築する、従来の方法に結局行き着きました。

この動的な構築の場合、
レイアウト変更は難しいですが、
日々の情報の更新は、データファイルを書き換えて本番環境に上書きアップすることで可能になるので、
WEB知識のない運用者でも更新が容易になります。


まとめ

CSS(スタイルシート)による運用などは、知識がある方が日々の運用する場合であれば使い勝手が良いので業務効率が良くなります。
しかし、現実に日々の運用する担当者の場合はどうでしょう。

「WEBページの運用者」 = 「利用者」

とするのであれば、
あえて先進的で効率的な構築手段を使わない設計も、状況によっては必要だと感じました。

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

デザインのコントラスト

こんにちは!今回のテーマは「デザインのコントラスト」です。
デザインのコントラストとは何なのか、意味や種類についてお話していきたいと思います!


コントラストとは

ここで言うコントラストとは、簡単に言うと「メリハリ」のことです。

コントラストと聞くと、白と黒のような色の明暗を思い浮かべる方も多いかもしれません。
それも正しいのですが、「色」だけでなく「サイズ」や「質感」にメリハリをつける事もデザインでは「コントラストを付ける」と言います。

大きい物と小さい物、複雑な形とシンプルな形など、要素と要素にメリハリをつけることで重要な場所を強調し、わかりやすくすることが出来ます。
また、視線を誘導してあげることが出来るので、見る人にとって見やすくストレスのないデザインにすることが出来ます。


コントラストの種類

サイズや質感のコントラストと言われても、少し想像し辛いかもしれません。
そこで、デザインのコントラストにはどんな種類があるのか、代表的な物をまとめてみました。


色のコントラスト

色の明暗にメリハリを付けます。
一番認知度が高くて単純な方法です。明度の低い暗い色と明度の高い明るい色の組み合わせでコントラストを付けます。
白と黒が最もコントラストの高い組み合わせになりますが、白黒に限らず、有彩色でも同じことが言えます。

例えば下の図のような、濃い緑と薄い緑の組み合わせを見てみて下さい。

左の図(A+E)のように明暗にメリハリが付いていれば、自然と濃い色の方に目が行くのではないでしょうか。
右の図(D+E)だと明度が近い為、どちらを見れば良いかわからず、視線が定まらず見辛いかと思います。

また、色のコントラストが付けられていないと、下記のような問題が発生します。

カテゴリ名と背景の明度が近く、文字が読み辛くなってしまっていますね。

このような問題を解決する為に、色のコントラストをしっかり付けてあげましょう。

色合いにメリハリが付き、文字が読みやすくなりました。


サイズのコントラスト

要素と要素のサイズにメリハリを付けます。
図形を大小で表すことはもちろん、テキストの場合も同じことが言えます。

例えば下の図を見て下さい。

1枚目の図だと、文字のサイズが全て同じなので、どこが重要なのか?カテゴリは分かれているのか?などが分かり辛いかと思います。
2枚目のように、優先度ごとに文字の大きさと太さに強弱を付けることで、注目して欲しい場所を強調して視線を誘導することが出来ます。
また、どんな項目があるのかパッと見て分かりやすくすることが出来ます。


面積のコントラスト

面積の大きさでメリハリを付けます。

シンプルな例だと上の図のように、要素(色や形など)の条件は同じでも、面積が大きい方が強調されます。

ただ、単純に面積が大きければ目立つと言う訳ではありません。逆のパターンもあり、面積が小さい方が強調される場合もあります。
例えば下のような図です。

背景の面積に対して、あえてテキストの面積は小さくすることで、目を引く印象的なデザインにすることが出来ます。


質感のコントラスト

質感の差異でメリハリを付けます。
よく見掛けるいくつかの例を挙げてみます。

複雑な物とシンプルな物の組み合わせや、クリアな物とぼかした物など、注目して欲しい要素に目が行くように強弱を付けます。
派手な柄のシャツと派手な柄のパンツの組み合わせだと、どこを見たらいいのか分からなかったり、目が疲れたりしますよね。(あえてそう言う組み合わせをする場合もありますが…)
自然と目に入ってくるような、調和の取れたコントラストを作ることが出来ます。


おわりに

コントラストは「メリハリ」が大事です。
コントラストを付ける際は、消極的にならずに思い切って強弱を付けてみましょう。
ちょっと強弱を付けただけでは却って分かり辛くなってしまうこともあります。
ちょっとやり過ぎかな?となったら、その際はデザインの引き算をしてあげれば大丈夫です!

しっかりメリハリを付けて、見やすくわかりやすいデザインを作ってみましょう!

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

押せる画像・ボタンについて考えてみる

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

▼押せる画像・ボタン①

サイト内で画像やボタンを押す際に分かり辛くて、踏みとどまったり、探したりしたことはありませんか?
さて今回はそんな画像やボタンをどうしたらユーザーへ認識してもらいやすくなるか、改めて考えていきたいと思います。

上記のワンちゃんの画像をみて「押せる」と直感的に感じた方は少ないのではないでしょうか。
上記の画像は見出しの写真かと思いつつも、さりげなく押してみたら先へ進む事ができたというパターンになりやすい一例です。

とにかく押せるかどうかはちょっと分かり辛いですね。
それでは、この画像をどうしたら「押せる」と直感的に認識、感じることができるのでしょうか?考えていきたいと思います。

画面横いっぱいに画像を置いてしまっている為、上下にある帯(※コンテンツ帯)と同じく押せない領域と見えてしまいがちです。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすく、この場合コンテンツ帯との押せる・押せないメリハリもついて分かりやすい。

■一目で押せると分かる様にする。
・?マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸で表現する等。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼押せる画像・ボタン②

サイト上部右上にもっと見るボタンが有るのがお分かりでしょうか。
文字が小さく見辛い点とそもそも帯上でのテキストの羅列ですので、「押せる」と認識するのに少々時間がかかってしまう気がします。
サイト運営側で意図してこの表現または優先度にしている場合を除き、このままですとユーザーが見落とす可能性が高くなってしまいますよね。
それでは見落としが無い様にするにはどうしたらよいか考えていきたいと思います。

・帯上にあるテキストの羅列ですので、「押せる」と認識がし辛い。
・文字が小さく視認性が悪い。

■視認性アップ(図A)
・単純に文字の視認性を上げて、見やすくする。
右側のの帯タイトルより大きくなると不自然になってしまうので注意が必要です。

■見やすく図形化させる(図B)
・四角いボタンにすることで「押せる」イメージをわきやすくさせる。

■目線の流れで見える位置に移動(図C)
・もっと見るを帯状ではなく、ダウンロードボタンの下などのコンテンツ内容内に置くことで自然と目に入る訴求にする。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼押せる画像・ボタン③

上記の画像、押せる画像なのですが一見「押せる」という認識よりも押せない画像に見えてしまいます。

押せるようなイメージがないから、といってしまえばそれまでなのですがそれ以上に注意しなければならないことがあります。
早速ですが見ていきましょう。

・(一応左右に空白スペースがあり帯との差別化はできているが)画像がファーストビューに収まりきれておらずスクロールしないと全体像がみえない。
・押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい。

■画像を適度なサイズにする
・押せる画像を最低限ファーストビューに収まる様、調整をする。
一目で押せると判断できるとなるとこのサイズ感でも少々大きめなので、ファーストビューの2/3以下にまとめると良いと思います。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼最後に

デザイン案を考える際に押せるものの表現をどの様なものにするか等も内容と同じくらい細かく設定するとユーザーに
伝わりやすいサイトになるのではないでしょうか。
ex)角丸にする、左右に余白を置く、遷移マークを入れる等

遷移させる画像やボタン等が分かり辛く、それらの箇所で回遊が停滞してしまうのは致命的といっても過言ではございません。
ユーザーがスムーズに回遊できるよう改めて遷移させる画像やボタンの見直しをしてみるのも良いかもしれません。

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

 

UIと配色


配色とは、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)を使用することは間違いではありません。レイアウトの表現上必要になることもあります。ただ、使用する際にはグレーにする事も検討してみてください、少し黒を押さえるだけでも印象は変わります。


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