AI Image Generator | RecraftCreate visually consistent graphicsThe first generative AI design tool that lets users create and edit digital illustrations, vector art, icons, and 3D graphics in a uniform brand style.
こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法
はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて
「お伺い」に気をつける、デザイナーのコミュニケーション｜大﨑 優｜CONCENT
なかなか抜けない癖がある。 「これで良いでしょうか？」「どれが良いでしょうか？」と、デザイナーがお伺いの姿勢になってしまう。ついついそんな癖が出てしまう。 お伺いは「あれっ？」と不審を走らせ、周りに違和感を発することがある。お伺い自体が悪いわけではありませんが、お伺いが続いてしまうとデザイナーのプレゼンスが下がっていく。もったいないことです。 判断の丸投げはしないたとえば、デザインアウトプットを提示するとき。依頼者側が意思決定するにしても、「これで良いでしょうか？」と全てを相手に委ねてはいけない。デザイナーは「どの部分の判断をお願いするか」を注意深く分けて話す必要があります。 コミュニケーションデザインの場合。あるアウトプットについて、「依頼者が求めるビジネス成果に叶っているか」という点で相手の判断を仰ぎつつも、別の観点、たとえばそれがブランド認知の一貫性を保っているか、感性的価値が十分で
共通化すれば良いとは限らない - Object.create(null)
ここのところ偶然なのか「共通化」という言葉を多く聞いているのですが, その言葉を聞くたびに身構えていることに気がついたので, この気持ちの出どころを共有しておきます. なぜ身構えているかというと, 共通化が必ずしもコードを良い状態にするとは限らないにも関わらず, それ自体が目的になってしまっている (ように見える) ことが多いからです. この手のリファクタリングの目的はあくまでコードの改善のはずで, そのことを忘れて共通化するだけで満足してしまうと, 良くてリファクタリングの効果が半減, 悪ければ逆効果になってしまいます. 個人的にコードを共通化する上で注意してほしいと思っているのは以下の二つです. コードを共通化すべきでない場合もある 共通化されたコードは一般的な原則にしたがって設計されなければならない 似たようなことは歴史の中で何度も繰り返し言われていることだろうと思いますが, 改めて
くすぶってるデザイナーに、「デザイナー」の在り方を再定義したい。｜ぐら
こんにちは、ぐらです。 ここ3ヶ月間ぐらい、会社の案件獲得のためにコンサル営業に入っているんですが、コンサル営業ってビジネスやデザインの理解から、フロントコミュニケーションにドメイン知識まで、求められるスキルセットが多くて毎日忙しくしてます。 なんでコンサル営業までやろうと思ったかというと、デザイナーって「赤ちゃん」が多いと思ったからなんですよね。 それも含めて、今から本題の話ができればと思います。 ※ この記事では主観的な表現がとても多く書かれていますが、あくまで個人の感想と見解になります。 デザインに依存するデザイナー達赤ちゃんって何かについて説明したいんですけど、デザイナーってものづくり的で職人的な側面が強いし、想像以上にビジネスのことを知らない気がしてるんですよね。P/L・B/Sとか読めない人も全然いると思います。 これって、そもそもデザイナーのビジネス知識が不足しているのもあるん
美しいUIを作るために デザイナーが意識している ちょっとした考え方
3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 Ameba ブランドサイト わ た し の ふ か わ り ょ う タ レン ト い ってくる 場 所 。 か えってくる 場 所 。 今 年 、 芸 歴 3 0 年 を 迎 える タ レン ト の ふ か わ り ょ う さ ん 。 テ レ ビ ・ ラ ジ オ の ほ か 、 D J 、 執 筆 とそ の 活 動 は 多 岐 に わ た り 「 頭 の 中 で 常 に い ろ ん な ア プ リ が 起 動 して い る か の よ う 」 な 状 態 だ と い う 。 そ ん な 多 忙 な 生 活 の 中 で、 毎 日 の よ う に 訪 れて い る 「 f e t e c a f e （ フ ェ テ カ フ ェ ） 」 は 、 心 休 ま る 場 3 数字じゃなくて重心でデザインしてる ゆー
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
そろそろ、『スコープ』を超えたプロダクトデザインをしよう〜第666平行世界の記憶〜─シリーズE調達 SmartHR VPリレー連載＃6｜株式会社SmartHR
そろそろ、『スコープ』を超えたプロダクトデザインをしよう〜第666平行世界の記憶〜─シリーズE調達 SmartHR VPリレー連載＃6 SmartHRは、2024年7月1日にシリーズEラウンドの実施と、新規領域への参入や、労務管理・タレントマネジメントの新プロダクトを発表しました。 シリーズEラウンドの実施や新領域への参入を受け、それぞれの管掌組織の挑戦や戦略について、SmartHRのVP陣がリレー形式でnoteを執筆します。 第1回：村から都市への発展過程で求められるもの──シリーズE調達 SmartHR VPリレー連載＃1 第2回：困難だからこそやりがいがある。エンタープライズ事業本部の進化と挑戦─シリーズE調達 SmartHR VPリレー連載＃2 第3回：Alignment と Autonomy と Agility ── シリーズE調達 SmartHR VPリレー連載#3 第4回：カ
日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これまでに存在しない業務フローは どう作っていくか？ドメインエキスパートやビジネスサイド、 チーム一丸となって取り組むドメインモデリング
情報設計からのデザインアプローチ ～ユーザーの声を聞くよりも、もっとデータの声を聞け～
Design Doc の書き方 / How to Write a Design Doc (Ja ver.)
Layoutit Grid — CSS Grids layouts made easy!
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
satto | 仕事はみんなでサッと済ませよう
Mapbox
Knapsack: Match design intent with user reality.
v0 by Vercel
よりシンプルになる Svelte の世界
