アプリのUI設計は「紙でやる」のが早い！ - Qiita
はじめに こんにちはー！！ UI設計やってますか？ 今回は「ペーパープロトタイピング」の話。 アプリでは主流になってる現場も少なくないですよね！ 今までのやり方とペーパープロトタイピングの違いや、 プロトタイピングツール「POP」と「Prott」の比較の話なんかをしようと思います！ 今までのアプリUI設計 Webデザインと同じ方法でアプリ設計を行っている場合、手順は ●ワイヤフレーム→モックアップ→実装 厳密に言うと ●①ヒアリング→②ワイヤフレーム→③レビュー→④モックアップ→⑤レビュー→⑥実装→⑦レビュー デザイナーがいないと ●①ヒアリング→②ExcelでUI設計→③レビュー→④実装→⑤レビュー って場合も結構多いと思います。 これ結構時間かかりますよね～。 しかも！ 大抵の場合、実装後のレビューの段階（つまり最終段階）で 「やっぱここ動きおかしいよね！直せる？」 「・・・。（えー！
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
新OS「Android 5.0 Lollipop」はどこが新しいのか、新旧UIデザインを徹底比較するとこんな感じ
「Android史上最大のアップデート」と呼ばれる新OS「Android 5.0(Lollipop)」が、Nexus 9・Nexus 6で登場したのを皮切りに、次第にアップデート対応端末が増えてきています。Lollipopでは統一UIデザイン「Material Design(マテリアルデザイン)」が採用され、ガイド機能をもつアニメーション表示だけでなく、パッと見て次に何をすればどんなことが起こるのかが分かりやすいシンプルかつカラフルなデザインが採り入れられているとのことですが、従来のAndroid 4.4(KitKat)と比較するとこんな感じで、デザインがどのように変更されたのかが一目瞭然になっています。 Gallery: Android 5.0 Lollipop, before and after | Ars Technica http://arstechnica.com/gadgets
【驚愕！】エレベーターのUIデザイン！これは4進法のエレベーターだ！ : KNN KandaNewsNetwork 4knn.tv
このエレベータのボタンを見た瞬間、これを作った会社が恐ろしい…と感じた。 単なる作業しかしていない。 設計した人は、はじめて使う人のことなど、何も考えずに図面を引いたのだろう。 製作した人も、図面どおりに造ることしか考えていない。 そして、この文字盤の装置をつけられた会社も、文句を言わないという鈍感さ。 はじめてきた人は、このエレベータのボタンを探す度に、どれだけストレスを感じるのだろうか？ このようなプロダクトが、世の中に存在してしまう怖さに黙っていられない…。 そう、誰かが指摘しない限り、このような醜悪なデザインは、はびこりつづけるのだ。 いまだに、フロッピーの形をしている「保存ボタン」など メタファーの意味を履き違えている。 AドライブもBドライブもなく、Cドライブから始まる、ディスクデザイン。 いつまで、フロッピーディスクドライブ時代のデザインを踏襲しているのだろうか？そして、いつ
Design Sprint デザインスプリントを用いたサービスのプロトタイピングと検証で得られるものとは？ | UXデザイン会社Standardのブログ
2014.11.12 / Report Design Sprint デザインスプリントを用いたサービスのプロトタイピングと検証で得られるものとは？ Kenichi Suzuki Webやアプリの新規サービスを制作する際、チームの予想だけで仮説を構築し、最後までそのアイデアが効果があるものかどうか分からないままローンチをしてしまった、という事はないでしょうか。または、新しい機能のアイデアが閃き、半年以上かけてメジャーアップデートをしたにも関わらず、成果に結びつかなかった、という経験はないでしょうか。 CB Insightsが発表した調査結果によると、スタートアップが手がけるサービス失敗のほぼ半数は、市場のニーズがなかったことに起因するとされています。なぜこのような事が起こっているのでしょうか。それは新規のアイデアをサービスとしてリリースまたはサービスの一部として追加する際に、アイデアの妥当性
UIデザイナー募集で困ってること | F's Garage
トレタCOOのkengochi氏がUIデザイナーについての記事を書いてた。 UIデザインの価値 | Parallelminds BASEでも、ずっとこの辺の職種も募集していて、来月１人入るんだけど、実はUIデザイナーの募集はすごく困っている。 というのも、今、BASEでほしいUIデザイナーとは、 ・いわゆるWebデザイナーではないし、 ・いわゆるフロントエンドエンジニア（JavaScript実装特化型）の人でもない。 というところ。まさしくkengochi氏が書いてる「のりしろ」重要 じゃぁコアスキルって何？ってのを、経験者採用の理想を言えば、 １．D.A.ノーマンの本ぐらいは読んだことがあって、ユーザインターフェースを意識しながらユーザビリティの高い設計ができて ２．ビジュアルデザインのスキルもあって、カッコいサイト、サービスが作れて、 ３．ちゃんとユーザーさんのことを意識できて（つまり
アプリ制作でプロトタイピングを導入する前に知っておきたいこと | UXデザイン会社Standardのブログ
2014.10.29 / Prototyping, UI アプリ制作でプロトタイピングを導入する前に知っておきたいこと Ryo Yoshitake Form、Launch、Mitya、Origami、Pixate、Prott、Weld… これらが何であるか、みなさまはご存知でしょうか。 実は上に挙げたのは、ここ1年間で世に出たモバイルアプリ・Webページ用のプロトタイピングツール / サービスの名称です（まだローンチしていないものも含めればもっとあります）。 ここ2年ほどで、アプリを中心としたプロトタイピング市場は急激に拡大しており、すでに知られているメジャーなものも含めればその数は優に30を超えます。 それゆえに、プロトタイピングに興味を持ち始め、これから使ってみたいと考えている方の多くは、どのツールを使えばよいか迷っているのではないでしょうか。 しかし、プロトタイピングを行う上ではツー
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
UIと製品のカスタマイゼーション
UIをユーザーがカスタマイズ可能なウェブサイトは、通常のサイトと同程度のユーザビリティがあると評価された。しかし、製品をカスタマイズするためのサイトは、複雑なワークフローが原因でかなり悪い評価となった。 Customization of UIs and Products by Jakob Nielsen on August 17, 2009 ウェブベースのカスタマイゼーションは新しいものではない。1990年代半ば以来、カスタマイゼーションはウェブがたどる運命であり、あらゆるビジネス上の問題への万能薬であると大げさに宣伝されてきたものだ。こうした誇大広告を除いても、適切に実装されれば、ウェブベースのカスタマイゼーションがビジネスとユーザーの双方へ利益をもたらすものとして実際に活用可能なことは明らかである。 カスタマイゼーションによって使いやすくなるアプリケーションは多い。それでも、企業が必死
Webデザインの慣習を破ることは、ユーザーエクスペリエンスを破壊すること
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics（：学部・大学院）、Admissions（：入学案内）、Prospective Studen
スマホ大画面時代、親指リーチ範囲が鍵となる新たなインターフェースデザイン
スマホ大画面時代、親指リーチ範囲が鍵となる新たなインターフェースデザイン2014.09.25 21:0010,005 そうこ 片手で扱うならば、親指がスマートフォンの鍵となる。 スクリーンの巨大化ーー賛成反対と意見がわかれつつも、アップルがiPhone 6／6 Plusをリリースしたことで、ついにスマホ大画面時代が一気に花開きました。初動で歴代予約記録を更新した新型iPhone、つまり世の中もこの時代の流れを受け入れたのではないでしょうか。 3.5～4インチのディスプレイは、急激にその姿を消しています。Adobeによるモバイルベンチマーク2014年レポートでは、4インチ以下のスマートフォンでのWeb観覧は11％も減少しているのです。 時は大画面。とはいえ、はてしなくディスプレイが大きくなるわけでもありません。大画面時代を先行してきたAndroid端末でも、最も好まれているのは5.1～5.7
航空機の操縦席にみるユーザーインターフェース設計によるミス防止策とは
By Doug 人間が機械やコンピューターを操作する際に情報を表示したり指示を入力する装置はユーザーインタフェースと呼ばれ、その設計の良しあしで操作性や実際のパフォーマンスが大きく左右されると言って過言でないほど重要な役目を持っています。実際に起こった飛行機事故のケースをもとに、ミスを防ぐUI設計における一つの解決策が述べられています。 Poor UI Design Can Kill – Air Inter Flight 148, a harsh lesson learned | Martin Doms http://blog.martindoms.com/2011/01/24/poor-ui-design-can-kill/ 1992年1月20日、エールアンテールが運行するITF148便はフランスのリヨンから国内北東部に位置するストラスブール国際空港に向けて飛行していました。目的地が近づ
iPhone Stencil Kit
Quantity (0 in cart) Decrease quantity for iPhone Stencil Kit Increase quantity for iPhone Stencil Kit Quickly sketch out iPhone UI prototypes. Brainstorm your application ideas using our precision cut stainless steel stencil and mechanical pencil. iPhone Stencil Kit comes with: - One iPhone UI Stencil - Zebra mechanical pencil - Plastic protector - UI Stencils stickers Features: - 90% scale of iP
アマゾンのログインページが10数年ぶりにデザイン変更へ
また1つ、歴史が動きます。 アマゾンと言えば、そのシンプルかつ機能性重視なデザインが全サイトを通して徹底されています。一時期の流行に振り回されることなく、うちはうちの方針でプログラムされたような整理整頓スタイルを貫いてきました。そのアマゾンが、ついにログインページのデザインを変更しました。 TwitterユーザーLuke Wroblewskiさんが新旧を比較していますが、新デザインはより簡素なものに。今までの｢Eメールアドレスを入力してください｣｢パスワードを登録しましたか？｣というネット初期を思わせる会話形式は終了。ちょっと悲しくもあります。アドレスやパスワードの入力は当たり前となった現代には、会話形式では不要、テキストボックスを設けておけば十分ということ。またその縦長なデザインもモバイルへの意識が強まっているのを感じます。 さようなら、横長ネット時代。こんにちは、縦長モバイル時代。時代
成功したがゆえに崩壊しつつあるiOSのシンプル哲学 - UXエンジニアになりたい人のブログ
前回こんな記事を書いた。要約すると「戻る」に手が届かねえって話。 同意も多かったのだが、「左端をエッジスワイプで戻る」が実装されている、というコメントを多くもらった。試してみたところ。。。。おお！すごい！たしかに！iOS7からNavigationControllerのデフォルトの挙動として実装されてるらしい*1。 で、これやってみた人いる？なんかやりづらくなかったですか？やりづらかったですよね？やりづらかったことにしましょう。その経緯とそこから広げて色々書いてみようと思うので！ 長いですごめんなさい。崩壊の話が聞きたい人は「行き詰まり」から読みましょう。 なぜエッジスワイプはやりづらいのか そもそもスワイプとエッジスワイプの違いはわりと難しい。 スワイプは真ん中辺りにポイントして、上下左右に動かす。エッジスワイプは端にポイントして、内側に動かす。 スワイプとエッジスワイプ このブログに来る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
新着記事
UIデザイン
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
