UXデザイナーのスケッチ＆ノートを公開します！｜TK - UXデザイナー in 🇺🇸
今日は今までのUXデザインプロジェクトの中で書いたUIやフローのスケッチを紹介しようと思っています。この記事は自分自身の記録のためでもあるので随時更新します。 1. スケッチのスキルがUXerにとって重要になっている僕は場所的に行けていないのですが、「㊙展 めったに見られないデザイナー達の原画」でデザインの基となっている原画が公開されているそうです。普段目にするのは最終形のプロダクトだけですが、原画にこそデザインの意味が込められていると思うので東京に帰る際には寄りたいなと思っています。 実際にUXの現場においてUIやフローのスケッチを書くスキルは重要になってきています。Lean UXの世界では最初のペーパースケッチの段階からアイデアをチームとユーザーに共有して、フィードバックを得るようにします。以下の図のように昔はデザインチームの中だけで最終デザインを作り上げていました。しかし今はアイデア
スマートフォンのディスプレイ巨大化に伴う、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まで
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース
KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 『ブラックボランティア』などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった２歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目 出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが８万人（組織委員会）、そして、都市ボランティアが３万人（東京都）の募集が昨日（2018/09/26）より開始となった。それぞれの申し込みページが公開された。 大会ボ
スプラトゥーンのイカしたUIはこうして作られた─担当デザイナーが語る秘話 | 超ゲームウォーカー!
前編：マリオメーカーのUI/UXデザイナーが語る「弱点を克服する娯楽UI」の原点とは 後編：保護者の欲求には逆行している─アプリ「みまもりSwitch」のUIデザイナーが実現したかった世界とは 2015年にWiiU用ソフトとして発売されたスプラトゥーンは、その優れたゲームシステムとアートワークによって瞬く間に世界中にムーブメントを巻き起こした。そして2017年にはNintendoSwitch向けにスプラトゥーン2が発売され、その勢いはとどまるところを知らない。 そんなスプラトゥーンの開発秘話を、UIデザイン(ユーザー・インターフェース・デザイン）という切り口から語った発表が、2018年4月27日（金）、UIデザインの勉強会UI Crunchにて行われた。「SplatoonUIの狙い」と題して語られたこのセクションを担当したのは、任天堂のUI/UXデザイナーである橘磨理子氏。 彼女は2012
UI/UX デザイナーを雇わない方がいい理由 ｜ブログ｜root｜デザインの実践を個から組織・事業へ
UsabilityHour.com の創設者である、クレイグ・モリソ氏によるゲストポストをお届けします。 UXデザイナーとUIデザイナーは完全に違う役割を果たすから、一人の人間に両方の仕事を任すべきじゃない。 ふー、ついに言ってしまいました！ みなさん言いたいことはあるかと思いますが、その怒りをぶつける前に、まず説明させてください。 この2年間、私は二つのスタートアップでリード UX/UIデザイナーとして働いてきました。 また、どちらのポジションにいるときも多くのインタビューを受けしました。 次第に、どういう現象が起きているのかがようやくはっきりと見えてきました。 世間、特にスタートアップの創設者は、ユーザーエクスペリエンス・デザインが、本質的に何なのかを理解していないのです。もちろん、重要だということは把握していますが。使いやすいインターフェイスを持つというのは、デジタルプロダクトを売り
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
Adobe Just Built The Prettiest UI Ever
There is nothing quite like an artist’s palette. With this humble piece of paper or wood, the artist can mix infinite pigments, each of which can be dipped into again and again without a second thought. FiftyThree’s Paper did an incredible job at streamlining the palette for iPad screens. And now, a new project from Adobe Research and University of Toronto may take things a step further. Their Pla
日本の家電の「絶望的な使いづらさ」について | CoardWare Blog
※記事本文やコメント欄は長文ばかりのため、パソコンやタブレットなどの大きいディスプレイで読まれることをオススメします。 スマホのような小さいディスプレイだと「長文全体から意味を汲み取る能力」が大幅に低下するためです（それでもスマホの閲覧を意識して改行を多く入れています）。 追記を３つ行いました。 – 追記1 2017/07/15 – 追記2 2017/07/19 – 追記3 2021/01/20 —以下本文— ふと思い立ち、「国内家電は使いやすいのか」を念頭に入れ、その視点を意識しながら家電を使い、この一年間を過ごしてみました。 なぜそれをするキッカケになったのかと言うと、実家に帰省した際に、「洗濯機」の使い方がわからず挫折したからです。 ちなみに僕は今までにMacもWindowsもLinuxも使ってきており、プログラミングもやってきているので、 平均以上の「マシン」への打たれ強さはある方
成熟期に入ったUIデザインとデザインシステム
先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS のように新鮮な UI とインタラクションが生まれる場があるものの、あまり見かけなくなりました。今のアプリ UI デザインは、目新しいものを作るより、今まで培われたノウハウを基に使いやすさ、見やすさを磨き上げるフェイズに来ています。斬新なアニメーションと目新しい形状のメニューを作るより、ガイドライン
はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ
はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこと、そしてそうした部署の人たちの知識を活用することを学びました。 この記事では、私が学び、日常のルーティンに取り込んだすべてのステップを紹介しようと思います。こうしたステップがあったからこそデザイナーとして大きく成長できたと思うので、読者のみなさんに役立つことを願っています。 事前準備をする Step 1. 集められるだけの情報を集める（例示は3パターンでお願いする） 私にとって、実際に稼働してい
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
iOS ヒューマンインターフェースの原則 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が
Instagramの利用率を大きくアップさせた、わずかなコードの変更とは？ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
上： iOSのInstagramアプリ上の写真家Lisa Bettany氏(@mostlylisa)のページ Image Credit: Ken Yeung/VentureBeat Facebook が所有する写真共有アプリ Instagram を開発するソフトウェアエンジニアたちは、アプリのパフォーマンスをいかに改善できるか常に模索している。パフォーマンスの改善というのは、完璧主義の行いのようにも聞こえるかもしれない。だが、実際にそうした行為が重要な指標の改善にもつながる。たとえば、ユーザーの利用が増えるというように。 それこそ、まさに最近起きたことだ。エンジニアは、モバイル端末上でInstagramの各写真に20個のコメントを表示させるという機能に疑問を抱き始めた（「全てのコメントを見る」をタップしたときに、コメントがより速くロードされるように）。彼らは、コメントの数を3つに減らす決断
あなたは今も犯している！？モバイルUXの7つの失敗 - ふろしき Blog
ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 本人の許可が頂けたので、日本語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ
SPECTRE // UI
Rushes were tasked with designing and creating all on-set UI screen graphics for SPECTRE. Over a 13 month period of working on the 24th Bond film, from pre-production through to post, in total Rushes MGFX Studio created more than an hours’ worth of unique animations and motion graphic sequences that furnished over 300 screens, across 23 scenes in the film. Rushes are proud to be part of the franc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すぐれたUIで思いつくものはなんでしょうか？ - Quora
坪田 朋の5734年のノート
