UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
これで迷わない！Modal、Dialog、Drawerの違い
ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
AITuber育成完全入門（冴えないAITuberの育て方）｜みゆきP
はじめにAITuberと書いて、アイチューバーと読みます。VTuberとは違って中の人が存在しないことが特徴です。 AITuber開発は高尚な深層学習のモデル開発ではまったくなく、むしろ、ただの推しの育成ゲームです。 なので、GPUもPythonもいりません。PCさえあれば今すぐはじめられます！ この記事でできること以下のようなAITuberが作れます。可愛いですね（親バカ） 妹系AITuber🌸桜井りりか Twitter: https://twitter.com/Ririka_AIsister YouTube: https://www.youtube.com/@ririkasakurai 早い人で週末に2日で作れると思います！ 土日に作ったAITuberをみんなに公開しちゃいましょう！！！ AITuber作成手順立ち絵の生成 モデル・VAEの選定 Google ColabでStable
UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog
はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android
LPやWeb製作を高速化するUIコンポーネント集を作った
リンク コンポーネントの例 概要とモチベーション Camome UI はひとことで言うと「抽象度の高い UI コンポーネント集」です。 Bootstrap や MUI などのフレームワーク・ライブラリの類とは異なり、網羅的・汎用的なパーツを提供することが目的ではありません。つまり Button や Input や、もう少しハイレベルな Navbar などを高いカスタマイズ性とともに提供するつもりはありません。 それよりも「LP のこの部分にコピペすればサクッと決まる」ような体験を重視しています。UI デザインといっても、多くの場合はそれほど変わったものが求められるわけではなく、使い回せるものが大半だと思います。 要するに「デザインの常套句」みたいなものが存在するわけです。Camome UI はそういう「よくある」デザインをたくさん収録することを目的としています。 プログラミングは得意でもデ
Storyshotsを止めてスナップショットテストの仕組みを自作した話 | Wantedly Engineer Blog
Storybook はWebフロントエンド向けのUIモックアップのフレームワークです。 あらかじめUIコンポーネントをデータストア非依存で作っておけば、そのモックアップを作ることができます。(モックアップといっても、バックエンドに繋がっていないだけで、ユーザーの操作には反応するというものを考えています。) Storybookでは、このようなモックアップのことをStoryと呼んでいます。Storyがあらわすコンポーネントの粒度もまちまちで、汎用のボタン1つに対するStoryもあれば、ページ全体に対するStoryも考えられます。 モックアップを動かしながら作業することで、余計な手間をかけずにUIの動作確認をできるというのがStorybookの基本的な使い方です。 StoryshotsとはStoryshots はStorybookをユニットテストで利用する方法のひとつです。 Storyshots
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
ユーザーは⾃分が本当にほしいものを⾔葉にできない！UIデザインとUXデザインは別もの！先入観の罠！目からウロコなUIデザインの勉強会
羽山 祥樹＠日本ウェブデザイン @storywriter 明日7/15（金）の夜にUXデザインの無料セミナーするんだけど、ネタスライドしかアップしてないので、中身があるか不安に思われている気がしてきたw ちゃんと中身もあるよ！ ということでスライドチラ見せ！ セミナー申し込み（無料） → creativevillage.ne.jp/111762 pic.twitter.com/wJl3jUyz3b twitter.com/storywriter/st… 2022-07-14 18:04:25 リンク connpass 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 (2022/07/15 19:00〜) ## 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 UXデザインの根幹を理解するための無料セミナーを開催し
「1枚のシート」でエンジニアとデザイナーのストレスが激減した話 - Qiita
「考慮もれ」「手戻り」をなくしたい モチベーションクラウドシリーズのデザイナーです。 フロントエンドエンジニアのみなさんは、画面デザインを見て「どう実装するんだ？」とストレスを感じたことはないですか？ 例えば... 👨💻 フロントエンド「Emptyのときはどうするんだろう？最初から考慮してほしいな...（ストレス）」 👩🎨 デザイナー「この状態も考えないといけないのか。確認するだけで1日終わるな...（ストレス）」 →お互いにとって、よくない！！！！！ こうした状態を受けて、お互いにとってストレスなく開発するために、デザイナーとフロントエンドで制作プロセスを改善しました。 今回は、プロセス改善のステップや導入してみて効果的だったツール（シート）についてお伝えします。 【まず初めに】 「UI Stack（状態デザイン）」の必要性の周知 UI Stackとは、UIの考慮すべき5つの
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
なんのためにMLを使うのかを意識する メルカリアプリにおけるエッジAIの実装・運用のポイント
Machine Learning Casual Talks #12 (Online)は、機械学習を用いたシステムを実運用している話を中心に、実践的な機械学習に関して気軽に話せる会です。メルカリのバーコード出品機能を例に、TensorFlow Liteを使ったエッジAIの実装・運用のポイントについて、大嶋氏が語りました。後半は運用について。前回の記事はこちら。 計測改善 大嶋悠司氏（以下、大嶋）：結果です。アプリをリリースしましたが、タップしてくれる人は想定以上に少なかったです。さらにバーコード出品の増加率もほとんどなかったです。タップしてくれる人が少ないので、そもそも機能が使われていないので当たり前ですよね。 ここにいる方には当然かなというふうに思いますが、じゃあそのあと計測して改善していこうというフェーズが当然出てきますよねという話です。 今回、機械学習のモデルは、本かどうか。正確には本
UIが嘘をつく？ UXデザインにおける「楽観的な更新」とSPAでの作り方 - カミナシ エンジニアブログ
こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更新の意義 早くも 1968
【まるでUiPathのオープンソース版!?】OpenRPAをセットアップしてみる - Qiita
RPA (Robotic Process Automation)ソフトウェアは、5大ソフトウェア (WinActor、UiPath、BizRobo!、Automation Anywhere、Blue Prism) 以外にも、国産、海外モノ、有料版、無料版など様々な種類が存在し、30~40くらいはあるようです。そんな中で2019年にリリースが開始されたオープンソースの無料RPAソフトウェアである『OpenRPA』が、面白そうだったので取り上げてみることにしました。そして、実際にインストールして試してみた感想を書きました。 OpenRPAとは OpenRPAは2019年にデンマークで配布が始まったオープンソースのRPAソフトウェアで、UI Automationと呼ばれるユーザーインターフェイス要素を分解できるAPIを使った、セレクターによるUI操作や、バックエンドサーバーの機能もOpenFlo
Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ
先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleのAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか？継続的にバージョンア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shin Sasaki on Twitter: "Figmaの歴史はプロダクト開発者にとって学びの宝庫だった📝 1. 初期コンセプト「ブラウザ上のフォトショップ」は不発 2. 当時の常識は「1人かつオフライン」 3. 機能を絞りUIデザインに特化し成功 4. 他ツールからシェア… https://t.co/F9dyeR8Gbv"
GitHub - appsmithorg/appsmith: Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
