「Goodpatch Engineer Meetup Vol.3 エンジニア目線で考えるデザイン」で発表したスライドの公開版です。 https://goodpatch.connpass.com/event/56973/
![ユーザーインターフェイス解剖学(公開版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/903aff04953e754c2fc0338786bd31e5f0484c15/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F214d0c3b1160483b883d4a69a7d9895a%2Fslide_0.jpg%3F8162035)
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……? 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
はじめに この投稿では、Unity でのネイティブアプリゲーム開発において、UI実装をマルチシーン編集で行った経緯と、その方法について紹介します。 上図の画面は現在開発中のものですが、複数のシーンによって構築されていることが分かります。 開発環境 この投稿を執筆した段階での Unity バージョンは 5.5.1f1 になります。 UIフレームワークは uGUI を使用しています。 マルチシーン編集とは マルチシーン編集は Unity5.3 から導入された機能です。 マルチシーン編集の大きな特徴として、以下が挙げられます。 エディタ上で複数シーンを開くことができる 実行時に複数シーンを管理できる 上記の特徴から、オープンワールドのような巨大な環境をシームレスに遷移するための仕組み作りや、巨大な一枚岩のシーンを分割して開発を分担するワークフロー改善の用途が見込まれます。今回の投稿では、このマル
こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい https://t.co/dBlWhVj4Cv
http://d.hatena.ne.jp/shi3z/20101015/1287124685 のブコメでのid:shi3z さんとの会話に触発されて、Facebookとmixiのユーザーへの配慮の差を比較してみた。 技術寄りの人たちが根本的に誤解しているのが、「動きが速い」とか「豊富な機能」とかにとらわれて「迷わない」ことの重要さが吹っ飛んでいるということ。 とりあえず、一般人視点になりきってユーザーテスト。 あくまで「なりきり」だから、おそらくほんまもんの初心者が見たらこれの100倍は問題点が噴出するはず。 トップページ 文面 mixiの場合は上部の「mixiについて」できっちりSNSの概念を説明している。 Facebookのトップページは「できること」の具体的説明に乏しい。 トップページに登録フォームを置くことで使用開始までのステップを短くしたいのはわかるが、こういうものをユーザーへ
[Unity] 某まるっこい、ぷにっとしたコントローラーを作ってみる by 希木小鳥 · 公開 2015年6月15日 · 更新済み 2015年6月18日 某プロジェクトのぷにっとしたコントローラーを作ってみたいと思います。調べてみると「特許が~」みたいな記述はあるものの、インターフェース関係だし大丈夫だろうと判断しました。 もちろん再現したのは見た目だけなので、触り心地はだいぶ違うものになっています。 環境 Unity 5.0.1f1 ぐにぐに 結果から。こんな感じになりました。 作った手順 ※最初はVisualStudio上で試しました。 始めに円形を作成します。(あとでUnityに移植する前提でVisualStudio上で作成) この処理には中心位置(最初に押された場所)と先端位置(現在の位置)の2つの座標値を使用します。 中心位置は固定とし、先端位置を変化させることでぷにぷに感を出す
Home » UX » NativeゲームとWebゲームでのUIデザインの違いと目指す価値「海賊コロンブスと消滅都市の比較」 NativeゲームとWebゲームでのUIデザインの違いと目指す価値「海賊コロンブスと消滅都市の比較」 Posted on 5月 27, 2015 by NagasakiJiro 自己紹介 皆さんこんにちは。 Wright Flyer Studios 1部 Artグループ UI UXチームの長崎です。 現在、グリーでスマートフォン向けNativeゲーム開発におけるUIデザインを担当しています。 これまで、ソーシャルゲーム(Web/Native)だけでなく、コンシューマゲーム、アーケードゲーム、PCゲームなどのUIデザインにも携わってきました。 ジャンルとしては、アクション・RPG・アドベンチャー・スポーツ・ホラー・知育など、ほぼ全ての分野でUIデザイン経験があり、
ゲームの UI 研究@java-ja onk (大仲 能史) 所属:株式会社ドリコム blog:http://onk.blog.drecom.jp/ twitter:http://twitter.com/onk/ tumblr:http://onk.tumblr.com/ よろしくお願いします ゲームと Web の共通点 大きく2つ マニュアルを読まないユーザ層 ゲームの場合 ゲームセンターをベース としているのが原因 web は…… なんで読まないんだろう? マニュアルの分厚さ('A`)? マニュアルを読まなくても 操作が分からなくてはいけない ゲームはホントにこれが上手い 2つめ 長時間の連続操作 これが家電と ゲーム / web との 大きな差 だからこそ ユーザをハメる演出 が必要 この点で ゲームは2歩も3歩も 先を行っている
今回は前回、前々回のエントリーで書き足りなかった部分の補足を行いたい。一気に書けばよかったのだが、時間的都合でブツ切りになってしまった。申し訳ない。 ●拡張性の高いUIデザインMMORPGのウィンドウはユーザーの好きな位置に配置できる。OSのウィンドウのように、ステータスウィンドウはこっち、スキルウィンドウはこっちという風にだ。これはMMORPGが効率重視なゲーム性だからではないかと考える。 どんな配置が見やすいかはユーザーの慣習に左右されるため、ステータスウィンドウは上にあった方が見やすいという人もいるだろうし、その逆の人もいるだろう。なので、ウィンドウの配置はユーザーでいじれた方が効率性は増す。 また、ウィンドウデザイン自体をカスタマイズ可能なMMORPGなどもある。今はプレイしていないので現状は分からないが、βテスト時代のラグナロクオンラインでは、ユーザーがウィンドウデザインのカスタ
PC、ケータイ、スマートフォンなどでアクセスできる会員制オークションサイト。会員数は100万人以上を誇り、いつでもどこでも楽しめる利便性から日々活発に取引が行われている。 急速に求められ始めたWebサイトのスマートフォン対応。狭い画面とタッチ操作という独特なデバイスに必要なUI 設計とはどのようなものだろうか? スマートフォン向けサービスを数多く展開するDeNAでディレクターを務める鈴木哲之さんに、オークションサイト「モバオク」での取り組みをうかがった。 取材・文/久保靖資 取材協力/鈴木哲之(株式会社ディー・エヌ・エー) テスト等を通じたUI/UX設計への取り組み 一般的なコーポレートサイトでもスマートフォンでの閲覧を期待して最適化が要件に含まれるようになるなど、Web制作の現場でスマートフォンへの対応を求められるケースが急速に増えている。限られた画面内でコンテンツをどのように見せるのか
おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。 母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。 そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。 右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない 最近、スマートフォンサイトではヘッダの右上に「三本線+メニュー」のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、「メニュー」「MENU」の記載が大体あります。 しかし、私の「このメニューっていうボタンを押したらメニューが表示されるって分かる?」という質問に返っ
スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほんとに欲しかったんです。 書籍の内容 何度もコピペして使いたい定番43パーツを厳選。 スマホサイトのUIの名前と使い方、ソースコードをまとめました。 「コーチマークってどんなUI?」「タイムラインってどうやって作るの?」 本書は、スマートフォンサイトの制作で欠かせないUIパーツの「名前がわからない」「使い方がわからない」「作り方がわからない」を解決する本です。 定番の43パーツを体系化して収録。豊
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう? ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか? 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注:Complexionは「顔色」「血色」という意味で、Reducti
【CEDEC2016】全てはプロデューサーが集中して楽しめるように! 『デレステ』UIの要諦は基本ルールと最小のパーツ 軽量版やウインクの秘話も明らかに Cygamesは、「アイドルマスターシンデレラガールズ スターライトステージ 制作事例・アート編 - 総勢60名のアイドルを最大限魅力的に表現し、ライブに集中する手法(モデリングとUI/UXデザイン)」と題するセッションを8月26日の「CEDEC2016」で開催した。モデリングパートとUI/UXデザインのパートに分かれており、今回はUI/UXデザインパートの模様をレポートする。UI/UXデザインのパートでは、Cygamesデザイナー部UIデザインチームマネージャーの中村ふじ子氏(写真)が登壇した。 『アイドルマスターシンデレラガールズ スターライトステージ(以下、デレステ)』は、「Mobage」で配信されている『アイドルマスターシンデレラ
えっ!?HTMLだけでできるんですか。 私はインブラウザでコーディングするとデザインイメージ湧かないから苦手なんですよ〜。 逆に遅くなっちゃいますよ。 クライアントだっていろいろ修正変更とか言ってきそうじゃないですか。 デザインとコーディングを同時に修正するなんて大変すぎます。 クライアントと案件内容にもよりますがスケルトンサイト(ワイヤーHTML)から見せながら制作した方がデザインが通りやすく納得されやすい事が多かったです。 初期の段階でサイトの骨格がすでに決まっているのでコーディング時間を大幅に短縮する事も可能です。 デザイナーはデザイン作業に集中できます。 (※全ての案件に対応できるわけではないので案件によってはワークフローを変更する必要もあります) 今回紹介するワークフロー (1)スケルトン(骨格)サイト制作 Bootstrap3のジェネレーターを使って作成する (2)デザイン作業
アプリケーションのUI(主にGUI)の設計・評価をする際、ほとんどの場合は評価の範囲が画面(ページ)単位で行われることが多く、この設計・評価のフォーカスの粒度についてもっと考えたほうがいいのではないかと最近よく思います。 画面単位での評価をしていてよくあることは…画面 A 画面 B どちらにもリストがあり、そのリストは同じリストアイテムを表示していたりする場合でも、 「画面 Aとリストがー…」 「画面 Bのリストがー… 」 と同じリスト要素なのに画面単位で話をしてしまうことがよくあります。これはかなり無駄なことをしているように思えます。 もちろん、《そのデザイン要素はどういうコンテクストなのか》を議論する上で画面を持ち出すのは必要な事と思いますが、そもそもそのコンテクストは何に依存するものでしょうか? それはコンポーネントとして分解していくと実は画面そのものにあまり依存していない事が見えて
なぜ可愛い女の子は、はてなを使わないのか - No Title Documents はてなの入り口のデザインなのか、 はてなダイアリーのデザインなのかで、また話は変わってくるんだろうケド。 はてなは初心者を迎える手段として見えるものを制限している。 レベル1ならブログを書くだけ。 レベル10ならデザイン変更。 レベル20なら公開デザイン。 レベル30なら自分でCSSを書く。 主人公のレベルが上がると使える魔法が増えていく。 極めてシンプルで極めて王道。 でもね違うの。最初からレベル100がいいの。 ダイアリーだって、どんな日記を書くかなんてどうでもいい。 どんなデザインのブログが書けるかの方が重要。 CSSとか全然わからないけど、思い通りのにデザインしたい! ドラッグとドロップでデザイン編集したい!>はてなエディタは未実装です。 アカウント取るときに、好きな色と好きな感じとか選んだらいくつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く