『Stable Diffusion web UI』自作のアイコンを無料で手軽に作成 | つれづれげーむず
「アイコン」「ロゴ」というのは自作すると結構たいへんなものです。 私のサイトで現在使ってるはというと windowsの付属ペイントで作成したこれでもかなりマシになりました。 この「アイコン」「ロゴ」というのは個人サイトにしろ、企業にしろイメージに直結するので、客商売と考えると費用対効果が実はかなり高いポイントですが、イラスト門外漢だとどうしても適当になってしまいがちですよね（実感）。 今回はこの「アイコン」「ロゴ」を『Stable Diffusion web UI』で作ってしまおうというものです。 作成作業自体は簡単ではあるのですが、『Stable Diffusion web UI』の導入が前提となります。 『Stable Diffusion web UI』の導入については私が導入した際の記事を挙げていますので参考にしていただければと思います。
タッチパネル式食券機を作ってる連中ってバカなの？
もういろんなところで言われてるけど、最近よく見るタッチパネル式の食券発券機ってなんであんなに無駄なステップが多いの？ 行きつけのラーメン屋でノーマルラーメンを頼もうと思ったらこんだけの画面を経なきゃならない。 ・ラーメン、サイドメニュー、ドリンクからラーメン選択 ・ラーメン、チャーシューメン、煮卵ラーメンなどからラーメン選択 ・トッピング選択画面でトッピング無しを選択 ・麺普通、大盛から普通を選択 ・お支払方法選択ボタンをタッチ ・電子マネー、現金から電子マネーを選択 ・いくつかの選択肢からたとえば交通系ICを選択 ・カードをタッチ→発券 こんなのこうすりゃ簡単じゃん。 ・注文画面（＝初期画面）で注文する品を選択→他メニューやトッピングも追加選択できる状態で「電子マネーをタッチ、あるいは現金を入れてください」の表示 ・カードをタッチあるいは現金を投入して発券（どの電子マネーかは自動判別）
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
医師とデザイン。なぜ医療現場は複雑なUIが好まれるのか？｜Kei Kobayashi｜note
医師は情報が詰めこまれたスライドが好き？こんにちは、株式会社CureAppデザイナーの小林です。精神科の医師ですがデザインが好きすぎてデザイナーとして働いています。 医療の世界から会社員に転身すると、日々さまざまな発見があります。先日社外の人とプレゼンテーションの話題になり 「医師向けのプレゼンでは、シンプルなものより情報が詰め込まれたスライドが好まれるんです」 と言われ驚きました。 たしかに医療系のスライドは医師に限らず文字が詰めこまれた分かりづらいスライドが主流ですが、それはデザインへの関心が低いだけでけっして「好き」なわけではない、そう思っていました。 しかし改めて「もしかして医師は本当に複雑なデザインが好きなんじゃないか？」という疑念がわいてきました。 よく見る医療系スライドの一例 https://www.dinf.ne.jp/doc/japanese/resource/kouse
親にLINEの使い方を教えようとしたけど、UIの意味から伝わらなくて詰んでしまった話→こういう層はどうやって生まれるのか
うめめ @beConjuror 親にLINEの使い方を教えていると、UIの意味が圧倒的に届かない層があることが再認識される。写真を送るアイコンは理解できず、パスワード入力の目のマークはわからない、ハンバーガーメニューは意味不明、スワイプ操作は異次元。そういえば自分はどうやってこれらのマークの意味に慣れたんだっけ...。 2022-08-27 11:21:05 うめめ @beConjuror 「うわぁ…！スライドしたらトークが消えてしまった！どうなっているんだこれは」みたいなこと、自分も過去に経験したはずなんだけれど、いつのまにかなんとか使えるようになっている。「IT機器利用センス」みたいなパラメータを知らない間に鍛えているのではないか。 2022-08-27 11:27:33
SPAでボタンコンポーネントをリンクにする時に気をつけること
この記事はVueアドベントカレンダー2021の7日目の記事です。 SPAでボタンのコンポーネントをリンクとして扱いたいときに気をつけたいことを書きます。 Vueに限った話ではないのですが、僕がVueで開発をする機会が多いのでサンプルコードではVueを使用しています。 他のフレームワークを使っている方は、適宜置き換えて考えていただければ幸いです。 ボタンのコンポーネントでリンクさせたい時ありますよね？ Vue Routerを使用していれば router.push('/foo') のように関数を実行して遷移させることができるので、コンポーネントの内部が aタグ でも buttonタグ でもリンクとして動作させることが可能です。 どちらでもできるけど aタグ を使おうぜというのが本記事の言いたいことです！ サンプル 早速ですが、サンプルを使って紹介していきます。 見た目の同じボタンが2つ並んでい
マイクロソフト、マルチプラットフォームUIを実現する「.NET Multi-platform App UI」（MAUI）を実際にデモ。単一コードからWebとWindowsアプリを生成
マイクロソフト、マルチプラットフォームUIを実現する「.NET Multi-platform App UI」（MAUI）を実際にデモ。単一コードからWebとWindowsアプリを生成 マイクロソフトは2月26日にオンラインイベント「.NET Conf 2021 - Focus on Windows」を開催しました。 イベントの中で同社は、マルチプラットフォームUIを実現するフレームワーク「.NET Multi-platform App UI」（以下、.NET MAUI）を用いて開発したアプリケーションをデモし、実際に単一コードから生成されたWebアプリケーションとWindowsネイティブなデスクトップアプリケーションを披露しました。 .NET 6に組み込まれる「MAUI」はマルチプラットフォームUIを実現 .NET MAUIは、今年11月に正式リリース予定の「.NET 6」に組み込まれる予
UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
小飼弾の論弾 #45「対談・UI研究者 増井俊之さん @masui 「Scrapbox」が見せる、本当の電子書籍の姿」（その2）：404 SPAM Not Found
「小飼弾の論弾」で進行を務める、編集者の山路達也です。 今回は、5月9日（月）に配信した、ユーザーインターフェイス研究の第一人者、増井俊之さんとの対談テキスト（全3回）をお届けします。 小飼弾の対弾5/9「対談：増井俊之氏 iphone開発者が語る ジョブズが面白そうなことをやりそうだからやった～フリック入力・予測変換を実装した男のキーボードに代わるUIの転換とは」 - ニコニコ動画 【会員限定】小飼弾の対弾 5/9「対談・増井俊之氏 新しさとはなにか？ 長く続くのには理由はあるのか？ 電子書籍とパスワードとプログラミング教育と」 - ニコニコ動画 次回のニコ生配信は、7月24日（月）20:00の「小飼弾のニコ論壇時評」。旬のニュースをズバズバ斬っていきます（21:00頃からは、通常の「小飼弾の論弾」になります）。 小飼弾のニコ論壇時評＠7月24日号 - 2017/07/24 20:00開
結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
Home - Office UI Fabric
All Microsoft Global Microsoft Security Azure Dynamics 365 Microsoft 365 Microsoft Teams Windows 365 Tech & innovation Microsoft Cloud AI Azure Space Mixed reality Microsoft HoloLens Microsoft Viva Quantum computing Sustainability Industries Education Automotive Financial services Government Healthcare Manufacturing Retail All industries Partners Find a partner Become a partner Partner Network Fin
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
iOS 純正メールアプリのUIがヤバイ件
社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。 まずは観察メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中途半端なモーダルビューで現れたような状態になる。このUIが使いやすいとか何となく見た目がかっこいいとか、そんな上辺だけの理由では絶対ないはずなので、AppleがメールアプリをデザインするときになぜこのUIに至ったのか、その理由を考えてみた。 メールの新規メッセージ画面を開いた状態普段純正メールアプリでメッセージを送信することはほとんどなかったので、まずはいろいろと動きを観察することにした。新規メッセ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Konsta UI - Mobile UI components built with Tailwind CSS
「デザイナーいないんですか？」松屋の食券機のUIがどんどん悪化してきたがここに来て『極み』に到着した感が出ている
https://twitter.com/t_takasaka/status/1570716749565231104
駅のタッチパネル券売機で、一般の人が躓くところはどこにあるのかという疑問に対して様々な意見 - Togetter
https://twitter.com/fladdict/status/1458294748918083588
Components – Material Design 3
