Avoid Flip-Flop ひとつのボタンでオンとオフを切り替える場合、ラベルが現在の状態を表すのか押した後の状態を表すのかわかりづらいことをフリップフロップ問題という。状態表現とラベルを分離してこの問題を回避する。
![ソシオメディア | フリップフロップ問題を避ける](https://cdn-ak-scissors.b.st-hatena.com/image/square/114578dc2738627530c66dd226f13f6358643602/height=288;version=1;width=512/https%3A%2F%2Fwww.sociomedia.co.jp%2Fassets%2Fimages%2Fshig%2Fflipflop.png)
2020-01-30 クオリティ第一 ゲーム開発 デザイナー プランナー 「技術&仲間」と紡ぐ、ゲームUI/UXのワークフロー ~CGWORLD 2019 クリエイティブカンファレンス登壇レポート~ 2019年11月3日(日)に開催された『CGWORLD 2019 クリエイティブカンファレンス』にて バンダイナムコオンラインのデザイナーが講演を行ないました。 登壇したのは、ビジュアルデザイナーとして ゲームのUI(ユーザーインターフェース)デザイン、リードビジュアルを担当する太田垣 沙也子さん。 ビジュアル業務のなかでもやや特殊なポジションと言えるUIデザインには、 使いやすく美しいデザインを作るのはもちろん、 プランナーと共にゲームのフローを考え、エンジニアに渡すための実装データを作るといった多岐に渡る業務があります。 その中で今回は「トライ&エラー」について注目。 『UI! UI! U
※リストは不定期更新していますが記事本編は投稿時のままです。 今回はたくさんあるトラッキング、マッチムーブソフトを比較してみました! 一般的に販売されているものをほぼ網羅してみました(基本全部一度は触った(デモ版含め)上での評価です)。 おまけにマスク機能等も比較しています。 比較ソフト一覧(カメラトラック機能があるもの) ・Blender・Voodoo・SynthEyes・PFTrack・PFMatchit・Boujou・3DEqualizer ・MatchMover・Maya Live・NukeX・CameraTracker・AECS6 ・CineCAT・VooCAT 未検証追記 ・GeoTracker・fayIN その他として ・Mocha・Silhouette 今回検証、記載してないもの SMOKE、DaVinci Resolve等の編集メインのソフトは除外。 上記以外で抜けている
武蔵野美術大学・デザイン情報学科の学生だった時、「デザインの解剖」というカリキュラムがあった。 デザインの解剖とは、グラフィックデザイナーの佐藤卓さんが独自に行ったプロジェクトで、コンビニやスーパーで売っているような日用品を題材に、ひとつの商品の構成要素を約20項目に分解、それぞれの項目で「どうしてこの部分はこうなっているのか」を、企業の担当者に直接取材して調査するというもの。この基本フォーマットを崩さぬまま、大学の授業としてアレンジしたのが、ムサビ版「デザインの解剖」だった。もちろん客員教授として佐藤卓さんを招いている。 今までに佐藤卓さんが「解剖」した商品は、ロッテ・キシリトールガム、富士フイルム・写ルンです、タカラ・リカちゃん、明治乳業・明治おいしい牛乳など、馴染みのある商品ばかりだ。このプロジェクトは、普段私達が「よく知っている」と思っているものが、実は「よく知らない」ことに気づく
アプリ開発のために、UIやUXといったデザインを考えなければいけない。そのためには、正しいメソッドをもとにデザインすることが求められる。THE GUILDの深津貴之氏は、QuadCameraやミニチュア風写真が撮れるTiltShiftGenの作者で、iPhoneアプリを中心としたUIデザイナーだ。 同氏がMOVIDA SCHOOLで語った「デザインを考えるために必要なメソッドとプロトタイピング」についてまとめた。 デザインの本質は「設計」 デザインは、表面的なものをキレイにすることではない。デザインの語源は「設計」であり、ものを整理したり整頓したりすることだ。目的を提案したり課題を解決したりすることが大きな方向性といえる。そのための手段として、ユーザ体験を考えるUXデザインや操作性としてのUIデザイン、情報をわかりやすく伝えるための情報デザインなどがある。 デザインは、センスではなくエンジ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには?ゲームが終わったときに、どのような設計になればもう一度やってくれる? チュートリアルは必要?やりこみ要素はどうする?ソーシャルとどうやって連携する?ポイント加算の条件は?アクショナブルフィードバックは?日常で使ってくれるような設計には何が必要?盛り込みすぎではないか? などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
Android フレームワークの Menu アイコンなど、用意されている画像の色だけを変えたい場合、ColorFilter が便利です。 ColorFilter を継承したクラスとして、ColorMatrixColorFilter, LightingColorFilter, PorterDuffColorFilter が用意されています。 ここでは、PorterDuffColorFilter を使ってみます。 ■ ImageView で ColorFilter を使う ImageView には、ColorFilter を設定するためのメソッドが用意されています。 ・public final void setColorFilter (int color) (Since: API Level 8) 引数で指定された color で SRC_ATOP blending mode の Porter
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
世界中で講演を行い、ホワイトハウスでもプレゼンテーションを行ったという「UXの第一人者」Janice Fraser氏。 UXに特化する会社を立ち上げた彼女の経験・バックグラウンドや、彼女が語る「Lean UX」などに関しては同記事の後編に譲るとして、まずは彼女が定義する「UXとは何か?」ということや、よく混同されがちな「UIとUXの違い」、更には「国を超えるとUXに違いはあるのか?」「良いUXを測るための指標」について伺った。 ◆目次(前編)◆UXとは?混同されがちなUIとUXUXに国ごとの違いはあるか?良いUXかどうかを測る指標は?◆話者プロフィール◆ ゲストトーカー:Janice Fraser LUXr, Inc. CEO @clevergirl UXデザイナー、起業家。UXを重視したウェブサービスのデザインを手がけるAdaptive Path社の共同創業者、初代CEO。 15年に渡る
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
Mike Matas(マイク・マタス)というデザイナーの名前を聞いたことはありますか?以前「Dribbbleでフォローしたい、世界トップレベルのUIデザイナー14人」でも少し紹介しましたが、UIデザインの歴史について調べたら必ず彼の名前が見つかるはずです。Mikeは私たちが毎日使っているiPhoneのユーザー・インタフェースの重要な部分を多く担当し、今のUIの基礎を生み出したと言っても過言ではないほど、素晴らしいデザイナーなのです。今回のMEMOPATCHは彼が今まで手掛けてきたデザインをまとめて紹介します! 14歳からデザインの仕事をはじめる Mike Matas(マイク・マタス)は14歳のときにMac OS Xアプリケーションのためのアイコンやロゴを描くというスモールビジネスをはじめ、Macのコミュニティの間でアイコンデザイナーとして徐々に有名になっていきました。(上に掲載したWats
To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details. In this post, we’ve prepared an overvi
今回は富士通研究所が開発に成功した、 次世代ユーザーインターフェースから。 書類などをタッチパネルに変えてしまう技術なのですが、 個人的には開発品にこれほど感動を覚えたのは久しぶりです。 詳細は動画内にて説明されていますので、さっそくごらんください。 実世界の物に対してタッチ操作可能な次世代UI #DigInfo ■ これは、未来、君なのか? ロシア ■ スマートフォンにこの機能が付いてたら最高だよな。 セルビア ■ 未来はまさにここから始まる。 +79 マレーシア ■ 未来が始まるのはいつだって日本からさ。 +4 アメリカ ■ もっと言うと、日本からすべてが始まった。 マレーシア ■ 未来の俺のデスクにはこの技術が搭載されてるはず。 国籍不明 ■ 未来がもうすぐそこまで来てるって感じがする! 国籍不明 ■ プロジェクターはちょっと不便だなって思ってたトコなんだよ。 これに加えてグーグルグ
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く