問題意識

フェノメナのとしです。
今回はいつもとはちょっと違ったお話しです。

UIデザインという仕事は基本的に受託型のお仕事です。
すでに形のある商品を売るのではなく、まだ形のないものを、先方様の(時には漠然とした)ニーズに合わせて作り上げていく仕事です。

UI・UXというのは、「無くても何とかなってしまう」、「無くても済む」と考えている人がまだまだ多いかも知れません。
「無くても済む」かも知れないことを考える(求めている)人は、「問題意識」がある人ということですね。

これはUI・UXに限ったことではありません。
世の中の多くのことは、「問題意識」を持った人たちによって顕在化され、解決の動きが始まると言っても過言ではないでしょう。
学校の勉強で先生の言うことをまじめに聞いているだけの人はテストの点数は良いかも知れませんが、「問題意識」を持てなければ、ノーベル賞を取るような人はその中から現われません。

UI・UXの仕事を手掛けている皆さんは、相手がどれほどの「問題意識」を持っているか、見極める目を持ちましょう。
とりあえずは「無くても済む」ことを、「問題意識」のない(または乏しい)人に正面からいくら力説しても、のれんに腕押しのことが多いと思います。
時には「直球」ではなく、「変化球」で勝負してみましょう。

そんなことを言っても「相手はみんなそんな人ばかりなんです」という声が聞こえてきそうですね。
そんな時は、自分は果たして十分な「問題意識」の持ち主なんだろうか、そう自問自答するうちに答えが見つかる時もありますよ。

NEXUS5Xの謎

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

今回は、昨年10月の発売日に購入し日々使用している、 Google社の「NEXUS5X」についての話です。

購入したNEXUS5Xのスペックは、以下のとおりです。

サイズ 高さ約 147mm×幅約 73mm×厚さ約 7.9mm
重さ 136g
液晶サイズ 5.2インチ
ピクセル数 横1080×縦1920ピクセル
プロセッサ Qualcomm MSM8992
内蔵メモリ ROM 32GB
対応UIM nanoUIMカード
OS  Android 6.0

端末の大きさ、処理速度、急速充電、指紋認証ログインなど、かなり気に入っています。

しかし、この端末をしばらく開発作業に使っていて、違和感を感じ始めました。
「何かUIパーツの表示がおかしい・・・・」
そこでUIに関する詳細情報を取得するアプリを作り確認したところ、Density値が「2.625」という初めて見る値が表示されました。
今まで、AndroidのDensity値は、TV用の特別なものをのぞき、1.0、1.5、2.0、3.0、4.0 という切りの良い数値が設定されていました。
ほぼ同じサイズのNEXUS5と比べてみると明らかに文字サイズや表示レイアウト縦横比が異なっています。 最新でNEXUS5Xと同じ液晶サイズのXperiaZ5でも表示しましたが、これはNEXUS5に近い表示となっています。
(Densityグループは、XXHDPIを使用しているので3機種とも同じなのですが・・・・)
このDensity値により、8dpの四角を表示してみたところ、NEXUS5、XperiaZ5では24ピクセル、NEXUS5Xでは21ピクセルで描画されました。

DotByDot

ただし、スクリーンショットを液晶のリアルサイズ比にしたところNEXUS5とNEXUS5Xでは、若干違和感が無くなっています。

RealScale

今後、Google社は正確なDPIでDensityを管理していくつもりなのかもしれません。 これがGoogle社製端末のみなのか、他のメーカー製端末でもDensity管理を変えてくるのか引き続きチェックを続けたいと思います。

今回の確認作業をしていて、Androidには様々な液晶サイズ、解像度、アスペクト比の端末があるため、それらを考慮し可能な限り不具合無く操作・表示できるようUI開発を行うことが大切だと改めて認識しました。

余談ですが、携帯ショップに予約して発売日に受け取りに行ったところ
「発表から今日まで予約はお客様だけです。なので本日はこの1台しか入荷していません。私も初めて触ります。」
と、店員さんに言われてしまいました・・・・

知られていないCSSのコツ : 簡単な自動的CSSナンバリング

numbering-cover

フェノメナ技術担当のレミです。

HTMLの基礎をご存知の方には、番号付きのリストといえば<ol>タグを思いつく人は少なくないでしょう。

しかし、あるCSSプロパティを使うことで <ol> だけではなく、どのHTMLエレメントでもナンバリングを使うことができるようになります。

更に、HTMLに一切数字を記述せずに、細かい目次まで自動的に作れてしまうのです!

続きを読む

標準UIを用いる際の落とし穴

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

AndroidやiOSのアプリをデザインする際、設定などの画面は、各OSが備えている “標準の画面” を踏襲するケースが多々あります。
OS標準のUIはスマートフォンユーザーが比較的操作し慣れているはずなので、アプリ毎に独自のUIを用意して操作をバラバラにするより、スムーズに使ってもらえるだろうという思惑があるからです。
また、UIデザイナーとしても大量に存在する設定系の画面などを整理・作成し易く、プログラマーにアプリ化をお願いする際、「ここはOS標準で」の一言で済むというメリットがあります。

今回は後者のメリットに関する落とし穴について、Androidを例に書いてみたいと思います。

続きを読む

「利用者視点」と「思いやり」

yamaです。
今回は、利用者視点について、普段感じていることをお伝えしたいと思います。
(これについては、様々な考え方があると思いますので、個人的な解釈として受け取って頂ければと思います)

さて、私たちは、ICTサービスを提供する際、利用者のことを常に考えています。

blog_sa

では、お客様(エンドユーザー)以外の、例えば職場や取引先に対して「ユーザーの目線」は必要だと思いますか?

続きを読む

キーボードのショートカットキー

こんにちは。すーさんです。

今回は、私が普段使っているキーボードのショートカットキーについてまとめてみたいと思います。
検索すればいくらでも情報はありますし、普段からパソコンを利用している方には今更感満載な話かもですが、少しでも参考になれば幸いです。
※私はWindowsユーザーなので、Macユーザーにはあまり参考にならないかもですが。。。

Windowsロゴキー+D デスクトップ表示
Alt+Tab ウィンドウの切替え
Alt+F4 ウィンドウを閉じる
Ctrl+W タブを閉じる

ウィンドウの操作系では、これらをよく利用します。
ウィンドウを閉じる操作は、マウスを使用中であればマウスで右上の「×」をクリックした方が早いかもですが。

Ctrl+C コピー
Ctrl+V 貼り付け
Ctrl+Z 元に戻す
Ctrl+S 保存
Ctrl+A 全選択
Ctrl+X 切り取り

これらは説明する必要はないですね。
意識しなくとも、自然と使っているのではないでしょうか。

テキストの操作では、以下をよく利用します。

Shift+Home キャレットの位置からその文の最初まで選択
Shift+End キャレットの位置からその文の最後まで選択
Shift+Ctrl+Home キャレットの位置からその文章の最初まですべて選択
Shift+Ctrl+End キャレットの位置からその文章の最後まですべて選択
Ctrl+←or→ あるブロック単位でキャレットを移動
Sfift+Ctrl+←or→ あるブロック単位で文字を選択

最後の2つについては、選択されるブロックの単位はいまいちよく分かっていないです。
たぶん、マウスでダブルクリックして選択される範囲と同じなんだとは思いますが。。。
選択した後に選択範囲を調整する場合は、「Sfift+←or→」で1文字ずつ範囲を調整できます。

これらはごく一部で、冒頭に書いたように、検索すればまだまだたくさんあります。
また、マウスで操作した方が早い場合もありますが、覚えておいても損はないと思います。

それぞれのソフトウェア固有で設定できたり、まだ他にもたくさんあるので、自分が使いやすいように設定してみるのもいいかと思います。

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

続きを読む

Android 6.0(Marshmallow)の標準フォントに関する注意

151015_img01

 

 

 

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

以前、Android 5.x までの内容として、標準フォントについて 記事を書きました。
その時点での標準フォントは Roboto、日本語を表示する際は モトヤフォント というフォントが採用されていたのですが、Android 6.0(Marshmallow) からは、日本語フォントが変更されています。

続きを読む

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