2023年、Web制作・デザインに役立つ記事の総まとめ
Post on:2023年12月27日
sponsors
2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, XD, Figma, VSCodeなどツール
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- フレームワーク・ライブラリ
- 無料素材
- 便利ツール・サービス
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではなく、アイデア出しに使用したり、簡単だけど時間がかかる作業などをAIにしてもらうことで、クリエイティブにより時間を割けるようになりました。
ChatGPTの仕組み、どのように機能しているか深く掘り下げて解説
- AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
- 注目のWebデザイン用AIツール！ テキスト入力でWebサイトやスマホアプリ向けのカラーパレットをすぐに生成 -AI Colors
また、CSSも大きく進化し、IEのサポートが終了した現在、ブラウザのサポートも充実し、モダンCSSによる実装ができるようになりました。
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
- 便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
- CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
- Appleデバイスの歴代モデルすべてを比較できて便利！ iPhone, iPadなどの画面サイズや機能のまとめ
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
UI/UX関連
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
2023年、UIデザインで人気のツールを調査 -UIデザインやプロトタイプでよく使用されるツール、UIデザイナーがAIをどのように使用しているのか
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
デザインのテクニック・インスピレーション
2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
- Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
- デザインの参考になる！ 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
- 最近のUIデザインのテクニックを解説！ より使いやすいボタンをデザインするときのポイント
Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration
Photoshop, XD, Figma, VSCodeなどツール
VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」
- 朗報！ Figmaでクロスデバイス間のコピーペーストができるようになったぞ！
- VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
- VS Codeのこのダークテーマ、コードが見やすい！ 色の一貫性を向上させ、見やすさを改善したテーマ -Darcula Dark
- Figmaですぐに使えるUIデザイン用のアイコン素材！ シンプルで、可読性を最大限に高めた4,000種類のアイコン
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
フォント・タイポグラフィ
2023年も新しいフリーフォントがたくさんリリースされました！ 2023年、日本語の新作フリーフォントのまとめ
Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適
Google Fontsからちょっと面白いフォントがリリース！ 商用利用無料、折れ線グラフや棒データを描くためのフリーフォント
- かわいいゴシック体の新作日本語フリーフォント「源暎ぽっぷる」 マンガや同人誌、動画にぴったり、柔らかい雰囲気で読みやすい
- プログラミング用フォントとUIデザインのどちらにも使える！ 美しさと読みやすさを兼ね備えたフォント「Martian Mono」
- 完全手書き文字のかわいいフリーフォント！ 楷書・行書・草書の三書体がセットになったペン字フォント -しょかきペン体楷行草
- 新作日本語フリーフォント「はっぴかな」がリリース！ お祭りをモチーフにした楽しいフォント、配置するだけで踊り出す
- 日本語の新作フリーフォントがリリースされました！ かもめをイメージしたオールドスタイルの明朝体「かもめ明朝」
- これは嬉しい！ 漢字がJIS第2水準までしっかり揃ったピクセルフォントがリリース、しかも商用利用も無料 -マルミーニャ
- VS Codeにお勧めのフォント！ 似た字形をはっきり区別でき、プログラミング向けに読みやすさを追求 -Commit Mono
- 商用利用も完全に無料！ 昭和にあった看板のようなレトロな雰囲気がかわいいフリーフォント -トレゴ
- 商用でも完全に無料！ レトロで温もりのあるかわいい日本語フリーフォント「しっぽり太ゴシック」「しっぽり太ゴチック」
- レトロな雰囲気がかわいい新作日本語フリーフォントがリリース、デザインやイラストに使いたい！ -ビルの谷間と高架下
- 読みやすくシンプルにデザインされた、美しいサンセリフフォント、コーディング向けフォントも揃ってます -Geist Font
- UIデザインに最適！ 文字サイズが小さくてもくっきりと美しいフリーフォント「Inter」が待望のバージョンアップ
Macでフォント管理におすすめのアプリ「Typeface App」、M1/M2完全対応、強力なフォント管理機能を備えた優れもの
2023年分を含む、フリーフォントの総まとめは下記からどうぞ。
配布中止になってしまったフォントもけっこうあったので、気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。
2024年用、日本語のフリーフォント686種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
カラー
2024年のトレンドカラーは癒やしのカラー！ やさしさに満ち溢れた桃色「ピーチファズ（Peach Fuzz）」、HTMLのコードは「#FFBE98」
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
- UIデザイナーは要チェック！ 2023年、WebデザインのUIにお勧めの配色トップ7
- Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
- UIデザインにも最適！ アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki
次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients
HTML
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
- divはボタンではない、ボタンの実装について知っておくべきすべてのこと
- HTMLにsearch要素が追加されたぞ！
- HTMLメールの最近の実装方法を解説、tableは不要になりました
- これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
- HTMLにおける自己終了タグの使用、歴史的背景、使用に対する賛否両論
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
CSS: 基礎知識
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説
- 2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
- CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説
- CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある
- CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説
- CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります
- CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
- CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
- CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
- CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
- 朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
- CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
- CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
- CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
- CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
- CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
- CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
- 朗報！ これでCSSネストの記述方法がより簡単になります
- レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSS: 実装テクニック
当ブログではこのセクションが一番多いですね。CSSの実装テクニック、新しいプロパティの使い方など、人気が高い記事が多いです。
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です
- CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
- 知っておくと便利！ CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
- 見た目はUIデザインによくある普通のボタン、でも触ると高電圧の電流が流れるエフェクトが美しくてかっこいい
- CSSで角丸を美しく実装する方法、相対角丸のテクニック
- CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用
- ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ
- これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック
- CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
- CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
- CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
- スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張
- CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
- CSSでスムーズなアニメーションを実現する4つの新しい機能
- CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます
- CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
- 知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
- CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
- CSSをコピペするだけで簡単に実装できる！ ディズニーからインスピレーションを得た、美しいローディング
- CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
- CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
- CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
- HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
- CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
- Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
知っておくと便利！ CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
JavaScript
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
フレームワーク・ライブラリ
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
- 全部、完全に商用利用無料！ さまざまなデザインが揃ってる、ランディングページ用のHTMLテンプレート -HTMLrev
- Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI
- ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS
- プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
- HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
- HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
- ターミナルのシンプルなUIが好きな人に！ モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
無料素材
商用利用無料、おしゃれでかわいいフリーイラスト素材の総まとめ: 海外編
- SVGとPNG完備のおしゃれなイラスト素材！ あらゆるメディアで完全無料で利用できる太っ腹ライセンス -Transhumans
- クリスタでも使える高品質なブラシ素材！ Photoshop 2023年夏の新作ブラシがAdobeから無料ダウンロードできます
商用利用でも完全に無料！ デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
- これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
- UIデザインに最適！ シンプルなSVGアイコン素材が7,000種類以上揃っていて、完全に商用利用無料 -Phosphor Icons
- 商用利用無料！ 医療・健康向けのUI用に美しくデザインされたSVGとFigmaのアイコン素材 -svg.health
- 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
便利ツール・サービス
- Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3
- 最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
- CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
- これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
- QRコードをデザインする新しい方法で、かなり自由にデザインしてQRコードを作成できるオンラインツール -QR code designer
- UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
- CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz
最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
sponsors
