UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
「ボタン」のウェブデザインはどのように進化してきたのか？
by webtreats ウェブサイトやアプリにおいて不可欠な要素である「ボタン」が、いかにしてデザインを変えてきたか、また効果的なボタンを作るために重要な要素について、ソフトウェア開発者のNick Babichさんが解説しています。 Buttons in UI Design: The Evolution of Style and Best Practices - UX Planet https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e ボタンは毎日目にするインタラクションデザインの要素のひとつです。ボタンは非常にシンプルな要素に見えますが、Babichによれば、ボタンのデザインは数十年の間に大きく変わっていて、常に理解しやすく明瞭なデザインが求められ
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
シグニファイアとアフォーダンスの違いがやっと分かった気がする - Tortoise Shell
昨日、シグニファイアに関する記事を書きました。 この記事を読まれた方の中には、もしかして「それってアフォーダンスのこと？」と思った方もいらっしゃるかもしれません。 アフォーダンスとは？ アフォーダンスとは、ヒューマンインタフェースの権威であるD・A・ノーマンが「誰のためのデザイン」という本で提唱した有名な概念です。 ざっくりと言えば、「ユーザに適切な行動を促す視覚的な手がかり」という意味で使われてきました。 ▼最近、改訂版が出たようです。 誰のためのデザイン？ 増補・改訂版 ―認知科学者のデザイン原論 作者: Ｄ.Ａ.ノーマン,岡本明,安村通晃,伊賀聡一郎,野島久雄 出版社/メーカー: 新曜社 発売日: 2015/04/23 メディア: 単行本 この商品を含むブログ (1件) を見る 例えば、お風呂に入るときを思い返してみてください。 （自分がさっきお風呂から上がったところなので思い出しま
アフォーダンスからシグニファイアへ - A Successful Failure
2012年02月13日 アフォーダンスからシグニファイアへ Tweet D.A.ノーマンが『誰のためのデザイン? 』で紹介した概念、アフォーダンス(affordance)は、UIデザインにおける基本的な考え方として受け入れられてきた。UIに関する書籍を紐解けば、アフォーダンスに関する解説を見つけることができるだろう。率直に言ってアフォーダンスの考え方を知らないUI屋、デザイナーはもぐりと看做してよい。 デザイン界におけるアフォーダンス デザイン界においてアフォーダンスは、製品などのモノが、どのように扱われるべきか、どのような性質を持つものかが、ユーザに一目でわかるように付与された（主に）視覚的なサインの意味で使われる。わかり易い例を挙げると、アフォーダンスとは、踏んでは倒せないノコノコにトゲを付けるようなこと、と説明されている（下図）。トゲゾーはトゲという視覚的なサインによって、踏んではい
シグニファイアとは？UXデザイン型人間中心設計のススメ - 酔いどれデザイン日誌 - Drunken Design Diary -
どうもこんにちは。最近本格的に自分がデザイナーなのかプランナーなのか分からなくなってきた、おりです。今日のお題は「シグニファイア」です。聞いたことが無い？安心してください。私も今朝知りました。 どこで知ったかというと、「UI/UXなUXのお話」こちらのスライドを拝見した際に知ったのですが、大変共感できる内容が書かれていましたので今回はシグニファイアと人間中心設計の関係性について考えたいと思います。 目次 アフォーダンスという言葉 シグニファイアの概念 シグニファイアからUXデザインへ まとめ アフォーダンスという言葉 皆さんは「アフォーダンス」という言葉を聞いたことがありますか？これは認知心理学の分野で古くから使われてきた造語で、小難しい定義を抜きにして平たく言うと「椅子は座るというアフォーダンス（可能性の提示）を持っている。」といった具合に利用します。 アフォーダンスの概念は、UIデザイ
iOSアプリケーションでコードベースのレイアウトを積極利用する - クックパッド開発者ブログ
海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 XcodeにはInterface Builderと呼ばれる、リッチなGUIを持ったデザインツールが付属しており、これを用いて画面のレイアウトを構成することが主流となっています。弊社ブログでも、iOS開発でstoryboardとxibをうまく使い分けるプラクティス等の記事で、GUIベースのレイアウトについて触れています。しかし、現在私が担当しているプロジェクトでは、Interface Builderを用いずに、レイアウトの大半をコードで記述しています。 今回は、コードベースのレイアウトを実装していく中で得た知見を、以下の3つの部分に分けて共有したいと思います。 Interface Builderを用いたレイアウトとコードベースの
yuiとmixi Graph APIを使うための基礎知識（1/3） ─ ＠IT
本連載ではAdobe AIR／Flexを使った開発経験はあるが、フレームワークを使用したことがない方のために「yui-frameworks」とは何かを説明し、「mixi Graph API」を利用したサンプルAdobe AIRアプリ「mixiボイスクライアント」を作成して、ソースコードを読みながらyui-frameworksの有用性を解説していきます。 初回は、yui-frameworksの概要とセットアップ、mixi Graph APIについて説明します Adobe AIRを使用することでWindows／MacなどのOSを気にすることなくデスクトップアプリケーションを作成できます。またソースコードは、ほぼそのままFlexのWebアプリケーションを作るときにも流用できます。さらに将来的には、今回のソースコードが、すべてそのまま使えるとは限りませんが、「AIR for Android」機能を
【必読】これだけ読めば基本が分かる！UI/UX記事5選 | coromos
こんにちは。 UI、UX、ユーザービリティについて勉強されている方も多いと思いますが、ネット上にUI、UX、ユーザビリティについての良い記事が多くあったので、５つ選んでまとめてみました。こんにちは。 UI、UX、ユーザービリティについて勉強されている方も多いと思いますが、ネット上にUI、UX、ユーザビリティについての良い記事が多くあったので、５つ選んでまとめてみました。 是非、全リンク見て頂ければと思います。 目次 １ UIとは ２ UXとは ３ UI/UXの違いは何 ４ UXはどのように向上させるのか ５ ユーザビリティテストでUI/UXを向上させる ➀ UIとは ユーザーにとっては“ユーザーインターフェイス”こそが製品そのもの ２００５年に書かれた記事。椅子やマウスを例えに出して、ユーザーインターフェースの重要性を説いています。 UIとは、サービスの本質に出会う前の入り口であ
5分でわかるUIとUXの違い | Excite Designer's Blog
ここ数年、UXという用語をよく使うようになりましたね！今回は最近浮上した『UX』と以前から使われてた『UI』について話したいと思います。 （UI・UXは色んな分野で幅広く使われてる用語ですが、ここでは主にモバイル分野を前提に話します。） UI（User Interface）とは 広い意味で『Interface：インターフェイス』は人の世界と物の世界の接点・コミュニケーション空間を意味します。 人はインターフェイスを通じて目に見えない機能を視覚的にみて操作してコミュニケーションします。 『User Interface：ユーザインターフェイス』はこのようにユーザとデジタル機器とのコミュニケーションがうまくできるように手伝ってくれるOS・アプリ画面などを意味します。 iPhoneのアプリのリンクが今のようなアイコンではなくてテキストだと想像してみましょう。 色々なアプリの中から写真アプリを見つけ
Visual Studio 2010でユーザー・インターフェイス開発
Visual Studio 2010でユーザー・インターフェイス開発：特集：Visual Studio 2010で社内C／Sシステム開発（前編）（1/3 ページ） 連載目次 「マイクロソフト・テクノロジが強い分野はどこか？」 それはやはり、Visual Basic 6.0（以下、VB6）などにより広く普及した社内向けのWindowsアプリ（＝アプリケーション）ではないだろうか。 社内向けWindowsアプリとは、例えば顧客名簿管理システムや見積もりシステム、帳票・レポート出力など、日常業務を簡便にしてくれる仕組みを持つWindows上のシステムのことだ。そういったシステムは、スタンドアロン型の単体アプリではなく、各社員のPC上で動作し、データベース・サーバにアクセスすることで各アプリ間のデータ共有を実現する、C／S（クライアント／サーバ）型のシステムであることがやはり多いのではないだろうか
優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
石原栄治 | 日常が「デジタル化」するなかで、企業は「ユーザー中心」の価値を見直さなければならない « INNOVATION INSIGHTS