UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
スマホアプリやサイトに特化したギャラリーサイト17選
スマホ利用者が増えてきている現在、ホームページをパソコンからではなくスマホから見るのも当たり前になってきました。 次々にデザイントレンドも登場するため、デザイナーであれば日頃から新しい動きは把握しておく必要があります。 特に最新のデザイン、アイデアが集まるスマホデザインに特化したギャラリーサイトの活用はオススメです。 今回は、スマホに特化したギャラリーサイトをご紹介します。 スマホ向けデザインのチェックをするのに役立ちますので、ぜひ利用してみてはいかがでしょうか。 スマホ向けデザインの参考になるギャラリーサイト17選 1.Mobile Patterns http://www.mobile-patterns.com/ 要素ごとの分類が充実しているギャラリーサイトです。カメラコントローラー、カレンダー、ログイン画面を含む全22個のカテゴリがあり、様々な要素の画面デザインを確認することができます
アプリのUIデザインと配色パターンまとめ（非デザイナー向け） - Qiita
はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 デザインをする前に デザインをする前に呼んでおいたほうがいい物 - ITエンジニアに易しいUI/UXデザイン - デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - ノンデザイナーのための配色理論 アプリデザイン CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 Mobile D
ブックマークしておきたい！UIデザインのアイデアに困った時、参考になるサイトのまとめ | コリス
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
アプリのUIデザイナー必見！ 参考になる海外ギャラリーサイト9選
アプリのUIデザインをまとめたギャラリーサイトを紹介します。デザインのアイデアが思いつかないときや、アプリのUIをさらに改善したいときに参考になりますので、ぜひチェックしてみてください。 CAPPTIVATE.co http://capptivate.co/ アプリのUIを動画で見ることができるサイトで、画像をマウスオーバーすることで自動的に動画が再生されます。UIのパターンやバウンド、イージングなどアニメーションの効果でも探すことができ非常に便利です。「Capptivate.co」のiOSアプリも配信されているので、こちらもおすすめです。 UX Archive http://uxarchive.com/ 「ログイン」や「商品の購入」などユーザーの各行動フローに注目したギャラリーです。ひとつの行動フローが複数枚の画像で表現されています。アプリの機能を考えるとき、どのような画面・項目が必要な
ひたすら最新のユーザーインターフェイスを紹介し続ける「UI Movement」
ユーザーの新しい体験のためのインスピレーションがぎっしり詰まったサイトのご紹介。 実際に仕様する技術やなんやというのはないのですが、「こういう動きが体験できるといいな」というアイデアの種となるでしょう。 少し前にCSSのボタンだけをひたすら紹介するサイトをご紹介しましたが、そのユーザーインターフェイスバージョンと思っていただければと思います。 ユーザーインターフェイスのアイデア 実際にユーザーインターフェイスのアイデアと言っても様々あるのですが、特に多いのはやはりモバイルインターフェイスでしょうか。以下のような画像がずらずらと閲覧出来ます。 心地よさと軽量の両立はなかなかバランス感覚が必要な作業ですが、気持ちい操作ってやっぱりいいですよね。 ひたすらUIを紹介し続けるサイト「UI Movement」 UI Movement - The best UI design inspiration,
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
ヘッダ、フッタ、ナビゲーション、見出しなど、Webサイトでよく使うパーツのデザインを集めたギャラリーサイトのまとめ
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
UI/UXがイケてる！おすすめスマホアプリ - 第4回 Yummly - MdN Design Interactive
Amebaのクリエイティブディレクターが徹底考察！ UI/UXがイケてる！おすすめスマホアプリ 第4回 Yummly 2015年3月19日 TEXT：佐藤洋介（株式会社サイバーエージェント） より良いユーザー体験を提供するうえで、スマホアプリにおけるUIの工夫やユーザーの心的効果を考慮したデザインなどを、サービスの機能ごとに紹介していく本連載。第4回目では、Yummlyの公式アプリを取り上げる。 Yummlyとは、ユーザーの食の好みと連動した、レコメンドされたタイムラインフィードを作成してくれるサービスである。おすすめ料理はもちろん、食材から検索することも可能な、できすぎたレシピブックのようなアプリだ。 料理好きなユーザーだけでなく、厳選された料理の写真を眺めているだけでついつい見とれてしまうYummly。細部にまで配慮されたレシピブック的な世界観を感じながら、そのすぐれたUXをひも解いて
ユーザーの操作フローをアニメーションで紹介している『User Flow Patterns』 | 100SHIKI
まだ数は少ないが勉強になったのでご紹介。 User Flow Patternsでは、モバイルアプリでの操作フローをアニメーションで紹介している。 ちゃんとカテゴリー別に分類されており「利用開始のフロー」「コメントのフロー」「検索フロー」などなどを見ることができる。 モバイルアプリはユーザー体験が大事なので、こうしたサイトを参考にしてみるのもいいですな。
デザインやレイアウトの参考になる、管理画面・ダッシュボードのデザインショーケース - NxWorld
Dribbbleで見かけたのを中心に、全体的なデザインや各要素の配置レイアウトなど参考にさせてもらおうと思いメモしていた管理画面・ダッシュボードのデザインが溜まってきたので、自分の整理も兼ねてまとめました。 管理画面やダッシュボードで重要なのは見易さや操作性の高さだと思いますが、デザインにもこだわりたいという場合にいろいろ参考になります。 紹介している中にはデザインをPSDなどの形式でデザイン素材としてダウンロードすることができるものもいくつかあり、ただデザインを見るだけでなく実際にどのようなレイヤースタイルで作成されているかを見たり、それらをベースに自分好みの見栄えに変更することも可能です。 紹介しているデザインでダウンロードできるものを使用する際は、ライセンス等は各自で再度確認してください。
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック | LISKUL
photo by Robert S. Donovanウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。 そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？ この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。 受賞作品を参考に、ヒットするウェブサイトを作りましょう！ 参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント グッドデザイン賞とは？1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Collect UI
UI Movement - The best UI design inspiration, every day
Flipsblog.jp
CodeMyUI
Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ
