「にじみ」のないアイコンの作り方

こんにちは。フェノメナエンターテインメント・デザインチームの新人、トウミヤです。

皆さんは「見やすいアイコンの条件」というと、どのような条件を思い浮かべるでしょうか。
「視認性の高い配色になっている」「画面のサイズに対して適切な大きさになっている」…これらももちろん重要な条件ですが、私は「にじんでおらず、はっきりしている」という条件も挙げられると考えています。

「にじみ」とは 

ここでは100%表示の時点で図形がクリアに見えておらず、少しぼやけている状態のことを指しています。
「にじみ」は画面全体を囲む線など、大きなデザインの場合は影響は少ないですが、アイコンなど小さなデザインの場合は影響は大きく、クオリティの高低に繋がります。
また、アイコンに「にじみ」が多いと、ユーザーにとってやや認識しづらいアイコンになってしまうので、UXの質に影響を及ぼすことも考えられます。

img1 左がにじんでいるアイコン、右がにじんでいないアイコン

 

では、「にじみ」のないアイコンはどのように作れるのか。
以下で私なりの手順を紹介します。

続きを読む

アイコンタッチについて

フェノメナエンターテインメント デザインチームのニキです。

今回はアイコンタッチについてです。

top

 

 

アイコンタッチとはアイコンのテイストのことです。
大量にアイコンを作成する場合にアイコンタッチを決めると、土台となるルールが決まるのでスムーズに作業が進むと思います。
決めておくことは様々あると思いますが、私が特に重要だと思っていることが2つあります。

続きを読む

Windowsフォームにおけるフォント指定

こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。

Windows 8.1から「游書体」が標準搭載されるようになり、自宅でもオフィスでもWindows 10環境の私などは、メイリオ (Meiryo UI) よりも游ゴシック (Yu Gothic UI) を見ている時間の方が多くなりました。
どちらの方が綺麗に見えるか?というのは、今もって意見が分かれるところですが、新しいOSで游ゴシックがシステムフォントに採用されている状況を考えると、否が応にもそれに合わせていかざるを得ない気はしています。

 Photoshop CC 2017のウィンドウ

続きを読む

色覚対応について

こんにちは。
フェノメナエンターテインメント デザインチームのニキです。

今回は色覚対応についてです。
人は視細胞の錐体と呼ばれる部分で色を認識しています。

錐体は光の三原色である『』を認識する錐体、『』を認識する錐体、『』を認識する錐体の3種類に分かれています。
なので、色を判別する際には3種類の錐体それぞれが機能しているのですが、このどれかの錐体が欠けていたり十分に機能していないと実際の色と自分自身が見ている色に差ができてしまいます。
この状態を『色覚異常』と言います。
 
先天性の色覚異常は日本人男性で20人に1人、日本人女性で500人に1人と言われています。この割合で考えると数百人規模の学校などに必ずいるという計算になります。 続きを読む

Photoshop CC以降のテキストにおける「アンチエイリアスの種類」

こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。

WindowsやMacアプリケーションの画面デザインを行う場合、システムフォントを使うのであれば、Windowsならメイリオや游ゴシック、Macならヒラギノ角ゴやSan Francisco等を用いることになると思います。
しかし、Photoshopでこれらのフォントを選択してテキストを配置してみても、どうも実際のWindowsやMacで使われているフォントとは微妙に違って見えたりします。
人によっては気にならないかもしれないぐらいの違いですが、実際のアプリを想定して忠実に画面デザインを行おうとする際、またWindowsの標準的なUIで構築された画面をデザインしようとする際などには、この微妙な違いが「変な胡散臭さ」に繋がってしまったりすることもあります。

img01

続きを読む

リキッドデザイン必須? Android7の解像度変更機能追加

フェノメナエンターテインメントの「おっちゃん」です。

Android7向けにアプリケーション画面を作成する場合、気をつけなければならない追加機能について書きたいと思います。

Android7では、表示解像度をユーザーが変更できる機能が追加され、これにより同じ画面サイズでも表示できる情報量が変化するようになりました。
さらに文字サイズの変更機能も残っているので、最小文字+最大解像度、最大文字+最小解像度では、表示量にかなりの違いがでてきます。

下図はNEXUS5Xでの具体的な例です。

文字サイズ_解像度

続きを読む

わかりやすいアイコンとは

こんにちは。
フェノメナエンターテインメント デザインチームのニキです。

 今回はアイコンについてお話します。
パソコンやスマートフォンを使っていると、大小様々なアイコンを見ると思います。
そのアイコンを作る際に私は悩まされています。
アイコンは、どのような機能が使えるのかを表しているので、アプリなどを使っていて「このアイコンはどのような機能を表しているのだろうか?」となっては、困るのです。
私がアイコンを作る際に、このデザインでどのような機能が使えるのかを本当に分かりやすく表せているだろうか…と悩むのもそのような理由があるからです。
なので、アイコンをデザインする側がどのような機能なのかをしっかりと理解してモチーフを検討することが大切なのです。
悩むべきポイントは色々ありますが今回はモチーフをメインにお話ししていきます。

  続きを読む

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社