色覚対応について

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

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

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

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

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

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

img01

続きを読む

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

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

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

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

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

文字サイズ_解像度

続きを読む

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

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

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

  続きを読む

異なる解像度を持つiPhone端末への対応

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

iPhone 6とiPhone 6 Plusが発売されたことにより、iPhoneアプリの世界にもバリアブル化の波が押し寄せてから1年半が経とうとしています。
iOSでは異なる解像度を持つデバイス間でも、同じ要素は同じ物理サイズで表示されるように設計されていて(注1)、例えばiPhone 5で1cmの大きさで表示されているものは、画面が大きくなったiPhone 6 / 6 Plusでも1cmで表示されます。配置する要素のサイズは同じですが、配置するフィールドの大きさは異なっているので、1画面の中に表示出来る要素の数が変化しているということでもあります。

iPhone 5でも画面サイズの変更が発生していましたが、縦方向のみだったため、アプリの性格によってはそれほど大きな影響を受けずに済んでいた場合もありました。しかし、iPhone 6 / 6 Plusでは横方向の解像度も拡張されたため、これまでは影響が少なかったアプリでも新たに調整が必要となるケースが多々起きています。

タイトル画像

続きを読む

Androidアプリ「Android 標準UI見本」 リリースのご案内

FeatureGraphic

フェノメナエンターテインメントです。

今回のブログは、9月6日にリリースしたAndroidアプリケーション「Android標準UI見本」のご案内です。

Store_S_App_Icon
このアプリは、Google社製の開発環境やライブラリに用意されているUIオブジェクトを可能な限りデフォルトの状態で表示することを目的に作成されています。
アプリの企画や設計時に「このパーツはデフォルトでどんな色だっけ?」「バージョンの違う端末で表示が変わるんだっけ?」などと疑問が出たときの参考としてご利用ください。
開発時のデフォルト状態であるテーマ「AppCompat」で作成されていますので、Android4.2以降のAndroid端末で動作します。複数の端末で動作させることによりバージョン間の表示を比較できます。

 

画面
ブランドカラーも開発デフォルトのprimaryColor, colorPrimaryDark, colorAccentが設定されていますが、オプションメニューから選択することでブランドカラーを削除した「Dark」「Light」「Light(DarkToolbar)」も確認することができます。

「他にも知りたいオブジェクトがある!」や「UIデザインで手を貸してほしい!」などカスタマイズのご要望がありましたら、下のリンクをクリックしてフェノメナエンターテインメントのホームページからお問合せください。

自動車のHMIデザイン

モック

フェノメナ・マツキヨです。

フェノメナの営業デモ用に自動車インパネのHMIプロトタイプを制作しました。
メーターパネル、センターディスプレイ、ステアリングスイッチの関係と機能配分を最適化して「理解しやすく」「操作しやすく」「高い質感」を模索するためのプロトタイプです。

続きを読む

Android テーマ「Material」での色設定2

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

前回に引き続きAndroidアプリケーションを開発する際のスタイル色の設定についてです。
今回は、ダイアログへの影響を書きたいと思います。
今回の比較に使用したのはよく使われるダイアログで以下のものです。
・アラートダイアログ(メッセージ、単選択リスト、複数選択リスト)
・日付ピッカーダイアログ
・時間ピッカーダイアログ

続きを読む

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