iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
TrelloのDescription欄だけでUIを超えた手触りが良すぎて学びしかない - Make組ブログ
TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。 ただそういう次元じゃないんですよね。たとえば以下の機能があります。 Descriptionが空のときは「Add a more detailled description...」を表示する Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない Descriptio
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デザインまとめサイト「Game UI Database」公開。ゲーム開発者向けのUI事例集/データベースを目指す - AUTOMATON
英国のゲームスタジオDouble Elevenに所属するシニアUIデザイナーEdd Coates氏は12月5日、ゲームのUIデザインをまとめるサイト「Game UI Database」を公開した。現時点で325作品・1万1569枚のスクリーンショットがデータベース化されており、画面用途・ジャンル・アートスタイル・操作デバイス・レイアウトなど、豊富なフィルター機能によって、ゲーム/スクリーンショットを検索できる。扱っているタイトルは『Apex Legends』『エースコンバット7 スカイズ・アンノウン』『ブラッドボーン』『Call of Duty: Warzone』『DOOM』『ゴースト・オブ・ツシマ』など幅広い。 Proud to present the Game UI Database! A whopping 11569 screenshots, 325 games, and filte
コントローラーのボタン配置と決定ボタンの変遷（その1） - 名称未設定。
この前PS5で決定ボタンが✕ボタンに変更されるという話題がありました。 nlab.itmedia.co.jp 前々からゲーム機のコントローラーのボタンの変遷についてまとめてみたいなーと思っていた所にこの決定ボタンの話題が来たので、ちょうど良い機会ということでブログにまとめてみます。 スーファミの決定ボタンについて調べたらやたら長くなったので、そこで一旦区切って「その1」としてます。その3まで書く予定。※追記：その5まで延びそう。 ファミリーコンピュータのコントローラ（83年7月） セガマークⅢのジョイパッド（85年10月） PCエンジンパッド（87年10月） メガドライブのコントロールパッド（88年10月） ゲームボーイ（89年4月） ゲームギア（89年4月） スーパーファミコンのコントローラ（90年11月） スーパーファミコンの決定ボタンはどれなのか？ じゃあアメリカのスーファミことSN
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
「コマンドプロンプトは黒い画面に文字がたくさん出て怖い」→「チャット風」にしてみた LINEみたいで「分かりやすい」と話題に
黒い画面に“コマンド”を入力して操作を実行する「コマンドプロンプト」。慣れていないと少しとっつきにくいその画面を、LINEっぽくすることで親しみやすくした「チャット風コマンドプロンプト」を実際に作ってみた人が現れ話題になっています。 プログラマーでITエンジニアのkenji（@kenjinote）さんが開発し、GitHubでソースコードなどを公開しています。 チャットでメッセージのやり取りをしているような見た目で、こちらがコマンド（命令文）を入力すると、返信のような形で内容が表示・出力されます。入出力がはっきり分かれていて見やすく、“相手側”がアイコン付きなのが、なんだかホッとします。なにより全体的にかわいらしい。 チャット風コマンドプロンプト（画像提供：@kenjinoteさん） 通常のWindowsのコマンドプロンプト このアイデアは、Web制作企業ビックリマークの代表取締役でエンジニ
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
PS5では「×ボタンで決定」が標準に ユーザー側での変更も不可能と判明
プレイステーション 5では「×ボタンで決定」が統一される――。PS5の体験レポート記事が各メディアで次々と解禁されるなか、「決定ボタン」についての地味に大きな変更が「○ボタンで決定」に慣れ親しんできたプレイヤーをざわつかせています。ねとらぼ編集部でもソニー・インタラクティブエンタテインメント（SIE）に問い合わせたところ、「“×で決定”は事実で、システム設定での変更もできない」と判明しました。 PS5からは欧米で主流の「×で決定」に、全世界で統一（画像は標準コントローラーの「DualSense」） 話題のきっかけは、AV Watchやファミ通.comなどに掲載されたPS5の実機プレイレポート記事。専用コントローラー「DualSense（デュアルセンス）」の使用感を説明する流れで、「日本のゲームも含め全ての設定で『×』が決定に変わる」と、SIE広報への取材をもとに述べられています。 これまで
なぜWebサービスはUIの改悪を繰り返すのか
自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。 特にWebサービスやアプリについては、まじで向いてない種族だと思います。 一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。 そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート
［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート 編集部：御月亜希 ゲーム開発者向けカンファレンス「CEDEC 2020」の2日目（2020年9月3日），ハル研究所は「カービィUIでおもてなし！『ゲームとプレイヤーを繋ぐUI』を目指して」と題したセッションを行った。 このセッションでは，同社の人気シリーズ「星のカービィ」（以下，カービィ）において，どのようにユーザーインタフェース（UI）が作られているのかを，UIアーティストの伊藤晴香氏と，リードUIデザイナーの剣持 紫氏が紹介した。UIデザインが論理的かつ分かりやすく言語化されたセッションの内容をお伝えしていこう。 本セッションの主題となるカービィのUIとは，どのようなものなのだろうか。UIチームは，迷わないUI，ストレスや不快感を与えないUI，印象に
はてなのトップページをリニューアルしました - はてなの告知
本日、はてなのトップページをリニューアルしました。 https://www.hatena.ne.jp/ 新しいトップページでは、気になるエントリーを見つけやすいレイアウトに変更し、「はてなの新着情報」と「あなたへのお知らせ」（はてなIDでのログイン時）をタブ化することで情報の整理も行いました。 また、「はてなブックマーク」「はてなブログ」「はてな匿名ダイアリー」で注目を集めているエントリーを一覧できる「はてなで話題のエントリー」を用意しました。スマートフォン版レイアウトも見直し、より多くの注目エントリーを素早くチェックできるようになりました。 PC版・スマートフォン版ともに、OSやブラウザなどの設定に合わせたダークモードに対応しています。 情報の整理に伴い、ログアウトボタンと「あなたへのお知らせ」の位置を変更しています。ログアウトは画面右上にあるアイコンをクリックしてログアウトを選択します
UIデザイン初学者の頃の自分に捧げたい、「勉強するならまずこれを読もう！」と思う読み物7選｜623
はじめまして、ムツミ（@623px）と申します。「CAMPFIRE」という、クラウドファンディング事業の会社のデザイナーをしています。 普段はグロース周りのデザイン施策を担当していて、少し前は仲間集めプラットフォーム「TOMOSHIBI」という新規事業のデザイン全般を担当していました。 --- 最近デザインを勉強している友人にむけて、勉強におすすめの記事や本をまとめる機会があったのですが、UIデザインをはじめたの頃の自分に読んで欲しい…と思うものばかりでした。当時のわたしは「とりあえずやってみてわからなかったら調べる！」という方法で突き進み、体系的に学ぶことが少なかったためです（反省） まだまだデザインを語れる立場ではないのですが、せっかくなので当時の自分に向けて、そしてこれからの自分のおさらいになるように、厳選してnoteに記録しておこうと思います。 僭越ながら、UIデザイン勉強中の方や
✕はなぜ閉じるのシンボルなのか歴史を読み解く｜みーた
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「UI悪すぎじゃない？」ハンバーガーのオンラインオーダーでオプションを選択していったらパテと玉ねぎ2本だけのバーガーが届いた話
PS5のボタンはなぜ「×で決定」に変わったのか【西田宗千佳のイマトミライ】
『FF14』ゲームUIデザイナー・小田切慧氏スペシャルトークセッションの質問回答を総まとめ。「できるかできないかで言えばできる」を実現することの難しさ - AUTOMATON
UIデザイン講習会
