Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100+

Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100+

画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、Web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。

2016年1月10日 追記
下記5サイトを追加して100以上になったため、エントリータイトルを「Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100」から「Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100+」に変更しました。
  • ColorFavs
  • RealFaviconGenerator.net
  • yourbrowser.is
  • smallpdf
  • Richard’s Toolbox

以下ではかなりの数を紹介していますが、関連すると思うようなものはなるべくまとめているので、もし気になるものがあればその前後も是非見てみてください。
また、中には同じような内容のサイトがあったりもしていますが、人によって使いやすさが違ったりしますし、他にもたまに繋がらないとか最悪の場合見ようと思ったら公開終了されてるなんてことも少なくないので複数紹介しています。

リンク先の別窓表示を解除する

※当ブログは基本的にリンクの別窓表示はしていませんが、今回はリンク先がかなりの量になっているのでリンク先は全て別窓表示にしています。
別窓表示の有無は上のボタンで切り替えることができるので、別窓表示が必要ない場合は上のボタンを押下して切り替えてください。

DevDocs API Documentation

DevDocs API Documentation

HTMLやCSSはもちろん、jQuery・Angular.js・PHP・Pythonなど様々なドキュメントがまとめられています。
検索機能もついているので調べたい内容を検索することもでき、横に並んでいるリストを自分好みにカスタマイズすることなどもできます。

開発者向けのWeb技術 | MDN

開発者向けのWeb技術 | MDN

MDN(Mozilla Developer Network)内にあるWeb技術ドキュメントに関してまとめられているページです。
例えばCSSであればそのプロパティの概要をなどが図やサンプル付きで解説されており、その他にもW3Cの仕様ページヘのリンクや各種ブラウザの実装状況などについても掲載されています。

CSS Reference | Codrops

CSS Reference | Codrops

ハイクオリティなデモを多数掲載することでも有名な「Codrops」で公開されているCSSリファレンスです。
全て英語にはなってしまいますが、実際の動きを確認できるサンプルや「Can I use」を利用してブラウザの対応状況なども併せて掲載しています。

Browserhacks

Browserhacks

各種ブラウザで利用できるCSSやJSのハックがまとめられており、それらがそれぞれどのバージョンから利用できる(利用する)のかなども記載されています。

Can I use... Support tables for HTML5, CSS3, etc

Can I use… Support tables for HTML5, CSS3, etc

CSS・HTML5・SVG・JS APIの各ブラウザ対応を確認することができます。
それぞれどのバージョンで使えるかやプレフィックスの有無など容易に確認できます。

coveloping | Speed Up Your Development

coveloping | Speed Up Your Development

「開発をスピードアップ」と書かれている通り、CSSボタンやCSSアニメーションを簡単につくれるといったジェネレータをはじめ、Google Web Fontの見栄えをすぐ確認できるといったテスター、CSSやJSを圧縮してくれるコンバータなど、開発に役立つ様々なツールがまとめられています。

CSS3 Generator

CSS3 Generator

ちょっと古いものなので現在ではもう記述する必要ないようなプレフィックス付きで出力されてしまいますが、角丸・グラデーション・シャドウなどCSS3関連のジェネレータがまとめられています。
これからCSSを勉強する人には、とりあえずこの見栄えを再現するためにどのようなプロパティを使ったりするのか見たりできて良いかもしれません。

Easing Function 早見表

Easing Function 早見表

その名の通り、それぞれのイージングがどのようなアニメーションになるのかを容易に確認することができます。
気になるものにマウスオンすれば動きを見れるだけでなく、クリックすればCSS・SCSS・JavaScriptそれぞれでどのように記述すれば良いのかも確認できます。

プログラマーのためのネーミング辞書 | codic

プログラマーのためのネーミング辞書 | codic

CSSのクラス名やJSの関数名など命名に困った時に便利なツールで、日本語で入力するとそれらに利用できそうなネーミングを出力してくれます。
また、EclipseやSublime text 3などでより簡単にこれを利用できるようするプラグインなども用意されています。

CodePen

CodePen

コード共有サービスで、ちょっとした動きを確認したい時にも便利なサイトです。
HTML・CSS・JavaScriptなどで作られたクオリティ高いサンプルを見て勉強できたり、アカウントを作れば自分用のスニペット置き場みたいな使い方もできます。
また、作ったものを埋め込んだりするのも簡単にできるので、技術ブログでのサンプルとして設置したりもできます。

Codrops | Useful resources and inspiration for creative minds

Codrops | Useful resources and inspiration for creative minds

HTML・CSS/JavaScriptなどを使って実装するクオリティ高いチュートリアルが多数あります。
かっこいい動きにしたいとかあまり他では見ない動きにしたい時などに見ると参考になります。

CodyHouse - Free HTML, CSS, JS nuggets

CodyHouse – Free HTML, CSS, JS nuggets

こちらも同じくクオリティ高いチュートリアルが多数あります。

LittleSnippets.net – A free collection of CSS3/HTML snippets. New entries crafted and added daily.

LittleSnippets.net – A free collection of CSS3/HTML snippets. New entries crafted and added daily.

CSS3/HTMLを使った様々なスニペットがまとめられており、一覧でCodePenを表示させているので動きやコードもすぐに確認できます。
ホバー時のエフェクトが多めなので、ホバー時に何か動きをつけたいなと思った時に見ると面白い動きが見つかるかもしれません。

Corpus. A collection of CSS things.

Corpus. A collection of CSS things.

リセットスタイルのように制作時のベースとなるCSSとして記述するようなものがひと通りまとめられています。
コードは見るだけでなくファイルをとしてダウンロードも可能です。

StyleStats - An evaluating tool for writing better CSS.

StyleStats – An evaluating tool for writing better CSS.

URLを入力するとそのサイトのCSSを解析して数値化してくれます。
使用されているフォントサイズやカラーなども表示されるので、参考にしているサイトはもちろん、自分のサイトのCSSがどのような感じになっているのか見るのも面白いです。

Specificity Calculator

Specificity Calculator

セレクタを記述することでCSSの詳細度を表示してくれます。

NTH-TEST | nth-child and nth-of-type Tester

NTH-TEST | nth-child and nth-of-type Tester

CSSのnth-childnth-of-typeを利用する際、どのように記述することでどれが対象になるのか(例えば「3n+2」と記述した場合にどれが対象になるか)を容易に確認することができます。

Really Quick Responsive Web Design Calculator

Really Quick Responsive Web Design Calculator

上のフィールドには子要素の幅、下のフィールドには親要素の幅という形でそれぞれ入力すると、その子要素の幅が親要素の幅に対して何%の割合なのかを表示してくれます。

px-em | px to em Calculator

px-em | px to em Calculator

上のフィールドには親要素のフォントサイズを、下のフィールドには子要素のフォントサイズをそれぞれpxの形で入力すると、一番下に子要素でどのようにem指定すればpxで指定した時と同じサイズを表示させることができるのかを表示してくれます。

PXtoEM.com: PX to EM conversion made simple.

PXtoEM.com: PX to EM conversion made simple.

こちらもフォントサイズのサイズについて調べたい時に便利なツールで、例えば13pxというフォントサイズの時にem・%・pointだとそれぞれどのような値になるのかを容易に確認できます。

CSS Ruler • Explore CSS lengths.

CSS Ruler • Explore CSS lengths.

px・em・rem・ptなど、ブラウザ上で各単位の長さがどれくらいなのかを確認することができます。

CSS Beautifier

CSS Beautifier

CSSを綺麗に整形してくれるツール。
この手のツールは他にも沢山ありますし、ローカルでやるって人も多いと思いますが、シンプルなのが好みでブラウザで行いたいという人には良いと思います。

FESS your CSS

FESS your CSS

ショートハンドを利用して記述されたCSSを展開した状態で表示してくれます。

SassMeister | The Sass Playground!

SassMeister | The Sass Playground!

Sassで入力した内容をリアルタイムでCSSに変換して表示してくれます。
ちょっと試した時やSassの勉強したい時に便利です。

Javascript Beautifier and Formatter Online

Javascript Beautifier and Formatter Online

圧縮されたJavaScriptを読みやすい形に整形してくれるツールで、入力フィールド右にある各種項目で、出力方法の形を任意のものに変更することができます。
また、ここではJavaScript版として紹介しましたがHTMLやCSS版も用意されており、それらはページ上部にあるナビからそれぞれ利用できます。

Online JavaScript beautifier

Online JavaScript beautifier

同じく圧縮されたJavaScriptを読みやすい形に整形してくれるツールです。

すぐに使える便利なWEBツール | Tech-Unlimited

すぐに使える便利なWEBツール | Tech-Unlimited

URLエンコード、特殊文字変換、.htpasswd生成、パスワード生成、カラーコード変換など、制作時に便利なツールがいろいろと集められているサイトです。
他にもドメインのWHOIS情報を検索できたり、Excelの表をHTMLのテーブルタグに変換してくれるツールなんかもあります。

Webツール | SYNCER

Webツール | SYNCER

「SYNCER」さんではブログ記事の他にも“趣味のプログラミングで作ったちょっと便利なツール集。”ということで、様々なツールやチェッカーを公開しています。
制作というよりは全体的にソーシャルに関する内容が多めですが、使い方などももちろん全て日本語で丁寧に説明があるのでわかりやすいです。

.htaccess Snippets

.htaccess Snippets

その名の通り、.htaccessに関するスニペットがまとめられています。

Recalll - Video first knowledge engine

Recalll – Video first knowledge engine

日本語では利用できませんが、調べたい内容を入力するとw3schoolsやStack Overflowといったサイトを横断検索して解答を表示してくれます。

web計。

web計。

数値を入力するだけで、簡単に黄金比や白銀比を確認することができます。
また画像の比率以外にも指定した横幅・画像数・マージンをそれぞれ入力すれば、画像をどれくらいのサイズにすれば収まるかなどの計算ツールもあります。

Compressor.io - optimize and compress your images and photos

Compressor.io – optimize and compress your images and photos

JPG・PNG・GIF・SVGといったひと通りの画像ファイルを圧縮・軽量化してくれるツールです。

TinyPNG – Compress PNG images while preserving transparency

TinyPNG – Compress PNG images while preserving transparency

PNGを圧縮・軽量化してくれるツールで、PNGとなっていますがJPGも利用できます。

Bulk Resize Photos

Bulk Resize Photos

複数の画像を一括でリサイズすることができるツールで、まだ自分ではそこまで大量の画像をあげたことがないのでわかりませんが、60秒間に最大150枚の画像をリサイズできるそうです。
リサイズ後にどれくらいの大きさにするかの指定も可能で、幅や高さをそれぞれ指定する以外にもスケール指定でサイズを決めることもできます。

.htaccess ファイルを簡単作成「.htaccess Editor」

.htaccess ファイルを簡単作成「.htaccess Editor」

ベーシック認証、エラーページ設定、リダイレクトなどといった.htaccess関連の記述を容易に出力させることができます。

パスワード生成(パスワード作成)

パスワード生成(パスワード作成)

ランダムなパスワードを表示してくれるサイトで、文字の種類や数など任意でオプションを決めることもできます。
見た目が似ている英数字は省くとか8文字以内の場合に同じ文字は2回以上使わないといった地味に嬉しい機能もついています。

また、ここではパスワード生成ツールを紹介しましたが、このサイトでは他にも入力したテキストの文字数やバイト数を表示してくれる「文字数 カウント(文字バイト数チェック)」やメールアドレスを暗号化させる「メールアドレス暗号化(メール暗号化ツール)」といったツールも公開されています。

Font Library | An open source project to tag and organize Google Fonts.

Font Library | An open source project to tag and organize Google Fonts.

フォントの特徴が記載されたタグでソートすることで、Google Fontにある目的のデザインフォントを容易に探せるようにしたサイトです。
各フォントにクリックすれば、それぞれGoogle Fontの詳細ページに飛ぶことができます。

FontCDN: A search tool for Google web fonts

FontCDN: A search tool for Google web fonts

同じくGoogle Fontにあるフォントを容易に探せるようにしているサイトですが、先ほどのものよりフォントが一覧表示されている領域が広いので、とにかくいろんなフォントを一気に見たい場合などはこちらの方が良いかもしれません。

http://www.dafont.com/

DaFont – Download fonts

欧文フォントを探そうとしている時にとりあえず見にくるサイトです。
もちろん商用利用など規約の確認は必要になりますが、膨大な数のフリーフォントがあります。

http://coliss.com/articles/freebies/best-of-free-japanese-fonts-for-2016.html

2016年用、日本語のフリーフォント207種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス

ご存知の方も多いと思う、「コリス」さんが定期的にまとめている日本語フリーフォントのまとめエントリーです。
個人・商用利用できるなどの規約も併せてまとめてくれているのでわかりやすいです。

modulator | metaflop

modulator | metaflop

ベースとなるフォントを指定し、丸みやシャープさなどを自分で調整してオリジナルフォントの作成をWeb上で行うことができます。

wordmark.it - helps you choose fonts!

wordmark.it – helps you choose fonts!

インストールしているフォントを一覧化してくれるサービスで、任意で入力した文字でプレビューさせることもできます。
また、フォントサイズを変更したり、デフォルトで白背景に黒文字となっているものを反転させて確認することなどもできます。

WhatTheFont! « MyFonts

WhatTheFont! « MyFonts

画像をアップロードすると、その画像に使用しているフォント(または近いフォント)を教えてくれます。

Wordpress Theme Development Cheatsheet » Codeclown

WordPress Theme Development Cheatsheet » Codeclown

目次下に書かれているようにしばらく更新されていないので注意も必要ですが、WordPressのテーマ作成時によく記述するようなものがシンプルにひと通りまとめて掲載されています。

もちろん本来はCodexで確認等するべきですが、先述したようにシンプルにまとまっているのでど忘れしたなど手っ取り早く確認したい時にいいかもしれません。

GenerateWP - User friendly tools for WordPress developers

GenerateWP – User friendly tools for WordPress developers

カスタム投稿タイプやタクソノミーなどのようにWordPressをカスタマイズする際に必要なコードを出力してくれます。
その他WP_Querywp-config.phpのコードを生成してくれるものもあります。

The WordPress Template Hierarchy - a visualization resource

The WordPress Template Hierarchy – a visualization resource

WordPressのテンプレート構成をチャート化したもの。
そういうプラグインとかもありますけど、自分が思ってたのと違うテンプレートが呼び出されてしまっている時などに確認すると、実はこのテンプレートが呼びだされているとかを確認したりできます。

Cheat Sheet

Cheat Sheet

使いこなせば爆速でコーディングできることでご存じの方も多いと思うEmmetのチートシートです。

Brackets Shortcuts · adobe/brackets Wiki · GitHub

Brackets Shortcuts · adobe/brackets Wiki · GitHub

Bracketsのショートカットチートシートです。

Sublime Text | Periodic table of the Keyboard Shortcuts.

Sublime Text | Periodic table of the Keyboard Shortcuts.

こちらはSublime Textのショートカットチートシートです。

Atom Editor Cheat Sheet

Atom Editor Cheat Sheet

※リンク先はPDFとなります。

こちらはAtomのショートカットチートシートです。
正直現状ではAtom使ってないんですけど、今後使う可能性もあるので一応メモしてます。

正規表現チートシート

正規表現チートシート

※リンク先はPDFとなります。

こちらはその名の通り、正規表現についてのチートシートになります。

jQuery Cheat Sheet

jQuery Cheat Sheet

jQueryのチートシートで、ページ上部のプルダウンでバージョンを選択すると、そのバージョンで使えないものに打ち消し線が入ります。

The Ultimate Adobe Creative Cloud Keyboard Shortcuts Cheat Sheet - Make A Website Hub

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

Adobe Photoshop, Illustrator and InDesign Keyboard Shortcut Visualiser | FastPrint.co.uk

同じくデザインツールのショートカットチートシートで、Photoshop・lustrator・InDesignの各種ショートカットがまとめられていて、Win用やMac用などの切り替えもできます。
また、それらを壁紙としてダウンロードすることもできます。

Coverr - Beautiful, free videos for your homepage

Coverr – Beautiful, free videos for your homepage

CC0ライセンスの動画を配布しているサイトで、カテゴリーなども用意されています。
素材として使わせてもらうだけでなく、動画に関連するようなテストを行う際などにも使えますね。

ちなみに、同じようにフリーの動画を配布しているサイトは他にもあり、以下のようなエントリーとしてまとめているので、興味ある方はこちらもご覧ください。

Unsplash It

Unsplash It

ハイクオリティイメージを多数ダウンロードすることができる「Unsplash」の写真をダミーイメージとして手軽に利用することができます。

また、Unsplashが公開したAPIとして「Unsplash Source | A Simple API for Embedding Unsplash Photosというのもあり、こちらの方がいろいろ好みな感じにしたりもできるので、自分にあったほうで使ってみてください。

Placehold.it - Quick and simple image placeholders

Placehold.it – Quick and simple image placeholders

こちらもダミーイメージを手軽に扱えるサイトで、サイズ指定やそのサイズを表示させたりができます。
ひと目でダミーだとわかるようにしたい時には、先ほどの「Unsplash It」よりもこちらを利用した方が良いように思います。

すぐ使えるダミーテキスト - 日本語 Lorem ipsum

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

日本語用のダミーテキストジェネレータで、夏目漱石「私の個人主義」や宮沢賢治「セロ弾きのゴーシュ」などが用意されています。
パラグラフ毎の文字数やアルファベットの半角・全角指定などできるオプションもあります。

HTML-Ipsum

HTML-Ipsum

こちらはダミーテキストをHTML付きでコピーすることができるサイトで、ナビゲーションやリストなどのよく利用しそうな記述が揃っています。

上でダミーのイメージやテキストを利用する際に便利なサイトを幾つか紹介しましたが、以下のエントリーでもこのようなサイトを幾つかまとめているので、興味ある方はこちらもご覧ください。

Color Hunt

Color Hunt

様々な配色パターンが並べられているギャラリーで、マウスオンでそれぞれのカラーコードを確認することもできます。

uiGradients - Beautiful coloured gradients

uiGradients – Beautiful coloured gradients

美しいグラデーションカラーが多数まとめられており、CSSで表示させるためのコード確認もできます。

NIPPON COLORS - 日本の伝統色

NIPPON COLORS – 日本の伝統色

こちらは日本の伝統色を一覧化したサイトで、表示されたカラーはHEX・CMYK・RGBの値をそれぞれ確認できます。

ColorFavs

ColorFavs

イメージをアップロードすると、そのイメージで使用されているカラーを使ったパレットを生成してくれます。
それぞれのカラーはカラーコードの確認もできますし、他の人が作ったパレットやカラーを見ることもできます。

上でカラーに関する便利なサイトを幾つか紹介しましたが、以下のエントリーでもこのようなサイトを幾つかまとめているので、興味ある方はこちらもご覧ください。

ぱくたそ - フリー写真素材・無料ダウンロード

ぱくたそ – フリー写真素材・無料ダウンロード

やはり面白いタイプの写真が目立ちますが、普通にデザインでも使えるような高品質で素敵な写真素材が多数あります。
なんだかんだで国内の写真素材サイトでは間違いなく一番利用させてもらっていると思います。

おしゃれなフリー写真素材|GIRLY DROP(ガーリードロップ)

おしゃれなフリー写真素材|GIRLY DROP(ガーリードロップ)

サイト名にあるように、おしゃれでガーリーな写真素材を多数配布しているサイトです。
先ほど「ぱくたそ」さんを一番利用しているとは言いましたが、ターゲットが完全に女性向けのものだったりするデザインに限ってはとりあえずガリドロを見に来て、たとえ後で差し替えるようなダミーイメージでもあってもガリドロのイメージを使わせてもらうことが多いです。

無料写真素材・フリーフォト検索|O-DAN(オーダン)

無料写真素材・フリーフォト検索|O-DAN(オーダン)

世界の無料写真素材サイトを日本語で横断検索することができるサイトです。

Unsplash | High-Resolution Photos

Unsplash | High-Resolution Photos

ハイクオリティな写真素材が数多くあることや更新も割と頻繁にあるなどの理由で、個人的に海外の写真素材サイトの中では一番利用しています。

上でフリーの写真素材を配布しているサイトを幾つか紹介しましたが、以下のエントリーでもこのようなサイトを多数まとめているので、興味ある方はこちらもご覧ください。

FLAT ICON DESIGN -フラットアイコンデザイン-

FLAT ICON DESIGN -フラットアイコンデザイン-

JPG・PNG・AI・EPS・SVGなど、様々な形式でフラットデザインのアイコンをダウンロードすることができ、更に個人・商用問わず利用できるのも魅力なアイコン配布サイトです。

ここでは「FLAT ICON DESIGN」を紹介しましたが作者の方は他にもいろいろな素材配布サイトを公開しており、バリエーション豊富なピクトグラムを配布している「human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)」やひたすら矢印のデザイン素材を並べた「やじるし素材天国「矢印デザイン」」などもあります。

Font Awesome Cheatsheet

Font Awesome Cheatsheet

おそらくアイコンフォントとしては一番利用されているであろう「Font Awesome」のチートシートページです。

Fontello - icon fonts generator

Fontello – icon fonts generator

表示されているアイコンフォントを選んでいき、自分が必要なものだけセットになったアイコンフォントを作成できます。
Font AwesomeやIconicといった有名なものも含まれているので、そのまま使うのは数が多すぎるという場合に数を絞ることができて便利ですし、オリジナルのアイコンフォントをアップしてセット内に含めたりすることもできます。

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

こちらも表示されているアイコンフォントを選んでいき、自分が必要なものだけセットになったアイコンフォントを作成できます。

Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of Free Icons

Free vector icons – SVG, PSD, PNG, EPS & Icon Font – Thousands of Free Icons

膨大な数のシンプルでフラットデザインなアイコンがダウンロードでき、形式も多数用意されています。

Endless Icons | Free Icon Library

Endless Icons | Free Icon Library

こちらも沢山のアイコンが掲載されており、同じモチーフでも異なるデザインが多数あったりするので、ただアイコンをダウンロードするだけでなく、こんなデザインにしたアイコンもあるのかという面で見ていくのも参考になります。

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト

HTMLやCSSはもちろん、その他のプログラミング言語やデザインツールの使い方まで、様々な内容を学習することができるサイトです。
動画を利用しているので、独学で勉強していて文章だけではいまいち理解できないという人におすすめです。

http://codeprep.jp/

CODEPREP -オンラインでプログラミングを学ぼう-

こちらもプログラミングをオンライン学習する際に便利なサイトで、実際に記述をしていきながら勉強をしていきます。
TOPではHTML・CSS・JavaScriptが大きく載っていますが他の言語も用意されており、基礎的なことだけでなく応用的なものもあります。

Responsive Checker | レスポンシブデザイン検証サービス

Responsive Checker | レスポンシブデザイン検証サービス

URLを入力するとiPhone・iPad・Galaxy Tab・Xperiaといった様々なデバイスでどのように表示されるのかを確認できます。
iPhone6などの機種が無かったり、最近ではChromeのデベロッパーツールとかでも簡単に確認はできますが、一気に確認したいという時には便利です。

This Is Responsive | Patterns and Resources for Responsive Web Design

This Is Responsive | Patterns and Resources for Responsive Web Design

レスポンシブWebデザインに関するパターンやモジュールが沢山まとめられており、どのように実装すればわからない時やシンプルな組み方はないかなと思った時に見ると参考になります。
また、レスポンシブWebデザインに関するリソースなどもまとめられているので、特にこれからレスポンシブの勉強をしようと思っている人にはおすすめです。

Unheap - A tidy Repository of jQuery Plugins & JavaScripts

Unheap – A tidy Repository of jQuery Plugins & JavaScripts

jQueryプラグインのギャラリーサイトで、細かくカテゴライズされているので目的のプラグインが探しやすいです。

Free jQuery Plugins and Tutorials - jQuery Script

Free jQuery Plugins and Tutorials – jQuery Script

こちらも先ほどのものと同様でjQueryプラグインをまとめているサイトです。

Stylesheets

Stylesheets

様々なCSS関連のリソースがまとめられているサイトです。

SVG News

SVG News

その名の通り、SVGに関する情報をまとめているサイトです。
半年ほど前から更新がストップされているようなのですが一応ご紹介…。

Web Designer News - The best curated news for designers

Web Designer News – The best curated news for designers

海外のものにはなりますがWebデザインに関する情報がまとめられています。

wwwhere

wwwhere

Web制作時に便利なツールやリソースなどが多数集められているサイトで、上で紹介してきたものもいくつか含まれています。
自分はちょっと暇な時などに眺めて、気になるものがあったら使ってみるという感じで利用することが多いです。

Web Field Manual | Design

Web Field Manual | Design

こちらも先ほどと同様でWeb制作時に便利なツールやリソースなどが多数集められているサイトです。

Richard's Toolbox

Richard’s Toolbox

作成ツールや確認ツールなど様々な便利ツールが50種類以上まとめられています。
ページ上部でジャンルによって絞り込んだり検索したりもできます。

Makerbook - The best free resources for creatives.

Makerbook – The best free resources for creatives.

写真・モックアップ・テクスチャ・フォントなど、デザインに関するリソースがまとめられているサイトです。
海外のものばかりにはなりますが、よく利用するものが集まっているならここだけブクマしておくというのも良いかなと思います。

Dribbble - Show and tell for designers

Dribbble – Show and tell for designers

世界中のデザイナー達が素晴らしいデザインを日々投稿しており、インスピレーションの宝庫とも呼べるサイトです。

Online Portfolios on Behance

Online Portfolios on Behance

こちらはデザイナー達のオンラインポートフォリオサービスで、Dribbbleと同様にやはり世界中のデザイナーがクオリティ高い作品を数多く公開しています。

JAYPEG

JAYPEG

同じくオンラインポートフォリオサービスとなりますが、こちらは日本国内の方の作品が公開されているのが特徴です。

【S5-Style】Webデザインのリンク集・ポータルサイト

【S5-Style】Webデザインのリンク集・ポータルサイト

素敵なWebデザインを集めているギャラリーで、カテゴリー別に探すのはもちろん、カラーや使用されている技術などで絞り込み検索なども可能です。
ギャラリーサイトは他にも沢山ありますが、先述した絞り込み検索がある点やサムネイルが大きめという理由で一番見に行くことが多いです。

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

縦長なWebサイトが集められているデザインギャラリーです。
シングルページや長いLPページなどを、他のサイトはどのようにしているのかなど参考になります。

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

国内のレスポンシブWebデザインのサイトのみを集めたギャラリーサイトで、一覧に表示されているサムネイルで大中小(サイトによっては大小のみ)それぞれどのように見えるか表示してくれているのでおすすめです。

Awwwards - Website Awards - Best Web Design Trends

Awwwards – Website Awards – Best Web Design Trends

クオリティ高いデザインや技術を用いたWebサイトを毎日紹介しているサイトです。

CSS Design Awards - Website Awards & Inspiration - CSS Gallery - CSSDA

CSS Design Awards – Website Awards & Inspiration – CSS Gallery – CSSDA

同じくクオリティ高いWebサイトが集められており、インスピレーション欲しい人におすすめです。

Siiimple

Siiimple

シンプルなWebデザインのみを集めているギャラリーです。

Ui Parade | User Interface Design Inspiration

Ui Parade | User Interface Design Inspiration

こちらはUIデザインの参考になるデザインギャラリーです。

Calltoidea

Calltoidea

同じくUIデザインの参考になるデザインギャラリーです。

上でデザインのインスピレーションに役立つサイトを幾つか紹介しましたが、以下のエントリーでもこのようなサイトを多数まとめているので、興味ある方はこちらもご覧ください。

Screen Sizes

Screen Sizes

様々なデバイスのサイズ・解像度・アスペクト比がまとめられています。

Device Metrics - Google Design

Device Metrics – Google Design

同じく様々なデバイスのサイズや解像度がまとめられているサイトで、Googleが作成しているものです。

Plain JavaScript - Functions and Helpers

Plain JavaScript – Functions and Helpers

jQueryで記述しているものを普通のJavaScriptの場合はどのように記述するのかがまとめられています。

MockUPhone - One Click to Wrap App Screenshots in Device Mockup!

MockUPhone – One Click to Wrap App Screenshots in Device Mockup!

画像をアップロードすることで、デバイスにイメージが埋め込まれたシンプルなモックアップを作成することができます。

MockDrop

MockDrop

同じく画像をアップロードすることでモックアップを作成することができ、こちらは実際にサイトやアプリを閲覧・表示しているようなフォトリアリスティックなイメージを作成できます。

RealFaviconGenerator.net

RealFaviconGenerator.net

様々なデバイスに対応させるためにレスポンシブが今では当たり前のようになっていますが、同じようにfaviconも様々なデバイスに対応させるために必要なサイズが大幅に増えています。
そんな時に便利なサービスで、260px以上のファイルをアップロードすると現状必要だと思われるサイズのfaviconを一気に生成してくれます。

yourbrowser.is

yourbrowser.is – check your customer’s web browsing environment in seconds

アクセスした際のブラウザやOSをはじめ、ウィンドウサイズ、JavaScriptやクッキーが有効化どうか、各ソーシャルのログイン状態などをわかりやすく一覧化表示してくれます。
例えばこちらとクライアント側で表示に異なっていると言われた時に、クライアント環境を手っ取り早く確認したい時などはこちらにアクセスしてもらってキャプチャを送付してもらうなどすることで把握しやすいと思います。

smallpdf

smallpdf

PDFに関するツールで圧縮・結合・分割・ロック解除といったことをオンラインで行うことができます。
また、様々な拡張子をPDFに変換したり、逆にPDFを他の拡張子に変換することもできるので、普段からPDFを利用する機会が多い人は覚えておいて損はないと思います。

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

また、沢山ご紹介してきましたが、まだまだこういったものは探せばいくらでもあると思いますし、ここでは紹介されていないけどこれも便利というのがあればコメントなどで是非教えてください!

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。