WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

Web 開発に便利なジェネレータ 50+

このブログでは、毎週末に「今週の話題」として新たに見つけた情報や Web サービスなどを簡単にご紹介しています。それらの中には、独立した記事にはできていないものの、とても有用な情報・サービスがたくさんあります。だいぶ数も溜まってきたので、折りを見てまとめ記事にしていこうかと思っています。

本日はその第一弾として、ジェネレータ系のサービスを集めてみました。多くは皆さんもご存知かと思いますが、まだ使ったことがないサービスがあれば、ぜひ試してみてください!

CSS レイアウトジェネレータ

CSS ez
ビジュアルな CSS レイアウト作成ツール。 FC2, livedoor, Ameba など多数のブログサービス用のテンプレートを生成できる。
templatr
WordPress のテンプレートを作成するツール。基本レイアウトが多彩に用意されている。ただ、各要素は CSS パラメータを直接指定する感じなので、 CSS を理解していないと厳しいかも。
CSS Menu Builder
水平(タブ)メニュー、垂直メニュー、ブレッドクラムの三種類のメニューを作成できる。いずれも多彩なテンプレートが用意されていて、なかなか実用的。
IzzyMenu
サブメニュー付きのメニューバーを作成できる。背景画像などのライブラリは無いが、他のユーザーが作ったメニューのカタログを参照することができる。サブメニューを作るのにログインが必要なのが難点。
CSS Menu Generator
ドロップダウンするサブメニュー付きのメニューバー、水平(タブ)メニュー、垂直メニューの三種類のメニューが作成できる。デザインの細かいカスタマイズはできず、プリセットされているものを選んで項目を編集するだけ。しかし、こちらはログインなしで使える。
pForm
インタラクティブに高機能なフォームがデザインできる。単純なフィールドだけでなく、日付・時刻ピッカーなどの高度なフィールドも用意されている。ただし、英語圏向けなのが玉に瑕。
CSS Text Wrapper
自由形状に対してのテキストの回り込みを実現するツール。日本語でも大丈夫みたい。 Flash によるツールで左右の境界線を編集し、結果は style 属性、 CSS&XHTML 、 JavaScript の 3 つの形式で取得できる。
CSS Type Set
リアルタイムプレビューを見ながらフォント関連の CSS パラメータを調整できる。シンプルで使いやすい。
TypeTester
3 つのフォント設定を比較しながら編集できる。 font-weight や font-style などの各設定の結果が一覧されているのが好みの分かれるところか。
RoundedCornr
画像を使った丸角・グラデーション付きのボックスを作成する。結果は HTML, CSS, 画像x5 として取得できる。

画像加工

Peacock
モジュールを繋いで新たに画像を生成したり、元画像をさまざまに加工できるツール。使いこなすのは大変そうだけど、すごく強力なツールになりそう。
dumpr
画像をアップロードするだけで、さまざまな加工を施すフィルター(?)をかけてくれるサービス。ユニークで癖の強いフィルターが多いので使いどころが難しいが、うまく使えば効果大。
PhotoFunia
自分の顔写真などをアップロードすると、さまざまな風景に合成してくれる。ジェダイとか、スーパーマンとか、パイレーツ・カリビアンとか、いろいろなれる(笑)。
BlurHighlight
画像をアップロードし、マウスドラッグで矩形領域を指定するだけで、その部分をハイライト表示してくれる。スクリーンショットの該当部分を目立たせたいときに便利。
RoundPic
画像をアップロードするだけで丸角加工してくれる。角の丸み調整や、一部の角のみの加工も可能。
Round My Corners
画像に丸角加工したのちにカバーフロー風のリフレクションも付加してくれる。
WaveMyPic
画像に水面のようにアニメーションするリフレクションを付加してくれる。右下にサイトロゴが入ってしまうのが難点。
3D-box maker
前面、側面、上面の 3 つの画像を指定すると、ソフトウェアパッケージ風の 3D 画像を生成してくれます。オリジナルソフトの配布サイトなどで使うと良さそう。
GIFMAKE
複数の画像ファイルをアップロードすると、それらをまとめて GIF アニメーションに変換してくれる。リピート回数や全体の画像サイズをどの画像にあわせるかが指定できる。

ボタンジェネレータ

As Button Generator
リアルタイムプレビューを見ながらインタラクティブにボタンが編集できる。機能的にも自由にテキストや画像を配置できたり、ベベルやドロップシャドウのエフェクトがかけられたりと非常に秀逸。
Button Boost
とても多彩なパラメータを持つボタンジェネレータ。多数のテンプレートが用意されており、それを元にカスタマイズして好みのボタンが作れる。
Buttonator
比較的シンプルなボタンジェネレータ。ボタンタイプやアイコンが豊富に用意されているのが特徴。
classy buttons
さらにシンプルなボタンジェネレータ。フォントをアップロードできるのが凄い。
Brilliant Button Maker
一時期よく使われていた、 80x15 サイズのバナーボタンのジェネレータ。アイコンもアップロードして表示できる。
Button Maker
こちらも 80x15 バナーボタンのジェネレータ。アイコンのアップロードがない分シンプルで使いやすい。

ローディングアニメーションジェネレータ

Ajaxload
言わずと知れた、ローディングアニメーションジェネレータの代表格。ここで作成したアニメーションはいろいろなところで目にする。タイプと色を選択するだけのシンプルさがいい。
Load Info
Ajaxload よりもアニメーションの種類が多く、サイズも 3 種類から選べる。

ファビコンジェネレータ

favikon
アップロードした画像を .ico に変換してくれるサービス。変換する領域をブラウザ上で指定できるのが特徴。
Favicon Generator
文字で構成されたシンプルなファビコンを生成する。Brilliant Button Maker のファビコン版といった感じ。

パターンジェネレータ

Stripe Generator
ストライプ模様と言えばこのサイト。色、角度、幅などを自由に指定して様々なストライプが作れる。どの角度でもタイル配置可能な画像になるのが素晴らしい。
Online Tartan Designer
3 つの色と角度、サイズを指定するだけでタータンチェックのパターンが作れる。暖かそうな雰囲気を醸し出したいときに。
Tiled backgrounds designer
タイルパターンによる背景画像のジェネレータ。キャンバスの質感がいい感じで、リアルな壁紙風の背景パターンが簡単に作れる。模様となる画像も豊富に用意されている。
Background Image Maker
縦・横・斜めのストライプ、それにグラデーションの 4 種類のパターンが作れます。ストライプの線幅が指定できないのが残念。

ロゴジェネレータ

Logo Creator
Flickr 風、 Google 風など、 5 種類のロゴタイプがプリセットされており、簡単に実用的なロゴが作れる。「Beta」マークの表示も可能。
Web2.0 Logo Creator
表示テキストとリフレクション、「Beta」マークの有無を指定するだけの簡単ロゴジェネレータ。
Logo Maker
グラデーションとリフレクションを施したロゴが簡単に作れる。グラデーションは 2 種類(単純な線形グラデーションと、 Web 2.0 風のグラデーション)から選べる。
Web 2.0 Logo Creator Online
こちらもグラデーションとリフレクションを施したロゴのジェネレータ。ロゴの左上に付けるアイコンが多数用意されている。
Cool Text
多数のフィルターからひとつを選び、そのパラメータを調整してロゴ画像が作れる。どのフィルターもちょっとごっつい・・・。
Logo Maker
多数のロゴアイコンからひとつを選び、それとテキストを自由に配置できるロゴ編集ツールが使える。作ったロゴの利用は有料になるようですが、ロゴデザインのモックアップツールとして便利。

グラフジェネレータ

FooPlot
数式を入力すると、それをグラフ化してくれる。最大で 5 つまでの数式を同時に表示でき、生成したグラフは SVG, PNG をはじめとしてさまざまな形式で出力可能。
iCharts
Excel シートをアップロードすることでグラフを生成し、他のユーザーと共有できるサービス。作成したグラフは Web ページに埋め込むことも可能。
Online Charts Builder
Google Charts API を使ったグラフをウィザード形式で簡単に作れる。
JSChart
JavaScript を使ったグラフが作成できる。マウスオーバーで数値を表示するなど、インタラクティブなグラフになるのが特徴。

その他のページ要素のジェネレータ

Tabs Generator
タブインターフェースの画像を生成するジェネレータ。タブの方向、幅、高さ、グラデーション、角の丸み、ボーダーの太さなど、あらゆるパラメータが指定できる。
Warning Label Generator
枠のタイプ、アイコン、メッセージを入力して警告ラベルの画像が生成できるジェネレータ。 Web サイト以外でも使えそう。
Web 2.0 Badges
いわゆる「Web 2.0 風ギザギザバッジ」のジェネレータ。テンプレートが 20 種類ほど用意されており、そこにテキストを乗せるだけで簡単にそれっぽいバッジが作れる。
WEBSITE RIBBON
サイトの右上に配置するリボンを生成するジェネレータ。結果は JavaScript を読み込む HTML コードになり、それをサイトに埋め込むだけで適切に画像を配置してくれる。
Fresh Generator
丸角のグラデーションボックスにテキストを乗せた画像を生成するジェネレータ。ボタンジェネレータとして使ってもいいかも。
E-Mail Icon Generator
メールアドレスを表示するための画像が作れる。各 Web メールサービスのアイコンをあしらった凝った画像になるのが特徴。

実用性は疑問だけど、面白いジェネレータ

favicon2dots
ファビコンを 3D のドット絵風に変換してくれる。
幕末古写真ジェネレータ
画像を風化した銀塩写真のように加工してくれる。
硝子の円錐
画像をアップロードすると、全身タイツの人や学生たちが人文字を作ってくれる。
signbot
テキストを入力すると、電光掲示板風の GIF アニメーションを作成してくれる。
Superstickies
テキストを入力すると、付箋紙に手書きしたような画像を生成してくれる。
Morphases.com
実写の顔の目、眉、鼻、口を移動できる。デジタル福笑い(?)。

以上です。これらのサービスを活用すれば、少ない手間で見栄えの良い Web サイトが構築できるでしょう。いやはや、便利な時代になりましたね。サービスを作成・運営されている方々に感謝しつつ、利用させてもらいましょう!

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles