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

Browse By

Tag Archives: iPhone

[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] Sizes of iPhone UI Elements – iPhone UIの各種要素のサイズ

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

iPhoneデフォルトUIの各種要素のサイズについて。ディスプレイサイズなどはよく知られてるけど、タイトルバーやステイタスバーの高さ、タブバー内に置くアイコンのサイズなどの細かいパーツ類のサイズについてまとめられてるので、iPhone Appをデザインする際に重宝します。サイズは全て3GS時代のものなので、Retina対応用の@2x画像を作る場合は2倍にすればオッケー。サクっと主要要素のサイズについて知りたい時に便利。

[iOS App] Skala Preview – iOSデバイスでフォトショップのキャンバスをリアルタイム表示できるアプリ

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

たまたま見つけたSkala Previewというアプリがなかなか素晴らしいので紹介。早い話がPhotoshopで作業しているキャンバスをiOSで表示させるためのMac AppとiOS Appのセットです。通常アプリのUIデザインする時って、「フォトショで制作→PNG書き出し→メールとかで画像をiPhoneに転送→保存して全画面表示で確認」とかやってるんですが、これ使えばフォトショで作業した内容がリアルタイムにiPhoneに反映されます。超便利! iPhoneアプリのUIデザインなんかをするデザイナーさんにオススメです。

(さらに…)

[Diary] 2012/02/16 (Thu)・・・おや、何か届いたようです。

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

おや、何か届いたようです。今回は小物ではありますが、日本で売ってないのでアメリカから個人輸入するというなかなか気合いの入った一品でございます。

(さらに…)

[Icon Design] App Icon Template – iOSアプリアイコン制作のテンプレート

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

本日のナニコレ超便利。いやこれマジに便利っす。iOS向けアプリのアイコン制作時に役立つフォトショップ用テンプレート。この手のテンプレートは他にもあるけど、これの素晴らしい点は2つ。まずアイコンの各種解像度に一括対応するため、ベースとなるアイコンデザイン部分をスマートオブジェクト化してある点(「EDIT THIIS SMARTOBJECT」のレイヤー)。なのでこのPSBファイルをベースにデザインすれば、全解像度に適用されます。もう1点は同梱されているアクションファイル。CS5.1では動きが変だった印象もあるけど、これ使えばAppStore申請用のファイル書き出しがサクっとできます。デザイナーのワークフローの作業的な部分をウマい事バッチ化した素晴らしいテンプレート。ありがたく使わせて頂きます。

[Icon Design] iOS Icon Gallery – iOSアプリのアイコンギャラリー

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

iOSアプリのアイコンギャラリー。ズラっとページングする形で並べられてますが、カテゴリーによる抽出もできます。かっこいいアイコンしか集められてないので、アプリのアイコン制作をする際のネタ帳としてとってもナイス。多色、テクスチャ使用、立体的なデザインなど、アプリごとに色々と趣向を凝らして目立つ方法を模索してるという印象。まぁアプリのアイコンってAppStore内で目立ってナンボ、Home画面内でも目立ってナンボ。けどiPhoneユーザーの特性を考えると品良く作らなきゃなんない、というあたりが制作する側としては特に気にする部分ですな。

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

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

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

[UI Design] TappGala – モバイルUIのデザイン作例紹介サイト

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

モバイルアプリのクールなUIのまとめサイト。一時期「CSSなんちゃら」みたいなクールサイトまとめが流行したように、最近じゃモバイルUIのまとめサイトが流行ってるようです。サイトによって色々工夫されてるけど、ここではアプリの種類によってタグ付けされてて、同種のアプリごとに抽出してブラウズできるようになってます。WebデザインからAppデザインに転向したり、両方やってる人も多いと思うので、これ系のまとめサイトはネタ収集の際に重宝しますな。