iPhoneで撮った複数のスクリーンショットを、連続する1枚の絵に結合してくれるiPhone App。スクリーンショットの撮影はiOS標準の「Homeボタン＋スリープボタン」で撮影し、その後Tailorにてマージするという流れのようです。会話の一覧やGoogle Mapsの情報一式を画像として保存する用途に使えるとサイトでは説明されていますが、Web制作者にとっては、制作中のサイトをiPhoneで表示した際のスクリーンショット保存に使えると思います。顧客にデザインカンプを送る時なんかに使えそうです。App内課金があるようですが、基本機能は無料で使えるようです。スマホ対応の仕事をよくする人なんかにオススメ。
レスポンシブレイアウトのパターンというか、手法をまとめたサイト。レイアウト、ナビゲーション、画像、ビデオなどのメディア類、フォーム、テキスト、モジュール類に分けて、それぞれ「PCサイトではこういう表示、スマホではこんな感じ」という感じで複数の手法を紹介しています。例えばレイアウトの項目では、スマホ表示時にどのようにカラムを落とすのか。また落としたカラムを隠すのであれば、どういう再出現手法があるのかなど細かく紹介しています。レスポンシブレイアウトでスマホ対応する際に、表現手法について顧客と相談する際にめっちゃ役に立ちそう。とってもナイスです。
レスポンシブレイアウトとフリック操作に対応したカルーセルメニュー。いわゆるJavascriptを使ったイメージスライダーです。モバイル対応を前提としたサイト制作で使えそうです。フリック操作ですが、タッチデバイスではもちろん、PCブラウザ内でもドラッグにより似たような操作ができます。これはちょっと珍しいかも。導入も簡単で、CSSとJSファイルを読み込むだけ。jQueryなどのJSフレームワークは特に使っていないようです。またオプションも豊富にあるので、様々なカルーセル表現に対応できそうです。ナイスです。
OGPでサイトのサムネール画像を指定した際に、実際にFacebook内で表示された時にどのように見えるのかをテストできるサイト。早い話がog:imageのシミュレーターです。og:imageで指定した画像がFacebook内で表示される時って、横長表示の時と正方形表示の時があるんですよね。なので1つの画像でどちらの比率でもそれなりにイイ感じに見えるよう作らなきゃいけない。このサイトに画像ファイルを放り込めば、OGP指定する前に見え方をテストする事ができます。ちなみにOGPの情報はFacebook内にキャッシュされるので、og:imageに限らず何か情報を更新した後はOpen Graph Object DebuggerにサイトURLを突っ込んで「Fetch new scrape information」すると、キャッシュが更新され幸せになれます。
メジャーサイトのスタイルガイドをまとめたサイト。いわゆるレイアウトやスタイルの適用に関するデザイン規定ですね。誰でも見れるようになっているという事はオープンなものなんでしょう。例えばスターバックスのスタイルガイドを見てみると、グリッドシステムについて、ブロックの使い方、プロモ用ページのレイアウト例、見出しや本文、アイコン類の使用について、JSウィジェットの使い方などが詳細に解説されています。大手サイトがどのようにサイト全体を通してブランドイメージを統一しているのか、これを見ると色々分かるような気がします。紹介されているサイトの数はまだそれほど多くはないけど、Web制作者にとってなかなか興味深い資料と言えそうです。
Web制作会社やフリーランスデザイナーのポートフォリオサイトをまとめたサイト。ポートフォリオサイトって、「自分こんな事できます」的なアピールをする場合が多いので、実験的なUIや遷移を持つサイトも結構ありますね。ちょっと変わった見せ方の手法を探る際に使えそうな気がします。しかし白背景のサイト多いなぁ・・・。
クールな404 Page Not Foundページを集めたデザインギャラリー。URLをタイプミスした時なんかに出てくるアレですね。Tumblrを使ってスクリーンショットが多数掲載されてます。404って作り手的には遊べるページなので、ユルい感じのものが多いです。あと内容的には「そんなページねぇYO！」というものなので、見る側をイラつかせない工夫の作例としても見る価値ありますね。
What the Fuck!?!?なモバイルサイト。Fワード伏せ字もなくそのまま使ってすいません。どんな感じでWTFなのかというと、PCで見ろって強要されたり、強引にモバイルアプリのダウンロードへ誘導されたりするアレゲなやつです。実際イラっとしますよねこういうの。モバイル全盛のこの時期にこの対応はねぇだろー的な。Web制作してる人にとっては、反面教師となりえるまとめかもしれません。
