話題のCASHというアプリのUIデザインがめちゃよくできてる
最近メルカリとDMMのファイトがスタートして盛り上がっている即時キャッシュ化サービスですが、元祖のCASHというアプリのUIデザインがめちゃくちゃ良くできてる。ちなみにiOSアプリしか見てないけど、iOSアプリを作ってる人はとりあえずダウンロードしてみる価値あると思う。 世の中にはいろんなiOSアプリがあるんだけど、UIデザインがこれすごいわと思うものってやっぱり英語のものが多かったんだけど、日本人としては日本語メインのアプリでよく考えられているものが一番参考になるんですよね。なんといってもテキストはUIで一番多く使われている部分だし。 アプリって基本的に何度も考えて考えないとゴッチャゴッチャとボタンが増えていって、結果的になんだかスッキリしない使いづらいアプリが出来上がるんだけど、CASHのアプリはすごく良くできてる。なんというか、無駄を削ぎ落としている。 まず、デザインの色の使い分けが
B2BとB2Cのデザインにおいて気をつけるべきポイント
Jenna Erickson氏は、Codal社のクリエイティブ分野の戦略家です。Codal社はシカゴに拠点を置き、モバイルサイト設計に関するトータル・ソリューションを提供しています。 ECサイトをデザインする際は、購買者がどんな人であるかを考えることが大事です。あなたのECサイトは企業と消費者どちら向けのものでしょうか？ B2B（企業 to 企業）とB2C（企業 to 消費者）のどちらのウェブサイトも、わかりやすく簡潔であることが求められます。美しい見た目のデザインも必要です。また、製品やサービスの詳細情報が提供されていなければなりません。 しかし、消費者のニーズと企業のニーズは異なる傾向があります。詳細情報の量やUX、デザインに関するニーズは、B2BとB2Cでは一致しません。 私が働いているCodalは、B2BとB2Cの両方のデザインと開発を請け負っている会社で、日常的にこれらに関する議
「BMWのドア音」に学ぶ、完璧なUXデザインのためのマイクロインタラクション
神は細部に宿る－－。たとえばBMWの「完璧なドア音」が究極のUXを生み出すように、 Webデザインではマイクロインタラクションが大切なのです。 BMWのような自動車会社がサウンドエンジニアのエリートチームを雇っていることは、驚くべきことではありません。なぜなら自動車は大きな音を出すものだからです。しかし、彼らがクルマの出す音を小さくすることよりも「チューニング」することに時間をかけていることは驚くべきことです。 たとえば、「クルマのドアを閉める音」は単にクルマを密閉する際の副次的な音ですが、作り手は「完璧なドアを閉める音」を生み出すためには努力を惜しみません。彼らは正しい「音」をつくるために材料、フィルター、空洞を調節します。同様に、ワイパー、窓のモーター、座席の調節などが、すべて美しい音を奏でるようになっています。 以上のことからデザイナーは、なにを学べば良いのでしょうか。それはUXです
使いやすいだけではユーザー体験が上げられないサービスでの、デザイン手法。
Transcript 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. 闌怴ة؎زٕ Title DeNA Co.,Ltd. Designer Masanori Miyamoto 2016.7.23 @Kanazawa ⢪ְװְֽׅדכ ِ٦ؠ٦⡤꿀ָ♳־זְ ؟٦ؽأדךծرؠ؎ٝ䩛岀կ 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. כׄח תַׁך .BUFSJBM�%FTJHOأة؎ٕד فٖئׇׁٝגְֹתׅկ� ֹהֿך䩛岀כػؙ Introduction 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. فٗؿ؍٦ٕ 㹧劤僅Ⱙ Profile Designer 2006 2012 2016
Private Presentation
Private content!This content has been marked as private by the uploader.
優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
INTERACTIVE CREATION CAMP
2014年2月、東京で、ユーザーインターフェイス・ユーザーエクスペリエンスをテーマとする ワークショップ「インタラクティブ・クリエーション・キャンプ」を開講します。 インタラクティブ・クリエーション・キャンプとは、 あたらしいデジタルクリエーションのためのスタディと実践の場です。 このワークショップで取り組むのは、インタラクション性のあるソーシャルグッドなサイネージ。 講義は国際的に活躍する現役クリエイターが、UI表現の基礎知識と技術のレクチャーから、 コンセプト立案、アウトプットに至るまでをフルサポートします。 実制作はチームで行い、クリエイターとのブレインストーミングやチームワークを体験することができます。 また、最終的にはスパイラルガーデン エスプラナード（スパイラルM2F）にて展覧会を開催。 世の中に広く発信するという機会を通して、 さまざまなフィードバックが得られるのも、このワー
言葉はグラフィックより大事なインターフェイス
2013年3月16日にAndroid Bazaar Conference 2013 Spring が開催されました。昨年に引き続き今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。 実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var
会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ！
本エントリは、20〜40代のPCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなやYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
IDEA * IDEA
IDEA * IDEA
