先日、「イカれたUIを作ろうの会」というオンラインイベントを開催しました。多くの皆さまにご参加いただき、誠にありがとうございました。 また、当イベントでは期待以上に自由で多様なUIがお披露目され、おおいに血湧き肉躍りました。主催者としてうれしい限りです。 ちなみに社内でも「ダメなUIを作ろうの会」と銘打って勉強会を実施しました。こちらもクローズドな空間ならではの盛り上がりを見せました。 社内での勉強会のお知らせ背景そもそもこのような会を実施した背景には、つぎのように思ったことがきっかけでした。 エンジニアとかUXとかDXとかHCDとかと比べてUIのイベントが少ない気がする。酔いどれUIデザイン選手権をやりたい。一番イカれたUIをデザインしたやつが勝ち。 — yumemi (@n__yumemi) January 24, 2023 たとえば、connpassで検索したときの結果は「UIデザイ

*アノマテカ* @hoshikuzucake 偏見かもしれないけど公共交通機関ってこういうとこあるよな、と思う。JRに限らず鉄道会社で「切符の買い方」みたいな基本的な情報がホームページのどこに書かれてるかわかりやすいとこってぜんぜんない。海外から来る人とか困ったりしないのかな？ twitter.com/akita11/status… 2023-02-10 23:53:07 *アノマテカ* @hoshikuzucake 自分は身体に障害があるし遠距離恋愛してたから、デート(という名の旅行)の予定を立てたら事前に行く場所の公共交通機関をよく調べたけど、バスも前払いなのか後払いなのか、前の扉から乗るのか後ろの扉から乗るのかも、ホームページのすごくわかりにくいところに書いてあるか最悪書いてなかったりした 2023-02-10 23:56:44

レオン@自遊人 @Leon_Lionnoheya これ走行中に操作し難いんよね。タッチパネル表示のやつも最悪。何でもかんでもボタン無くしゃいいと思うなよ！ twitter.com/fyozz/status/1… 2022-11-29 19:29:30

こんにちは、SOMPO Digital Labデザインチームのデザイナーの金（https://twitter.com/seikei_kin）です。普段はUIデザイナー・ウェブデザイナーとしてサービスやプロダクトの開発・設計に携わっています。 突然ですが、みなさんは真面目で、協力的で、積極性があって、物覚えがよい方でしょうか？あるいは最新のアプリの動向に詳しく、それらを使いこなせるリテラシーを十分にお持ちでしょうか？ 果たして自分はどうかと振り返ってみると、少なくとも自信をもってそうであるとは言えないのが正直なところです。なまけものかつわがままで、物覚えや察しも良くなく、実際、馴染みのないウェブのサービスやアプリを利用する場合には、些細なことでつまづいたり悩んだりした結果、途中で嫌になり諦めてしまうこともしょっちゅうです。 そして、実は私のようなユーザーは決して少なくないのではないでしょうか

Googleが提供するサービスのアイコンのデザインがアップデートされ、並べてみるとこんな感じになりました。

どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない

前置き 去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。 引用元 : Medium - Google Design - Motion Design Doesn't Have to be Hard 著者 : Jonas Naimark Googleのマテリアルデザインチームで働くモーションデザイナー。 彼のTwitter,Dribbleアカウントはこちら。 https://twitter.com/jonasnaimark https://dribbble.com/jonasnaimark モーションデザインはUIの表現力を向上させ、使いやすくする手立てになります。そ

売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

セブン―イレブン・ジャパンは25日、いれたてコーヒー「セブンカフェ」に新型機を導入すると発表した。ホットとアイスや容器の大きさを自動で検知するセンサーを備える。利用客がコーヒーの種類を選ぶ必要をなくし、押し間違いを防ぐ。コーヒーを抽出する時間は従来よりも1割強短くし、利用客の待ち時間も減らす。25日に東京都内で開いた記者発表会で、新型機の導入の狙いについて商品本部の高橋広隆総括マネジャーは「使

Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？　これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され

こんにちは、今回がはじめてのnote投稿になります！ タイトルにもある通り、今日はTwitterにて8月に行なっていたUIトレースについて感じたことをまとめていきます。 デザインの勉強を始めたばかりで、どうやって勉強しよう？と悩んでいる人や、最近だとCocoda!に登録してUIデザインの勉強をしてみようかな...と思っている人の参考のひとつにでもなれば嬉しいです。 あくまでも自分なりの見解であり初心者目線で書きますので、どうぞ暖かい目でご覧になってください...。(アドバイス随時受け付けてます！) そしてかなり迷ったのですが、この記事ではトレースしたものだけでなく、アウトプットしたものも全部載せます。プロのデザイナーさんが見たらツッコミどころ満載の作品ばかりだと思いますが、同じような境遇の方の励みになればと思って、、、、では目次です。 目次 1. 　UIトレースを始めたきっかけ 2. 　最

ひどいときにはあの状態で固まってたりするし。 いま何やってるのか、全体のうちどのくらい進んでるのか、あとどのくらいで終わりそうなのか、ちゃんと見せてほしい。

その快適さに外国人旅行者が驚いた日本のトイレ。清潔で臭わないのは当たり前。人を待たせない工夫でも最前線を走る。狭い空間に目を凝らすと、ノーベル賞の理論やインターネット技術がぎっしりと詰まっている。東名高速の愛鷹パーキングエリア（PA、静岡県沼津市）。PAといえば「トイレ休憩」での立ち寄りが多い。観光バスが次々到着すると、トイレの前に長蛇の列ができるのはよく目にする光景だ。ここのトイレは人間の

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

70歳過ぎの高齢者にフリーWiFiの接続方法について尋ねられた。 ここはショッピングモールのカフェ、「WiFi接続無料」を売りにしている。 自分も、通信容量節約のためによく使っている。 いつも通りradikoを聴きつつ、増田ブラウジングをしていたら、あるご老人から話しかけられた。 「このへんってWiFiつながるんですか？」 しかし、カフェでいきなりこの質問をされたら大抵の人は戸惑うんじゃないか？ 今オレが、この話の前提とこれから起こることを先に提示したから「この老人はフリーWiFiにつなぎたいんだな」と分かるだろう。 だが、何の前提もなくこの質問をされたら一体何のことかと思うだろう。 （WiFiって、どのWiFi？） （つながるって、電波強度の話？） 先読みエスパーならシチュエーションと文脈から分かるのかもしれない。 人工知能ならフレーム問題で機能停止を起こすところだ。 （ためしにSiri

亜方透🎵12/25フットバ駅15・冬コミ木曜西く30b @AKT_TR たまに券売機で切符買うことあるんだけど、「どこに行きたいの？」じゃなくて「お前いくら出せんの？」って選ばせ方してくるの、冷静に考えるとおかしいよな。なんで目の前にハイテクなタッチパネルがあるのに一回上の路線図見て「えっと○○駅までは…○○円か」ってやらなきゃならないんだよ。 pic.twitter.com/KbnSFirv3G 2017-10-22 22:50:39