Google、アプリ実行時に生成AIが適切なUIを構成し動的生成する「AI Generated UI」発表
Google、アプリ実行時に生成AIが適切なUIを構成し動的生成する「AI Generated UI」発表 基本的に、アプリケーションのユーザーインターエイス（UI）は開発時に設計され実装されて、その実装通りに実行時に表示されるものです。 しかしこのUIを開発時ではなく、アプリケーションの実行時に生成AIが適切に構成して動的に生成し表示する「AI Generated UI」という仕組みを、Googleがインドのバンガロールで行われたイベント「Google I/O Connect Bengaluru 2024」で発表しました。 現時点でAI Generated UIはFlutterフレームワークの上にアーリープレビューとして実装されており、ユーザーの意図に基づいてFlutterが動的にUIコンポーネントとレイアウトを構成し、ユーザーにパーソナライズされた最適なUIを表示すると説明されています
Snapchatの独特なUXと迎えつつある限界点
SeanはCodalの技術研究者およびライターであり、UXデザインからIoTなどのトピックに関するブログ記事を執筆しています。 もしあなたが25歳以上なら、Snapchatを利用していない可能性が高いでしょう。そのため、SnapchatのUXがほとんど完全に壊れていることを伝えるにしても説明が必要でしょう。私を信じるかどうかはあなた次第ですが、Snapchatに不満を述べた記事はこれとこれとこれとこれとこれのように、無数に存在します。 これらの批判に意味がないわけではありません。Snapchatのアイコンは不可解で、説明のラベルは存在しませんし、アプリの機能は隠れていてわかりにくいです。 中途半端なメッセージ機能、中途半端なコンテンツ配信、中途半端な画像共有機能サービスをもつSnapchatのアプリは、UXデザインの神を怒らせるために、この３つの機能の悪い部分だけを集めて、奇妙で不愉快な合
ペン不要！答えたくなるアンケート用紙 採用した市役所・業者に聞く
ツイッターで話題に 滝沢市と業者に聞きました 岩手県滝沢市の路線バス内で実施されたアンケートが話題になっています。注目を集めているのは、その独特な調査用紙です。ペンで記入するのではなく、選択肢から選んでビンゴシートのように穴を開ける方式です。揺れる車内でも安全に答えやすいように工夫されたやり方について、実施した市役所と提案した業者に話を聞きました。 ツイッターで話題に 今月2日と6日、滝沢市内の路線バス内で実施された利用実態調査。市の委託を受けた業者が調査員として乗り込み、乗車してきた人に調査用紙を手渡しし、降りる時に回収しました。 ネット上で注目を集めたのは、その調査用紙です。質問は「運賃の支払方法」「バスの利用目的」など7項目で、それぞれ複数の選択肢の中から選ぶようになっています。通常はペンで印をつけたり、塗りつぶしたりしますが、今回は選んだ選択肢の横の部分をビンゴシートのように手で押
[iOS] AutoLayoutの制約付け替えでレイアウトを動的に変える！active/deactiveのお話 | DevelopersIO
[iOS] AutoLayoutの制約付け替えでレイアウトを動的に変える！active/deactiveのお話 こんぬづは、シン・ゴジラの実況ツイート(#シンゴジ実況)にハマっている田中です。 キャスト陣がのっかったツイートをしているのを見るとテンションあがる。 今回はAutoLayoutの制約を動的に付け替えたいというお話。 AutoLayoutの制約を動的に付け替えるとは この記事で言う制約を動的に付け替えるというのは以下のようなレイアウトのお話。 Twitterクライアントアプリのセルのようなものをイメージしてください。 画像が1枚のみだった場合は横幅いっぱいとし、画像が2枚以上だった場合は横幅半分とします。 該当するUIImageViewの親Viewに対するEqual Widthの制約をmultiplierで制御している例です。 NSLayoutConstraintのmultipl
![[iOS] AutoLayoutの制約付け替えでレイアウトを動的に変える！active/deactiveのお話 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd616d43627770acf3d2af18695851272d60bed9/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F12%2Fios.png)
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
大型化するスマホに対応する時に確認したい「親指ゾーンマップ」
Scottは元Tinderのプロダクトマネージャー兼リードデザイナー。現在はプロダクトコンサル会社Philosophie所属。ウェブやモバイル製品の構築を15年以上行っています。https://twitter.com/scotthurff。 本記事はTinderの元リードデザイナーであり、今はGoogleや任天堂をクライアントに持つプロダクトコンサル会社Philosophieに所属するScott Hurff氏のブログエントリーからの翻訳転載です。記事自体はiPhone 6発表時に書かれたものですが、議論自体は現行のものにも適用されますので、時事的な部分は割愛しつつ翻訳してお届けします。 親指のためのデザインとは、親指が自然な動きで弧を描く動作で使えるように、最適な形でインターフェイスを構築することです。 しかしこれは非常に複雑な問題です。私たちは画面上の至るところに点在するUI要素に触れよ
ユニバーサルアプリの理想と現実: Yahoo! JAPAN MeetUp #2
Yahoo! JAPAN MeetUp #2 (iOS) の時の発表資料です。 http://yj-meetup.connpass.com/event/38348/
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
魅力的なイラストを活用したアプリのUIデザイン７選
Appleは完璧を追い求めることで有名であり、それは 私たちがUpLabsで称賛しているところでもあります。 Appleはとりわけインターフェイスに関しては常に境界線を押しひろげ、 他社にとっては高いハードルを作りあげてきました。彼らはスキューモーフィズムを世の中に広めた企業であり、彼らの方針にコミュニティ全体を従わせたのです。 フラットスタイルの時代となった今もなお、彼らはなんとか自分たちに忠実であり続けようとし、崇高なピクセルパーフェクトなデザインを生み出すための製作者を奨励していました。 より現実的なモチーフのマテリアルデザインなどに比べ、半現実的なディテールのコンセプトは、明快さやエレガントさにおいて劣りますが、芸術的な美学を保つことはできます。 美しいグラデーションや、表現豊かなタイポグラフィ、想像性豊かなアニメーション、滑らかなグラフィック、そして豊富なドローイング を使うこと
マテリアルデザインに見る機能的なアニメーションの６つの法則
機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール
画像がズームインしながら画面遷移するSwiftライブラリを公開しました - ZOZO TECH BLOG
iOSエンジニアの庄司(@WorldDownTown)です。 iQONのiOSアプリ内部で使われている画面遷移処理をOSSライブラリ化したのでご紹介します。 TL;DR UINavigationControllerでの遷移時に、タップした画像をズームして遷移するトランジション処理をSwiftライブラリ化しました。 エッジスワイプでもズームアウトして戻ることができます。 github.com ライブラリ化した経緯 Pinterestをはじめ、画像がズームインしながら画面遷移するアプリは今や珍しくありません。 この表現を実現するライブラリはいくつか存在しますが、通常のUINavigationControllerのようにスワイプで戻れなくなったり、スワイプできても通常のスワイプとは違って指の動きに同期しないものが多い印象です。 iQONのアイテム詳細ページではこのジェスチャー周辺の実装がしっかり
Swiftで作られたイケてるUIライブラリたち - Qiita
Spring ★431 手軽にアニメションが行えるライブラリです。SrotyBoardからアニメションの設定を行えるのがいいですね。 インストール Xcodeに手動でドロップします。 サンプルコード アニメションのコードはとってもシンプルです。 ２６種類のアニメションパターンを設定できます。 shake pop morph squeeze wobble swing flipX flipY fall squeezeLeft squeezeRight squeezeDown squeezeUp slideLeft slideRight slideDown slideUp fadeIn fadeOut fadeInLeft fadeInRight fadeInDown fadeInUp zoomIn zoomOut flash デモ デモアプリでアニメションの動きを確認できます。 design+
シリコンバレーのUXトレンド10選 / UX Survival Guidesレポート
先日、サンフランシスコで行われたUX Survival Guidesに行ってきました。10年以上シリコンバレーでUXデザイナーをしているJoe Prestonから最近のUXトレンド、プリンシパルに関するショートトークを聞くことが出来たので紹介します。(次回はプリンシパルについて書きます) https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4Rミニマリゼーションとも呼びます。私たちがデザインを始めた90年代と比べて、非常に変化してきている流れの一つです。 背景、グラデーションや影、線、ラベル、、すべてのものを取り去ることが美しいデザインと考えられるようになっています。例えばグラフはこのようになります。
UXデザインは組織づくりにコミットできる人が知るべき！株式会社ネコメシ・山本郁也氏インタビュー
UXデザインは組織づくりにコミットできる人が知るべき！株式会社ネコメシ・山本郁也氏インタビュー 「UX（ユーザーエクスペリエンス）デザイン」について、専門家にインタビューした記事です。答えてくれたのは、株式会社ネコメシのインフォメーションアーキテクト山本郁也氏です。誰がUXデザインを知っておくべきか、またどう学ぶべきかを伺いました。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 ※山本郁也氏の肩書などは2013年11月18日時点の情報です
書評「UIデザインの基礎知識」 - elm200 の日記(旧はてなダイアリー)
私はずっとプログラマとして活動してきたが、ウェブデザインをはじめとする見かけのデザインは苦手だった。ずっと避けて通っていたのだが、いまの時代、ウェブサイトのプロトタイプくらい自分で作れるようになりたいと思った。デザイナーの知人に相談したところ、紹介してくれたのがこの本。 ユーザーインタフェースデザインの基礎知識 ~プログラム設計からアプリケーションデザインまで~ 作者: 古賀直樹出版社/メーカー: 技術評論社発売日: 2010/04/23メディア: 単行本（ソフトカバー）購入: 11人 クリック: 170回この商品を含むブログ (15件) を見る 豊富な例を引用しながら、ユーザーインターフェイスをデザインする上で陥りがちな典型期な過ちを解説していく。数学科出身の著者というだけあって、解説は理論的で、感覚より論理を重視するプログラマにも分かりやすい。 理想的なコンピュータシステムは、ユーザー
iPad - 7notesがすごすぎて感涙しそう : 404 Blog Not Found
2011年02月03日21:00 カテゴリNewsiTech iPad - 7notesがすごすぎて感涙しそう これは、すごい。本当にすごい。iPadオーナーはこの記事読んでいる暇があったら速攻で入手すべし。 いや、これのみのためにiPadを新規購入してもいいぐらい。 むしろAppleはシステムごと買い取って、iOS 5に組み込むべき。 これこそ、タブレットデバイスにおける文字入力のかくあるべき姿なのだから。 何がすごいかといえば、手書きと文字を往復できること。 見てのとおり、手書きの「小飼弾」がすでに画像(絵文字)として入力されている。そして下の入力フィールドではそれが文字の「小飼弾」と認識されている。ここまでは驚くべきことではない。驚くべきなのは、すでに絵として入力してしまったはずの「小飼弾」を7notesが覚えていて、それを後から再認識させれているところ。 これ、古き佳きnewton
パソコンと携帯、どちらで文字を打ちたいか | ブログが続かないわけ
ニコニコ動画より Youtube を使う人の意見を聞いてみた - IT戦記 amachang「なんで、 Youtube ばっか使うの？ニコニコ動画のほうがおもしろい動画多くない？」 知り合い「うーん。そうかなー。」 amachang「そう思うけどなー。」 知り合い「とりあえず検索するじゃん。そのとき、候補が出てくるから楽でいいんだよねー。あと、ニコニコ動画ってログイン必須じゃん、パスワードとメールアドレス打つの大変。」 amachang「え、それってそんなめんどくさいことなん？」 知り合い「いやー。パソコンで文字打つのに慣れてないからさー。みんなお前みたいにパソコンで文字打てると思ったら大間違いだよ。」 amachang「まじでー？」 知り合い「まじでー。」 これを見て、先日電車の中で聞こえてきた会話を思い出しました。 50代くらいの女性2人での会話 A:「最近さ、先生にパソコンでメール打
ふぉーんなハナシ：タッチパネル用の高速入力方式「Swype」 年内に日本語対応を予定 - ITmedia D モバイル
少し前の話になるが、スペイン・バルセロナでMobile World Congress 2010が開幕した2月15日に、とある米国のベンチャー企業が、DOCOMO Capitalから100万ドルの出資を受けたことを発表した。そのベンチャー企業とは、タッチパネル上で独特の文字入力方式を実現したSwypeだ。 Swypeは、タッチパネルに表示されたQWERTYキーボードを、一筆書きの要領でなぞることで言葉を入力する技術だ。慣れれば1分間で40語も入力できるという。YouTubeに掲載されているSwypeのチュートリアル動画を見てみると、慣れればかなりのスピードで単語が入力できそうに見える。 すでにSwypeは30種の言語をサポートしているが、今回DOCOMO Capitalからの出資を受け、日本語対応のバージョンも開発する。2010年後半のリリースを予定しているという。 スマートフォン向けの単体
「次へ」「前へ」がどっちに進むのか分からない問題まとめ
@tkml 心底同意 RT @amachang: 「次へ」「前へ」っていうリンクよく見るけど、もっと時間的な前後が分かる言い方ないのかなー。 2010-02-17 10:54:09
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
