雑誌のように美しいレイアウトを生み出すために、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キロバ
Android Pattern Cookbook で見るトレンドの変遷
6. 目次 1章 : Structure - アプリの構成と階層 2章 : Branding - オリジナリティを出す 3章 : Helps - ユーザーを導く 4章 : ViewPager - 画面切り替えの定番 5章 : Support Tablet - 柔軟性のあるレイアウト 6章 : CustomView - 思い通りのレイアウト 7章 : Advanced - 1つ上のカスタマイズ
カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
エスカレーターはどう見ても階段なのに止まってなければならないなんてアフォーダンスに反するよなあ
エスカレーターはどう見ても階段なのに止まってなければならないなんてアフォーダンスに反するよなあ 2013-10-23-3 [Design] エスカレーターで歩いて（走って）追い越す人のために片側をあけておく習慣について。 「エスカレーターでは片側を開けず、並んで立つ」を少しずつ浸透させたい (頭ん中) http://www.msng.info/archives/2013/10/escalator.php 非常によく分かります。危ないですよね。啓蒙していきたいところです。とはいえ、苦難の道。 特に駅のエスカレーターは啓蒙では無理かと。あれだけアナウンスしても駆け込み乗車減らないし。 なので、デザインで解決ですね。やはり、一人幅のエスカレーターを増やしていくしかないかと。子供と並ぶ場面も考えて1.5人幅くらいがいいかな。さすがに追い越しできないだろうし。 まあ、そもそも階段なのに止まってなけれ
Google、Android用のUIテスト自動化フレームワーク「Espresso」公開
アプリケーションの画面に対してボタンを押したり入力を行い、正しい結果や答えが返ってくるか？ ユーザーインターフェイスを含むテストコードの開発は一般に手間がかかり面倒であり、テスト用のライブラリやフレームワークが欠かせません。 Googleは、Android用のUIテスト自動化のためのフレームワーク「Espresso」をテクノロジープレビューとして公開しました。 Espresso - android-test-kit - a fun little Android UI test API - Testing Tools For Android - Google Project Hosting EspressoはこれまでGoogle社内で、Google DriveやGoogle Maps、Google+など30種類のアプリケーションのテスト自動化に使われてきました。 特徴は、軽量でシンプルな記述
Tuneup JS+Travis CIによるiPhoneアプリ自動UIテストまとめ - 5.1さらうどん
最近、iPhoneアプリの開発に自動UIテストを取り入れてみたので、手に入れた知見を共有してみたいと思います。 この記事について iOSアプリケーションの自動UIテストを行うためのノウハウについて解説します。 この記事におけるUI自動テストとはiOSシミュレーターや実機を自動で起動し、予め記述していたとおりに操作させ、アプリケーションが問題なく動いているかどうかをテストする手法のことです。 今回はTuneup JSと呼ばれるライブラリを用いて、アプリの自動再生、要素のチェック、画像比較によるテストを行い、最終的にTravis CI上で動かすところまでを書いています。 iOS開発の知識のほか、JavaScript, Rubyを知っていると良いかも知れません。 ここで紹介するもののいくつかはRuby製であり、RubyGems, Bundler, Rakeなど、最低限のユーティリティが動く・使え
Androidアプリのあれがやりたい
WebGL Tokyo Meet upで話したスライドです。 WebGLのセットアップからGLSLなどの、Hello Worldをざっくりと解説しています。
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
Almost Flat UI
Provides extra visual weight and identifies the primary action in a set of buttons
Modern UI のようなフラットデザインを目指して使いづらくなっている件について | DevelopersIO
Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。 一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました *2。2013年4月現在の最新バージョンである4.2（Jelly Beans）もこの流れを踏んでいます。 両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在
ユーザーファーストを実現するmixiの開発プロセス - mixi engineer blog
デザインユニットUXデザイン担当の酒井です。 mixiでは昨年来、最重要キーワードとして「ユーザーファースト」を掲げ、ユーザー様のご意見やご利用状況に基づいたサービス施策の実現を素早く行えるようになるために、開発プロセスの改善を継続的に行なっています。今回は、この「ユーザーファースト」なmixiを実現するための取り組みについて、具体的にご紹介していきたいと思います。 なぜ今、ユーザーファーストなのか？ 昨年11月に開催した『ユーザーファーストウィーク』で笠原社長からもご説明させていただきましたとおり、mixiというサービスが大きく成長したこれまでの数年の間に、いつのまにかユーザー様と私達との間に「ギャップ」が生まれてしまったという強い反省があります。mixiを取り巻く外部環境の変化に対応していく中で、これまでもユーザー様にとっての「心地よいつながり」とは何なのかを真摯に検討し、時流に合わせ
ユーザーレビューとどう向き合う？ クックパッドiPhoneアプリに酷評殺到の背景 (1/3) - ITmedia ニュース
2月初め、「クックパッド」のiPhoneアプリが新しくなった。従来は、検索機能中心のシンプルなアプリだったが、新アプリはレシピ提案機能などを充実させた多機能でモダンデザイン。Web業界では好評で、絶賛するニュースメディアやブログも多かった。 だが、ユーザーがApp Storeに投稿したレビューは辛らつだった。「前の方が良かった」「使いづらい」など酷評が集中。「☆」1つの評価が大量に投稿され、“炎上”状態になっていた。 その後のバージョンアップなどで徐々に評価は戻っており、最新バージョンでは「☆4」や「☆5」の評価も増えてきた。だが、最初のバージョンアップ時に多くのユーザーが低評価を投稿したため、全評価の合計を見ると、3月末現在でも、「☆1」が大多数のままだ。 思わぬ反応に、クックパッドの橋本健太CTOは「メジャーバージョンアップで完成ではない。これからがスタート。改善を繰り返していきたい」
直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
じーさんばーさんとタッチパネル - ２４時間残念営業
2013-03-27 じーさんばーさんとタッチパネル http://mainichi.jp/feature/news/20130326dde012040063000c.html 読んだ。 洗濯物の乾燥が終わるまでヒマなので書いてみる。 常日頃じーさんばーさんの相手する商売やってるわけだが、ＡＴＭの操作なんかでもじーさんばーさんに教えるのはひと苦労である。まったく操作できない人というのがいるわけだが、また考えてもしゃーないのに「なんでこんなに使えないんだろう」というようなことはよく考える。 で、まず思いつくのは「そもそもタッチパネルというものの意味がわからん」ということがあるようだ。つまり「画面に触ると操作される」というのが、どうしても感覚的に納得がいかないらしい。操作体系ってのはなかなかに厄介なもので、たぶんその人が三十代とかそれくらいの年齢で「体系」まるごとが新しく入ってくる段階ってのは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
各種サービス入会・退会 ｜ Pontaパス（旧名称：auスマートパスプレミアム）
ニコニコ動画（Re:仮）
『UIが変わる度に文句いう人 - 良いあそなすちゃん』へのコメント
流行に乗っていいの？フラットデザインの落とし穴
「iOS 7」における、デザイン哲学のせめぎ合い