最近流行りの、長方形じゃないエッジを持つヘッダーの作り方が複数紹介されてます。斜めヘッダーだけでなく、ギザギザや円形なども用意されてます。imageを使う手法、SVGを使うもの、clip-pathを使うもの、border-radiusを使うもの、transform: skewを使うものが紹介されており、最後にそれぞれのメリットデメリットをまとめてある点がとってもナイス。border-radiusを使って円形にするってのは新しいなーと思いました。
動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。
FacebookがiOS 10のGUI素材を配布しています。フォーマットはPSDとSketch、あとオンラインのプロトタイピングツールのFigmaで使える形で用意されています。まずスゴいのがファイルサイズ。PSDでダウンロードしたら268MBもありました。ダミーで入っている写真類が多いためだと思うんですが、GUIパーツや場面数もかなり多く、はんぱなく気合の入ったGUI素材でした。UIデザインする際の心強い味方となりそうです。
シンプルな動画で紹介するレシピサイト。早送り動画の編集がかっこいいです。ページ左側にあるハッシュ一覧からは作る料理を、画面上部にある食べ物絵文字からは材料を軸にレシピを検索する事ができます。料理好きの方ぜひどうぞ。ちなみに俺は最近チャーハンをパラパラに作る事に執念を燃やしております。
最近Google Mapsをサイトに埋め込んだ時に、「そういやマップのテーマ変える方法あったなー」と思って探してみたところ見つけたのがこのサイト。テーマがいくつか紹介され、また導入方法についても掲載されています。JSぶち込んでテーマ適用するんですねこれ。色指定の変更程度ならCSSイジくるだけなのでカスタマイズもできそうです。サイトのデザインにマップのデザインを合わせたい時なんかに使えそうです。
Sketch用の、iOS / Andoroidアイコンテンプレート。編集から各サイズへの書き出しまで行う事ができます。またアイコンのコアな部分はシンボル化されているので（Photoshopで言うスマートオブジェクトみたいなもの）、1つ変更すれば全部変わります（iOSとAndroidでは共有化されていないようです）。それぞれデバイスのホーム画面やAppStoreではどのように見えるかのプレビューもできるようになっているので、確認しながら作りこむ事ができます。アイコン制作する時に使えそうです。
特定のサイトURLを入力する事で、そこで使われているCSSを細かく調査してくれるサイト。試しにこのブログのURLを突っ込んでみました。その結果ルールやセレクターの数を数値で表示され、また使われているフォントカラーやBGカラー、定義されているフォントサイズやフォントファミリー、メディアクエリーのブレイクポイントの数などを一覧で表示してくれました。もちろんCSSファイルサイズについても教えてくれます。またトップページには、GoogleやAppleなどのメジャーサイトへのショートカットも用意されています。一覧で分かりやすくズラっと表示されるので、必要のない指定を間引く時や、他サイトの調査時なんかに便利そうです。
解像度の低い画像をアップコンバートして、倍の大きさに拡大してくれるサイト。説明に「深層畳み込みニューラルネットワークによる二次元画像のための超解像システム」とあるように、用途としては主に2次元画像となるようです。aboutページを見ると、実際どのような結果が得られるかを見る事もできます。GIMPを使った拡大に比べて、格段に綺麗な状態なまま倍の解像度になってる様子が分かります（ボヤっとせずにカリっとした感じ）。試しに写真をぶっ込んでみましたが、細かい階調の変化が失われてイラストっぽい状態にアップコンバートされました。仕事とかで顧客から提供された画像素材が小さくて「もっと大きい画像ねぇのかよｒｆｔｇｙふじこ」状態な時に使えそうですねこれ。
