You can see the designs from the ui challenge below, we extended it with the components we found, updating daily. See stats for frequency.

NewsPicksのデザイナー片山です。 NewsPicksAdventCalendar2018の15日目を書かせていただきます。 テーマは2018年の振り返りですが、 2019年の粗い予想も交えていけたら。 大きく銘打ってしまいましたが、箸休め的に読んでいただけると幸いです。 ＊2018年の自分自信を振り返る 今年は自分にとっては大きな変化が起こった年でした。 Photoshop大好き人間だった私が、 アプリのUIの仕事を受けるようになり、 エンジニアとのコミュニケーションコスト削減のため 意を決してSketchに乗り換えたのです。 使っていくうちに、魔法のように便利で手放せなくなりました。 今ではアプリだけでなくWEBデザインもスケッチでやっています。 こうやって時代の流れに抗えず、メインツールを変え、 使い方を勉強していると今まで覚えてきたショートカットとかはなんだったのかと思うこと

by Heima ウェブサイトやアプリに用いられる「フラットデザイン」は、モダンですっきりした印象を人に与えます。しかし、コンサルティング会社であるニールセン・ノーマン・グループの調査によって、フラットデザインには、ユーザーに余計な時間を割かせ、決断力を弱める効果があると判明。ボタンなどのナビゲーションがフラットデザインになることで、ユーザーのページ滞在時間は増えるものの、ブランドへの見方がネガティブなものに変わる可能性もあるとのことです。 Flat UI Elements Attract Less Attention and Cause Uncertainty https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 調査グループは一般のウェブユーザー71人を集め、それぞれのユーザーに9つのウェブ

はじめまして、ZILMOO株式会社(www.juusando.com)のUXUIデザイナーのハフィドと申します。私はモロッコ出身で、日本への留学、大手制作会社をへて現在の会社を立ち上げました。子供の頃からロゴデザインやグラフィックデザインの活動をしており、大学では哲学・心理学を学んでいました。現在は、UXUIデザインなどに携わっています。 また、東洋美術学校・日本電子専門学校でUX/UIデザイン講師としても活動しています。 2014年からコミュニティ(UXUI Designers)を主宰し、イベントや勉強会などを定期的に開催しています。 Twitter：https://twitter.com/hafidbourhim Dribbble：https://dribbble.com/juusando UUDコミュニティ：http://uuds.peatix.com/ , https://www.

1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ

課題の本質を明確にし 新たな価値を 共創します 複雑で正解のない課題を解くために、NTT研究所で長年蓄積してきた人の特性に関する専門知識・調査ノウハウを活用。俯瞰的に全体像をとらえながら、課題の本質とユーザーのニーズを明確にします。課題の当事者（ユーザー・管理者・提供者・意思決定者など）や専門家を巻き込み、みんなが賛同する解決策を創出します。 Our Approach ユーザー視点と 技術視点を融合し 最適な解決策を提案します デザイン思考のアプローチをベースに、ユーザーの行動・価値観・取り巻く環境を理解し、課題・ニーズを掘り下げます。ユーザーへの提供価値を明確にし、最先端の技術も取り入れて、プロトタイピングとテストのサイクルを回しながら、解決策の精度を高めていきます。

ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード

スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で

世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/

締切からずいぶん時間が経ってしまいましたが、いただいた回答をまとめてみたいと思います。 なお、総回答数は494件でした。この件数に関する考察はまたのちほど。

Pocketには本当に気に入った記事・心を動かされた記事が保存されていて、たまに見返すとかなり面白い。今回は保存してきた記事の整理がてら、何度も読みたい記事を厳選して紹介してみようと思う。 まなび系の記事 もらえる経験値を最大化する「正しい努力」のまとめ 努力することについて精神論だけでなく、段階を踏んで論理的に説明している記事。 今すぐ動画で「プログラミングの基礎」を独学できるWebサービス10選はコレだ！ ぼくはプログラミングを学び出したときはドットインストールを使っていたが、他にも色んなプログラミング学習サービスがあるので、自分のレベル・性格に合ったものをうまく使い分けると良い。 UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ どのスライド資料もクオリティが高く、短時間で効率よくUIデザイン・Webデザインの基礎を学ぶことができる。 人を惹きつけ人を動かす文章

日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル

WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所

3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども（ようは、専門家じゃない人向けということですが）、まずはそのたたき台という感じで（だからVersion 0.1）、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、本気で本職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い

iOS 7ではユーザーインターフェース(以下、UI)がフラットデザインになり、見た目も操作方法もこれまでのiOSとは違うものになりました。そんなiOS 7向けアプリを開発するデベロッパー向けに、AppleがUIデザインで気をつけるべき点やガイドラインなどをまとめています。 Designing Great Apps - Apple Developer https://developer.apple.com/design/ このサイトは登録済みiOSデベロッパー向けのもので、iOS 7向けアプリをデザインする上で必要な要素を、複数のページとApple World Wide Developer ConferenceやTech Talksのムービーを使って解説してくれます。 例えば、UIデザインのヒントを集めているのが以下のページ。 UI Design Dos and Don'ts - Apple

高齢者へのiPad導入を阻んだiOSのUI/UXの話 先月（2013年11月）、徳島県南部局と美波町が共催する「ITふるさと村」の講座で、iPadを使ったタブレット講座を開催しました。その成功と失敗の体験について書こうと思います。 Facetimeビデオ通話のデモで会場を一気に盛り上げたものの、参加者に実際に体験してもらう段階で「大失敗」。AppleIDの取得とそのためのiCloudメールの登録をしてもらってから、と進めたのですが、30名ほどの参加者のうち時間内にゴール出来たのは、たったの１名。好きなアプリをダウンロードしてもらい、タブレットの楽しさを感じてもらう目標が、そのスタート地点にも立てず(;_;) 企画や運営、インストラクターとしては完全に落第点でした。それを棚に上げると、高齢者とITに関する課題が大量に見えたという点では、ある意味「大成功」だったとも言えるでしょう。 【講座内容

インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる