Resource - Archives

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

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

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

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

jQueryを使ってWin8のMetroライクなUIを実装・「Metro JS」

Metro JS Metro JSはWindows8のMetroライクなUIを実装するjQueryのスクリプトです。コンテンツのスライドやフリップエフェクトでMetroっぽいUIを構築することが出来ます。また、デザインのテーマジェネレ...
Ads

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サイトです。フォント別にカテゴリ分けしてあるみたい。まだ数は多くありませんが、増えれば良いインスピレーションを期待で...

著作権フリーでクオリティの高い写真素材を10日に1回、10枚配布する・「UNSPLASH」

UNSPLASH UNSPLASHはクオリティの高い写真素材を定期的に配布しているTumblrのサイトです。10日に1回、10枚というのがルールみたい。肝心のライセンスは「いかなる権利も保有しない」CC0ですので安心して利用できますね...

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デザインに対応させるツールです。指示に従って入力すると...

CSSによるアニメーションエフェクトをまとめた・「EFFECKT.CSS」

EFFECKT.CSS EFFECKT.CSSはCSSによるアニメーションエフェクトをまとめたサイト。Githubでもソースを公開しています。今まで見かけたCSSエフェクトが勢ぞろいしている印象です。尚、ソース元は見出しのタイトル右上...

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

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

主要ソーシャルサイトのWebアイコンフォント・「Socialicious」

Socialicious Socialiciousは主要なソーシャルサイトのアイコンをWebフォントにしたもの。Twitterやflickr、dribbble、githubやFacebook、tumblr、Youtubeなど、一通り揃...

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

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

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

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

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

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

CSSのセレクターの知識を再確認できるクイズ・「Tricky CSS Selectors Quiz」

Tricky CSS Selectors Quiz Tricky CSS Selectors QuizはCSSのセレクタに関するクイズサイトです。表示されえたセレクタの影響を受ける列をクリックするだけの簡易的なものですがこういう形で見...

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

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

モバイルファーストなレスポンシブWebデザイン向けCSSフレームワーク・「csswizardry-grids」

csswizardry-grids csswizardry-gridsはモバイルファーストなCSSフワームワークです。購読しているcsswizardry.comのフレームワークなので興味が湧いた次第です。多段ネストも可能でclearも...

別のブラウザで表示確認する際、URLのコピペを不要にするブックマークレット・「Catapulty」

Catapulty Catapultyは、別のブラウザで表示確認をしたい時にURLのコピペを不要にするブックマークレットです。閲覧中のページでThrowを起動し、別のブラウザでHitを起動させればThrowを起動したページが表示されま...

Markdown記法に対応したデータベース不要のOSSのCMS・「Pico」

Pico PicoはMarkdown記法で編集できるオープンソースのCMSです。MySQLなどのデータベースは不要、.mdファイル(Markdown)を生成して固定のページとして表示するとの事です。デザインテーマにはテンプレートエンジ...
Ads