WebサイトやスマホアプリのUIデザイン用にシンプルで、可読性を最大限に高めたアイコン素材を紹介します。ライン・デュオトーン・ソリッド・フラットの4つのスタイルに、計4,000種類のアイコンが揃っています。 アイコンはオープンソースなので、商用プロジェクトでも無料で利用できます。Figmaで配布されているので、すぐに使用できるのも嬉しいですね。 4,000 Free + Open Source Icons アイコン界のヘルベチカを目指して、可読性を最大限に高めるために14pxのグリッド上に構築されています。Streamlineの10年以上の経験を持つ8人のアイコンデザイナーによって作成されています。 アイコンの利用方法は簡単で、下記ページにアクセスし、「Figmaで開く」をクリックします。
プログラマーがUnityのUI Toolkitを学べるデモ『QuizU』が公開。複数のメニュー画面やゲームフローの管理機能を備えた、クイズゲームのサンプルプロジェクト
UI Toolkitとは、UnityのUIを開発するための機能やリソース、ツールを集めたツールキットです。その教育用のサンプルプロジェクトとして、プログラマー向けのデモ『QuizU』が公開されました。 QuizU『QuizU』は、複数のメニュー画面とゲームフローの管理機能を備えた、クイズゲームのサンプルプロジェクトです。本作を通じ、UI Toolkitコンポーネントのさまざまな活用方法を学べます。 主にプログラマーに向けて作成されており、UI Toolkitの概念とツールについて説明されています。
グラフィックデザインとオンライン・アーカイブ｜ARTICLES｜The Graphic Design Review
デジタル情報によるデータベースはコンピュータの黎明期から構想されてきた。現代では演算能力の向上やネットワーク環境の発達を背景に、世界各地にさまざまなテーマのオンラインアーカイブが構築、公開されている。 グラフィックデザインやタイポグラフィも例外ではない。とくに2010年代以降は20世紀のグラフィックデザインに対する歴史的な関心の高まりを受け、多種多彩なイメージアーカイブが構築されている。 そこで本記事では筆者の独断に基づいてデザイナーや学生に向け、グラフィックデザイン関係のオンラインアーカイブを、古き良きインターネットの伝統であるリンク集というかたちで紹介していきたい。 グラフィックデザインのアーカイブは対象とするリソースの蓄積や環境という側面から、アメリカやヨーロッパの団体、機関による取り組みが先行してきた。しかし、2010年代以降には、個人や任意団体によるインディペンデントなアーカイブ
GitHub - toshusai/cmpui: CmpUI is a component library designed for creating complex GUI applications in web browsers.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。 ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Terminal CSS Terminal CSS -GitHub Terminal CSSの特徴 Terminal CSSの使い方 Terminal CSSのコンポーネント Terminal CSSの特徴 Terminal CSSは、ターミナル愛好家のためのモダンでミニマルなCSSのフレームワークです。ソースはCSSで記述されており、アクセシブルで、非常に軽量（3k gzip）です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
実家でインターネット接続トラブルが発生した時、高齢の親にルーター再起動してもらうための装置がこれ。高い確率でトラブルが解決します。いやほんと。
ふぐり日記 @yukihilog @wada_akiko ルーターに「自動再起動機能」はありませんか？ （NECのAtermはあり、他ベンダーは把握せず） 毎日定時に再起動を設定しておくと、仮に通信エラーが起きても、最長24時間後には自動で復旧してくれます。うちの見守りの運用です。 2023-10-03 23:51:04
どうやったらUIデザイナーになれるの？
イントロ 皆さんこんにちは。デザインチーム和田です。 私が現在のソーシャルデータバンクに転職したのが2023年の2月になるのですが、1人目のUIデザイナーとして採用していただきました。 1人目ということで珍しいのか、社内の方から「どうやったらUIデザイナーになれるんですか？」という事をたまに聞かれたりします。 この質問に端的に答えるのは意外と難しく、仕事や実践を通して少しずつできるようになっていった、というのが正直なところです。ですがもう少し内容を深掘りし、UIデザイナーになるのに「これは必要だったな...」という要素を紹介したいと思います。 簡単なキャリア紹介 私は元々エンジニア歴が長く、プロダクト開発をきっかけにUIデザイナーにジョブチェンジしました。UIデザインはフロント実装の傍らやっていただけだったのですが、徐々にUIデザインを専業に近づけていった感じです。 バックエンド -> フ
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。 そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。 はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“After Effects”の学習をしています。 直近のゴールとして、モーショングラフィックを用いたサービス紹介動画を作れるようになろう！ということで、今回の記事はその学習の一環としてまとめました✍️ 動画で伝えるために大切なことAfter Effectsのスキルも重要なのですが、サービス紹介をする上でより重要なのはそのストーリー構成
初めまして、プログラマーを始めて3年目の山田です。今回、日本発のReact UIコンポーネントライブラリYamada UIをリリースしたので、その素晴らしい機能の数々を紹介していこうと思います。 ちなみに、Yamada UIのYamadaは山田が名付けたわけではありません。気になる方は、山田に聞いてください。 Yamada UIとは 一言で言うならば、『すべてのUIコンポーネントライブラリを超えた(つもり)』のUIコンポーネントライブラリです。 現在のUIコンポーネントライブラリで代表的なものと言えば、Material UIやChakra UIであり、フロントエンドエンジニアであれば、誰でも知っている知名度だと思います。 しかし、現在主流となっているUIコンポーネントライブラリは数年前に開発されたものであり、色々な面(カラーモード・アニメーション・CSSプロパティ・型安全など)において首が
React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
Designing tables
I plan to continue to design, code, and write about UI components and patterns for enterprise SaaS. I aim to create a product that allows software designers and engineers to plug into a comprehensive set of UI components to build amazing interfaces. Stay tuned! If you’re interested, sign up to stay informed on my progress.
チェックボックスの indeterminate 状態は将来多分なくなるdate2024.3.14(Thu.)tagsDesignFrontend 近年お手本にしがちなデジタル庁の Design System では定義がされていませんでしたが、「チェックボックスの indeterminate 状態」について考えたところ、多分将来的に無くなるんだろうなと予想を立てました。 第三の状態: indeterminateチェックボックスを使ったフォームが入れ子のとき、子が全て選択されていないことを示す表現として indeterminate が使われることがあります。 基本的にはチェックされているかいないかを表す checked 属性の true false を使いますが、別の属性として indeterminate (未決定状態)属性 の true か false があるため、トライステートとなります。
松屋の券売機のUIにまつわる諸問題 アスキーグルメのモーダル小嶋です。以前、編集部の人に「『吉野家』と『松屋』の違いを聞かれたら、どう答える？」と聞かれたのをきっかけに、自分の考えを書いたことがありました。
Park UI
Build your own Design System Beautifully designed components built for your choice of JS and CSS frameworks. Get Started Make it yours@s`j�U@G�d�U
「リバース：1999」ホーム画面にて背景の光に合わせてキャラの色も変えている/2Dだと珍しい表現かも - ゲームアプリのUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のホーム画面のキャラが周囲の光の影響を受けている表現をご紹介します。 プレイしている感じあからさまに色処理しているようには見えず、何度か画面を切り替えて違和感に気付きました。僅かに色味や陰影に差を出しているさりげなさが好きです。 以下、概要です。 2Dのキャラが周囲の光源の影響を受けている 自然に見せることで世界観の没入感を高めている 2Dのキャラが周囲の光源の影響を受けている 「リバース：1999」はしばしばホーム画面の背景が変わります。 背景によってキャラの色味も若干変えています。いくつかバリエーションを紹介します。 1：日中晴れ 2：夕方晴れ 3：荒天（夜？） 若干キャラの色が変わって
UIの一貫性と開発生産性を高める！UI実装ガイドライン制定と浸透のプロセス - Techtouch Developers Blog
こんにちは。テックタッチの shoko です。 最近モスのフィッシュバーガーにハマっていて、3日に1回食べています🐟 さて、本日は、UI の一貫性と開発生産性を高めるために、テックタッチの UI チームがどのような取り組みをしているかをお話したいと思います。 UI チームとは テックタッチが抱える UI の課題 UI 実装ガイドライン制定と浸透のプロセス 1. メンバーから課題を収集 2. 課題・議論の集約 3. UI チームでガイドラインを制定 4. チーム全体へのガイドライン浸透 ガイドライン制定の効果 おわりに UI チームとは テックタッチでは、複数のスクラムチームでプロダクト開発を進めています。主要な機能の開発は順調に進んでいるものの、UI 改善のようなタスクに時間を割くのが難しいという状況に直面していました。 そこで、開発の優先度では後回しになりがちなものの、プロダクトの品質
こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 普段ウェブサイトを見たときに「何か少し古いデザインだな…」と感じることはありませんか？実は、ユーザーに古さを感じさせるウェブサイトにはUIに共通する特徴があります。 ウェブサイトなどのサービスを担当されている方から「UIを刷新したい！」というご相談があることも多いのですが、ユーザーが「古い」と感じてしまうデザインか？その原因はどこにあるのか？は、UIの専門知識がなくても判断することができます。 今回の記事では、「古い」と感じるUIの特徴やデメリット、新しいデザインへ改善する場合のポイントについて詳しく解説します👀 古いと感じるUIデザインのめやすそのウェブサイトがつくられたのはいつ？UIデザインは時代とともに進化を続けています。2024年時点で
社外にも公開しているSmartHR Design Systemは、ライティングに関するガイドラインも充実しています。この記事では、UI文言を検討したいと思ったときにそれらのガイドラインをどのように活用するとよいのか、おすすめの参照方法を紹介します！ チェックリスト的に参照したいライティングスタイル ライティングスタイルには、UI文言に限らずヘルプページやリリースノートなどにも適応したいガイドラインがまとまっています。 基本的かつ具体的な内容で、数も多くないので都度チェックリスト的に参照するのがおすすめです！ヘルプページやリリースノートも含めて、開発に関わる文言や文章を書く機会に参照すると、自然と頭に入っていきます。 迷ったときに参照したい用字用語
システム開発においてテストの自動化は欠かせない要素になってきている。継続的に開発を進めながらサービスを成長させるモダンな開発スタイルは、高い頻度でテストすることで品質を担保しているからだ。一方、自動テストを実施したいと考えながらも、実行まで至らない、実行し始めてもうまく継続できていないという開発者も少なくないだろう。本セッションでは、ソフトウェアテストの専門企業である株式会社ヒューマンクレストの浅黄友隆氏が、UI層を操作するE2Eテストの自動化の取り組みについて具体的に紹介した。本レポートでは、自動テストを進める際に現れる2つの山と激しい環境変化にどのように対応するのか、そのポイントを解説する。 自動テストを進めるうえで直面する2つの課題と環境変化 株式会社ヒューマンクレスト 取締役 兼 技術推進本部 本部長 / テスト自動化研究会（STAR） 浅黄友隆氏 セッションの前半で、浅黄氏は自動
JollyUI
New name, new themes, CLINew name, theme customizer, CLIJollyUIshadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
Stable Diffusion の各種 Web UI を、簡単な操作でインストール / 起動 / 管理 できるようにするソフト。 AUTOMATIC1111、Fooocus、SD.Next、InvokeAI、ComfyUI、VoltaML といった Stable Diffusion の各種 GUI を、簡単な操作でインストール / アップデート / 起動 できるようにしてくれます。 LoRA / LyCORIS / ControlNet 等の追加学習ファイルを管理する機能や、Civitai で公開されているモデルを内蔵ブラウザから直接検索＆インストールする 機能なども付いています。 「Stability Matrix」は、クロスプラットフォーム対応の Stable Diffusion パッケージマネージャーです。 AUTOMATIC1111 Fooocus Fooocus-Control
こんにちは、23卒の新卒エンジニアのfujinoです。今回は弊社のサービスでReactのフレームワークであるRemixを使い始めた話をしようと思います。 背景 弊社では今までVue.jsのフレームワークであるNuxt.jsを用いてフロントエンドを実装していました。 これは、採用当時は生のhtmlが使えるのが良いと思っていたことや、Vue.jsの経験のあるフロントエンジニアがチームにいたことが理由でした。 しかし、最近ではTypescriptとの親和性や、コミュニティの大きさなどの理由からReactの方が勢いがあるように感じます。 弊社でも少し前からReactに移行することを決定し、現在進行形でNuxt.jsからReactへの移行プロジェクトを進めています。 Reactの主要なフレームワークとして、Next.jsとRemixが挙げられます。 両者の違いとして、Next.jsはSSG（Stat
UI = f(statesⁿ)
“UI is a function of state” is a pretty popular saying in the front-end world. In context (pun intended), that’s typically referring to application or component state. I thought I’d pull that thread a little further and explore all the states that can effect the UI layer… First-party application states Every application whether it’s a to-do list or a shopping cart or some radically complex app wil
楽観的更新を行うための React の useOptimistic フック 2024.05.12 React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 React v19 では楽観的更新を行うための useOptimistic フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 楽観的更新を使用している例として、X（旧 Twitter）のいいねボタンがあります
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
Reactでは様々なスタイリングの手法があり、その上に構築されるコンポーネント実装も多くの選択肢があります。 styled-componentsやemotionといった CSS in JSライブラリによるスタイリングや、それらのライブラリ上に構築されたMUIやChakra UIといったコンポーネントライブラリ。一方でTailwind CSSやCSS ModulesなどCSS寄りなスタイリング手法があります。 私自身としてはTailwindを利用し、コンポーネントに関しては自作することが多いです。Tailwind CSSをベースにしたコンポーネントライブラリはいくつかありますが、自分の肌に合うものはありませんでした。 しかし、最近ちょうどいい選択肢と思われるshadcn/uiというものを見つけました。 一言でいうと、カスタマイズ性が高く、使いやすいUIコンポーネント集です。 本記事では、sh
VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮後で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にすることなく手軽に導入できます。 他のUIフレームワークと比較しても圧倒的に軽量 UIもJSXを使わず、関数ベースのAPIで宣言的に構築できます。 VanJSの開発秘話はとても考えさせられるものだったので、機会があればぜひ読んでみてください。 🛠️ リファクタリング対象 Sky Follower BridgeというX(Twitter)のFollower一覧からBlueskyのユーザーを検索するChrome拡張を個人開発しています。今回はその拡張機能のco
良いUIUXは利益になる。スピードの裏にある日本と中国で異なるUI/UXデザインの考え方 2024年5月21日 ITジャーナリスト 牧野 武文（まきの たけふみ） 生活とテクノロジー、ビジネスの関係を考えるITジャーナリスト、中国テックウォッチャー。著書に「Googleの正体」（マイコミ新書）、「任天堂ノスタルジー・横井軍平とその時代」（角川新書）など。 中国のアプリやミニプログラムのUI/UXデザインには、とにかく便利さを追求したものが多い。中国では、使いやすいアプリはユーザーの離脱を防ぎ、コンバージョンを高めてくれる上に、売上に直結すると認識されているからだ。近年、アジア圏にまたがりサービスを提供する中国企業が増え始めるとともに、その優れたUI/UXが日本にも認知されるようになっている。そのような越境アプリからは学ぶべき点が多いはず。 keyboard_arrow_down 課題を抱え
この記事の概要 variants や component properties など、Figma でのデータ作りには様々なテクニックがあります。 この記事では、少しニッチなシチュエーションにおいて、楽にデータを作れる方法を紹介します。 フォーカスリング付きの UI 以下の画像のように、通常時のボタンと、フォーカスが当たったときのボタンを作成したいとします。 このとき、アウトラインのオフセット表現は、通常の Stroke では実現できません。 そこで Absolute position と Constraintsを使います。 まず通常時のボタンはこのような構成です。 至って普通の作り方です。 次に、フォーカスリング付きのボタンの構成です。 元のボタンよりもひとまわり（ここでは上下左右それぞれ 3px ずつ）大きい四角形を作り、Absolute position で配置しました。 そして Co
iOSプロジェクトに対してモジュール分割しながらSwiftUIを部分適用している事例 - Mirrativ Tech Blog
こんにちは、クライアントエンジニアの竹澤(@to4iki)です。 MirrativのiOSチームでは、開発効率の最大化を狙い以下に取り組んでいます。 データフローの単方向化 (Fluxアーキテクチャの強制) 宣言的UIによるView実装 (SwiftUIの部分適用) 責務分割 (モジュール分割) 今回の記事では、どのような構成でSwiftUIを適用し始めたか、また、MirrativのiOSプロジェクトの構成やプロダクト特性の課題感からセットでモジュール分割を進めている点を紹介します。 背景 前提となるプロジェクト構成 導入に向けて決めたこと SwiftUIでどこまで実装するか 本体アプリではなくSwiftPackageを活用する 垂直分割するか水平分割するか 方針やTipsを明文化し育てる 新規開発部分のUI開発をFeatureモジュールで行う SwiftPackage: SwiftUI.
こんにちは、フロントエンドエンジニアの谷（@high_g_engineer）です。 本記事では、オブジェクト指向UIデザインの書籍紹介をさせていただきます。 オブジェクト指向UIデザインとは？ 2020年6月5日発売の書籍で、アプリケーション開発に関わるすべての人が読むべき、オススメの一冊です。 オブジェクト指向UIデザインは、オブジェクト（モノ、名詞）を起点にしたUI設計手法です。 使いやすく、心地よいユーザー体験のアプリーケーションを実現する為に力を発揮します。 多くの人が行うデザインの手順と問題点 アプリ開発において、ユーザーの要望ベースで改善を進める場合、以下の手順で取り組むことが多々あります。 ユーザの要望を叶えるタスクを考える 上記のタスクに応じたUIを考える 蔵書アプリの場合、以下の様なタスクが考えられます。 本のタイトル、著者、出版社、出版日を登録する 本を検索してすでに持
Twitterの嫌いなところ第1位「アプリ開いたとき一瞬だけ気になる投稿が見えてすぐに更新されて行方不明になるところ」←それなすぎる
ゆぴぴ、ピーナツがすき @ypp_pnt いつも一瞬で文章とかワードを頑張って覚えてせっせと検索して再会してるけど、文章を覚えられなかった時or覚えた文章が間違えてたor覚えたワードがありきたりすぎて埋もれてて再会できなかった時本当に虚無 x.com/saisekai/statu… 2024-02-16 11:44:36
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
WebUIについて調べた - laiso
WebUIはデスクトップアプリを作るためのライブラリ。HTML, CSS, JavaScriptでフロントエンドを作り、バックエンドをC, C++, Python, Go, TypeScriptなどの言語で開発できる。システムにインストールされているWebブラウザで動作する https://webui.me/webui.me 2023年にhassandragaさんが公開し、V言語コミッタのttytmさんらも参加した 本体はCで開発されていて、Python, Go, TypeScriptにバイディングが提供されている 似た技術としてはElectronやTauri、Gluonなどが存在する laiso.hatenablog.com zenn.dev アーキテクチャについて ElectronやTauriと比較すると、WebUIのアーキテクチャはWebアプリをブラウザで開くだけなのでより単純かつ制
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。 「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。 そんな皆さまに参考にしていただけると嬉しいです！ はじめに今回は、集めた料金比較表のデザインをこちらのサイトを参考に、テーブル型、カード型、ブロック型の３パターンに分類してリストアップしています。 特記事項以下に掲載している料金表は、記事作成時点（2024.2.27）でデザイン学習を目的として収集したものです。現在の料金とは異なる可能性がありますのでご留意ください。 【テーブル型】行＆列の表形式 横軸に料金パターン、縦軸にその
Social LoginSocial login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaですぐに使えるUIデザイン用のアイコン素材！ シンプルで、可読性を最大限に高めた4,000種類のアイコン
これがマウス！？ 人差し指と中指にはめて使用するクリップ型Bluetoothデバイス【やじうまWatch】
高齢の母のために作った「インターネットにつながらなくなったら開ける箱」が話題に どんな仕組み？「これで不安がなくなる」｜まいどなニュース
【2024初頭】新規開発で使ってみたいモダンフロントエンド最前線
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee
ターミナルのシンプルなUIが好きな人に！ モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
Webデザイナーが「サービス紹介動画」を構造分析してみた（8事例）｜nanami
日本発のReact UIコンポーネントライブラリ 『Yamada UI』
拡張性に優れた React Aria のコンポーネント設計
チェックボックスの indeterminate 状態は将来多分なくなる - feb19
松屋が自分から券売機を卑下してきて戸惑う 「操作に迷ってドキドキ」じゃないでしょ
古いと感じるウェブサイトのUIに共通する3つの特徴｜Dods｜UIUX改善支援
UI文言を検討するときのSmartHR Design Systemの歩き方｜稲葉志奈
ソフトウェアテスト専業企業が事例で語る、UIテスト自動化の始め方と続け方は？
Stability Matrix - ｋ本的に無料ソフト・フリーソフト
Remixを使い始めた話 | Money Forward Kessai TECH BLOG
楽観的更新を行うための React の useOptimistic フック
ReactのコンポーネントからStorybookのファイルを自動生成してみた
ReactのUIコンポーネントならshadcn/uiがちょうどいい
VanJS で素のDOM操作をリファクタしてみた
良いUIUXは利益になる。スピードの裏にある日本と中国で異なるUI/UXデザインの考え方
Figma のデータ、少し楽になるかもしれない作り方 - Qiita
オブジェクト指向UIデザインまとめ | ランサーズ（Lancers）エンジニアブログ
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
「料金比較表」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
UI & UX Design Tips by Jim Raptis.