はてなブックマーク

優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこともできます。 Details that make interfaces feel better Details that make interfaces feel better -GitHub はじめに 1. テキストの折り返し（text-wrap: balance / pretty） 2. ネストされた角丸 3. コンテキストに応じたアイコンアニメーション 4. macOSでフォントをくっきり細く表示させる方法 5. 動的に表示される数字 6. 中断可能なアニメーション 7. 複数のアニメーションを同時に適用し

アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。 Flexoki Flexoki -GitHub Flexokiはアナログ印刷のインキと紙の温かみのある色合いからインスピレーションを得て、スクリーン向けに設計されたデジタル用のカラースキームです。 リリースされた当初に一度当ブログで紹介しましたが、ver.2.0のアップデートで、アクセントカラーが88色追加されており、より高機能なカラーシステムへと進化されています。新色は、色が明るくなるにつれて彩度が指数関数的に増加することで、紙に描かれた顔料の質感が

CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。 メディアクエリやブレイクポイントの設定は不要で、あらゆるWebサイト、スマホアプリで利用できます。 Fluid Modular Type Scale -GitHub ではさっそく、そのCSSを紹介します。 CSSのpow()関数を使用すると、最小ビューポート幅と最大ビューポート幅の間でフォントサイズをスムーズに拡大縮小ができます。 /* Fluid Modular Type Scale */ :where(.fluid) { --fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--font-l

※本ページは、アフィリエイト広告を利用しています。 AIが登場した頃はこんなこともできるのかと驚きでしたが、日常的に使うようになると、いかに効率よく精度の高い回答を得られるかが重要になってきました。 「ありきたりなアイデアしか出てこない」「回答が微妙にずれている」「専門的な視点が欠けている」など、AIから期待している回答が得られないというときに、AIからの回答の精度が大きく変わる一行プロンプトが分かる解説書を紹介します。 プロンプトを長く書いても期待した回答が得られない、そんな時は本書の一行を追加してみてください！ 本書は2ヵ月ほど前に発売されたもので、Amazonでも参考になったと高評価のレビューが多いですね。表紙のデザインは賑やかですが、中身は読みやすく、充実した内容になっています。 AIに尋ねるときに、本書に書いてある一行を加えるだけで、精度がかなりあがるのを実感できます。

ここ1,2年でAIによる便利なツールが増えてきました。ここで紹介するのはそれらの便利なAIツールの中でもかなり実用的で、これまでの定番ツールも同時に利用できるお勧めツールです。 プロンプト（日本語）で「夕陽のカラーパレットをつくって」とお願いできるのはこれまでもたくさんありましたが、ここからさらにその色合いを調整したり、特定の色をロックしたり、配色理論（類似色・補色・3色配色など）に基づいたカラーパレットを生成したり、WCAGに準拠したコントラスト比を考慮したり、実践的なツールです。 UIデザインはもちろん、ブランディングやプロダクト、さらにはイラストや紙のデザインもサポートしているカラーパレットを生成できます。 EnigmaEasel: The AI-Powered Suite for Accessible Design EnigmaEaselはデザイナーやデベロッパー向けに、AIによる

macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。 Thawは常に表示するアイコンと非表示するアイコンを設定でき、「…」をクリックすると非表示に設定したアイコンが表示されます。簡単に言うとBartenderのオープンソース版のようなものです。私はBartender、そしてIceを使用していましたが、この記事で紹介するThawに変更しました。 最近はサブスクが増えて、気がつくとけっこうな金額になっていたりするので、代替できるものは代替にしています。 Thaw -GitHub Thawの特徴 Thawのダウンロードとインストール Thawの使い方 Thawの特徴 Thawは、macOSのメニューバーを管理するオープンソースの無料アプリです。主な機能は、メニューバーに表示されているアイコンの表示・非表示ですが、ほかにも便利な機能が備わっていま

HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。 各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。 AliveUI AliveUI -GitHub AliveUIの特徴 AliveUIのデモ AliveUIの使い方 AliveUIの特徴 AliveUIは、モーションを最優先にしたCSSのフレームワークです。WebサイトやスマホアプリのUIインターフェイスは視覚的に構造化されていますが、時間的な動きには乏しいのが現状です。 AliveUIはclassを一つ加えるだけで、あらゆる要素にモーション、奥行き、インタラクションを与えて

※本ページは、アフィリエイト広告を利用しています。 Affinityが無料化されて半年が過ぎようとしています。リリース直後はインストールがうまくいかないなどの問題がありましたが、現在はそういった問題はなくなりました。 無料化されて大きく変わったのが、3つのアプリが1つに統合されたこと、そしてCanvaとの連携です。大きく進化したAffinityで何ができるのか、Canvaとの連携やCanva AIで何ができるのかが分かるデザイン書を紹介します。 2025年11月にAffinityが無料化されて以降、本書が初の解説書だと思います。無料になったAffinityの解説はもちろん、Canvaとの連携テクニックやCanva AIについても収録されており、無料化されたAffinityで何ができるのかを一通り学ぶことができます。 デザインの解説書だと、チュートリアルを実践するときに素材を用意するのが面倒

フォントの混植とは、日本語のテキストは和文フォントで、英語のテキストは欧文フォントで表示したり、またよくあるのがひらがなフォントに漢字が揃っているフォントを混植したり、2つのフォントを組み合わせて使用することです。 通常、混植するにはAdobe IllustratorやInDesignなどのソフトウェアが必要ですが、ブラウザ上で混植を試すことができる便利なサイトがローンチされました！ MOBULA MOBULAは、Google Fontsの全フォントを対象に混植を確認、また混植用のCSSも生成してくれる無料サイトです。制作者様は日本人で、当方にメールでローンチのお知らせが届きました。 利用にあたって登録など面倒なことは一切不要で、完全に無料で利用できます。 MOBULA 制作者様によると「Webの混植デザインはサイト・アプリケーション共にツールが不足していると感じており、欧文・和文フォント

安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、HTMLの新しい要素「<install>」が利用できるようになっています。 <install>でインストールボタンを設置すると、JavaScriptなしで、Webアプリ（複数可）のインストールが簡単にできるようになります。 Install web apps with the new HTML install element by Patrick Brosset install-element -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに これまでの問題点 HTMLの新しい要素「<install>」 フォールバック：代替コンテンツの提供 イベントの処理 <install>要素のデモペ

flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素 […]

コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。 display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, text-align, opacity, box-shadow, border-radiusなど、なじみ深いプロパティや値が15x15ピクセルにデザインされています。 Cascade Icons Cascade Icons -GitHub Cascade IconsはCSSの各プロパティをあらわした、丹精込めてデザインされたアイコン素材です。コードを理解するデザインツール向けに制作されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。

これまではmacOSでTextExpander（買い切り版の古いやつ）を使用していたのですが、先日macOSの通知で「macOSの次のバージョンからIntel用アプリが使用できなくなる」と告知をされたので、代替アプリをい […]

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デザイン、グラフィックデザイン、紙のデザインで特に重要なのが、レイアウト・タイポグラフィ・配色といったデザインの基礎理論です。デザインするときに役立つ知識とテクニックを最強原則として体系化したデザイン書を紹介します。 整列・近接・反復・対比、さらにはジャンプ率、余白とバランスの整え方といったレイアウトの手法をはじめ、和文書体・欧文書体、和欧混植、数字記号文字など文字要素の扱い方、色の組み合わせ方、色相・明度・彩度による調整、トーン、グラデーションなどの配色テクニックまで

当ブログのビジターも素材の管理に「Eagle」を使用している人がいると思います。私も6年前から画像やフォントの管理に使用しています。 そんなEagleに新機能として「AI Search」が実装されました！ これがまた非常に便利で、簡単に説明すると、1枚の画像を元に似た画像を探す「類似画像検索」、日本語プロンプトで画像を探す「自然言語検索」の2種類の素材検索ができます。AIはローカル実行されるので、ネット接続不要、アップロードも不要で、オフラインでも利用できます。 下記は、AIによる類似画像検索です。Eagleに保存した画像素材の中から類似した画像を一覧表示します。 素材管理アプリ「Eagle」とは Eagleの新機能「AI Search」とは 「AI Search」のインストール 「AI Search」類似画像検索のやり方 「AI Search」自然言語検索のやり方 素材管理アプリ「Eag

4月に、Adobe Fontsで使用できる日本語フォントが増えました！（紹介記事） 今回のアップデートでは、多くのデザイナーに人気の七種秦史氏のフォントが大量追加され、極細のロゴナ、初登場となるG体（ジタイ）のフォント、他にも筆文字の手書きフォントもたくさん使用できるようになりました。 これらの新着フォントをはじめ、Adobe Fontsで利用できる日本語フォントすべてが一覧できるPDFも無料でダウンロードできます。 2026年4月版 Adobe Fonts日本語書体一覧のPDF Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 フォントのライセンス -Adobe Fonts 安いプランを教えて、とたまにメールがきます。Adobe Fontsが使用できて一番安いのは、InCopy年間プランで

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でどのように記述するのかを解説しているサイトです。