【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選UI/UXという言葉を聞いて久しいですが、みなさんは基本的な考え方をきちんと理解できているでしょうか？様々なアプリを触り、「このアプリのUI/UXいいよね」と言う人は多くいますが、UI/UXを何となく知っている感じになっていると思います。 そこで今回はUI/UXの基礎が学べる資料をSlideshareから30�個集めました。デザイナーの方は必見です！
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
どんな動きにするか悩んだときに！UIアニメーションのインスピレーションを得られるサイトまとめ | Goodpatch Blog
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか？いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました！ （以下”Interface Animations and Transitions: where to get inspiration”の翻訳。） photo credit: Jorge Quinteros via photopin cc UI/UXデザインにおいて、細
ビビッドな色使いが目を引く、フラットなUIデザインのアプリまとめ | Goodpatch Blog
Feedly: Your Google Reader, Youtube, Google News, RSS News Reader 14（無料） カテゴリ: ニュース, エンターテインメント 販売元: DevHD – DevHD Inc Website RSSフィードリーダーのFeedly。メインカラーとして鮮やかな黄緑を使っており、カテゴリー部分では色を多用しています。慣れればどのカテゴリーかぱっとわかりそうで良いですね。 Infomatic Website Infomaticは自分のTwitterやFacebookの使用状況を統計で確認できるアプリ。残念ながら日本のアップルストアではダウンロード出来ませんが、青をベースとした配色が綺麗ですね。 Figure
1分でわかるUIとUXをわかりやすく説明する写真とお話 | インタラクションとデザイン
ユーザインタフェース 使いやすいように、 わかりやすい画面に、 間違えにくいように、 美しい情報デザイン、 丁寧な説明。 すばらしいユーザインタフェースができた。 ユーザエクスペリエンス しかし、そのATMは少し時間がかかった。 結果的にお客さんは並ぶことが多くなった（気分を害す、イライラ）。 「お金を引き出す、預ける」という銀行の体験は悪くなってしまった。 解説（UIからUXが重要と言われようになった理由） この場合、良いユーザインタフェースを設計できたとしても、並んでしまうことを問題として扱わなくなる。ユーザインタフェースの設計としては、最高のATMを提供することはできるだろう。しかしユーザエクスペリエンスからみると、最高の預金・引出体験にはらない。つまり、最高のUIを提供しても、ユーザの問題を解決したことにならない。だから「ユーザの体験という視点からUIを設計していこうよ！」という流
BootstrapのUIがドラッグアンドドロップだけで組める！最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 - Chrome Life
先日、Twitter Bootstrapが2.1.1にアップデートされました。 Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。 最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。 とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。 Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。 そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。 jetstrap - B
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
UIが美しすぎる15の次世代モバイルアプリデザイン ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
世界的なスマホの急速な普及とそれに伴う様々なアプリの登場と共に、モバイルデバイス向けのUIデザインも様々な試行錯誤と進化を続けているようです。今回は、デザインにはこだわりのある人気ITメディアThe Next Webのスタッフが選んだ次世代のモバイルアプリを担う15のUIデザインを紹介します。 — SEO Japan コードを学ぶのと同じように、デザイナーとして上達する一番の方法は、習うより慣れることだ。それでもやはり、優れた作品を称賛して模倣すること（という名の練習）が驚くべき効果を発揮しないというわけではない。何よりも、他のデザイナーが過去にしたことを見ることは、相当な時間の節約になる。なぜならデザインには歴史があり、誰もが有効なものと有効でないものから学ぶべきだからだ。 今回の記事では、あなたのデザインのインスピレーションのなるような、15の見事なユーザーインターフェース（UI）のリ
無料で使えるUIデザインの基本要素が詰まった32の素材集 ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい！という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
ニコニコ超会議2012『超エンジニアミーティング』で喋った時のスライドを公開します - ぼくはまちちゃん！
こんにちはこんにちは！！ ニコニコ超会議2012 『超エンジニアミーティング』で喋った時のスライドを公開します！ 『ふつうのformをつかいたい』 - はまちや２ - ニコニコ超会議2012 難しい話は苦手なので、普通のお話です。 あとこのスライドはIEでは動きません。他のブラウザで見てね。 (追記) IEでも見られるようになりました。たぶん。 超エンジニアミーティング全体の内容については、 『ニコニコ超会議の「超エンジニアミーティング」 を全部取材してみた』でまとめてくれています。 ちなみにぼくは自分が喋ったあとは、ずーっと隣の『ニコニコ学会β』の発表を見てました。 ロボット作ったりとかすごいかっこいい。 (関連記事) その言葉は誰のためのもの？ [この日記のブックマークコメントを見る/書く ]
UX/UIデザインガイドライン : 小野和俊のブログ
このところ、アプレッソの中でも、MIJS製品技術委員会でも、自分たちのソフトウェアのUX/UIをブラッシュアップしていくためにどんなことができるのかをディスカッションしている。 UX/UIデザインガイドラインとして各社の推奨する指針をまとめたものがWebで公開されているので、プログラマーであれデザイナーであれ、ソフトウェアの画面設計に何らかの形で携わるのであれば、基礎知識として主要なものには目を通し、プログラマーがデザインパターンの用語で手短にコミュニケーションが取れるのと同じように、「ここは○○ガイドラインの△△パターンを使うのはどうかな？」というような会話ができるようにしていきたいと思っている。 ■ Apple ・アップル ヒューマンインターフェースガイドライン ・iOSヒューマンインターフェースガイドライン(PDF) ・iPadヒューマンインターフェースガイドライン(PDF) ■ M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
勘違いだらけのAndroid UIデザイン
Tei SPe ぶろぐ:Rainmeter Skins - おすすめスキン
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!
