時間の節約になるWeb制作関連ツール 12+1
- 便利ツール
- 2010年07月12日
Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。
Photoshopテンプレート
まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。
Instant Blueprint
Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSなどの主要フォルダやJavaScriptライブラリを含んだフォルダを自動で作成してくれます。
まずはオプションを選択。
するとこんなフォルダがダウンロードできます。
設定したDivを含んだHTML(もしくはPHP)ファイルが作成されています。
Dynamic Dummy Image Generator
ダミー画像を作成してくれます。サイズ・背景色・文字色・フォーマット・テキストを入力すればOK。URLもコードも覚えやすいので慣れればジェネレーターを使わなくてもそのまま記述できます。
<img src="http://dummyimage.com/300x150/666/fff.jpg&text=写真あて" />
作成した画像を↑こんな感じで入力します。
TABLEIZER!
http://tableizer.journalistopia.com/
Excelなどで作られた表をコピペするだけでテーブルタグを作成してくれるジェネレーター。
表計算ソフトで作られた表をコピー。
ペーストして色やフォントの選択などをし、「Tableize it!」ボタンをクリックすると、HTMLタグとプレビューが表示されます！
ud.com
ドメインをはじめ、各種ユーザー名の空きがあるかをチェックしてくれるサイト。
「ilovechocolate」で検索してみました。.jpがまだあいてますね。ソーシャルメディア系はLinkedInしか残ってませんでした。
mockingbird
「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」でも紹介したmockingbird。オンラインでワイヤーフレームを作成することができます。オンラインでシェアしたり、PNG、PDFでの書き出しも可能。いつも使ってます。
Support Details
http://www.supportdetails.com/
ブラウザーのサイズ、種類、Flashのバージョンなどなどクライアントが使っているPC・Macの仕様がひと目でわかります。クライアントに右から名前・メールアドレス（送信元）とあなたのメールアドレス（送信先）を入力してもらうだけです！
原色大辞典
色名・１６進数の一覧。好きな言葉から連想する色のスプライトを作ってくれたりします。
「配色」ページから背景色と文字色を比較しながら選択できます。
Ajaxload
以前書いた「Webサイトを彩る画像・イラスト・アイコン集」でも紹介しています。「ロード中」の時に表示されるアイコンをカスタマイズできるサイト。サークルやバーなどの種類を選択し、色を決めてダウンロード。
pattern cooler
こちらも「Webサイトを彩る画像・イラスト・アイコン集」より。たくさんある背景パターンから好きなものを選択し、色を変えたり大きさを変えて自分のサイトにあった背景画像を作ることができます。
stripe mania
ストライプの幅や色を選択するとそのまま画像がダウンロードできます。
FavIcon from Pics
http://www.html-kit.com/favicon/
.gif、.jpg、.pngなどで作った画像をファビコン用.icoに変換してくれるサイト。アニメーション効果も付け加えられます。Twitterのアイコンと同じ画像をファビコンにする場合はTwitterのIDを入力するだけでOK。
Kuku Klok
時間の節約とは違う気がしますが、便利なので紹介します。オンラインのアラーム時計。セットした後ネットがおちてもアラームがなります。ちなみにスイス製の時計らしいです。
以前読んだ「Webデザイナの作業効率を改善する10の方法」という記事もなかなか興味深いです。みなさんのおすすめツールがあればコメント欄にて紹介してくださいっ :)
記事のトップへ。
関連する記事
コメント
コメントする-
ファイル名やフォルダ名を一括変換してくれるツールを昔から重宝しているので、ご紹介します。
Flexible Renamer
http://hp.vector.co.jp/authors/VA014830/FlexRena/数が多くなりがちな「photo○○」や「image○○」や「thumbnail○○」などのファイル名付与、管理にすっごく役立ちます。
佐々木椛 2010/07/15 at 4:56 pm
-
ワイヤーフレームワークには「cacoo」が私の中でイチオシです！共有も出来るのと、チャットも同画面で出来るので、詰めていく時に大変役立ちました。
森永 2010/07/15 at 5:09 pm
トラックバック
トラックバックする-
[...] 時間の節約になるWeb制作関連ツール 12+1 超簡単なBGM作成アプリ『音楽室』 [...]
【PIN】20100712LDRのPIN | glad design blog 2.0 2010/07/12 at 7:02 pm
-
[...] ◆ 時間の節約になるWeb制作関連ツール 12+1 [...]
背負子む » news 2010/07/13 at 1:02 am
-
[...] 時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックス (tags: tools webdev) [...]
links for 2010-07-12 « 個人的な雑記 2010/07/13 at 8:08 am
-
[...] http://www.webcreatorbox.com/tech/timesaver-website-tools/ [...]
7/13 サイト作成のための便利なツール « モデルさんのお金 2010/07/13 at 11:45 am
-
[...] http://www.webcreatorbox.com/tech/timesaver-website-tools/ [...]
7/13 ポートフォリオ作成（準備） （火） « モデルさんのお金 2010/07/13 at 4:27 pm
-
Web制作においての作業軽減方法「時間の節約になるWeb制作関連ツール 12+1」…
常日頃、Web制作作業の効率化をはかる為に、あれこれ考えたりしているのですが、 そんなWeb制作作業においての時間を節約する方法をまとめたエントリー 「時間の節約になるWeb制作関連ツール 12+1」がけっこう参考になりそうです。 ≫時間の節約になるWeb制作関連ツール 12…..
E2デザイナーズブログ：HTML,CSS,JavaScript,jQuery,FlashなどWebデザインに関するネタ紹介/株式会社E2 2010/07/13 at 9:31 pm
Loading ...
こんなの欲しかった！がいっぱいです！
これからずいぶん楽ができそうです（笑）
Web新参者の僕にとっては目からうろこでした。
やっぱりManaさんのブログからは目がはなせませんねー
Quarter 2010/07/12 at 12:38 pm