攸の仮寓さんから新作の手書きフリーフォント「立冬のころに」を紹介します。 ひらがな・カタカナをはじめ、漢字はJIS第二水準まで完備されており、「薔薇」「篳篥」「珈琲」などの漢字も使用できます。 まずはさっそく、フォントのダウンロード方法から。 下記ページにアクセスし、「無料ダウンロード」をクリックすると、ダウンロードできます（要ログイン、登録無料）。 ライセンスは独自で、「個人利用、商用利用ともに可。変形・加工もOKです」とのことです。詳しくは下記ページをご覧ください。 フォント「立冬のころに」 フォントはすべて手書き文字で、ひらがな・カタカナをはじめ、英数記号文字、JIS第二水準までの文字が収録されています。 「薔薇（ばら）」「篳篥（ひちりき）」「珈琲（コーヒー）」などの漢字も使用できます。

フォームの実装ってなかなか面倒ですよね。 数回クリックするだけで、すぐに使えるさまざまなフォームを実装できる無料のAIツールを紹介します。 お問い合わせやログインのフォームをはじめ、サインアップ、アンケード、イベント登録、商品注文、カスタマーサポートなど、さまざまなタイプのフォームが用意されており、日本語のプロンプトでオリジナルのフォームを実装することもできます。 Formcn 主な特徴は、下記の通り。 本番環境ですぐに使えるコード AIで生成するコードに矛盾はなく、常に一貫性があり、実績のあるコードでメンテナンスも容易です。 シングルステップ・マルチステップフォーム ニーズに合わせて、シングルステップとマルチステップフォームを簡単に選択できます。 クライアント側とサーバー側の検証 Zodとnext-safe-actionを使用したクライアント側とサーバー側で検証済みです。 使いやすい s

※本ページは、アフィリエイト広告を利用しています。 ここ一、二年でAdobeのPhotoshopはこれまで以上に大きく進化しました。その大きな要因は生成AIの機能が搭載されたことで、たとえば背景補完や要素の差し替えといった手間がかかる作業もこれまでとは比べものにならないくらい短時間でできるようになりました。 そして、Photoshopによるレタッチも大きく変わりました。レタッチに必須の知識と現役で使える以前からある機能、それらに生成AIの機能などの技術を組み合わせて使いこなすレタッチの最新テクニックを解説したデザイン書を紹介します。 本書は本日発売されたばかり！ Photoshopのレタッチといえば、著者の楠田 諭史氏を思い浮かべる人も多いと思います。『Photoshopレタッチ・加工 アイデア図鑑』『デザインテクニック大全』『Photoshopレタッチレシピ集』など多数のデザイン書を手

指定したカラーをベースにシェードのバリエーションを生成し、色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツールを紹介します。 このツールのUIも非常に洗練されており、操作性も非常に快適です。 Kigen Color Generator Kigen Color Generatorは、人気が高いデザインシステムから取得したプリミティブカラーパレットを用いてUIデザイン用のカラーを生成するジェネレーターです。 指定したカラーをベースにシェード、シェードとは暗清色で黒を加えた色（ちなみにティントは明清色で白を加えた色）、、最近のUIデザインでよく使用されている色彩トーンを使った配色をすぐに生成できます。

先日、CSSワーキンググループでCSSの新しい関数としてcolor-scheme()が追加され承認されました。ブラウザに実装されるのはまだ先ですが、この関数を使用すると、要素で使用されているカラースキームを取得でき、さらには@containerクエリとif()関数の両方で使用できます。 color-scheme()関数が使えるようになると、どのように便利なるかを紹介します。 A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのコード CSSのcolor-scheme()関数 はじめに

※本ページは、アフィリエイト広告を利用しています。 異世界（特に古代・中世・近世をベースにした空想の世界）を舞台にした小説、マンガ、同人誌を創作するときに、役立つ理科の教科書を紹介します。 作品の内容すべてが空想すぎると読者には伝わりにくいものです。現代の読者が理解できる知識や常識を踏まえた上で、世界観、土地、物理現象、魔法、生物、鉱物、天文、医学、錬金術などをどのように解釈するかを解説したものです。 著者の榎本 海月氏と榎本 秋氏はともに榎本事務所に属している作家さんで、これまでに数多くの小説執筆の指南書を発売されています。本書は『空想世界をつくる理科の教科書』で、物理や地学や生物学など9つの視点から空想世界をつくる技術や知識やツールの成り立ちと歴史を解説したものです。 本書は、先月末に発売されたばかり！

未来的な別世界のインターフェイスを作ろう、とデザインされた近未来をテーマにしたUIコンポーネントとデザイン要素のセットを紹介します。 オープンソースで、商用プロジェクトでも無料で利用できます。 Cosmic UI Cosmic UI -GitHub Cosmic UIの特徴 Cosmic UIのデモ Cosmic UIの使い方 Cosmic UIの特徴 Cosmic UIはカスタマイズ可能なSVGシェイプを備えた、美しくデザインされた近未来をテーマにしたUIコンポーネントとデザイン要素のセットです。インタラクティブロジックにアクセス可能な最新のフレームワーク向けに構築されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Cosmic UI Cosmic UIはこれまでのコンポーネントライブラリではありません。独自のSFコンポーネントライブラリを構築するためのシステム

な、なんと、iPad版のAffinity Photo 2, Affinity Designer 2, Affinity publisher 2が、0円の無料キャンペーンが開催されています！ 期間中に0円で購入しておくと、 […]

10月1日にアップデートされたChrome 141に追加された、CSSとUIに関する新しい機能を紹介します。 前回のアップデートでは10個のCSSの新機能が追加されました（紹介記事）が、今回は小規模なアップデートとなっています。しかし、details要素やネストされたSVG要素の幅と高さなど、Web制作者は要チェックです！ New in Chrome 141 Chrome 141 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ARIA通知API details要素の祖先表示アルゴリズムをアップデート ネストされたsvg要素の幅と高さ はじめに 10/1にリリースされたChrome 141で3つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 1

AIエディタ Cursorから公式の日本語ドキュメントが、先週にローンチされました！ 当ブログのビジターも多くの人が使用していると思いますが、公式のドキュメント、しかも日本語版もあるというのは嬉しい知らせですね。 Cur […]

※本ページは、アフィリエイト広告を利用しています。 デザインの原則や基礎を解説しているデザイン書はたくさんあり、私も多くのデザイン書を拝読していますが、今回紹介するのはかなり分かりやすく、しかもマンガ形式で楽しく学べるデザイン書です。 デザインの基礎理論「比率」「空間」「バランス」「色の属性」「テクスチャ」「形と形態」「動き」「リズム」「書体」について、マンガで楽しく学べ、デザインの知識とセンスを磨くことができるトレーニングブックを紹介します。 今回は特別に許諾を得て、第1章「比率」に関してはほぼ全ページ掲載しています。これは当ブログだけだと思いますので、じっくりご覧ください。 本書は韓国で大ベストセラーのデザイン書『디자인 구구단』の日本語翻訳版、デザインの基礎理論を分かりやすくカード形式にまとめたもので、マンガで誰でも簡単に、そして楽しくデザインについて学べます。英語版やアジア諸国版も

Webサイトに使用されているCSSをはじめ、自分で書いたCSSに問題がないか解析し、改善点を教えてくれる無料ツールを紹介します。 CSSは、保守性、複雑性、パフォーマンスの面から解析され、問題がある箇所はどのように改善するればよいかも教えてくれます。 CSS Code Quality Analyzer CSS Code Quality Analyzer -GitHub 使い方は簡単です。 「URL to analyze」に解析したいページのURLを入力して、「Analyze URL」をクリックするだけです。 今回は、当ブログのCSSを解析してみました。「Prettify CSS」のチェックを入れると、整形したCSSも生成されます。 CSS Code Quality Analyzer CSSはハイレベルで分析され、3項目に分かれたスコアが算出されます。 Maintainability: 保守

UIデザインでカラーを決めるときに、カラーのコントラストを確認することは必須です。コントラストをチェックできるツールはたくさんありますが、Tailwinds CSSのカラー、16進数コンバーター、コントラストの確認がひと […]

複数のビュー遷移を実行できるようにするスコープ付きビュー遷移の基本的な使い方を紹介します。 スコープ付きビュー遷移を使用すると、複数のビュー遷移を同時に実行できるようになり、レイヤー化の問題なども回避できます。 Scoped view transitions by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 スコープ付きビュー遷移で、複数のビュー遷移が同時に実行できるようになります スコープ付きビュー遷移（Scoped view transitions）は、View Transition APIの拡張機能として提案されたもので、DOMのサブツリーに対してビュー遷移を開始できるようにします。 Chrome 140以降でテスト可能で、chrome://flagsで「Expe

※本ページは、アフィリエイト広告を利用しています。 当ブログのビジターにも多くのフリーランスの方がいると思います。また、これからフリーランスになることを考えている方も少なくないでしょう。フリーランスになることを考えている人に動き出す前に読んでおきたいお勧めの本を紹介します。 そのときに必要な情報をAIやネットで調べればいいやと思っている人にこそこの本をお勧めします。私もこれからは知人や身内にフリーランスになることを相談された時には、この本を薦めたいと思います。 著者は10年以上フリーランスとして働き、ITのコンサルやソフトウェアの開発などを業務としている増井 敏克氏。本書はそんな氏によるITエンジニアがフリーランスとして独立するための実践的なガイドブックです。 実務的なことだけでなく、独立に必要な手続き、税金、ライフスタイルに関わることまで、フリーランスになったときに必要なことが幅広く網羅

10年くらい前は、1年後を予測することは簡単でした。しかし、現在はAIの登場により1年後に何が起こるかさえ予測することはほぼ不可能と言えます。 この先どうなるかは誰にも分かりませんが、現在AIがWeb制作の仕事にどのような影響を与えているのか、またこれからどのような変化が起きるのかを考察した記事を紹介します。 CSSの変数を使ったデザインシステムの構築、AIにテキストベースの情報を提供するアクセシビリティ、プログレッシブ・エンベデッド・メディアの出現など、すでに変化が起きているものもあります。 Six bets on web development in the era of AI by Valeria 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. SEOは依然として重要 2. プログレッシブ・エンベデッド・メ

UIデザイナーが定義したデザイン構成を元に、カスタマイズ可能なスタイル・カラー・タイポグラフィ・スペース・コンポーネントなど、レスポンシブ対応のレイアウトを備えて包括的なデザインシステムを設計できる無料ツールを紹介します。 ベースになるデザイン構成には、最近のトレンドを取り入れたさまざまなテーマのUIデザインが用意されており、自由にカスタマイズできます。 StyleSpark - Design Style Generator StyleSparkでは、デザインシステムを設計できるツールをはじめ、カラーパレット、HDRグラデーションなど、便利なツールが揃っています。この記事では、デザインシステムを設計できるツールを紹介します。

9/2にChromeは17周年を迎えました、時が経つのは早いですね。先日アップデートされたChrome 140に追加された、CSSの新しい機能を紹介します。 今回のアップデートではCSSの新機能がかなりの数で追加されており、calc()で使える計算式が増えたり、カスタムハイライトが使えるようになったり、バリアブルフォント用のプロパティが増えたりなど、Web制作者は要チェックです！ New in Chrome 140 Chrome 140 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに calc()で使える計算式が増えます CSSのscroll-target-groupプロパティ contentプロパティの代替テキスト ビュー遷移の疑似ツリー ネストされたビュー遷移 ov

※本ページは、アフィリエイト広告を利用しています。 一度見ただけで、印象に残るイラストってありますよね。じっくり見ると、いろいろな仕掛けがあって、さらにイラストが魅力的になる、そんなイラストの演出アイデアを構図・配色・小物・背景などの視点からくわしく解説したイラスト書を紹介します。 イラストが素晴らしいだけでなく、紙面のデザインも非常によく出来ていて、まさに保存版の一冊。さらにイラスト用の素体ポーズ集も無料でダウンロードできるという至れり尽くせり。 本書は本日発売されたばかり！ 著者はXでも人気ののり恋氏（@norikoi_noriko）YouTuberのMV動画をはじめ、イラストや書籍のカバーイラストなどを手がけているイラストレーターさんで、初の書籍となるのが本書です。イラストはかわいいながら、独特の構図と色使いで、一度見たら忘れられないイラストばかりです。

軽量のCSS classレスのHTMLとセマンティックユーティリティおよびコンポーネント用のCSSを組み合わせています。 Webコンポーネント ブラウザネイティブのWebコンポーネントでUIを段階的に拡張しています。 ビルドステップは不要 CSS変数、カスケードレイヤー、HTML属性で自由にカスタマイズできます。 ライセンスはFair-codeで、オープンソースに似ていますが実用的になっています。個人や社内または非営利プロジェクトで無料で利用できます。収益が目的の場合はプロライセンスが必要となります。詳しくはライセンスページをご覧ください。 Kelpのデモ Kelpでどんな感じに実装できるかは、デモページをご覧ください。

Webサイトやスマホアプリに最適、モダンCSSとTailwind CSSで作成されたプロ仕様の背景パターンとグラデーションを紹介します。 100種類以上の背景パターンとグラデーションはシームレスに設計されているので、あらゆるサイズで利用できます。 Pattern Craft Pattern Craft -GitHub Pattern Craftは優れたデザインを重視するデベロッパー向けに、100種類以上の背景パターンとグラデーションをまとめたサイトです。背景パターンとグラデーションはモダンCSSとTailwind CSSなので、コピペで簡単に利用できます。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

※本ページは、アフィリエイト広告を利用しています。 どのジャンルでもそうですが、ちょっとしたコツが分かるとメキメキ腕があがることがあると思います。 キャラクターのイラストを描いてみたい、いろいろな表情、肌や目や髪の塗り、さまざまなポーズ・アクション、服装や装備、小物まで、イラストを描くノウハウがぎっしり詰まった解説書を紹介します。 著書は、鳥好きのサッサ氏（@sassa_tori）、専門学校でイラストやデッサンの指導に従事し、ゲームイラストやグッズイラスト（幻想水滸伝など）の制作も手がけているイラストレーターさんです。購入した際には、裏表紙の自画像？にも注目です。 本書はそんな氏による初の単独書籍で、イラストの指導に従事してきたプロが考え抜いたかなり充実したイラストの解説書となっています。解説に使われているイラストは3,000点以上！ すべてのイラストがこの解説書のためだけの描き下ろしで、

ボタンやアイコンなどでクリック・タップ可能なエリアを広げたいと思ったことがあると思います。a要素をブロックにしてpaddingを加えたり、JavaScriptを使用したりといった方法がありますが、今回はレイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニックを紹介します。 下記は、左は通常のクリックエリア、右はクリックエリアを広げたものです。デスクトップ時は小さいままで、スマホ時には44pxに広げるといったことも簡単にできます。 実際の動作は、下記でもページでご覧ください。左は通常のクリックエリア、右はクリックエリアを広げたものです。 「デバッグモード」をクリックすると、拡大されたクリックエリアが表示されます。 See the Pen ::after content to increase clickable area by coliss (@coliss) on

「くるん・デコ」「ninaSchoolgirl」「になロマン」「最強少女」「薄幸少女」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました！ 今回は、コ […]

簡単に使える、便利なAIツールが増えてきましたね！ WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトから色彩理論、トレンドに基づいてカラーパレットを生成してくれる無料AIツールを紹介します。 プロンプト […]

黄金比をWebサイトやスマホアプリのUIデザインに取り入れようと思ったことがある人は少なくないと思います。古い記事ですが、黄金比をサイトのデザインに取り入れる簡単な３つの方法というのもあります。 さまざまなUI要素のサイズ、マージン、角丸、フォントサイズに至るまで、すべて黄金比に基づいて設計されたUIフレームワークを紹介します。 LiftKit LiftKit -GitHub LiftKitは、黄金比に基づいて設計されたUIフレームワークです。Material 3の視覚調整された設計やダイナミックカラーといった高度なビジュアルデザイン機能を実現する数式と変数のセットです。 ライセンスはApache License 2.0で、個人でも商用プロジェクトでも無料で利用できます。 LiftKit LiftKitにはさまざまな機能がありますが、主な機能は3つ。 Material Style アイコン

いつもの日本語フリーフォントの紹介とは趣向を変えて、今回はかわいすぎる絵文字フリーフォントです。 タイトルにあるように、英字は文鳥で、数字は豆苗で、約物は鳴き声で表示される絵文字フォント「ぎゅうぎゅう文鳥」を紹介します。 […]

※本ページは、アフィリエイト広告を利用しています。 Google Fontsは使うけど、最近のWebフォントの技術に追いつけていない、Webサイトやアプリで効果的に使うにはどうすればよいのか、そんな人にお勧めの解説書を紹介します。 基礎知識はもちろん、書体選び・文字組みなどデザイン的な面、新たなCSSの仕様、FOUTやFOITなどWebフォントのパフォーマンス的な面、絵文字の奥深い世界、機会学習によるタイポグラフィへの応用など、Webフォントとタイポグラフィについてしっかりした知識が身につきます。 本書は本日（8/8）に発売されたばかり！ Webフォント、Google Fontsに関する解説書は初めてだと思います。書体・文字組み・レイアウトといったデザイン的な面、OpenTypeやバリアブルといったフォントのテクノロジー、WebサイトやスマホアプリでWebフォントを使用する方法など、デザイ