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

Browse By

Tag Archives: UIDesign

[Design Resource] Designer Mill – デザイナーのための素材紹介サイト

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

デザイナーのための様々な素材を紹介するサイト。モックアップやアイコン、UIキット、フォント、Webテンプレートなど、デザイナーにとって役立ちそうな素材が紹介されています。変わったとこだとNintendo Switchのモックアップなんかもあります。デザイナーの皆様、お役立てください。ちなみにSwitch、秋にSkyrim出るらしいので、お外でもSkyrimできる専用機としてちょっと欲しいです。

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

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

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

[Web Design] Use Your Interface – アニメーションで見るインターフェース作例

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

動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。

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

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

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

[Mockup] iOS 10 GUI 2.0 – iOS 10のPSDとSketchテンプレート

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

iOS 10のGUIテンプレート。PSDとSketchのフォーマットで配布されています。昨日ちょうど正式版公開されましたしね。わたくし初期化厨でして、メジャーアップデートのタイミングで毎年iOSデバイスを初期化しております。昨日iPhone 6 Plusを初期化&iOSインストールしたんですが、これやると新品みたいにサクサクになるので超快適でございます。iPhone 7 Plus予約したけど、まだ6で戦えるんじゃないかって思うくらい。まぁ初期化した後のAppインストール大会とかスゲぇ面倒なんですけどね。

[Game] GraphicGraphics – ゲームのUIやコンセプトアートを紹介するブログ

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

ゲームのUIやオープニングムービー、コンセプトアート、ロゴデザインなどを紹介するTumblrブログ。デザイナーの目線でビデオゲームを見てるので、ゲームデザインやグラフィックデザインの参考になります。好きなゲームのコンセプトアートにハァハァできるタイプの人なんかにもオススメ。The Last of Usのこのアートワークとか、鼻血5リットル噴射するくらいかっこいいです。ちなみに俺はフロントミッションのヴァンツァーデザインとか見てるだけで超ハァハァします。Evolvedで大コケして以来音沙汰無いですけどね・・・。

[Freebie] App Icon Template for Sketch – iOS, Android用のアイコンテンプレート

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

Sketch用の、iOS / Andoroidアイコンテンプレート。編集から各サイズへの書き出しまで行う事ができます。またアイコンのコアな部分はシンボル化されているので(Photoshopで言うスマートオブジェクトみたいなもの)、1つ変更すれば全部変わります(iOSとAndroidでは共有化されていないようです)。それぞれデバイスのホーム画面やAppStoreではどのように見えるかのプレビューもできるようになっているので、確認しながら作りこむ事ができます。アイコン制作する時に使えそうです。

[Generator] The App Icon – iOSとAndroid用のアイコンファイルを一括で書きだしてくれるサイト

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

1枚の画像からiOSとAndroid用のアイコンファイルを一括で書き出す事のできるサイト。1024 x 1024の画像ファイルを放り込むだけで、各プラットフォームの開発や申請に必要なアイコンファイルをまとめて生成する事ができます。またiOS用のフォルダ内にはwatchOS用の画像ファイルも自動で作られるため、Apple Watch App制作の際にも使えます。PhotoshopではPSDとアクションの組み合わせでできたりするけど、自動処理系がそれほど充実していないデザインツール使っている人にとっては、この手の一括書き出しツールは便利ですな。