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
一歩進んだ Web アプリケーション活用術
Opera & Firefox をディープに使いこなす
WebOS 時代のプログラミング・ノウハウ
Gentoo Linux と VMware による個人サーバー構築記
オープンソース・アプリケーションで快適 Web ライフ
その他の記事
Recent Articles
この記事にコメントする