スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
vue uiがマジでイケてる｜じゅんじゅん｜note
本記事では、vue uiで環境をつくるところだけを載せたいと思います。vue.jsは、みなさん使ったことあるでしょうか。最近、Reactのスター数を抜いたとか抜いてないとかで話題に上がっていました。 vue.jsは、モダンな最近のフロントエンド開発でよく使われるフレームワークなんですが、このフレームワーク自体のイケてるところが数個あります。 一番大きいのは、日本語がすごく丁寧に作られていること。その他に、コミュニティが活発であることなど技術面以外の点でもすごくいいと思います。 ただ、プログラミングの初心者からすれば最近のフロントエンドの流れは早く追いかけるのに必死だと思います。しかも、そのフレームワークやライブラリを使うには様々な周辺の知識が必要になってくるときもあります。 webpackやgulp、babelなど用語だけで頭が痛くなることもあると思います。 そんななか、Reactに関して
【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか？
1. やはりスイッチの記号は分かりにくい 先日、「【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味」という記事を掲載したところ、予想外に反応が大きかった。 「 | 」と「 ◯ 」は、それぞれIEC（国際電気標準会議）によって国際的に標準化された記号であり、前者が電源ON（オン）、後者が電源OFF（オフ）を意味するものだ。 スイッチに採用されているこれらの記号の意味が分かりにくいことをテーマにした記事だったが、反応の大きさやソーシャルメディア上のコメントなどから、筆者と同様にこれらの記号のみではスイッチのONとOFFを判断しにくいと感じている人が多いことが分かった。 また、スイッチの操作部分上にON・OFF表示があったり、iOSの設定アプリのようにスイッチ内部の操作部分以外の場所にON・OFF表示があると、現在の状態を示しているのか、操作後の状態を示しているのか混乱すると
観察とは何か？デザインにどう活きるのか？｜こばかな
こんにちは。THE GUILDのこばかなです。デザイナーとかをやっています。 10秒でわかるこの記事の内容先日こんなツイートをしたのですが、今回はこの話について詳しく書きました。 デッサンとは何か？たまにデザイナーの間で「美大に行く必要があるのか」「デッサンを学ぶ必要があるのか」という議論がされますが、個人的には「WEBやUI、UXデザイナーにとっては必要ない」と考えています。（グラフィックデザイナーやプロダクトデザイナーは学んでおいた方が便利だと思います） なぜならデッサンによって得られるものは「観察力」がメインであり、それを磨く方法は他にもあるからです。 行く必要がないと言いつつ、私は美大に行ったのですが、受験時代はほぼ毎日何時間もデッサンを描く生活を3年ほど続けていました。 ▼浪人時代に描いたもの デッサンは一見すると「リアルな絵を描くこと」を目的にしてるように思えますが、経験者の一
設計からパフォーマンスを意識した開発（UI編） - Qiita
この記事は、Unity Advent Calendar 2017 16日目の記事です。 今年の夏コミで販売しまして UNIBOOK8 で、第5章『初めてのパフォーマンスチューニング』ってのを書かせてもらいました。この内容から引き続き、パフォーマンス・最適化に関係するお話をしようと思います。 Unity UI（uGUI） パフォーマンスと言ってもUnityに関する技術は様々で、名前を挙げていくだけでも一苦労になるテーマになってきます。なので今回は、Unity UI（uGUI）関連に限定したいと思います。 また、Unity公式ページで公開されている ベスト プラクティス ガイド の内容をベースに話を進めていきますので、疑問に思ったりもっと詳細を知りたい方は公式をご確認頂けると幸いです。 Optimizing Unity UI 公式の各ベストプラクティスに関して、以下のような構成になっています。
『ペルソナ5』のカッコよすぎるUIの制作工程を紹介！ アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】 - ファミ通.com
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログ
こんにちは。『NieR:Automata』で UI (ユーザーインターフェイス) とメカデザインを担当した木嶋です。開発ブログを書くのは『ベヨネッタ2』以来になります。(以前書いた記事) 普段あまり注目されないUIですが、ありがたいことにユーザーの方々からの要望があり、当記事を執筆することになりました。UIにもヨコオさんのこだわりがたくさん詰まっているので、その一部も併せて紹介していこうと思います。 ■はじめに：UIアーティストの仕事 UIアーティストは、体力ゲージや会話ウインドウ、各種メニュー画面などゲーム内表示物を作っています。 大まかな仕事の流れはこんな感じです。 1：UIのコンセプトデザイン策定 2：仕様に合わせて各メニュー画面や表示物のデザインを量産 3：UIのゲームデータを作成してプログラマーに実装してもらう 4：動くUIを触ってみてアニメーションなどの調整、クオリティアップ
UIデザイナーが知っておきたいUnityの３つの機能 | CyberAgent
こんにちは。サイバーエージェントのゲーム・エンターテイメント事業（SGE)でデザイナーをしている2015年新卒入社の櫻井です。今回はUIデザイナーが知っておきたいUnityの基本機能について紹介します。ダウンロードからUI配置まで基本的な手順を追いながらガールフレンド（仮）の画像素材を用いて簡単なゲームのホーム画面作りたいと思います。 Unityのダウンロード まずはUnityをダウンロードしてみましょう！ https://store.unity.com/ja 上記では常に最新版が提供されていますがゲームのプロジェクトによっては少し古いバージョンのものを使用している場合があります。「最新版も使いたいけど古いバージョンのものも必要！」という場合、下記のような手順を踏むと異なるバージョンのUnityを保持することができます。 ※この手順を踏まずにダウンロードすると上書きされてしまいます ダウン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
