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

Browse By

Category Archives: UI Design

[UI Design] The iOS Design Guidelines – iOS 8のUIガイドライン

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

iOS 8のUIに関するガイドラインをまとめた記事。各種iOSデバイスの画面解像度、ハードウェアスペック、iPhone 6 Plusのダウンサンプリングについて、ハードウェアごとのアイコンサイズやシェイプ、タイポの仕様、デフォルトUIのカラーパレット、UIパーツのサイズなどについて解説されています。また記事下部には参考記事へのリンクのまとめや、UIデザインする際に役立つUIキットやアイコンテンプレートへのリンクがあります。iOS Appを制作する際に参考にすべき資料がひと通りまとまってるのがナイスです。

[UI Design] uiGIFs – アニメーションGIFでUI作例を紹介するデザインギャラリー

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

モバイルAppのUI作例を、アニメーションGIFを使って紹介するデザインギャラリー。Playボタンを押す事で、UIアニメーションを見る事ができます。単純なアニメーションギャラリーとしてもナイスなサイトですが、ユーザーのアクションに対するリアクションの考察にも使えそうです。UIデザインに関わってる人にオススメ。アニメGIFなのでサクっと見れるのがイイですね。

[UI Design] 20 Free and Fresh Mobile UI Templates – モバイルAppのUIテンプレートまとめ

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

Mobile AppのUIテンプレートをまとめた記事。多くはiOSをプラットフォームとして想定した作例です。iOS 7以降のフラットUIをベースとしたものが多いです。リンク先ではPSDで配布されてる場合が多いので、UIデザインをする際の素材探しとしても使えそうです。ユル目のグラデーション、ブラー、線画のアイコン。こういったものが今のデザイントレンドなんでしょうね。

[UI Design] UXPorn – モバイルアプリのUIギャラリー

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

iOSやAndroidなどの、モバイル端末向けアプリのUIギャラリーサイト。これ系のサイトによくある感じで、様々な場面ごとにカテゴリー分けされて紹介されています。サインアップ画面やリスト画面など、同一場面での異なるアプリのUI作例を見る事ができるので、UIデザインする際の参考になりそうです。そして何よりもサイト名がアツいです。「UXポルノ」って。そういや映画のパシフィック・リムも「ロボットポルノ」とか言われてましたね。最近こういう言い方流行ってるんでしょうか。

[Prototyping] iOS 7 Wireframe Kit – iOS 7 Appを制作する際に役立つワイヤーフレームキット

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

iOS 7用のアプリ制作の際に役立ちそうな、ワイヤーフレームキット。iOS 7の各種UIパーツのシンプルな絵が多数格納されています。Downloadボタンを押す事でファイル一式が落とせますが、様々なフォーマットが用意されてる点がとってもナイス。PNG、AI(イラレ)、Graffle(オムニグラフ用)、PDF、Sketch(Sketch用)が入っているので、多くのデザイナーやディレクターの使うツールに対応できそうです。

[UI Design] iOS Design Cheat Sheet – iOS 7の、UIデザインに関するチートシート

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

iOS 7のUIデザインに関するチートシート。PDFではなくサイト内に色々と役立つ情報が記載されてます。iOSデバイスごとの解像度、Appアイコンのサイズ、UIパーツの端末ごとのサイズ、ツールバーやナビゲーションバー、タブバー内の各種アイコンなどが紹介されてます。iPhoneやiPadを対象としたApp制作の際に役立ちそうです。

[UI Design] Inspired UI – Mobile AppのUIギャラリー

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

Mobile AppのUIギャラリーサイト。iPhone, iPad, AndroidのUI作例を扱っていて、ページ上部のアイコンで各プラットフォームごとに作例を抽出できます。またCategoriesからは、App内に共通する各場面ごとの画面キャプチャを抽出する事もできます。iOSだけでなくAndroidの作例も扱っている点が、ネタ帳としてナイスですね。今仕事でAndroid App作ってるんですが、普段使わない(というか興味がない)のでこの手のギャラリーサイトはとっても助かります。

[UI Design] First Time User Experiences – Mobile App初回起動時のユーザーエクスペリエンス考察ブログ

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

Mobile AppやWebサービス、ガジェットなどを初めて使う時のユーザーエクスペリエンスについて「いいネ!」とか「良くないネ!」とかいう意見を紹介するTumblrブログ。紹介されている事例はiOSやAndroidなどのMobile App初回起動時のチュートリアル画面が多いです。Appやサービスを初めて使うユーザーに対して、分かりやすく案内するチュートリアルの手法とや流れを知りたい時にネタ帳として使えそうです。そういう配慮って大事っすよね。まぁチュートリアルなんてなくてもすぐに使えるようなUIが一番イイんですが。