2024年、Web制作・デザインに役立つ記事の総まとめ
Post on:2024年12月26日
sponsors
2024年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, XD, Figma, VSCodeなどツール
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- フレームワーク・ライブラリ
- 無料素材
- 便利ツール・サービス
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
2024年の大きなニュースの一つは、CSSの進化です。IEのサポート終了にも慣れ、モダンCSSの新機能も今までよりも早くブラウザのサポートが充実するようになりました。また、AIが思っていたほど活躍はしなかったというのは正直な感想です。コードやプログラミング関連よりもイラストや画像・動画関連の開発が進んでいるように思います。
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
- CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい
- CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
- Chrome 121で新しく追加された6つのCSSの機能
- Chrome 122で新しく追加された3つのCSSの機能
- Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
- Chrome 123で新しく追加された5つのCSSの機能
- Chrome 125で新しく追加された4つのCSSの機能
- Chrome 127で新しく追加された3つのCSSの機能
- Chrome 128で新しく追加された4つのCSSの機能
- Chrome 129で追加されたCSSの2つの新機能
- Chrome 130で新しく追加された4つのCSSの機能
- Chrome 131で新しく追加された8つのCSSの機能
- CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります
UI/UX関連
- WebサイトやスマホアプリのUIで見かけたさまざまなアイデアを実現するディテールのまとめ -CallToInspiration
- Webサイトでよく使用されるUIコンポーネントをコピペで簡単に実装できる -IndieUI
- UIデザインに奥行きを効果的に取り入れるテクニックを解説 -Designing Depth
iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴
デザインのテクニック・インスピレーション
グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator
2024年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
Photoshop, XD, Figma, VSCodeなどツール
2024年最新版、Adobe PhotoshopやIllustratorの新機能をまとめたPDFを無料でダウンロードできます
クリスタやProcreateでも使える高品質なブラシ素材！ Photoshop 2024年春の新作ブラシがAdobeからダウンロードできます
この本を読んだら、Stable Diffusionで画像生成を思い通りにできるようになった！ かなりお勧めの解説書です
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
フォント・タイポグラフィ
2024年、日本語の新作フリーフォントのまとめ！ 今年も新しいフリーフォントがたくさんリリースされました
ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ
- ピクセルフォントが好きな人に！ JIS第1・第2水準漢字まで揃った、かわいさ全開の丸文字ピクセルフォント -マルミーニャＭ
- 商用利用も完全に無料！ これはすぐに使いたくなる、オールドスタイルの美しいフリーフォント -築豊35ポイントゴチック
- 商用無料、新作フリーフォントがリリース！ 柔らかで穏やかな、紙面を彩る見出し用ゴシック体「紙モノゴシック」
- 商用無料、新作フリーフォントがリリース！ レトロでロマン溢れるかわいいフォント「になロマン」
- 新作のかわいい日本語フリーフォントが登場！ 鳥のくちばし要素とたまご要素が満載「くちばしフォント」
- 商用利用無料！ 極太フォントでかわいい、漢字も揃っているキウイ皮ごと囓るのフリーフォント「ポプらむ☆キウイ」
- マンガや同人誌にぴったりなフリーフォント「GL-ノバンチカ源」 濁点・半濁点つきの仮名、小書き仮名、記号文字が盛りだくさん！
- 商用無料、新作フリーフォントがリリース！ かわいいデザインにぴったり、女子校生の書き文字風フォント「ninaSchoolgirl」
- ゴシック体の素晴らしい世界が広がる！ 商用利用無料、可読性に優れたフリーフォント「永代ゴシック」がリリース
- 商用利用も無料、新作の日本語ビットマップフォントがリリース！ かわいいデザインにぴったりな「ノンビットフォント」
- かわいくて、ちょっと面白いフリーフォント！ 商用利用も無料、積み木を重ねたようなフォント -ブリジング
- 商用利用も無料！ これはすぐに使いたくなる、美しい丸ゴシック体のかわいいフォント「とよまーる」
- 最強少女！ 新作の日本語フリーフォントが登場、強気な女の子をイメージしたヤンチャなフォント -ストロングガール
- ほくほくのフライドポテトのようなかわいいフリーフォント -ポテジフェイス
- お蕎麦みたいな線でデザインされた面白いフォント「そばとうどん」
- くるんとした愛嬌があるかわいいフォント「くるん・デコ」
Helveticaに似たオープンソースの無料フォント -Overused Grotesk（異世界のHelvetica）
2024年分を含む、フリーフォントの総まとめは下記からどうぞ。
配布中止になってしまったフォントもけっこうあったので、気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。
2025年用、日本語のフリーフォント741種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
カラー
2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」、HTMLのコードは「#A47864」
相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
HTML
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
CSS: 基礎知識
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ
CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
- ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説
- コンテナクエリに基づく相対単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を解説
- 相対単位が主流の現在、絶対単位（px, in, mmなど）は特定のケースで非常に役立ちます
- HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
- CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる
- これは朗報！ CSSだけで関数とミックスインが使えるように
- CSSの:has()疑似クラスの便利な使い方
- CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる
- フォーム要素の縦書きモードがすべての主要ブラウザでサポートされます
- プロパティの値に無効な値を設定する（IACVT）とどのように処理されているのかを解説
- CSSの詳細度について、よくある誤解を解説
- CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
- CSSでdisplay:none;からアニメーションができる！ @starting-styleがすべてのブラウザにサポートされました
- ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります
2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など
CSSの新しい公式ロゴが誕生しました、メインカラーに採用されたレベッカパープルの知られざる感動秘話
CSS: 実装テクニック
当ブログではこのセクションが一番多いですね。CSSの実装テクニック、新しいプロパティの使い方など、人気が高い記事が多いです。
- これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
- CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
- CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
- そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
- CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
- マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
- CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
- Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
- CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
- フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
- CSSでラジオボタンとラベルの間にスペースを加えると、関連付けがうまくいかないときの対応方法
- CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も
- これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説
- CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
- CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる
- これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
JavaScript
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
フレームワーク・ライブラリ
- 商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
- CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
- CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
- HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
- HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
- シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css
- HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit
無料素材
商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
- 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
- SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
- UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
- UI用にデザインされた、かなり珍しいアイソメトリックのアイコン素材！ 商用利用無料、SVGやFigmaも揃ってる -Isocons
- aaa
- 地味に役立つ！ 手描きでさまざまな形状がいい感じ、200種類以上の矢印・アローのSVG素材 -Handy Arrows
- WebサイトやスマホアプリのUIに！ 抽象的で美しいSVGの背景デザインを簡単に作成できる無料ツール -Mossaik.app
- UI用のアニメーションがかわいくて楽しい！ 商用利用も無料、アニメーションで動くアイコン素材 -pqoqubbw/icons
商用利用無料、デザインやイラストでかなり使える繊細な透過テクスチャ素材 -Transparent Textures
商用でも完全に無料！ 日本や世界の古地図にインスピレーションを得て作成されたブラシ素材 -Fantasy Map Brushes
便利ツール・サービス
- PDFファイルの内部構造とAcrobatで巨大なPDFを作成する方法も解説
- AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
- Bartenderの代替に！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ -Ice
- CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
- WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
- これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
- 美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR
- これは便利なVS Codeの機能拡張！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!
素材管理アプリEagleが、便利すぎる！ ver.4は想像以上の神アップデート、プラグインやAIツールの導入でさらに使いやすく
sponsors
