2015年総まとめ：Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Post on:2015年12月25日
sponsors
2015年、当サイトで公開した記事の中からPocketにたくさん登録された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, Illustrator, Sketchなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS
- JavaScript
- WordPress, Bootstrap
- 無料素材
- 便利ツール・サービス
- その他
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
- 2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望
- 2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ
- WebデザインやHTMLやCSSを基礎からしっかりと学べる動画コンテンツ、日本語解説だから分かりやすい！
- これからのWeb制作に役立つ、69個の有益で大切なポイントのまとめ -69 Website Design Tips
- 世界が注目している！クリエイティブがすごい日本のWeb制作会社・クリエイター集団のまとめ
- 2015年、このWebサイトのデザイン・アイデアは見逃せない！「Website of the Year」 -日本からも2つのサイトが受賞！
UI/UX関連
- 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
- Webデザインの勉強になる！有名ブランドサイトのスタイルガイドのまとめ
- レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説
- フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察
- Webデザインのすごいアイデアや細かいこだわりがいっぱい！素晴らしいUXを堪能できるサイトのまとめ
- 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
デザインのテクニック・インスピレーション
- デザインのこつが分かる！確実に身につけておきたいプロ直伝の50のデザインテクニック -Pro Design Tips
- デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック
- 目を引くアイキャッチ画像の作り方、50の作成事例とデザインのアドバイス
- デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ
- Webページのレイアウトに役立つ20のデザインテクニック
- Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ
- Webデザインのカラー、レイアウト、エフェクトなどのアイデアに困った時に時間をかけて見たいサイトのまとめ
- Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
- Web制作者はチェックしておきたい、面白いアイデアを使った最近のWebサイトのまとめ
- ロゴデザインには参考になるアイデアがいっぱい！2015年のロゴデザインのトレンドのまとめ -2015 Logo Trends
- デザインの勉強にいい！有名ブランドのガイドラインのまとめ
- 数学からデザインのインスピレーションを得よう！数学の美しさを楽しめるGIFアニメーションのまとめ
Photoshop, Illustrator, Sketchなどの使いこなし術
- Photoshopの使い方: 作業パフォーマンスを向上させる最適な環境設定のまとめ -CC2015対応
- 知ってると便利！Photoshopの作業効率をアップするTips
- あまり知られていないけど超便利！Webデザイナー向けPhotoshopのショートカットのまとめ
- Photoshopがもっと便利になるすごい機能拡張・プラグインのまとめ
- Photoshopで美しい背景をつくる！グラデーションやブラーの効果的な使い方が学べるチュートリアルのまとめ
- 何コレすごい！Photoshopの勉強になる！調整レイヤーがどのように機能しているかがまるっと分かる -Live_Curves
- ベジェ曲線が苦手な人に！PhotoshopとIllustratorのペンツールで思い通りに描けるようになる知って得する2つのこつ
- Sketchの使い方: 初心者がマスターしておきたいSketchでのデザイン作業がぐっと効率的になるチップス
- Sketchを更に便利にパワーアップするプラグインのまとめ
- 知らないと損！イラストの表現の幅が広がるSAIのブラシ設定のまとめ
- 人物・動物のイラストを描く時の参考になる！骨格や筋肉の仕組み、動きや表情などのイラストの描き方のまとめ
フォント・タイポグラフィ
- 2016年用、日本語のフリーフォント219種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- ヒエログリフ・トンパ文字・ルーン文字など、普通の人にはちょっと読めないフリーフォントのまとめ
- あの昭和の名作ドットフォント15書体が完全復活！JIS第2水準の漢字も揃ったフリーフォント -KHドットフォント
- Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる！ -Font Library
- 簡単にオリジナルのフォントが作成できて驚いた！英語や日本語や絵文字など紙に書いた文字からフォントがつくれるオンラインサービス -PaintFont
- フォント作成に詳しくなくても大丈夫、自分好みのフォントが簡単に作成できてしまうオンラインサービス -metaflop
カラー
- デザインやファッションに取り入れたい2015年のトレンドカラー、春のトレンドカラー16色は落ち着いたパステル！
- Webデザイナーはチェックしておきたい、最近のUIデザインで注目されているカラーのまとめ（スウォッチ付き）
- デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
- デザインやイラストで色の組み合わせを決める時の参考になるカテゴリ別100種類のカラーパレットのまとめ
HTML
- 無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
- シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
- divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
- High Performance HTML -さまざまなデバイスに配慮されたクリーンで簡潔なHTMLの書き方
- HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
CSS
- CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
- CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
- CSS: コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
- CSS: 写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ
- Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
- normalize.cssで使用されている各スタイルがどのように機能しているか解説
- reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
- CSS: フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック
- CSS: ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ
- CSS: Webページでよく利用されるテクニックに役立つ！使い方をしっかりマスターしておきたい便利な5つの疑似クラス
- CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説
- CSS: ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
- CSS: フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
- 2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
- CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ
- CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
JavaScript
- 2015年総まとめ、jQueryのプラグインとスクリプト100選
- レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
- 最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
- JS: 最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
- JS: Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
- jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
- JS: ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
WordPress, Bootstrap
- Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方
- Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用
- Bootstrapの商用利用無料のテーマがダウンロードできるサイトのまとめ
- 商用利用無料！Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ
- Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
- 着実に進化している！無料で利用できるWordPressのテーマのまとめ
- WordPressでかっこいいページが簡単に作成できる！レイアウトを組み合わせて直感的に作成できるテーマ -Layers
- WordPressでさまざまなタイプのかっこいいページが簡単に作成できるカスタマイズ性にも優れたテーマ -Optimizer
- WordPressの制作・公開・運用・セキュリティなどに関する重要なチェック項目のまとめ
- WordPressでしっかり設定しておきたいセキュリティやメンテナンスに役立つ.htaccessのまとめ
- 最新版！WordPressのブログやサイトの運営に役立つプラグインのまとめ
無料素材
- プロカメラマン仕様のPhotoshopのトーンカーブのまとめ -写真画像の自然光とカラーを美しく印象的に仕上げる
- 国内限定、商用利用無料のフリー素材の総まとめ -日本語フォント、写真素材、イラスト素材、マンガ素材など
- ブックマークしておきたい、いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
- 背景のデザインに迷った時に！これから使ってみたい背景素材のまとめ
- イラストやデザインが見違える！無料で使えるPhotoshopのブラシ素材のまとめ
- 無料アイコンを探す時に必ずチェックしたいダウンロードサイトのまとめ
- Photoshopでイラストやお絵描きする時にダウンロードしておきたい、無料で使えるPhotoshopのブラシ素材のまとめ
- Webページ・スマホアプリのユーザインターフェイスに楽しさを加える効果音や環境音などのサウンド素材のまとめ
- 日本の伝統的なデザインは美しい、和の柄や文様・和紙・折り紙・千代紙などの癒やし系素材のまとめ
- 商用利用無料、江戸情緒あふれる動物や生活小物を描いた浮世絵をベクター化した素材 -Ukiyo-e SVG
便利ツール・サービス
- こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ
- HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ
- うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
- レスポンシブ対応の変化するグリッドを各デバイスの見え方を確認しながら設計できるオンラインツール -Shoelace
- Web制作に役立つ便利すぎるブックマークレットのまとめ
- レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス
- Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
- これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
- 写真の勉強にいい！被写界深度とボケの作り方がよく分かり、レンズと被写体・背景の関係を学べるシミュレーター
- 地図が簡単に楽しく作成できる！世界地図をはじめ、日本を含めた各国の地図にも対応 -Pixel Map Generator
その他
- 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
- 表記ルール: 企業サイトで使用する「ひらく漢字」「ひらかない漢字」
- Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
- ブログやサイトのパフォーマンス改善やセキュリティ向上のためによく使う.htaccessの設定のまとめ
- Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど
- 自分のデザインのスキルがチェックでき、勉強にもなるクリエイティブなゲームのまとめ
- Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ
- すぐに実践したくなる！リンクがGoogleなどの検索エンジンのランキングにどのように影響を与えているか分かりやすく解説
当サイトのビジターの傾向はOSはWindows7、ブラウザはChrome、が多く、IEは11がメインの人が多かったです。UAは3年連続で変化が少ないですね。
Windows10はまだ僅かで、OS Xが増えた一年でした。
TwitterやFacebookからのビジターも増えました、ありがとうございます。
2016年も、どうぞよろしくお願いいたします。
sponsors
