知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
3DHaptics MIRAISENS
ミライセンス社は独自の3D触力覚技術を応用した、革新的な触感フィードバック型ユーザーインターフェースを提供します
水野勝仁「メディウムとして自律したインターフェイスが顕わにする回路」 | ÉKRITS / エクリ
重ね合わされたマウスとゆらゆら揺れるiPad 私は長らく、エキソニモの「ゴットは、存在する。」と、谷口暁彦の「思い過ごすものたち」という作品を一緒に考えたいと思っていました。このふたつはともにユーザインターフェイスを題材にした連作ですが、鑑賞者であるヒトとのインタラクションがない作品です。そして、どちらの作品もインターフェイスが自律している状態にあります。ヒトとコンピュータとのあいだにあるインターフェイスが、「単体」で自律しているのです。 エキソニモと谷口の作品を順番に見ていきましょう。まずはエキソニモによる自作の説明です。 標準的なインターフェイスやデバイス、インターネットの中に潜む神秘性をあぶり出すことをテーマにした一連のシリーズ。光学式マウスを2つ絶妙なポジションで合わせることでカーソルが動き出すことを発見し、その祈っているような形態と、祈ることで奇跡が起きている状況を作品化した「P
UX方法論-産業技術大学院大学 「人間中心デザイン」
産業技術大学院大学、人間中心デザイン履修証明プログラムの復習レポ第9弾「UX方法論」です。 わたくし2014年度で履修証明をしっかり修了しましたが。 2015年度授業にも卒業生としてお邪魔して、復習グラフィックレコーディングをしてきました。 （浅野先生、押しかけグラレコ受け入れてくださりありがとうございました！） 構造化シナリオ法について 今回の会は『構造化シナリオ法』のうちのアクティビティシナリオ・インタラクションシナリオ、UXフローでした。 構造化シナリオ法は以下の3つのシナリオを使います。 バリューシナリオ：ユーザー情報・ユーザーの本質的要求・ビジネス情報・ビジネス提供価値から、提供する価値（バリュー）を考え、またそのユーザーが利用するシーンを定義するもの アクティビティシナリオ：ユーザーの利用シーンを行動のストーリー化し、そのタスクを記載したもの インタラクションシナリオ：タスクを
『AWAインタラクションの主軸は『ギャップレス』』
【GIFアニメーション多用につきPC推奨】 AWAをリリースして3ヶ月ほど経ちましたが これまでインタラクションについてしっかりと説明したことがなかったので、 今回はAWAのインタラクションについてまとめていきます。 ※ここではインタラクションに完全にフォーカスして書きます※この記事では iOS版 AWA v1.2.0 時点でのインタラクションをまとめています はじめに インタラクションというと右脳的・感覚的な要素が強いですが、開発においては右脳的に良くするするために左脳をかなり使うので、作成段階はかなりロジック的です。 今回はそうして作ってきたAWAのインタラクションをあえて深いところまで説明して、左脳的な部分を備忘録的に露出いきたいと思います。 ■ インタラクションはあくまで直感で理解してもらうための手助け AWAのインタラクションを作るうえで最も大切にしたポイントを一言でいうと、 ギ
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
CGキャラと触れあえる？ 未来のゲームに応用できそうな「インタラクション技術」をSIGGRAPH 2014展示会場でチェック
CGキャラと触れあえる？ 未来のゲームに応用できそうな「インタラクション技術」をSIGGRAPH 2014展示会場でチェック ライター：西川善司 SIGGRAPH 2014の会場であるVancouver Convention Centre SIGGRAPHの先端技術展示会である「Emerging Technologies」（以下，E-TECH）で注目された展示をレポートする企画の3回めは，人間と仮想世界をつなぐインタフェースやインタラクションに関わる技術の展示を紹介する。 今回は，ゲームに応用されると面白そうな技術を集めてみた。未来のゲームに使われるかもしれない技術を一足先にチェックしてみよう。 空中に表示したユニティちゃんをグルグル回す HaptoMIRAGE 「ゲームのキャラクタと直接触れあたらいいのに」なんてことを考えたことはないだろうか。仮想世界のCGオブジェクトを現実世界に出現さ
どんな動きにするか悩んだときに！UIアニメーションのインスピレーションを得られるサイトまとめ | Goodpatch Blog
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか？いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました！ （以下”Interface Animations and Transitions: where to get inspiration”の翻訳。） photo credit: Jorge Quinteros via photopin cc UI/UXデザインにおいて、細
カスタマージャーニーマッピングを行なう10のステップ - Think Social Blog
Tweet 先日、「エクスペリエンスジャーニーマップ／カスタマージャーニーマップ」という記事で、サービスデザインを行なう上で用いるモデル化のツールとして事例を紹介したカスタマージャーニーマップ。 このカスタマージャーニーマップの作成に関して、オランダのサービスデザイン会社DesignThinkersのArne van Oosteromが書いた「Mapping out customer experience excellence: 10 steps to customer journey mapping」がとても参考になると思います。 （参照元：slideshare "DesignThinkers presentation at the Aegon Marketing Conference 2011"のP57より） 今回はその記事に書かれたカスタマージャーニーマッピングを行なう10ステップを
エクスペリエンスジャーニーマップ／カスタマージャーニーマップ - Think Social Blog
Tweet 前回の「サービスブループリントを用いたWebユーザビリティ評価」では、サービスを体験する利用者とタッチポイントの間でのインタラクションをモデル化するツールとして、サービスブループリントという手法を紹介しました。 サービスデザイン＆エクスペリエンスデザインの分野で同様の目的で使われるツールにもう１つ、エクスペリエンスジャーニーマップ（またはカスタマージャーニーマップ）と呼ばれる手法があるので、今日はそのツールについて紹介してみようと思います。 エクスペリエンスジャーニーマップ（またはカスタマージャーニーマップ）は、顧客がサービスを利用する際、そのプロセスの様々な段階での顧客のニーズそれを満たすための必要なインタラクション、そのインタラクションを受けた際の顧客の感情の状態を、サービス利用時の流れに沿って視覚的に表現するモデル化ツールです。 SERVICE DESIGN TOOLS
ジャーニーマップ：経験とインタラクションを理解するための方法 - Think Social Blog
Tweet 企業のみならず、多くの組織がいま経験やインタラクションというものをどのように理解すればよいかについて困惑しているように感じます。 「経験のデザイン」ということが注目されていたりもしますが、経験というのは、これまでのように目に見え手で触れられる製品や、Web、GUIなどをデザインするのとは異なり、目で見え手で触れられるものではありません。また、同じモノ、同じような状況から得られる経験でも、誰が体験したかで異なるような不確実な性質をもっていたりもします。それが従来のようなモノ中心あるいは「このボタンを押すと○○が起こる」というような機能中心に思考するデザインのあり方とは大きく異なるために、そうした思考に慣れてしまった人には、うまく理解できないという側面があるのでしょう。 ただ、そうはいってももはや「経験」は無視できなくなってきました。それが多くの組織における困惑につながっているので
目の不自由な人も触って読めるコミック：インタラクション・デザインの実例 | ライフハッカー・ジャパン
目の不自由な方のためのコミック。ただし、別にゴム人間が活躍するわけでもなければ、巨人が人間を襲うわけでもありません。 インタラクション・デザインを学ぶPhilipp Meyerさんが作ったのは、24コマの「ふれられるマンガ」。完成までの試行錯誤を自身のウェブサイトで公開しています。 Nota（デンマーク・コペンハーゲンに本拠地を置く、視覚障害者の生活改善を目的とした組織）の協力のもと進められた制作は、実に丁寧なものだったようです。 視覚的なマンガを触覚だけで理解できるものにするには、「コマそのものをいちから作り直す」必要があります。しかも、目で見ても手で触れても理解できるものを作りたいと考えた彼は、デジタル上で試作することから始めました。 「生まれたときから視覚障害を抱えている人にとって、マンガそのものが未知の存在。なので、まずマンガとは何か、読む人に理解してもらう必要がある」 「コマに描
東工大、ハプティックインタフェースの最新型「SPIDAR-I」を開発
東京工業大学(東工大)は3月14日、バーチャルリアリティ(VR)空間の物体の力触覚を正確に提示できるハプティックインタフェースの最新型「SPIDAR-I」(画像)を開発したと発表した。開発は、東工大精密工学研究所の佐藤誠教授らの研究グループによるもの。実物は3月15日・16日に日本科学未来館で開催された「インタラクション2012」で発表され、デモ展示が行われた。 近年、計算機性能の飛躍的な向上により、3次元VR空間をリアルタイムにシミュレートすることが可能になってきた。そこで、3次元空間内の物体と力覚インタラクションができるハプティックインタフェースが注目され、研究が進められている。 ハプティックインタフェースとは、位置入力だけでなく力情報のフィードバック機能を有する機器を指す。バーチャル世界で物体を自由に操作し、その物体の重みや障害物と衝突したときの感触などをユーザに提示することができる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁デザインシステムβ版
CareBots プロジェクト（写真・ビデオ）
http://aboutecux.com/websig-spui-design/
iTunes Visualizer - wowlab