AndroidのAdaptive Icon作成方法

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

AndroidのアプリアイコンはOSバージョンに伴って徐々に変化してきていますが、今現在はAdaptive Icon (アダプティブランチャーアイコン) というものが主流になっています。

続きを読む

スマートフォンの縦長化

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

iPhone Xの登場でスマートフォン画面の縦長化が始まり、去年からはAndroidも追従しつつあります。例えばNTTドコモのラインナップを見ると、以下のようになっています。(2019.09.27時点)

【 21:9 】Xperia 1
【 19.5:9 】AQUOS R3 / Huawei P30 Pro
【 19:9 】Galaxy S10 / S10+ / AQUOS R2
【 18.7:9 】Huawei P20 Pro
【 18:9 】その他の端末すべて

スマートフォンのアスペクト比

続きを読む

Xamarin.Forms

icon

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

 前回はクロスプラットフォーム開発環境の「Xamarin」について簡単に説明しましたが、今回は画面のUIを共通化できる「Xamarin.Forms」について触れようと思います。

続きを読む

Xamarin

icon

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

今回は、クロスプラットフォーム開発環境の「Xamarin」についてです。

「Xamarin」は、Xamarin社という会社が開発して配布していましたが、2016年にマイクロソフトに買収されてVisual Studioに同梱されるようになりました。
Windowsはもちろん、Mac用のVisual Studio(Visual Studio for Mac)にも同梱されています。

続きを読む

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

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

aspects

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

doubleos

 

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デザインで手を貸してほしい!」などカスタマイズのご要望がありましたら、下のリンクをクリックしてフェノメナエンターテインメントのホームページからお問合せください。

簡単!今スグ使えて便利!触って動くプロトタイプを作ろう!

yamaです。
今回は、モバイルアプリのプロトタイピングツールをいくつかご紹介したいと思います。

操作感をつかんで、 アクセシビリティ向上を!

アプリやwebサイトを作る過程で、GUIの時のイメージと、実際に実装されたものを見ると「…あれ?」と思うこと・・・ありませんか?

もしくは、事前に確認してOKをもらっていたのに、終盤のタイミングで「イメージと違ったからこうして~!」と言われてしまい、最悪、UI設計からやり直し…なんてことも!!

meeting

そんな手戻りを防ぐのはもちろん、使い勝手の良い最適なユーザインターフェースにするために、設計時に「プロトタイプ」を作って、利用者視点で操作をしてみることをお勧めします。

続きを読む

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

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

今回は、Androidアプリケーションを開発する際のスタイル色の設定について書きたいと思います。

テーマ「Material」からいろいろな部分の色を一括して指定できるようになりました。
基本的な設定色は、Android Designにも記載されていますが以下のパラメータです。
colorPrimary ———— アクションバーの背景色
colorPrimaryDark ——— ステータスバーの背景色
navigationBarColor —— ナビゲーションバーの背景色
windowBackground ——– アプリケーションボディの背景色
textColorPrimary ——— アクションバーのタイトル文字色
colorAccent ————– コントロールの基本色

これらのパラメーターをスタイルに設定することでアプリケーションの基本色を一括で指定できます。

<< style.xmlへの設定例 >>

<style name=”AppThemeML” parent=”@android:style/Theme.Material.Light”>
<item name=”android:colorPrimary”>#bdbdbd</item>
<item name=”android:colorPrimaryDark”>#757575</item>
<item name=”android:navigationBarColor”>#000000</item>
<item name=”android:windowBackground”>#eeeeee</item>
<item name=”android:textColorPrimary”>#000000</item>
<item name=”android:colorAccent”>#009385</item>
</style>

G1 図1基本的なパラメータ

  続きを読む

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