Appleが推奨するアイコンの表現

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

今回は初めに、iOSでのアイコンに関する軽いクイズから入ろうと思います。
アプリを使っているとタブバーなどに配置されているアイコンをタップすると、アクティブ時・非アクティブ時での見た目が切り替わりますよね?
ここでクイズです!

アクティブ時・非アクティブ時での見た目を切り替える表現として、Appleが発行している【Human Interface Guidelines】で推奨しているのはどちらでしょう?

【A】:アクティブ時は塗り・非アクティブ時は線のテイストに変わる
【B】:アクティブ時も非アクティブ時も塗りで色の変化のみで表現する

アンケート_お気に入り

決まりましたか?正解は…

続きを読む

CSSで簡単な三角形を作るコツ!

triangle-css-cover2

皆さん

技術担当のレミです。

CSSで、どうやって正方形が作れるのだろうか?

> それは、簡単ですよ!あらゆるHTMLエレメントは正方形・長方形が基本ですから。。

ただし、三角形はどうでしょう?

あなたならそれをどうやってそれをCSSで実現しますか?

この記事では、CSSで簡単に三角形を作るためのコツを教えます。

続きを読む

美しいUDフォント

マツキヨです。

とあるきっかけでUDフォントについて学んでみました。
ET2017(組込み総合機器展)で実施したアンケート調査もその一環です。

「UDフォントの可読性」
今まで、組込み機器の画面デザインでクライアントからフォントの助言を求められると次のように回答していました。
「きちんと購入費が計上できるならUDフォントを使うとよいですよ」
「費用はイワタ、モリサワ、モトヤ、フォントワークス…フォント販売各社にお問い合わせしてください」
「購入費を確保できない場合は、無償のIPAフォントというのがあるので調べてください」
そして、深く考えずに「できるだけUDフォントにすべきです」と進言していました。

続きを読む

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

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

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

「にじみ」とは 

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

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

 

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

続きを読む

アイコンタッチについて

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

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

top

 

 

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

続きを読む

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