レスポンシブWebデザインのリソースをまとめているハブサイト・「Responsive Design Knowledge Hub」
Responsive Design Knowledge Hub Responsive Design Knowledge HubはRWDの情報を収集したナレッジハブサイトです。定義に始まり、チュートリアルやツール、インスピレーション向上...
Resource - Webデザイン補助
PSDファイルのバリデーションツール・「PSD VALIDATOR」
PSD VALIDATOR PSD VALIDATORはPSDファイルのバリデーションを行うWebアプリです。エラー等の基準は、Psを利用する際のエチケットをまとめたWebサイトのPhotoshopetiquette.comを基準とし...
RWDのワイヤーフレームを作成出来る・「Responsive Wireframes」
Responsive Wireframes Responsive WireframesはRWD向けのWebサイトのワイヤーフレームを作成出来る、というツール。画面サイズを見ながらレイアウトを作ることが出来ます。凝ったことは出来ませんが...
CSS3を手軽に試せるジェネレーター・「CREATE CSS3」
CREATE CSS3 CREATE CSS3は手軽にCSS3を試せるツールです。数値を入力すると、要素に反映され、コードも表示してくれます。シンプルなのでちょっと試したい、という時は便利かもしれません。 CREATE CSS3
任意のWebページにWebフォントを使った状態で表示確認できる・「TypeWonder」
TypeWonder TypeWonderは任意のWebページで、Webフォントを使用した状態の表示確認が出来るツール。URLを指定し、Webフォントを選択すると、そのWebフォントを使った状態でWebサイトが表示されます。確認はして...
Illustratorで使えるiOS7用のワイヤーフレームキット・「iOS 7 Wireframe Kit」
iOS 7 Wireframe Kit iOS 7 Wireframe Kitはイラレで使えるiOS7用のワイヤーフレーム作成キットです。ツールやナビゲーションなどの各種バーコンテンツやスイッチボタン、テーブル、アラートなどなど一...
SVGによる背景を作成出来る・「SVGeneration」
SVGeneration SVGenerationはSVGによる背景を作成出来るジェネレーターです。Easy Editで用意されたデザインの色を変更したり、Code Editでその用意された背景のSVGやCSSをカスタマイズすることも...
著作権フリーでクオリティの高い写真素材を10日に1回、10枚配布する・「UNSPLASH」
UNSPLASH UNSPLASHはクオリティの高い写真素材を定期的に配布しているTumblrのサイトです。10日に1回、10枚というのがルールみたい。肝心のライセンスは「いかなる権利も保有しない」CC0ですので安心して利用できますね...
CSSによるアニメーションエフェクトをまとめた・「EFFECKT.CSS」
EFFECKT.CSS EFFECKT.CSSはCSSによるアニメーションエフェクトをまとめたサイト。Githubでもソースを公開しています。今まで見かけたCSSエフェクトが勢ぞろいしている印象です。尚、ソース元は見出しのタイトル右上...
Google Web Fontのフォントの差分を確認出来る・「Tiff」
Tiff TiffはGoogle Web Fontでホスティングされているフォントを2つ指定して差分を確認出来るツールです。フォント名を入力し、任意のテキストを入力すれば文字同士が重なって表示されます。表示された文字はクリック...
別のブラウザで表示確認する際、URLのコピペを不要にするブックマークレット・「Catapulty」
Catapulty Catapultyは、別のブラウザで表示確認をしたい時にURLのコピペを不要にするブックマークレットです。閲覧中のページでThrowを起動し、別のブラウザでHitを起動させればThrowを起動したページが表示されま...
有名なサイトのUIを再現し、PSDで配布する・「Popular UIs」
Popular UIs Popular UIsは有名なサイトのUIを再現したPSDを配布するサイトです。HerokuやGitHub、Designer News、AppleやFacebookなどがあるようです。 Popular U...
Hacker Newsライクなデザイナー向けニュースサイト・「Designer News」
Designer News Designer NewsはHacker Newsのデザイナー版ニュースサイトです。登録ユーザーが投稿し、議論が展開される、というもの。コメント数から見てもまだそこまでユーザーが多いわけでは無さそうですね。...
iOS7向けのアイコン作成用Fireworksテンプレート・「Template for iOS 7 App Icons (FW)」
Template for iOS 7 App Icons (FW) Template for iOS 7 App Icons (FW)はFireworks向けのiOS7用アイコンテンプレートです。探せばPSDやSkechファイルも出て...
レスポンシブWebデザインの表示確認ツール・「Demonstrating Responsive Design」
Demonstrating Responsive Design Demonstrating Responsive DesignはレスポンシブWebデザインのデバイス別の表示を確認出来るツールです。URLを入力すればフレーム内に表示され...
FFFFOUND!からダミー画像を生成・「hhhhold!」
hhhhold! hhhhold!は、画像共有サイト、FFFFOUND!に上げられた画像をダミー画像にできるサービスです。サイズは固定サイズや任意のサイズで指定可能のようです。色合いも指定出来るみたいですね。 hhhhold!
カラーパレットを共有できる・「PLTTS」
PLTTS PLTTSはカラーパレットを共有出来るWebサービスです。カラーコードで検索すると、そのカラーが含まれるパレットを調べられるので参考にしたりインスピレーションの向上にもなるかもしれません。まだ数は多くないですが、シェアサー...
BootstrapなどのフレームワークもサポートのWin/Mac対応オーサリングソフトウェア・「Pingendo」
Pingendo 各種フレームワークがビルトインされたオーサリングツール・Pingendoです。日本語も問題なし。Windows版とMac版が用意されています。使ってみた感じ、割と使いやすい印象でした。今だけかもしれませんが無料で利用...
様々なスマフォやタブレット、PCなどのスクリーンのサイズを一覧化・「Screensiz.es」
Screensiz.es Screensiz.esはスマフォやタブレット、PCなどのスクリーンサイズを一覧化したWebサイトです。一覧テーブルではOSや普及率、サイズなどでソートも可能で、不要な項目は非表示にする事も出来ます。 ...
レスポンシブWebデザイン用のモックアップを作成できる・「FROONT」
FROONT FROONTは、ブラウザでレスポンシブWebデザインに対応したWebサイトのモックアップを作成出来るサービス。ドラッグ&ドロップを基本操作としているので手軽に作成できそう。利用にはユーザー登録が必要です。 FROO...
Retinaディスプレイ用の画像を作成できるPhotoshopアクション・「Retinize It」
Retinize It Retinize ItはiOSで採用されているRetinaディスプレイに対応する為の画像を作れるPhotoshopアクションです。@2xのファイルを作成する事ができます。ドロップシャドウを用いている場合は諸注意...
URLを入力すると、そのWebサイトの配色を取得する・「Web Colour Data」
Web Colour Data Web Colour DataはURLを入力すると、そのWebサイトで使われている配色を取得してくれるWebツールです。少々重いかもしれませんが、なかなか面白い。CSSからのみ所得するツールというのはよ...