Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Android

[UI Design] Android niceties – Android Appのクールなデザイン作例

  • Pocket
  • このエントリーをはてなブックマークに追加

Android AppのクールなUIデザイン作例を紹介するTumblrブログ。iOS Appのこうしたギャラリーサイトはよく見るけどAndroid Appに絞ったものはあまりないので、UIデザインする際のネタ帳として役に立つかも。普段あいぽんばかりでAndroidはほとんど使う機会がないので(ていうか正直あまり使いたくない・・・w)、自分みたくAppleべったりの人がAndroidのUIのマナーとか知るにはちょうどイイかも。

[App Icon] DPS App Icons Template – Mobile Appのアイコンテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

Mobile Appのデザインをする際に役立つフォトショップ用テンプレート。これ系のテンプレートと言えば自分はPixelResortのApp Icon Templateをよく使ってますが、これはこれで便利かも。他のアイコンテンプレートと違うのは、これ1つでiOS AppだけでなくAndroid Appにも対応できるという点。1つのスマートオブジェクトを編集するだけで、全サイズのアイコンに適用されます。レイヤー構成も「こっから上がiOS向けで、こっから下はAndroid向けだYO」みたいに分かりやすくレイヤーフォルダ分けされていて、作業がしやすいです。iOS App、Android Appを同時進行で制作する現場なんかにちょうどイイですね。

[UI Design] Android App Patterns – アンドロイドアプリのUIギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

Android AppのUIギャラリー。この手のサイトでは定番ですが、リスト表示やメニュー、ログイン画面など、各場面ごとにカテゴリ分けされて紹介されてます。またPhoneとTabletに分けて整理されているので、作例を見る際にナビゲーションしやすそうです。ところでMobile AppのUIギャラリーってどれもこんな感じのレイアウトですね。なんででしょ。まぁ見やすいからいいんですが。

[UI Design] AndroidUX.com – AndroidのUX例を場面ごとに紹介するギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

AndroidのUIを、ロック画面やホーム画面、キーボード、カメラ使用時などの場面ごとに紹介するギャラリーサイト。iOSと違ってサードパーティーによるカスタマイズの幅が広いというか、そんな印象を受けました。まぁ普段Android使ってないので正直あまりピンとこないってのもありますが。Android Appを制作する際の参考になりそうです。

[UI Design] android pttrns – Android AppのクールなUIをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Android AppのクールなUI作例をまとめたサイト。iOS Appのこうしたサイトはいくつかあるけど、Android用のものはあまりないので、開発者にとっては貴重かもしれません。自分はAndroid端末は持ってないんだけど、こうしてザっと見てると、iOS Appとは色々勝手が違うんだなーとか思いました。まだやった事ないけど、Android Appのデザイン案件が来たら参考にしようかと。

[Software] Adobe Shadow – モバイル環境でのブラウザ確認補助ツール

  • Pocket
  • このエントリーをはてなブックマークに追加

Adobeが出したAdobe Shadowというツールがなかなかイケてます。簡単に言えばWebサイトをモバイル環境で確認するための補助ツール・デバッグツールというものなんですが、モバイルデバイスを対象にしたサイト制作時にものスゴく役立ちそうです。使うにはまずiPhoneやAndroidなどの確認側に専用のアプリをインストール。次にAdobe ShadowのPC用クライアントアプリをインストール(Mac版とWin版があります)。そして3つめにGoogle Chrome用のエクステンションを追加。

ソフトウェアの準備が出来たら次は設定です。PC用クライアントを立ち上げた状態でChromeから「Sd」ボタンを押下するとパスワードを求められます。このパスはモバイルデバイスでAppを立ち上げれば出てくるので、そいつを入力。認証は初回だけで、2回目からは必要ないです。この認証の際に注意する事は、PCとモバイルデバイスが同一ネットワーク上にある事。Wi-Fiを使ってコネクトするため、別のネットワーク上にあるとお互いが見えなくなります。

以上で準備は完了。あとはChromeで任意のサイトを見るだけ。PC側で見ているサイトがモバイルデバイスにも1秒ほどのタイムラグで表示されます。ここで表示されている情報は、PC版Chromeで表示されているそのままの絵ではなく、URL情報だけをモバイルデバイスに送信し、モバイル側でレンダーされたもの。今までだとモバイルサイト作ってアップしてURLをメールか何かでiPhoneに送って、それからブラウザ確認・・・という手順だったものが、Chromeでサイト開くだけで済むようになります。

またFirebugのようなデバッグツールも内蔵されているので、サイトのレイアウト崩れの際にも役だってくれそうです。多少準備は面倒だけど、Webのコーディングに関わる人なら持ってて損はないなかなかホットなツールかと。

[UI Design] Android niceties – Android Appのクールなデザイン作例をまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Android Appのクールなデザイン作例をまとめたサイト。UIデザインの制作や考察などに使えそうです。コレ系のまとめサイトってiOS向けのはいくつかあるし、iOSに絞ってないサイトも多いんだけど、クールなUIのアプリってiOS Appに多いせいか、Androidに限定された作例紹介サイトって珍しいかも。ただし掲載数はそれほど多くはありまえせん。Android Appガラみの仕事してるデザイナーさんに是非これひとつ。

[Mobile Phone] Phone Size – スマートフォンの寸法と解像度のデータベース

  • Pocket
  • このエントリーをはてなブックマークに追加

iPhoneやAndroid、Windows Phoneなどの各種スマートフォンの寸法とディスプレイ解像度のデータベース。初期値はiPhone 4S、Nokia Lumia 800、Galaxy Nexusの3機種が出てますが、プルダウンメニューから他の機種の情報をロードできます。スマートフォン用サイトやアプリを作る際に「あの端末解像度いくつだっけ」って場面てよくあると思うんですが、そんな時にとっても役に立つサイト。とは言ってもいわゆる国産のガラパロイド(ガラスマとも言うんだっけ)の情報はあまりないのでアレですが。しかし最近のAndroidってデカいっすな。この前仕事でNexus触ったんですが、なんつーかiPhoneユーザーで良かったなぁってしみじみ思いました。