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