2020年、Web制作・デザインに役立つ記事の総まとめ
Post on:2020年12月25日
sponsors
2020年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, Illustrator, XD, Figmaなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- フレームワーク・ライブラリ
- 無料素材
- 便利ツール・サービス
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
- 2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ
- IEでのブラウザ確認にまだ意味はあるのか？
- HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状
- アイコンデザイン 7つの原則、優れたアイコンをデザインするために
- 2020年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ
- 商用利用無料！オープンソースで利用できる、SVGアイコンのライブラリのまとめ
- 全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
- コードを書くのが楽になる！知っておくと便利なVS Codeの機能・設定のまとめ
- FlexboxのチートシートをCSSを書いている時に利用できるVS Codeの機能拡張
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
UI/UX関連
プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
デザインのテクニック・インスピレーション
最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説
- ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
- 最近注目されているニューモーフィズムの繊細なデザインでつくられたフォーム
- 最近のロゴのデザインに使われている、注目しておきたいデザイントレンドのまとめ -Logo Design Trends 2020
2020年最新版！最近見かけるロゴのデザインに使用されているトレンドのまとめ -2020 Logo Trends
Photoshop, Illustrator, XD, Figmaなどの使いこなし術
Adobe XD 2020年10月の新機能！ついにVisual Studio Codeと連携可能に
- Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
- WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
- 【朗報】Adobe公式からPhotoshopとFresco向けに、キース・ヘリングのタッチを再現した無料ブラシがリリース
- 1クリックで簡単！建物や建築物の写真画像をブループリント、青図にするPhotoshopのアクション
- 全部無料！Photoshopでダウンロードしておきたいプロ仕様のブラシ 2020年版がリリースされました
12/10にアップデートされたCLIP STUDIO PAINT Ver.1.10.5で、Photoshopブラシの読み込みが可能になりましたね。
Figmaで簡単に作成できる！ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ
フォント・タイポグラフィ
フォントが大好物な人は要チェック！2020年、日本語の新作フリーフォントのまとめ
- 商用利用無料、おしゃれな筆記体の英語フリーフォント・手書きの英語フリーフォントの総まとめ
- Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
- フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
2021年用、日本語のフリーフォント444種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
カラー
2021年のトレンドカラーは2色！太陽の輝き「イルーミネイティング」と信頼の「アルティメットグレー」
色の名前、日本語と英語での色の名前、伝統色の名前が分かるサイトのまとめ
HTML
- Web制作者におすすめ！VS Codeと同じエディタを使用した最強のコードスニペットマネージャーが登場 -massCode
- 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
- VS Codeの見やすいテーマが登場！GitHubのデザインでコードも快適に -GitHub VS Code theme
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
CSS: 基礎知識
- CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
- fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
- CSSファイルから未使用のスタイルを削除する4つの方法
- button要素のスタイルシート、最新テクニックを徹底解説
- 「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ
- CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説
- CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場
- CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
- CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
- flexプロパティの実践的な使い方を徹底解説
- しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方
- CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説
CSS: 実装テクニック
- WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技
- CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック
- CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
- CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ
- CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど
- これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
- Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
- TwitterのUIデザインで見つけたCSSのテクニックのまとめ
- レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
- CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
- Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
- CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説
- CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
- CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
- たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
- CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
- こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック
- よくあるデザインで起こる想定外のコンテンツに備える、CSSの実装方法のまとめ
- CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
- CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
- CSSで期待通りに表示されない根本的な原因の見つけ方
- シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック
- Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックのまとめ
- CSS Gridでレスポンシブ対応の代表的な5つのレイアウトを実装するテクニック
- Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
- これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか
FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ
JavaScript
JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ
- JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
- JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
- JavaScriptのスコープチェーン・変数参照の仕組みをGIFアニメで分かりやすく解説
- JavaScriptでエラーの原因となるHoisting（巻き上げ）、その仕組みをGIFアニメで分かりやすく解説
- JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
- CORSの仕組みをGIFアニメで分かりやすく解説
- 便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
- Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
- React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js
- 画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
- JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
とあるデベロッパーが、JavaScriptだけでどのようにしてAirDropを再現したか
フレームワーク・ライブラリ
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
- 同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
- 最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks
- シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
- 「STUDIO 3.0」が大型アップデート！コーディング作業は一切不要、国産の無料デザインツール
- Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
- Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ
- CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css
無料素材
ビアズリーやテニエルなど、19〜20世紀に活躍したイラストレーターの作品が無料でダウンロードできる -Old Book Illustrations
- 月のテクスチャ素材はNASAのが世界最高峰の高品質！10年に渡り収集したデータから作成された -CGI Moon Kit
- 商用利用無料！クリックするだけで、魔法陣を無限に組み合わせて生成できるジェネレーター -daisy bell
- 表情やポーズも変更できる、人物のイラスト素材が登場！商用でも完全無料の太っ腹ライセンス -Open Peeps
- 便利なイラスト素材が登場！表情や髪型、さまざまなパーツを組み合わせて使用できる人物イラスト素材 -Wrrooom!
Photoshopであらゆる画像をゴールドにする、黄金エフェクトが簡単に作成できる無料のアクション
便利ツール・サービス
レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App
- Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ
- 動画や映像、アニメーションGIFの背景を自動分析し、背景だけを削除できる無料オンラインツール -Unscreen
- レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
AppleのM1チップでVS CodeやPhotoshopは大丈夫？動作するmacOSアプリが分かるサイト
M1のMac miniが届いたので使用していますが、概ね問題ありません。Rosetta 2の互換性はすごいですね！ 不満点はThunderbirdが重すぎること（85.0b2にすると快適に）、Magic Mouse 2の接続が2,3回途切れることくらいでしょうか。
sponsors
