Webページの任意の箇所をハイライトして共有できる・「inFocus.cc」 inFocus.cc inFocus.ccは特定のWebページの任意の箇所をハイライトさせて共有できるWebツールです。画像として保存されるものではなく、マウスで設定して保存するとURLが発行される、というもの。特定の箇所をシンプルに...2013.04.01 | 10時44分29秒
PNGやPSDファイルとしてエクスポートできるグリッド生成ツール・「Modular Grid Pattern」 Modular Grid Pattern Modular Grid PatternはPNGやPSD形式でエクスポートできるグリッド生成ツールです。幅やカラム数を指定してダウンロードするだけ。PhotoShopのエクステンションもあるみ...2013.03.31 | 11時42分05秒
オンラインでシンプルなダイアグラムを生成出来る・「Graphity Diagram Editor」 Graphity Diagram Editor Graphity Diagram Editorはオンラインでシンプルなダイアグラムを生成できるWebツールです。マウスで直感的に作成、画像にエクスポートすることも出来ます。また、作成途中...2013.03.29 | 11時52分41秒
CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」 CSS-SHACK CSS-SHACKはChromeでCSS3を使ったエレメントを作成できるアプリケーションです。右のツールボックスで装飾するとリアルタイムで反映、そのままソースをエクスポートできるようになっています。レイヤー機能も付...2013.03.28 | 12時56分02秒
ベクターオブジェクトをソースコードに変換するIllustratorの拡張・「Drawscript」 Drawscript Drawscriptは、Illustratorで書いたベクターオブジェクトを様々なコードにコンバートするエクステンションです。拡張を使うと、リアルタイムでActionScript3.0、やCanvas、Objec...2013.03.27 | 10時32分33秒
一度だけダウンロードできるファイル転送サービス・「JustBeamIt」 JustBeamIt JustBeamItは一度だけダウンロードできるファイル転送サービスです。ファイルをドラッグ&ドロップするとアップロードされ、URLが発行されるので送りたい相手にそのURLを知らせる、というシンプルなもの。ファイ...2013.03.26 | 10時08分46秒
学生によって作成された作品のみを掲載しているWebギャラリー・「Student Show」 Student Show Student Showは、学生の方が作成した作品のみを紹介するWebギャラリーです。掲載されているものはイラストやロゴ、アニメーションなど様々。学校名でカテゴライズされています。Behanceの姉妹サイトの...2013.03.24 | 11時42分13秒
Font Awesomeのアイコンを利用したボタンを作成出来る・「CSS3Butt.in」 CSS3Butt.in CSS3Butt.inは、Font Awesomeで公開されているフォントを使ったボタンを手軽に作成出来るツールです。使いたいアイコンを選択し、色やテキスト、サイズを設定してコードをコピペするだけ。 CS...2013.03.23 | 12時09分43秒
猫の画像をダミー画像として使える・「{placekitten}」 {placekitten} {placekitten}は猫の画像をダミー画像として利用出来るツールです。URLでサイズやモノクロ指定をするだけでダミー画像が表示されます。 {placekitten}2013.03.23 | 12時00分47秒
Sass用のカラー調整Webツール・「SassMe」 SassMe SassMeはリアルタイムでSass用のカラー調整を行えるWebツールです。カラー関数のサブセットを視覚化してくれる、というシンプルなもの。使い方はベースカラーを入力してスライダーをマウスで操作するだけ。Githubでも...2013.03.21 | 10時40分58秒
transition-timing-functionのcubic-bezier関数を動作を見ながら設定出来る・「Visualize and manipulate CSS transition functions」 Visualize and manipulate CSS transition functions Visualize and manipulate CSS transition functionsはCSS3のtransition-t...2013.03.18 | 9時48分18秒
デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」 Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...2013.03.17 | 19時32分46秒
様々なソーシャルメディアサイト内で使用するアイコンや背景を作成・「Social Media Image Maker」 Social Media Image Maker Social Media Image Makerは主要なソーシャルメディアサイト内で使うアイコンや背景などを作成出来るジェネレーターです。それぞれのソーシャルサイトで利用出来る画像...2013.03.17 | 10時27分59秒
動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」 Stylie Stylieは動作デモを確認しながらCSS3のkeyframeを利用したアニメーション用コードを作成するOSSのツールです。右のボックスで軸等をセッティングしていきます。MITライセンスでGithubでも公開されています...2013.03.16 | 9時38分03秒
モバイルファーストなCSSフレームワーク・「Blok Grid System」 Blok Grid System Blok Grid SystemはモバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。スマフォ、タブレットを中心に考えたCSSで構築されています。IE8にも対応。 Bl...2013.03.15 | 13時24分38秒
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」 Plunker Plunkerはjsfiddleやjsbinのようにブラウザ上でJavaScriptコードを開発、実行し、共有もできるWebツールです。アーカイブもあるので探しやすい印象です。書いたコードは即時反映されます。また、Gi...2013.03.13 | 9時40分21秒
CSSタイポグラフィの使用例をコレクションしている・「Typespiration」 Typespiration TypespirationはWebフォントとCSSによるタイポグラフィをコレクションしているギャラリーサイトです。CSSコード、カラースキーム、利用したフォントと使用例を紹介しています。 Typesp...2013.03.12 | 10時15分45秒
動作も軽く使いやすいモックアップ作成ツール・「Moqups」 Moqups Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Mo...2013.03.11 | 10時59分14秒
シンプルなコードスニペット共有サービス・「Code Pad」 Code Pad Code Padはシンプルなスニペット共有サービスです。招待制となっていますので投稿テスト等のノイズもありません。クリック一発でコピーしたりDL可能となっています。 Code Pad2013.03.11 | 10時53分11秒
オン/オフの切り替えスイッチをスタイル・「On/Off Flipswitch HTML5/CSS3 Generator」 On/Off Flipswitch HTML5/CSS3 Generator On/Off Flipswitch HTML5/CSS3 Generatorは、オン/オフの切り替えスイッチをスタイルできるジェネレーターです。スマフォライ...2013.03.10 | 12時24分51秒
画像をドラッグ&ドロップでアップロードし、DataスキームURIに変換する・「Duri.me」 Duri.me Duri.meは画像をD&Dでアップロードし、DataURIに変換するジェネレーターです。作成後はCSS、imgタグ等をコピーできます。 Duri.me2013.03.10 | 11時04分21秒
レスポンシブ且つグリッドなレイアウト生成ジェネレーター・「gridpak」 gridpak gridpakは、レスポンシブWebデザインに対応したグリッドレイアウトジェネレーターです。従来のグリッドジェネレーターにブレークポイントを設定出来る項目が付いているので操作も楽に行えます。 gridpak2013.03.09 | 15時42分27秒