[Mockup] MocKit 2.0 – 画像やWebサイトをiPhoneのモックアップにハメ込み合成できるサイト
任意の画像やWebサイトを、iPhoneのディスプレイ部分に表示させることのできるサイト。UIデザイン作例の確認や、Webのスマホ版レイアウトの動作確認に使えそうです。iPhoneも4色ラインナップされており、またHTMLとCSSでデザインされているのでソースコード一式をダウンロードする事もできます。ちょっとした確認作業や顧客へのデザイン確認などに使えそうです。
[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン
マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。
[Web Design] Startup Timelines – スタートアップ企業のWebデザインの変遷
世の中に星の数ほどあるWeb系企業が、サイトの立ち上げから今日に至るまでをスクリーンショットで見る事のできるサイト。トップ画面ではアニメーションを使った一覧で見る事ができ、詳細ページに入ると立ち上げから今までの変遷を時系列で見る事ができます。今じゃクールなデザインのサイトも、立ち上げ時はクッソダサかったんだなぁ・・・とか思いながら見ると感慨深いものがあります（それでも当時はそれがクールだったんだけどね）。個人的に特に興味深かったのが今はなきMacromedia。FlashとかDreamweaverを引っさげて、思いっきりAdobeに中指立ててたあの攻撃的な時代のWebサイトを見ると、なんだかWebの世界の移り変わりの速さというか、諸行無常みたいなものを感じます。
[Web Design] Google Design Resizer – レスポンシブレイアウトの動作確認に使えるサイト
レスポンシブにレイアウトされたサイトで、PC、タブレット、スマホそれぞれの解像度で表示した時の確認がまとめて行えるGoogleのサービス。よく使われる3つの異なる種類のデバイスでどのように表示されるのか、1度に確認できるので便利です。画面上部のURL入力欄に確認したいサイトのURLを突っ込むだけで確認が行えます。また画面右上にあるアイコンをクリックする事で、PC or タッチデバイスでのWidth設定を細かく切り替える事もできます。設定したブレイクポイントごとにちゃんと表示がされるかの動作確認に使えそうです。
[Freebie] Smartmockups – モバイルAppやPCのスクリーンショットを、各種デバイスのディスプレイに合成できるサイト
モバイルアプリやPCアプリのスクリーンショットを、各種デバイスのディスプレイ部分にハメ込み合成できるサイト。用意されているデバイスはiPhone、iPad、Mac、Apple Watch、Android端末など、多くの種類が用意されています。Apple Watchあるのがレアですね。モバイルApp制作してて、サイト内やチュートリアル画面で使い方を見せる場面の画像制作に使えそうです。サイト内でトリミングができる点もナイス。
[Web Design] Can I use… – Webの様々な技術を、各ブラウザがサポートしているかどうかをサクっと調べられるサイト
Webの様々な時術を、各ブラウザ（iOSやAndroid端末も含む）がどの程度サポートしているのかをサクっと調べる事のできるサイト。試しに「Flex」と入力すると、Flexboxのサポート状況が表示されました。背景が黒くなっているライン以降のバージョンでサポートされている、という見方です。また国の指定をしておけば、その国においてどの程度サポートブラウザが普及しているかも知ることが出来ます。ちなみにこのサイトで得られる内容は、The (Unofficial) CanIUse Embedを使う事でEmbed出力する事もできます。アンオフィシャルな方法らしいけど、サイト内で引用したい時に使えます。新しめのCSSプロパティを使おうかどうしようか判断する時に便利ですね。
[Sketch] Sketch App Rocks! – Sketchプラグインや各種リソースを紹介するサイト
Sketchのプラグインや知識、モックアップ類などの.sketchファイルなどの各種リソースを紹介するサイト。Sketchユーザーにオススメ。プラグイン、リソース、知識（チュートリアルとか）、イベント、その他とカテゴリー分けされて色々なものが紹介されています。右上の「＋」マークから自分で投稿する事もできます。
[Misc] This Redditor Is Turning Random People’s Photos Into Movie Posters – どんな写真でも映画のポスターにしてしまう職人さん（技術の無駄遣い）
どんな写真でも映画のポスター風に加工してくれる人がRedditで話題になっています。「あーこの手の職人さんてどこの国にもいるんだなー」とか思って見てみたらビックリしました。クオリティがはんぱない。加工技術といい発想といい、プロの仕事ですねこれ。特にスゲぇなーって思うのが発想の柔軟さ。元がなんでもない写真なのに見事に「何か意味がありそうな」1枚に変化しています。素材のロテイトやトリミングによって意味を持たせるという手法が多い気がします。ネタとしてもスゴいんだけど、グラフィック・デザインのネタ帳にもなりそうです。リンク先は彼の投稿をまとめた記事だけど、Redditの方ではまだ続いているようで、新しい作例が随時追加されています。
This Redditor Is Turning Random People’s Photos Into Movie Posters