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

Browse By

Tag Archives: iOS

[Web App] Sun — simple weather app – シンプルな表示のiOS向け天気予報Web App

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

iOS向けのシンプルなウェザーアプリ。ただしローカルAppではなくWeb Appという点が興味深い。Macなどからリンク先のサイトに行くと、Appの説明と「iOS端末からここに来てネ」というメッセージがあるだけ。iOS端末から行くと「ホーム画面にブックマークしてネ」という表示に変わり、言われた通りにホーム画面に保存すると、アプリ風のアイコンとしてブックマークが保存されます。このAppのスゴいのはここからで、立ち上げるとSafari内でAppが表示されるんだけど、Safariのインターフェースは完全排除、まるで固有のアプリのように振る舞います。さらに通常通りSafariを開いてもSunの画面は出ません。これどうやってんだろなー。表示はSafariに依存してるんだろうけど画面はSarariの1タブを占有するわけでもなく、ユーザーの目には固有のアプリのように映ります。この手法ってAppleの審査を通す必要がなく、もしかしたら今後主流とは言わないまでもApp配信の1手段として広がるんじゃないかとも思えます。ただ課金モデルは組みづらいだろうけど。Appの出来そのものよりも、その仕組みがとても興味深い。

[Photoshop] iOS Photoshop Actions & Workflows – iOSアプリやサイト制作に使えるフォトショップ用アクション

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

iOS Appを制作するBjangoが便利なPhotoshop用アクションファイルを配布してます。主にiOS向けのアプリやWebサイトを作る人向けのアクションです。ピクセルスナップのオン・オフ、iPhoneやiPadのインターフェース生成、色盲の人の視界を模したシミュレーション、レイヤーからスライスを生成、リサイザーなどの機能があります。いやこれ便利ですわ。App IconやUI制作をしている人に超オススメ。常用アクションになりそうです。

[Icon Design] Pinterest – Icons – Apps mobile – PinterestでのiOS Appのクールアイコンまとめ

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

Pinterestでのクールアイコンまとめ。iOS Appのクールなアイコンをまとめた内容です。紹介されているアイコンがどれもクールなので、Appデザインの際の参考になります。っていうかPinterestってこういう使い方アリだなーとか思いました。普段それほどガンガン使うWebサービスではないので、なんかイイなっていうか、アリだなって思った次第であります。あ、けどリンク先ほとんどDribbbleだな・・・w

[Icon Design] Apple’s Icon Ecosystem or: Carrying the Quality All The Way Through – MacとiOS間において相互に影響し合うアイコンデザイン

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

MacとiOS間において相互に影響し合うアイコンデザインについての考察。記事の内容はかなり長いので、端的に「例を見せてくれよ」っていうせっかちな人は、ここ(Mac→iOS)ここ(iOS→Mac)を見るとイイです。Mac AppアイコンとiOS Appアイコンとで大きく異なる点のひとつに、角丸の枠の有無があります。元々Mac版のあったアプリにはアイコンに合う背景が与えられ、逆の場合はなくなった背景を補うような形で意匠に変化が加えられる場合が多いみたい。アイコンデザインの参考になるかどうかは分からないけど、デザイナーがいかにしてアイコンのコアの部分を両OSで使い回してるのかを見るのは、なかなか興味深いです。

[UI Design] GUI Stencils, Wireframing Kits and Sketching Templates for iPad App Designers – iPadのUIデザインやプロトタイピングに便利な素材まとめ

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

iPad Appやサイト制作に役立つUIキットや、プロトタイピングに便利なワイヤーフレームキットのまとめ記事。様々な作例が用意されていて、OmniGraffle用、PSD、AI、Photoshop用のアクションなどがあります。デザイナー向けの素材もディレクター向けの素材も一通りあるという印象。また外観パーツだけでなくApp IconやUIパーツ類のテンプレートも紹介されていて、iPad関連の素材はこの記事だけで一通り揃いそうです。とってもナイス。

[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を同時進行で制作する現場なんかにちょうどイイですね。

[Icon Design] iPhone App Icon Design: Best Practises – iPhone Appアイコンのデザインをする際の考察記事

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

iPhone Appのアイコンデザインをする際の注意点などを考察した記事。これなかなかオモしろいです。「文字を含めるな」、「デフォルトで付くグロスを使うな」、「シンプルに作れ」、「ディテールにこだわれ」、「アイコンとAppのUIに一貫性を」といった、まぁ言ってみれば格言めいた内容が綴られています。けど実際これらはどれも重要で、自分の場合は「文字を含めるな」と「ディテールにこだわれ」のあたり特に大事かなーと思いながら読みました。記事内では「ダメな例」も紹介されてるので、人のフリ見て我がフリ直せというか、そんな趣もあります。ある意味その枠で紹介されたAppのデザイナーにとっては残酷な記事内容ではあります。

[Prototyping] iPad and iPhone Design – iOS Appのプロトタイピングに便利なオムニグラフ用テンプレート

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

iOS Appのプロトタイピングに便利な、オムニグラフ用のテンプレート。iPhoneやiPadの外観と、基礎インターフェースのUIパーツ類が同梱されています。PSDではなくOmniGraffle用という点がアレですよね、通好みと言えます。OmniGraffleってサイトとかAppのワイヤーフレーム描くのにちょうどイイんですよね。あとサイトマップとか。自分もたまに使います。OmniGraffleはMac用以外にもiPad版もありますので、iPadでも使えます。デザイナーやディレクターの方に是非これひとつ。