画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。

もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。
また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。

September 01, 2020 更新

リンク切れサイトを削除しました。(100サイト以下に縮小しました...。)

January 16, 2016 追記

新たに5サイトを追加して100以上になったため、エントリータイトルを「webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100」から「webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100+」に変更しました。

  • DevDocs API Documentation
    HTMLやCSSはもちろん、jQuery・Angular.js・PHP・Pythonなど様々なドキュメントがまとめられています。
    検索機能もついているので調べたい内容を検索することもでき、横に並んでいるリストを自分好みにカスタマイズすることなどもできます。
  • 開発者向けのウェブ技術 | MDN
    MDN(Mozilla Developer Network)内にあるWeb技術ドキュメントに関してまとめられているページです。
    例えばCSSであればそのプロパティの概要をなどが図やサンプル付きで解説されており、その他にもW3Cの仕様ページヘのリンクや各種ブラウザの実装状況などについても掲載されています。
  • CSS Reference | Codrops
    ハイクオリティなデモを多数掲載することでも有名な「Codrops」で公開されているCSSリファレンスです。
    全て英語にはなってしまいますが、実際の動きを確認できるサンプルや「Can I use」を利用してブラウザの対応状況なども併せて掲載しています。
  • Browserhacks
    各種ブラウザで利用できるCSSやJSのハックがまとめられており、それらがそれぞれどのバージョンから利用できるのかなども記載されています。
  • Can I use... Support tables for HTML5, CSS3, etc
    CSS・HTML5・SVG・JS APIの各ブラウザ対応を確認することができます。
    それぞれどのバージョンで使えるかやプレフィックスの有無など容易に確認できます。
  • CSS3 Generator
    ちょっと古いものなので現在ではもう記述する必要ないようなプレフィックス付きで出力されてしまいますが、角丸・グラデーション・シャドウなどCSS3関連のジェネレータがまとめられています。
    これからCSSを勉強する人には、とりあえずこの見栄えを再現するためにどのようなプロパティを使ったりするのか見たりできて良いかもしれません。
  • イージング関数チートシート
    その名の通り、それぞれのイージングがどのようなアニメーションになるのかを容易に確認することができます。
    気になるものにマウスオンすれば動きを見れるだけでなく、クリックすればCSS・SCSS・JavaScriptそれぞれでどのように記述すれば良いのかも確認できます。
  • プログラマーのためのネーミング辞書 | codic
    CSSのクラス名やJSの関数名など命名に困った時に便利なツールで、日本語で入力するとそれらに利用できそうなネーミングを出力してくれます。
    また、EclipseやSublime text 3などでより簡単にこれを利用できるようするプラグインなども用意されています。
  • CodePen
    コード共有サービスで、ちょっとした動きを確認したい時にも便利なサイトです。
    HTML・CSS・JavaScriptなどで作られたクオリティ高いサンプルを見て勉強できたり、アカウントを作れば自分用のスニペット置き場みたいな使い方もできます。
    また、作ったものを埋め込んだりするのも簡単にできるので、技術ブログでのサンプルとして設置したりもできます。
  • Codrops | Useful resources and inspiration for creative minds
    HTML・CSS/JavaScriptなどを使って実装するクオリティ高いチュートリアルが多数あります。
    かっこいい動きにしたいとかあまり他では見ない動きにしたい時などに見ると参考になります。
  • CodyHouse - Free HTML, CSS, JS nuggets
    こちらも同じくクオリティ高いチュートリアルが多数あります。
  • LittleSnippets.net – A free collection of CSS3/HTML snippets. New entries crafted and added daily.
    CSS3/HTMLを使った様々なスニペットがまとめられており、一覧でCodePenを表示させているので動きやコードもすぐに確認できます。
    ホバー時のエフェクトが多めなので、ホバー時に何か動きをつけたいなと思った時に見ると面白い動きが見つかるかもしれません。
  • Specificity Calculator
    セレクタを記述することでCSSの詳細度を表示してくれます。
  • NTH-TEST | nth-child and nth-of-type Tester
    CSSのnth-childnth-of-typeを利用する際、どのように記述することでどれが対象になるのか(例えば3n+2と記述した場合にどれが対象になるか)を容易に確認することができます。
  • Really Quick Responsive Web Design Calculator
    上のフィールドには子要素の幅、下のフィールドには親要素の幅という形でそれぞれ入力すると、その子要素の幅が親要素の幅に対して何%の割合なのかを表示してくれます。
  • px-em | px to em Calculator
    上のフィールドには親要素のフォントサイズを、下のフィールドには子要素のフォントサイズをそれぞれpxの形で入力すると、一番下に子要素でどのようにem指定すればpxで指定した時と同じサイズを表示させることができるのかを表示してくれます。
  • PXtoEM.com: PX to EM conversion made simple.
    こちらもフォントサイズのサイズについて調べたい時に便利なツールで、例えば13pxというフォントサイズの時にem, %, pointだとそれぞれどのような値になるのかを容易に確認できます。
  • CSS Ruler • Explore CSS lengths.
    px, em, rem, ptなど、ブラウザ上で各単位の長さがどれくらいなのかを確認することができます。
  • Autoprefixer CSS online
    必要なベンダープレフィックスを追記したCSSを出力してくれます。
  • SassMeister | The Sass Playground!
    Sassで入力した内容をリアルタイムでCSSに変換して表示してくれます。
    ちょっと試した時やSassの勉強したい時に便利です。
  • Javascript Beautifier and Formatter Online
    圧縮されたJavaScriptを読みやすい形に整形してくれるツールで、入力フィールド右にある各種項目で、出力方法の形を任意のものに変更することができます。
    また、ここではJavaScript版として紹介しましたがHTMLやCSS版も用意されており、それらはページ上部にあるナビからそれぞれ利用できます。
  • Online JavaScript beautifier
    同じく圧縮されたJavaScriptを読みやすい形に整形してくれるツールです。
  • すぐに使える便利なWEBツール | Tech-Unlimited
    URLエンコード、特殊文字変換、.htpasswd生成、パスワード生成、カラーコード変換など、制作時に便利なツールがいろいろと集められているサイトです。
    他にもドメインのWHOIS情報を検索できたり、Excelの表をHTMLのテーブルタグに変換してくれるツールなんかもあります。
  • Webツール | SYNCER
    「SYNCER」さんではブログ記事の他にも“趣味のプログラミングで作ったちょっと便利なツール集。”ということで、様々なツールやチェッカーを公開しています。
    制作というよりは全体的にソーシャルに関する内容が多めですが、使い方などももちろん全て日本語で丁寧に説明があるのでわかりやすいです。
  • .htaccess Snippets
    その名の通り、.htaccessに関するスニペットがまとめられています。
  • .htaccess ファイルを簡単作成「.htaccess Editor」
    ベーシック認証、エラーページ設定、リダイレクトなどといった.htaccess関連の記述を容易に出力させることができます。
  • パスワード生成(パスワード作成)
    ランダムなパスワードを表示してくれるサイトで、文字の種類や数など任意でオプションを決めることもできます。
    見た目が似ている英数字は省くとか8文字以内の場合に同じ文字は2回以上使わないといった地味に嬉しい機能もついています。
    また、他にも「文字数 カウント(文字バイト数チェック)」や「メールアドレス暗号化(メール暗号化ツール)」といったツールも公開されています。
  • Recalll - Video first knowledge engine
    日本語では利用できませんが、調べたい内容を入力するとw3schoolsやStack Overflowといったサイトを横断検索して解答を表示してくれます。
  • web計。
    数値を入力するだけで、簡単に黄金比や白銀比を確認することができます。
    また画像の比率以外にも指定した横幅・画像数・マージンをそれぞれ入力すれば、画像をどれくらいのサイズにすれば収まるかなどの計算ツールもあります。
  • Compressor.io - optimize and compress your images and photos
    JPG・PNG・GIF・SVGといったひと通りの画像ファイルを圧縮・軽量化してくれるツールです。
  • TinyPNG – Compress PNG images while preserving transparency
    PNGを圧縮・軽量化してくれるツールで、PNGとなっていますがJPGも利用できます。
  • Bulk Resize Photos
    複数の画像を一括でリサイズすることができるツールで、まだ自分ではそこまで大量の画像をあげたことがないのでわかりませんが、60秒間に最大150枚の画像をリサイズできるそうです。
    リサイズ後にどれくらいの大きさにするかの指定も可能で、幅や高さをそれぞれ指定する以外にもスケール指定でサイズを決めることもできます。
  • Font Library | An open source project to tag and organize Google Fonts.
    フォントの特徴が記載されたタグでソートすることで、Google Fontにある目的のデザインフォントを容易に探せるようにしたサイトです。
    各フォントにクリックすれば、それぞれGoogle Fontの詳細ページに飛ぶことができます。
  • DaFont - Download fonts
    欧文フォントを探そうとしている時にとりあえず見にくるサイトです。
    もちろん商用利用など規約の確認は必要になりますが、膨大な数のフリーフォントがあります。
  • modulator | metaflop
    ベースとなるフォントを指定し、丸みやシャープさなどを自分で調整してオリジナルフォントの作成をweb上で行うことができます。
  • wordmark.it - helps you choose fonts!
    インストールしているフォントを一覧化してくれるサービスで、任意で入力した文字でプレビューさせることもできます。
    また、フォントサイズを変更したり、デフォルトで白背景に黒文字となっているものを反転させて確認することなどもできます。
  • WhatTheFont! « MyFonts
    画像をアップロードすると、その画像に使用しているフォント(または近いフォント)を教えてくれます。
  • Wordpress Theme Development Cheatsheet » Codeclown
    目次下に書かれているようにしばらく更新されていないので注意も必要ですが、WordPressのテーマ作成時によく記述するようなものがシンプルにひと通りまとめて掲載されています。
  • GenerateWP - User friendly tools for WordPress developers
    カスタム投稿タイプやタクソノミーなどのようにWordPressをカスタマイズする際に必要なコードを出力してくれます。
    その他WP_Querywp-config.phpのコードを生成してくれるものもあります。
  • The WordPress Template Hierarchy - a visualization resource
    WordPressのテンプレート構成をチャート化したもの。
    そういうプラグインとかもありますけど、自分が思ってたのと違うテンプレートが呼び出されてしまっている時などに確認すると、実はこのテンプレートが呼びだされているとかを確認したりできます。
  • Cheat Sheet
    使いこなせば爆速でコーディングできることでご存じの方も多いと思うEmmetのチートシートです。
  • Brackets Shortcuts · adobe/brackets Wiki · GitHub
    Bracketsのショートカットチートシートです。
  • Sublime Text | Periodic table of the Keyboard Shortcuts.
    Sublime Textのショートカットチートシートです。
  • Atom Editor Cheat Sheet
    Atomのショートカットチートシートです。
    正直現状ではAtom使ってないんですけど、今後使う可能性もあるので一応メモしてます。
  • Regular Expressions Cheat Sheet
    正規表現についてのチートシートになります。
  • jQuery Cheat Sheet
    jQueryのチートシートで、ページ上部のプルダウンでバージョンを選択すると、そのバージョンで使えないものに打ち消し線が入ります
  • The Ultimate Adobe Creative Cloud Keyboard Shortcuts Cheat Sheet - Make A Website Hub
    IllustratorやPhotoshopなど、Adobe CCのショートカット一覧のチートシートがまとめられています。
    また、必要であればPDFをダウンロードすることもできます。
  • Adobe Photoshop, Illustrator and InDesign Keyboard Shortcut Visualiser | FastPrint.co.uk
    同じくデザインツールのショートカットチートシートで、Photoshop・lustrator・InDesignの各種ショートカットがまとめられていて、Win用やMac用などの切り替えもできます。
    また、それらを壁紙としてダウンロードすることもできます。
  • Coverr - Beautiful, free videos for your homepage
    CC0ライセンスの動画を配布しているサイトで、カテゴリーなども用意されています。
    素材として使わせてもらうだけでなく、動画に関連するようなテストを行う際などにも使えますね。
  • Lorem Picsum
    ハイクオリティなダミーイメージを手軽に利用することができます。
  • Unsplash Source | A Simple API for Embedding Unsplash Photos
    ハイクオリティなイメージを配布するUnsplashが公開したAPIで、多数のダミーイメージを用いて何か行いたいときに便利そうです。
  • Placehold.it - Quick and simple image placeholders
    ダミーイメージを手軽に表示でき、サイズ指定やそのサイズを表示させたりができます。
  • すぐ使えるダミーテキスト - 日本語 Lorem ipsum
    日本語用のダミーテキストジェネレータで、夏目漱石「私の個人主義」や宮沢賢治「セロ弾きのゴーシュ」などが用意されています。
    パラグラフ毎の文字数やアルファベットの半角・全角指定などできるオプションもあります。
  • Lorem Ipsum HTML Generator: Free & Simple Tool
    こちらはダミーテキストをHTML付きでコピーすることができるサイトで、ナビゲーションやリストなどのよく利用しそうな記述が揃っています。

上でダミーのイメージやテキストを利用する際に便利なサイトを幾つか紹介しましたが、「サイト制作時に便利なダミーテキスト & ダミー画像生成ツール」でもこのようなサイトを幾つかまとめているので、興味ある方はこちらもご覧ください。

  • Color Hunt
    様々な配色パターンが並べられているギャラリーで、マウスオンでそれぞれのカラーコードを確認することもできます。
  • uiGradients - Beautiful coloured gradients
    美しいグラデーションカラーが多数まとめられており、CSSで表示させるためのコード確認もできます。
  • NIPPON COLORS - 日本の伝統色
    こちらは日本の伝統色を一覧化したサイトで、表示されたカラーはHEX・CMYK・RGBの値をそれぞれ確認できます。
  • ColorFavs
    イメージをアップロードすると、そのイメージで使用されているカラーを使ったパレットを生成してくれます。
    それぞれのカラーはカラーコードの確認もできますし、他の人が作ったパレットやカラーを見ることもできます。

上でカラーに関する便利なサイトを幾つか紹介しましたが、「配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ」でもこのようなサイトを幾つかまとめているので、興味ある方はこちらもご覧ください。

  • ぱくたそ - フリー写真素材・無料ダウンロード
    やはり面白いタイプの写真が目立ちますが、普通にデザインでも使えるような高品質で素敵な写真素材が多数あります。
    なんだかんだで国内の写真素材サイトでは間違いなく一番利用させてもらっていると思います。
  • おしゃれなフリー写真素材|GIRLY DROP(ガーリードロップ)
    サイト名にあるように、おしゃれでガーリーな写真素材を多数配布しているサイトです。
    ターゲットが完全に女性向けのものだったりするデザインに限ってはとりあえずガリドロを見に来て、たとえ後で差し替えるようなダミーイメージでもあってもガリドロのイメージを使わせてもらうことが多いです。
  • 無料写真素材・フリーフォト検索|O-DAN(オーダン)
    世界の無料写真素材サイトを日本語で横断検索することができるサイトです。
  • Unsplash | High-Resolution Photos
    ハイクオリティな写真素材が数多くあることや更新も割と頻繁にあるなどの理由で、個人的に海外の写真素材サイトの中では一番利用しています。

上でフリーの写真素材を配布しているサイトを幾つか紹介しましたが、「写真素材を扱うなら覚えておきたい、国内外のフリー写真素材サイトまとめ」でもこのようなサイトを多数まとめているので、興味ある方はこちらもご覧ください。

  • FLAT ICON DESIGN -フラットアイコンデザイン-
    JPG・PNG・AI・EPS・SVGなど、様々な形式でフラットデザインのアイコンをダウンロードすることができ、更に個人・商用問わず利用できるのも魅力なアイコン配布サイトです。
  • human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
    バリエーション豊富なピクトグラムを配布しているサイトで、形式もJPG・PNG・AIと複数あります。
  • やじるし素材天国「矢印デザイン」
    矢印素材をひたすらストックしているサイトで、こちらも形式がJPG・PNG・AIと複数あります。
  • Font Awesome Cheatsheet
    おそらくアイコンフォントとしては一番利用されているであろう「Font Awesome」のチートシートページです。
  • Fontello - icon fonts generator
    表示されているアイコンフォントを選んでいき、自分が必要なものだけセットになったアイコンフォントを作成できます。
    Font AwesomeやIconicといった有名なものも含まれているので、そのまま使うのは数が多すぎるという場合に数を絞ることができて便利ですし、オリジナルのアイコンフォントをアップしてセット内に含めたりすることもできます。
  • IcoMoon App - Icon Font, SVG, PDF & PNG Generator
    こちらも表示されているアイコンフォントを選んでいき、自分が必要なものだけセットになったアイコンフォントを作成できます。
  • Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of Free Icons
    膨大な数のシンプルでフラットデザインなアイコンがダウンロードでき、形式も多数用意されています。
  • Endless Icons | Free Icon Library
    こちらも沢山のアイコンが掲載されており、同じモチーフでも異なるデザインが多数あったりするので、ただアイコンをダウンロードするだけでなく、こんなデザインにしたアイコンもあるのかという面で見ていくのも参考になります。
  • ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
    HTMLやCSSはもちろん、その他のプログラミング言語やデザインツールの使い方まで、様々な内容を学習することができるサイトです。
    動画を利用しているので、独学で勉強していて文章だけではいまいち理解できないという人におすすめです。
  • CODEPREP -オンラインでプログラミングを学ぼう-
    こちらもプログラミングをオンライン学習する際に便利なサイトで、実際に記述をしていきながら勉強をしていきます。
    TOPではHTML・CSS・JavaScriptが大きく載っていますが他の言語も用意されており、基礎的なことだけでなく応用的なものもあります。
  • Responsive Checker | レスポンシブデザイン検証サービス
    URLを入力するとiPhone・iPad・Galaxy Tab・Xperiaといった様々なデバイスでどのように表示されるのかを確認できます。
    iPhone6などの機種が無かったり、最近ではChromeのデベロッパーツールとかでも簡単に確認はできますが、一気に確認したいという時には便利です。
  • This Is Responsive | Patterns and Resources for Responsive Web Design
    レスポンシブwebデザインに関するパターンやモジュールが沢山まとめられており、どのように実装すればわからない時やシンプルな組み方はないかなと思ったときに見ると参考になります。
    また、レスポンシブwebデザインに関するリソースなどもまとめられているので、特にこれからレスポンシブの勉強をしようと思っている人にはおすすめです。
  • Free jQuery Plugins and Tutorials - jQuery Script
    jQueryプラグインをまとめているサイトです。
  • Web Designer News - The best curated news for designers
    海外のものにはなりますがwebデザインに関する情報がまとめられています。
  • wwwhere
    web制作時に便利なツールやリソースなどが多数集められているサイトで、上で紹介してきたものもいくつか含まれています。
    自分はちょっと暇な時などに眺めて、気になるものがあったら使ってみるという感じで利用することが多いです。
  • Web Field Manual | Design
    こちらも先ほどと同様でweb制作時に便利なツールやリソースなどが多数集められているサイトです。
  • Dribbble - Show and tell for designers
    世界中のデザイナー達が素晴らしいデザインを日々投稿しており、インスピレーションの宝庫とも呼べるサイトです。
  • Behance
    こちらはデザイナー達のオンラインポートフォリオサービスで、Dribbbleと同様にやはり世界中のデザイナーがクオリティ高い作品を数多く公開しています。
  • JAYPEG
    同じくオンラインポートフォリオサービスとなりますが、こちらは日本国内の方の作品が公開されているのが特徴です。
  • 【S5-Style】Webデザインのリンク集・ポータルサイト
    素敵なwebデザインを集めているギャラリーで、カテゴリー別に探すのはもちろん、カラーや使用されている技術などで絞り込み検索なども可能です。
    ギャラリーサイトは他にも沢山ありますが、先述した絞り込み検索がある点やサムネイルが大きめという理由で一番見に行くことが多いです。
  • 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
    縦長なwebサイトが集められているデザインギャラリーです。
    シングルページや長いLPページなどを、他のサイトはどのようにしているのかなど参考になります。
  • Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
    国内のレスポンシブwebデザインのサイトのみを集めたギャラリーサイトで、一覧に表示されているサムネイルで大中小(サイトによっては大小のみ)それぞれどのように見えるか表示してくれているのでおすすめです。
  • Awwwards - Website Awards - Best Web Design Trends
    クオリティ高いデザインや技術を用いたwebサイトを毎日紹介しているサイトです。
  • CSS Design Awards - Website Awards & Inspiration - CSS Gallery - CSSDA
    同じくクオリティ高いwebサイトが集められており、インスピレーション欲しい人におすすめです。
  • Calltoidea
    UIデザインの参考になるデザインギャラリーです。

上でデザインのインスピレーションに役立つサイトを幾つか紹介しましたが、「インスピレーションがもらえてデザインの参考になる、国内外のデザインギャラリー」や「特定のジャンルに特化したデザインギャラリーやショーケースのまとめ」でもこのようなサイトを多数まとめているので、興味ある方はこちらもご覧ください。

  • Screen Sizes
    様々なデバイスのサイズ・解像度・アスペクト比がまとめられています。
  • Device Metrics - Google Design
    同じく様々なデバイスのサイズや解像度がまとめられているサイトで、Googleが作成しているものです。
  • Plain JavaScript - Functions and Helpers
    jQueryで記述しているものを普通のJavaScriptの場合はどのように記述するのかがまとめられています。
  • MockUPhone - One Click to Wrap App Screenshots in Device Mockup!
    画像をアップロードすることで、デバイスにイメージが埋め込まれたシンプルなモックアップを作成することができます。
  • MockDrop
    同じく画像をアップロードすることでモックアップを作成することができ、こちらは実際にサイトやアプリを閲覧・表示しているようなフォトリアリスティックなイメージを作成できます。
  • RealFaviconGenerator.net
    様々なデバイスに対応させるためにレスポンシブが今では当たり前のようになっていますが、同じようにfaviconも様々なデバイスに対応させるために必要なサイズが大幅に増えています。
    そんな時に便利なサービスで、260px以上のファイルをアップロードすると現状必要だと思われるサイズのfaviconを一気に生成してくれます。
  • yourbrowser.is - check your customer's web browsing environment in seconds
    アクセスした際のブラウザやOSをはじめ、ウィンドウサイズ、JavaScriptやクッキーが有効化どうか、各ソーシャルのログイン状態などをわかりやすく一覧化表示してくれます。
    例えばこちらとクライアント側で表示に異なっていると言われた時に、クライアント環境を手っ取り早く確認したい時などはこちらにアクセスしてもらってキャプチャを送付してもらうなどすることで把握しやすいと思います。
  • smallpdf
    PDFに関するツールで圧縮・結合・分割・ロック解除などをオンラインで行うことができます。
    また、様々な拡張子をPDFに変換したり、逆にPDFを他の拡張子に変換することもできるので、普段からPDFを利用する機会が多い人は覚えておいて損はないと思います。

以上、自分のブックマークの中からwebサイト制作や勉強をする際に役立つと思った便利なツールやサイトをご紹介しました。
中には有名でご存じの方も多いツールだったり、むしろ毎日のように見ているというサイトもあるかもしれませんが、もしご紹介した中で知らなかったものや興味があるものなどあれば是非試したり見てみてください :)
紹介したもの全てを普段から使っているということではもちろんないのですが、いずれも冒頭にも書いたように制作の手助けになってくれたり、勉強する際の教材として利用させてもらえたりして非常に便利で、どれもおすすめのツールやサイトばかりになっています。