これがフロントエンドで話題になった記事！ ICS MEDIAの2025年

これがフロントエンドで話題になった記事！
ICS MEDIAの2025年

OwnedMedia

ICSはフロントエンド専門のウェブ制作会社で、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から12年目をむかえました。年末恒例となりますが、今年の記事のアクセス数を公開します。

今年はCSSの進化が目立ちました。今年はどの記事がもっとも読まれたのでしょうか？　今年執筆した記事で上位10記事をピックアップします。

1位 : text-boxの使い方

19,761 PV

text-box-trim / text-box-edgeを取り上げ、テキスト要素の上下スペース（いわゆるハーフ・レディング）の扱いを整理しながら、実装にどう役立つかを具体例つきで解説しています。多くの方々が普段のウェブ制作で困っていたことであり、解決方法が得られたことで大きな反響がありました。

読者のコメント：

「これまでは margin-block: calc(0.5em - 0.5lh); で取り除いてたけど、このプロパティだとスマートで良いな。」
「CSS、どんどんかゆい所に手が届くようになっていく」
「ずーーっとPaddingで調整していたけど、これラクかも」

2位 : Noto Sans JP最新実装ガイド

ウェブ制作者のためのNoto Sans JP最新実装ガイド

16,830 PV

2025年はWindowsに「Noto Sans JP」と「Noto Serif JP」が標準搭載となったことが、ウェブ業界の大きな変化でした。

Notoファミリーの背景から、Noto Sans JP / Noto Sans Japanese / Noto Sans CJK JPなどの名称・提供元・配信形態の違い、環境差による注意点まで、2025年時点の状況を整理して解説しています。Google Fontsから導入する場合の、見落としがちな注意点も触れています。

読者のコメント：

「恥ずかしながら、Noto Sans JPが2025年4月のWindows UpdateでWindows10/11標準搭載になっているの知りませんでした。。」
「フォント名の由来は初めて知りました😳」
「Notoがすでにシステムフォントに入っていたとは…そのうちさようなら游。」

3位 : HTMLとCSSだけでカルーセルUI

JavaScript不要! HTMLとCSSでつくるカルーセルUI

16,304 PV

新しい疑似要素::scroll-button()、::scroll-markerを用いて、HTMLとCSSだけでカルーセルUIを構成する考え方と実装例を紹介しています。アクセビリティー上の利点もあり、今後のブラウザ対応の広がりに注目しています。従来のJSライブラリ前提だったUIを、標準機能でどう置き換えられるかがわかります。

読者のコメント：

「JSを使わず作れる時代が来たのですね…感動です…。とっても簡単に作れたので、みなさんもぜひ！」
「JSファイル消せるから軽くなるわ」
「どんどんHTML/CSSが進化してる…」

4位 : スクロールでふわっと出るアニメーション

CSSひとつで印象が変わる！　スクロールでふわっと出るアニメーション

16,297 PV

スクロールに合わせて文字が「ふわっと」出てくる表現を題材に、少しの工夫でアニメーションの印象を高めるテクニックと応用例を紹介しています。比較やサンプルを通して、同じ方向性でも仕上がりの差を生むポイントが見えてきます。

読者のコメント：

「めちゃくちゃわかりやすいアニメーションの記事！」
「タイミングやイージングで印象変わりますよね。シンプルな演出ですがこだわるポイントだと思います！」

5位 : select・optionの新しいカスタマイズ

HTML/CSSで装飾可能に！ select・optionタグの新しいカスタマイズ方法

14,463 PV

Chrome・Edge 134で可能になった<select>要素のカスタマイズを取り上げ、標準要素のまま見た目を整えられるメリットを解説しています。独自実装で起こりがちなアクセシビリティやキーボード操作の課題を回避しつつ、自由なデザインに近づける方法が分かります。

読者のコメント：

「CSSで自由に出来るようになってたんだね。知らなかった〜」
「<select>要素をカスタマイズできるようになることに素直に喜べない自分がいる…🥹」
「実際に使うのはまだ先やろうけど、見え方を統一できるのは良い感じ。」

6位 : 1文字ずつ変化するテキストアニメーション

HTMLとCSSでつくる!　1文字ずつ変化するテキストのアニメーション

10,796 PV

リンクテキストなど小さめの文字でも視線を引く演出として、HTMLとCSSのみで「1文字ずつ」動かすテキストアニメーションを紹介しています。基本となる仕組みと実装時の注意点を押さえたうえで、バリエーション例へ展開していく構成です。

読者のコメント：

「HTMLとCSSだけで、こういうの取り入れたれたら楽しそうですね💡」
「ふわっと揺れるの良いですね！文字のアニメーションの参考になるのがいっぱい。」

7位 : @scope入門

標準のHTML+CSSでスコープ化が可能に！ @scope入門

10,533 PV

CSSの新機能@scopeを取り上げました。タイル適用範囲をHTMLの特定領域に限定する方法を解説。クラス名の複雑化を抑えつつ、スタイル衝突を防ぎ、保守性を高めるための選択肢になりえるでしょう。

ユーザーの声（一部）:

「CSSは、ひっそりと、でもものすごい勢いで新しいこと取り入れていくからとても好き◎」
「マジで俺が初めてcss触れた時から進化しまくっとる」
「CSSのスコープ、クラスにスコープを与えるのであれば、ネストと何が違うの？って思うけど、スコープ内にスタイルを反映しない領域を作れるのが違うらしい。」

8位 : リストのホバー演出アイデア集

HTML・CSSだけで作れる！リストのホバー演出アイデア集

8,761 PV

リスト項目のホバー演出を、クリック可能であることの伝達だけでなく「操作の気持ちよさ」「世界観の表現」という観点で整理し、HTMLとCSSだけで実装できるアイデアを多数紹介。実装の引き出しを増やしたいときに参照しやすい記事です。

読者のコメント：

「ねこが出現するでほっこりした🐱」
「あまり見たことないホバー演出が多かった！」

9位 : p5.js活用事例集

p5.jsの表現力を活かしたクリエイティブなWebサイト事例集

8,650 PV

Three.jsと並べて語られることも多い表現系ライブラリの中で、p5.jsのウェブ制作への活用に焦点を当てた事例集です。p5.jsを使ったウェブサイト/アプリケーションを通して、canvas表現の可能性と取り入れ方を紹介しています。

読者のコメント：

「Webサイト案件でp5.jsって、なんでか敬遠してたんだけど、事例あるんだね。」
「なんかFLASHで作られてたサイトを思い出す…」
「最近よくp5.js見るようになってきた👀」

10位 : p5.js入門

p5.jsによるクリエイティブコーディング入門

8,462 PV

9位と同じくp5.jsを使った、クリエイティブコーディングの入門記事です。p5.jsの強み、便利な関数や作例に加えて、制作した作品の公開方法までをまとめて解説しています。

読者のコメント：

「FVでもよく見る展開図みたいな物体がランダムに動き回るアニメーションのしくみが思っていたよりシンプルだったので、今度試しに実装してみたい✨」

トップ10未満の記事

その他、11位からすべての記事のアクセス数も公開します。HTML・CSSの進化が目立ちますね。

11〜20位

WebGPU対応のThree.jsのはじめ方 8,032 PV
進化を続けるHTMLのdialog要素 7,935 PV
React Three Fiber入門 7,559 PV
スクロールの状態変化でスタイル切替が可能に！ scroll-state()入門 7,483 PV
バックエンド入門（前編） 7,459 PV
CSSのclip-pathとshape()関数で切り抜き表現 6,994 PV
HTMLの新属性popover="hint"の使い方 6,815 PV
CSSでheight: autoでもアニメーションが可能に! interpolate-sizeとは 6,496 PV
バックエンド入門（後編） 5,897 PV
Nuxt Studioことはじめ 5,853 PV

21〜30位

31位〜

過去記事へのアクセスも大きかった

2025年に公開した記事だけでなく、過去に公開した記事も安定して読まれました。ここでは同じ集計期間のアクセス数をもとに、過去記事の上位を並べます。

フォント関連

フォントの記事は例年、膨大なアクセス数があります。海外の記事では日本語フォントの解説が一切存在しないので、国産記事の需要は大きいです。

2025年に最適なfont-familyの書き方 33,746 PV/年
文字詰めできるCSSのfont-feature-settingsが凄い 33,582 PV/年
文章の折り返し指定のCSS最新版 23,071 PV/年

ユーザーインタフェース

「このUIをどうやって作るの？」といった模範的なコードを探している読者が多いようです。我々の記事は過去の記事をメンテナンスし、現代的なコードで安心して読み解けるようにしています。

detailsとsummaryタグで作るアコーディオンUI 24,924 PV/年
リンクテキストのホバー時アニメーション11選 21,674 PV/年
シンプルで使いやすいHTML・CSSボタンデザイン集11選 20,452 PV/年
HTML・CSSで実装するかわいいフキダシのアイデア 18,339 PV/年
HTMLコーダーがおさえるべきinputタグの書き方まとめ 11,850 PV/年

CSSレイアウト

モーション

CSSイージングの記事は継続的にメンテナンスを行っていますが、2025年に大幅に伸びました。linear()関数の影響でしょうか。今年はGSAPが完全無料化したのが大きい出来事でした。

CSSイージングのお手本 25,975 PV/年
GSAP入門（前編） 24,542 PV/年
CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう 16,695 PV/年
CSSだけでスクロールアニメーションが作れる！？ Scroll-driven Animationsとは 15,043 PV/年
SVGアニメーションの作り方まとめ 11,062 PV/年
View Transitions API入門 10,102 PV/年

JavaScript

ChromeのデベロッパーツールでJSをデバッグする方法 26,735 PV/年
JavaScriptのスマートな配列操作テクニック 11,169 PV/年
JavaScriptでJSDocコメントを書くメリットとは 10,974 PV/年

ツール

Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 20,954 PV/年
VS Codeでマークダウンを快適に書きたい！オススメの拡張機能と設定6選 12,736 PV/年
SourceTreeの使い方 | コミットの取り消し方法まとめ 12,657 PV/年

新しい記事よりも、昔の記事のほうがアクセス数が多いのはICS MEDIAの昔からの傾向です。公開初年度は伸びなくても、数年経過してからアクセス数が伸びる記事もあります。

入門サイトのアクセス数

ICS MEDIA内にはテクノロジーに特化した入門サイトを用意しています。これらの入門サイトは年間で多くのアクセス数がありました。

『Three.js入門サイト』95,992 PV/年
『CreateJS入門サイト』12,448 PV/年
『Jenkins入門サイト』4,233 PV/年
『Web3D Maniacs』1,633 PV/年

サイト全体のアクセス解析

今年一年で執筆した記事は38本。2025年1月1日〜12月29日の期間でGoogle Analytics 4の表示回数を集計したところ、サイト全体では171万PVでした。

例年、ICS MEDIAのアクセス数が低下してきており課題感を持っています。直近だと検索結果の「AI Overview」の影響などが考えられます。

勉強会でも発信

今年はDIST 10周年イベントで、ICS MEDIAの運営について赤裸々に発表しました。

DIST.47 「DIST 10周年記念イベント」 | DIST

抜粋

図版テンプレート（Figma）

私たちはパブリック、オープンにオウンドメディアを運営していきたいと考えています。もし勉強会などで発表を聞きたいという方はお声がけください。

2026年もよろしくお願いします

2025年はCSSやHTMLの標準機能だけで実現できる表現がさらに増え、実装の選択肢が広がった一年でした。新機能を「知って終わり」にせず、制作現場で判断できる形に落とし込む記事作りを意識してきました。

各記事の作例はオリジナルですが、いずれも「動き」を大切にしています。アニメーションなど動くものは動画のほうが伝わるので、今後は動画解説のラインナップも増やしていく予定です。YouTubeにICS MEDIAのアカウントがあるため、ぜひチャンネル登録をしてくださいませ。

ICS MEDIA - YouTube

2026年も実践的な内容を継続して発信します。今後ともICS MEDIAをよろしくお願いします。よいお年を！

ICS MEDIA