色味で変わる!人に与える印象

Pocket

こんにちは!はじめまして。デザインチームのニューフェイス、ユイPです。
今回のテーマは「色味が人に与える印象」です。
ということで早速始めていきたいと思います!よろしくお願いします!


はじめに

「色」というのは私たちの生活の中でとても大事なものです。
着る服の色で人の印象が変わったり、食べ物そのものの色の組み合わせや色使いで美味しく見えたり見えなかったり…。
複数の色の合わせ、色の鮮やかさ・明るさ(彩度や明度と呼ばれるもの)でも印象は変わります。

Webや紙媒体のデザインなどにおいて写真や画像はとても重要です。
それらに使用されている写真で補正がされていないのものはほとんどないといっても過言ではありません。
写真の補正の中の一つに「色味」の加工というものがあります。

今回はそんな「色味」加工をした際に、それぞれの色味がどんな印象を与えるかを紹介していきたいと思います!
普段みなさんがSNSに載せる写真の加工などにも応用出来ること間違いなしです★


色味が与える印象《7パターン紹介》

———————————————————————————–
加工のやり方の解説ではございませんのでご了承ください。
撮影に使った筆者のスマートフォンはiPhone7です。
———————————————————————————–

ということで薔薇の写真を使って7パターンの色味の加工を紹介してみました!


色味が与える印象《実践》

それではこれまでを踏まえた上で…
我々の生活に身近であるSNSの投稿をテーマに、
“同じ文章でも写真が違うと見る相手にどんな印象を与えるのか”
例として挙げてみたいと思います。

使用するのはこちらの写真です!

この写真を 彩度高め・彩度低め・白黒 の3枚に加工し、
同じ「思い出の鎌倉」という文章をつけてみます。

わかりやすく実際にSNSの投稿風にしてみました!
(アカウントは実在しません)

いかかでしょう。
このように同じ写真・同じ文章でも、写真の色味によって印象が変わる事がわかって頂けたでしょうか。
(あくまで極端な例です)


色味が与える印象《+α》

ここからは様々な種類の写真に、色々な加工をしてみた例を載せていきます。


最後に

写真や画像が使われているWebページを開いた場合、それらは文章よりも先に目に止まる事が多いと思います。
その際に写真の色味が違うだけで、見る人がそのページにもつ印象はとても変わります。

ただ撮った写真が暗かったから明るくしてみる、
色が薄かったから彩度をあげてみる、
ピンクが好きだからピンク色の加工をする…。
もちろんそれも悪いことではありません。

ですがそんな気持ちだけでなく、相手にどんな印象を持たせたいか、いい印象はもちろんわざと誤解されるような印象でも…。
色々考えてみて加工してみるのも楽しいかもしれませんよ♪

以上、デジマースのユイPがお送りしました。
みなさんクリスマスやお正月といった年末年始のイベントを楽しんでください★よいお年を!

Pocket

2016-2017 ブログまとめテスト

Pocket

こんにちは、はらです。私の年内最後の更新となります。
今回は2016-2017年のデジマースブログの中からUIに関してクイズ形式でいくつか出題したいと思います。
どの問題もデジマースブログを毎週チェックしている方ならわかるはずです!?
※解答はページ下部に記載しています。
 


 
(15点)

1)カテゴリ検索時に、カテゴリ内の検索数を表示する機能をなんと呼びますか?

解答・解説をすぐ見る>

(各5点)
コントロール系部品の名称についてお答えください

解答・解説をすぐ見る>

(各5点)
コントロール系部品の名称についてお答えください

解答・解説をすぐ見る>

(20点)

1)図のような実際の画面を利用し、直接ボタンの意味や操作手順などを説明する見せ方をなんと呼びますか?

解答・解説をすぐ見る>

(20点)

1)UIの手法の1つで、仕様説明を初回起動時に行うことをなんと呼びますか?

解答・解説をすぐ見る>

(5点)

1)図のような複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWebコンポーネントの事をなんと呼びますか?

解答・解説をすぐ見る>

いかがでしたが?難しい問題が多かったと思いますので、点数が低くても気にする必要はありません。これらの情報は知っておくとミーティングがスムーズに進むのでUIに関わる方は知っておいて損ではないと思います。ではまた来年に…はらでした。


解答はコチラ

【1】15点
1)ファセットカウント

【2】各5点
1)セグメンテッドコントロール
2)スライダ
3)アクティビティインジケータ
4)ピッカー

【3】各5点
1)ステッパー
2)ページコントロール
3)ラジオボタン
4)スイッチ

【4】20点
1)コーチマーク

【5】20点
1)ウォークスルー

【6】5点
1)カルーセル

Pocket

簡単!合成した画像を自然に馴染ませる方法

Pocket

こんにちは!今回のテーマは「簡単!合成した画像を馴染ませる方法」です。
簡単な合成は出来るけど違和感が出てしまう…とお悩みの方向けに、合成のちょっとしたテクニックをご紹介したいと思います!

今回ご紹介する小技を使えば、WEB系のサイトなど、ネットでよく見るこんな画像が作れるようになります。

作業環境は下記の通りです。

—————————-

■ Photoshop CC 2018
■ Windows7

—————————-


重ねただけでは自然な合成は出来ない

画像の合成をする時は、ただ重ねただけでは自然な合成は出来ません。
使用する画像によって明るさや色合いが違ったり、境界線が馴染んでいない為、違和感を感じてしまうからです。

例えば、今回の合成に使うこちらの2つの画像を見て下さい。

2つとも撮影条件が違う為、まったく異なるトーンの画像になっています。
これらの画像を、何の調整もせず切り取って重ねただけだと下の図のようになります。


これだと違和感がありますよね。

使用している画像についてですが、画像Aは自分でササッと撮影した物で、画像Bは素材サイトでダウンロードした物です。
簡易的な撮影や素材サイトを利用して画像素材を集めるのは、低コストで任意の画像を作りたい時によくある状況かと思います。
ですが、画像の撮影条件が大きく異なってしまう為、明るさ・色合い・影・接地面・境界線の差異や矛盾が目立ち、合成した時の違和感が強くなってしまいます。

こうならないように、基本的な明るさの調整はもちろん、色合いや境界線など細かい調整を行う必要があります。


合成した画像を自然に馴染ませる

それでは、合成した画像を馴染ませていきたいと思います!
※合成のやり方を詳しく知りたい!と言う方は、ぜひこちらの記事もご覧ください!


01.雰囲気の方向性を決める

まずは、完成した時の雰囲気の方向性を決めます。
明るい、暗い、楽しい、怖い、など決めることで、これから画像を馴染ませていく時の指針となります。
今回は、暗い雰囲気の現状から『明るく温もり』のある画像になるよう調整していきたいと思います。


02.トーンをフラットにする

画像Aと画像Bのトーンをフラットにします。
「フラットにする」とは何かと言いますと、画像の明るさや色合いを統一することです。
合成する画像はそれぞれ、明るかったり暗かったり異なるトーンを持っています。ここを統一することで、編集がしやすくなり、自然に馴染んだ合成をすることが出来ます。

いきなり完成形を作ろうとして、明るさや色合いを変えてもなかなか上手くいきません。
まずはトーンの土台を作ることを意識して下さい。しっかり土台が出来てから、肉付けしていきましょう。

それでは実践に入りますが、色合いや光源の基準となる画像を決め、その画像から調整を行います。基準にした画像を元に、他の素材も色合いの調整を行うと進めやすいです。
今回は背景となる画像Bを基準にして、調整を進めたいと思います。

画像Bに調整レイヤーの「トーンカーブ」を適用します。
元画像の赤みが強かったので、チャンネルのグリーンで少し黄色を強調してバランスを整えました。また、チャンネルのRGBで全体の明るさを整えました。

次に、画像Aにも調整レイヤーの「トーンカーブ」を適用します。
すでに調整済みの画像Bと見比べながら、明るさや色合いのバランスを合わせていきます。
元画像が暗かったので、明るくなるよう調整を行いました。

また、画像Aのスマホ部分がまだ暗いので、明るくなるように調整します。
新規レイヤーを作りスマホの形に添ってマスクを掛けて下さい。
マスクが掛けられたらブラシツールを選択し、カラーを白に設定して全体を塗り潰します。キッチリ塗り潰すより、荒めに塗ると自然な仕上がりになります。
次に、レイヤーの描画モードをオーバーレイにします。更に、バランスを見ながらレイヤーの不透明度を下げます。今回は20%に設定しました。

最初と比べると、画像Aと画像Bのトーンが馴染んできたのではないでしょうか!


03.トーンを調整する

トーンをフラットに出来たら、最初に決めた雰囲気になるようにトーンを更に調整します。
まず、レイヤー全体に調整レイヤーで「トーンカーブ」を適用します。
『明るく温もり』のあるトーンにしたいので、暖色が強調されるようにトーンカーブを調整します。

いかがでしょうか?
『明るく温もり』のある画像になってきたかと思います。


04.最終調整を行う。

完成へ向けて最終調整をしましょう。
何をするかと言いますと、注目して欲しい部分を際立たせたり、より自然な見た目になるように境界線や接地面を馴染ませたりします。

例の画像で言うと、スマホの画面が1番見て欲しい部分なのですが、今のままだと馴染みすぎていて内容がわからなくなってしまっています。
ですので、上から解像度の高い綺麗なスクリーンショットを重ねて見やすくしたいと思います。

まずは図形ツールを使い、スマホの画面の大きさに合わせて下地となる黒い長方形を配置します。細かい角度はパス選択ツールで整えて下さい。
更に、その上からスクリーンショットを重ねます。前述の黒い下地より一回り小さくなるように、自由変形で形を整えます。
スクリーンショットのレイヤーの不透明度を少し下げると自然な仕上がりになります。今回は96%にしています。

最後に、より自然に馴染ませる為の調整をします。
画像Bのレイヤーをコピーして描画モードを「オーバーレイ」にします。レイヤーのタイトルをオーバーレイに変えます。
次に、バランスを見ながらオーバーレイのレイヤーの不透明度を下げていきます。画像にもよりますが、10%~20%くらいが良いと思います。

ここまで来たら、オーバーレイのレイヤーを全てのレイヤーの上部に配置します。最上部かそれに近いところに置いてください。
今回は、スクリーンショットの色合いを変えたくなかったので、スクリーンショットの下に配置しました。
更に、オーバーレイのレイヤーに調整レイヤーで「色相・彩度」を適用します。色合いが黄色い暖色になるよう調整します。

このように、作成したレイヤー全体に色を重ねることで、統一感を増すことが出来ます。また、合成した境界線が馴染むので、より自然な見た目にすることが出来ます。

これで作業は完了です!
こうして出来た合成画像がこちらです!

最初の画像と比べてみると、明るく温もりのある、自然に馴染んだ画像になったのではないでしょうか。


おわりに

いかがでしたでしょうか?
ザックリ合成するのは簡単かもしれませんが、それを自然に綺麗に見せる為には手間と工夫が必要です。
コツは、丁寧に作業することです。やればやるほど自然な仕上がりになりますので、ぜひ試してみて下さい!

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

Pocket

簡単!SNSで使えるスタンプ画像の作り方!★無料プレゼント付クリスマスver★

Pocket

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

▼クリスマススタンプ画像

ひと月後にはクリスマスがやってきますね~…
せっかくなので何かできれば―――と考えた結果、皆様にご使用いただけるような「SNSなどで使えるのスタンプ画像」を作ってみることにしました!
下のイラストが今回の完成図です。

こちらは簡単に作れますので、簡単な作成の流れをゆるっとかいてみたいと思います。

▼スタンプ画像作成の流れ

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

—————————————————————-
★作成環境:IllustratorCC2017
★動作確認:Windows7
★イラスト作成:IllustratorCC2017+ペンタブ
※所要時間は内容によりけりですが、のんびり半日もあれば
—————————————————————-

【1】方向性を簡単に決めます。
クリスマス/男女選ばず
【2】大まかにどれくらいの量を作成するか決めます。
今回は気軽に作れてちょっとバラエティも加えたかったので6点にしました!
【3】点数を決めたらスタンプ画像に盛り込む言葉などを考え、絞り込みましょう。

少しばかりおふざけも入っていますがバラエティ系も加えたかったのでこの6点に決めました!

【4】言葉が決まりましたらイラストの作成開始です。
ざっくり下書きしたものをスキャンしました。

【5】Photoshopの新規作成でファイルを開きます。
スタンプ画像なので250px×250pxサイズ位が丁度良さそうです。
【6】今回、線画や色味はペンタブで行いました。
(イラレのパスで作成するのも有りですね!)

【7】出来ましたらPNGで書き出しをして完了です。

▼プレゼント

上記でも記載しておりましたが、今回作成致しましたスタンプ画像6点を無料プレゼントさせて頂きます♪
もし1つでも気に入って頂けたら幸いです!

   

   

   

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!
(次更新はお正月版スタンプ画像を更新できたらと考えております!)

 

 

Pocket

WEBページ構築と運用者

Pocket

今回は、弊社コーポレートページのリニューアルにあたり感じたことを記事にします。


HTMLのワンソース化

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

「HTMLのワンソース化」

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

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


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

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

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

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

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


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

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

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

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

以上の2点です。

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


別手段を考えてみる

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

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


まとめ

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

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

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

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

Pocket

PhotoShopチュートリアル テキストエフェクト-炎編-

Pocket

こんにちは。以前の記事でテキストエフェクトの「氷」をご紹介いたしました。はらです。
今回は第二弾としてTOP画像の「炎」エフェクトの制作方法をご紹介していきます!
また、このエフェクトはブログ用にオリジナルで考えたエフェクトなのでここでしか見れません!

※制作時間は15~30分程です。
※PhotoShopのバージョンはCC2018です。
※作業環境はWindowsです。今回はショートカットの紹介は行いません。

_______________________________________________________

●PhotoShop上部メニューバーより/「新規」→数値を入力(下記画像参照)→「作成」
●「レイヤー1」を非選択の状態で(選択していても仕上がりには影響しません)「レイヤー」パネル下部のアイコンから「ベタ塗り」を選択→カラーピッカーダイアログで「♯000000」と入力
(ベタの色は暗めの色であれば何色でも構わないのですが、今回は「♯000000」に設定)

●「横書き文字ツール」を使用しテキストレイヤーを製作。その後「あつあつ」と入力。(フォントは太めのフォントであればどのようなものでも構いません)文字サイズは220px前後にする事をオススメします。また、文字間は気持ち広めにしてください。

●文字色を「231209」に設定

●完全に一致させる必要はありませんが、今回の文字設定はこちらです

●「あつあつ」レイヤーのサムネイル・レイヤー名以外の場所をダブルクリックし、「レイヤースタイル」ウインドウを開きます

「ベベルとエンボス」にチェックを入れ下記設定に

コピー用文字:「♯511900」「♯210000」

●「シャドウ(内側)」にチェックを入れ下記設定に

コピー用文字:「♯ff1e00」

●「光彩(外側)」にチェックを入れ下記設定に

コピー用文字:「♯ff8400」

●「ドロップシャドウ」にチェックを入れ下記設定に

コピー用文字:「♯ff1e00」

●文字の効果の設定はこれで完了です

●背面の炎を作成
「レイヤー」パネル下部のアイコンから「新規レイヤーを作成」を選択し
レイヤー名を「炎1」に変更

●「パス」パネル下部のアイコンから「新規パスを製作」を選択し
「パス1」を作成

●パス1を選択した状態でペンツールを使用しパス1内にパスを製作
パスはテキスト上部の要素の下部(下記画像参照)に引きます(だいたいで構いません)

●パスコンポーネント選択ツールを使用し、引いたパスを下に下げます。
下げる目安は使用しているフォントの線幅の半分ほどです(大体で構いません)

●「炎1」レイヤーと「パス 1」を選択した状態で「フィルター」→「描画」→「炎」を選択

●下記設定に変更し「OK」

●「炎1」レイヤーを「あつあつ」レイヤーの下へ移動

●「炎1」レイヤーを選択し「レイヤー」パネル下部のアイコンから「レイヤーマスクを追加」をクリック【★1】

●ブラシ設定パネルからソフト円ブラシを選択し設定を下記画像に変更【★2】

●「炎1」に追加したレイヤーマスクを選択【★3】

●「炎1」レイヤーの炎画像内で不要な部分を「描画色を黒」にしたブラシツールで描画して隠します【★4】
※不要な部分とはあつあつの文字にかからない炎の束の部分です(書き画像参照)

●さらに炎の量を減らします
炎の束を4~5ほどにします(フォントの一番高い所を一番長めに残すとそれっぽく見えます)

これで背面の炎の製作は終わりです。

●前面上部の炎を作成します
「レイヤー」パネル下部のアイコンから「新規レイヤーを作成」を選択しレイヤーを作成。レイヤー名を「炎2」に変更

●「パス」パネル下部のアイコンから「新規パスを製作」を選択し
「パス2」を作成

●パス2を選択した状態でパスツールを使用しパス2内にパスを製作
(パスはあつあつの文字の上部の要素の中央に引きます(下記画像参照。また、だいたいで構いません))

●パスコンポーネント選択ツールを使用し、引いたパスを下に下げます。
使用しているフォントの線幅分下げてください(大体で構いません)

●「炎2」レイヤーとパス2を選択した状態で「フィルター」→「描画」→「炎」を選択

●設定を下記設定に変更し「OK」

●レイヤーの順序を画像のように整えます。その後表示を変更します

●「炎2」レイヤーを【★1】~【★4】の方法で不要な炎を削ります
※このステップでの不要な部分とは“文字の上部の要素”の“左右以外”の場所となります。

●お好みで炎の量を増やします(今回は炎の束を各文字2~4程度にしました)

●炎1レイヤーを表示させます

●これで前面上部(炎2)の製作は終わりです。

●続いて炎前面下部の製作を行います
先ほどと同様の手順で「炎3」レイヤー(マスク付き)とパス3を制作します。

●レイヤー構成と表示・非表示を下記画像と揃えます

●パス3を選択した状態でパスツールを使用しパス 3内に
パスを製作
(パスはあつあつの文字の下部に添う形で引きます(下記画像参照。大体で構いません))

●パスコンポーネント選択ツールを使用し、パスを下に下げます。
下げる目安は使用しているフォントの線幅分です(大体で構いません)

●「炎3」レイヤーと「パス3」を選択した状態で「フィルター」→「描画」→「炎」を選択
設定を下記設定に変更し「OK」

●炎が描画されました

●「指先ツール」を選択、ブラシを「ハード円ブラシ」に変更し下記設定にします

●炎の下部を指先ツールで下から上へドラッグし持ち上げます。
これにより炎が燃えている対象の下から巻き上がったように見せる事ができます

●指先ツールで炎画像下部を修正しました

指先ツールによる修正が終わりました

●「炎3」レイヤーを【★1】~【★4】の方法を使用し不要な炎を削ります
※炎の束を5~6ぐらいにするイメージで削ります
※ブラシサイズを50px程にするといいかもしれません

●非表示にしていたレイヤーを全て表示すると完成となります。

以上となります。
また、アレンジ次第でさらに雰囲気を変えることができます。

徐々に寒くなるこの季節…このエフェクトを使用して暖かい気持ちになってみてはいかがでしょうか。はらでした。

Pocket

デザインのコントラスト

Pocket

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


コントラストとは

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

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

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


コントラストの種類

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


色のコントラスト

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

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

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

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

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

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

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


サイズのコントラスト

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

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

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


面積のコントラスト

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

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

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

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


質感のコントラスト

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

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


おわりに

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

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

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

Pocket

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

Pocket

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

▼押せる画像・ボタン①

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

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

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

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

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

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

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

▼押せる画像・ボタン②

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

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

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

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

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

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

▼押せる画像・ボタン③

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

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

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

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

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

▼最後に

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

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

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

 

Pocket

抽象のメリットと必然性

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