Webサイトやスマホアプリのロード時に、実際のUIから抽出したピクセルパーフェクトのスケルトンを自動生成してくれるフレームワークを紹介します。 React, Vue, Angularなどに対応しており、数行のコードを記述するだけで、あらゆるUIのスケルトンを自動生成できます。 下記のGIFアニメーションだと分かりにくいですが、スケルトンにはキラッとひかるshimmerなども用意されています。 Boneyard Boneyard -GitHub Boneyardの特徴 Boneyardのデモ Boneyardの使い方 Boneyardの特徴 Boneyardは、Webページやスマホアプリ用にスケルトンのローディング画面を自動生成できるフレームワークです。仕組みとしては、実際にレンダリングされているUIコンテンツをスナップショットし、正確なサイズと配置でスケルトンを自動生成してくれます。 MI

5/6にアップデートされたChrome 148に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、コンテナクエリをcontainer-typeを設定しなくてもコンテナ名のみで機能するようになったこと、video要素やaudio要素も遅延読み込みに対応したこと、ユーザー操作によるテキストのオーバーフローの切り取りなど、Web制作者は要チェックです！ また、新しくPrompt APIが搭載され、ChromeにGemini Nanoが組み込まれました。右上のボタンが邪魔という場合は、右クリックで非表示にできます。 New in Chrome 148 Chrome 148 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるコ

テキストや画像をボーダーで囲って、ボーダーの上部にタイトルを配置したいと思ったことはありませんか？ 以前はこれをCSSで実装しようとしてもかなりトリッキーな実装でした。またfieldsetとlegendでも実装できますが、そもそもフォームではない上に、CSSによる装飾も貧弱です。 fieldsetのコンポーネントを最小限のHTMLとモダンCSSで実現したテクニックを紹介します。レスポンシブに完全対応で、方向directionにも対応しています。 まずは、デモページでその動作をご確認ください。 上から、通常、中央配置、rtlの右書きの3つです。 See the Pen CSSを使用して<fieldset>（およびlegend）を実装 by coliss (@coliss) on CodePen. HTMLは非常にシンプルです。 見出しのh3とテキストのpをdivで括ります。

iOSにLiquid Glassが採用されてから早半年が過ぎました。 慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。 WebサイトやスマホアプリのUIで使われるカード、ボタン、ナビゲーション、タブ、アコーディオン、モーダル、フォーム、テーブルなどのUI要素やコンポーネントをLiquid Glassの美しいデザインにしたUI Kitを紹介します。 Liquid Glass UI Kit Liquid Glass UI Kitは、CSS Guidelines(管理しやすく、拡張性のあるCSSを書くためのガイドライン)に準拠し、BEMメソッドで実装されたUIキットです。 ライセンスは独自で、商用プロジェクトでも無料で利用できます。複製、変更

去年くらいからAIOというワードを目にするようになったと思います。AIOとはAI最適化（AI Optimization）のことで、簡単に説明すると、AI検索や生成AIに信頼されるコンテンツを設計することを意味します。 信頼されるコンテンツとして設計されているか、回答エンジン最適化（AEO）、生成エンジン最適化（GEO）、大規模言語モデル最適化（LLMO）など、WebサイトがAIエージェントに対応しているかどうかを多角的にチェックできる無料のオンラインツールを紹介します。 各項目についての解説や、NGになった項目の改善策なども提示され、無料とは思えないほど充実した機能を備えています。 Is Your Site Agent-Ready? Is Your Site Agent-Ready?は、WebサイトのURLを入力すると、そのWebサイトをスキャンして、AIエージェントへの対応状況を確認でき

ボクセル（volumeとpixelを組み合わせた用語）を積み木のように組み合わせて3Dの空間配置を2Dの平面に構築し、SVGに変換して描画する超軽量のJavaScriptエンジンを紹介します。 ボクセルの組み合わせの自由度はかなり高く、さまざまな形状を作り出せます。さらにスケーリングは無限、個々の面にスタイルを設定したり、アニメーションで動かすこともサポートしています。 heerich.js heerich.js -GitHub heerich.jsは、3Dのボクセル（体積volumeとピクセルpixelを組み合わせた用語）を構築し、それをSVGに変換するミニマルなJavaScriptエンジンです。ボクセルでさまざまな形状を描画することができ、建築的な優雅さを実現できます。他のライブラリやJavaScriptの依存関係はありません。 heerichの名は、幾何学的な段ボール彫刻で知られるド

これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則 ※本ページは、アフィリエイト広告を利用しています。 気に入ったデザインを参考にしたけど、うまくいかなかった。なぜこのデザインなのか聞かれても、説明できなかった。そんな経験をしたことはありませんか？ WebやUIデザイン、グラフィックデザイン、紙のデザインで特に重要なのが、レイアウト・タイポグラフィ・配色といったデザインの基礎理論です。デザインするときに役立つ知識とテクニックを最強原則として体系化したデザイン書を紹介します。 整列・近接・反復・対比、さらにはジャンプ率、余白とバランスの整え方といったレイアウトの手法をはじめ、和文書体・欧文書体、和欧混植、数字記号文字など文字要素の扱い方、色の組み合わせ方、色相・明度・彩度による調整、トーン、グラデーションなどの配色テクニックまで

View Transitionsをより簡単に操作するためのコードや関数をまとめたView Transitions Toolkitを紹介します。 View Transitionsを使った最近のナビゲーション、スクロール位置に基づいて要素をアニメーションで変化させたり、アニメーションの制御をコントールするなど、よく使うコードがまとめられています。 View Transitions Toolkit View Transitions Toolkit -GitHub View Transitions Toolkitの特徴 View Transitions Toolkitのデモ View Transitions Toolkitの使い方 View Transitions Toolkitの特徴 ここ数年の間に、CSSのView Transitionsを使用したさまざまなコンテンツが増えてきました。機能もさ

4/7にアップデートされたChrome 147に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、要素のボーダーをあらゆる形状にできるborder-shapeプロパティ、ライトモードとダークモードの両方で読みやすいテキストカラーを設定できるcontrast-color()関数など、Web制作者は要チェックです！ 下記はborder-shapeで実装されており、各要素はそれぞれ独立した形になっています。昔は横V字型の画像を使用していたのが懐かしい、、、 New in Chrome 147 Chrome 147 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに タイムラインの名前付き範囲スクロール CSSのcontrast-color

【新規対象キャンペーン】Adobe Creative Cloud コンプリート|12か月版|オンラインコード版 いつものように「新規購入者限定版」で、本セールで購入するのが初めての人が対象（要は一回のみ）。すでにアカウントを持っている人でも、過去のセールで購入したことがある人でも大丈夫です。 去年のパターンだと、4月上旬の次は7月下旬でした。ただその次は値上げになったので、今年はどうなるかですね。 新規購入者限定版や既存アカウントの延長について詳しくは、前回のセール時の記事をご覧ください。 では、Adobe Fontsに大量追加された日本語フォントを紹介します。 Adobe Fonts Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 また、Adobe Fontsのフォントは、Adobe系以

テーブルのヘッダを上部に固定し、さらに列の1つを左端に固定する、これを実装するのは非常に大変です。 一見、position: sticky;を使って、top: 0;とleft: 0;で実装できそうですが、実際にはどちらか一方しか固定されません。JavaScriptを使用してもかなりの量になります。 ここで朗報です、9年間続いていたCSS仕様の問題が解決されます！ position: sticky;がアップデートされ、軸ごとにもっとも近いスクロール位置に追従できるようになったため、このヘッダと列を上部と左端にそれぞれ固定するのが簡単に実装できるようになります。 CSS position: sticky now sticks to the nearest scroller on a per axis basis! by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記

CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。 要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やrgb()値より鮮やかなoklch()による色設定、JavaScriptを使わずにアニメーションで高さを変更するCSSなど、よく使用するCSSのテクニックが満載です。 Modern CSS Code サイトのトップに「2015年のようなCSSを書くのはやめましょう」とあるように、modern.cssはCSSの古い書き方をクリーンでネイティブなモダンCSS、そしてTailwinds CSSでどのように記述するのかを解説しているサイトです。

CSSで装飾したテキストやボタンのデバッグは、各プロパティやその値もそれほど複雑なCSSではないので簡単です。 下記のようにレイヤーが重なったグラデーションのデバッグはどうでしょうか。CSSもかなり複雑で、コードを見ただけでデバッグするのはかなり難しいと思います。そんな複雑なCSSでも簡単にデバッグ・編集できる無料ツールを紹介します。 bg.layers bg.layers -GitHub bg.layersは、CSSで実装された背景レイヤーをデバッグ・編集するためのオンラインツールです。backgroundをはじめ、background-image, background-color, background-positionなど、background-*プロパティの挙動を確認し、各レイヤーを確認したり、レイヤーの順番を変更・非表示にしたり、編集したCSSをコピーすることもできます。

※本ページは、アフィリエイト広告を利用しています。 UIデザインにおいて、もはやFigmaは必要不可欠なツールになっています。 Figmaをこれから初めて使用する人、なんとなく使ってるけどきちんと使い方を学びたい人向けに、WebサイトやスマホアプリのUIをデザインする際にFigmaを効率的に使用する方法がよく分かる解説書を紹介します。 また最近では、Figmaも進化が早く、AI系の機能もかなり充実しており、新機能をまだ試していないという人にもお勧めです！ なんとなく既視感を覚えた人は大正解！ 本書は2023年に出版された『はじめてでも迷わない Figmaのきほん』（紹介記事）の待望の改訂版。改訂にあたってはFigma SitesやFigma Makeをはじめ、8割近く新しく執筆されており、改訂版の枠を超える勢いです。

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。 これまではlight-dark()関数はカラー値（<color>）のみしかサポートしていませんでしたが、画像ファイル（<image>）もサポートされ、ロゴ画像や背景画像などをライトテーマとダークテーマで切り替えることができるようになります。 More Easy Light-Dark Mode Switching by Bramus! はじめに light-dark()関数に欠けていたピース ブラウザのサポート light-dark()関数のフォールバック <color>値や<image>値以外は？ 今後の展望: @function + color-scheme() が救世主になる はじめに 2023年に私は当時画期的だったlight-dark()関数を使っ

AIを使用して前景色と背景色のコントラスト、WCAG 2.1および2.2のAA/AAA基準を満たすアクセシブルな色の組み合わせをテストし、さらにその組み合わせに合った色で基準に満たした色も提案してくれる無料ツールを紹介します。 チェックしてくれるツールはこれまでにもありましたが、デザインを損なうことなく代替となる色をAIで提案してくれるツールは、これが初だと思います。 WCAG Color Contrast Checker WCAG Color Contrast CheckerはUIデザインで使用する色の組み合わせが、WCAG 2.1および2.2のAA/AAAに準拠しているかをすぐに確認できる無料ツールです。 AA/AAAに準拠していない場合は、AIによって準拠している色の中で組み合わせに合った色を提案してくれます。 WCAG Color Contrast Checker WCAG Col

セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル！ 依存関係は一切なく、classレスとまではいきませんが、classの使用は最小限で、カスタマイズも非常に簡単です。 Oat UI Oat UI -GitHub Oat UIは、セマンティックなHTMLでWebサイトでよく使用されるUIコンポーネントを実装する超軽量（8Kb）ライブラリです。依存関係は一切なく、フレームワークやビルドといった複雑さは一切不要です。 ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。 Oat UI Oat UIの主な特徴は、下記の通り。 超軽量のライブラリ CSS 6Kb、JS 2.2Kbで、まるでオートミールのように軽い 依存関係ゼロ JavaScriptや

※本ページは、アフィリエイト広告を利用しています。 デザインで役立つのは、良質なデザインの引き出し持っておくこと。バナーのデザインはもちろん、Web制作に携わるすべての人にお勧めのデザイン書を紹介します。 本書は本日、3/19が発売日！ バナーは小さなスペースに、すばやく伝わる情報設計、分かりやすいレイアウト、要素のリズム、視線誘導、注目されやすいフォント、イメージを伝える配色、効果的な装飾など、デザインのさまざまな知識やテクニックが詰まっています。本書ではそれらが良質で豊富な事例とともに詳しく解説されています。 表紙に既視感を覚えた方は、大正解！ 本書は大ベストセラー『思わずクリックしたくなる バナーデザインのきほん』（紹介記事）の続編。当ブログのビジターも多くの人が持っていると思います。 前書ではバナーに使われているデザインを基本から詳しく解説されていましたが、本書ではさまざまな業種別

画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。 実際の動作は、デモページをご覧ください。 See the Pen 画像をホバーすると拡大、マスク 2 by coliss (@coliss) on CodePen. また、OSレベルでアニメーション効果をオフにしている場合は動作しないようにすることもできます。 See the Pen 画像をホバーすると拡大、マスク by coliss (@coliss) on CodePen. OSレベルでのアニメーション効果をオン・オフにするには、 Windowsでは「設定→アクセシビリティ→視覚効果→アニメーション効果」 macOSでは「設定→一般→アクセシビリティ→表示→動きの抑制」 And

テキストを棒グラフや折れ線グラフ、円グラフに変換して表示するフォントがGoogle Fontsで利用できるようになったので紹介します。 たとえば、{b:15,45,80,30,60}というテキストは5つのバーがある棒グラフに、{l:2,5,3,8,1,6,4}は折れ線グラフに、{p:62}は62％の円グラフを表示するオープンソースのフォントです。 Datatype Datatype -GitHub Datatypeの特徴 Datatypeのダウンロード Datatypeの使い方 Datatypeの特徴 Datatypeは、シンプルなテキストを視覚的なグラフに変換するOpenTypeの可変フォントです。グラフを表示するためにOpenTypeの合字置換機能を利用しており、画像やレンダリングライブラリやJavaScriptなどは一切不要です。 サポートブラウザは可変フォントをサポートしているCh