2017年総まとめ:Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Post on:2017年12月26日
2017年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- WordPress, Bootstrapなどのフレームワーク
- 無料素材
- 便利ツール・サービス
- その他
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
- ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
- 2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
- プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ
- Web業界は進化が速い!自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all
- これ知っておかないと!Chromeのアドブロックで非表示にされてしまう広告の配置方法
- 納品ファイルをまとめるのが簡単に!更新分の抽出、ファイルリストの生成もできるWin, Mac対応の国産無料アプリ
UI/UX関連
- 最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
- UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
- デザインのアイデアが豊富!最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
- デザインするのを忘れがちなデザイン要素のまとめ
- 年々進化しているボタンをデザインするポイントを解説、デザイナーの追求に終わりの文字はない
デザインのテクニック・インスピレーション
- デザインは奥が深い!目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック
- これぞプロのデザインテクニック!簡単なのにすごい、アイコンを作るテクニックのまとめ
- アイコンのデザインって奥深い!最近のアイコンに使われている、シンプルなすごいデザインテクニック
- モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説
Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- 新しいPhotoshop CC 2018は、普段使う便利な機能もたくさん強化されている
- Adobe XD, Photoshop, Illustratorの注目情報が満載!Adobe MAX Japan 2017 フォローアップのまとめ
- Photoshopで一手間加えるとこんなに違う!思い通りのかっこいいノイズを加えたグラデーションやテクスチャの作り方
- Adobe XDの機能がいつの間にかこんなにも充実してた!Adobe XDとSketchの気になる機能を比較
- Adobe XDがどんどん便利になってる!Web制作に使える無料素材のまとめ
- SketchのファイルをWindowsで開くことができる無料アプリ -Lunacy
フォント・タイポグラフィ
- 2018年用、日本語のフリーフォント314種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 2017年にリリースされた日本語のフリーフォント、英語のフリーフォント総まとめ
- 日本語のフォントを使って、ロゴやタイトルをデザインする時のアイデアとすぐに役立つデザインのテクニック
- ココに注目!最近のロゴデザインに使われている、すごいデザインテクニックのまとめ -2017 Logo Trends
カラー
- 2018年のトレンドカラーは想像力に溢れるスミレ色「Ultra Violet(ウルトラ バイオレット)」
- 春向けのデザインやイラストに取り入れたい!2017年、春のトレンドカラーは爽やかな10色
- プロのデザイナーが実践している、最近のWebデザインで見かけるカラーを効果的に使ったテクニックのまとめ
- デザインにかなり使える!夕焼けから生み出された、高品質なグラデーション素材 -Sunset Gradients
HTML
- HTMLページのhead内に記述する要素の総まとめ
- 最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
- Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
- コーダーの仕事が楽になる!レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif
- HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css
CSS: 基礎知識
- 5分で完璧に分かる!CSS Gridの基本的な使い方を解説
- Webページのこれからのレイアウトテクニック!FlexboxとCSS Gridは一緒に使用してこそ価値がある
- CSS Gridを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか
- 2017年、CSSでこれをやりたかったが実現できる新しい3つのテクニック
- Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works
- CSS flexboxのレイアウトで困った時に使えるスタイルシートのテクニックまとめ
- 「calc()」を使うとスゴイ便利!ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
- CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
- Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
- marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック
- あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
CSS: 実装テクニック
- マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
- マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間
- ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ
- ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size
- 多様化したデバイスに対応!CSSで使いやすいブレイクポイントを的確に定義する方法
- レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック
- テキストが長いとレイアウトが崩れる!予期せぬコンテンツに対応するためのスタイルシートのテクニック
- レスポンシブ対応の最新版!サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ
- CSSの素晴らしいアイデアが満載!2017年スタイルシートを使ったテクニックのまとめ
- CSSの引き出しを増やしておこう!最近見かけたスタイルシートのアイデア・テクニックのまとめ
JavaScript
- Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
- これからは今まで以上に、jQueryが必要なくなるかもしれない
- JavaScriptは適切に利用することが大事!HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
- 目的にあったJavaScriptのライブラリを探す時にかなり便利、JavaScript専門の検索エンジン -searchlibs
- jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector
- 「position: sticky;」より便利!スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
WordPress, Bootstrapなどのフレームワーク
- かなりオススメ!WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local
- 商用利用無料、2017年おすすめの人気が高いWordPressのテーマファイルのまとめ
無料素材
- 日本の伝統や文化、四季の風物詩をピクトグラムで表現したアイコン素材 -日本の風習を伝える100のアイコン
- 知らないと損!新しいのがどんどん増えてる、商用無料の写真素材がダウンロードできるサイトのまとめ
- 無料で利用できるフリーのアイコンを探す時に、ブックマークしておきたいアイコンサイトのまとめ
- デザインやイラストで備えておきたい、Photoshopの商用無料おすすめブラシ素材のまとめ
- デジタルイラストに本気で取り組んでいる人向け、1,000を超えるプロ仕様のPhotoshopのブラシが全部無料!
- 商用利用無料!鳥獣戯画のカエルやサルやウサギが現代風に描かれたベクター素材 -ダ鳥獣ギ画
- ガーリーやゴシック系のデザインに使える!1,500種類以上のレース素材が無料でダウンロードできる -ダ・レース
- 創作にぴったり!異世界の魔法、武器、防具、道具、生き物をテーマにした無料のピクトグラムがなんと495種類も!
- ルーン文字が大好き! 魔法陣が大好物!そんなクリエイターにぴったりな商用利用無料の素材 -RuneAMN
便利ツール・サービス
- CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
- ダミー画像生成の真打ちとも言える高性能がすごい!オンラインなのにオフラインでも利用できてしまう -satyr.io
- 知っておくとかなり便利!Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
- デベロッパーツールの賢い使い方!テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
- なにこれ、スゴすぎる!ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
- ヤバイ便利すぎる!Googleが提供するすべてのアプリ・サービスを1クリックで利用できるChromeの機能拡張
- こんな便利なのがあったとは!Web制作者やデザイナー向け、macOS用のアプリとツール 総まとめ
その他
sponsors