マテリアルデザインについて少し調べる - Qiita
はじめに マテリアルデザインという言葉は知っていましたが、それが一体なんなのかを正しく理解しないまま、 「これからは、マテリアルデザインだぜ」のような顔して、生活していましたが、 知ったかぶりしているのがバレる前に、少し学んでおこうと思いました。 マテリアルデザインとは 2014年にGoogleが発表した「デザインのガイドライン」。 直訳すると「物質デザイン」。 マテリアルデザインの目的 スマートフォン、タブレット、テレビ、メガネ、腕時計などのデバイスで、 統一されたデザインを取り入れることにより、操作性も統一され デバイスが変わっても使いやすいUIを実現できるとか。 現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現します。 マテリアルデザイン誕生までの歴史 1.スキューモフィズムでのデザイン スキューモフィズムとは スキューモーフィズム（skeuomorp
【心理学から学ぶUXデザイン】デザイナー必見の5つのルール
Webデザイナーにとって、経験は重要です。しかし、経験のみに基づいてデザインを考えるのは、リスクがあるかもしれません。 たとえば、Webサイトを大幅に再設計してはならないという原則をご存知でしょうか？ あるいはまた、閲覧者が男性の場合と女性の場合とで、Webデザインはどのように差異化させるべきでしょうか？ Webデザインには、何十年もの研究と心理学実験に基づいた心理学的アプローチがあるのです。 以下では、心理学に裏付けられたUXデザインのヒントを、5つご紹介します。 1．可知差異に関するウェーバーの法則 過去5年間にFacebookを使用していた人は、デザインがあまり変わっていないことを知っていますね。3,500億ドル以上のメガ企業であるFacebookなのですから、この3年間で多くの変化があってもおかしくなかったはずです。にもかかわらず、 Facebookが、そしてFacebookだけで
実績のあるUI/UXデザイン会社12選（業務範囲、依頼時のコツ） - ポップインサイト
UIデザイン、UXデザインをアウトソースする会社を探しているけれど、選定基準がよくわからないと思われる方も多いのではないでしょうか。本記事では、UIデザイン、UXデザインを得意とする会社をピックアップし、特徴や得意分野を紹介します。パートナー選びにお役立てください。 ポップインサイトでは、リサーチのファクトにもとづいたUXのKPI策定、情報設計、UXデザイン、サービス改善、新規事業開発を支援しています。また、株式会社メンバーズ全体のシナジーによりデザイン領域、運用改善まで広く対応できます。 UXデザイン・UXリサーチについてお困りの際は、お気軽にご相談ください。 UXUIデザイン・UXリサーチについて相談する＞＞ ※サービス紹介資料の無料ダウンロードする＞＞ UIデザイン/UXデザイン会社の業務範囲 UIデザイン/UXデザイン会社に依頼するとどのような仕事をしてもらえるのかを確認しておきま
アンダーラインと可読性：リンクをどのようにデザインするか？
Cassandra Naji氏はJustinmindのマーケティングコンテンツ制作者です。Justinmindはあなたのソフトウェアソリューションをコードを書かずに視覚化しテストする為に、ウェブとモバイルアプリのプロトタイプ作成可能にするプロトタイプ製造するツールです。 Webの黎明期から、ハイパーリンクはオンライン上での体験の基礎をなす要素でした。リンクを開くということは、Webを閲覧している人々が最も頻繁に実行する行為のうちの一つであるということが研究で分かっています。 30年以上に渡り、デザイナーたちはリンクの新しいデザインを試してきましたが、今でもアンダーラインが最も広く使われています。青いアンダーラインのハイパーリンクは最も広く理解されているWebでの慣習の一つです。 World Wide Webは文書とリンクから構成される ―Tim Berners-Lee, 1991 一方で、
Viewのanimateメソッドで動きのあるアプリへ！ - Qiita
// scaleがXとY二倍になった後 textView.animate().scaleX(2f).scaleY(2f).setDuration(1000).setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animator) { } @Override public void onAnimationEnd(Animator animator) { textView.animate().scaleX(1f).scaleY(1f).setDuration(2000); } @Override public void onAnimationCancel(Animator animator) { } @Override public void onAnimat
U-NEXT キャリア
U-NEXTは、2007年にサービスを開始した動画配信サービスのパイオニア。「ひとりひとりに、最高の時間を配信する。」 をミッションに、いま次のステージに進むべく、新たなメンバーを積極採用しています。会社についての情報はコーポレートサイトもぜひご覧ください。
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる
Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開 非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった： 非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。 ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる
スマホでの商品表示はグリッドビューとリストビューどちらが最適？ | UX MILK
グリッドビューはEC系のアプリでよく使われる手法ですが、これには何か理由があるのでしょうか？ シンプルなリストビューよりグリッドビューの方が成果が上がるのは、どのような場合でしょうか？ この記事では、グリッドビューについて細かく見ていきつつ、双方の問いに対しての答えも探っていきたいと思います。 グリッドビューとは グリッドビューとは、標準のリストビューに代わる、コンテンツの表示手法です。グリッドビューは水平方向と垂直方向の両方に、２つ以上のセルを配列することで成立します。
『行為のデザイン』に書かれている8つの"バグ"の分類がUXデザインの参考になる
以前、以下の記事で「UXバグ」という言葉を聞いてなるほど！と思っていたのですが、『行為のデザイン』の提唱者であるデザイナーの村田智明氏も日常における問題点を「バグ」と表現しています。 参考：「ユーザー体験の品質を見える化」する「UXバグ」の考え方とは？／HCD-Net通信 #29 | HCD-Net通信 | Web担当者Forum （ちなみに、IDEOトム・ケリー氏の著書『発想する会社！』でも、「バグ・リストをつくる」ということがイノベーションのためのインスピレーションにつながると書かれています。） さて、『行為のデザイン』ではそのバグを8つに分類しており、「UXバグを考える際のフレームワークになる」と感じました。 個人的なトレーニングも兼ねて、８つのバグの分類を紹介しつつ書籍には載っていないバグの例を挙げてみます。 ※8つのバグについては、こちらの記事にもまとめられています。 参考：人の
誰のためのUI？ Dropboxのデザイナーが語るUXライティング
Windowsに「My Computer」のアイコンがあった時代を覚えていますか？ あなたのコンピュータ上にある、すべてのアプリケーション、ファイルやその他のデジタルコンテンツを詰め込んである、小さなアイコンのことです。 後のバージョンのWindowsでは、Microsoftはこのアイコン名を「Computer」へと変更、さらには「This PC」へと変更しました。その理由は何だったのでしょうか？ 「my」が何を指すのか曖昧だからでしょうか？ どこか矛盾しているからでしょうか？ それとも必要なかったからなのでしょうか？ このアイコン名の変更は、私に大きな疑問を抱かせました。なぜこのような製品は時として、「私のもの（my〜）」や「あなたのもの（your〜）」という言い方をするのでしょうか？ 「あなたのもの」を何と呼ぶか？ 様々なアプリを見ていくと、UI上であなたの所有かどうかを表す基準は存在
UI考：なぜそのセルには押せる感があるのか - Qiita
この記事の目的 セル（UITableViewCell）は iOS においてもっとも一般的なビューのひとつです。セルを利用することで、コンテンツの表示、選択、スイッチやボタンの配置、テキストフィールド、ナビゲーションを実装することができます。この辺りの具体的な実装例は『設定』や『Apple Store』が参考になるでしょう。セルにはさまざまな役割を与えられますが、どのような作法に従ってデザインされているのかよく理解する必要があります。 セルの一般的な利用作法は iOS Human Interface Guidelines で解説されていますが、私はこれを読んだだけでは十分に理解が及ばなかったため、iOS 標準アプリの事例からセルのデザインについて考察したものをまとめました。この記事では iOS の標準的なセルのデザインパターンを探り、自身のアプリにどう活かせるのかの土台となるよう考察してみま
アラートのOK、Cancelボタンは右と左、どちらにおくべきか？ - Qiita
はじめに 皆様は、アラートのOKボタンとCancelボタンの配置は どういった基準で決めていますか？ (右か、左か？） 勿論、スマートフォンを右手で操作する人、 左手で操作する人で、変わってくると思いますが、、、 基準はどうすべきか？ ちなみに、押しやすいのは、右か、左か？ 右手で操作する人を想定した場合 押しやすいのは、右側だと思います。 単純に親指からの距離が近いためです。 逆に左側は、親指からの距離が遠いため、 押しにくいです。 （当たり前ですね。） こういうときは、各プラットフォームのガイドラインに準拠するのがベターだと思います。 「郷に入っては郷に従え」ではないですが、 iOSの場合はヒューマンインタフェースガイドライン、 Androidの場合は、Google Material designに準拠すべきだと思います。 iOSヒューマンインタフェースガイドラインの存在 存在を知って
Hatena Design Hour #3 を開催しました - Hatena Design Group
6月3日（金）に、はてな東京オフィスにて、デザイナーイベント『Hatena Design Hour #3』を開催いたしました。 Hatena Design Hourは、Webサービスの開発に関わっている、Webサービスに興味がある、そんな、Webサービスが大好きなデザイナーのためのイベントです。弊社デザイナーによる各担当サービスのデザイン業務をバックグラウンドとした、デザインに対する考え方を紹介しました。 ありがたいことに、今回も定員を大きく上回るご応募をいただきました。抽選に漏れた方、申し訳ございません。次回のイベント開催時にも、このブログで告知しますので、ぜひご応募ください。 イベントで行った各プレゼンテーションの概要をご紹介します。 はてなブックマークエリアガイドのデザイン（百合佐織） はてなブックマークの新機能「エリアガイド」を作るときに考えたコンセプトやデザインを自分の体験を交え
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
色の距離（色差）の計算方法 - Qiita
はじめに 例えば以下の2つの画像，左と右の色を比べたときにどちらの方が色が近いと思いますか？ #FF0000と#400000 #FF0000と#FFBF00 単純にRGB値の距離を計算すると二つの色の距離は同じ． しかし１つ目の画像は単に暗くなっただけなのに対して，２つ目の画像は色相が変わっているため，例えば写真のマッチングを取る場合は上の方が似た色として判別した方が都合が良くなったりする． こうした色の距離，色差の計算について実装してみた． ソースはJava 8を前提に書いているが，Androidでも動作する（はず）．ただし，AndroidではColorクラスが違うため適宜変更してほしい． 下準備 JavaとAndroidのColorクラスの違いや，RGB値の保存などを目的として下記のクラスを準備する．RGB値のint値を受け取るとそれぞれをdoubleの値として配列を作成し，保存する．
Sketchブームに終止符！？ついにAdobeがUXデザインツール「Adobe XD」を公開！ - Tortoise Shell
Adobeが、ついにUXデザインに特化したツール「Adobe XD」を公開しました。 下の動画を見てみてください。 Adobe XD (Preview): Quick Demo これまでのAdobeらしからぬ、大変シンプルなUIですね。 UIデザインのツールといえば… PrototypeモードはUIデザイナー待望の機能 Sketchの運命やいかに 当ブログのおすすめ記事 UIデザインのツールといえば… ところでUIデザインのツールといえば、ここ数年で「Sketch」がブームになっていますね。 最近はデザイナーの求人などを見ていても、東京のIT企業を中心に「Photoshop, Illustrator, Sketchを利用したUIデザインの実務経験を有すること」という表記を目にするようになりました。 Sketchは、確実にUIデザインのツールとして普及してきています。 そんな中で、Adobe
プロトタイプに発生する溝と対処法
完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像で探すView系Androidライブラリまとめ(2016/08) - Qiita
