Android O Developer Preview1

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

android-o-logo

3月に、Android8.0 になる予定の Android O Developer Preview1が公開されましたので、早速、手持ちのNEXUS5Xにインストールしてみました。 [続きを読む…]

スマホ画面のアスペクト比

高解像度化と大型化に一段落していたスマホ画面サイズの変化が2017年から再開しそうです。
今度は縦長化が進みUIデザインに影響が発生します。
画面の縦長化は、スマホ本体のプロポーションにも変化をもたらしそうです。
何年かすると縦長感のあるスマホがスマートに感じ、現在のプロポーションはずんぐりとした印象になってしまうかもしれません。

aspects

画面の縦長化が進むと、Androidに搭載されているマルチウィンドウ機能の有効性が高まってきます。
今後は複数のアプリを同時に使用することでユーザーベネフィットにつながるケースが増えてくるのだと思います。
UI的には1ペインタイプと2ペインタイプの画面が両立する設計とデザインを行う必要が発生しそうです。

doubleos

 

CSSの擬似クラス:link, :visited, :hover, :active, :focusの使い方

フェノメナの開発担当のレミです!

今回はCSSでよく使われる擬似クラス:link, :visited, :hover, :active, :focusの使い方について解説します。

上記の擬似クラスは「states」(状態)を表現する擬似クラスになります。どういう意味かと言いますと、ユーザアクションに関連する擬似クラスだということです。

a:link {}

:link 擬似クラスはリンクのデフォルトの状態を意味しているものです。一番基本的な設定なので、他の擬似クラスよりも先に宣言することをお勧めします。

一般的に勧められてる宣言の順番がこの通りです ⇨ :link, :visited, :hover, :active, :focus。

例 : 

a:link {
   color: blue;
}

a:visited {}

:visited擬似クラスは既にクリックされている(訪問されている)リンクの状態を表現するものです。

例 : 

a:visited {
   color: orange;
}

a:hover {}

:hover擬似クラスはマウスをリンクの上に置いた時の状態を表現するものです。

リンクには限定されないが、一般的なユースケースがリンクになります。

例 : 

a:hover {
   color: red;
}

a:active {}

:active擬似クラスはリンクがアクティベート(活性化)された時の状態を表現するものです。

リンクに限定はしないが、一番主流でわかりやすいのがリンクになります。リンクの場合は、リンクを押し始める時と、離す時の間の状態になります。

a:active {
   color: purple;
}

a:focus {}

:focus擬似クラスは HTMLエレメントにフォーカスが行った時の状態を表現するものです。

フォーカスというのは、タッチデバイスでタップした時や、キーボードのtabキーで移動した時などになります。

基本的にはform関連のエレメントに使われるがリンクにも使用できます。

a:focus {
   color: yellow;
}

よく混乱してしまう擬似クラスの使い方を少し理解できたでしょうか?

では、また次回も別の擬似クラスについて解説します。

産業用機器の分野でも急速にUIが

フェノメナのマーケティング担当のとしです。

仕事柄、常に世の中の変化をウォッチすることが欠かせなく、ここ数年は東京ビッグサイトの展示会場に月に2回ほどのペースで通い続けています。
見る分野は特定せず、あらゆる分野の展示会を見ることにしています。

2,3年前に、ある変化に気づきました。
産業用機器の世界でも「UI」という言葉が通じるようになってきたことです。
それまでは説明員の方に「使いやすい操作」というテーマで話しかけても、ほとんどの方には興味がありませんでした。必ずと言っていいほど、「これは専門のオペレーターが操作するのでそんなことは考える必要はないんですよ」という言葉が返ってきていました。

[続きを読む…]

色覚対応について

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

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

錐体は光の三原色である『』を認識する錐体、『』を認識する錐体、『』を認識する錐体の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: 選択中は色がつくようになったので差がわかりやすくなりました。

[続きを読む…]

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