フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのビューポートサイズが増えた現在に欠かせないテクニックです。

CSSでレスポンシブ対応のフォントサイズを超簡単に定義できる、先日ローンチされたばかりのオンラインツールを紹介します。

Size Matters

1つのタブ内に2つのWebページを分割表示したい、と思ったことはありませんか？

現在はEdgeやZenなどの一部のブラウザのみが分割表示できますが、ついにChromeでも分割表示をネイティブにできるようになります。

1つのタブでマルチタスクを行えるようになり、2つのサイトを並べて表示するために新しくウインドウを開く必要はなりなります。ChatGPTを開きながら作業するときとかに便利ですね。

まさに次世代の写真素材サイトがローンチしました！

商用でも完全に無料、クレジット表記も不要、生成AIによる日本人のための写真素材で、写真のモデルは日本人、風景も日本風、被写体・構図・光・質感のすべてが「今のデザイン感覚」に合うものが厳選されており、あらゆるクリエイティブ制作で安心して利用できます。

Adobe Stockや海外の写真素材だと、被写体が外国人ばかりですが、Studio.Stockでは日本人をモデルにしたものばかりってのはいいですね。

Studio.Stock

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

下絵や線画はうまくできたのに、色を塗るとなんかうまくいかない、、、
キャラクターを塗るとき、光と影を使って魅力的にしたい！

イラストを塗るときにキャラクターのどこに影を入れればよいのか、どのように塗ればよいのか、さまざまな方向の光に対応した影はどうなるのかなど、キャラクターの光と影の塗りに特化されたイラストの解説書を紹介します。

UIデザインに特化され、アクセシブルでライトモードでもダークモードでも各レベルのすべてのカラーが同じ彩度とコントラストを保ち、数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツールを紹介します。

カラーパレットを生成するツールはたくさんありますが、UIデザインに特化されたものとなるとかなり限られます。さらにTailwinds CSS用のコードをエクスポートしたり、Figmaプラグインも用意された優れものです。

Harmonizer
Harmonizer -GitHub

CSSに便利な機能が追加されます！
スクロールした方向を記憶するクエリで、たとえば下にスクロールしたときにはヘッダも普通に上部に隠れ、その後ページのどこからでも上にスクロールするとヘッダを上からアニメーションで再度表示するといったことがほんの数行のCSSで簡単に実装できるようになります。

Solved by CSS Scroll State Queries
by Bramus!

Web制作やデザインでよく使用するツール、たまにしか使わないけど必要なツールをまとめて使用できる、日本人制作者によるツールを紹介します。

本ツールは先月リリースされたばかり！
パスワード生成、黄金比・白銀比計算、スクショ分割、電子印鑑生成、個人情報のダミーデータなど、それぞれ既存ツールがありますが、機能がすこし強化されて日本人向けに便利になっている点も見逃せません。

マッハーツール

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

同人誌をだしてみたい！ そんな人にお勧めのクリスタでマンガを描いて、印刷所に入稿するまでを詳しく解説したマンガ制作入門書を紹介します。

初心者向けなので、ていねいに分かりやすく解説されており、原稿用紙の準備をはじめ、コマ割り、下絵、ペン入れ、背景、効果線、トーン、セリフのフキダシ、オノマトペといったマンガ制作、同人誌の印刷に必要な仕様設定や電子書籍向けの出力方法まで、よく分かります。

マンガを描くことに特化されているので、本書はクリスタの解説書としては珍しく、EXの独自機能の解説がかなり充実している一冊です。