任意のWebページにWebフォントを使った状態で表示確認できる・「TypeWonder」
TypeWonder TypeWonderは任意のWebページで、Webフォントを使用した状態の表示確認が出来るツール。URLを指定し、Webフォントを選択すると、そのWebフォントを使った状態でWebサイトが表示されます。確認はして...
Resource - シンプル
WebサイトのスクリーンショットをiPhoneやiPad、Androidなどを模したイラストと合成できる・「MockUPhone」
MockUPhone MockUPhoneはiPhoneやiPad、Androidなどを模したイラストにスクリーンショットを合成出来る、というモックアップツール。そのデバイスで閲覧しているような画像を手軽に作ることが出来ます。 ...
YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」
Embed Responsively Embed ResponsivelyはYoutubeやVimeo、Googleマップ等の埋め込み可能なサービスのコンテンツをレスポンシブWebデザインに対応させるツールです。指示に従って入力すると...
HTML5製のオンラインモックアップツール・「mocknow」
mocknow mocknowは、HTML5で作られたオンラインモックアップツール。出来る事はシンプルですけど、最低限の事は出来るみたい。サイズの変更がちょっと分かりにくいんですけど右下で変更できます。こちらを選択するかどうかは置...
CSSフレームワークのToastをベースとしたWordPressテーマ・「Toastpress」
Toastpress ToastpressはシンプルなcssフレームワークのToastをベースとしたWordPressテーマです。floatを使わず、inline-blockを使ってグリッドレイアウトを作っているのでie7には対応して...
レスポンシブWebデザインの表示確認ツール・「Demonstrating Responsive Design」
Demonstrating Responsive Design Demonstrating Responsive DesignはレスポンシブWebデザインのデバイス別の表示を確認出来るツールです。URLを入力すればフレーム内に表示され...
カラーパレットを共有できる・「PLTTS」
PLTTS PLTTSはカラーパレットを共有出来るWebサービスです。カラーコードで検索すると、そのカラーが含まれるパレットを調べられるので参考にしたりインスピレーションの向上にもなるかもしれません。まだ数は多くないですが、シェアサー...
カウントダウンをGIFアニメで作成出来る・「Gif Countdown」
Gif Countdown Gif CountdownはよくあるカウントダウンタイマーをGIFで作れるWebツールです。需要はともかく技術が面白かったです。色の変更やタイムゾーンの指定も可能ですが、含まれるテキストは今の所、固定のよう...
様々なスマフォやタブレット、PCなどのスクリーンのサイズを一覧化・「Screensiz.es」
Screensiz.es Screensiz.esはスマフォやタブレット、PCなどのスクリーンサイズを一覧化したWebサイトです。一覧テーブルではOSや普及率、サイズなどでソートも可能で、不要な項目は非表示にする事も出来ます。 ...
Webサイトのサイトマップを作る為のCSS・「SlickMap CSS」
SlickMap CSS SlickMap CSSは、サイトマップを作る為のCSSです（sitemap.xmlではなく、人用のサイトマップ）。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成す...
レスポンシブWebデザイン対応のシンプルで軽量なグリッドシステム・「.FITGRD」
.FITGRD .FITGRDはレスポンシブWebデザインにも対応したグリッドレイアウトを構築する為のCSSです。フレームワークではない、との事です。（当記事では一応フレームワークのカテゴリに含めています）CSS自体は非圧縮でも4KB...
描いた絵をGifアニメに出来るペイントツール・「GIFPaint」
GIFPaint GIFPaintはGifアニメを作る為のﾍペイントツールです。ちょっとネタ的なツールですが、面白かったので。絵を1枚1枚描いていき、Encoded GIFsを押せばダウンロード可能になります。そのまま直接Tumblr...
Webフォントとしても使えるMetroスタイルのアイコンセット・「Metrize Icons」
Metrize Icons Metrize IconsはMetroスタイルなアイコンのセットです。シンプルで使いやすそうですね。SVGやWebフォントも用意されています。ライセンス形態は明示されていませんが、商用で使えて帰属表記の必要...
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」
Topcoat TopcoatはAdobe社が提供するOSSのCSSフレームワークです。シンプルで使いやすいUIでレスポンシブWebデザインにも対応しています。モバイル版はタップしやすいようにエレメントの高さをやや高くしてくれてるのも...
フラットなデザインでよく使われてる色をまとめている・「Flat UI Colors」
Flat UI Colors Flat UI Colorsはフラットなデザインで良く用いられている色をまとめたWebサイトです。確かに見かける色合いはこんな感じですね。コンテンツに合うようなら導入も考えたいですけどその機会は今の所無さ...
Retinaディスプレイ用の画像を作成できるPhotoshopアクション・「Retinize It」
Retinize It Retinize ItはiOSで採用されているRetinaディスプレイに対応する為の画像を作れるPhotoshopアクションです。@2xのファイルを作成する事ができます。ドロップシャドウを用いている場合は諸注意...
SassのコードをCSSに即時変換・「SassMeister」
SassMeister SassMeisterはSass記法で書いたコードを即時CSSに変換するツールです。左に書き込めばCSSが右側に表示されます。OSSとしてGithubでも公開されています。Rubyで書かれているようですね。 ...
ミニマルなマークアップで書かれたCSSフレームワーク・「Markup Framework」
Markup Framework Markup Frameworkはミニマルなマークアップで書かれた、モバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。必要最低限、をコンセプトに構成したようです。ベースとし...
CSSのショートハンドを解除してから整形する・「FESS」
FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...
正規表現をブラウザ上で実行テスト・「refiddle」
refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle
ダミー画像を手軽に作成する・「PlaceIMG」
PlaceIMG PlaceIMGはダミー画像生成サービスです。マウスでスライダーを動かしてサイズを決めたり、数値でサイズを指定、ダミー画像のカテゴリの指定、フィルターでセピアやモノクロ化なども出来ます。 PlaceIMG
CSSによる三角形をジェネレートできる・「CSS triangle generator」
CSS triangle generator CSSで三角形を簡単に作成出来るツールです。オールドブラウザのシェアもかなり低下していて良い傾向ですけど、まだ対応する必要があるケースもあるので覚えておくと便利かもしれない。 C...