2023年版 アプリのデザインサイズどうするよ？ | 化猫の生態
端末の画面サイズは年々変化し、新しい機種が発売されるたびに新たな解像度や比率の画面が登場。いまだにコレといった規格が定まっていません。いつもデザイナーを悩ませる頭の痛い問題ですね。 「スマホ 画面サイズ デザイン」とかのワードで検索すると親切に解説してくれている記事が沢山出てきますが、WEBを中心とした記事が多く、アプリやゲームにフォーカスした記事が少ないなと感じました。 今回はスマホアプリの画面をデザインする際の最適なカンバスサイズ”について考えてみます。 まずは画角(アスペクト比)の調査もう2倍ぢゃない!?高解像度への対応結論 まずは画角(アスペクト比)の調査 アプリの場合はファーストビューに全て収める(スクロールさせない)のが基本なので、デザイン時の画面サイズや解像度設定がかなり重要になってきます。 端末の画面サイズのシェア率は他のサイトでたくさん紹介されているのでここでは詳しく解説
ゲーム開発につながる近道「ThunderFire UX Tool」を紹介
ThunderFire UX Tool：デザイナー向けUnity UIの解決案 NetEase ThunderFire UX Centerが開発を手掛けるThunderFireUX Toolは、ゲーム開発中のUI問題を解決するために一体化される無料Unity解決案です。インターフェースのスティッチング、レイヤの管理、コンポーネントの統合といった機能を兼ね揃え、チュートリアル、多言語翻訳、レッドドット等のゲーム汎用機能を同時に持っているThunderFireUX Toolは、デザイナーがUnityのインターフェースのスティッチング作業を素早くこなし、複数のプラットフォームにて多言語対応のプロジェクトのリリースに役立ちます。 ThunderFire UXTool v0.9 “BeeEater” は現在Unity Asset Storeで利用可能になりました！ ツールの特徴 【多言語対応】 世界
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
Pokémon LEGENDS アルセウス UIの不満点と改善案まとめ - YONの土鳩ブログ
この記事では、ポケモンシリーズ最新作のPokémon LEGENDS アルセウスのUIに対する不満点と改善案を書く。 ちなみにUIはユーザーインターフェースの略で、プレイヤーが直接操作するメニューやボタン等の仕組みを指す。また、この記事にはストーリーのネタバレは含まれていない。Ver. 1.0.2を使用。 強調しておくが、Pokémon LEGENDS アルセウス(以下アルセウス)は、UIこそ極めて不便だったものの総合的には良作と感じた。詳細は以下のレビュー記事を見てほしい。なお、UI以外に関する不満点も以下の記事にまとめている。 用語の定義 ｢望ましい｣UIの条件 1. 多用する動作に一般的で簡易な操作が割り当てられている 2. 不要な制約や動作が無い 3. 同種の動作の操作が一貫している 4. 破壊的かつ重要な動作の前に、かつそのときだけ確認を行う 5. 使用される単語やアイコンの意味
【Photoshop】ゲームUIの作り方【PSD有り】
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。 スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法について詳しく解説します。 ゲーム会社に応募する際、オリジナルキャラを使ったスマホゲームのUI（ユーザーインターフェース）をポートフォリオに載せておくと、イラスト単体を載せるより採用担当者の目に留まる可能性が高まります。 フォトショ初心者の方にも分かりやすいよう、順を追ってゲームUIの作り方を解説いたします。 ゲーム業界への就職を考えられている学生の方にオススメのコンテンツです。 「ぼくのかんがえたスマホゲーム」のマイページ画面を作ってみましょう！
UIテクニカルデザイナー｜Suphal
ゲーム開発において、UIの実装は誰がどうやって行うか。いつもこれを決めるのにもどかしい思いをしていた。もちろんプロジェクトによってどうすべきかは違ってくるが、個人的にはできるだけデザインができる人に直接実装してもらいたい。だが、実装においてデザイナーの自由度を高くしようとするとどうしても作業範囲が広くなってしまいテクニカルなことが必要になってくる。そう思っていたところ、UIテクニカルデザイナーというエンジン上でUIの実装を行う職種に出会い、非常に理に適っていると感じたので、UIプログラマとしてバディのような形でUIテクニカルデザイナーと仕事をした結果の自分なりの理解について共有したいと思う。 1. Visual Scriptingについて 私が知っているUIテクニカルデザイナーの作業はVisual Scriptingありきなので、先にVisual Scriptingの有用性について簡単に説
Game UI Database
1329 Games 54883 Screenshots The ultimate reference tool for interface designers. Filter by Materials and Patterns Such as Wood Paper Halftone Tribal Ornate and many more! Browse 120+ Screen Types Title Screen Settings Inventory Area Map Dialogue Shop Mission Log Tutorials & Guides Leaderboards Modals Gameplay & HUD
シャニマスのチェックボックスから見る色弱者の世界｜謝罪Ｐ
先日のアップデートでシャニマスのUI周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた（ひよこ鑑定士か？）この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何？光（色）を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、本記事では『色弱者』という呼称で表記する。 日本人男性の5％、女性の0.2％がこの色
UIの細かい動きについて
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
2019好きなゲームUI/UXまとめ｜尾形
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
実装者を殺せるUIデータで打線組んだ｜oichan｜note
処理上げ作業をやってるとメモリ容量を小さくすることに注力しがちになってしまいますが、こういった罠もあるので…メッシュ作ってマテリアルでパターンもたせた方が余程効率がよいのかもしれない…そういう処理計測ネタも面白そう。 と、半ば諦めてなぜそういう仕様なのか調べていたところ改善策が見つかりました…Tiledでお困りの方はぜひ。 3.巨大テクスチャ 用途に合わずびっくりするほど大きい、2のべき乗でもない。印刷物でも作る気だろうか… 綺麗に見せたいが為につい大きめに作ってしまうことはあるけれど、UIに割り当てられたメモリの範囲内でいかに綺麗に見せるサイズに落とし込むか？もUIデザイナーの技量が問われるところなんじゃないだろうかと思います。 4.トリミングされていないImage(sprite) 2D spriteとして使う時の注意。unityは自動でテクスチャトリミングをしてくれるうえ、アトラスにパ
イージング関数を使ったUI挙動の作り方｜しゅん
今回はイージング関数を使ったUIの動きの作り方を紹介します。イージング関数とは、0.0〜1.0 の値を渡すといい感じの曲線で推移するパラメータを返してくれる関数です。Tween や Easing と呼ばれることもあります。 上記画像は、cubeOut (3次関数) によるイージング関数の使用例です。横軸が時間の経過で、縦軸が値の変化となります。 イージング関数の一覧は以下のページにまとめられています。 イージング関数が簡単に使用できるかどうかは環境によりますが、プログラムが書ければ、移植は難しくありません。例えば、HaxeFlixelという開発環境では、cubeOutであれば以下の関数が用意されていますが、別の環境であってもこのコードを移植すれば同じことができます。 // cubeOutのイージング関数 public static inline function cubeOut(t:Flo
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
UI Crunch #13 娯楽のUI - by Nintendo - - YouTube
2018/4/27（金）に渋谷・DeNAオフィスで開催した『UI Crunch #13 娯楽のUI - by Nintendo -』。"もっと楽しく"を追求する、任天堂のUIデザイナー3名をお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきました。 https://ui-crunch.connpass.com/event/82969/ ■■■■コンテンツ■■■■ 00:00:00～ 自己紹介・もくじ 00:03:57～ ①あそび心とUI 00:23:02～ ②SplatoonUIの狙い 00:42:22～ 任天堂の紹介 00:46:14～ ③NintendoみまもりSwitch は 誰のもの？ 01:07:07～ さいごに 01:10:51～ Q&A 【UI Crunchとは】 UI Crunchは、DeN
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HUDS+GUIS
Interface In Game | Collection of video games UI | Screenshots and videos
ワンランク上のゲームデザイン・レベルデザイン・UIデザインを考える 「コンテキスト」「コンフリクト」「コントラスト」デザイン
