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

Browse By

Tag Archives: iPhone

[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制作をしている人に超オススメ。常用アクションになりそうです。

[PSD] iPhone 4S Template – iPhone 4SのPSDテンプレート

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

iPhone 4SのPSDテンプレート。サイト内では白iPhoneのサムネールしか紹介されてませんが、PSD落とすとちゃんとBlackモデルも入ってます。3500*2200pxで制作されていて、これだけ大きければだいたいの用途に使えます。アルミパーツの質感の表現なんかも丁寧で、あいぽんも各種角度のものがあり、もちろん各パーツ類はレイヤー分けされています。けどこの手のテンプレートって種類が色々あって迷っちゃいますね。

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

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

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

[PSD] Free Iphone Template – iPhone外観のフリーテンプレート

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

フリーで配布されているiPhone 4系の外観テンプレート。フォーマットはPSDです。4376px*2229pxというサイズで、かなり大きめのPSDです。角度の異なる5種類のiPhoneが描かれていて、それぞれ個別に編集する事ができます。ナイスなのがディスプレイ内に表示されている画面が1つのPSB(スマートオブジェクト)を共有している点。レイヤー内の「Edit Me」を修正すれば、全5パターンのiPhone全ての画面表示が変わります。これを利用すれば、iOS AppのUIデザインを使ったアートワーク制作や顧客への確認資料が手早く作れます。iPhoneの外観PSDというとiOS 5 GUI PSD (iPhone 4S)が特に有名ですが、これはこれで別の使い道があってイイと思います。あと細かいパーツの描画がかなり丁寧です。ホームボタンとかアルミ部分のテクスチャとか。iOS AppのUIデザインしてる人に是非これひとつ。

[Web Design] Creating Retina Images for Your Website – サイト内の画像をRetina対応させる方法

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

サイト内の画像ファイルをRetina対応させる方法についての記事。まずはアイコンの高解像度版を用意して、さらにサイト内のイメージの対応の仕方についても解説されてます。高解像度版の画像には“@2x”を付けるというのはサイト制作でも通例となりそうですね。画像の振り分けについてはMediaQueriesで対応してるようです。ちなみにウチのブログではiPadからのアクセスが全体の4%弱あります。これって結構多いよなー。まぁ4%の中の何%がiPad 3rdなのかは調べてませんが、Retina対応できるもんならしたいところ。

[Icon Design] iOS App Icon Template – iPad 3rdも含めたアイコンテンプレートPSD

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

毎度お世話になっているPixelResortのアイコン製作用テンプレートPSDがアップデートされてました。早速DLしたのですが、以前のバージョンに比べて確認できる要素が増えていてビックリ。っていうかこれスーパーですわ。アイコンデザインする際にめちゃめちゃ便利。以前のバージョンに加えてRetina iPadのアイコンサイズが増えているのはもちろん、ホーム画面に置いた時やAppStoreでの見栄えなどをまとめてチェックできます。書き出し用のアクションファイルもVer. 2.0になっていて、申請用の角アリ、確認用の角丸双方を選んで書き出せます。また以前のアクションファイルは書き出しまで一気に行っていたのに対し、新しいものではフォトショの書き出し用パネルで止まるので、JPGなのかPNGなのか選べるようになってます。スマートオブジェクト1つを編集すれば全部の解像度に適用されるという使いやすさはそのままです。iOS Appのアイコンデザインをする人必携のPSDと言ってもいいくらい。いやーナイスですねー。

[Icon Design] iOS App Icon Template – The new iPadのサイズも含めたアイコンテンプレート

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

新しいiPadがRetinaディスプレイになって、アイコンサイズは144 × 144になるそうです。というわけでアプリのアイコン制作にまた一手間増えると・・・。iPhone2つ、iPad2つ、Store用の512サイズの合計5つがいるわけですね。んで早速そのRetina iPad用のサイズも含めたアイコンテンプレートが出てました。記事内「Download」のリンクからDLする事が出来ます。ただテンプレートとしてはそれほど効率化されてないかなーという印象。ちなみに自分は普段Pixelresort.comのApp Icon Template使ってます。ところでThe new iPadって何て呼べばイイんでしょうね? iPad 2012とか?