読者です 読者をやめる 読者になる 読者になる

CHAMELEON DAYS -カメレオンデイズ-

デザインTipsや一眼カメラ、アイデア発想法などについて書くビジネスブログ。

ブクマしといたら役に立つ!WEBデザイナー向け小技チュートリアルサイト&便利ツール10

f:id:doubleM:20151205020017p:plain

コーディングは覚えたけれど、隙あらば少しでも楽をしようと毎日必死なdoubleMです。
今回は、コーディング関連で楽をしたい時に眺めるチートサイトをご紹介します。


 

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

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

f:id:doubleM:20151202180600p:plain
Creative Button Styles

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

tympanus.net

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

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

f:id:doubleM:20151202175221p:plain
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

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

NxWorld

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

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

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

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

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

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

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

キーカラーに該当ブランドの色を使いたいんだけど…何色だったっけ?
なんてときに、ブックマークしておくと便利です。
当然ながら、日本企業が少ないのが欠点でしょうか。
f:id:doubleM:20151202181503p:plain
BrandColors – Official color codes for the world's biggest brands

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

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

7. HEX to RGB Converter

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

f:id:doubleM:20151202183406p:plain

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

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

画像の色を抽出してRGB値を教えてくれるって、これ地味に便利なんですよ!

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

higashi-dance-network.appspot.com

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

バナー制作などで書き出し画像サイズに容量制限があるときに、重宝します。

tinypng.com

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

ボタン一発でダミーテキストを生成してくれるサイト。
他にも候補はあったのですが、こちらのサイトは字数制限が最初に出来るのが良いですね。
日本語も、Lorem ipsmくらいかっこ良ければよいのですが…。

ダミーテキストジェネレータ | Web制作小物ツール - dounokouno.com

 

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

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