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

Browse By

Category Archives: UI Design

[UI Design] Design Guidelines. – IT企業各社のデザインガイドライン資料まとめ

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

AppleやGoogle、Microsoft、Airbnb、IBM、Salesforce、Ubuntuなどの各IT企業が展開するプラットフォームに関するデザインガイドラインをまとめたサイト。AppleならiOS、GoogleならMaterial Design、MSならUniversal Windows Platformにおけるガイドラインが紹介されており、サイト内から直接資料に行く事ができます。各プラットフォーム用にUIデザインする際の資料として知っておくと便利ですねこれ。

[UI Design] UI Movement – クールなUI作例を動画で紹介するデザインギャラリー

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

クールなUI作例を、動画を使って紹介するデザインギャラリー。各作例のサムネールに付いてるPlayボタンを押す事で動画が再生されます。アニメーションやトランジションもUIの大事な要素なので、ソレ系のネタ探しする時に使えそうです。また各作例はパーツごとにタグ付けされているので、探したいパーツを見つけるのもサクっとできます。コレ系のギャラリーに多い「場面」ごとではなく、「機能やユーザーによる行為」による分類という点が特徴的だなーと思いました。

[UI Design] uxtools.co – 各種UIデザインツールのできる事一覧

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

なんか最近やたら増えているUIデザインツールの、できる事一覧ページ。このジャンルだとCraftとかFramerあたりが有名だけど、最近になってAdobe Xdなんてのも出てきましたからね。やっぱ大手が参入するとジャンル全体がアツくなりますからね。それぞれプラットフォームやインポート可能なフォーマット、アニメーションやトランジションの可否、シェアリング先などについてスペックが一覧にされています。UXの考察や、UIデザインツール探す際に便利そうです。ちなみに俺はたまにAdobe Xd使ってます。サクっとプロトタイプ作るにはこの手のツールはちょうどいいんですよね。

[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のアカウントがいるみたいです。

[Design Gallery] UI Interactions – クールなUIインタラクションを紹介するデザインギャラリー

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

モバイルAppのクールなUIインタラクション作例を、動画で紹介するデザインギャラリー。作例によってiOS AppだったりAndroid Appだったりします。動画なので動きを含めて閲覧できるのがイイです。App制作時の動きの考察やネタ探しに使えそうです。

[UI Design] Appealing – アニメーションにフォーカスしたUIデザインギャラリー

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

アニメーション部分にフォーカスしたUIデザインギャラリー。各サムネールをクリックすると、動画でアニメーション作例を見る事ができます。コレ系のデザインギャラリーのセオリー通り、スプラッシュスクリーンやサーチなどの各場面ごとにタグ付けされて管理されているので、特定の場面のみを抽出して閲覧できます。アニメーションやトランジションのネタ探しに良さそう。

[UI Design] Collect UI – 毎日更新されるUIデザインギャラリー

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

モバイルAppやMac, PC用アプリのUIデザインギャラリー。毎日更新されているようで、結構な数が紹介されています。この手のギャラリーサイトお約束の、場面ごとにタグ付けされて管理されているので、お目当ての画面だけの抽出などは楽に行えます。クリックするとデザインとソースへのリンクが表示されるだけのシンプルな作り。UIデザインする時のネタ調として便利そうです。

[UI Design] UI Movement – クールなUI作例を、動画で紹介するギャラリーサイト

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

クールなモバイルAppのUI作例を、動画で紹介するサイト。iOSやAndroidアプリ、またMac用アプリなどのデザイン作例を、動きも含めて見る事ができます。ただしトップの一覧画面からアニメーション全開なので結構重いです。アニメーションも含めたUIデザインをする際のネタ調になりそうなサイト。紹介作例もかなり多いです。