2019年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Post on:2019年12月26日
sponsors
2019年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- WordPress, Bootstrapなどのフレームワーク
- 無料素材
- 便利ツール・サービス
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
2020年、最近注目されているWebデザインのトレンドと技術の進化
- 2019年、UIとUXデザインのトレンドを解説！デザインのテクニックやツール、ブラウザ、フォントも進化している
- デザイナーはコーディングを学ぶべきか？ 2019年変わりつつあるデザイナーとコードの在り方
- Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか
- ユーザーを欺く、UIで見かけるダークパターンのまとめ
UI/UX関連
- あなたはデザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can't Unsee
- ログインフォームは変わった方法で実装しないで！
- ソリッドとアウトライン、どちらのアイコンが認識しやすいか
- ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
- テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか
- スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
- フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
- UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
デザインのテクニック・インスピレーション
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
- プロのUXデザイナーから学ぶ！デザインをする時にグレースケールで始めると、デザインがよくなる4つ理由
- ノンデザイナーズ・ デザインブックがついに動画に！デザインの基本4原則と応用テクニックを分かりやすく解説
- 2019年最新版！最近見かけるロゴのデザインに使われているトレンドのまとめ -2019 Logo Trends
- UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
- UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント
Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- Photoshop 2020の新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
- Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ
- ついにこの時がきてしまった、、、Adobe Creative Cloudの価格改定が一斉に実施されています
- Adobe XD用の高機能な無料カラーツール、UIデザインに適した色の組み合わせを生成する優れもの -Color Designer
- Adobe系ソフトの代替ソフトウェアのまとめ、Photoshop, Illustrator, Lightroom, After Effectsなど
フォント・タイポグラフィ
2020年用、日本語のフリーフォント417種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
カラー
2020年の流行色・トレンドカラーは宵の空を連想させる「クラシックブルー」HTMLのコードは「#0f4c81」
- 色の組み合わせ方の参考にいい！Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color
- キャンセルボタンに色をつけてはいけない理由
- デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer
- 面倒な配色もこれなら簡単に！多くの人に見やすいUI用のカラースケールを生成する無料ツール -Geenes
HTML
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
- VSCodeを使いこなすための一歩、コードを書く時に知っていると便利なショートカットのまとめ
- VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック
- 管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
- HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
- よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
- サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
CSS: 基礎知識
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
- 知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法
- position: sticky;の仕組みや実際の使い方をやさしく解説
- CSS @supportsの知っていると便利な使い方のまとめ
- calc()以外にもCSSの数学関数が新しく増える！今度はサイン・コサイン・タンジェント sin(), cos(), tan() が追加
- CSS セレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet
- CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響
- Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート
- CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
- CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点
- CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
- CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方
CSS: 実装テクニック
最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS
- CSSリセット、2019年におすすめのカスタマイズ方法
- CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
- CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
- レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート
- Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
- CSSのデバッグは、けっこう難しい
- HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
- ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック
- div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui
- CSSファイルから未使用のスタイルを削除する方法
- 古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset
- CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
- 知っておくと役立つ！CSSの疑似要素:beforeと:afterを使用したUI要素を実装するテクニックのまとめ
JavaScript
- Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid
- モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
- この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
- ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
- JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
WordPress, Bootstrapなどのフレームワーク
WordPressを劇的に高速化、1秒以内に表示されるフロントエンドの構築方法 -Zero-latency WordPress Front-end
- 本当に簡単にできて驚いた！面倒な設定は一切不要、秒速でWeb開発用のサーバーが構築できる -Zero Server
- WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
- CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
無料素材
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
- UI用のアイコンが1,400種類以上！商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon
- これでもうモックアップ素材に困らない！スマホ、タブレット、デスクトップほとんどすべてのデバイスが揃ってる -Devices
- 各SNSで推奨されている画像サイズ・動画サイズのまとめ
- イラストやデザインの参考資料に！人物・動物・植物・デジタル機器・建物・家具などを図版化 -Dimensions.Guide
便利ツール・サービス
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで
- コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
- デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
- ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
- 「Remove.bg」が便利すぎる！1クリックで画像から背景だけを切り抜く、ついにPhotoshopに対応
- 簡単に描いた落書きから写真のようにリアルな画像を自動生成するツール -GauGAN
- Webサイト・アプリのページ構成を分析、サイトマップを自動的に作成するオンラインサービス -Visual Sitemaps
- デザイナーにおすすめ！大量の画像ファイルを収集・管理できるWindows , macOS対応のソフトウェア -Eagle
- レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
sponsors
