私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】

実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能（Chrome）ごとで分けていませんのでご注意ください。

I/O 3000 | Webデザインギャラリー

【ウェブサイト】

ギャラリーサイトって同じサイトが紹介されていることも多いので、あまり色々を見ません。最近はこちらをよく見ます。更新頻度も高く、カテゴリやタグ分けも使いやすくなっています。

とはいうものの、もっと色々見たいというときもあるので、そんなときは以下のサイトもよくみます。どれもきれいで見やすいサイトです。やっぱり無限スクロールがいいですね。

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

【HTMLタグの簡単検索】TAG index - ホームページ作成情報

【ウェブサイト】

かなり昔からお世話になっています。HTMLやCSSの基本的な部分で気になるところがあるとここで調べます。有名ですので知っている方も多いと思います。CSS3は以下のサイトで確認することが多いです。

• CSS3リファレンス

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

【ウェブサイト】

CSSやHTML5などのブラウザごとの対応状況が分かります。英語のサイトですが特に問題ないと思います。前後のバージョンまで幅広く確認できますのでかなり便利です。

サクッと確認したい場合はこちらも便利です。

• HTML5 & CSS3 Web Design

Explore | Most Popular - Adobe Kuler

【ウェブサイト】

Adobeが提供しているカラーパレット投稿サイトです。日本語もありますが、数が少ないので英語のものをよく見ます。

ColorZilla

【Chrome 拡張機能】

マウスを乗せた場所の色を教えてくれます。この拡張機能の便利なところは画像であっても色を確認してくれるところです。

ワンクリックでカラーコード（初期設定は#336699のようなカラーコードですが、#なし、rga、hslでも取得可能です）をコピーすることもできるので使い勝手も良いです。

0to255

【ウェブサイト】

このブログで数え切れないくらい紹介しています。色を指定すると#fffから#000までのグラデーションを32段階で表示してくれます。

マウスを乗せたときの色をちょっと濃くしたい（薄くしたい）ときや統一感のあるメニューを作りたい場合に便利です。以下の記事のサンプルなんかは0to255を使って色を決めています。

• CSSだけで作る「多階層」なドロップダウンメニュー｜Webpark
• 擬似要素とCSS3を使ってリストメニューを楽しくデザイン｜Webpark
• オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark
• CSSだけ！クリックでスムーズに開閉するアコーディオンメニュー｜Webpark

web計。

【ウェブサイト】

黄金比や白銀比をさくっと計算してくれます。画像のサイズを決めるときに使います。実際守れないときも多いですが。。

関係ないですが、こういうシンプルだけど何度も訪問されるサイトって運営する側からすると理想的な気がします。

TinyPNG – Compress PNG images while preserving transparency

png形式の画像を圧縮してくれます。このブログで使う画像には使用していないですが、画面いっぱいになるような大きな画像を使うときには利用します。シンプルで使いやすいです。

Create Link

【Chrome 拡張機能】

見ているサイトへのリンクを作成してくれます。地味ですがかなり重宝しています。作成されるリンクタグはカスタマイズできます。

このようにするとリンク先を別枠で開くようになります。

Viewport Resizer

【ブックマークレット】

レスポンシブなサイトの表示確認に便利なブックマークレットです。スマホやタブレットなど様々なデバイスでの表示確認に便利です。表示確認する方法はウェブサービスや他のブックマークレットなどもありますが個人的にはこれがお勧めです。

Design

【ブックマークレット】

サイト上にグリッドを表示するブックマークレットです。メジャーを表示できたり、サイズを測れたりもできます。よく似たものは他にもありますが、横幅やカラム数などきめ細かに指定できますので、グリッドデザインの確認に便利です。

CSSViewer

【Chrome 拡張機能】

マウスを乗せた場所のスタイルの状況を知ることができます。余白を調整したいときに使います。調整したい余白がどの要素にあたるのかがすぐに分かります。

次に紹介するものはさらにスタイルの変更もできるわけですが、こちらの方が見やすいのでちょっと確認したいというときはこちらを使います。

まとめ

というわけで、私が普段お世話になっているウェブサイト、ブックマークレット、Chrome拡張機能を紹介しました。

数にこだわらず厳選しましたので、本当にどれもにおすすめです。知らないものがあればぜひお試しください。