2016年総まとめ：Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Post on:2016年12月27日
sponsors
2016年、当サイトで公開した記事の中からPocketにたくさん登録された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- WordPress, Bootstrapなどのフレームワーク
- 無料素材
- 便利ツール・サービス
- その他
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
- 2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
- レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ
- レスポンシブデザインにすぐ使える！すごいアイデア30個
- Web制作の実装や勉強に役立つ便利なチートシートのまとめ
- Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
UI/UX関連
- ちょっとした動きを加えるとUIは魅力的になる！新感覚のアニメーションが気持ちいいUIデザインのまとめ
- UIデザインのアイデアに困った時、参考になるサイトのまとめ
- レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ
- 最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
- デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ
- 最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
デザインのテクニック・インスピレーション
- 最近のロゴデザインに使われている、すごいデザインテクニックのまとめ
- 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに
- Webデザインでよく使う要素やカラーやタイポグラフィに一手間加えて、マンネリ化から抜け出すデザインテクニックを解説
- デザインは一手間が大切！画像が見違えるほど魅力的になるデザインテクニックのまとめ
- デキるデザイナーはみんな使ってる！背景にすぐ使えるすごいデザインテクニックのまとめ
- 「そこ、スペース空いてるね」Webデザイナーとクライアントのあるあるがちょっと切ない
Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2015.5で進化した選択範囲とマスクの作成
- Photoshop CC 2017の気になる新機能のまとめ、Web制作者は要チェック！
- Photoshopの作業が快適になるオススメの環境設定 -Photoshop CC 2017対応
- Photoshopを使う時に欠かせない、絶対オススメのプラグイン・機能拡張のまとめ
- Photoshop CC2015を使いこなす定番テクニックから、あまり知られていない便利なテクニックまでのまとめ
- Photoshop CCの知ってると作業がサクサク快適になる時短テクニックのまとめ
- Adobe XDの私が大好きな便利な機能をすべて紹介します
- アドビ社お墨付き、プロのデザイナーがよく使うショートカットを一枚にまとめたPhotoshopとIllustratorのチートシート
- プロのデザイナーが実践している！PhotoshopでWebデザインを素早く、効率的にするための8つの方法
- Lightroomに絶対入れておきたい！すごい無料プリセットのまとめ
- UIデザイナーはしっかり押さえておきたい、Sketch 3.5の新機能とデザインフローのまとめ
フォント・タイポグラフィ
- 2017年用、日本語のフリーフォント260種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 文字を楽しむ！フォントの合字（リガチャ）やスワッシュの使い方
- 日本語フォントの書体の選び方・組み合わせ方、そしてデザインする日本語タイポグラフィのテクニック
- 持っている日本語フォントがそんなに多くなくても、文字デザインの表現の幅を広げる日本語フォントの組み合わせ方
- フォント名が分からない日本語・英語のフォントを検索できる無料サービスのまとめ
- 日本語フリーフォントの作者様に感謝！最近リリースされた日本語の無料フォントのまとめ
- 縦書きや擬音や魔方陣のフォント大集合！マンガや同人誌に無料で使える日本語のフリーフォントのまとめ
- デザイナーが持っていたい、Googleフォントおすすめ12選
- Googleフォントを使ったオススメの組み合わせ方
- Googleフォントの使い方: Webフォントの表示の仕組みと最適化
カラー
- 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！
- デザインやイラストにすぐに使える素敵なカラーをまとめたカラーパレット
- カラーのセンスがなくても大丈夫、効果的な色の組み合わせ方をやさしく解説
- 配色のセンスをアップする！アクセントカラーの選び方
- テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
- 色の組み合わせ方がよく分かる！さくっと簡単に使える便利なカラーツール -Color Calculator
HTML
- 最新版！あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート
- head内に記述する要素の総まとめ
- 高品質でしかも無料！すごい使えるレスポンシブ対応のHTML5/CSS3のテンプレートのまとめ
- 商用無料でしかも高品質！レスポンシブ対応、HTML5/CSS3で作成されたテンプレートのまとめ
- 最近のUIデザインが分かるレスポンシブ対応の高品質なHTMLのテンプレートのまとめ
- HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
CSS: 基礎知識
- CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
- Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
- よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル
- clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
- 最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ
- 知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
- レスポンシブ対応の文字サイズを指定するこれからのテクニック
- Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
- レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ
- CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
- レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks
- CSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル
CSS: 実装テクニック
- CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ
- 高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ
- フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに
- 実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ
- CSSが苦手なWebデザイナーが知っておきたい、デザインに関係するCSSのテクニックのまとめ
- レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
- メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
JavaScript
- 2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
- 最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ
- 最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ
- 最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ
- 2017年に注目しておきたい、JavaScriptのライブラリのまとめ
WordPress, Bootstrapなどのフレームワーク
- Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
- 総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト
- デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly
- WordPressで作成したサイトやブログを静的HTMLに変換するプラグイン -StaticPress
- WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ
- ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる
無料素材
- 商用利用無料、日本の伝統的な色使いが美しい和柄のパターン素材やテクスチャ素材のまとめ
- 美しい和柄のフリー素材がいっぱい！日本の伝統的な文様がシームレスにつかえるパターン素材 -Japanese Mon
- 紙・キャンバス・布・水彩・電子基板など高解像度で高品質なテクスチャ素材のまとめ
- ヴィンテージ デザインの時代ごとの使い方や特徴、無料素材のまとめ
- Photoshopで使い勝手のよい無料のパターン素材 660種類のまとめ
- これでもうアイコンには困らない！永遠に無料利用できる1,800種類のミニマルにデザインされたアイコン素材
便利ツール・サービス
- コードがはっきりと見やすく使いやすい！Sublime TextとAtomとVim対応のテーマ -DuoTone Themes
- Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ
- 2016年人気が高かった！CSSの制作、確認、検証に便利なオンラインツール厳選20個のまとめ
- FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
- 有料フォントの代替になるフリーフォントも見つかる！ブックマークしておきたいフォント関連の便利なサービスのまとめ
- Photoshopを使ってる人に今年一番の朗報！カラーのグループ化ができるようになる便利なスウォッチパネル
その他
sponsors
