最近はAIのおかげで、ドメイン知識を持つ業界の当事者が、 自分でツールを作るハードルは劇的に下がりました。 音楽家の僕も例外ではありません。 そこで先日、レコーディングの現場で使うための 「テイク評価・コンピング管理アプリ」を作りました。 かなり頑張って作り込んで、自信もありました。 で、現場に持ち込んだところ・・・ 紙が勝ちました。 玉砕です。 アプリが動かなかったとかではないんです。普通に動くし、むしろ完成度は高い（と思ってた）。 でも、"入力"はできても、"判断"ができなくなりました。これが致命的でした。 何を作ったのか（ざっくり） 音楽のレコーディングにおけるボーカル収録では、同じフレーズを何度も歌います。 その中から「どのテイクが一番良いか」を選ぶ作業を"コンピング"と呼びます。 （日本だともっとシンプルに「繋ぐ」と呼ばれることが多い） 歌詞をフレーズ単位で見ながら、テイクごとに

こんにちは、プロダクトデザイナーのあぼねこ（@avocadoneko）です🥑🐈‍⬛ 最近Appleの純正iOSアプリを触っていたら、同じように「アイテムを消す」操作でも、意味ごとに異なるアイコンが使い分けられていることに気づきました。 この記事では、iOSアプリにおける「アイテムを消すアクション」の表現について、この3つのアイコン違いについて整理してみます。 この3つのアイコンの使い分けさまざまなアプリで、Deleteする対象ではないのにゴミ箱アイコンと「削除」という言葉が使われている場面をよく見かけます。 しかし、Appleの純正アプリを見ていくと、実際には以下のような使い分けがされていそうでした。 ではそれぞれについて見ていきます。 🗑️ Delete - 削除ユーザーが所有しているデータそのものを消す場合は「Delete（削除）」です iOSアプリでは最も一般的な消すアクション

※マスターデュエルやったことない人でも読めます。 遊戯王マスターデュエルのUIは変だ。何が変なのか？ 遊戯王マスターデュエルのアプリは、出来が良いとしてもっぱらの評判だ。 遊戯王は非常に操作量の多いゲームだが、サクサクとプレイできるし、デュエル中の行動ログやデッキ構築画面も見やすい。 しかし実は、基本的な操作の中に、クセの強い操作がひとつある。 それは"カードの効果を発動するときの操作"だ。 マスターデュエルを含む、大抵の遊戯王のデジタル作品において、 カードの効果を発動するときの操作手順は以下の通りだ。 効果を使用するボタンを押す。効果を使用することが相手に伝わる。 (必要なら)追加コストの支払いや、効果の対象を選択する。 これは非常に奇妙なことだ。 なぜなら、ほとんどのDCGは、これとは逆の順番で行うからだ。 まず対象選択やコスト支払いを済ませてから、モンスターを出したり呪文を唱えたり

Design tokens are design decisions as data and serve as a single source of truth for design and engineering. Utilizing deployment pipelines, they enable automated code generation across platforms, allowing for faster updates and improved consistency in design. Organizing tokens in layers—progressing from available options to tokens that capture how they are applied—ensures scalability and a better

少しの工夫でゲームの安っぽさを解消する手段のご紹介！第二弾！ 前回の以下の記事が過去最高に好評を頂いたので続編です。 今回もちょっとした手間で、クオリティアップを目指していきましょう！ この記事はゲーム制作者の発表の場アドベントカレンダーに参加中です。 https://adventar.org/calendars/10489 ■安っぽさが起こす悲劇・安っぽいからきっと中身も…さよならゲームは目に留まった時に「安っぽい」という印象を与えてしまうと、中身も大したことないんだろうな…と思われ、そこで人は去っていってしまいます。 やれば面白い。でも…手に取ってもらえない。わかります。 そういったゲームはこの世にたくさんあります。 そういったゲームを救いたい。 貴方のゲームが一人でも多くの人に手に取ってもらえるように、クオリティを上げていくぞ！という応援記事です。 ※自分の専門分野じゃない箇所を、手

今回の記事は比較的簡単にできるゲームの安っぽさを解消する手段をいくつかご紹介します。（初級なのでゲームを作り始めの人向けです） ゲームのクオリティアップはもちろんのこと、運よくゲームを見た人が興味を失わないように少しの工夫で人の心を引き留めましょう！ この記事はゲーム制作者の発表の場アドベントカレンダーに参加中です。 https://adventar.org/calendars/9118 ■安っぽさを解消する意味・なんか安っぽいな、さよならゲームを最初に見た時「すごい」「面白そう」「かわいい」など一気に興味を惹かれるものから「ふーん」「なんか違う」「安っぽい」と、興味が持てないものもあると思います。 このマイナス印象の中で「安っぽい」というものは、インディーゲームに特にありがちな意見です。 大規模タイトルであればグラフィック、サウンド、プログラム、ストーリー、UI、ゲームシステム、全てにコ

私は普段、家の脱衣所で仕事をしているのだが、デスクの隣にある縦型洗濯機がちょうどいい高さということもあり、そこにいつも仕事中に参照する本を積んでいる。洗濯機の蓋もまさか、漬物石みたいに本が置かれることになるなんて思ってもみなかっただろう。それらの本は主に、その時々の仕事に関係するものとか、読みかけのものだったりするから、頻繁に入れ替わっていくのだけど、ずっと置いているお気に入りが、いくつかある。そのうちの一つが、OOUI 本こと『オブジェクト指向 UI デザイン　使いやすいソフトウェアの原理』- ソシオメディア株式会社、上野 学、藤井 幸多（著） 上野 学（監修）だ。 出版されてから 3 年以上たっても、私は時折この本をふと、開いてみてはいつの間にか没頭し、そういえば私は仕事をしていたんだっけな、みたいになってしまう。端的に言って大好きだ。この 3 年間で読書会も 2 度主催したことがある

例えば CMS の管理画面を考えます。 /posts に記事一覧画面、/posts/new に新規作成画面、 /posts/:postId に記事更新画面を置くような URL の設計はあるあるかと思います。 今回は /posts/new の画面はないほうが色々嬉しいと思った話をします。 新規作成画面があることで増える考慮事項 まず新規作成画面があると、どんな煩わしさがあるかを考えます。 下書き保存した時、どうする？ 新規作成画面で下書き保存をすると、内部的にはリソースの ID が採番されます。つまり下書き保存した段階で、それは記事更新画面になるはず。 その ID で URL を /posts/:postId に書き換えるかどうかを検討します。 筆者は React 一辺倒人間なので React 寄りの話にはなりますが、Next.js や React Router などでは /posts/ne

※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。 今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCやスマートフォンのOSのUIはもちろん、乗り物の操縦桿やSNSのデザインなど、さまざまな観点で資料を集めてみました。 そこで、元ゲーム屋の性として、個人的に楽しくなってしまうのはやっぱりゲームUIの歴史なのですが… なんか、ゲームのUIってこんなイメージありませんか。 ゲームUIデザイナーを目指す初心者が作りがちなやつ （一応弁明するとこれは1〜2分くらいで作った雑UIです）もちろんこういうのを作れることは大事なんだけど、「ゲームでよくあるやつ」以外のデザインの引き出しがないままだといず

1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの

挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「

授業ではあまり習わないですが、UIデザインの実務において常に考えなければならないフレームワークの一つにThe five UI statesがあります。雑に説明するとUIは以下の５つの状態になる可能性があることを踏まえて、それぞれに対してデザインを作っておくというコンセプトです。 • 何も登録されていない状態 (Blank state) • ロードしている状態 (Loading state) • 不完全な状態 (Partial state) • エラーが起きている (Error state) • 理想的な状態 (Ideal state) 授業のプロジェクトや提案型プロジェクトではそこまで深く考えないのかもしれませんが、UIデザインの実務では相当な時間を占めていることが多いです😑 特に複雑な構造のB2BプロダクトだとError stateのUIパターンを一週間考え続けるみたいなことも多々あり

特に気にしていない人には本当にどうでも良い話だとは思うのだけど、GUI画面のツマミの周辺の配置をどうするべきかちよっと迷ったりする事が多いんですよね。つまり、下の図のラベルとリードアウトをノブに対してどこに配置するかという話です。 幾つか考えるべき点はあって、まず実際のハードウェア機器ではリードアウトは普通存在しないので、ノブとラベルの位置関係だけになります。これがどうなるかというと、世の中の趨勢としても個人的な嗜好としても、家庭用オーディオやラックマウント機器のようなものならラベルはノブの上、小型のガジェットや鍵盤付きシンセのような平置きして使うものなら下、かなあ。絶対ではなくてあくまで傾向ですけどね。 というのも実際のハードウェア機器だと視線の問題があって機器の形によって見下ろす視線で使うものと見上げる視線で使うものでノブの陰にならないようにしないと使いづらいという事情があります。 ソ

こちらの3つのアニメーションはボタン押下後に小中大のウインドウを表示させていますが、大きさによってアニメーションを変化させています。 小さいものほど動きは早く、大きいものほど動きは遅くすることでより自然なアニメーションに見せることができます。 この動きがもし逆だった場合はどう見えるのかが下の画像になります。 小さいウインドウの動きはゆっくりに見え、少し鈍い感じを覚えます。 大きいウインドウでは素早く動くため視覚への負荷が大きく、衝撃、緊急性があるように見えます。 より良いアニメーションは現実の動きに近いアニメーションが自然に感じられるため、現実世界と同じように大きいものはゆっくり動き、小さいものは素早く動くことで自然な体験を得ることができます。 それでもユーザーへの待機時間を減らすためになるべく早くアニメーションを終わらせたい場合は途中から再生させることをお勧めします。

AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う

車が暴走して親子を跳ねた、バスが歩行者を跳ねた、幼稚園児を跳ねた、踏み間違えて突っ込んだ、そんな痛ましい事故が日々おきて悲しい気持ちになる。 そしてつくづく思うのは車の運転とは難しいということだ。 都内に住んでるとびっくりするくらい車に乗る機会がない。免許こそもっているが乗る機会がほとんどない。たまにレンタカーのるけど、あまりにも乗らなすぎてわからないことある。 誰かが言っていたけれど、東京都内は移動の概念が時間に変わった、都市だと言っていたけれどそうだと思う。僕ももう10年近く東京に住んでいてここから渋谷まで何キロ、東京まで何キロって言われてもわからないけれど、ここから渋谷までは電車で40分という時間はわかるので距離が時間の概念に変わっている。渋谷まで何キロって言われると全然距離感がわからない。 そして何より車の運転は楽しくない。スマホ触れない、寝れない、お酒飲めない、事故リスクもある。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は下記のtweetから始まるスレッドに触発され、@qnighyや@na4zagin3からアイディアを拝借して書いた。 i18n力が最強の国は国内に複数の言語があり、そのうちいくつかは他国でも使われている言語の方言で、1バイト文字での代替表記が困難で、歴史的にISO-2022ベースの文字コードとUnicodeと独自エンコーディングが混在していて、フリガナなどの特殊な組版規則があり、右書き左書き縦書きを併用し、 — Masaki Hara (@qnighy) 2018年8月6日 皆さんのおかげで最強のi18n国家が建設されつつある。一

私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ

※記事本文やコメント欄は長文ばかりのため、パソコンやタブレットなどの大きいディスプレイで読まれることをオススメします。 スマホのような小さいディスプレイだと「長文全体から意味を汲み取る能力」が大幅に低下するためです（それでもスマホの閲覧を意識して改行を多く入れています）。 追記を３つ行いました。 – 追記1 2017/07/15 – 追記2 2017/07/19 – 追記3 2021/01/20 —以下本文— ふと思い立ち、「国内家電は使いやすいのか」を念頭に入れ、その視点を意識しながら家電を使い、この一年間を過ごしてみました。 なぜそれをするキッカケになったのかと言うと、実家に帰省した際に、「洗濯機」の使い方がわからず挫折したからです。 ちなみに僕は今までにMacもWindowsもLinuxも使ってきており、プログラミングもやってきているので、 平均以上の「マシン」への打たれ強さはある方

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では