10/5に紹介した、PhotoshopやIllustratorをオープンソースで再構築した「Crafting Apps」が早くも日本語フォント、UIの日本語化に対応した模様。

下記の画像はCrafting AppsのPhotoCraftで、PSDを作成し、レイヤーを作成し、日本語フォントを使用したものです。

10/7にアップデートされたChrome 155に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべきは、カウンターのスタイルをインラインで定義できるsymbols()関数、装飾線の見栄えをよくするtext-decoration-skip-spacesプロパティ、コンテナ内の余分なマージンを取り除くmargin-trimプロパティなど、Web制作者は要チェックです！

New in Chrome 155
Chrome 155 beta

これまでたくさんのSVGアイコンのライブラリを紹介しましたが、それらのほとんどをひとまとめに閲覧・検索できる便利なサイトを紹介します。

複数のアイコンライブラリを横断検索してSVGアイコンをダウンロードでき、さらにはサイズやカラーをカスタマイズすることもできます。

IconsDB
IconsDB -GitHub

アール・デコのモダンでおしゃれなデザインが好きな人は多いと思います。

アール・デコの左右対称の美しい幾何学模様をデザインに取り入れた、CSSで実装されたボタンを紹介します。

Art Deco Button Anthology

これには思わず二度見、いや三度見しました！
Photoshop, Illustrator, Premiere Pro, Lightroom, Acrobat Pro, After Effects, InDesignのAdobeのアプリ7種類をAdobeのコードを一切使用せずに、完全に新しいコードを使用して各アプリの機能を忠実に再現したオープンソースのアプリを紹介します。

しかも、すべてのアプリはWindows, macOS, Linuxで動作し、WebAssemblyを介してブラウザ上でも動作します。まだRC版としてリリースされたばかりですが、すでにけっこう使えます！

【重要】現在RC版なので、大切なファイルで操作することはお勧めしません。

Crafting Apps

※本ページは、アフィリエイト広告を利用しています。

AIが当たり前になりつつある現在、デザインのワークフローも劇的な変化をし始めています。エディタをはじめ、AdobeやFigmaなどにもAIが採用され、意識せずにAIを使用しているかもしれません。デザイナーがAIをどのように活用できるのかを実務に基づいて詳しく解説した解説書を紹介します。

AIで画像やデザインを生成する話ではありません、Webサイトやスマホアプリにおけるデザインワークフローの全行程に渡るAIの活用方法です。

CSSの@supportsはブラウザがその機能をサポートしているか検出するのに便利ですが、単独の機能しか検出ができません。

たとえば、gapは現在はflexboxでサポートされていますが、当初はCSS Gridのみでした。そのため、@supports (display: flex) and (gap: 1em) のように記述しても、flexboxでgapを使えるかではなく、それぞれflexboxが使えるとgapが使えることが検出できるだけです。

こういった機能の組み合わせで検出できる@supports named-feature()がまもなく全ブラウザでサポートされます。

“Undetectable” CSS Features with @supports named-feature()
by Bramus!

Webページのさまざまな要素（カードやボタンなど）をリアルなガラスにするエフェクトライブラリを紹介します。

リキッドグラスのエフェクトは非常に美しく、屈折、ばかし、色収差、ライティングなども設定でき、かなりリアルなガラスを実装できます。

LiquidGlass
LiquidGlass -GitHub