2025年、Web制作・デザインに役立つ記事の総まとめ
Post on:2025年12月26日
sponsorsr
2025年、当サイトで公開した記事の中から注目された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- AI関連
- デザインのテクニック・インスピレーション
- Adobe, Figma, Affinity, VSCodeなどツール
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- フレームワーク・ライブラリ
- 無料素材
- 便利ツール・サービス
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
2025年はこれまで以上に大きく変化した年でした。2024年まではAIは活躍の場が限定されていましたが、2025年はさまざまなシーンに取り入れられ、仕事や生活の場で欠かせないものになりました。画像や動画だけでなく、コードやプログラミング、さらにはプレゼンや打ち合わせやアイデア出し、メールなどにも広く使用されています。
Web制作者にとって大きなニュースは、Baseline（ブラウザの互換性）が進んだことです。Baselineとは現在リリースされているブラウザでCSSやJavaScriptやAPIが利用可能になったかが分かるもので、Chrome, Edge, Safari, Firefoxで一貫して動作を保証します。
- Chrome 132で新しく追加されたCSSとHTMLの3つの新機能
- Chrome 133で新しく追加された7つのCSSの機能
- Chrome 134で新しく追加された5つのCSSの機能
- Chrome 135で新しく追加された14個のCSSの機能
- Chrome 136で新しく追加された6個のCSSの機能
- Chrome 137で新しく追加された7個のCSSの機能
- Chrome 138で新しく追加された6個のCSSの機能
- Chrome 139で新しく追加された6個のCSSの機能
- 17周年を迎えたChrome 140ではCSSの新機能がかなり追加されています
- Chrome 141で新しく追加されたCSSとUIに関する機能
- Chrome 142で新しく追加された9個のCSSの機能
- Chrome 143で新しく追加された4個のCSSの機能
- モダンCSSやデベロッパーツールなど、これからの実装に役立つ新機能のまとめ
個人的に影響があったのがPocketの終了です。長年愛用してきただけに、これからどうしようかと思っていましたが、Raindrop.ioに移行したらこれまで以上に快適で安心しています。
Pocketが終了するので、代替として無料で利用できるブックマーク管理ツールのRaindrop.ioに移行した手順
W3Cのロゴも2022年に一度変更されましたが、ほとんど気がつかれなかったので、今年は大幅に変更されました。
2025年、W3Cのロゴがかなりモダンなデザインに変更されました
AI関連
AIがWeb制作に与えている影響、Web制作の仕事を奪うわけではなく、どのような変化が起きているのか
- AIだと簡単で便利！ UIデザイン用に色彩理論に基づいたカラーパレットやUIコンポーネントを生成してくれる無料ツール -ColorMagic
- 簡単に使えるイラスト生成AIツールが登場！ Notion風のイラストを無料で生成できる -Notion Style Illustration Generator
- UIコンポーネントをAIで簡単に実装できる、Tailwind CSSのコードをプロンプトから生成できるツール -TailwindGenAI
- 簡単に使える無料のAIツール！ UIデザイン用に色彩理論とトレンドに基づいたカラーパレットを生成 -Colorify.rocks
- すぐに使えるさまざまなフォームを数回のクリックで実装できるAIツール -Formcn
- JavaScriptやReactなどのコードでキーボードのタイピング練習ができるAIアプリ -TypeQuicker
AIなら超簡単で早い！ Webサイトの構造を視覚化し、サイトマップを生成できる無料ツール -AI Sitemap Generator
デザインのテクニック・インスピレーション
最近のロゴに使われているデザインテクニックのまとめ -2025年、ロゴデザインのトレンド
Adobe, Figma, Affinity, VSCode, Cursorなどツール
ツールで一番インパクトがあったのは、Affinityの無料化です。発表される前はサブスク化とかAI導入など、いろいろ噂されましたが、まさかまさかの無料化でした。これにより敷居は大幅に低くなり、Affinityのユーザーもかなり増えました。
また、Affinityの有料版を購入されていた人にもちゃんとフォローがあるのは、企業として素晴らしい姿勢ですね。
Affinityの有料版を買ってた人に朗報！ v3無料化記念、v1, v2ユーザーは有料フォントが無料でダウンロードできます
見た目はPhotoshop、頭脳はGIMP！ GIMP 3.0+をPhotoshop風にするパッチがいい感じ -PhotoGIMP
- 2025年2月、Adobe Fontsに日本語フォントが大量追加、CCユーザーは無料で使えます
- 2025年4月、Adobe Fontsに日本語フォントとさらにGothamなどの英語フォントも大量追加
- AIエディタ Cursorから公式の日本語ドキュメントがローンチ、要注目のポイントを解説
- Adobe Fontsで使用できる日本語フォントすべてを一覧できるPDF 2025年2月版
- Affinity 3対応！ お絵描きするときに使いたい、インクの描き味を再現した商用利用無料のブラシ素材 -Inkers
Adobe Creative Cloudのプランと価格が変更されます！ 既存プランは実質値上げ、AI生成が制限される格安プランが登場
アドビの値上げも大きなニュースです。アドビのプランがAI機能の有り無しで細分化されたのは嬉しいですが、セール対象になるのはAI込みのプランのみで、実質あまり機能していないように感じます。
そして、今年もサポートで大きな混乱が起きました。AI機能をはじめとする新機能よりも、不具合なく安定して動作することに重点を置いてほしいものです。
現在多くのお問い合わせがあり、カスタマーサポートの窓口が大変込み合っております。
お急ぎのところお時間をいただき、誠に申し訳ございません。恐れ入りますが、お時間をあけてお問い合わせをいただくようお願い致します。
アドビのプランの確認、変更については以下の #adobehelpx…
— アドビ カスタマー サポート (@AdobeSupportJ) November 4, 2025
現在、#Illustrator #InDesign #PremierePro など複数のアドビアプリケーションが起動できないなどの問題が報告されています。
本件は現在解決に向けて調査中となっております。
ご迷惑をおかけしますが、解消まで今しばらくお待ちいただきますようお願いいたします。…— アドビ カスタマー サポート (@AdobeSupportJ) November 18, 2025
また、アドビの株価はここ1,2年で大幅に下落しています。先日、PhotoshopとAcrobatをChatGPTに統合とニュースが流れていましたが、それを望んでいるユーザーはごく少数だと思います。
不具合があってもそれに対する保障もなく、期待していていないアップデートばかりで、もう少しユーザーの声に耳を傾けてほしいところです。
フォント・タイポグラフィ
今年も新作フリーフォントがたくさんリリースされました！
- 目立たせたい見出しやタイトルにぴったりなオールドスタイルの明朝体「築豊初号明朝OFL」
- Futuraの初期型の字形「Formera」がオープンソースのフリーフォントでダウンロードできます
- ポテッとした太ゴシック体の愛らしい日本語フォント「風と大地の太ゴシック」が素敵すぎる！
- 万年筆で一文字ずつ手書きされた、やさしい雰囲気のフォント「ノエリーフ」
- マンガや同人誌、動画のタイトルにぴったりな超極太ゴシック体「源暎きわみゴ」
- 落ち着きのあるデザインに使いたい、オールドスタイルのゴシック体「いおゴシックオールド」
- かわいすぎる絵文字フォント！ 英字や数字が文鳥、豆苗、鳴き声でぎゅうぎゅうに表示されるフリーフォント「ぎゅうぎゅう文鳥」
- 日本語のかわいいフリーフォントが登場！ コミック風の手書きがかわいい、推し豆フォント「びーんずフォント」
- 新作の日本語フリーフォントがリリース！ タヌキの耳がぽこっとついたかわいいフォント「ぽこミミフォント」
- 商用利用も完全に無料！ JIS第二水準まで完備された手書きのフリーフォント「立冬のころに」
- TikTokからオフィシャルフォント「TikTok Sans」がオープンソースでリリース
- コーディング時、目の疲れを軽減！ 区別しにくい文字も素早く識別でき、明瞭性と可読性に優れたフリーフォント「Intel One Mono」
- 記号文字を多用するプログラミング向け等幅フォント！ 記号文字が美しいバランスで、より見やすくデザインされている -Myna
- 2025年、フォントの日（4/10）に限り無料と最近公開されたフリーフォントのまとめ
2026年用、日本語のフリーフォント817種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
新作フォントが増えるのは嬉しいですが、サイト消滅などでダウンロードできなくなったフォントもあるので、ちょっとでも気になったフォントはダウンロードしておきましょう。
カラー
UIデザイン用に設計された、日本の伝統色を組み合わせた優美なグラデーション素材 -Japanese Gradients for UI
- UIデザイン用のアクセシブルなカラーパレットを自動生成するツール -Accessible Color Palette Generator
- 最近のUIデザインにぴったり！ HEXコードより色彩が豊かなOKLCH値のカラーパレットをまとめたCSS -uchū
- UIデザインに使用するカラーのコントラストをチェックできる、使いやすくて、アクセシビリティを重視したツール -Contrastly
- 色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツール -Kigen Color Generator
- UIデザイン向けに視覚的に美しく、アクセシビリティの高い配色を簡単に作成できるツール -ColorMate
- UIデザインに特化！ 数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツール -Harmonizer
CSSで最近よく使うOKLCHカラーについて理解を深めよう、異なる色でトーンを合わせたり、単色のシェードも簡単
2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイト「クラウド ダンサー」、HTMLのコードは「#F0EEE9」
今年のトレンドカラーは、例年よりも人気が高いように感じます。
HTML
画像のalt属性には何を書けばよいか、WAIによるチュートリアルにその答えがありました
HTMLを愛する人のためのUIライブラリ、シンプルなHTMLでさまざまなレイアウトやUIコンポーネントを実装 -Kelp
CSS: 基礎知識
CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は
- CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
- CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説
- CSSの進化がすごすぎる！ CSSで関数を自分で定義できるカスタム関数が使えるようになります
- CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります
- CSSの:visitedの仕様が変わる！ 訪問済みリンクの履歴が分割される機能が実装されます
- カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説
- reading-flowプロパティが便利！ CSS GridやFlexboxで見た目とDOMツリー内の順序を一致させることができます
- Tailwind CSSの最新チートシート、v4.1対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの
- より洗練されたCSSアニメーションが可能に！ 複数のビュー遷移を同時に実行できるスコープ付きビュー遷移の基本的な使い方
- CSSの新しい関数「color-scheme()」を使用すると、カスタム関数であらゆる型の値を設定できるようになります
- CSSの新しいクエリscroll-stateを使用すると、ページの途中で上にスクロールした際にヘッダだけを再度表示が簡単に実装できるようになります
- モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック
2025年、CSSの新機能のまとめ: カスタマイズ可能な新しいコンポーネント編
2025年、CSSの新機能のまとめ: 進化しているインタラクション編
2025年、CSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編
CSS: 実装テクニック
モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック
- 2025年、Webサイトやスマホアプリの実装に役立つモダンCSSのスニペットのまとめ
- こんなやり方があったとは！ 境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css
- 実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック
- 日本の国旗をたった3行のCSSで実装するテクニック
- テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック
- これは疑似要素の便利な使い方！ レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック
- CSSだけでスクリーンの幅と高さ、さらには要素の幅と高さの値を取得する方法
- コピペで簡単に実装できる、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクト
CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック
JavaScript
日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date
- ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
- わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
- ユーザーのマウスやキーボードの動き（運動量や方向）から次にどの要素を操作するか予測するスクリプト -ForesightJS
- ネタバレのテキストを非表示にする、美しいパーティクルアニメーションを備えた高速で軽量なコンポーネント -spoilerjs
フレームワーク・ライブラリ
HTMLは非常にシンプル！ 圧倒的な速さでMaterial Design 3のUIを実装できるCSSの超軽量フレームワーク -Beer CSS
- CSSで幾何学模様や繊細なグラデーションなど、さまざまな要素の背景にパターンを実装できる -MotifyX
- よく見かけるUIコンポーネントやUI要素を実装するCSSのまとめ -CSSnippets
- 無料で利用できるTailwind CSSのUIライブラリをコンポーネント別に探せる -Curated UI List
- レトロなデザインがいい感じ！ 8-bitのゲーム風にデザインされたUIコンポーネントが揃ったフレームワーク -8bitcn
- CSSで簡単カスタマイズ、洗練されたデザインと気持ちいいアニメーションで動作するUIコンポーネント -SmoothUI
- 簡単な手順でWebページの読み込み時間を高速化！ クリティカルCSSを抽出してくれるツール -Critical CSS Generator
- コピペで簡単に利用できる！ Tailwind CSSで実装された、アクセシブルでモダンなUIコンポーネント -Basecoat
- UI要素のサイズ、マージン、角丸、フォントサイズに至るまで、すべてが黄金比に基づいて設計されたUIフレームワーク -LiftKit
- モダンCSSで実装された、UIデザイン用の美しいグラデーションとジオメトリックの背景パターン -Pattern Craft
- アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+
- CSSのカスケードレイヤーが便利！ 複数のCSSファイルを効率よく管理できるデフォルトのCSS構造 -CSS boilerplate
- このUIデザインかっこいい！ 近未来をテーマにしたUIコンポーネントとデザイン要素のセット -Cosmic UI
CSSで実装したグリッチの揺れるエフェクトがかっこいい！ 映画で見かけるようなサイバーなUI -CyberPopover 2025
無料素材
商用でも完全無料で利用できる！ デザインやイラストでかなり使える有料レベルの高解像度テクスチャ素材 -ResourceBoy
- 商用利用も完全無料！ UIデザインに最適、シンプルなデザインでパフォーマンスに影響を与えない超軽量のSVGアイコン素材 -Next Icons
- 商用でも完全に無料！ ゲームだけでなく、UIデザインにもぴったりな1,440個のピクセルアイコン -Pixel Icon Library
- 商用でも完全に無料！ UIデザイン用にシンプルなラインでデザインされたSVGアイコン素材 -Lineicons
- 商用利用無料、UIデザイン用のSVGアイコンが3000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
商用でも完全に無料！ クレジットも不要、日本人向けの生成AI時代ならではの新しい写真素材サイト -Studio.Stock
商用でも完全に無料、帰属も必要なし！ ポップでおしゃれなイラスト素材がダウンロードできる日本人によるサイト -pople
当ブログで紹介した後、イラストのリクエストも増え、着実にイラストが増えています。
便利ツール・サービス
SVGアニメーションで気持ちよく動くスピナー、超軽量サイズでカスタマイズも簡単 -SVG Spinners
- CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズの定義ができるツール -Type Scale Generator
- UIデザイン用のカラー・スペース・コンポーネントなどを簡単に設計できるツール -StyleSpark
- CSSに問題がないか、保守性・複雑性・パフォーマンスの面から解析し、改善点を教えてくれるツール -CSS Code Quality Analyzer
- パスワード生成、黄金比・白銀比計算、スクショ分割、電子印鑑生成、個人情報のダミーデータなど、日本人制作者による便利ツールがまとめて使える -マッハーツール
- CSSのclamp()によるレスポンシブ対応のフォントサイズを数クリックで定義できるツール -Size Matters
- デスクトップのモニターからスマホまで、あらゆるスクリーンのドット抜け・表示ムラをテストできる無料ツール -Free Screen Test Tool
ついにChromeでも分割表示がネイティブに、1つのタブ内を分割して2つのWebページを表示 -Split View
当ブログではDesign Cutsにしばらく触れていませんでしたが、2025年1月16日に閉鎖されたのも今年の大きなニュースの一つです。
sponsors
