こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 「パーツ別デザインまとめ」シリーズも第３弾となりました。 今後も地道にUIパーツの収集・調査を続けていく予定です！ （前回までの記事も是非ご覧ください ↓） はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？という調査も含めデザインを収集しました。 💡横に整列宅トラカードの中に手順の概要やイラストをまとめている形式です 中身の情報量によりますが、4ステップ程度だと丁度よいサ
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
タグチマリコ | 日本ウェブデザインCXO/UXデザイナー @marimamiac 「ユーザ以外も良い体験に」をコンセプトに活動しています | 日本ウェブデザインinc. 取締役 CXO, 主にUX,IA,UI,Branding ← ex. 制作/開発会社のディレクター、デザイナー、PdM｜#シナカフェ 共同運営者 | 筋トレしたり、執筆したり、描いたり、ボードゲーム開発、組織づくり🐈🐾 profcard.info/u/MBTGg9XBqceU…
UIからの自動テスト事例
JaSST Tokyo 2024 にて発表した資料です。 HP: http://www.humancrest.co.jp #JaSST #テスト自動化 #自動テスト #TestAutomation
「どうやってこの保存を確認するダイアログの代わりをデザインすればいいのか、みんな分かる？」UIのデザインの質問にほとんどの人が同じような答えだったのが興味深い
いぐぞー ✈️ 旅するプログラマー @igz0 旅とプログラミングをこよなく愛します。 アメリカ大陸🇺🇸を横断しました！！小学生からプログラミング→新卒SIer→Webに目覚め個人事業主兼会社員。テレビ出演経験あり。 Webサービス制作者。読書・IT関連を中心にツイートします！！ネタツイート有。アイコンは@ixy先生に利用許諾済み。Amazonアソシエイト参加。 note.com/igz0/ いぐぞー ✈️ 旅するプログラマー @igz0 どちゃくそ偉いデザイナーの人が書いたインターフェースデザインについての定番本らしいんだけど、どうやってこの保存を確認するダイアログの代わりをデザインすればいいのか、みんな分かる？？ 14章はまだ読んでない。 pic.x.com/ewz9gpcrjl
モーダルの開閉状態を URL で管理する
よくあるモーダルの実装について考えてみましょう。モーダルは名前のとおり、現在開いているか閉じているかの状態（モード）があります。状態を管理するときには、React の useState フックを利用する方法がまっさきに思い浮かぶのではないでしょうか？ import { useState } from "react"; import Dialog from '@ui/components/Dialog'; import Button from '@ui/components/Button'; const App = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button variant="outlined" onClick={() => setIsOpen(true)}> Open dialog </B
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
HHKB Studio 製品開発中の社外レビュワーと先行体験を経ての HHKB Studio レビュー - たのしい人生
ついに HHKB Studio が発表・発売されました。 ※発売直後に売り切れてしまっていましたが、今日 10/31 に再入荷されるようです。 ※10/31 の販売も即完売になってしまったようです… 次回入荷は 11 月中頃とのこと。 HHKB Studio ポインティングスティックとジェスチャーパッドの追加と、なんと言っても HHKB の名を冠しながらメカニカルキースイッチを採用するなど、大きな変化に興奮と動揺があったことは発表後の各種 SNS の反応からも窺えます。 実は HHKB Studio にはキーボードニュース の ぺかそ @Pekaso とともに開発の後半 (最終製品に近い検証モデルはすでに作られているぐらい) の段階からおよそ 1.5 年に渡って「後期アセスメント」に関わってきた経緯があります。また、HHKB エヴァンジェリストとしてここ 2 週間ほど最終製品を先行して使っ
GraphQL実践ノウハウv2
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-grap…
ウェブサイトを開くと大抵は文字や画像が表示され、視覚的な情報をページのあちこちから得ることができます。サイトによっては文字だけを表示するものもあれば、文字と画像をバランスよく配置してユーザーの視線を誘導するものも。こうした情報の過多やバランスを「密度」という尺度で捉えたときに、ユーザーインターフェース(UI)の密度はどのようにして決まるのかといったことについて、決済サービスのStripeでデザイナーチームを率いるマシュー・ストローム氏が解説しました。 UI Density || Matthew Ström, designer-leader https://matthewstrom.com/writing/ui-density/ ユーザーは、ウェブサイトを開いたときに大抵はまず目で情報を受け取ります。ストローム氏は、「空間にどれだけのものが見えるか」という点を「視覚的密度」と定義し、UIにお
Appleがスマホの画面を認識できるマルチモーダルLLM「Ferret-UI」を発表、SiriがiPhoneアプリのUIを理解できるようになる可能性も
Appleの研究者が、スマートフォンのアプリUIを理解するために設計したマルチモーダル大規模言語モデル(MLLM)の「Ferret-UI」を開発したという論文を、未査読論文リポジトリであるarXivで公開しました。 [2404.05719] Ferret-UI: Grounded Mobile UI Understanding with Multimodal LLMs https://arxiv.org/abs/2404.05719 Apple teaching an AI system to use apps; maybe for advanced Siri https://9to5mac.com/2024/04/09/ferret-ui-advanced-siri/ ChatGPTのようなチャットボットAIシステムのベースとなっている大規模言語モデル(LLM)は、主にウェブサイトから収
待ち受けにしてるうちの犬、なんか当然のように時間より前にいるし、救急車呼ぶときもこいつがいる真っ白な空間を通らないといけない
原口フ二ャオ @haraguchitachi 待ち受けにしてるうちの犬、なんか当然のように時間より前にいるし、救急車とか呼ぶときもこいつがいる真っ白な空間を通らないといけないのマジでやばい pic.twitter.com/FBNKUmcyBw
何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特徴で、字形にはコントラストを強調するディテールが備わっています。また、大きいサイズでもその美しいラインと滑らかな曲線、繊細なディテールは優れたリズムを実現します。 「0」と「O」を区別する必要がある場合のスラッシュゼロ、下付き数字の化学式（H2Oなど）、文字幅が揃った数字など、多くのOpenType機能も利用できます。 Inter font family Inter -GitHub Inter 4の特徴 Inter 4のダウンロード Inter 4のウェイトとグリフ In
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
非デザイナーは「生成AI」でどこまでUIデザインを作れるのか？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の永松です。 私が在籍しているTechnology部ではさまざまなシステム・アプリ開発を手がけています。 しかし、部内にはデザインやUIUXの知見がまだ足りていないのが実情です。 実際にデザインをするときは、他部署のデザイナーに力を借りることがほとんど。 ……近年こんなに生成AIが進化しているのであれば、これらを使って自分でデザインを作成することはできないものでしょうか？ WF（ワイヤーフレーム）の作成だけでもいいんです。これらが誰でもできるようになれば、もっとお引き受けできる案件も増えるはず。 というわけで、今回はクライアント提案に耐えうるデザインを生成AIでどう作るのか、試行錯誤した結果を紹介します。以下のツールについて感想をまとめていますので、ぜひ参考にしてください。 今回試したサービス ChatGPT Midjourney(+Vary Region) Fram
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回はAIサービス「v0」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。今回は、プロンプトからUIを作成してくれるツール「v0」の使いかたや、実際に使ってみた感想などを紹介していきます。 「v0 by Vercel」とは Next.jsを開発するVercelが、生成AIへのプロンプトでUIを自動生成するサービスを公開しました。2024年1月頭時点ではベータ版ですが、Freeプランも提供されているためログインすれば誰でも使用することができます。ChatGPTのように、プロンプトを投げるとAIがTailwind CSSとShadcn
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
ダッシュボードデザインの実践ガイドブック
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。 はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。 今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！ パターン別 CTAボタン一覧サイト閲覧者に特定の行動を促すよう誘導する（Call to Action）ためには、CTAボタンに視線を集める必要があります。 そこで今回は「目に留まりやすいCTAボタンにはどんな特徴があるのか？」という観点で、見つけた特徴別にCTAボタン周りのデザインを一覧化しました。 💡差別化された背景色CTAボ
TL;DR tar(1)の引数はオプションではなくkeyだから 歴史 tar(1)は Unix v7 (1979) で導入されたが、その前身は Unix v4 (1973) の tp(1)、更にこれは Unix v1 (1971) の tap(1) に遡る。 80年代に入りSystemV v.s. BSDといったことが起きたりし、PWB/UNIX (Programmer's WorkBench)で導入された cpio(1)とtar(1)、どちらがUnixの標準アーカイバか争われた結果、IEEE Std. 1003.1-2001 (POSIX.1-2001) を以って tar(1)は規格から削除され、代わりに IEEE Std 1003.2-1992 で導入された折衷案のpax(1)が標準となった。よって、現在実装中立なtar(1)の仕様書がそもそも存在しない。最後の中立規格は1997―19
グラフィックデザインとオンライン・アーカイブ｜ARTICLES｜The Graphic Design Review
デジタル情報によるデータベースはコンピュータの黎明期から構想されてきた。現代では演算能力の向上やネットワーク環境の発達を背景に、世界各地にさまざまなテーマのオンライン・アーカイブが構築、公開されている。 グラフィックデザインやタイポグラフィも例外ではない。とくに2010年代以降は20世紀のグラフィックデザインに対する歴史的な関心の高まりを受け、多種多彩なイメージアーカイブが構築されている。 そこで本記事では筆者の独断に基づいてデザイナーや学生に向け、グラフィックデザイン関係のオンライン・アーカイブを、古き良きインターネットの伝統であるリンク集というかたちで紹介していきたい。 グラフィックデザインのアーカイブは対象とするリソースの蓄積や環境という側面から、アメリカやヨーロッパの団体、機関による取り組みが先行してきた。しかし、2010年代以降には、個人や任意団体によるインディペンデントなアーカ
Spotifyのタブバー、いままで5つだったタブが3つになってた。消えたのはBrowseとRadio。BrowseはSearchに統合され、Radioの機能はたぶん消えた。こういうアップデートって勇気がいるが、結果使いやすくなったと思う。 pic.twitter.com/vf1ncj0qjh — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) October 19, 2018 長く使われ続けているサービスでは、新しい機能がどんどん追加されていきます。新しいユーザーを増やしたり、現在のユーザーを引きつけ続けることが主な理由で、Spotifyにも様々な機能が追加されています。それにも関わらず主要なナビゲーションのタブを減らすのは勇気のいる選択だと思いました。プロダクト開発に関わっていると実感しますが、何かを付け加えることよりも何かを削ることのほうがずっと難しいのです。このU
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
はじめに UIを設計するときにオブジェクト指向UIは大きな効果を発揮することがあります。一方で、オブジェクト指向UIの考えをそのまま適用できないけれども、タスク指向UIと呼ぶのも微妙な画面があります。 例えば、ECサイトの購入プロセスです。よくあるECサイトの購入プロセスは以下の図のような構成です。これだけだと簡単そうですが、実際のECサイトの購入プロセスはある画面をスキップしたりしなかったりという制御があり、なかなかに複雑なものです。 今回の記事は画面遷移に順序があるがタスク指向UIと呼ぶのも微妙な、複雑な画面遷移を持つ画面にオブジェクト指向UIの考えを導入することで画面遷移制御を簡単にする手法を提案します。 対象読者 画面遷移の制御の保守性を向上させたいITエンジニア この記事の概要 複雑な画面遷移を持つUIに対して、オブジェクト指向UIの考え方を導入することで、制御フローをシンプルに
米アップルに最も長く在籍している上級インダストリアルデザイナー、バート・アンドレ氏が退社する。同社の代表的製品のデザインを手掛けてきたジョニー・アイブ氏がかつて率いたチームの人材が、ほぼ完全に流出する形となった。 1992年にアイブ氏と共にアップルに入社したアンドレ氏は今月に入り、同僚に退職すると告げたと、事情に詳しい複数の関係者が明らかにした。同氏はアイブ氏の時代から残っている最後のデザイナーの一人で、90年代後半にスティーブ・ジョブズ氏がアップルのトップに復帰する以前から、過去30年間に発表されたアップル製品の「美学」を作り上げるのに寄与した。 アンドレ氏はアイブ氏の最側近の一人として知られ、アイブ氏の後任だった前責任者のエバンス・ハンキー氏が昨年退社した後は、チームの運営にも携わった。同氏はまた、アップルで最大の特許保有者の一人としても知られている。 トップデザイナーのコリン・バーン
halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平方向のレイアウト情報）を値をダンプしてみる。 ttx -t GPOS YuGothicUI-Regular.ttf ttx -t GPOS YuGothic-Medium.ttf ttx -t hmtx YuGothicUI-Regular.ttf ttx -t h
「ビジュアルバータイマー」は、大きな目盛り表示によって、 残り時間が一目で分かるタイマーです。 時間の視覚化で、さまざまな人の時間管理を支えます。
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ
ユーザーに刺さるUIデザイン実用テクニック37選
UI Tipsで公開された「UI Tips for Landing Pages & Apps by Jim Raptis」より許可をもらい、日本語抄訳しています。 シンプルなUIデザインテクニックで、より良いユーザーインターフェースをデザインし、ユーザーが満足する方法を一緒に学びましょう。 現役UIデザイナーのジム・ラプティス氏が実際の製品でテスト、検証した実用度の高いテクニック集なので、手軽に試すことができ、効果的にホームページやアプリのUIを改善できます。 時間がない人のために、今回紹介するテクニックのまとめがこちら。 各項目では実際のサンプルをつかって、「良い例」と「悪い例」を比較。すぐできる解決策と一緒に詳しく紹介しています。 ユーザーが恋に落ちるUIデザイン実用テクニック1. ソーシャルログイン2. より良いメニューデザイン3. グーテンベルグの法則4. モーダルの削除5. 不揃
宇宙航空研究開発機構(JAXA)は1月20日、小型月着陸実証機「SLIM」の月面着陸を実施。着陸後に太陽電池の発電ができなくなるというトラブルはあったものの、探査機からの電波は正常に受信できており、日本初の月面着陸をついに実現した。これは日本の宇宙開発において、非常に大きなマイルストーンになったと言えるだろう。 SLIM着陸直後のサブ管制室内の様子 (C)JAXA 筆者は前日22時より、JAXA相模原キャンパスにて取材を開始。本記事では、そのときの様子をレポートしたい。 開場の30分前に現場に到着したのだが、すでに大勢の報道陣が プレスセンター内部の様子。筆者は右側最前列を確保できた ライブ配信された月面降下中のSLIMのテレメトリ画面 SLIMは同日0時に、最終降下を開始。高度15kmでメインエンジンを噴射して減速し、周回軌道を脱出、月面へと舵を切った。月のような重力天体では、一旦降下を
プログラマーがUnityのUI Toolkitを学べるデモ『QuizU』が公開。複数のメニュー画面やゲームフローの管理機能を備えた、クイズゲームのサンプルプロジェクト｜ゲームメーカーズ
UI Toolkitとは、UnityのUIを開発するための機能やリソース、ツールを集めたツールキットです。その教育用のサンプルプロジェクトとして、プログラマー向けのデモ『QuizU』が公開されました。 QuizU『QuizU』は、複数のメニュー画面とゲームフローの管理機能を備えた、クイズゲームのサンプルプロジェクトです。本作を通じ、UI Toolkitコンポーネントのさまざまな活用方法を学べます。 主にプログラマーに向けて作成されており、UI Toolkitの概念とツールについて説明されています。
JavaScript なしでインタラクションを追加する Invokers 2023.10.22 Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。 invoketarget、interesttarget 属性は 2023 年 10 月 22 日現在実装されていません。 <button> 要素に invoketarget 属性を指定することにより、JavaScript を削減し、より宣言的な方法で UI にインタラクションを追加できます。下記の例では invoketarget 属性に <dialog> の id を指定することで、<button> 要素をクリックし
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
何故こんなことに…？「初めて見るタイプの住所入力UI」がいくらなんでもわかりにくい「何の順番！？」
もうこれでいいじゃん！ 架空のOS「Windows XP 2024」のコンセプト動画がYouTubeで公開中【やじうまWatch】
ChatGPTを活用したUI勉強会のススメ
ユーザーインターフェースの「密度」とは何かをプロのデザイナーが語る
UIデザインに最適！ 文字サイズが小さくてもくっきりと美しいフリーフォント「Inter」が待望のバージョンアップ
UIコンポーネントの大きさは外から制御しよう - Qiita
プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
「CTAボタン」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
「Spy++」の弟分？ UWP/WinUI 3アプリのUI構造を解析・可視化する「UWPSpy」／既存アプリの構造を調査して自分のアプリ開発に役立てよう。いろんなイタズラも可能【レビュー】
tar(1) はなぜオプション引数にハイフンが不要なのか？
Spotifyのプロダクト戦略をUIの変化から読み解く｜鈴木慎吾 / TSUMIKI INC.
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
画面遷移に順序があるUIの保守性を向上させる「順序ありオブジェクト指向UI」の提案
アップル、最古参のデザイナー退社へ－デザインチームの人材流出続く
Yu Gothic UIに text-spacing-trim を適用するとバグる
目盛りで残り時間が一目で分かるタイマービジュアルバータイマーVBT10 | KING JIM
UIコンポーネントの大きさは外から制御しよう - Qiita
ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
JAXA「SLIM」が月面着陸に成功、当日の様子をプレスセンターからレポート！
JavaScript なしでインタラクションを追加する Invokers