[Color] LOL Colors – カラーパレットギャラリー
クールなカラーパレットをギャラリー形式で紹介するサイト。色にマウスオーバーするとHEX指定での値が出ます。紹介されている数はそれほど多くないけど、多分今後増えるんでしょう。配色決める際のネタ探しに使えそうです。
[CSS] text-spinners – テキストを使ったローディングスピナー
テキストを使ったローディングアニメーション。導入はリンク行を1行追記するだけ。配置はClass付けたspanタグを置けばイイみたいです。アニメーションさせるのに使っているのがテキストデータなので、ロードにはほとんど時間がかからないものと思われます。興味深いのが絵文字を使ったアニメーション。月の満ち欠けや地球の自転、走る人など、絵ヅラ的に連続している絵文字をアニメーションのコマに使っている点です。また「How it works」の項を見ると、どういう仕組みで動作しているのか分かります（これがまた超シンプル）。特にJSを使う事もなく、CSSだけで簡単に導入できる点も使い勝手が良さそうです。
[Web Application] Jpeg.io – どんな画像フォーマットでもJpegにできるコンバーター
どんなフォーマットのもの画像でも、Jpegに変換できる画像コンバーター。対応しているフォーマットはJPG, PNG, GIF, SVG, BMP, EPS, PSD, TIFF, WEBP。Webpってなんじゃい？と思って調べたところ、Googleが開発した画像フォーマットだそうです。こんなんあるんスね・・・。扱える画像フォーマットにベクター画像も含まれる点がナイスです（AIが入ってれば完璧だった）。汎用性も高いので、手元にPhotoshopとかSketchとかがない時に使えそうです。
[CSS] Flexbox Grid – フレックスボックスでレイアウトされたCSSグリッドシステム
FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。
[Generator] cssFilters.co – CSSフィルターの効果をリアルタイムに確認できるサイト
CSSフィルターの効果を、リアルタイム確認しつつ調整できるサイト。まずは画面上部にあるフィルター一覧から求める効果に近いものを選び、次に右側にあるスライダーを使って微調整します。納得のいくフィルターができたら「CSS CODE」タブ内にCSSコードが生成されているので、あとはそれをコピペして使うだけです。もちろんプリセット画像だけでなく、任意の画像をアップロードして使う事もできます。CSS直書きするよりもPhotoshopのように直感的に操作できるのが利点です。
[UI Design] UI Movement – クールなUI作例を動画で紹介するデザインギャラリー
クールなUI作例を、動画を使って紹介するデザインギャラリー。各作例のサムネールに付いてるPlayボタンを押す事で動画が再生されます。アニメーションやトランジションもUIの大事な要素なので、ソレ系のネタ探しする時に使えそうです。また各作例はパーツごとにタグ付けされているので、探したいパーツを見つけるのもサクっとできます。コレ系のギャラリーに多い「場面」ごとではなく、「機能やユーザーによる行為」による分類という点が特徴的だなーと思いました。
[Web Design] Snazzy Maps – Google Mapsのデザインテーマ配布サイト
最近Google Mapsをサイトに埋め込んだ時に、「そういやマップのテーマ変える方法あったなー」と思って探してみたところ見つけたのがこのサイト。テーマがいくつか紹介され、また導入方法についても掲載されています。JSぶち込んでテーマ適用するんですねこれ。色指定の変更程度ならCSSイジくるだけなのでカスタマイズもできそうです。サイトのデザインにマップのデザインを合わせたい時なんかに使えそうです。
[CSS] Simple CSS Media Queries – デバイスごとのメディアクエリー生成サイト
デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。