デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
2020年 UIデザイナーが読んで良かった本 9冊｜kassy
こちらは dely #2 Advent Calendar 2020 の12/22の記事になります。 昨日はyuaoさんのデザインの指示に迷った時は、「要素に分解」がいいかもという記事でした！ 現在、delyではエンジニアやデザイナーが日替わりで記事を投稿しています。どれも読み応えがありますので、よかったら下記のリンクもご覧ください。 dely #1 Advent Calendar 2020 - Adventar dely #2 Advent Calendar 2020 - Adventar ーーーーー PRおわり ーーーーー UIデザイナーのkassyです。あっという間に年末ですね。 今年も読んで良かったUIデザイン関連の本を中心に紹介したいと思います。気になる本があったら、年末年始のお供にぜひどうぞ！ 前回書いた記事もよかったらぜひご覧ください。 1.『オブジェクト指向UIデザイン──使
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
✕はなぜ閉じるのシンボルなのか歴史を読み解く｜みーた
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
UIデザイン初学者の頃の自分に捧げたい、「勉強するならまずこれを読もう！」と思う読み物7選｜623
はじめまして、ムツミ（@623px）と申します。「CAMPFIRE」という、クラウドファンディング事業の会社のデザイナーをしています。 普段はグロース周りのデザイン施策を担当していて、少し前は仲間集めプラットフォーム「TOMOSHIBI」という新規事業のデザイン全般を担当していました。 --- 最近デザインを勉強している友人にむけて、勉強におすすめの記事や本をまとめる機会があったのですが、UIデザインをはじめたの頃の自分に読んで欲しい…と思うものばかりでした。当時のわたしは「とりあえずやってみてわからなかったら調べる！」という方法で突き進み、体系的に学ぶことが少なかったためです（反省） まだまだデザインを語れる立場ではないのですが、せっかくなので当時の自分に向けて、そしてこれからの自分のおさらいになるように、厳選してnoteに記録しておこうと思います。 僭越ながら、UIデザイン勉強中の方や
やってはいけないUIアニメーション
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
UIの細かい動きについて
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法
はじめに 現代では多くの人々がスマートフォンやタブレットを所持し、ゲームを楽しんでいることと思います。 モバイル向けのゲーム市場は大きく、世界では今も多くの開発者たちが iOS / Android 向けの商用ゲームを作っています。 さて、モバイルゲームの開発には、多くの開発者を悩ませるちょっと困った事情があります。 それは ディスプレイが非常に多くの多様性を持っている ことです。 正方形に近い形のタブレットもあれば細長い端末もあり、カメラがディスプレイの中に割り込んでいたり、 OS が専有する領域があったりと様々です。物理的な大きさもバラバラですね。 そのくせモバイル端末はタッチパネルで、ディスプレイに触れる UI になっているのです。 ゲーム開発を生業とする多くのエンジニア / アーティスト / ゲームデザイナーは、 これまでに何度も頭を抱えてきたことでしょう。 本稿では、2019 年現
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
【CEDEC 2013】ゲームにおけるUXデザインの価値とは？「ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話」講演レポート | Gamer
本講演は、ソーシャルゲームの開発現場において、山口氏がUXデザイナーとしてどうやって関わり、その経験をプロダクトにどう活かしたのかについて語られた。 山口氏は2010年8月に企画職としてDeNAに入社。「農園ホッコリーナ」という女性向けのソーシャルゲームを担当し、モバゲー女性ランキング1位に導いた。 その経験を経て、現在はDeNAの特殊任務班SWATのUXデザイナーとして、ソーシャルゲームを含めた自社モバイルサービスのUX設計/開発/評価サイクルの推進を担当している。 「UX」・「UI」とは この講演のテーマである「UX」について説明する前に、まず「UI」について触れることにする。 「UI」とは「ユーザーインタフェース」の略称である。これはユーザーがある製品を使う時の「画面表示」など、ユーザーが目にし、操作するものについてを指す。ユーザーは「UI」を通じてその製品を操作するのだ。 そして、
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
【Tips】ただただフォーム最適化をまとめたチートシート的なもの - Qiita
概要 主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。 なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください… ユーザビリティ・アクセシビリティ 分かりやすさ 入力項目は必要最低限にする 項目名は簡潔で短く分かりやすいものにする できる限り入力フィールドの数は最小限にする 一つの項目の入力フィールドを複数に分けない 例：姓名、電話番号、郵便番号など 必須項目は、「＊」ではなく「必須」と表示する ラベルやヒント（○文字以上必要です）をplaceholderに設定しない フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする フォーカスした際の入力フィールドのデザインを変える 入力フィールドのサイズは、入力される値に合わせる リアルタイムでチェック出来るバリデーションを実装する エラーメッセージは、上部にすべて表示するのでは
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
【考察】なぜ『ファイナルファンタジー』シリーズのHPゲージは右下なのか？システムによって変化する最適なUIデザイン - GAME LIFE HACK
今更言うまでもない事ではあるが、ゲーム画面においてHPゲージを始めとした『UI（ユーザーインターフェース）』は重要な要素としてゲーム内に存在しており、HPゲージやMPゲージ、弾薬数、速度計、スコア、そしてレーダーや地図、クエストやコマンド、アイテム欄など様々なもので構成されている。 しかしこういったゲージ類は作品によって大きく異なった位置に割り当てられている。例えば、ある作品では左上に配置されていたHPゲージが、別の作品では左下に配置されていたり、中央上部に表示されているというケースも見たことがあるだろう。 それはなぜだろうか？ なぜ、HPゲージは左上で固定されていないのだろうか？ なぜ、弾薬類の表示は右側に集中しているのだろうか？ なぜ、速度計は右下に配置されているケースが多いのだろうか？ なぜ、コマンドメニューは下側に配置されているのだろうか？ そもそもなぜ、普段遊んでいる時は、このよ
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン講習会
ゲームUI演出
ユーザーインターフェイス解剖学（公開版）
