Resource - Webディレクター向け

入力したHTMLのclassやidを元にCSSの雛形を作る・「extractCSS」

extractCSS extractCSSは入力されたHTMLのclassやidを元にCSSを作るWebツール。Githubにてソースも公開されています。Bear CSSと同じようなツールですが、extractCSSは作成時にclas...

Chrome Developer ToolsやSublime Text 2のテーマをギャラリーにしている・「devthemez」

devthemez devthemezはChromeのデベロッパーツールやSublime Text2のテーマをギャラリーにしているWebサイトです。毎日のように見る画面なので出来る限り見やすく読みやすいテーマにしたい所ですね。 ...

商用でも使えるシンプルなアイコンを大量に配布する・「Simple Icons」

Simple Icons Simple Iconsはシンプルなアイコンを大量に配布するWebサイトです。商用でも無料で利用出来るとの事。PNGはサイズも64 x 64、128 x 128、256 x 256、512 x 512などが揃...
Ads

デバイス別にレイアウトを作れるレスポンシブWebデザイン用CSS作成ツール・「Responsive Web Css」

Responsive Web Css Responsive Web Cssは、iPhoneやiPad、PCなどのデバイスの画面サイズ毎にレイアウトを作れるレスポンシブWebデザイン向けのCSS作成ツール。ボックスはカラムを追加して幅を...

任意のWebページにWebフォントを使った状態で表示確認できる・「TypeWonder」

TypeWonder TypeWonderは任意のWebページで、Webフォントを使用した状態の表示確認が出来るツール。URLを指定し、Webフォントを選択すると、そのWebフォントを使った状態でWebサイトが表示されます。確認はして...

HTML5製のアニメーションエフェクトコンテンツを作れる・「 HTML5MAKER」

HTML5MAKER HTML5MAKERは、HTML5製のアニメーションエフェクトのあるコンテンツを作成できるWebアプリです。専門的な知識は不要で、素敵なエフェクトのあるビジュアルコンテンツを作成できます。テンプレートも用意されて...

WebサイトのスクリーンショットをiPhoneやiPad、Androidなどを模したイラストと合成できる・「MockUPhone」

MockUPhone MockUPhoneはiPhoneやiPad、Androidなどを模したイラストにスクリーンショットを合成出来る、というモックアップツール。そのデバイスで閲覧しているような画像を手軽に作ることが出来ます。 ...

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をカスタマイズすることも...

Webフォントを使ったWebデザインをコレクションしている・「Typewolf」

Typewolf TypewolfはWebフォントを使ったWebデザインをコレクションしてショーケースにしているWebサイトです。フォント別にカテゴリ分けしてあるみたい。まだ数は多くありませんが、増えれば良いインスピレーションを期待で...

UIアニメーションの動きをgifアニメでTumblrに収集している・「UI Animations」

UI Animations UI AnimationsはUIアニメーションをGifアニメにしてTumblrで収集しているサイトです。実際に触って体感することも大事ですが、こうして見るだけでも参考になりそうですね。まだ数は少ないですが、...

Webフォントを使ったWebデザインのギャラリー・「WebfontsCorner 」

WebfontsCorner WebfontsCornerはWebフォントを使っているWebデザインをギャラリーにしているコレクションサイトです。まだ数は少ないですが、シンプルで見やすい印象ですので覚えておいて損は無さそうです。 ...

YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」

Embed Responsively Embed ResponsivelyはYoutubeやVimeo、Googleマップ等の埋め込み可能なサービスのコンテンツをレスポンシブWebデザインに対応させるツールです。指示に従って入力すると...

Google Web Fontのフォントの差分を確認出来る・「Tiff」

Tiff TiffはGoogle Web Fontでホスティングされているフォントを2つ指定して差分を確認出来るツールです。フォント名を入力し、任意のテキストを入力すれば文字同士が重なって表示されます。表示された文字はクリック...

フラットなWebサイトを構築する為のフロントエンドフレームワーク・「Furatto」

Furatto FurattoはフラットなWebデザインのサイトを迅速に構築する為のフロントエンドフレームワークです。Sassを使ってるみたい。ボタンやフォーム、テーブルからページネーションやツールチップなどのコンポーネント、カルーセ...

HTML5製のオンラインモックアップツール・「mocknow」

mocknow mocknowは、HTML5で作られたオンラインモックアップツール。出来る事はシンプルですけど、最低限の事は出来るみたい。サイズの変更がちょっと分かりにくいんですけど右下で変更できます。こちらを選択するかどうかは置...

CSSで装飾されたチェックボックスのコードをダウンロード出来る・「CSS Checkbox」

CSS Checkbox CSS CheckboxはCSSで装飾されたチェックボックスのソースコードをダウンロードできるサービスです。Checkbox CSS Styleで装飾の種類を選択してソースをコピペするだけ。ラベルの背景の画像...

WordPressのウィジェットやタクソノミー、ショートコード等を手軽に作成出来る・「Generate WP」

Generate WP Generate WPはウィジェットやタクソノミー、ショートコード等を手軽にオンライン上で作成出来るジェネレーターです。地味に面倒な雛形部分のコードを提供してくれます。カスタマイズ前の雛形としても使えそうです。...

要素をレンガ状に並べるライブラリ・「MASON.JS」

MASON.JS MASON.JSは要素をレンガ状に隙間なく並べてくれるライブラリです。jQueryに依存しています。余白を完全に埋める、という目的で作ったみたいですね。圧縮版で4KBほどなのも嬉しいです。 MASON.JS

HTML5やCSS、jQueryなどのAPIのドキュメントサイト・「DevDocs」

DevDocs DevDocsはHTML5やCSS、jQueryなどのAPIに関する情報をまとめたサイトです。かなりの情報量で綺麗に纏められているのでとても探しやすい印象でした。キーワードを入力するだけで即時に候補を抽出するインスタン...

ソーシャルコーディングが可能なオンラインIDE・「FriendCode」

FriendCode FriendCodeはブラウザで他のユーザーと共有しながら使えるオンラインのIDEです。プライベートなリポジトリも持てるみたい。アカウントはFacebookやGithubでログイン出来ます。他にもいろいろ。結構高...

SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」

Buttons ButtonsはSASS/Compassで構築されたCSSボタンのプロジェクトです。classを振るだけで様々なボタンに装飾する事が出来る様になっています。Font Awesomeを使ってアイコンを加えたりCSS3でぼ...
Ads