ウェブサイトを早く構築する10の方法
reencoded.com:10 Ways to Save Time While Building a Website
Aug 4th, 2008 by Anders Haig
フリーのweb開発者にとって，時は金なりだ．
そこで，生産性を挙げるためのいろいろな方法を試し，
その中で選りすぐりなものを挙げてみた．
他の時間節約法も，コメントで教えてほしい．
As a freelance web developer, time is money. I use many different tricks to increase my productivity and these are my top selections for saving time. Please make you own suggestions for other time savers in the comments.
ドロップダウンメニュー：ll Web Menus (http://www.likno.com/allwebmenusinfo.html )
いつもドロップダウンメニューを作るのは大変だ．
そこで，全てをWeb Menusに変えた．
このプログラムは複雑なマルチメニューを，テキスト打つより短時間で作れる．
全てのサイトはメニューが必要だから，Web Menusを試してみるべきだ．
時間節約：1メニューあたり一時間
Drop Down Menus :: All Web Menus (http://www.likno.com/allwebmenusinfo.html )
Whenever I need to add a complex drop-down menu to a site, I turn to All Web Menus. This program styles a complex multi level menu in less time then it takes to type the text. All websites need menus and for detailed menus, you should try All Web Menus.
Time saved: 1 Hour per menu.
イメージキャプチャ：Gadwin Printscreen (http://www.gadwin.com/printscreen/)
Gadwin Printscreenユーティリティはwindowsのプリントスクリーンボタンに置き換わり，
多くのオプションとカスタムがついてくる．
windowsのスタートとともに常駐し，システムリソースもそんなに消費しない．
スクリーン全体のキャプチャではなく，Gadwinはウインドウを拡大表示し，
キャプチャする正方形の範囲を指定できる．
このツールは私の仕事にはつかえないが，
デザインのレイアウトを把握するのに使用する．
時間節約：キャプチャごとに2分
Image Capture :: Gadwin Printscreen (http://www.gadwin.com/printscreen/)
Gadwin Printscreen utility replaces windows standard printscreen keyboard button with more options and flexibility. It loads on windows startup and runs silently in the background without consuming system resources but it’s always there when you need it. Instead of just capturing the entire screen view, Gadwin allows you to select a rectangular area very precisely with the help of a built in magnifying window. This tool is invaluable to my work. I often use it to grab different pieces to mock up a design.
Time saved: 2 Minutes per screen capture.
イメージの一括リサイズ：Multiple Image Resizer .NET (http://www.multipleimageresizer.net/ )
Multiple Image Resizer .NETを使う前に，10〜15のリサイズツールを試してみた．
このツールは非並行作業に使いやすく，満足のいくものだ．
ただイメージが入っているフォルダを選択し，
サイズ，境界，テキスト，上位イメージ，露出，回転，反転が出来る．
ひとつずつ編集するより時間の節約になる．
私はよく，顧客のサイトにアップするイメージに透かしを入れるのに使っている．
時間節約：20イメージに20分．100枚以上なら1時間以上．
Batch Image Resizing :: Multiple Image Resizer .NET (http://www.multipleimageresizer.net/ )
I tried 10-15 different batch resizing programs before setting on Multiple Image Resizer .NET. This program’s ease of use in unparalleled and it has absolutely any function you could desire. Simply select a folder of images you want resized, determine whether to resize, add border, add text, overlay images, crop, rotate or flip them as a whole and save time editing the images one by one. I often use it to add small watermarks to a group of images I’m uploading to a clients website.
Time saved: 20 Minutes for a group of 20 images to an hour or more for a group of 100+.
ウェブフォーム：My Contact Form (http://www.mycontactform.com)
ウェブフォームは構築し，形作り，テストするのに時間がかかる．
私は，My Contact Formを使っている．
これらのステップごとに，一つ以上のオプションを示してくれ，コーディングが楽になるからだ．
フォームは非常にカスタマイズしやすく，
添付ファイル，複数の送信先，全てのフォームをみれる受信者の設定などがある．
時間節約：1フォームあたり，30分〜1時間
Web Forms :: My Contact Form (http://www.mycontactform.com)
Web forms take time to build, time to style and time to test. I use My Contact Form because it offers all of these steps in one plus more options then I can easily code. The forms are highly customizable including things like adding attachments, multiple recipients, selecting a recipient and complete control over the look of the form.
Time saved: 30 Minutes to 1 hour per form.
CSSテキストボックス：Rounded Cornr (http://www.roundedcornr.com/)
CSSでドラフトを書いたら，スタイルを追加する必要がある．
Rounded Cornrは多くの時間節約ができる．
このツールは早く簡単に，使いやすい，さまざまなボックススタイルの為に，
イメージとCSSコードを作成する．
またバンド幅を節約できる，オプションのコードを生成する．
時間節約：1スタイルあたり10分
CSS Text Boxes :: Rounded Cornr (http://www.roundedcornr.com/)
Once you have your rough draft laid out in CSS, and you need to start adding style, Rounded Cornr can save you a lot of time. Rounded Cornr quickly and easily creates images and CSS code for different box styles in an easy to use interface. It also offers an option to code it using only one image for all four corners, saving a minimal amount of bandwidth.
Time Saved: 10 Minutes per style.
イメージのベクトル化：Vector Magic (http://vectormagic.com/)
多くの時間，Photoshopを使ってイメージデザインをしている．
logoの仕事は全てIllustratorで行うが，
一方をリサイズしても質が落ちないように，ベクトル化することがよくある．
Vector Magicはフリーのオンラインサービスで，この作業を非常に良く行う．
はじめはどう使うかわからなかったが，イメージに関するいくつかの質問に答えると，
Vector Magicはjpegから高解像度のベクトルイメージを作成した．
複雑なイメージを変換するのには時間がかかり，あまり精密にはならない．
時間節約：複雑なベクトル化に1〜3時間
Vectorizing Images :: Vector Magic (http://vectormagic.com/)
A lot of the time, I’m designing images using Photoshop. I do all of my logo work in Illustrator but I often find the need to convert another one of my designs to a vector so I can resize it without a reduction in quality. Vector Magic is a free online service that does this amazingly well. I was skeptical at first, but after answering a few short questions about my image, they were able to create a high quality vector image from my jpeg. Doing it by hand for complex images would take a lot of time and not turn out quite as precise.
Time Saved: 1-3 Hours per complex vector.
色スキーマの選択：Adobe Kuler (http://kuler.adobe.com/)
たぶん聞いたことがないサイトでしょうが，
他のオンライン色スキーマサービスより，簡単で，洗練されているサイトだ．
Adob Airに加えて，オフラインでもこのツールを使える．
Kulerは多くの完成済みの色スキーマを提供してくれる．
しかもサイトに刺激を与える，すばらしいソースでだ．
時間節約：スキーマを選ぶのに，5〜10分
Selecting Color Schemes :: Adobe Kuler (http://kuler.adobe.com/)
This is one site you’ve probably heard of before, but I find it easier to use and with more advanced features then the other color scheme utilities available online. Add Adobe Air and use this tool even when you’re not connect to the internet. Kuler offers many premade color schemes as well that are an excellent source of inspiration for your website.
Time Saved: 5-10 Minutes per scheme over self-selection.
パターン背景を作る：Stripe Generator (http://www.stripegenerator.com/)
シンプルなパターン背景は，サイトの仕上げに必要だ．
時々，サイトがクリーンでく，アマチュアの作品に見えてしまう場合，
背景に手を加える必要がある．
Stripe Generatorは，名前の通り，自動的にストライプの背景を生成する．
色と，落ち着いた背景の中から選択できる．
時間節約：手動でやるより15分
Creating a Patterned Background :: Stripe Generator (http://www.stripegenerator.com/)
A simple patterned background can add a much needed professional finish to your websites. Sometimes, if a site of mine is looking amateur despite clean design, all I need to add is a touch of design to the background. Stripe Generator, as it’s name implies, auto generates a striped background based on your input criteria. You can change all the colors and create a wide variety of non-distracting backgrounds.
Time Saved: 15 Minutes over creating it manually.
フォトギャラリー生成：Flickr Slidr (http://flickrslidr.com/)
私はThickboxが非常に好きなのだが，
たまに設定が難しかったり，他のMultiple Image Resizerなどのフォトリサイズツールが必要だったりする．
Flickr Slidrはユーザがコントロールできるフォトスライドショーを作成し，
写真はFlickrのアカウントから直接持ってくる．
プロジェクトごとにアカウントを作成し，
よくデザインされたギャラリーを使うことで，編集時間を節約しよう．
時間節約：Thickboxより25分
Building a Quick Photo Gallery :: Flickr Slidr (http://flickrslidr.com/)
First off, I’m partial to Thickbox, but it isn’t always the easiest to configure exactly as you like and can require use of other programs like the Multiple Image Resizer. Flickr Slidr creates a user controlled photo slideshow that pulls the pictures directly from your Flickr account. You can create a separate account for each project and spend much less time editing the look of the already well-designed gallery.
Time Saved: 25 Minutes over Thickbox.
数種類のブラウザでのテスト：Browser Shots (http://browsershots.org/)
これは，全てのブラウザ(少なくとも，広く使われているブラウザ)で，
あなたのサイトがちゃんと見えることは非常に重要だ．
ほとんど人はコンピュータに多くのブラウザをインストールしている訳ではないし，
もしインストールしたとしても，全てのブラウザでサイトを開いてみるのにとても時間がかかる．
そこで，Browser Shotsの登場だ．
URLを入力し，全てのブラウザを選択するだけで，テストできる．
50種以上のブラウザがサポートされておりスクリーンサイズを特定することさえもできる．
Browser Shotsはそれぞれのブラウザで，サイトがどのように見えるか，スクリーンショットを見せてくれる，
時間節約：全てのブラウザで試すのに，1〜2時間
Testing Your Website in Multiple Browsers :: Browser Shots (http://browsershots.org/)
It’s extremely important that your websites look good on all browsers (or at a minimum, all widely used ones). Most people don’t have very many browsers installed on their computer and even if they did, the time it would take to open your site in each browser would be huge. That’s where Browser Shots comes in. Put in your URL and choose all the browsers you liked to test for. Over 50 browsers are currently supported and you can even specify different screen sizes. Browser Shots then shows you a screenshot of what your website looks like in each browser.
Time Saved: 1-2 Hours if you choose all the browsers.
Aug 4th, 2008 by Anders Haig
フリーのweb開発者にとって，時は金なりだ．
そこで，生産性を挙げるためのいろいろな方法を試し，
その中で選りすぐりなものを挙げてみた．
他の時間節約法も，コメントで教えてほしい．
As a freelance web developer, time is money. I use many different tricks to increase my productivity and these are my top selections for saving time. Please make you own suggestions for other time savers in the comments.
ドロップダウンメニュー：ll Web Menus (http://www.likno.com/allwebmenusinfo.html )
いつもドロップダウンメニューを作るのは大変だ．
そこで，全てをWeb Menusに変えた．
このプログラムは複雑なマルチメニューを，テキスト打つより短時間で作れる．
全てのサイトはメニューが必要だから，Web Menusを試してみるべきだ．
時間節約：1メニューあたり一時間
Drop Down Menus :: All Web Menus (http://www.likno.com/allwebmenusinfo.html )
Whenever I need to add a complex drop-down menu to a site, I turn to All Web Menus. This program styles a complex multi level menu in less time then it takes to type the text. All websites need menus and for detailed menus, you should try All Web Menus.
Time saved: 1 Hour per menu.
イメージキャプチャ：Gadwin Printscreen (http://www.gadwin.com/printscreen/)
Gadwin Printscreenユーティリティはwindowsのプリントスクリーンボタンに置き換わり，
多くのオプションとカスタムがついてくる．
windowsのスタートとともに常駐し，システムリソースもそんなに消費しない．
スクリーン全体のキャプチャではなく，Gadwinはウインドウを拡大表示し，
キャプチャする正方形の範囲を指定できる．
このツールは私の仕事にはつかえないが，
デザインのレイアウトを把握するのに使用する．
時間節約：キャプチャごとに2分
Image Capture :: Gadwin Printscreen (http://www.gadwin.com/printscreen/)
Gadwin Printscreen utility replaces windows standard printscreen keyboard button with more options and flexibility. It loads on windows startup and runs silently in the background without consuming system resources but it’s always there when you need it. Instead of just capturing the entire screen view, Gadwin allows you to select a rectangular area very precisely with the help of a built in magnifying window. This tool is invaluable to my work. I often use it to grab different pieces to mock up a design.
Time saved: 2 Minutes per screen capture.
イメージの一括リサイズ：Multiple Image Resizer .NET (http://www.multipleimageresizer.net/ )
Multiple Image Resizer .NETを使う前に，10〜15のリサイズツールを試してみた．
このツールは非並行作業に使いやすく，満足のいくものだ．
ただイメージが入っているフォルダを選択し，
サイズ，境界，テキスト，上位イメージ，露出，回転，反転が出来る．
ひとつずつ編集するより時間の節約になる．
私はよく，顧客のサイトにアップするイメージに透かしを入れるのに使っている．
時間節約：20イメージに20分．100枚以上なら1時間以上．
Batch Image Resizing :: Multiple Image Resizer .NET (http://www.multipleimageresizer.net/ )
I tried 10-15 different batch resizing programs before setting on Multiple Image Resizer .NET. This program’s ease of use in unparalleled and it has absolutely any function you could desire. Simply select a folder of images you want resized, determine whether to resize, add border, add text, overlay images, crop, rotate or flip them as a whole and save time editing the images one by one. I often use it to add small watermarks to a group of images I’m uploading to a clients website.
Time saved: 20 Minutes for a group of 20 images to an hour or more for a group of 100+.
ウェブフォーム：My Contact Form (http://www.mycontactform.com)
ウェブフォームは構築し，形作り，テストするのに時間がかかる．
私は，My Contact Formを使っている．
これらのステップごとに，一つ以上のオプションを示してくれ，コーディングが楽になるからだ．
フォームは非常にカスタマイズしやすく，
添付ファイル，複数の送信先，全てのフォームをみれる受信者の設定などがある．
時間節約：1フォームあたり，30分〜1時間
Web Forms :: My Contact Form (http://www.mycontactform.com)
Web forms take time to build, time to style and time to test. I use My Contact Form because it offers all of these steps in one plus more options then I can easily code. The forms are highly customizable including things like adding attachments, multiple recipients, selecting a recipient and complete control over the look of the form.
Time saved: 30 Minutes to 1 hour per form.
CSSテキストボックス：Rounded Cornr (http://www.roundedcornr.com/)
CSSでドラフトを書いたら，スタイルを追加する必要がある．
Rounded Cornrは多くの時間節約ができる．
このツールは早く簡単に，使いやすい，さまざまなボックススタイルの為に，
イメージとCSSコードを作成する．
またバンド幅を節約できる，オプションのコードを生成する．
時間節約：1スタイルあたり10分
CSS Text Boxes :: Rounded Cornr (http://www.roundedcornr.com/)
Once you have your rough draft laid out in CSS, and you need to start adding style, Rounded Cornr can save you a lot of time. Rounded Cornr quickly and easily creates images and CSS code for different box styles in an easy to use interface. It also offers an option to code it using only one image for all four corners, saving a minimal amount of bandwidth.
Time Saved: 10 Minutes per style.
イメージのベクトル化：Vector Magic (http://vectormagic.com/)
多くの時間，Photoshopを使ってイメージデザインをしている．
logoの仕事は全てIllustratorで行うが，
一方をリサイズしても質が落ちないように，ベクトル化することがよくある．
Vector Magicはフリーのオンラインサービスで，この作業を非常に良く行う．
はじめはどう使うかわからなかったが，イメージに関するいくつかの質問に答えると，
Vector Magicはjpegから高解像度のベクトルイメージを作成した．
複雑なイメージを変換するのには時間がかかり，あまり精密にはならない．
時間節約：複雑なベクトル化に1〜3時間
Vectorizing Images :: Vector Magic (http://vectormagic.com/)
A lot of the time, I’m designing images using Photoshop. I do all of my logo work in Illustrator but I often find the need to convert another one of my designs to a vector so I can resize it without a reduction in quality. Vector Magic is a free online service that does this amazingly well. I was skeptical at first, but after answering a few short questions about my image, they were able to create a high quality vector image from my jpeg. Doing it by hand for complex images would take a lot of time and not turn out quite as precise.
Time Saved: 1-3 Hours per complex vector.
色スキーマの選択：Adobe Kuler (http://kuler.adobe.com/)
たぶん聞いたことがないサイトでしょうが，
他のオンライン色スキーマサービスより，簡単で，洗練されているサイトだ．
Adob Airに加えて，オフラインでもこのツールを使える．
Kulerは多くの完成済みの色スキーマを提供してくれる．
しかもサイトに刺激を与える，すばらしいソースでだ．
時間節約：スキーマを選ぶのに，5〜10分
Selecting Color Schemes :: Adobe Kuler (http://kuler.adobe.com/)
This is one site you’ve probably heard of before, but I find it easier to use and with more advanced features then the other color scheme utilities available online. Add Adobe Air and use this tool even when you’re not connect to the internet. Kuler offers many premade color schemes as well that are an excellent source of inspiration for your website.
Time Saved: 5-10 Minutes per scheme over self-selection.
パターン背景を作る：Stripe Generator (http://www.stripegenerator.com/)
シンプルなパターン背景は，サイトの仕上げに必要だ．
時々，サイトがクリーンでく，アマチュアの作品に見えてしまう場合，
背景に手を加える必要がある．
Stripe Generatorは，名前の通り，自動的にストライプの背景を生成する．
色と，落ち着いた背景の中から選択できる．
時間節約：手動でやるより15分
Creating a Patterned Background :: Stripe Generator (http://www.stripegenerator.com/)
A simple patterned background can add a much needed professional finish to your websites. Sometimes, if a site of mine is looking amateur despite clean design, all I need to add is a touch of design to the background. Stripe Generator, as it’s name implies, auto generates a striped background based on your input criteria. You can change all the colors and create a wide variety of non-distracting backgrounds.
Time Saved: 15 Minutes over creating it manually.
フォトギャラリー生成：Flickr Slidr (http://flickrslidr.com/)
私はThickboxが非常に好きなのだが，
たまに設定が難しかったり，他のMultiple Image Resizerなどのフォトリサイズツールが必要だったりする．
Flickr Slidrはユーザがコントロールできるフォトスライドショーを作成し，
写真はFlickrのアカウントから直接持ってくる．
プロジェクトごとにアカウントを作成し，
よくデザインされたギャラリーを使うことで，編集時間を節約しよう．
時間節約：Thickboxより25分
Building a Quick Photo Gallery :: Flickr Slidr (http://flickrslidr.com/)
First off, I’m partial to Thickbox, but it isn’t always the easiest to configure exactly as you like and can require use of other programs like the Multiple Image Resizer. Flickr Slidr creates a user controlled photo slideshow that pulls the pictures directly from your Flickr account. You can create a separate account for each project and spend much less time editing the look of the already well-designed gallery.
Time Saved: 25 Minutes over Thickbox.
数種類のブラウザでのテスト：Browser Shots (http://browsershots.org/)
これは，全てのブラウザ(少なくとも，広く使われているブラウザ)で，
あなたのサイトがちゃんと見えることは非常に重要だ．
ほとんど人はコンピュータに多くのブラウザをインストールしている訳ではないし，
もしインストールしたとしても，全てのブラウザでサイトを開いてみるのにとても時間がかかる．
そこで，Browser Shotsの登場だ．
URLを入力し，全てのブラウザを選択するだけで，テストできる．
50種以上のブラウザがサポートされておりスクリーンサイズを特定することさえもできる．
Browser Shotsはそれぞれのブラウザで，サイトがどのように見えるか，スクリーンショットを見せてくれる，
時間節約：全てのブラウザで試すのに，1〜2時間
Testing Your Website in Multiple Browsers :: Browser Shots (http://browsershots.org/)
It’s extremely important that your websites look good on all browsers (or at a minimum, all widely used ones). Most people don’t have very many browsers installed on their computer and even if they did, the time it would take to open your site in each browser would be huge. That’s where Browser Shots comes in. Put in your URL and choose all the browsers you liked to test for. Over 50 browsers are currently supported and you can even specify different screen sizes. Browser Shots then shows you a screenshot of what your website looks like in each browser.
Time Saved: 1-2 Hours if you choose all the browsers.
Comments