色覚対応について

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

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

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

ヘッダー/フッターの位置固定について

こんにちは。すーさんです。
今回は、webページのヘッダーとフッターをCSSで位置固定する方法についてです。

ヘッダー用のCSSは下記になります。
CSS:
.headerbar {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

・position: fixed;
  これでスクロールしても位置が固定されます。
・top: 0;
  上からの配置位置を「0」とすることで、一番上に表示されます。

フッターの場合は下記のようにします。
CSS:
.footerbar {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
}

ヘッダーと異なるのはtopプロパティではなくbottomプロパティに「0」を指定して、一番下に表示するようにしています。

コンテンツ部分には、通常時、ヘッダー/フッターにコンテンツが隠れないようにヘッダー/フッターと同じ高さの余白(padding)を上下に設定する必要があります。

また、HTML5のheader/footerタグを利用する場合も、CSSでposition/top/bottomプロパティを設定すれば大丈夫です。

Android 新機能:アプリショートカットについて

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

今回は、Android7.1で追加された「アプリショートカット」についてです。 まだ、Google端末以外はAndroid7.0にすらなっていない端末がほとんどですが、将来のために書こうと思います。

この機能は、ホーム画面でアプリアイコンを長押しすると、下図のようにショートカットが表示されます。

SS1
[続きを読む…]

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

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

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

img01

[続きを読む…]

iOS10での変化

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

iOS10がリリースされてから少し時間が経ちましたが、バージョンアップはしましたか?
今回のバージョンアップで多くの変化がありましたので、どのような変化があったのかを見た目の部分と機能的な部分を混ぜながらいくつか紹介していこうと思います。

コントロールセンター

写真 2016-11-01 11 07 13 - コピー 写真 2016-11-01 11 06 52 - コピー写真 2016-11-01 11 06 56 - コピー

 

 

 

 

 

 

 

・ページを分割
iOS 9  : 1ページにまとめられていました。
iOS 10: ミュージック系を分けたので、見た目に余裕ができた印象になりました。

・ボタンがカラフルに
iOS 9  : 選択中は白くなっていました。
iOS 10: 選択中は色がつくようになったので差がわかりやすくなりました。

[続きを読む…]

HTMLのtabindexプロパティの使い方

2016-10-11 1

こんにちは、

フェノメナ技術担当のレミです。今回はHTML「tabindex」の使い方をご紹介します。

tabindexプロパティは、2つの役割をもっています。

  1. 本来tabキーでフォーカス(選択)不可能なエレメントをフォーカス可能にする。そしてその逆。
  2. フォーカスの順番を指定する

書き方はこの通りです : <a href="#hoge" tabindex=番号></a>

デフォルトでフォーカスできるエレメントはいくつかあり、<a><input type="text" /><textarea>がその例です。ユーザが「tabキー」を押すと、それぞれのエレメントにフォーカスが移ります。UIに関しても、アクセシビリティーに関しても大切な機能を果たしています。

しかし、<span>をボタンに見せたデザインにしたときは、どうなるでしょうか?
tabキーを押してもそのspanボタンが選択されないですね。。。それを選択 / フォーカスを出来るようにするためには、「tabindex=番号」を付ける必要があります。(番号は、1以上です。)

その「番号」というのは、選択されていく順番を示すものです。デフォルトでは、HTMLのDOMを上から下に選択されていくのですが、それを微調整したくなったときに細かく番号を設定してみると便利です。

また、<a>を使っているが、それをフォーカスされると困ると言う場合もあるかもしれません。そのときは、tabindex=0(ゼロ)にすることによって、tabキーを押してもフォーカスが移らなくなります。

以上になります。ぜひ、次のプロジェクトに、このtabindexプロパティの実装を検討してはいかがでしょうか!

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

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

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

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

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

文字サイズ_解像度

[続きを読む…]

コミュニケーションの手段

こんにちは、フェノメナのとしです。
私はデザイナーではないので、いつものみんなとは違う視点でのお話しです。

コミュニケーションとは音声や文字などで意思の伝達を行なうことです。最近は、スマホが(主に個人の立場での)コミュニケーションツールとして大きな意味を持つようになりました。ビジネスの場でも、直接相手を訪問して面談したり、電話をしたり、というよりPCによるメールが主流になっています。ほとんどの場合、それで問題はないのですが、時々、勘違いによるトラブルが起こったりします。

なぜでしょう?
もう一度コミュニケーションの本質を考えてみましょう。

メールによるコミュニケーションでは、送るほうと受け取るほうで意味を取り違えることが少なくありません。簡潔な文章にしようとして説明が十分でなかったり、相手の立場が十分理解できていなかったりするせいでしょう。

電話によるコミュニケーションも最近では少なくなっていますね。電車の中では通話は禁止ですし・・・。
メールに比べると、電話は理解できない内容はその場で聞き返せるので、勘違いが起こる可能性は少ないコミュニケーション手段と言えます。でも完璧なコミュニケーション手段とは言えません。なぜでしょう?それは相手の「表情」が読み取れないからです。

コミュニケーションで最も大事なのは相手がどう考えているか、あらゆる角度から読み取ることです。「はい」と答えてはいるが「喜んで、はい!」なのか、「しぶしぶ、はい!」なのか。ビジネスでなくて、個人的な場でも重要なことだと思います。
そのためには、直接相手と会って、顔を見ながらコミュニケーションするということが(手間はかかりますが)もっとも基本的で有意義な方法だと言えると思います。

そういう意味で、メールによるコミュニケーションでほとんどの用件を済ませてしまう習慣が身についてしまった人たちは、いざとなった時に相手の「微妙な人の気持ちをくみ取る」ということができるのかどうか、(老婆心ながら)多少心配になったりします。

 あなたはプロポーズする時、どのような場面(コミュニケーション手段)を考え、準備しますか?

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