2022年、Web制作・デザインに役立つ記事の総まとめ
Post on:2022年12月28日
sponsors
2022年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, XD, Figmaなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- フレームワーク・ライブラリ
- 無料素材
- 便利ツール・サービス
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
2022年のもっとも大きなニュースは、IEのサポートが終了したことではないでしょうか。IEに苦しめられていたWeb制作者は非常に多いと思います。しかし、サポート終了になったので、今まで使用できなかったCSSの機能がたくさん使用できるようになります。
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
- コードを書く時にモニター1台で作業する利点、便利な機能とショートカットのまとめ
- CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相
- このダークテーマは目に優しく、コードも見やすい！ VS Codeのエレガントなモノクロームのテーマファイル -Sequoia
- VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
- VS Codeの新機能「スティッキー スクロール」がさらに便利に！ 追従行数の変更、関数やクラスをリスト化できます
- VSCodeの便利なショートカットが、短時間で身につく魔法のチートシート -VSCheatsheet
- 神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
- iPhone, iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes
- これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
- 11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などのまとめ
UI/UX関連
2022年、もっとも注目されたUIデザインのテクニックのまとめ
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.12
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ 8ビットのドットUI
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.14
- UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.15
デザインのテクニック・インスピレーション
2022年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
Photoshop, XD, Figmaなどの使いこなし術
これでもうPhotoshopの描画モードに迷わない！ 「乗算」「焼き込みカラー」など、各描画モードがどのように機能するか解説
- クリスタでも使える高品質なブラシ素材！ Photoshopの2022年新作ブラシがAdobeから無料ダウンロードできます
- クリスタでも使える高品質なブラシ素材！ Photoshopの2022年秋、新作ブラシがAdobeから無料ダウンロードできます
- 朗報！ Adobe Fontsの日本語フォントがついに600種類超えに、使用できる日本語書体一覧のPDF 2022年最新版
- なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
- 2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど
来年の大きなニュースになると予想されるのが、FigmaがAdobeに買収されてどうなるかかもしれません。大きな変更はないと思われますが、FigmaユーザーにもAdobeユーザ－にもよい方向に進んでくれるといいですね。
Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma
フォント・タイポグラフィ
- プロのデザイナーがお勧めする！ 2021年、お気に入りの英語フォント10選
- フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！
- 仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース
- VSCodeにおすすめのフォント！ OFLになったモリサワ BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」からスラッシュ付きゼロ対応版がリリース
フリーフォントの作者様に感謝！ 最近リリースされた日本語フリーフォントのまとめ -2022年上半期
2022年分を含む、フリーフォントの総まとめは下記からどうぞ。
今年はサイト閉鎖による配布中止になってしまったとこもけっこうあったので、気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。
2023年用、日本語のフリーフォント647種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
カラー
2023年のトレンドカラーは、よろこびに満ちた鮮やかなレッド「ビバ マゼンタ」、HTMLのコードは「#be3455」
HTML
2022年版、HTMLによるファビコン設定方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要
- Webページやアプリの実装に、知っておくと便利なHTMLの属性のまとめ
- モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
- HTMLだけでスマホのカメラにアクセスできるの知ってた？ 前面・背面カメラにアクセスできるHTMLのcapture属性
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
CSS: 基礎知識
下記は2022年の1月に公開した記事ですが、すべてその通りになりました。
新機能が登場しても基本がしっかり身についていれば、怖いことはありません。
- CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説
- CSS fit-contentプロパティの便利な使い方
- 現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ
- カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説
- CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
- CSSの:has()疑似クラスの便利な使い方を徹底解説
- CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
- これは朗報！ CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります
- CSSの実装はコンテナクエリで大きく変わる！ コンテナクエリをデベロッパーツールで検証およびデバッグする方法
- CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」
- レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
- CSSの:has()疑似クラスの便利な使い方のまとめ
- CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
- CSSの疑似クラスと疑似要素、:と::の違い
- CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
- 朗報！ CSSの新しい単位（lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決
- レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
- CSSの進化がすごい！ スタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
- 2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
今年もデベロッパーツールの進化がすごかったですね！
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
CSS: 実装テクニック
当ブログではこのセクションが一番多いですね。CSSの実装テクニック、新しいプロパティの使い方など、人気が高い記事が多いです。
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
- CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
- Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
- SVGとCSSを使用したUIコンポーネントの実装テクニック
- CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック
- これは覚えておきたい！ コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方
- CSSのレイアウトで、ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える
- 最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
- CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
- 知っておくと便利！ CSSでUIデザインを微調整する時短テクニックとプロセスを解説
- これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方
- 覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
- CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
- 最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ
- この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
- CSSで最後の要素にだけスタイルを適用させない、疑似クラス「:not()」と「:last-of-type」の組み合わせは便利
- CSSの最新テクニック！ シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
- CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか
- 知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
- CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート
JavaScript
- パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
- CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
- 最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
- Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js
フレームワーク・ライブラリ
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
- 2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
- 商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual
- シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
- JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI
- HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css
- これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball
- モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
- Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
- IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css
- CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
- ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
- Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Web制作者がチェックしておきたい！ 2022年版、CSSフレームワークのまとめ
無料素材
今年は、Notionが一番使用したツールかもしれません。使ってて楽しくなる手軽なカスタマイズがアイコンの変更です。
無料で使える！ Notion用のおしゃれでシンプルなアイコン素材サイトをまとめました
個人で配布されている素材は、ダウンロードできるうちにダウンロードをしておくことをお勧めします。
商用でも完全に無料！ 日本の美しい伝統文様のパターン素材、四季をテーマにした和柄のパターン素材 -Japanese Mon
- 全部、完全に商用利用無料！ UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons
- 全部、商用利用無料！ UIデザイン用のSVGアイコンが1900種類以上、デザインに合わせてカスタマイズも簡単な優れもの
- デザインに適したアイコンがこれで見つかる！ UIデザイン用のさまざまなアイコン素材をまとめて比較・カスタマイズ・ダウンロードできる -Iconer
- 商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
- 商用でも完全に無料！ WebサイトやアプリのUIに適したシンプルデザインで、SVG完備のアイコン素材 -Sargam Icons
- こいつ、動くぞ！ UIデザインでよく使用されるSVG完備のアイコン素材、しかもオープンソースで商用無料 -Potlab Icons
- 商用利用でも完全に無料！ デザインやイラストにぴったり、高解像度8Kのテクスチャ素材がいっぱい -ResourceBoy
- ブラウザのロゴを高解像度でダウンロードできる！ Chrome, Safariの現在のロゴをはじめ、IE, Netscapeなど古いのも
商用利用無料！ 浮世絵専門のイラスト素材、鳥獣戯画・花鳥画・美人画・妖怪・神仏・植物など4,300種類！ -Ukiyoe Stock
便利ツール・サービス
便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
- CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
- 最近のUIデザインで見かける、美しいCSSグラデーションのコードのまとめ -Design Gradients
- Web制作者におすすめ！ Win, Mac対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
- Web制作にすごい役立つ！ コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean
- 便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
- CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
- フォントや画像の素材管理には、WinMacで同期できるEagleが便利すぎる！ ver.3の神アップデートでさらに使いやすく
- ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
sponsors
