ゲームの進行方向の話（アムロは左に向かうがマリオは右に向かって進むのは何故か？） 島国大和のド畜生
少し前のエントリで、「漫画および舞台などの映像作品では物語は右から左に向かって進むよ」という話をしたら、ゲームは逆じゃね？という話があって、面白そうなのでちょっと書いて見る。 今回は、アムロは左に向かうがマリオは右に向かって進む話のは何故かという話。 ゲームが右向きの例としてはこういう奴。 横スクロールゲームが右に向かって進むのは４つの理由が考えられる。（俺的に） １つ目は、インターフェイスの問題。 レバーとショットからなる操作系は、ショットを右手で行うために、どうしても、左レバー、右ボタンというレイアウトになる。 レバーは自機、自キャラをあらわすのなら、ボタンの方向に、ショットやパンチが出るべきなので、必然として、右向きの画面になる。 といった具合。 ２つ目は、主体はどちらかにあるか。という話。 プレイヤーと、自機、自キャラは一心同体であり、見るべきは敵キャラクターであるという部分。 縦
機能の豊富さとユーザの関与
ユーザの関与が深まるほど、アプリケーションはより多くの機能を維持できる。しかし、大部分のユーザの関与のレベルは低いものだ ―― 特に、機能の数よりもシンプルさの方を重視しなくてはならないウェブサイトの場合は。 Feature Richness and User Engagement by Jakob Nielsen on August 6, 2007 どんなユーザーインターフェースをデザインするにしても、重要な決定事項のうち一つは機能の多さとシンプルさの兼ね合いに関わってくる。機能が増えるほど、システムがより複雑になるのは避けられない： 機能はユーザに明示されている必要があるので、画面がより煩雑になる。 メニューのサイズや数のどちらか、または両方が増えるほど、必要な機能を見つけるのが難しくなる。 機能には説明が欠かせないので、ヘルプシステムやマニュアルのサイズが膨れ上がる： ドキュメントは
Webデザインの没個性化と認知容易性 | ベイジの社長ブログ
Webサイトのデザインは紙のデザインと異なり、技術的な制約が強く、特に最近は様々な環境（デバイス、ブラウザ、画面サイズ、屋内・屋外など）での閲覧に対応できることを求められます。そのため、戦略から要件、コンテンツ、機能と論理的にデザインを決めていくと、どこかで見たことあるような没個性なデザインになりやすいものです。（注：ここでいうデザインは視覚的なデザインを指します） マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。 没個性なデザ
UIデザインと守破離の精神｜Goodpatch Blog グッドパッチブログ
デザイン業務ではしばしば“奇抜さ”が求められることがあります。人間は常に新しい形や刺激的な表現を求めていて、誰もが思いつくようなものでは受け入れられないことも多々あります。そのことは十分に承知の上で、私は良いデザインとはどこか“普通の形”をしているものだと考えています。普通というとなんだかネガティブにも捉われがちですけれども、環境に融け込んでいて違和感がないという意味で、普通であることはデザインの目指すべき一つの姿なのではないかと思います。はじめ奇抜な形をしていたものが次第に社会に受け入れられていって、いつからか「普通」になっているようなこともあります。｢新しくあること」と「普通であること」は必ずしも二項対立の関係ではありませんが、どちらを取るべきかでしばしば頭を抱えてしまうデザイナーは私を含め多くいらっしゃるのではないでしょうか。 UIデザインの世界を見てみても、やはりどこか「普通ではな
チャットUIは文脈性がある - tkgshn
「知らないことを認知させる」っていう命題に対するアプローチの一つとして、Civichatみたいな探索型チャットUIみたいなのは有効かも、という仮説。認知・探索・推薦みたいなので選択格差は減らせるのかな？
UIデザイナーにAIは取って代わるのか Midjourneyを使って現役UIデザイナーが試してみた｜横田奈々
はじめに最近、AIによる画像生成サービスが多く出てきて、デザインを含めたクリエイティブにかかわる方は関心があるのではないでしょうか。 議論が起こっている、AIの学習元データの著作権の問題も気になります。 ただ、今回は純粋に、自分の専門スキルであるUIデザインをAIは行うことができるのか気になり、実際に試したことをまとめました！ 結論「取って代わることはない。専用の学習をさせれば、グラフィックのアイディエーションに使うことができそう。」 上記の結論に至った理由を、検討過程とともに説明していきます。 検討過程使用ツールAI生成ツール：Midjourney UIデザインツール：Figma Midjourneyの様子 検証Ⅰ AIにUIはデザインできるのかMidjourneyにUIの画像を生成してもらいます。 今回は未来のUIデザインを目指してそれとなくプロンプトで指示をします。 （noteにイン
格闘技をインターネットで観戦する上でのサービスデザインについて考える｜シュンスケ｜ABEMA
僕は（ニワカだけど）格闘技観戦が好きです。元々うっすらぼんやりとK-1のベストバウト集をYouTubeでみるような前兆はありつつ、2018年あたりに天心vsメイウェザー戦や朝倉兄弟のRIZIN参戦→YouTubeチャンネルの話題化でまんまと引きずり込まれた格闘技ブーム令和組の同期が一番多いタイミングの格闘技ファンです。 このタイミングはまさに2016年にABEMAが開局し、格闘チャンネルが世の中で話題になっていた流れもありました。 僕はABEMAのプロダクトデザインを2015年から2022年現在まで続けている中で、特定のジャンルに偏向することはなくあくまでも「NetflixとYouTubeの中間」をイメージしながらUIと体験を考えてきました。 僕はABEMAのユーザーとしてはK-1、RISE、ONE Championship、修斗、PANCRASE、POUND STORM、最近だとTHE
デザインとエンジニアリングの融けるところ - estie inside blog
@hikrrr です！はじめまして、デザインを生業としています。ReactとTypeScriptが好きです。 デザイナー間の絶えぬ論争の1つ、コーディングする／しない問題。これに対する私見は「デジタル製品のデザイナーならぜひともコード書いていこうぜ！」です。よりよいインタラクションの実現に欠かせない行為・過程と信じています。 でも、”しない派”と言い争うつもりは毛頭ありません。実のところ、エンジニアの皆さんをUIデザインの世界にお誘いしたいと思っているからです（コード書いてますよね？）。今回のテーマである”インタラクションデザイン”には、エンジニアリングとの汽水域が存在します。だからこちらへどんどんと進出してきてほしい！そんな思いを綴りました。 読んでほしいひと デザインに興味のあるエンジニア 少数でMVP開発しているエンジニア コーディングする派のデザイナー インタラクションデザインとは
FlashがHTMLを置き換える日
sou 曰く、 "MacromediaがFlash待望の新バージョン Flash MX を発表した。 FlashMXも気になるけど、 別のプレスリリースに見るColdFusionMXとの関係のような「フロントエンドにFlashを、バックエンドにアプリケーションサーバーを。」という配置が非常に気になる。 オンライントレードやオンラインバンキングなどインターネット上の幾部分かのコンテンツに取って、フロントエンドがブラウザであれば良いワケで、実はHTMLは足かせなのかも知れない。思えば次々とその意味合いと用途が拡張され続けてきたHTMLだが、MXシリーズのリリースはHTMLに換わりFlashが次のフロントエンド構築を果たす名乗りにも聞こえる。 日本語版はwebmonkeyによれば3/15、ただしamazon.co.jpには3/29と出ている。どっちだ。 余談。ソースは忘れたが、ColdFusio
結局、画面とはどこなのか｜usagimaru
UIデザインにおいて画面遷移図なるモデル図を描くことがしばしばありますが、個人的にこの画面という単位がどうもよくわからなくモヤモヤした何かがありました。どこまでが「画面」でどこからが「ビュー」なのか、PCにおけるウインドウは一体何になるのか、ウインドウがもし画面ならば、その内側に描画されるwebとは画面なのかビューなのか。 どうも「画面」という言葉がコンテクストによってその表す対象が異なるような気がしていて、明確な範囲が定まっていない中でこれを扱うことは何とも言えぬ歯がゆさを感じておりました。 デスクトップGUIを構成する要素身近なMacの「画面」を次のような単位で分解して考えてみようと思います。 ・スクリーン ・ウインドウ ・ビューまた、Mac基準でインターフェイスの次元を次の3種類に分解して考えてみようと思います。 ・OSネイティブインターフェイス ・一般的なネイティブアプリケーション
UIデザイナーが演出の勉強を始める時の流れ
近年スマホアプリのデザイナーに求められるハードルが徐々に上がりはじめています。 スマホアプリのリッチ化によってゲーム内のアニメーションもリッチに動き始めて、それが普通になってきました。 しかし、デザイナーがUIアニメーションをつけるという状態はまだまだ希少な状態です。 デザイナーがUIアニメーションのスキルをつけるのはハードルが高く、UnityやAEでアニメーションを覚えたとしても、業務で任せてもらえるかわからない状態だと、中々習熟度が上がらないかと思います。 なので、多くの人は急に業務でUIアニメーションをお願いされて強制的にスキルをつけていき、スパルタで育てられた一部の人の領域だと思っています(最近は企業の教育でアニメーションを勉強しようという流れもあります) UIデザイナー自体が希少とはいえ、周りがUIアニメーションできて当たり前、という状態になってから動くよりも、今動いたほうがお得
ストレスフリーな「規約に同意」UI の実現までの変遷について - Qiita
はじめに みなさんはサービスの利用規約，読んでいますでしょうか．ある統計 によると，ちゃんと読んでいるユーザは全体の 7% しかいないようです． 利用規約というと，長いし難しい，といったネガティブが印象があるように思います．何でもっと分かりやすく書かないんだ，と思うかもしれませんが，利用規約はユーザの解釈に齟齬が生じないように，厳密に書かれていなければなりません．なので，ある程度仕方がない面もあります． FOLIO でも，口座開設時に利用規約 (約款) に同意してもらうページがあります．いかにユーザにスムーズに同意をしてもらうかが UX において非常に重要な点ではありますが，一方で，FOLIO は金融機関であり，扱うものもお金というセンシティブなものなので，「ちゃんと理解してから規約に同意 (= 契約を締結) してほしい」という思いも強いです．ユーザも，ワンクリックとかで証券口座が開設され
機能的で美しいカラーピッカーを求めて - ここぽんのーと
色を調整するUIのおもしろさ「色」というモデルは、3軸 + 1軸（不透明度） = 4軸分の情報を持っています。軸の取りかたについても、RGB, HSV（またはHSB）, HSL, …など多様な切り口があるので、これらの情報を整理し、ユーザーに適切なUIを提供するのがカラーピッカーの責務です。 表示・設定すべき値がたくさんあるので、どのように見やすく・美しく・機能的に配置するかが腕の見せどころ…というわけです。 いろいろなカラーピッカーまずは世に存在するカラーピッカーたちを観察してみましょう。既存事例は学びの宝庫です。 macOS標準縦長。レイアウトは整っており流石のAppleといったところでしょうか。 色の選びかたが最上部のタブで切り替えられるようになっていますね。直感的に選べる円型ピッカーの色空間はHSVで、暗さのスライダーがひとつと、中心からの角度が色相・距離が彩度の円で構成されていま
SF映画で学ぶインタフェースデザインを読んだ。面白いのでオススメしたい。 - izm_11's blog
滅茶苦茶オススメなので布教エントリ書きます。 SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン 作者: Nathan Shedroff,Christopher Noessel,安藤幸央,赤羽太郎,飯塚重善,飯尾淳出版社/メーカー: 丸善出版発売日: 2014/07/24メディア: 単行本（ソフトカバー）この商品を含むブログ (7件) を見る どんな本か インタフェースはこの100年程の間に色々進化してて、その歴史を知る本みたいなのは、いっぱいあります。 そこから演繹的に未来のインタフェースを考えたりするのは凄く楽しいものです。 この本は、それぞれのインタフェースが「SF映画で」どの様に表現されて「現実に」実現したか、みたいな差分も一緒にインプット出来ます。 そうすると、上記のように現実の歴史から演繹するより、ズルが出来ます。つまり「未来を描いたSFの
ユーザの認知努力、伝わり方、わかり方｜上ノ郷谷 太一
ここ 2 年ほどで、私の環境ではミーティングのほとんどがオンラインになりました。リモートワーク中心でコミュニケーションなどにくふうは必要ですが、次々と色んな人と話せるのはおもしろいです。私がよく使うツールは Around、Google Meet、Zoom と相手や目的に合わせてさまざまです。 なかでも Google Meet でのミーティングがやや多めです。カレンダーとの連携もあるからでしょうか。そんな Google Meet のミーティングで最近、何度かおかしな現象に遭遇しています。それは「通話相手が画面共有したあといなくなってしまう」現象です。 直前まで楽しく会話していた相手や、チームのみんなにおもしろい話をしてくれていたメンバーが、急にいなくなってしまう…。ユーザの目的達成のためのやりとりを設計するデザイナーとして、これは無視できません。 なにが起きているんだろうこういった場合に私が
Neumorphismをポートフォリオに反映してみた｜mashida
SkeumorphismはiOS 7までのapple純正アプリで採用されていたような 実世界にあるモノにリアルに似せて作るデザイン。 質感やそれっぽさを再現させることで、 直感的にユーザに機能を伝えられるというメリットがある。 NeumorphismはSkeumorphismよりも リアルさをミニマムかつシンプルに抑えたデザイン。 凹凸の質感を光の当たり具合・側面の影で再現。 Material Designはカードの高さと影の濃淡で階層を表現するのに対し、 Neumorphismはこの凹凸によって階層を表現している。 Neumorphismが使われていた例は 「A・NA・TA for DREAM」キャンペーン内の 嵐のデビュー曲『A・RA・SHI』に合わせてオリジナルのメッセージソングを制作できるジェネレーター（2020年で公開終了） いざ、ポートフォリオに反映ポートフォリオの構成は ・P
既存サービスのデザイン課題発見のためにやっておきたい「Interface Inventory」 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 広告フロントエンド開発部の春野です。今日はデザイナーの立場から、デザインスキルに自信のないエンジニアの方でも取り組むことができる、UIの課題発見方法をテーマに記事を書いていきたいと思います。 PDCAサイクルを回すことで生じる課題 Webサービスやアプリケーションを制作するにあたって、多くのプロダクトはユーザーのニーズに応えるために画面の追加や修正を行い、PDCAサイクルを回していると思います。しかしながら、PDCAサイクルを回していくことにより、デザインの一貫性が失われる可能性があります。ひとつの機能や画面の追加・修正の要件を満たすことを目的とするあまり、ひとつひとつの成果物が良いものであっても、サービス全体を見渡したときにデザ
とあるゲーマーの独り言：UIデザインの原体験｜Saya Nakano
新卒でUIデザイナーという職をいたただいてから、来年で9年目になります。今までさまざまな種類のアプリケーションやWebサービスのデザインをやってきましたが、わたしの「UIデザイン」との出会いは、幼い頃より遊んでいた「ゲーム」からでした。 ゲームにはUIデザインに欠かせないたくさんの設計パターンや表現のアイディアが詰め込まれています。わたしはゲームのデザイナーではありませんが、今までプレイしてきた多くの作品たちからUIデザインに欠かせない発想や考え方を学びました。設計パターンやアイディアというものは、たとえ表現媒体が変わったとしても、応用することができます。パターンを熟知していれば、少なくとも設計を間違えることはおそらくないし、適切なパターンの組み合わせを設計できれば、UIをより良い形に仕立てることができます。 そんなわたしのUIデザイナーとしての原体験となったゲームたちを、少しだけご紹介し
「検索」について自分なりに考えてみた話。｜なまぬるいおにぎり🍙
こんにちは。なまぬるいおにぎりです🍙珍しくサービスデザイン系の記事を書きます。というのも最近検索画面の改善を担当することがあり、改めて自分なりに考えたことを残しておきたいなと。というわけで今日は日頃よく目にする「検索」について考えたいと思います。（分かりにくかったり、うーん？と思うこともあるかもですがお手柔らかにお願いしますw） はじめに 「ググレ○ス」という言葉もあるように、普段私たちには馴染み深い機能、検索。Googleで調べ物をする際やサービス内で検索…など色んな場面で検索機能は目にします。そんな検索機能とUIについて考えます🤔 検索機能といってもめちゃくちゃ奥深く、検索結果のUIだけでなく表示ロジックや絞り込み機能、フリーワード検索、キーワード補助サジェスト、表記ゆれ問題…など考えるべきところは沢山ありますが…（いや〜奥深い！）今日は検索の目的やシーンなど自分の思うところに触れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OOUIとこれからのデザイナーの歩むべき道
