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

Browse By

Tag Archives: iPad

[Generator] iPhone Screenshot Maker – iPhoneと任意の画像のハメ込み合成を作れるサイト

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

iPhoneのディスプレイ部分に、任意の画像をハメ込み合成できるサイト。iPhone以外にもiPad、Mac、AppleWatchなどもあります。あとなぜかゲームボーイもあります。各端末の解像度はサイト内に書いてありますが、サイズが違っていた場合にどうするかなどの細かいオプションなども指定できます。Photoshopが手元にない時や、ノンデザイナー系の人にオススメ。

[UI Design] iOS Human Interface Guidelines – Apple純正のiOSテンプレート

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

Apple純正のiOS 10用各種テンプレートを用意したページ。App IconやiMessage App Icon、3Dタッチデバイスのクイックアクション用のPSDなどが配布されています。iMessage Appってなんやろ?って思って調べたら、どうもこの画面の時に使われるアイコンのようです。AppアイコンのPSD以外にも、San Franciscoフォントやタイポ作例一覧のPSDなんかも配布されています。ただしダウンロードするにはApple Developer Programのアカウントがいるみたいです。

[Web Design] mydevice.io – 各種タッチデバイスのディスプレイ仕様を一覧で見れるサイト

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

各種タッチデバイスのディスプレイ仕様を一覧で見る事のできるサイト。というかトップページはココで、そちらでは自分が使っているブラウザの仕様を見る事ができるというものなんだけど、個人的にこっちのデバイス確認ページの方が便利だなーと思ったのでこちらを紹介。論理ピクセル数、物理ピクセル数に加えて、ピクセルレシオやPPIについても紹介されています。表のヘッダーをクリックするとソートし直しもできます。モバイルサイトデザインする時の指標として使えそうです。

[Apple] iOS 10 Default Wallpaper – iOS 10のデフォルト壁紙(多分)

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

WWDCやAppleのサイト内でシレっと使われてる、次のiOSでデフォルトの壁紙になる(であろう)画像を見つけました。imgurで共有されてます。正方形トリミングなのでiPadでもiPhoneでも使えますが、iPhone用にトリミングされた縦長のものはこちらにあります。なんかアレですよね、波系好きですよねApple。

[Freebie] Smartmockups – モバイルAppやPCのスクリーンショットを、各種デバイスのディスプレイに合成できるサイト

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

モバイルアプリやPCアプリのスクリーンショットを、各種デバイスのディスプレイ部分にハメ込み合成できるサイト。用意されているデバイスはiPhone、iPad、Mac、Apple Watch、Android端末など、多くの種類が用意されています。Apple Watchあるのがレアですね。モバイルApp制作してて、サイト内やチュートリアル画面で使い方を見せる場面の画像制作に使えそうです。サイト内でトリミングができる点もナイス。

[Freebie] Bjango App Icon Templates – 各種モバイルAppのアイコンテンプレート

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

モバイルAppとか作ってるBjangoが、各種モバイルデバイス向けAppアイコンのテンプレートファイルを配布しています。iPhoneやiPadなどのiOSに加え、AppleTVのtvOS、Apple WatchのwatchOS用テンプレートも入ってます。あとAndroid用のものも。ダウンロードするとフォルダごとに各種フォーマットが整理されており、PhotoshopやIllustrator以外にSketchやAffinity Designer用のものまで入ってます。最近じゃSketchやAffinityでデザインする人も多いですからね。対応デバイスの数やフォーマットの多さを考えると、コレ系のアプリアイコンテンプレートとしては最強なんじゃないでしょうか。ホーム画面に置いた時のシミュレートとかを考えるとPixelresortのテンプレートとかもイイんですけどね。

[iPad] Use iPad keyboard shortcuts in iOS 9 and work more efficiently (Cheat Sheet) – キーボード接続のiPadで使えるショートカット一覧

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

いやーiPad Pro、欲しいですな。アップルの犬的にはとっても欲しいのですが、いかんせん高い・・・。Smart Keyboard使いたいなぁ・・・。というわけでこちらではiPadにキーボードを接続した際の使えるショートカットが一覧で紹介されています。主なiPad Appごとに分けて紹介されています。これ見てるとMacでのショートカットにある程度似てるので、Mac使い慣れてる人はいつもの感じで操作できそう。もちろんSmart Keyboardでなくても使えます。家に余ってるMacの無線キーボードとかでもイケるので、据え置きでiPad使う時なんかに役立ちそうです。

[UI Design] Designing for iOS 9 – iOS 9 Appデザインのための分かりやすいガイドライン

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

iOS 9向けにアプリをデザインする際に役立つ、UIガイドラインを分かりやすくまとめた記事。まぁApple純正のガイドライン読めば分かるっていえば分かるんですが、ここではその中でも特に重要な点を画像を使って分かりやすくまとめられているのがナイス。レイアウト、フォント、ディスプレイ解像度、スプリットビュー、アイコンのサイズやグリッド、カラー、ボタンやフォントのサイズについて、スペーシングやアライン、マージン、各種純正パーツのサイズ、キーボードなどについて端的に仕様を紹介しています。また記事最下部にはiPhoneやiPad、Apple WatchなどのGUIテンプレートへのリンクなども紹介されており、なかなか気の利いた記事だと思います。UIデザイナーの方にひとつ。