1. 解説付き！超オシャレなボタン＋ロールオーバーエフェクトの作り方

アニメーションやインタラクティブデザインをふんだんに用いた、
インスピレーションデザインが満載の大好きなサイト。

Creative Button Styles

他にも本を開くエフェクトだったり、
カードをめくるエフェクトサンプルだったり
おすすめしたい記事は盛り沢山なのですが、
中でも認知心理学を先行されていたMary Louさんの
センスの良さはずば抜けていておすすめです！tympanus.net

2. スタイリッシュなタイトル（heading）のデザインcss

まさにこんなの求めてた！といいたくなるような、
ハイセンスかつ見やすい見出し一覧ページ。

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

NxWorldさんはその他にも色々役立つコードをまとめていらっしゃるので
興味がある方は下記リンクから飛んでみてくださいな。
NxWorld

3. CSSだけで作れる吹き出しの作り方

よく使うのですが、なんか記述方法を覚えられないんですよね。
こちらのサイト様に何度もお世話になってます。

【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold

4. cssアニメーションをまとめてくださっている Animate.css

こちらは、フレームワーク配布サイト、というのでしょうか。
Animate.cssを使えば簡単にアニメーションが加えられて、
更にこちらのサイトのおかげで
どんな動きになるのかが一目瞭然！

アニメーション作成スキルの無い方が、
「こんな感じに…」と
オーダーする際に提示するのにも使えそうです。

5. 世界のブランドカラーが一覧できるBrandColors

キーカラーに該当ブランドの色を
使いたいんだけど…何色だったっけ？
なんてときに、ブックマークしておくと便利です。
当然ながら、日本企業が少ないのが欠点でしょうか。

BrandColors | Official color codes for the world's biggest brands

6. 世界最少のhtml5ドキュメント

新規ファイルを作る時、ドキュメント宣言やらなにやら、イチから書くのってなんだか面倒。
でも、既存サイトから引っ張ってくるのも、
万が一の変更ミスが怖い…
なんて気持ちで調べてみたら、出てきました。
「最少のドキュメント」。www.sitepoint.com

7. HEX to RGB Converter

HEXの数値をRGBに変換できる便利なサイト。

個人的にはWhat's My Browser Size?も好きです！
こういう、個人の方が公開している便利サイトって
意外と多いんですが、書き残しておかないとすぐ埋もれちゃうんですよね。jamiebrittain.com

8. 画像の色を抽出してRGB値を教えてくれる！イロミル

これ地味に便利なんですよ！
忙しい時に、デザインpngだけプログラマさんに渡して、
「RBG値はこのサイトで確認して！m(_ _)m」なんてことをよくやります。
「ここの色が〜」なんて説明するよりも、
直に色を抽出してもらったほうが間違いもなくてお互い楽！higashi-dance-network.appspot.com

9. 画像の容量削減が一手でできる！TinyPNG

バナー制作などで容量制限があるときに、重宝します。tinypng.com

10. ダミーテキストジェネレーター

他にも候補はあったのですが、こちらのサイトは字数制限が最初に出来るのが良いですね。
日本語も、Lorem ipsmくらいかっこ良ければよいのですが…。
ダミーテキストジェネレータ | Web制作小物ツール - dounokouno.com

以上、いつもお世話になっている便利サイトさまでした！

これはリアルに使えそう！と思ったリンク先はぜひ、
ブックマークして活用してくださいね♪