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

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

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

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

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

Web制作全般

Web制作者にとって今年一番の出来事は、IE11のサポートがいよいよ終わろうとしていることです。正式には2022年6月16日がその日ですが、現時点でGoogle検索をはじめさまざまなサイトやサービスでIE11のサポートが終了しています。

6月16日以降はWindows更新プログラムの適用後、IEを起動することはできなくなり、Edgeが起動されるようになります。EdgeのIEモードは、2029年までサポートされる予定。
参考: IE11サポート終了 – 発表に関連する FAQ

2021年版、Webデベロッパーのためのロードマップ

2021年版、フロントエンドとバックエンドのデベロッパーに必要なスキルやツールをまとめたロードマップ

レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状

レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状

UI/UX関連

UIとUXの印象がよくなるデザインの知識とテクニックのまとめ

2021年総まとめ、UIとUXの印象がよくなるデザインの知識とテクニックのまとめ

フォームを改善するUIのテクニックのまとめ

デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ

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

2021年、ロゴデザインのトレンド -2021 Logo Trend Report

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

グラデーションの真ん中辺りがグレーにくすんでしまうのを避ける方法

グラデーションの真ん中辺りがグレーにくすむのを避ける方法、美しいグラデーションを作成する方法

Photoshop, XD, Figmaなどの使いこなし術

Adobe恒例のバージョンアップは毎年の楽しみですが、PhotoshopとIllustratorがブラウザで利用できるようになるとは完全に想定外でした。また12月にはオンラインのモバイルデザインアプリAdobe Creative Cloud Express(要登録だけど無料)もリリースされ、さらなる機能強化も予定されています。

新ツールや新機能だけでなく、M1対応で起動が劇的に速くなったり、既存のバグが修正されるなど、今年のバージョンアップはかなりよかったです。

画像を「強化」して、スーパー解像度の画像に

Adobeの新機能「スーパー解像度」がすごすぎる!古い写真画像でも驚くほど美しく拡大できる

webpファイルをPhotoshopで開く・書き出すことができる機能拡張 -WebPShop

webpファイルをPhotoshopで開く・書き出すことができる機能拡張 -WebPShop

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

先週の公開からさらに追加、新作フォント90種類以上が追加されています!

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

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

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

新しい日本語フォントがたくさんリリースされてる! 2021年、日本語の新作フリーフォントのまとめ

カラー

2022年のトレンドカラーは「ベリーペリ(Very Peri)」

2022年のトレンドカラーはラベンダー「ベリーペリ(Very Peri)」、HTMLのコードは「#6667ab」

HTML

Webページ用のHTMLテンプレート

最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

コードを書く時に便利なVS Codeの機能拡張

2021年、VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利

CSS: 基礎知識

来年はCSSに大きな変化が起きようとしています。メディアクエリが登場した時のことを覚えている人も多いと思いますが、コンテナクエリが登場します。現在はブラウザのサポートが十分ではありませんが、エバーグリーンブラウザ(最新版に自動アップデートされるブラウザ)によりまもなく利用できるようになると思います。

CSS コンテナクエリの基礎知識と便利な使い方を解説

CSS コンテナクエリの基礎知識と便利な使い方を解説

CSSの数学関数min()、max()、clamp()の基本的な使い方

CSSの数学関数min()、max()、clamp()の基本的な使い方

CSS: 実装テクニック

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

CSS 中央揃えの実装テクニック

CSSの中央揃えで、最も万能で信頼できる実装テクニック

モダンCSSでよく使用されるレイアウトを実装するまとめ

モダンCSSでよく使用されるレイアウトを実装するまとめ

JavaScript

知っておくと実装に役立つ!JavaScriptのテクニックのまとめ

知っておくと実装に役立つ!JavaScriptのテクニックのまとめ

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

Tailwind CSSで実装されたUIコンポーネント・ページテンプレートのまとめ

Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました

モダンCSSリセットを徹底解説

モダンCSSリセットを徹底解説、最近のデバイス・モダンブラウザの仕様に対応

無料素材

商用プロジェクトでも完全に無料!医療・健康・医療機器・薬など、SVG完備のアイコン素材 -Health Icons

商用プロジェクトでも完全に無料!病院・医療・看護・健康に関するアイテムが揃ったアイコン素材 -Health Icons

 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

こいつ、動くぞ! 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

便利ツール・サービス

私も使用しており、当ブログでも好評だった「Eagle」の最新版が2021/12/17にリリースされています。大量の画像やフォントを整理・管理したい人にお勧めです!
買い切り型のアプリなのに、毎月アップデートされ機能が強化し、前回のメジャーアップデートも無料でした。

大量のフォントや画像を効率的に管理できるアプリEagle

フォントと画像の管理にはこれ!シンプルで使いやすい、WinMac両対応アプリ「Eagle」が神アップデート

レスポンシブの確認が簡単にできる無料ツール -Responsivize

レスポンシブデザインの確認に便利なツールが登場!複数のデバイスサイズで同時確認できる優れもの -Responsivize

sponsors

top of page

©2022 coliss