Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
同僚である@akira_motomuraにオススメされて、上野学(@manabuueno)さんのオブジェクト指向やOOUIに関する記事を読んでみたのですが、 個人的にサービスをつくる際の視点がガラリと変わったのでまとめてみたいと思います。 オブジェクトベースなUIとは？オブジェクトベースなUIとは、オブジェクト（ユーザの関心の対象物）を手がかりに操作設計されたユーザーインターフェースのことを言います。 （OOUIとも呼ばれている） 代表的な例としてApple製品が取り上げられることが多いのですが、例えばiPhoneの写真アプリだと、ある写真に対して何らかの処理を行いたい場合、ユーザーはまず対象のオブジェクト（写真）を選び、その後にアクション（編集、送信、お気に入り、削除）を選ぶ、という流れになります。 ソフトウェア（アプリ）は実態がないのでわかりにくいのですが、基本的には自分を拡張する道具
JRの駅にある券売機のユーザーインタフェースが話題だ。下記のツイートは一例だが、一般的な利用者が考える切符購入の“導線”とは異なるトップメニューから目的の切符を選ぶことになり、初見で理解するのは難しいのではないかという声もある。筆者が個人的に購入難易度が高いと思っている、ドイツをはじめとした欧州鉄道の券売機と比べてもとっつきにくいといわれると、うなずく部分もある。 大都市圏の利用者であれば交通系ICカード利用の比率の方が高く、すでに「もう何年も券売機に近づいてない」という人も少なくないかもしれない。ただ新幹線であったり、在来線特急であったりと、長距離移動をする場合には磁気切符が必要になるため、券売機または窓口などのお世話にならざるを得ない。普段使いの交通系ICでは近距離区間の移動にしか利用できないからだ（東海道・山陽・九州新幹線の「スマートEX」などのサービスは除く）。 そこで券売機の登場
Tailwind CSSで実装されたWebページやスマホアプリ用のUIコンポーネント・レイアウト・ページテンプレートを紹介します。 公式のUIコンポーネント（Tailwind UI）は有料だったり、他にも有料のものが多数ありますが、オープンソースで利用できるものもたくさんあります。
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
2019好きなゲームUI/UXまとめ｜尾形
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
はじめにこんにちは！つむです🐈 8月より社内で実施するchatGPTをフル活用したUI勉強会を実施しています📚 開催までの背景や内容決定までのプロセス、プログラムをご紹介します🚩 使用するペルソナ・ユーザーストーリー・情報アーキテクチャ図を生成するプロンプトも公開しますのでぜひご覧ください✨ 自己紹介2022年KDDIにUXデザインコースで新卒入社（KDDIアジャイル開発センターに兼務出向中） auショップ向けDX施策やワーケーション施設検索サービス「タビトシゴト」などでUIUXを担当 背景UI業務多いのにUIデザイナーが少ないKAGデザイナーは基本的に上流を主戦場に置くUXデザイナーやサービスデザイナーとして業務をしている方が多いです。 しかし私は学生の頃からUIが得意たっだため最初はUIデザイナーからスタートし、徐々に上流へ足を広げる方針にしていただきました🙌 配属直後はUIデ
はじめてのUIデザイン 改訂版
きっぷが好きなエンジニアがデザイン哲学を意識してUI開発をした話 - freee Developers Hub
こんにちは、freee会計チームでWebエンジニアをしているe-mohaです。4月に入社しました。 この記事では、先日プレスリリースが発表されたきっぷUIの開発についてご紹介します。 燕駅から大崎駅までの交通経路のスクリーンショット まだプレスリリースをご覧になっていない方は以下のリンクをご確認ください。 prtimes.jp 今回は、freeeのプロダクトのデザイン方針である「Design Philosophy」を意識してUI開発をしました。 Design Philosophyの4つのキーワードに沿って、解説していきます。 brand.freee.co.jp 爽快でシンプルな見た目にする "かろやかシンプル" 「かろやかシンプル」というキーワードでは、業務の面倒な事務作業のストレスから開放するためにシンプルでわかりやすいデザインを心がけることを定義しています。 きっぷUIでは、右上のつば
Vue.jsの基本からよく見かけるUIの実装方法まで、JavaScriptが苦手な人向けに解説した入門書 -Vue.jsの教科書
Vue.jsの基本から、Webページやスマホアプリでよく見かけるUIの実装方法まで、やさしく丁寧に解説した入門書を紹介します。 HTMLとCSSはできるけどJavaScriptはいまいち、Vue.jsってよさそうだけど何から始めればよいか分からない、そんな人にぴったりの一冊です。Vue.jsの解説書にはJavaScriptの基礎知識が前提のものが多いですが、本書は異なります。 本書はある程度HTMLとCSSが使用でき、JavaScriptはちょっと苦手という人にお勧めです。特に、Vue.jsに一度挑戦してみたけど、JavaScriptがいまいちの私には無理だった、、、と挫折してしまった人に特にお勧めです。
検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
こちらは dely #2 Advent Calendar 2020 の12/22の記事になります。 昨日はyuaoさんのデザインの指示に迷った時は、「要素に分解」がいいかもという記事でした！ 現在、delyではエンジニアやデザイナーが日替わりで記事を投稿しています。どれも読み応えがありますので、よかったら下記のリンクもご覧ください。 dely #1 Advent Calendar 2020 - Adventar dely #2 Advent Calendar 2020 - Adventar ーーーーー PRおわり ーーーーー UIデザイナーのkassyです。あっという間に年末ですね。 今年も読んで良かったUIデザイン関連の本を中心に紹介したいと思います。気になる本があったら、年末年始のお供にぜひどうぞ！ 前回書いた記事もよかったらぜひご覧ください。 1.『オブジェクト指向UIデザイン──使
依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS Layout が注目を集めています。 フロントエンジニアとして働くひとは、ウェブサイト制作においてどれだけ多くのレイアウトやコンポーネントを扱う必要があるかよく分かるでしょう。 人気のあるレイアウトやUIコンポーネントを提供するCSSフレームワークはたくさんありますが、すべてを自分のプロジェクトに加えたくないときも。 そんな悩みを解決すべく、CSS Layout ではCSSのみで構築できる人気レイアウトやUIコンポーネントを集め、カテゴリ別にまとめています。 FlexboxやCSS Gridといった最新CSS機能によって実現されたレイアウトは、それぞれのニーズに合わせて簡単にカスタマイズでき、スターターキットとしても最適です。 パーツを組み合わ
アーキテクチャ（Architecture）とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト（Architect）とは建築家や（建築）設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト（仕組士）: システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」（IEEE 1471）と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン
フロントエンドLT会 - vol.5 #frontendlt の登壇資料です。 https://rakus.connpass.com/event/232039/ UI Testing Handbook https://storybook.js.org/tutorials/ui-testing-handbook/ サンプルリポジトリ https://github.com/zaki-yama-labs/ui-testing-handbook
2023/9/9「~ 秋のエンジニア大交流会 & LT会！！~」発表資料
様々なインタラクションに対応したシンプルなサウンドキットです。すべての音を、音の最小要素である正弦波をベースにデザインしました。比較的再生能力の低いスピーカーでも再生可能な周波数帯域を中心に、できるだけシンプルに、小さなファイル容量でデザインされているので、ウェブ、アプリ、サイネージなど様々なシーンでご利用いただけます。 土屋泰洋 サウンドデザイナー/リサーチャー The simple sound kit for designing a variety of interactions. All sounds are designed based on sine waves; the smallest pure element of sound. It is designed to be as simple as possible with a small file size, focusi
はっきりと分かるようにデザインされたUIは、最高のUI
多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言
いま話題の 「stand.fm」 のUIを全力でトレースしてみた！｜kakeru tokunaga
皆さん stand.fmというアプリ/サービスを知っていますか？ そうです。音声サービス界隈に彗星の如く現れたニューヒーローとも言えるサービスです。そのぐらい今、勢いがあると思います。 皆さんご存知の通り、音声コンテンツ市場は近年、googleやspotifyの参入やスマートスピーカーの普及に伴ってかなり盛り上がっており、日本の市場も例外ではなく、RadiotalkやVoicy、Recなど様々なサービスが存在しています。 そんな盛り上がりを見せる市場で、最近、特にコンテンツの充実・サービスとしての伸びを見せているのが、この stand.fm だという事です。 僕は今まで、appleのpodcast、Voicy,Radiotalkのユーザーでしたが、そんな僕が最初にこのアプリを触った印象は、 「使いやすい！UIがかわいい！」 気軽にTwitterのタイムラインから飛んで配信を一度聞いたつもり
「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。 Skeuomorph Mobile Banking by Alexander Plyuto この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影（光）が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。 Neumorphism in user interfaces 単色の物体に凹凸が付けられているように見えるビジュアルは、ディーター・ラムスがBRAUNで手掛けたブロダクトや初期iPodのデザインをちょっと想起させますね。 端的に言えば「スキューモーフィズムに半分回帰した」ようなUIデザインです。 The Book Of Life - "Dieter Rams" ルールこちらに解説記事がありますが、次のようなルールがあるよ
AppleのSystem 6のUIをCSSで再現できる「System.css」が公開されています。詳細は以下から。 Apple(旧Apple Computer)が、Classic Macintosh向けに1984年から1991年まで開発していたSystem OSはモノクロームデザインながら、現在のmacOSの基礎となっていますが、このSystem OSのUIをCSSで再現できるライブラリ「System.css」が公開されています。 System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however
Radix UI
An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.
Core Style React with no outside deps and 100% feature support across web and React Native. Adds many missing features to the RN Style API in ~24Kb. Static A smart optimizer that does partial analysis, extracts CSS, flattens your tree, and removes code. Supports Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other. Composable Compo
1. 目的 UIデザインを勉強し始めました。現在「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を読んでいます。そのため、学習進行の記録と復習を兼ねて、学んだことを記事にしようと思います。 以下「1. オブジェクト指向UIとは何か」という本書のさわり部分についてまとめています。 この記事で載せている例には私が考えたものも含まれていますので、間違い等ありましたらコメントにてご指摘いただけますと幸いです。 2. オブジェクト指向UI(OOUI) UIをオブジェクト(ユーザーが操作する時の対象物)を起点に設計します。GUIももともとオブジェクト指向プログラミングのコンセプトに合わせて考案されました。多くのアプリはオブジェクト指向型のGUIです。 最大の目的は、ユーザーがオブジェクトに対して自由な順序で働きかけながら目的を達成することです。 原則 オブジェクトを知覚でき直接的に働きか
本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。初回で焦点を当てるのは「Figma & UI以外のデザインデータ」についてです。 こんにちは！SmartBankのデザイナーをしている春山（@yuki930）です。 私たちは、B/43というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しています。 初回となる今回は、「Figma & UI以外のデザインデータ」をテーマに、FigmaのAuto layout機能、Component機能、Component Properties機能を活用した、変更に強いデザインデータの作りかたを解説します。 UI以外をFigmaでデザインするメリット・デメリット 最初に、UI以外のディスプレ
宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践/swiftui-graphql
宣言的UI https://speakerdeck.com/sonatard/xuan-yan-de-ui GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow GraphQLの誤解 https://speakerdeck.com/sonatard/rethinking-graphql #RoppongiGraphQL https://twitter.com/sonatard/status/1439124499023101952
フリーランスエンジニアのMasaki（@plus_one_masaki）さんは6月18日、表計算ソフト「Microsoft Excel」風のUIで操作できるCSVエディタ「CSV＋」のプレビュー版を、自身のWebサイトで無償公開した。Windows、Mac、Linuxに対応。開いたファイルをタブで管理できる機能も備える。 プレビュー版では、セルを範囲選択したり、並び変えたりできる他、語句の検索も可能。Excelと同様、プリンタにデータを送る機能も備える。 CSVはComma Separated Valueの略で、カンマで値や項目を区切ったテキストファイルを指す。さまざまな表計算ソフトで読み込めるため、統計データをオープンソースとして公開するときなどにも一般的に使われている。 一方、CSVファイルをExcelで読み込もうとすると、0から始まる電話番号などが書かれたファイルを正常に読み込めなか
はじめに コード上での問題を正確に認識しておかなければ、問題を繰り返すのです。Reactを使用したプロジェクトに参画したり、OSSプロジェクトのソースコードを散見すると複雑な仕様に立ち向かったUIに出会うことがあるでしょう。 複雑な仕様に立ち向かったUIは以下の特徴があると考えています。 bundle size が肥大している 保守や維持の管理が高い 他開発者にこのUIは何をやっているのか、質問をしなければならない。 質問の回答を聞いてもそのUIが実行していることが多様で理解しづらい。 再利用性が低い そのUIを利用するために満たさなければならない条件が多く、新しく似ているUIを実装することになる。 複雑なAPI 片手の指の数では溢れる props の数が存在している ユースケースを満たすために、既存の機能を使えば実装ができるのか、判断がしづらい 上記のようなUIを見かけた場合、どのような
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
脱初心者のためのUIデザインの心得
#UIのじかん https://graspy.connpass.com/event/138971/
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
企業サイトをはじめ、オンラインショップ、スマホアプリ、そしてブログでも制作する上で一番重要なのはライティングだと思います。 ボタンの文言は言葉を適切に選ぶだけで、クリック率は格段にアップします。また、コンテンツのライティングでユーザーエクスペリエンスは上昇し、フォームや登録画面のライティングで誤操作は減少します。 ユーザーエクスペリエンスにおけるマイクロコピーを実例とともに詳しく解説した良書を紹介します。 マイクロコピーとは、UIに付記するちょっとした言葉や短文のことです。ボタンの文言、登録を促す文言、エラーの文言、エンプティ時の文言など、WebページやスマホアプリのさまざまなUIに使用されています。 本書は当ブログでも大好評だった「ザ・マイクロコピー（紹介記事）」と同じ監修者のもと、ユーザーエクスペリエンスに特化された内容となっています。
Innovative Tech： このコーナーでは、テクノロジーの最新研究を紹介するWebメディア「Seamless」を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。Twitter: ＠shiropen2 東京工業大学アスピレーショナル・コンピューティング・ラボに所属する研究者らが発表した論文「Linguistic Dead-Ends and Alphabet Soup: Finding Dark Patterns in Japanese Apps」は、悪意のあるインタフェースデザイン「ダークパターン」がどのくらい含まれるか、日本の人気モバイルアプリで調査した研究報告である。 多くのダークパターンが発見されたが、分析する過程で新種のダークパターンが存在することが分かった。 ダークパターンとは、悪意のあるインタフェースデザインパターンの一種で、エンドユーザ
こんにちは！クラシルiOSアプリを開発しているknchstです。 昨今のモバイルアプリケーション開発では様々な要件があり、それらを満たすよう実装するには数々の苦難がありました。その一つとしてUIの状態、所謂State管理が難しくなってきています。ネットワークに接続し、またUIをアニメーションさせたりと、データとUIを同期するのは困難を極めます。 Rxなどのリアクティブフレームワークの利用が当たり前になり、ReactNaviteやFlutterなどのフレームワークをプロダクトに採用する企業も増えてきて、モバイルアプリのトレンドの風も、まさにこの方向に向かって吹き始めていました。 そして今年のWWDCでAppleがSwiftUIを発表してついに、その風は大きくなり今後のモバイルアプリの方向性を決定付けたと言っても過言ではないでしょうか。 今回は、SwiftUIとFlutterでアプリを開発する
「技術＆仲間」と紡ぐ、ゲームUI/UXのワークフロー ～CGWORLD 2019 クリエイティブカンファレンス登壇レポート～ | バナON! | 株式会社バンダイナムコオンライン
2020-01-30 クオリティ第一 ゲーム開発 デザイナー プランナー 「技術＆仲間」と紡ぐ、ゲームUI/UXのワークフロー ～CGWORLD 2019 クリエイティブカンファレンス登壇レポート～ 2019年11月3日（日）に開催された『CGWORLD 2019 クリエイティブカンファレンス』にて バンダイナムコオンラインのデザイナーが講演を行ないました。 登壇したのは、ビジュアルデザイナーとして ゲームのUI（ユーザーインターフェース）デザイン、リードビジュアルを担当する太田垣 沙也子さん。 ビジュアル業務のなかでもやや特殊なポジションと言えるUIデザインには、 使いやすく美しいデザインを作るのはもちろん、 プランナーと共にゲームのフローを考え、エンジニアに渡すための実装データを作るといった多岐に渡る業務があります。 その中で今回は「トライ＆エラー」について注目。 『UI! UI! U
Provides a plugin to customize default themes, you can change all semantic tokens or create an entire new theme.
CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hacker UI - 開発者向けのWeb UIフレームワーク
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
「Flutter」を自分で1から実装し直してその魔法を理解・体感する解説書が発売／現役大学生が執筆した『再実装Flutter UIフレームワークをゼロから自作する』【Book Watch/ニュース】
オブジェクトベースなUI設計を学んだら視点がガラリと変わった話｜Yutaro Murakami
JRの券売機が「使いづらい」と話題 なぜ今のUIになったのか？
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ChatGPTをフル活用したUI勉強会！プロンプトも大公開｜つむら
2020年 UIデザイナーが読んで良かった本 9冊｜kassy
CSSのみで表現OK 人気レイアウトやUIパターンを集めた便利ライブラリ CSS Layout
UIデザインにおけるインターフェイスアーキテクトの役割｜Goodpatch Blog グッドパッチブログ
StorybookのUI Testing Handbookを読んだ
近代フロントエンドの歴史とKuma UIの登場意義
SND: Crafted UI sound assets for UX developers
“PCで自宅ChatGPT”がかなり手軽に！ GUIで簡単導入でき日本語もOKの「Text generation web UI」【イニシャルB】
"Neumorphism" なるUIデザインのトレンド｜木村 博信 (hiro_kimu)
AppleのSystem 6のUIをCSSで再現できる「System.css」が公開。
Tamagui — React Native + Web UI kit
オブジェクト指向でUIを考えられるようになりたい。 - Qiita
UI以外でも大活躍！Figmaで修正に強いデザインデータを作る方法
Excel風UIのフリーCSVエディタ「CSV＋」登場 MacやLinuxにも対応
Reactにおける再利用とテストを容易にする疎結合なUIを目指す3つのTips
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
こういう本を待ってた！WebやスマホのUIに使用する言葉の使い方、語順、表記が学べる -UXライティングの教科書
ユーザーだます、悪意あるUI「ダークパターン」 日本のアプリでどのくらいあるか 東工大が調査
宣言的UIフレームワーク 「SwiftUI」と「Flutter」を比較してみた - dely Tech Blog
NextUI - Beautiful, fast and modern React UI Library
CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ