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

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

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

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

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

Web制作全般

Gitでよく使用するコマンドをGIFアニメで解説

Gitでよく使用するコマンドをGIFアニメで解説

ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説

Webページ高速化に必須の知識!ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説

UI/UX関連

UIデザインの印象を改善するデザインのテクニックのまとめ

プロのデザイナーに学ぶ!ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ

iPhone 12を含む、iPhoneデバイスのビューポートの一覧

iPhone 12で、ビューポートのサイズの種類が増えすぎ!デバイスの複雑さがUIの設計にどのように影響するのか

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

レスポンシブ対応のグリッド デザイン徹底解説

最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説

2020年のロゴデザインのトレンド

2020年最新版!最近見かけるロゴのデザインに使用されているトレンドのまとめ -2020 Logo Trends

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

Adobe XD 2020年10月の新機能

Adobe XD 2020年10月の新機能!ついにVisual Studio Codeと連携可能に

Figmaのワイヤーフレーム・フローチャート素材のまとめ

Figmaで簡単に作成できる!ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ

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

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

フォントが大好物な人は要チェック!2020年、日本語の新作フリーフォントのまとめ

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

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

カラー

2021年のトレンドカラーは「イルーミネイティング」と「アルティメットグレー」で

2021年のトレンドカラーは2色!太陽の輝き「イルーミネイティング」と信頼の「アルティメットグレー」

色々な色の日本語での名前、英語での名前が分かるサイトのまとめ

色の名前、日本語と英語での色の名前、伝統色の名前が分かるサイトのまとめ

HTML

知っておくと便利なHTML5の機能、要素や属性のまとめ

知っておくと便利なHTML5の機能、要素や属性のまとめ

フロントエンドのデベロッパーが2021年に向けて注目すべきこと

フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと

CSS: 基礎知識

モダンブラウザに適したCSSリセットのまとめ

2020年、モダンブラウザに適したCSSリセットのまとめ

知っておくと便利なCSSのプロパティのまとめ

2020年、知っておくと便利なCSSのプロパティのまとめ

CSS: 実装テクニック

CSSを最適化してページの読み込み時間を高速化する方法

CSSを最適化してページの読み込み時間を高速化する方法

FlexboxとCSS Gridの使い分け方

FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ

JavaScript

JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ

JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ

とあるデベロッパーがJavaScriptだけを使用してAirDropを再現した方法

とあるデベロッパーが、JavaScriptだけでどのようにしてAirDropを再現したか

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

レイアウトやUI要素のCSSでの実装コードのまとめ -CSS Layout

よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout

無料素材

19〜20世紀に活躍したイラストレーターの数千の作品をダウンロード

ビアズリーやテニエルなど、19〜20世紀に活躍したイラストレーターの作品が無料でダウンロードできる -Old Book Illustrations

金ピカアフターの画像と元画像

Photoshopであらゆる画像をゴールドにする、黄金エフェクトが簡単に作成できる無料のアクション

便利ツール・サービス

レスポンシブの確認に便利なツール「Responsively App」

レスポンシブの確認がこれで快適に!複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App

AppleのM1チップで動作するmacOSアプリがこれで分かる

AppleのM1チップでVS CodeやPhotoshopは大丈夫?動作するmacOSアプリが分かるサイト

M1のMac miniが届いたので使用していますが、概ね問題ありません。Rosetta 2の互換性はすごいですね! 不満点はThunderbirdが重すぎること(85.0b2にすると快適に)、Magic Mouse 2の接続が2,3回途切れることくらいでしょうか。

sponsors

top of page

©2021 coliss