イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
一人で「UIデザインツールどれがいいのか論争」をしてみる｜ノムジュン
UIデザインツールが増えて、それぞれの特徴とか混同してきたんで一回整理します。随時更新するかも。しないかも。 Adobe XDコラボレーションツールとしては優良なのだけど、UI構築ツールとしては機能不足。 他のAdobeツールとの連携が効くからUI構築作業は他ツールで行えばいいのだけど、できれば一つのツールでUI構築からプロトタイプの共有までやりきりたいところです。 アトミックデザインに向いてないとかって話もありますね。（このへん私はあまり踏み込んでいないので詳細わかりませんが、以下URL参照） SketchUI構築ツールとしては文句なしで最優良。反面、コラボレーションツールとしては弱い。情報のシェアのためにはzeplinやInVisionが必要です。 豊富なプラグインでカスタマイズできるのが強みではあるけど、カスタマイズできることがコラボ作業の枷になってもいるような感あり。（個々のデザイ
Firebaseと画像とUXを考える - Qiita
どうもFirebase Japan User Groupオーガナイザーの@1amageekです。 この記事ではUX向上のための画像の取り扱い方について解説しようと思います。 サービスと画像 画像のロードはサービスのUXに大きな影響を与える WEBでは、1秒の遅れでCVRが7%ダウンすると言われています。Instagramがもし画像のロードに1秒もかかっていたとすれば、おそらくここまでは大きなサービスにはならなかったでしょう。 画像の取り扱いには、時間をかけてUXを向上させる意味があります。 ロード速度も重要だが、待ち時間こそ重要 画像のロードは、サイズと通信速度に依存します。つまり技術的観点からすれば、とにかく画像を小さくすること以外は、解決方法はありません。 既存のあらゆるサービスは、待ち時間をいかに低減させるかを工夫してUXを向上させてきました。この記事ではその手法に焦点をあてて紹介し
プロトタイプは画面や機能ごとに作ってはいけない
※ユーザー調査法は下記のように、大きく2つに分類される。両者の違いは、次回説明する。 ニーズ探索型:ユーザー調査、行動調査、フォーカスグループインタビュー 仮説評価型：ユーザーテスト、ABテスト、アンケート プロトタイプ 今回は、この中からプロトタイプを取り上げる。プロトタイプとは、一般的には「評価、改良を目的にプロダクトの模型を作ること」である。この連載での改良の対象は当然、プロダクトのUI（ユーザーインタフェース）やUX（ユーザーエクスペリエンス）が中心ではあるが、技術仮説の模型もプロトタイプと呼ばれる。 画面やインタラクションを丸ごとプロトタイピングしない UI開発にプロトタイピングが有効であることはよく知られているためか、下記のようなゆるっとした進め方により、結果プロトタイプ開発に工数をかけ過ぎてしまうことがある。 目的を定めずに、漫然と「決めた仕様に基づく使い勝手を確かめるため」
娯楽を超えたデザイン （UI Crunch #13 娯楽のUI イベントレポート）｜のっち Ryosuke Inoue
「UI Crunch #13 娯楽のUI - by Nintendo -」に参加しました。世界的にも注目される企業かつあまり表に出てこないデザイントークが聞けると言うことで、倍率も相当なものとなっておりました。この企画は構想から2年くらいかかったそうで、とても濃いお話を聞くことができました。めちゃ感動しました。今回は、そちらのイベントレポートです。最初の方あまり写真を撮らなかったので、後半の写真が多めになります。 1人目は、UI/UX デザイン チーフの正木さん。「娯楽UIの思考の原点」についてお話いただきました。 Nintendo流の「伝え方」Nintendoが人に何かを「伝える」時にこだわっていること。それは、以下の3つです。 ・「教える」ことよりも「体験する」ことで、より早く、的確に伝えることができる。 ・初めての体験は一度きり。新鮮な印象を大切にする。 ・体験はやっぱり面白くしよう
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
サイトやアプリの使い心地を改善！UIアニメーションを良くする実践テクニック、小技7個まとめ
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録
もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
データ分析は「強者の武器」、駆け出しのうちはデータが貯まるまでの間に他にやるべきことがある - 渋谷駅前で働くデータサイエンティストのブログ
(Image by Pixabay) こんな面白い記事が出回っているのを先日見かけたのですが。 この6年弱のデータ分析業界での個人的な経験や業界内で見聞してきた知見の範囲で言うと、そもそも「データ分析は『強者の武器』であって小さな組織が使っても強い武器にはならない」というのがあると思っています。言い換えると「スタートアップと呼ばれているうちはデータ分析以外のところに注力すべき」ということかと。ということで、その辺の話をざっくり書いてみようかと思います。 データ分析の効果は「掛け算」なので、元手が多くないと意味がない これまで色々な場で色々なデータ分析の専門家によって言い古されてきた言葉*1とされるのが「データ分析の効果は『掛け算』」だということ。 つまり、データ分析の効果というのは一般には「売上プラス1億円」とかではなく「売上1%アップ」という感じになりやすい、ということです。すると当然な
書評 「悲劇的なデザイン」｜深津 貴之 (fladdict)
BNNさんから、「悲劇的なデザイン」をご恵投いただきました。 デザインで人が死ぬ本書はデザインの「倫理」と、「間違った使われ方の影響」について語った本だ。今年のアタリ本の一つ。 ひどいデザインの影響力は、一般に想像されるよりはるかに大きい。 医療ミスが発生して患者が死ぬ。フェリーが衝突し、飛行機が墜落する。選挙の結果で、特定の候補者が有利になる。さらには悪意あるデザインによって、ユーザーは騙され間違った選択を行わされる。 著者は、このような問題の原因を「ユーザー不在のデザイン」に置く。クリエイター（あるいはスポンサー）のプライオリティが、ユーザーよりも高くなったとき、ひどいデザインは生まれる。目先の指標の追求が強くなりすぎ、そのサービスが行うべき真の価値は、たやすく捨て置かれてしまうのだ。 しかし、目先の指標（利益）を安直に追い求めた場合、企業は大きな代償を支払うことになる。顧客の流出、事
負荷試験のためのノウハウと Webフレームワークの負荷試験 (Python,Node,Go,PHP) - Qiita
この記事はRetty Advent Calendar 2017 における 22日目の記事です。 昨日は @saku さんの swiftで丸画像をパフォーマンス高く表示する方法 でした。 はじめに 趣味のBot開発から気づけばWebフレームワークの負荷試験を行なっていました。 Software Engineerの@tkngueです。普段業務としては、Data Engineer/Web Service開発/データ分析やってます 「速さは正義」 とは皆の共通の認識で、言うまでもないことだと思うのですが 本記事では、速さってなんだろうって考えてみます。 TL;DR 負荷試験における 速さは面で捉えよう: 品質を50%'ile - 90%'ile - 99%'ile ... で定義する 品質を評価する手段にも気をつかおう: Coordinated Omission は大きな測定誤差を生みます Goも
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
モバイルアプリにおける５つのアニメーションの活用法
10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。 しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。 現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザー行動の習慣化がビジネスを成長させる
THE GUILD勉強会『Atomic Design & Sketch』
どのようにパートナーをリードして UIに落とし込むか
ユーザーインターフェイス解剖学（公開版）
