1Password のオートコンプリート機能をサービス提供側で無効化するLeaner Technologies の @corocn です。 最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。 画像はshadcn/ui - dialogから拝借 結論 input に data-1p-ignore 属性を付与する autocomplete="off" しても空気読んで無効化してくれないので注意。
[visionOS] Spatial Computingの用語・基礎概念の整理 #WWDC23｜shu223
visionOSのサンプルをシミュレーターで動かしてみたり新規プロジェクトを作成してみたりすると、結構新しい概念や用語がいろいろと登場していることに気付く。 基礎概念や用語は早めに理解しておいた方が良いだろうということで、WWDC23のセッション "Get started with building apps for spatial computing" の冒頭と後半にあった解説を整理した。 なお、引用表記と画像は基本的に"Get started with building apps for spatial computing"より。 Elementsウィンドウ各アプリは、1つまたは複数のウィンドウを持つことができる。 SwiftUIでSceneを用いて構築でき、 2Dと3Dコンテンツを混在させることができる。 ユーザーが自由に拡大縮小や再配置を行える。 ボリュームボリュームは3Dコンテン
![[visionOS] Spatial Computingの用語・基礎概念の整理 #WWDC23｜shu223](https://cdn-ak-scissors.b.st-hatena.com/image/square/1613ede5136dfa29cb4884c5c94351a5410dcf45/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F109150053%2Frectangle_large_type_2_d2241ff3af0b7026d7da15d9117e9b5b.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
「この悪い子猫ちゃんめ！」まるでVRのように没入感の高い会話シーン - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「この悪い子猫ちゃんめ！」、通称「わるこね」における会話シーンのカメラ演出の事例をご紹介します。 このデザインにより、以下の特徴があるように感じました。 一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている（新奇性） 該当の画面はこちらです。 最初はよくある会話シーンだと思っていました。 画面中央にキャラクターが表示されて、演技する系の画面デザインですね。 ©2021 xeen Inc. 会話を続けていくとキャラクターがプレイヤーに近づきます。 これにより見ている画面はプレイヤー自身の視点であることが強く意識されます。 ©2021 xeen Inc. 更にキャラクターに手を引かれてカメラが
ゲームのUIデザインまとめサイト「Game UI Database」公開。ゲーム開発者向けのUI事例集/データベースを目指す - AUTOMATON
英国のゲームスタジオDouble Elevenに所属するシニアUIデザイナーEdd Coates氏は12月5日、ゲームのUIデザインをまとめるサイト「Game UI Database」を公開した。現時点で325作品・1万1569枚のスクリーンショットがデータベース化されており、画面用途・ジャンル・アートスタイル・操作デバイス・レイアウトなど、豊富なフィルター機能によって、ゲーム/スクリーンショットを検索できる。扱っているタイトルは『Apex Legends』『エースコンバット7 スカイズ・アンノウン』『ブラッドボーン』『Call of Duty: Warzone』『DOOM』『ゴースト・オブ・ツシマ』など幅広い。 Proud to present the Game UI Database! A whopping 11569 screenshots, 325 games, and filte
やってはいけないUIアニメーション
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法
はじめに 現代では多くの人々がスマートフォンやタブレットを所持し、ゲームを楽しんでいることと思います。 モバイル向けのゲーム市場は大きく、世界では今も多くの開発者たちが iOS / Android 向けの商用ゲームを作っています。 さて、モバイルゲームの開発には、多くの開発者を悩ませるちょっと困った事情があります。 それは ディスプレイが非常に多くの多様性を持っている ことです。 正方形に近い形のタブレットもあれば細長い端末もあり、カメラがディスプレイの中に割り込んでいたり、 OS が専有する領域があったりと様々です。物理的な大きさもバラバラですね。 そのくせモバイル端末はタッチパネルで、ディスプレイに触れる UI になっているのです。 ゲーム開発を生業とする多くのエンジニア / アーティスト / ゲームデザイナーは、 これまでに何度も頭を抱えてきたことでしょう。 本稿では、2019 年現
LINEのUIデザイナーが参考にするWebデザインギャラリーサイト6選｜LINE CREATIVE CENTER
こんにちは、UIデザイン4チームのイ・ジヘです。 今回は、LINEのUIデザイナーたちが日々参考にしているデザイン系のウェブサイトをご紹介いたします。 特にスマホのUIデザインは2007年、iPhoneが世に出た後から本格的に注目され始めたと言えるでしょう。 そう考えると歴史がまだ12年くらいしかないないんですね。さらに、用語さえもUI DesignとProduct Designが混用されている程で、現在進行形のジャンルであり、どんなデザイン分野よりも最も早くトレンドが変わっています。 どの分野も変わらないかもしれませんが、トレンドの発信地が米国であることが多いため最新の情報は英語で見つけるのが最も効果的です。 英語で探して見るのが難しいとお思いかもしれませんが、私たちが勉強し仕事をする分野は視覚イメージだけでも直観的な理解が可能だと思います。内容の要旨を完璧に把握しなくても、トレンドを見
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
UIデザイン超初心者向け！動画でわかる「はじめてのUI - 入門編」を公開しました👍｜カイクン🤘
Cocoda!では超初心者向け、これからUIデザインをはじめたい人向けのコンテンツ、「はじめてのUI - 入門編」を公開しました🎉 動画を使ったことで、誰でもシンプルに迷うことなくデザインをはじめられるコンテンツです💡 ↓↓さっそく始めたい方はこちらから👍↓↓ https://cocoda-design.com/projects/36 ※すぐにコンテンツが始まります ー ー ー ー ー ー ー ー ー ー ー ー ー ー ー リリースした「はじめてのUI - 入門編」は以下のURLからチェックできます！ ↓↓↓↓ https://cocoda-design.com/projects/36 ※すぐにコンテンツが始まります これからもCocoda!をよろしくお願いします🙏🙏 ご意見・ご質問などありましたら、僕のアカウントまで！
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
非 iOS エンジニアのための Auto Layout 入門-基礎編- #Zaim｜akatsuki174
はじめにこんにちは。Zaim で iOS エンジニアをしている@akatsuki174 です。 iOS アプリのレイアウトを作る上で Auto Layout は非常に重要です。これのおかげでサイズが異なる端末でも比較的楽に対応できます。 ここでは主に iOS エンジニアではない人向けに Auto Layout とはどんなものなのか説明します。たぶん 4 本立てくらいかなとぼんやり思っています（気分屋なので変わる可能性大）。 1 本目：基礎編 Auto Layoutの概要や基礎知識について 2 本目：応用編 複雑な指定への対応、多サイズ対応について 3 本目：実践編 お題の UI を実現する Auto Layout の制約を、紙の上で解いてみる 4 本目：コミュニケーション編 デザイナーからどう依頼されたらやりやすいのか ※わかりやすさ優先のため若干不正確な表現がありますが、ご了承ください
Instagram画面をXdでトレースしてみた - UIUXを考える
今回はInstagram画面をAdobeXdでトレースしました。 準備としてiPhoneでInstagramのスクショを撮ってXdに配置します。 ここでXd特有の機能を発見しました。 ドラックで配置すると、1枚1枚が重ならず、横一列に整列して配置されました！これは便利。 この中からトレースして面白そうな画面を選びます。 次にアートボードを作成します。 アートボードサイズですが、スクショはiPhone7（750px-1334px）なのでアートボードもこのサイズで作成します。 Xd既存のアートボードサイズ一覧からiPhone7を選ぶと、1/2サイズの375-667で作成されるので、これを2倍のサイズにすると750px-1334pxになります。 いつも迷うのですが、1/2サイズでトレースするのか？実サイズでトレースするのか？が、分かりません。でも下記の様な記事を見つけたので私は実サイズでトレース
ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道 | CAREER HACK
即現金化で話題となった『CASH』のデザインをトレース。自ら同じようなデザインをつくってみたという春田さん。そうすることでデザインのポイントやコツを学び、血肉化していっている 模倣におけるクオリティの高さもさることながら、彼が評価されたのは「勝手にやってみる」「自ら学びとる」という新人としての姿勢にあったのかもしれない。 一見すると「ただただ本物をマネしてみる」は地道にも感じる取り組み。すでに公開されているデザインノウハウだって多い。なぜわざわざ？ そこにあったのは、春田さん自身が抱えていた「何もできない自分」との対峙。そしてデザインで社会とつながりたいという強い意志だったー。 もともとは絵にかいたような「ダメ大学生」だった。 ー デザインの模倣、春田さんは「UIトレース」と呼ばれている取り組みですが、どういったきっかけで始めたものだったのでしょうか？ はじめのきっかけは、とにかく自分がカ
デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Horizon UI: Free React Admin Template for Trendy Dashboards
Floating UI - Create tooltips, popovers, dropdowns, and more
「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜 - DMM inside
【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由 - GAME Watch
ディレクターにもうれしい。Adobe XD用の日本語ワイヤーフレームUIキット「Wires jp」提供開始！ – Adobe Creative Station
