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

Browse By

Tag Archives: iPhone

[UI Design] iOS Resolution Reference – iOSデバイスのディスプレイに関する仕様一覧

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

iOSデバイスの各種ディスプレイ解像度に関する一覧ページ。iOS Appやモバイルサイト作る人にオススメ。各デバイスの解像度だけでなく、それ用に使われる画像のファイル名ルールについても言及されています(@2xとかソレ系のやつ)。新しく出たiPad mini Retinaについては紹介されていませんが、まぁこれはiPad Retinaと一緒なのでなくても問題ありませんね。この手の情報の一覧が欲しい時に便利です。

[Freebie] iOS7 GUI PSD (iPhone) – iOS 7のPSDモックアップ

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

iOS 7とiPhone 5s、5cのPSDモックアップをTeehan+Laxが配布してます。iPhoneとかiOSのモックアップっていくつかのサイトで配布してるけど、質と場面の多さから俺はいつもここのを使ってます。ハードウェアとしてはiPhone 5sのスペースグレイとゴールド、iPhone 5cのブルーの3機種分があり、ソフトウェア面では各種UIパーツから純正マップ画面、キーボードUIなどだいたいのUIパーツが揃ってます。iPhone AppのiOS7対応もありますしね、ありがたく使わせて頂きます。

[Wallpaper] iOS 7の壁紙サイズのまとめと、壁紙配布サイトまとめ

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

iOS 7になって壁紙にパララックス効果(視差効果)が導入された事により、壁紙用とされる画像サイズが変わりました。今後の備忘録も兼ねて各デバイスごとに適切とされる画像サイズを一覧にしておきましたので、壁紙自作する場合の参考になればと。あとこの新しいサイズに対応した壁紙の配布サイトもいくつか見つけたのでまとめておきました。壁紙収集癖のある人に是非これひとつ。

(さらに…)

[Generator] PlaceIt – 任意の画像をモバイルデバイスのディスプレイにハメ込んでくれるサイト

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

任意の画像をドラッグ&ドロップするだけで、用意されているモバイルデバイスのディスプレイにハメコミ合成してくれるサイト。実はこれ以前にも紹介してるんですが、対応デバイスが増えたのとドメインが変わってたので改めて紹介。以前はiOSデバイスがメインだったけど、Androidデバイスが一気に増えてました。とは言ってもこのサイトで生成できる画像は主にイメージ画像的なアレなので、Apple製に比べてデザインに劣るAndroidデバイスを使った画像にどれだけの価値があるのかは微妙かもしれません。あと少ないですがラップトップの素材も用意されています。画像ならスクリーンショット以外でも対応しているので、好きな画像を放り込んで合成できます。ちょっとした素材作りに便利ですね。

[Responsive Layout] CSS Media Queries for iPads & iPhones – iOSデバイス向けのメディアクエリまとめ

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

iPhoneとiPad向けのメディアクエリ指定をまとめたページ。機種に分けてにまとめられていて、それぞれの世代ごとにブレークポイントの指定方法が細かく解説されてます。レスポンシブレイアウトを使ったスマートフォン対応をする際に参考になりますなこれ。サイトの内容とはあんまし関係ないけど、このページ画像1つも使ってないんですよね。なんかこうWebフォントとかボックスシャドウとかウマく使って小奇麗に作ってあるなぁとしみじみ思いました。

[Generator] MockUPhone – 画像をドラッグ&ドロップするだけでモバイルデバイスの画面に表示した画像を生成してくれるサイト

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

ズラっと並んでるスマートフォンやタブレットの中からどれかひとつを選んで、そのディスプレイ部分に任意の画像を表示させたモックアップ画像を作る事のできるサイト。各デバイスは当然ディスプレイ解像度が異なるので、あらかじめそれぞれに合ったサイズで画面用の画像を作っておく必要があります。ちなみにiPhone 5は640px * 1136px、iPhone 4 and 4Sは 640px * 960pxです。Androidは色々あり過ぎて分かりません。デバイスを選ぶとディスプレイ解像度が表示されるので、あとは「Drop files here」の部分に画面用の画像を放り込むだけでOK。生成した画像はPNGで保存する事ができ、またこんな感じで固有リンクを使った共有もできます。UIデザインする際に他のメンバーや顧客とデザイン共有する際に便利そうです。

[Hardware] Viewport Sizes – 各種モバイル端末のハードウェアスペックを網羅したサイト

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

様々なモバイル端末のハードウェアスペックを検索できるサイト。ズラーっと並んでますが、画面上部の「Filter」エリアにタイプする事で抽出ができます。iPadなども掲載されているのでモバイルフォンだけでなくタブレットも対応内のようです。掲載されている情報はプラットフォーム、出荷時のOSのバージョン、縦と横のディスプレイドット数、発売日の5つ。端末のハードウェア情報としてはミニマムではあるけど、OSのバージョンとディスプレイ解像度だけでもこれだけ簡単に検索できれば便利っすね。MobileApp作る時などに重宝しそうです。

[UI Design] UX Archive – iPhone Appのインターフェースを、遷移順に並べたデザインギャラリー

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

iPhone Appのユーザーインターフェースを、遷移順に並べたデザインギャラリー。各種画面を、アプリごと、もしくは場面ごとにソート&抽出する事ができるので、任意のアプリのUI遷移を見る事も、複数のアプリの同一場面を横断的に比較する事もできます。紹介されているアプリの件数はそれほど多くないけど、見せ方が分かりやすく、UIデザインの際に参考にできそうです。けどiPhone AppのUIデザインのトレンドって、iOS 7の公開後に色々と変化あるでしょうね。