画像をアップロードして色覚異常をシミュレート出来る・「Coblis」
Coblis Coblisは画像をアップロードして、色覚異常を持った方がどう見えるかをシミュレートできるツールです。異常タイプも選べるようですね。シミュレート可能とは言っても、Hacker Newsで議論されている通り、人によって症状...
Resource - Webデザイン補助
書いたHTMLを任意のデバイスでリアルタイムプレビュー出来る・「snap tomato」
snap tomato snap tomatoは任意のデバイスでHTMLをリアルタイムプレビュー出来るツールです。別タブで開いても即反映されるので任意のデバイスで開けば、PCでエディタに書いたコードをスマフォやタブレットで即時確認出来...
シンプルなワイヤーフレーム作成ツール・「wireframe.cc」
wireframe.cc wireframe.ccはシンプルなワイヤーフレーム作成ツールです。既存のブラウザ風のキャンバス上にエレメントを配置し、ワイヤーフレームを作成する事が出来ます。エレメントはいくつかの色に変更したり、ボーダーの...
ドラッグ&ドロップでHTMLメールのスタイルを作成出来る・「BeeFree 」
BeeFree BeeFreeはHTMLメールのスタイリングをD&Dで作成出来るWebサービスです。用意されたエレメントをドラッグして配置、テキスト等を入力するだけ。幅の設定等も出来ます。毎度作り直すケースも考えられるのでこの手のツ...
CSSフレームワーク・Foundation5のチートシート・「Foundation CheatSheet」
Foundation CheatSheet Foundation CheatSheetはzurb製のRWD対応CSSフレームワークFoundation Ver.5のチートシートです。とても簡潔に、わかりやすく纏められています。実装例も...
Youtubeの動画のスタイルをカスタマイズして任意のWebサイトに埋め込む為のツール・「reEmbed」
reEmbed reEmbedはYoutubeのスタイルをカスタマイズして任意のWebサイトに埋め込めるようにするツールです。操作エリアのスタイルやロゴの挿入だけでなく、簡単な解析も可能のようです。スマフォやタブレットもサポートしてい...
任意の要素や要素間の幅等の距離をマウスホバーだけで計測出来るChromeエクステンション・「Dimensions」
Dimensions Dimensionsはマウスホバーのみで任意の要素内や要素間の距離等を図れるChromeエクステンションです。マウスホバーするだけなので融通が効かないケースもありますが、手軽で使いやすい印象でした。なかなかオスス...
カラフルなCSSグラデーションを作成出来る・「Colorful CSS Gradient Background Generator」
Colorful CSS Gradient Background Generator Colorful CSS Gradient Background Generatorは複数色を使ったCSSグラデーションを手軽に作成できるオープンソ...
RWDにも対応の、Webサイトにコメントを入れて共有出来るWebサービス・「coment.me」
coment.me coment.meはWebサイトのSSを取って任意の箇所にコメントを入れて共有出来るWebサービスです。モニタサイズを指定出来るのでレスポンシブWebデザインにも対応可能です。URLを発行してくれるので修正箇所の的...
Photoshop内でFont Awesomeを使えるようにする・「Font Awesome PS」
Font Awesome PS Font Awesome PSはPhotoshopでFont Awesomeを使えるようにするエクステンションです。Adobeが投稿したものとは異なるエクステンションの様です。Photoshop CC ...
Web上で公開されている高品質なフリーの画像を収集しているストックフォトサイト・「Pexels」
Pexels PexelsはWeb上のフリー利用可能で高品質な画像を収集しているストックフォトサイトです。画像はカテゴリ分けされ、探しやすくなっています。全てのライセンスはCC0だそうです。 Pexels
ダミー用のアイコンを配布する・「Lorem Icon」
Lorem Icon Lorem Iconはダミーとして利用する為のプレースホルダーアイコンを配布するWebサイトです。フリー利用可能なものなら何でもこの手の役割を果たしそうなのでこのサイトが大きな需要があるかは謎ですが、安心してモッ...
フリーで公開されている、パワフルなベクターデザインアプリ・「GRAVIT」
GRAVIT GRAVITはパワフルで先進的なベクターデザインアプリです。現在デスクトップアプリだけでなく、ブラウザ版が無料公開されています。なかなかの機能性という印象です。ぱっと見、個人的には苦手なUIでしたが、見た目より扱いやすそ...
綺麗な景色などの動画を無料配布するプロジェクト・「Mazwai」
Mazwai Mazwaiはいい感じの動画を無料で配布するプロジェクトサイトです。きれいな景色や、人物に焦点を当てたイメージビデオをダウンロードし、無料で利用する事が可能です。ライセンスはCCのようです。どこに書いてあるのかなと思った...
紙に描いたモックアップを撮影して実機で動作テスト出来る・「POP」
POP POPは紙に描いたモックアップを撮影し、実機で動作テストを確認出来るようにするスマフォアプリです。以前書いたClickDummyと同じコンセプトで、モックアップ同士をリンクで繋げることで擬似的に動作テストを行うことが可能です。...
Photoshopで2Dアニメーションを作るためのリソースをまとめている・「Photoshop Animation」
Photoshop Animation Photoshop AnimationはPSでアニメーションを作るための情報をまとめているWebサイトです。基本的にはAnimator's Toolbarというプラグインを利用して作成する為の情...
利用されているWebフォント名と、そのフォントの表示テストを行えるブックマークレット・「Type Sample」
Type Sample Type SampleはWebサイトの各エレメントで設定されているWebフォントの名前と、そのフォントを任意のテキストで表示テスト出来るブックマークレットです。任意のWebサイトで起動すると、各要素にカーソルを...
PhotoshopやBlender等のショートカットマップ・「Application Shortcut Mapper」
Application Shortcut Mapper Application Shortcut MapperはPhotoshopやBlender等のアプリのショートカットキーマップ。OSやアプリを選択すると、それぞれに割り当てられて...
ログイン画面やショッピングカート等の実装コードを配布する・「Cody」
Cody Codyはログイン画面やショッピングカートなど、Webプロジェクトでよく必要になるコンテンツのコードを配布するWebサイトです。現在配布されているものはRWDにも対応していますのでコンテンツにマッチしてれば工数を減らせるかも...
手軽にガイドとグリッドを追加できるPhotoshop拡張・「Griddify」
Griddify Griddifyは自動でグリッドやガイドを追加できるPsプラグインです。幅やグリッドの数値を設定するだけで引いてくれます。また、範囲内で引くことも可能のようです。動画が分かりやすいのでチェックしてみては如何でしょうか...
シンプルでフラットデザインなモバイル向けUIをPSDファイルで配布する・「UI Kit」
UI Kit UI Kitはモバイル向けのUIをPSDファイルで提供するキット。シンプルでフラットなデザインが素敵です。ライセンスもMITで配布してくれているので使いやすいのもメリットの一つですね。 UI Kit
PSDファイルからCSSやSVG、画像ファイルなどを取り出せる・「Avocode」
Avocode AvocodeはPSDからCSSやSVG、画像、フォントなどのデータを取り出せるツールです。現在はプライベートベータ版として公開されています。精度は分かりませんが、CSS Hatの開発者さんなので技術的には信用性はあり...