2018年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Post on:2018年12月26日
sponsors
2018年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
- Web制作全般
- UI/UX関連
- デザインのテクニック・インスピレーション
- Photoshop, Illustrator, XD, Sketchなどの使いこなし術
- フォント・タイポグラフィ
- カラー
- HTML
- CSS: 基礎知識
- CSS: 実装テクニック
- JavaScript
- WordPress, Bootstrapなどのフレームワーク
- 無料素材
- 便利ツール・サービス
- その他
当サイトの購読は、RSS Feedを利用すると便利です。
※旧Feedに登録されている人がまだ多いので変更をお願いします。
Web制作全般
- Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
- 新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる
- フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
- コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS
- 2018年、日本国内を対象にしたブラウザのシェア、スマホや解像度やソーシャルメディアのシェア
UI/UX関連
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
- 2017年に注目されたインターフェイスデザインのトレンドを解説
- 最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
- 使いやすいフォームとは、心理学の原則に基づいたユーザビリティの改善方法
デザインのテクニック・インスピレーション
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
- 日本のWebデザインで見かける10個の特徴
- ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
- 最近のロゴに使われているデザインのトレンド、テクニックの総まとめ -2018 Logo Trends
- デザインは気づきが大切！デザインを見る目をどのように養えばよいのか
- デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
- 良いデザイナーになるために、最初に身につけておきたいデザインの基本の勉強方法
- デザインの基本: フォントのカーニングとは、カーニングの基本的なやり方
Photoshop, Illustrator, XD, Sketchなどの使いこなし術
Adobe XDの使い方をマスターしておこう！基本的な操作が10分で身につくAdobe公式のチュートリアルファイル
- 1分で分かる！Adobe Sensei, XD, Photoshop, Illustrator CC 2019の新機能のまとめ（ワークフロー効率化が中心）
- Photoshopの選択範囲の作成が驚くほど簡単に！CC 19.1のアップデートで、Adobe Sensei（人工知能）が使える
- Photoshopの次期バージョンに搭載される「コンテンツに応じた塗りつぶし」がすごすぎる！！！！
- Windowsで、Sketchファイルを開いて、編集・保存できる無料アプリが登場 -Lunacy
- 10分で分かる！Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編
- Adobe公式の最新版！Adobe XDで使用できるすべてのショートカットが一枚にまとめられたチートシート
- Webサイト・スマホアプリ制作に使用する、2017年に人気が高かったデザインツールの調査結果
フォント・タイポグラフィ
2019年用、日本語のフリーフォント368種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
※公開時より、10種類増えています！
- 2018年上半期、日本語の新作フリーフォントのまとめ
- 2018年下半期、日本語の新作フリーフォントのまとめ
- 日本語にも対応！自分で書いた文字からフォントを簡単に作成できる無料オンラインツール -Calligraphr
- 新しい仕様のフォントはもう試した？透明感のある美しい文字表現ができるフォント -Opulent Font + SVG
- 譜面や音楽系デザインに、音符などの演奏記号がすべて揃ったフリーの記譜フォント -Elbsound Music Font
- Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty
- Adobe CCユーザーは完全無料！新作フォント「貂明朝テキスト」、新ゴ・ロダンも含まれた日本語フォントのパックが登場！
カラー
シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール
- UIデザインに適した美しいグラデーションを簡単に作成できる無料ツール・無料素材のまとめ
- UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
- 配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax
- 17,530種類の色の名前がすぐに分かる無料の辞書ツール -color-names list
- 色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly
HTML
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
- HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
- TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta
- HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点
- SVGだから快適！スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック
CSS: 基礎知識
- カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
- margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法
- 最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ
- CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利！効果的に使用するポイントのまとめ
- normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化
- 知っていると便利な「calc()関数」の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など
- IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法
- 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説
- pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
- CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集
- CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック
- CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
- CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
- CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
- CSS Gridでレイアウトする時はこのプロパティが重要！「grid-template-*」と「grid-auto-*」の使い方を解説
- CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック
- CSSはもう新種のJavaScript
CSS: 実装テクニック
- 2018年、CSSベースのフレームワークのまとめ
- CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法
- CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
- 最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ
- Web制作者がチェックしておきたい、軽量で読み込みが速いCSSのフレームワークのまとめ
- パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
- 要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ
- 文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート
- 「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
- もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ
- CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる
- ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures
- 知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
- テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック
- レスポンシブ用に画像を配置するスタイルシートの5つのテクニック
JavaScript
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
- Webサイトやスマホアプリでよく使う、JavaScriptの有用なコードのスニペットのまとめ
- 独学の人には特にオススメ！JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル
- ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
- 実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
- 最新版のチートシート！Vue.jsのよく使用するイベントや構文がまとめられたフロントエンド制作者用チートシート
- 便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
- Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
- これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
- Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut
- Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples
- フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n
WordPress, Bootstrapなどのフレームワーク
WordPress 5.0のGutenberg（グーテンベルグ）についてよくある質問集
- Gutenbergの準備がまだの人に、WordPressのGutenbergを無効化する方法のまとめ
- BootstrapやAMPなどのテンプレートを簡単にカスタマイズできる無料の国産サービス -Framework Template Editor
- 新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ
- Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材にした無料素材 -Bootstrap Design System
- びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
無料素材
魔法陣が大好物な人に！複雑で美しい魔法陣を簡単に生成できるジェネレーター -Alchemy Circles Generator
- ビジネス系のイラストはおしゃれなのが無いと困っている人に！商用無料で使えるイラストのSVG素材 -unDraw
- かなりオススメ！商用利用無料のデザインに使いやすい写真素材がたくさん揃ってるダウンロードサイト -Moose
- 商用利用無料のネコの写真素材がいっぱいある！ -Pexels Cats
- こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
- もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons
便利ツール・サービス
Chromeの新しい機能拡張が便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug
- Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
- 便利すぎる！さまざまなデバイスのサイズを同時に確認しながら作業できる、Web制作の連携支援ツール -Solis
- めちゃ楽しい！この世界には存在しない異世界の地図を作り出すオンラインツール -Fantasy Map Generator
- 2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査
- 1クリックで、IE, Edgeをはじめ、さまざまなブラウザ・スマホなどの表示確認ができるChromeの便利な機能拡張
- デザイナー・カメラマンにおすすめ！大量の画像を効率的に管理できるWin, Mac, Linux対応の無料アプリ -Tia
- hostsファイルを1クリックで切り替え・管理ができるWin, macOS, Linux対応の便利な無料アプリ -SwitchHosts!
- Visual Studio Codeで見やすいテーマファイルのまとめ
- 1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css
その他
ノンデザイナーズ・デザインブック 20周年特別PDFは内容豪華で、応募者全員がもらえる
※応募期間は、2018年12月末までとなっています。
sponsors
