web制作関連ジェネレーター
ごく簡単な操作で角丸・グラデーションなどを作成できるオンラインサービスを紹介しています。画像編集ソフトを持っていない、あるいは加工が苦手な方向け。それ以外にもweb制作に役立つサービスを紹介しています。
- ショートカット
- 背景
| 画像加工
| ボタン
| ナビゲーション
| スクリーンショット・サイト表示確認
| .htaccesse
| ロゴ
| CSS
| 素材サイト
背景

Fresh Generator
グラデーションや角丸をpng形式で作成できます。操作は面倒ですが高性能。【Box】ボックスのサイズ・色・不透明度・影【Corners】角丸の有無・カーブの加減【Border】ボーダーのサイズ・色・不透明度【Text】入力するテキスト・フォント・サイズ・色

Stripe Generator
様々なパターンのストライプを作成します。ストライプの大きさ・線と線の間隔・シャドウの有無・グラデーションの種類など細かく指定できます。他のユーザーが作ったストライプをダウンロードすることもできます。

RoundedCornr
角丸・グラデーション付きのボタン・タブ・インプットボックスなどを作成できます。

Tartan Designer
3つの色を指定してタータンチェックのパターンを作成できます。温かみのある柄が素敵です。

Tiled backgrounds designer
タイルパターンを作成できます。ファンタジーチックなものが多いです。

Tabs Generator
角丸タブなどを作成できます。幅、高さ、グラデーション、角の丸み、ボーダーの太さなど細かく指定できます。

Spiffy Box
シンプルで使いやすい角丸ジェネレーター。

COLOURlovers
配色パターンなど。
画像加工

BlurHighlight
ドラッグで指定した領域をハイライト処理します。スクリーンショットの強調したい部分を加工するのに便利。

RoundPic
アップロードした画像を角丸加工します。角の大きさや丸みなども調整できます。

As Button Generator
アイコンの形状等を確認しながらリアルタイムに編集することができます。シャドウをつけたり、画像を配置できたりと、とても高性能です。

Brilliant Button Maker
80px×15pxのブログバナーを作成できます。

Ajaxload
ローディングアニメーション付きのアイコンを作成できます。

Load Info
ローディングアニメーション付きのアイコンをダウンロードできます。

Web 2.0 Badges
web2.0風バッジを作成できます。

Diagonal Advertising Banner Design
ブログなどでよく見られる、サイトの右上に配置するリボンを作成できます。
ナビゲーション

CSS Menu Builder
水平メニュー、垂直メニュー、パンくずリストを作成します。

CSS Menu Generator
ドロップダウン式サブメニュー付きのメニューバー、水平メニュー、垂直メニューの三種類が作成できます。
スクリーンショット・サイト表示確認

BrowserShots
多機能・高性能なスクリーンショットサービス。自分のサイトの表示確認に使っています。多様なOS・ブラウザ・解像度のスクリーンショットを撮ることができます。ただ、時間がかかるのが欠点。作成したスクリーンショットは原寸のpng形式でダウンロードできます(zip対応)。

HeartRails Capture
このページでも使わせていただいている、多機能なサムネイル画像生成サービス。オプションでサムネイルのサイズを変更、シャドウの有無、背景色の変更などもできます。作成したサムネイルは自分のサイトから呼び出すことができます。

getFavicon
このページでも使わせていただいている、Faviconコピー(?)サービス。指定したURLのFaviconのコピーを作成することができます。コピーしたFaviconは自分のサイトから呼び出すことができます。なお、Faviconがないサイトは地球のアイコンが表示されます。

iPhone 3G tester
iPhoneでのサイト表示を確認できるサービス。iPhoneを持っていないのでこれを使っています。

WebWait
サイトの表示速度をチェックできるサービス。
.htaccesse

.htaccess Editor
手書きすると面倒な.htaccesseを簡単に作成できるサービス。エラーページの指定、Basic認証設定、PC・モバイルアクセス制限などができます。フォームに入力するとテキストエリアにコードが表示されるので、それをコピー&ペーストすることで使用できます。
ロゴ

Twitlogo
Twitter風ロゴを作成します。

Logo Creatr
web2.0風、Flickr風、Google風など5種類のロゴを作成できます。

Web 2.0 Free Logo Generator
グラデーション、リフレクション付きロゴを作成できます。

みな…なんとかジェネレーター
2009年頃Twitterで流行っていた(?)「みなみけ」風ジェネレーター。

Flickr ロゴメーカー
Flickr風ロゴを作ります。
CSS

CSS Border Radius
CSS3で角丸を実現するためのソースを作成。見た目を確認しながら作成できます。

CSS Type Set
フォント関連のプロパティを調節できます。見た目を確認しながら作成できます。

CSS Text Wrapper
テキストの回り込みを指定することができます。

CSS Corners
CSS3のグラデーションを使ったボタンを作成できます。
素材サイト(※ジェネレーターではない)
お気に入りの画像サイトなど。ジェネレーターではありませんが専用のページを作るまでここに貼りつけておきます。

Pixels & Ice Cream

morgueFile
SAKATORI Kihiro
www@nrym.org
Published: 2010-03-07
Last modified: 2011-11-13