UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
[Web] UI/UXデザインがわかるサイト8つのまとめ
ここ数ヶ月、gleesyという新しいサービスをつくっているのですが、 どうにもデザインが難しい！ デザインが主観的な仮説の積み重ねになってしまっていて、いかがなものかと思ったので、 ユーザビリティの理論を調べてみました。 と、言ってもただの自分のためのまとめメモですが。 あと、gleesyが気になった方はhttp://gleesy.com/より事前登録をお願いします。 【0.目次】 ―基本 ・ユーザビリティ5原則 ・デザインガイドライン ―ガイドライン ・３つのチェック項目と5つの法則 ・インターフェースデザインで気をつけるべき10のこと ・カラーデザインの原則 ―評価方法 ・ユーザビリティテスト ・ヒューリスティック ・チェックリスト ・認知的ウォークスルー ・シナリオウォークスルー 【Ⅰ.基本】 まずは、ユーザビリティの基本となる考え方です。 ユーザビリティを考慮したサイト設計は以下の
![[Web] UI/UXデザインがわかるサイト8つのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3eb672b73358f759376101aa51cca30d48f0e13e/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F-ULtIWFct5AM%2FTjFRdl166eI%2FAAAAAAAAAoY%2FFM3B0bh872U%2Fw1200-h630-p-k-no-nu%2Fuxresearch_01_03.gif)
GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」:phpspot開発日誌
sDashboard GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」。 次のように、ページ内にドラッグ＆ドロップで移動できるウィジェットを配置し、各種グラフやリストで表示できるダッシュボード作成フレームワーク。 １画面でサイトやアプリの重要な指標をまとめたい場合に使えそうです。 関連エントリ HTML5＆レスポンシブなPHPダッシュボード作成フレームワーク「RazorFlow」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 Windows8スタイルのダッシュボードUIが作れる「Dashing」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」
2013年、この一年で大きく変わったウェブサイトのナビゲーションの5つのトレンド
ウェブサイトに使用されるナビゲーションはこの一年の間に、大きく変わりました。スクリプトやスタイルシートを使い派手なアニメーションやインタラクションを取り入れることもできますが、最近のトレンドはよりシンプルで、すっきりしたデザインが好まれています。 最近のナビゲーションのトレンドを紹介します。 Up and Coming Navigation Trends 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。最近海外のブロガーから他ブログでの無断翻訳・転載の声を聞きます。 ナビゲーションの欠如 スクロールベースのナビゲーション ミニマルなナビゲーション サイドのナビゲーション サークル状のナビゲーション 終わりに ナビゲーションの欠如 最初にあげるナビゲーションのトレンドは、ナビゲーションの欠如です。これは二つの条件が揃えば機能します、一つは
ユーザーの知識は低いレベルで停滞する
学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何
UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？ まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
画像にビフォーアフターを実装できるjQueryプラグイン - NxWorld
使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。 商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。 全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。 TwentyTwenty 使用方法 「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。 パスなどは自身の環境に合わせて変更してください。 <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js
[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll
スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する
UIが変わる度に文句いう人 - 良いあそなすちゃん
iOSを始め最近あちこちのWebサービスでUIが変わり始めていますね。UIが変わる度に主にTwitterで文句を垂れる人がいるけど、じゃあ、お前の中でどうなったら最適なUIなのかをブログにかいてくれよ。って僕はいつも思ってる。UIが変わる度に条件反射でTwitter開いて「クソUI」の4文字をテキストエリアに叩きこむ余裕があるなら、UIが変わった理由を考えてほしいし、ちゃんと客観的な理由でクソであるんだったら「クソUI」の4文字を許容できると思う。WebサービスのUIが変わる度に思考停止気味な「クソUI」の文字列にうんざりするし、僕が1番危惧しているのは、思考停止の塊の連中がうだうだ言うせいで、Webサービスのユーザの幸せを願ってUIの改善に注力しているチームがUIを改善することに抵抗を感じてしまうとそれはもうWebサービスっていうかものづくりの破滅の始まりだ。 慣れたUIがいい人達、必要
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013 いま多くの開発者が取り組もうとしているモバイルアプリケーションの開発は、経験の面でも技術の面でも、コンシューマ向けの開発現場が大きく先行しています。 9月6日開催されたSalesforce Developer Conference Tokyo 2013のセッション「B2Cからみたモバイルアプリケーション開発のいまとこれから」では、コンシューマ向けサービス開発の現場に身を置いてきた伊藤直也氏が、モバイルアプリケーション開発を成功させるための方法を、これまでの経験や現在の開発現場で得たノウハウなどを基に語っています。 試行錯誤の回数を増やす、iOSとAndroidは同じように作ってはいけないなど、モバイルアプリケーション開発に関わるエンジ
必要な情報に素早くアクセスできるスライドメニュー·Multi-Level Push Menu MOONGIFT
Multi-Level Push MenuはJavaScript製のソフトウェア（ライセンスは独自。利用は自由）です。 Webサイトのメニュー表示はいかに深い階層であって素早くアクセスできるかが大事です。そこで今回はMulti-Level Push Menuを紹介します。スマートフォンに似たスムーズなメニュー表示が特徴です。 一例。オープンすると左からメニューが表示されます。 深い階層に行く度に左からメニューが追加（プッシュ）されてきます。 こちらは別なメニュー。同じ幅で上書きされて、上にBackリンクが表示されます。 こちらの場合は上記二つを組み合わせたスタイルになっています。 デモ動画です。上記3つのパターンを試しています。 親メニューが右側に残っているパターンですと、そこをクリックして複数階層を一気に戻れるようになっています。アパレルやコマースなどジャンルの多い商品を扱ったサイトなど
Deceptive Patterns - Home
Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something. For example:
ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ
by Thomas Guignard インターネットを利用していると、自分の意図しない予想外の操作がなされてしまい戸惑うことがたまにありますが、それはそもそも人をだますことを目的としたデザインかもしれません。そんな人をだますことを目的とするユーザーインターフェースは「ダークパターン」と命名され、その手法がまとめられています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは人をだます目的で作られたユーザーインターフェースであり、決してミスデザインではありません。それらは人間の心理をよく理解して注意深く作られていますが、ユーザーの利益はまったく考えられていません。 ロンドンのデザイナーであるHarry Brignullさんは、ダークパターンについてまとめたサイ
SmartNewsのUI/UXエンジニアが語る！「iPhoneの画面サイズと室町時代の違い棚」 | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
各種サービス入退会
楽しいBADUIの世界
これからのUIデザインのヒントになるDribbbleのアートワークのまとめ