デザインエンジニアのジョージ・ケイブ氏が、パネルやボタンがプリントされたLEGOの「2×2 装飾スロープブロック」をテーマに、インターフェースデザインの基礎を語りました。 The UX of LEGO Interface Panels - Interaction Magic https://interactionmagic.com/UX-LEGO-Interfaces/ ケイブ氏はまず、操作パネルブロックを4象限図にまとめました。以下の図では、ブロックにプリントされたインターフェースが整頓されているか散らかっているかが上下の軸で、インターフェースにスクリーンが含まれるか否かが左右の軸で表現されています。 ケイブ氏によると、複雑な機械インターフェースの設計にまつわるさまざまな要素は、以下の2つのポイントに還元することができるとのこと。 ◆1．入力の差別化 第二次世界大戦中のアメリカでは、爆撃
まずはこちらをお聞きください。 技術的解説: ボタンを a 要素で作るな a 要素は URL などへのリンクをつくるためのもので、button 要素はなんらかの処理を起動するボタンをつくるためのものです。 配置されるものがリンクなら a 要素で実装し、ボタンなら button 要素で実装すべきです。 これに違反すると、意図しない動作や、アクセシビリティ上の問題が発生します。 これは MDN でも詳しく説明されています。 onclick イベント -- \<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。 これらの偽の
近年 Bubble や Webflow、日本だと STUDIO などのノーコードプラットフォームが注目を集めています。これらのツールは、プログラミングの知識がなくてもユーザーが思い思いの UI を構築できる機能を提供し、アプリケーション開発の民主化に貢献しています。 このようなノーコードでユーザーが自由に UI を組み立てる仕組みはどのように構築されているのでしょうか。一見複雑に見えますが、基本的な考え方を理解すれば独自のエディタを構築することも不可能ではありません。アーキテクチャの中核となるのは、動的な UI コンポーネントを表現するスキーマ定義と、それを実際の UI 要素に変換する仕組みです。この過程では、データのバリデーション、データ型の絞り込みと UI コンポーネントの動的生成、そしてそれらの適切な配置が重要な役割を果たします。 本記事では、ユーザーがブラウザ上で UI を自由に構
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの
「あれっ！こんなところを間違えてるよ」―。パソコン画面上で何回も確認して間違いがなかったのに、紙に印刷すると原稿のミスが...。こんな経験をした人も多いはず。だが、その理由がよく分からない。もちろん、できる限り間違いを減らし、仕事はスムーズに進めたい。紙と画面の違い、その使い分けを考察してみた。 「反射光」と「透過光」 画面よりも紙のほうが、間違いに気がつきやすい。これは私が今まで何度となく経験してきた。新型コロナウイルスの感染拡大に伴い、リモートワークを始めてからは、自宅などにプリンターが無かったり、あってもその能力不足で印刷に手間取ったり。だから、紙でのチェックを怠りがちになり、ミスが生じて後で大きなしっぺ返しを食らう。 情報処理学会の研究報告（注）が、紙と液晶ディスプレーにおける「反射光」と「透過光」の性質の違いなどに着目し、実験を行った。反射光はいったん紙に反射してから目に入る光、
この記事は、チュートリアル作成における指標のメモのB面記事です。読んでない方はリンクからどうぞ。 ここからは、具体的なゲームを事例に上げてその解説と検討を行う。 スプラトゥーン チュートリアル用に用意されたステージを動きながら操作を学んでいく。スプラトゥーンで何より重要なのはジャイロを使った特殊なエイム方法であり、これは「提示する必要があるもの」に該当する。歩行より先にそのエイム＋ショットを風船を撃つことで習得させるのが印象深い。 この時、「風船は撃ったら割れる」「インクは銃から出る」「インクは重力で落下するので射程が存在する」ということは説明されない。プレイヤーの持つ常識でカバーしているのである。あと、実は「銃で壁や床を撃つとインクで塗られる」ということも一度も説明されていない。あまりにも自然だからである。
ゲームのチュートリアルを作る際にヒントになりそうな指標を記す。チュートリアルを考える時、その取っ掛かりとしてあらゆる提示情報を 「プレイヤーが知っているもの」 「プレイヤーが自発的に試すもの」 「こちらから提示する必要があるもの」 の３つにフェーズ分けして考えていく。 プレイヤーが知っているもの ゲームのごく基本的な入力の方法（コントローラの存在や、タップの存在） 現実世界に即した基本的な物理や常識的なモノの挙動 ごく基本的なゲームのお約束 ボタンは押せるもの / メニューは選べるもの プレイヤーは自分のキャラクターを十字キーで操作できる ゲームには敵が存在し、自分に襲いかかってくる ★赤は危険で緑・青は安全 ゲームジャンルにおけるお約束→プレイヤーによって大きく異なる パッケージや宣伝文句に書いてあるゲームの目的・コンセプト ゲーム要素についてプレイヤーが知っているものはプレイヤーによっ
Step1 – 理解: UnderstandStep 2 – 共感: EmphasizeStep 3 – アイディエート: IdeateStep 4 – プロトタイプ: PrototypeStep 5 – テスト: TestStep 6 – ローンチ&計測: Launch&Measureユーザー体験を設計するUXデザインは、現代ではかなり高い認知度を獲得し、多くの企業が注目をしている。その一番の理由が、「スペック重視」から「体験重視」にビジネスもモデルが変換し始めたことだろう。 ユーザーのフォーカスが、所有することから利用することに移行したことで、プロダクト提供側も、より良い体験設計が求められている。 これからの時代にヒットするのはサービス化されたプロダクトだと言えるだろう。そこで最も重要な存在になってくるが、UXデザインであり、UXデザイナーである。 意外と知られていないUXデザインのプ
しばらく前に、UX Boothのエディターの１人であるAmy Grace Wells氏が、次のような記事のアイデアを持ち込んできました。 「学習しやすさ」、「探しやすさ」、「発見しやすさ」、そして「見つけやすさ」について説明、比較、対比して、それぞれがUXにどのような影響を与えるかについての記事を書いたらどうでしょう？ 私は考え込んでしまいました。というのも、これらすべての要素が相まって良質なユーザー体験ができあがるということを、たった１本の記事でどう説明できるでしょうか。これはひとつひとつが、現代のUXデザインの生業と捉えてもよく、大抵の人は、この中の１つに自分のキャリアをすべて費やすようなものなのです。それなのに私は、信用あるメディアであるUX Boothで、これらすべてについてのHow to記事を書くように依頼されたのです。 私は数ヶ月の間考え続けて、いくつかメモを書きつけ、あとはイ
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
DX時代に求められるITアーキテクチャーの構成は複雑なことが多く、必要な要素技術や設計・開発手法も多岐にわたる。その全体像を把握するのは困難に思えるが、以下のように7階層に分けて考えると理解しやすい。 ●DXを支える7階層のITアーキテクチャー （1）チャネル層 （2）UI／UX層 （3）デジタルサービス層 （4）サービス連携層 （5）ビジネスサービス層 （6）データサービス層 （7）データプロバイダー層 今回はこの図を基に、7階層のそれぞれの特徴とDX移行時に押さえるべき要素技術や仕様、よくある課題について順番に見ていこう。 （1）チャネル層はユーザーとの最初の接点 ユーザーとサービスとの最初の接点となる部分の階層。パソコン、スマートフォン、タブレットなどの端末、そこからアクセスするアプリケーション（Webブラウザー、チャットボット、SMSなど）の他、コールセンターなどの顧客サービスもチ
NemanjaはBMWやSubaruなどのブランドも手掛けたことのある、UI /UXプロダクトデザイナーです。 プロダクトデザイナーは、短期間に多くの情報を表示してしまうことがよくあります。「スキャナビリティ（読み取りやすさ）」という言葉の意味や、一般的な視線の動きのパターン、そして現代のデザイン原則を理解していれば、消費しやすいコンテンツと、魅力的なUIをつくることができるでしょう。 インターネットの世界は日々新たなアプリ、Webサイト、記事などが現れて広がっていきます。溢れかえるコンテンツから自分に関係のあるものだけを探すことは骨が折れるため、ユーザーを情報に注意を引きつけることはますます難しくなっています。 マーケティングの専門家であるDavid Zheng氏によれば、60%以上のユーザーは15秒以内にサイトを離脱しているというのです。 調査によれば、ユーザーはサイトの一言一句をきち
Webページやスマホアプリのプロジェクトで、チームと開発者向けのドキュメントを作成する際に使用するサイズ・スペース・コメントなど、236種類の要素をまとめた無料のデザイン素材を紹介します。 デザインガイドラインを見栄えよくしたい人にオススメです！ UXUI Doc Kit for Sketch/Figma UXUI Doc Kitの特徴 UXUI Doc Kitのダウンロード UXUI Doc Kitの中身 UXUI Doc Kitの特徴 UXUI Doc Kitは、デザインファイルに仕様を加えるための素材です。SketchとFigma用が揃っています。 UXUI Doc Kitには、以下の素材が含まれています。 アロー: 26種類 スペース・サイズ: 水平および垂直 ノート: ステッカー、ラベル、ダイアログ、コメント カーソル ライドモード・ダークモード 各要素はカスタマイズが可能です。
A good design system depends on how usable it is for real users. It can motivate a user to engage, play, and transact with the system. A poor interface can confuse the user and ends up with the user’s frustration. Poor architecture, no hierarchy, and no-logics cannot drive a good design system. There are a few thumb rules which can allow an interface to become a user-friendly system. But before go
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
