SVGによる背景を作成出来る・「SVGeneration」
SVGeneration SVGenerationはSVGによる背景を作成出来るジェネレーターです。Easy Editで用意されたデザインの色を変更したり、Code Editでその用意された背景のSVGやCSSをカスタマイズすることも...
Resource - ユニーク
UIアニメーションの動きをgifアニメでTumblrに収集している・「UI Animations」
UI Animations UI AnimationsはUIアニメーションをGifアニメにしてTumblrで収集しているサイトです。実際に触って体感することも大事ですが、こうして見るだけでも参考になりそうですね。まだ数は少ないですが、...
Google Web Fontのフォントの差分を確認出来る・「Tiff」
Tiff TiffはGoogle Web Fontでホスティングされているフォントを2つ指定して差分を確認出来るツールです。フォント名を入力し、任意のテキストを入力すれば文字同士が重なって表示されます。表示された文字はクリック...
CSSのセレクターの知識を再確認できるクイズ・「Tricky CSS Selectors Quiz」
Tricky CSS Selectors Quiz Tricky CSS Selectors QuizはCSSのセレクタに関するクイズサイトです。表示されえたセレクタの影響を受ける列をクリックするだけの簡易的なものですがこういう形で見...
Hacker Newsライクなデザイナー向けニュースサイト・「Designer News」
Designer News Designer NewsはHacker Newsのデザイナー版ニュースサイトです。登録ユーザーが投稿し、議論が展開される、というもの。コメント数から見てもまだそこまでユーザーが多いわけでは無さそうですね。...
Web上でアイコンフォントを作成できる・「Fontastic」
Fontastic Fontasticはオンラインでアイコンフォントを作成出来るWebサービスです。用意されたアイコンから必要な物を選択してダウンロードしたり、SVGをアップロードしてオリジナルのアイコンフォントを作成する事も出来るみ...
カウントダウンをGIFアニメで作成出来る・「Gif Countdown」
Gif Countdown Gif CountdownはよくあるカウントダウンタイマーをGIFで作れるWebツールです。需要はともかく技術が面白かったです。色の変更やタイムゾーンの指定も可能ですが、含まれるテキストは今の所、固定のよう...
Webサイトのサイトマップを作る為のCSS・「SlickMap CSS」
SlickMap CSS SlickMap CSSは、サイトマップを作る為のCSSです（sitemap.xmlではなく、人用のサイトマップ）。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成す...
描いた絵をGifアニメに出来るペイントツール・「GIFPaint」
GIFPaint GIFPaintはGifアニメを作る為のﾍペイントツールです。ちょっとネタ的なツールですが、面白かったので。絵を1枚1枚描いていき、Encoded GIFsを押せばダウンロード可能になります。そのまま直接Tumblr...
手軽にHTML形式のプレゼンテーションを作成できる・「Slid.es」
Slid.es Slid.esは、HTML形式のプレゼンテーションスライドを手軽に作成、共有出来るWebサービスです。モバイルにも対応しています。WYSIWYGを使ってスライドを作成していきます。アカウントはGoogleやFacebo...
PhotoshopをWebデザインで使う際のファイルの扱い方をまとめる・「The Photoshop Etiquette Manifesto」
The Photoshop Etiquette Manifesto The Photoshop Etiquette ManifestoはWebデザインをする上での、Photoshopのファイルの扱い方のエチケットをまとめているサイトで...
素敵なデザインのランディングページをまとめたギャラリー・「Land-book」
Land-book Land-bookは素敵なデザインのランディングページを収集しているギャラリーサイトです。海外のなので参考になるかどうかは別の話ですが、覚えておいて損は無いかと思います。 Land-book
Webサイトのスクリーンショットを撮って注釈をつけて共有できる・「Bounce」
Bounce BounceはWebサイトのスクショを撮って、任意の箇所に注釈をつけてシェア出来るツールです。Web上の相手に的確に場所を伝えるのに便利そうですね。 Bounce
Web制作に役立つツールをまとめている・「WebPlatformTools.org」
WebPlatformTools.org WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 Web...
ソースコードを画像化してInstagramライクに装飾できる・「Instacode」
Instacode Instacodeはソースコードを画像化してInstagramライクに装飾できるWebサービスです。マウスホイールで拡大、ドラッグで角度を設定できます。ネタ要素が強いツールですが、一部の方には需要があるかも。 ...
PDFのグラフ用紙をオンラインで生成出来る・「Paperkit」
Paperkit Paperkitは、オンラインでグラフ用紙を生成出来るツール。サイズ、グリッドの幅や色を指定。PDFはBase64形式で発行されます。 Paperkit
様々なWebサイトのワイヤーフレームを紹介する・「Wireframe Showcase」
Wireframe Showcase Wireframe Showcaseは様々なWebサイトのワイヤーフレームを紹介するギャラリーサイト。実際に公開されているサイトとそのワイヤーフレームをギャラリーとして紹介しています。 Wi...
複数ブックマークレットを一纏めに・「Bookmarklet Combiner」
Bookmarklet Combiner Bookmarklet Combinerは複数のブックマークレットを一つのブックマークレットに纏めてくれるWebツールです。多数のブックマークレットを使用しているなら使う価値はありそう。 ...
HTMLを読みこませてCSSのclass,idをテキスト化・「Bear CSS」
Bear CSS Bear CSSはHTMLファイルからclassやIDを抜き出し、CSSの雛形を作成してくれるツールです。 Bear CSS