2023年、Web制作・デザインに役立つ記事の総まとめ

Post on:2023年12月27日

2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。

2023年、Web制作・デザインに役立つ記事の総まとめ

当サイトの購読は、RSS Feedを利用すると便利です。

※旧Feedに登録されている人がまだ多いので変更をお願いします。

Web制作全般

2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではなく、アイデア出しに使用したり、簡単だけど時間がかかる作業などをAIにしてもらうことで、クリエイティブにより時間を割けるようになりました。

ChatGPTの仕組み、どのように機能しているか深く掘り下げて解説

ChatGPTの仕組み、どのように機能しているか深く掘り下げて解説

また、CSSも大きく進化し、IEのサポートが終了した現在、ブラウザのサポートも充実し、モダンCSSによる実装ができるようになりました。

2023年、CSSとUIの新しい機能のまとめ

これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ

テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

UI/UX関連

なぜダークモードにおけるグレースケールは難しいのか

UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方

2023年、UIデザインで人気のツールを調査

2023年、UIデザインで人気のツールを調査 -UIデザインやプロトタイプでよく使用されるツール、UIデザイナーがAIをどのように使用しているのか

UIデザインをより使いやすく改善する16の論理ルール

UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める

デザインのテクニック・インスピレーション

2023年、ロゴデザインのトレンド

2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ

UIのさまざまなアイデアを実現するための小さなディテールをコレクションしているサイト

Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration

Photoshop, XD, Figma, VSCodeなどツール

ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

1クリックでWebページを編集可能なFigma用に変換できるプラグイン -html.to.design

これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました

プロカメラマン仕様、Photoshopのトーンカーブのまとめ

プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる

フォント・タイポグラフィ

2023年、日本語の新作フリーフォントのまとめ

2023年も新しいフリーフォントがたくさんリリースされました！ 2023年、日本語の新作フリーフォントのまとめ

可読性・判別性に優れたGoogle Fontsのフォントのまとめ

Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適

折れ線グラフや棒データを描くためのフリーフォント

Google Fontsからちょっと面白いフォントがリリース！ 商用利用無料、折れ線グラフや棒データを描くためのフリーフォント

macOSでフォント管理におすすめのアプリ「Typeface App」

Macでフォント管理におすすめのアプリ「Typeface App」、M1/M2完全対応、強力なフォント管理機能を備えた優れもの

2023年分を含む、フリーフォントの総まとめは下記からどうぞ。
配布中止になってしまったフォントもけっこうあったので、気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。

日本語のフリーフォント 総まとめ

2024年用、日本語のフリーフォント686種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記

カラー

2024年のトレンドカラー「ピーチファズ（Peach Fuzz）」

2024年のトレンドカラーは癒やしのカラー！ やさしさに満ち溢れた桃色「ピーチファズ（Peach Fuzz）」、HTMLのコードは「#FFBE98」

デザインやイラストに最適な色を組み合わたカラーパレットを超高速に生成する無料ツール -Colour Palette Generator

超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator

すべての新しい色空間をサポートする新しいグラデーションツール -CSS HD Gradients

次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients

HTML

HTMLページのhead内に記述する要素の総まとめ

2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ

フォームのセレクトボックスで区切り線にhrを使用できるようになりました

地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました

ボタンの実装について知っておくべきすべてのこと

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

CSS: 基礎知識

CSSの:has()疑似クラスの便利な使い方のまとめ

朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ

CSS スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説

CSSの進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説

日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ

CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ

CSS: 実装テクニック

当ブログではこのセクションが一番多いですね。CSSの実装テクニック、新しいプロパティの使い方など、人気が高い記事が多いです。

デモのキャプチャ

CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました

CSS フクロウセレクタの効果的な使い方、要素を積み重ねる時のマージンにかなり便利

CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です

CSSで角丸を美しく実装する方法

CSSで角丸を美しく実装する方法、相対角丸のテクニック

CSS Flexboxで左と右の両端揃えにする実装テクニック

知っておくと便利！ CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック

CSSのかなり高度なテクニック -Expert CSS: The CPU HackCSSのかなり高度なテクニック -Expert CSS: The CPU Hack

CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack

JavaScript

JavaScriptの配列メソッド 総合ガイド

JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説

フレームワーク・ライブラリ

最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

無料素材

商用利用無料、おしゃれでかわいいフリーイラスト素材の総まとめ: 海外編

商用利用無料、おしゃれでかわいいフリーイラスト素材の総まとめ: 海外編

デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy

商用利用でも完全に無料！ デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy

これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons

これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons

便利ツール・サービス

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

CSSの便利なツールが登場！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できる -clamp() Calculator

最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

sponsors

top of page

©2024 coliss