モバイルアプリの多くが表示する、初回起動時のチュートリアル画面を動画で紹介するギャラリーサイト。アプリ導入の際に、ユーザーに対してどのように使えばイイのかを紹介する大事な機会なので、どのアプリも丁寧で凝った説明、演出をしています。またココの部分にコストかけてるなーという作例も多く見られます。この場面でヘマするとせっかくダウンロードしてくれたユーザーにそっぽ向かれちゃうので当然と言えば当然ですね。このサイトは動画で見れる点が特徴で、トランジションなども含めて他社製アプリの作例を研究できます。チュートリアル制作のネタ探しに使えそうです。
様々なWebサービスが今のデザインに至るまでの変遷を、タイムライン形式で見ることのできるサイト。まだ新しいサイトのようで紹介例はそれほど多くないけど、メジャーどころだとVimeoやDropbox、Airbnb、Spotifyなど紹介されています。UXタイムラインとはあるけど、どちらかというとデザイン面にフォーカスされているので、UIデザインの変遷、つまりは試行錯誤のプロセスを見れるサイトと考えた方が良さそうです。サイトのデザインって使い勝手に直結しますからな。参考にしたいものです。
Mac用アプリケーションのクールなUI作例をまとめたブログ。実際にAppとして稼働しているものもあれば、UIコンセプト止まりのものもあります。これ見てて思ったんだけど、最近ウィンドウ左端にダークグレーのナビゲーションのあるApp増えましたよね。TwitterとかSlackもそうだし。このUI最初にやり始めたのって確か今はなきSparrowだったような気がします。あとメニューバーアプリの吹き出し的装飾もFantastical以降クールなもの増えましたよね。UIデザインする時にネタ調として使えそうです。
iOSやAndroidなどのモバイルアプリや、WebのUIデザインに関するギャラリーサイト。プラットフォームや画面の場面ごとにタグ付けされていて、参考にしたい画面を素早く抽出する事ができます。UIデザインする時のネタ帳に良さそうです。しかしこれ系のUIデザインサイトって増えたなぁ。いくつもあるからその内まとめ記事でも作ってみようかな。
iOS 9のUIテンプレート。よくあるPSDでの配布ですが、このテンプレートはアートボード形式で保存されているので、1つのPSD内に複数の画面のUIがまとめられています。UIデザインする時にPhotoshopのアートボードを使う人には使いやすいと思います。アートボード確かに便利ではあるんだけど、画面数増えてくるとPhotoshopの動きが鈍くなるのがアレなんですよねぇ・・・。
Nine-Patch、もしくはNine-Sliceと呼ばれる、主にAndroid Appなどの開発現場などで使われるボタン画像フォーマットのジェネレーター。主に上下左右に大きさが可変する角丸ボタンに使われるアレを、簡単にWebから生成できるというものです。Nine-Patchがどういうものであるかはこのあたりを参照してください。画像の作り方は簡単で、まずは「Select Image」ボタンからNine-Patch化したいPNG画像を選択。ロードされると右側に表示されるので、あとは拡大に応じて伸長するエリアとコンテンツパディングを指定するだけ。またこの際「Trim」のプルダウンメニューから「Stretch Region」を選ぶ事で、必要な画像部位だけにトリミングしてくれます。なのでPhotoshopを使ってUIデザインをしている場合、いつも通りに画像をアセット保存して出力されたフルサイズのボタンPNGを放り込むだけでオッケー。画像を最小サイズにするのはジェネーレーター側に任せる事ができます。いちいち制作サイドで最小サイズにトリミングする手間が省けます。
またこのジェネレーターでさらに便利なのが、画面中央にある「Interactive Preview」という機能。これをクリックすると、現在のNine-Patch指定で画像がどのように伸縮するのかを、実際にドラッグして挙動を確認する事ができます。これがもう死ぬほど便利で、指定ミスによる想定外の挙動を防ぐ事ができます。あとプログラマーに渡す直前に「この動きでオッケーだよね？」的な確認をするのにも便利です。Nine-Patch画像はPhotoshopだけでも作れるといえば作れるんだけど、こういう便利なツールはどんどん使っていきたいですな。
モバイルアプリのクールなトランジションやアニメーションを、動画で紹介するサイト。アプリケーションごとに紹介され、また各エントリーは場面ごとにタグ付けされているので、例えばボタンとかナビゲーションといった感じで、異なるアプリの同一場面だけを抽出して見る事もできます。UIデザインでアニメーションについて考える際の参考になりそうです。
iOS 9向けにアプリをデザインする際に役立つ、UIガイドラインを分かりやすくまとめた記事。まぁApple純正のガイドライン読めば分かるっていえば分かるんですが、ここではその中でも特に重要な点を画像を使って分かりやすくまとめられているのがナイス。レイアウト、フォント、ディスプレイ解像度、スプリットビュー、アイコンのサイズやグリッド、カラー、ボタンやフォントのサイズについて、スペーシングやアライン、マージン、各種純正パーツのサイズ、キーボードなどについて端的に仕様を紹介しています。また記事最下部にはiPhoneやiPad、Apple WatchなどのGUIテンプレートへのリンクなども紹介されており、なかなか気の利いた記事だと思います。UIデザイナーの方にひとつ。
