これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラースペースなど、これからのWebサイトやスマホアプリのUI制作に役立ちます。 What's new in CSS and UI: I/O 2023 Edition by Una Kravets, Bramus, Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに モダンCSSの新しいレスポンシブ モダンCSSの基礎機能の強化 カスタマイズ可能なコンポーネント CSSによるインタラクション 終わり
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
父も母も最近のレジが複雑すぎて買い物に行けなくなってしまった→みんなの前で複雑なUIにまごつく怖さ
村井理子 @Riko_Murai 義母も義父も、コンビニには行けなくなってしまった。カードやポイント、画面操作が必要だから、怖くて行けないらしい。銀行もハードル高いらしく、毎度、予約して（！！）、行員さんに全部やってもらっているらしい。なんかもう、どうしたらいいのだろうな 村井理子 @Riko_Murai 翻訳家・エッセイスト。愛犬は長い棒を回収する琵琶湖の至宝。『射精責任』（太田出版）『ラストコールの殺人鬼』（亜紀書房）、『未解決殺人クラブ 市民探偵たちの執念と正義の実録集』（大和書房）、『犬と会話する方法 動物行動学が教える人と犬の幸せ』（慶應義塾大学出版会）、【最新刊】『ある翻訳家の取り憑かれた日常』（大和書房） rikomurai.com/%e7%a7%81%e3%8…
CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります
朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの新機能により、UI要素にさまざまなアニメーションを簡単に実装できるようになります。 Google ChromeのデベロッパーUna氏（@Una）によると、transitionプロパティでdisplayが使用できるようになり、要素の表示・非表示、ポップオーバーなどのアニメーションが簡単なCSSで実装できるようになるとのことです。 👀 An early look at transitioning to and from display: none in
「デザイナーいないんですか？」松屋の食券機のUIがどんどん悪化してきたがここに来て『極み』に到着した感が出ている
enden @enden_nix これまでも牛丼1杯と半熟玉子頼むだけで16回のボタン操作が必要だったりして異常だったけど流石にこれは無いと思う、個人経営のラーメン屋さんがなんとか導入したとかならまだしも大手全国チェーンの最新型機ですよ？？？？
UIUXデザインの観点で「UIモーション」について整理してみた
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は、「UIモーション」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回の記事は、UIモーションデザインについて考察しています。ウェブやスマホアプリが主流となり、何気なく普段から目にしているUIモーション（動き・アニメーション）ですが、それらのデザインはユーザーに大きな影響を与えます。そのため作り手側は目的をもち、受け取る側にどのようなユーザビリティを与えるのかを考えなければいけません。UIUXに大きく関わる「モーション」について、その可能性や効果、使用における注意点などをふくめ探ってみました。 UIモーションデザインとは
マリオのUIがフラットデザインになった日を知っているか 〜 【視伝研】UIデザインの歴史を紐解く｜Yamashita Angelica
※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。 今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCやスマートフォンのOSのUIはもちろん、乗り物の操縦桿やSNSのデザインなど、さまざまな観点で資料を集めてみました。 そこで、元ゲーム屋の性として、個人的に楽しくなってしまうのはやっぱりゲームUIの歴史なのですが… なんか、ゲームのUIってこんなイメージありませんか。 ゲームUIデザイナーを目指す初心者が作りがちなやつ （一応弁明するとこれは1〜2分くらいで作った雑UIです）もちろんこういうのを作れることは大事なんだけど、「ゲームでよくあるやつ」以外のデザインの引き出しがないままだといず
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
ChatGPTに要件定義をお願いしたらハンパなかった | DevelopersIO
架空の営業管理システムを作ってもらう前提で、ChatGPTに要件定義をお願いしてみました。 実験として軽く試すレベルで始めてみたのですが、予想を超えるクオリティでしたので、一部始終を皆様にもご紹介します。 ChatGPTとのやりとり まず、ざっくりと必要な機能の洗い出しをお願いしてみました。 あっという間に必要な機能を網羅的にリストアップしてくれまた。私自身、SFA/CRMをいくつか触った経験がありますが、適切な内容だと思います。 中には、「データのインポート・エクスポート機能」のように、検討初期段階ではつい忘れそうな機能も含まれています。さらに頼んでもいないのにオススメの検討プロセスまで教えてくれました。気が利いてます。 機能ベースだと要件の妥当性が判断しにくく思ったので、画面ベースで要件定義してもらことにしました。 「図で教えて」とできないことをお願いしたところ、やんわり断りつつ、意図
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
【デザイン】エレベーターの開閉ボタンはよく押し間違えられる「言葉を使用せずに押し間違えを無くす方法を考えよ」
シオザワヒロユキ @ShiozawaHiroyuk 週末に出すテスト問題その2 エレベーターの開閉ボタンはよく押し間違えられる。 言葉を使用せずに押し間違えを無くす方法を考えよ。 過程：三角形による方向指示機能を分析し、その条件と限界を考察したうえで答えを出すこと。 条件：ボタンサイズは変えないこととする。 pic.twitter.com/69atfKg8jp
JRの券売機のUIは使いにくい→目的地ではなく席の種類をまず選ばせるの慌ててたらパニックになる
*アノマテカ* @hoshikuzucake 偏見かもしれないけど公共交通機関ってこういうとこあるよな、と思う。JRに限らず鉄道会社で「切符の買い方」みたいな基本的な情報がホームページのどこに書かれてるかわかりやすいとこってぜんぜんない。海外から来る人とか困ったりしないのかな？ twitter.com/akita11/status… *アノマテカ* @hoshikuzucake 自分は身体に障害があるし遠距離恋愛してたから、デート(という名の旅行)の予定を立てたら事前に行く場所の公共交通機関をよく調べたけど、バスも前払いなのか後払いなのか、前の扉から乗るのか後ろの扉から乗るのかも、ホームページのすごくわかりにくいところに書いてあるか最悪書いてなかったりした
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜスマホアプリのアイコンは近年立体的なポップなものから平面的なものに変わったのですか？