ゲームをしながらFlexboxの挙動を学べる教育系コンテンツ。ルールは簡単で、カエルをハスの葉の上にピッタリ乗るようにFlexboxのプロパティ記述をするというもの。画面左、#pondと指定されているものがいわゆるFlexboxコンテナーです。んでハスの葉は固定で、カエルがFlexboxアイテムという感じ。最初はjustify-content、次にalign-itemsと来て、さらにflex-directionと続きます。全部で24問あり、一通りプレイし終えた頃にはFlexboxが使えるようになってるという内容。TableレイアウトからCSSによるFloatレイアウトに移行した時もそうだったけど、Flexboxでのレイアウトって経験者ほど頭の切り替えが難しかったりするので、こういうコンテンツは楽しく学べて良いですな。
Nine-Patch、もしくはNine-Sliceと呼ばれる、主にAndroid Appなどの開発現場などで使われるボタン画像フォーマットのジェネレーター。主に上下左右に大きさが可変する角丸ボタンに使われるアレを、簡単にWebから生成できるというものです。Nine-Patchがどういうものであるかはこのあたりを参照してください。画像の作り方は簡単で、まずは「Select Image」ボタンからNine-Patch化したいPNG画像を選択。ロードされると右側に表示されるので、あとは拡大に応じて伸長するエリアとコンテンツパディングを指定するだけ。またこの際「Trim」のプルダウンメニューから「Stretch Region」を選ぶ事で、必要な画像部位だけにトリミングしてくれます。なのでPhotoshopを使ってUIデザインをしている場合、いつも通りに画像をアセット保存して出力されたフルサイズのボタンPNGを放り込むだけでオッケー。画像を最小サイズにするのはジェネーレーター側に任せる事ができます。いちいち制作サイドで最小サイズにトリミングする手間が省けます。
またこのジェネレーターでさらに便利なのが、画面中央にある「Interactive Preview」という機能。これをクリックすると、現在のNine-Patch指定で画像がどのように伸縮するのかを、実際にドラッグして挙動を確認する事ができます。これがもう死ぬほど便利で、指定ミスによる想定外の挙動を防ぐ事ができます。あとプログラマーに渡す直前に「この動きでオッケーだよね？」的な確認をするのにも便利です。Nine-Patch画像はPhotoshopだけでも作れるといえば作れるんだけど、こういう便利なツールはどんどん使っていきたいですな。
CSSを使ってデザインされた凝ったボタン作例を紹介するブログ。リンク先はだいたいCodepenなので導入も簡単にできそうです。最近のこの手のボタンはマウスオーバー時にトランジション使ったものが多いですな。多くの作例はアニメーションGifを使ったサムネールで紹介されているので、動きまで含めて閲覧できる点がナイスです。
CodePenが、Webデザインに役立つコードスニペットをまとめています。様々な表現手法ごとに分けて紹介されています。例えばAccordionでは、アコーディオンを使ったコンテンツの見せ方とそのコードが複数種紹介されています。他にもメニューアイコン、タブメニュー、グリッド、ボタン、パンクズ、カレンダー、表組みなど、Webでよく使われるパーツ類が揃っています。CodePenなのでソースコード見るのも簡単です。
Instagramのような写真加工を、CSSのフィルター機能を使って行う事のできるCSSライブラリー。CSSフィルターとCSSブレンドモードを使うようで、IE以外のブラウザーで動作します。CSSを読み込んでClass指定するだけというシンプルなものなので、導入も簡単です。コーディングレベルでの可逆性を持たせたい場合や、Webサービスなどでの写真のフィルタリングなどで使えそうです。そういやInstagram使わなくなったなぁ・・・。
BootstrapベースのMaterial Designテーマ。製作者が言うには「GoogleはMaterial DesignでWebを美しくして、TwitterはBootstarpでレスポンシブかつエフェクティブに開発できるようにした。なのでこの2つを一緒にした」的な事を謳ってます。実際テンプレートページ（いくつか有料のものもあります）をいくつか見たけどスゴくよく出来てると思います。なんかのLP作る時なんかにちょうどイイテンプレートがチラホラありました。個人的にはMaterial Designにはあまり馴染みがないけど、これはなかなかナイスです。
SassとCompassを使って作られたCSSボタンのライブラリー。様々な形のボタンが用意されていて、またそれぞれ押下時にはアニメーションもします。導入方法についてはページ最下部に記述されています。シンプルで品のいいデザインなので、Sass導入済みのサイトやチーム内において使いやすそうです。ちなみに俺Compassって使った事ないんですよね。解説とか読んでると便利そうな気はするんだけど、なんか機会があれば使ってみたいなーと。
フォント名を入力する事で、それらがどんなサイトで使われているのかを調べてくれるサイト。例えばHelvetica Neueと入力すると、FacebookやYahoo、Twitter、eBay、Redditなどで使われている事が分かります。使われているフォントのランキングなどもあり、それを見るとArial、Verdana、Helvetica Neueなどがよく使われている事が分かります。サイト内で使うフォントチョイスに役立つかも。ちなみに自分はMonacoとかMyrad Proあたりが好きです。
