45000種類のモダンなUIをパーツごとに検索できるサイト「UICloud」 | ライフハッカー・ジャパン
「UICloud」は45,000以上のモダンなUIをパーツごとに検索できるサイトです。ボタンやメニューなどのデザインを検索することができ、さらにそのパーツをPSD形式でダウンロードすることも可能です。 以下に使ってみた様子を載せておきます。まずUICloudへアクセスしましょう。 このようにパーツごとにカテゴリわけされています。カテゴリから絞り込むこともできますし、フリーワードで検索して探すことも可能です。 ダウンロードボタンがあり、ここからPSD形式で素材を手に入れることができますよ。モダンなUIを探しつつ、素材も手に入るのは助かりますね。ぜひUIをデザインする際にご活用ください。 UICloud （カメきち）
iOSアプリのUIパターンをまとめた「Pttrns」 | ライフハッカー・ジャパン
「Pttrns」はiOSアプリのUIパターンをまとめたサイトです。iOSアプリにも様々なUI・デザインがありますね。Pttrnsでは、iOSアプリの色んなUIを集めてカテゴリ分けしたサイトになります。アプリのデザインを考える際に役立ちますよ。 Pttrnsへアクセスすると、左側にカテゴリが並んでいます。試しに「Launch Screen」を見てみました。アプリが起動したときの画面ですね。 アプリを起動したときに表示される画面でも、アプリによってさまざまな特徴があります。今の流行りはどのようなUIなのか、自分のアプリと同じカテゴリのアプリはどのようなUIを採用しているのかなどを考える際に非常に役立ちますね。ぜひアプリのデザインをやられている方や、実際にアプリを作っている方はUI設計時に参考にするとよいでしょう。 Pttrns （カメきち）
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
UIの学習のために生まれたUI | UXデザイン会社Standardのブログ
UIには本来のサービスが成り立つ上で必要な機能に基づいた必須UIの他に、その必要機能についてユーザーに学んでもらうための学習用UIというものが存在します。本来であればサービスに必要なのは必須UIのみだったはずですが、リリース後やリリース前の段階においてユーザビリティテストを行なった結果があまり良くないのであれば改善をすることになります。しかし、UIのどこに課題があるのかの分析と改善には時間がかかり、実装などでも工数が発生することも考えると、より少ない手間で解決する方法が望まれます。今回は、このようなユーザビリティ上の課題を解決するために生まれた学習用UIのパターンをご紹介します。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 使い方を学習するためのUIパターン もし新規のユーザーがサービスのコア機能の使い方がわからなければ、サービス自体を利用してくれな
雑誌のように美しいレイアウトを生み出すために、Flipboardが開発したレイアウトエンジン | Goodpatch Blog
はじまり 2010年、私たちはFlipboard Pagesという、Webの記事をiPad向けにマガジンページにするというレイアウトエンジンを作りました。 Flipboard Pagesは、Vanity FairやNational Geographicと言った世界一流の出版社のコンテンツをページ割します。 Pagesは、それぞれの出版社のブランドアイデンティティとカスタムタイポグラフィーを再現する美しいレイアウトを生み出すことが出来ます。限定されたモバイルデバイス（例えばiOS 3.2のオリジナルiPad）でも充実かつ高いパフォーマンスでレンダリングするために、PagesはCSS3、SVG、そしてvanilla JavaScriptを使いました。出版社のレイアウトのためのダウンロードファイルサイズは平均すると、およそレイアウト、スタイリング、フォント、ネームプレートイメージなどで90キロバ
fladdict 深津貴之氏講演会 @Samurai Startup Island
10月7日、TiltShiftGenerator などのiPhoneアプリで有名な、fladdict 深津貴之氏の講演会に行ってきました。 テーマは「使いやすいUIをつくる基本」。 聴衆の割合はエンジニア1/3、デザイナー1/3、ディレクターまたは経営者1/3でした。その場での挙手のアンケートにより「UIの手触り」「プロトタイピング」に重きをおいて話していただくことになりました。 以下、講演メモです。 確実に失敗できる10個のテクニック はじめは「こうすれば確実にプロジェクトに失敗しますよ」というお話。 裏返すと、「こうすれば成功できる10個のテクニック」ということになります。 ＜確実に失敗できる10個のテクニック＞ 1. リサーチなしにつくる そもそも需要はあるのか？競合は？技術は？ 2. 利用シーンを考えない 3. 競合製品の劣化コピーをつくる 買う理由がない、市場飽和、アップデートの
facebookの"Building Paper"はすべてのiOSエンジニアが見るべき
huin Job : Software Engineer(iOS, Android) Use : Objective-C, Swift, Java Like : Gadget, Apple, Photography, Art, Design, UI, UX More posts by huin. 日本のAppStoreでは未だ公開されていないfacebookの「Paper」ですが、 そのUIは実験的ながらも非常に高い完成度で個人的にはすごく好きなアプリです。 良いアプリがあれば "どうやって作っているのか" が気になるのがイチiOSエンジニアの性なんですが、facebook自体がPaperの裏側について説明した動画をしていて、非常に良い内容だったので紹介します。 なんのイベントなのかはよくわかってないのですが、 公開日は4/18なので比較的最近だと思います。 当然英語なので理解は浅いのです
iOS 7 Design Resources
Learn how to design great apps and games that integrate seamlessly with Apple platforms. Human Interface Guidelines Learn essential information about platforms, foundations, patterns, components, inputs, and technologies. The HIG offers guidance and best practices for designing exceptional user experiences across all Apple platforms.
心に響いた！良いデザインに欠かせない大切な10の原則 -Vitsœ
ロンドンの家具ブランド「Vitsœ」のインダストリアル・デザイナー「Dieter Rams」が提唱する「良いデザインに欠かせない大切な10の原則」を紹介します。 プロダクトデザインのお話しですが、ウェブデザインにも通じるものがありますね。 ten principles for good design 10の原則の英文はそのまま、あとは原文に沿って訳してみました。 翻訳にあたっては元ページのライセンスCC 3.0に従事しています。 Good design is innovative 良いデザインは、革新的。 ものごとを革新するための可能性は、尽きることはありません。技術の進化は常に革新的なデザインのために新しいチャンスを与えます。革新的なデザインとは常に技術とともに発展するもので、デザインだけで完結するものではありません。 Good design makes a product useful
iOS開発で使って便利だったオープンソースライブラリ
追記： ※この記事は、「既にアプリ開発者である人」がより生産性を上げれることを願って書いた記事になります。 よく理解してない方がこの記事を参考にして「これを使ったら簡単になるらしいよ」という解釈をするための記事ではありません。 利用すれば便利になる「かもしれない」というものであることを理解しておいてください。 アプリの開発は早く、その上クオリティ高く完成させるのが良いと思います。 自分で、便利クラスなどを作成している人も多くいるとは思いますが、 iOSはオープンソースなライブラリが充実しているので、できるだけ利用をして 早く確実に開発を終わらせちゃいましょう。 ライセンスはそれぞれを参照して確認してください。 ARCへの対応有無もよく確認してみましょう。 ※見出しタイトルがリンクになっています。 SDWebImage インターネット経由で画像を取得し、UIImageViewへ表示するとき、
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
空中ジェスチャ操作デバイスLeap Motionとは
新しいNUIデバイス「Leap Motion」とは Leap Motion（以下、Leap）は手の動きやジェスチャを認識し、コンピュータを操作する新しいNUI（Natural User Interface）デバイスです。では、Leapがどういったものか、説明よりも何よりも、まずは動画を見た方が理解は速いでしょう。 LeapはLeap Motion社によって開発および販売されています。Amazon.co.jpでも購入可能ですが、Leap Motion社の公式サイトからオーダーするのが最も安価です。デバイスは8200円、加えて日本への送料が1800円、税金などに500円、と合わせて1万500円になります。 ファーストインプレッション 筆者は2012年春ごろに予約していたのですが、2013年7月23日前後に世界中に発送され、1年と少しの歳月を経てようやく手に入れることができました。中には、Lea
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX/UIデザイン - OHAKO | 企画～実装をご支援
お前自分ちのページャUIが本当に速いと思ってんの？
masui / Web時代のユーザインタフェース研究 - Glide
ここがイケてない、ネットバンクのUI : 市況かぶ全力２階建
株式会社たからのやま
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
