デザインとエンジニアリングの垣根を取り払う秘訣とは？～テクニカルクリエイター対談 #03～｜Technical Creator Hub
佐藤 洋介 株式会社サイバーエージェント チーフ・クリエイティブディレクター 「Ameba」のクリエイティブ統括室 室長として、スマートフォン向けサービスのデザイナーを統括。 クリエイティブ責任者として各サービスのUIデザインを監修 木村 真理 クックパッド株式会社 デザイナー Web制作会社、スタートアップ企業でデザイナーとしての経験を積んだのち、2015年6月にクックパッドに入社。 主にクックパッドiOS／Android アプリ、料理写真をプライベートに記録するアプリ「お料理アルバム」の サービス改善、UIデザインを担当 より便利に、より使いやすく。コンシューマーに向けてアプリ・サービスを提供するITサービスベンダーは、今、変わり続け、高度化するユーザーのニーズにいかに応え続けるかという難問に直面している。そんな課題に対し「AbemaTV」「AWA」「Ameba Ownd」とい
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
関数型UIプログラミング - 標高+1m
Pasta(deprecated)とかkakahiakaとかcastorocaudaっていうのを2012年くらいからぽつぽつ作ってて、その時に考えていたこと。多分Fluxも同じことを考えてて思いついたんだと思ってる。あと継続ベースのWAF( Seasideとかkahuaとか )とも通じる部分がある。*1 狭義の関数型プログラミングには値と関数しかない*2ので状態が持てない。つまり入力から一意に出力が決まるプログラムしか書けない。つまりアプリケーション自体が一つの関数である必要が有る。 こういうアプリケーションの典型例としては、対話式でない単純なシェルスクリプトがある。完全にステートレスな(裏にDBがあったりしない)Webサーバの各エンドポイントとかも当てはまる。 $ echo hello hello このパラダイムで対話的UI(例えばWebフロントエンド)を作るには、シェルの役割を果たすフ
UIは画面サイズと解像度だけで解決できなくなる - ワザノバ | wazanova
http://wordpress.tv/2014/11/05/luke-wroblewski-from-the-front-lines-of-multi-device-web-design/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 WordCamp San Francisco 2014におけるLuke Wronblewskiの講演です。UIデザインで考慮すべきは、画面サイズと解像度だけでなく、視聴距離、ポスチャー（詳細後述）、周囲の明るさという要素も必要になってくるという話。 スマホ端末を両手もしくは片手で持つ場合を合わせて、75%のユーザは親指を使って操作している。 タブレットのランドスケープモードとポートレートモードの利用比率は、6:4とか7:3とか言われるが、要は両方に対応する必要がある
スマホUIの際限ないレベルアップ - ワザノバ | wazanova
http://blog.brianlovin.com/design-details-pinterest-for-ios/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 Brian LovinのUI分析シリーズは継続して紹介してきましたが、前回のFoursquareのポストでは、「確かに各社ともレベルが高いけど、さすがに似たようなものが増えて飽きてきたな。」と感じました。しかし、今回のPinterestのiOS版については、「ここまで工夫するのか。」と関心させられるものもあり、UIの競争はまだまだレベルアップしていきそうな気がしてきました。 原文で全体をチェックしていただくのがよいかと思いますが、個人的に気に入ったのは、 4) Pull to refresh ビデオ この効果を自社オリジナルのもので作
X to Close
X’s are everywhere in user interface (UI) design. A powerful symbol, [x] is capable of closing windows and popups, toolbars and tabs and anything else that might otherwise be cluttering up your screen. Twitter XClicking on [x] to close a feature has become an instinctual part of using a computer and a standard in web and software design. Although it may seem like the ubiquitous [x] has always been
モーダルを閉じるボタンのUIは右か左か | UXデザイン会社Standardのブログ
モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内容や一貫性によって判断する必要があります。 モーダルとは ボタンの位置を考える前に、まずはモーダルとはどういったものかを紹介します。アプリケーションでのモーダルはユーザーに行動を制限し、特定のタスクに集中させるモードです。もちろんアプリケーションという意味では、ホームボタンを押したりマルチタスクにより他のアプリケーションを使うことができるため完全な制限ではありませんが、現在使用中のアプリケーション
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
各LTちょびっとメモ：Yahoo! JAPAN DeNA iOSエンジニア UI/UXデザイナー勉強会 - エンジニアをリングする
「Yahoo! JAPAN DeNA iOSエンジニア UI/UXデザイナー勉強会」に参加してきました！ ちょこっとずつですが、各発表で心に残った部分をメモしたのをのせますー （メモだけじゃ全然内容わかんないのでスライド公開されたらリンクさせていただきたい・・・。） ちなみに発表内容はイラストレーターさんにより会場でリアルタイムでイラスト化されていました！すごい！ 描かれたあと会場に掲載されていたのでその写真も一緒に載せます！ブレ気味ですみません。。 マンガボックスのアプリができるまで (坪田 朋さん@DeNA) PhotoshopからSketch 3へ移行 プロトタイピングツールProttの導入 （最初だったのであんまりメモできなかった。。。） タブレット版「Yahoo!ニュースアプリ」のこだわり (田中 淳子さん@Yahoo!) 当たり前を上質に〜とにかく読みやすく〜 デバイスを知る
Yelp: iOSアプリに組み込むweb viewをネイティブっぽく表現する - ワザノバ | wazanova.jp
http://engineeringblog.yelp.com/2013/11/whoa-that-embedded-web-view-looks-hot-in-your-ios-app.html Yelpがエンジニアブログで、ネイティブのユーザビリティを崩さずにweb viewをネイティブアプリに組み込む工夫を紹介しています。 Yelpのモバイルトラフィックは、2013年の第３四半期平均で月間1,100万ユニークデバイス iOSにおいてアプリにウェブを組み込む一般的な手法は、UIWebViewをつくって、それにURLを渡すことだが、それだと、読み込み中のままコンテンツがすぐに表示できない事態に陥ることになる。 1) ネイティブっぽいページ遷移を実現する まず、前提として、UIWebViewはURLのリクエストを読み込もうとするとき、そのdelegate（通常はcontroller）を呼び
Path for iOS: UIデザイン - ワザノバ | wazanova
http://blog.brianlovin.com/design-details-path-for-ios 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 iOSアプリで最初にPathがでてきたときは衝撃的にUIがカッコいいなと思いましたが、それから数年たって、自分の周りでPathをまだ使ってる人は残念ながらかなり減ったような。。プライベートなソーシャルネットワークという位置づけが中途半端だったんでしょうか。カップル向けのようにかなり特化したものが生き残っているところからすると。 最近、iOSでスタンドアロンのメッセージアプリをだして、相変わらずUIは素敵なようです。 1. Log in modal（ビデオ） メール/パスワードを入力してログインするモーダル画面が、揺れながらフェードイン & フェー
ユーザインターフェースのアルゴリズム - ワザノバ | wazanova
https://www.youtube.com/watch?v=90NsjKvz9Ns 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 (注)参照しているビデオは、矢印キーで前のページに移動した後に、再び矢印キーで指定しているページに戻ってこないと、うまく再生機能が起動しないようです。面倒ですが、済みません。 Mark DiMarcoのJSConf 2014での講演です。アルゴリズムがどのように適用されているかを、数式でなく、映像で説明してくれているのが、とてもわかりやすいです。 Amazonのプルダウンメニューの工夫の話は聞いたことがありましたが、元をたどればAppleが発明したものだけどOS Xに移行するときに使われなくなった（コピーし忘れた？）テクニックなのですね。知りませんでした。 1) 画面
SoundCloud: iOSアプリのUI - ワザノバ | wazanova
http://blog.brianlovin.com/design-details-soundcloud-for-ios 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 SoundCloudは、ブログからのPodcast配信のプラグインとしてよく使われているのは以前から知ってましたが、個人的にはミュージックプレーヤーとしては利用したことはありません。既に数十万のアーティストが楽曲のシェアに使ってるんですね。「Youtube for music」と呼ばれるレベルのサービスになってるとは気づいてませんでした。 リニューアルしたiOSアプリは残念ながらレビューは2.5程度ですが、Brian Lovinが取り上げているいるように、UIではいくつか細かい工夫がされてます。 個人的に気に入ったのは、まずは細かいと
Learn Design Code
The best resources for learning design and codeReceive hand-picked designer and developer tools, news and resources delivered to your inbox weekly.
無限スクロールの問題点と解決方法 - 記録
無限スクロールとは、ページの下部までスクロールすると自動的に新しい要素が追加される機能のこと。TwitterなどのSNSのタイムラインを初めとして様々なウェブサイトで使われているが、いくつかの問題点も指摘されている。 無限スクロールのよく知られた問題点と、それに対する解決方法をまとめた。 別のページに移動してから戻ると継ぎ足しがリセットされる リンクがクリックされたときは常に新しいウィンドウを開くようにしたり、 Lightboxのようなモーダルな擬似ウィンドウをページ内に開いたりすることで、ページの遷移そのものを抑制するという方法がある。 また、次の項目で紹介する「History APIでURLを書き換える」という方法を使えば、読み進んだ位置は復元される。 permalinkが取れない 同じページに次々と新しい内容が継ぎ足されていくので、いま自分が見ているページのURLが分からないという問
iPhone Dev Sap勉強会で発表した「iPhoneアプリのUIデザイン - NoteCubeの場合」の資料を公開しました。 - らっこのじゆうちょう
5月10日の「iPhone Dev Sap勉強会 May, 2014」で発表した「iPhoneアプリのUIデザイン - NoteCubeの場合」のスライドを公開しました。 iPhoneアプリのUIデザイン - NoteCubeの場合 from Daigo Wakabayashi NoteCubeというメモアプリを制作する際に、UIについてどのように考えてデザインしたかについてお話しました。 https://itunes.apple.com/jp/app/notecube-shinpurude-shiiyasuimemoapuri/id657311491?mt=8&uo=4&at=11ldBU アプリのUIについては、いろいろと思うところや伝えたいこともあるので、次回7月のDevSap勉強会でも何かお話したいなーと思っています。
facebook/pop を使ってみた - Qiita
最近 FacebookがOSSとして公開した pop は Paperで使われているアニメーションライブラリです 少し触ってみたので基本的な使い方などをまとめてみます この記事はブログでも公開しています pop とは 公式ブログに記事があるのでそちらがとても参考になります Introducing Pop, the animation engine behind Paper iOS や OS X でアニメーションを実装しようとするとCoreAnimationを使うと思うのですが実はCoreAnimationはなかなか使いにくいライブラリだったりします。確かにCABasicAnimationは簡単ですが、Timing Functionをlinear, ease-in, ease-out, ease-in ease-outの四種類と3次ベジェ曲線のいずれかからしか指定することができません。これだと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NSLondon: Asynchronous UI by Scott Goodson - July 2014
ユーザーインターフェイスのデザインのヒント - Apple Developer
ページャ実装マニアックス
