時間の節約になるWeb制作関連ツール 12+1


Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう!今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ!」と思ったWeb制作に関する便利ツールを紹介します。

ワードプレス(WordPress)で企業サイトを構築するならオーツービジネス テーマ

Photoshopテンプレート

まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。

Photoshopテンプレートをダウンロードする

» Photoshopテンプレートをダウンロードする

Instant Blueprint

http://instantblueprint.com/

Instant BlueprintのWebサイト

Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSなどの主要フォルダやJavaScriptライブラリを含んだフォルダを自動で作成してくれます。

Instant Blueprintの設定画面

まずはオプションを選択。

Instant Blueprintでフォルダをダウンロード

するとこんなフォルダがダウンロードできます。

設定したDivを含んだコード

設定したDivを含んだHTML(もしくはPHP)ファイルが作成されています。

Dynamic Dummy Image Generator

http://dummyimage.com/

ダミー画像を作成してくれるWebサイト

ダミー画像を作成してくれます。サイズ・背景色・文字色・フォーマット・テキストを入力すればOK。URLもコードも覚えやすいので慣れればジェネレーターを使わなくてもそのまま記述できます。

<img src="http://dummyimage.com/300x150/666/fff.jpg&text=写真あて" />

作成した画像を↑こんな感じで入力します。

TABLEIZER!

http://tableizer.journalistopia.com/

コピペでテーブルタグを作成

Excelなどで作られた表をコピペするだけでテーブルタグを作成してくれるジェネレーター。

表をコピーする

表計算ソフトで作られた表をコピー。

HTMLタグとプレビュー

ペーストして色やフォントの選択などをし、「Tableize it!」ボタンをクリックすると、HTMLタグとプレビューが表示されます!

ud.com

http://www.ud.com/

ドメイン・ユーザー名の空きをチェック

ドメインをはじめ、各種ユーザー名の空きがあるかをチェックしてくれるサイト。

緑がまだ使われていないドメイン・ユーザー名

「ilovechocolate」で検索してみました。.jpがまだあいてますね。ソーシャルメディア系はLinkedInしか残ってませんでした。

mockingbird

http://gomockingbird.com/

mockingbird

Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」でも紹介したmockingbird。オンラインでワイヤーフレームを作成することができます。オンラインでシェアしたり、PNG、PDFでの書き出しも可能。いつも使ってます。

Support Details

http://www.supportdetails.com/

Support DetailsのWebサイト

ブラウザーのサイズ、種類、Flashのバージョンなどなどクライアントが使っているPC・Macの仕様がひと目でわかります。クライアントに右から名前・メールアドレス(送信元)とあなたのメールアドレス(送信先)を入力してもらうだけです!

原色大辞典

http://www.colordic.org/

原色大辞典のWebサイト

色名・16進数の一覧。好きな言葉から連想する色のスプライトを作ってくれたりします。

背景色と文字色の選択

「配色」ページから背景色と文字色を比較しながら選択できます。

Ajaxload

http://www.ajaxload.info/

以前書いた「Webサイトを彩る画像・イラスト・アイコン集」でも紹介しています。「ロード中」の時に表示されるアイコンをカスタマイズできるサイト。サークルやバーなどの種類を選択し、色を決めてダウンロード。

pattern cooler

http://www.patterncooler.com/

こちらも「Webサイトを彩る画像・イラスト・アイコン集」より。たくさんある背景パターンから好きなものを選択し、色を変えたり大きさを変えて自分のサイトにあった背景画像を作ることができます。

stripe mania

http://www.stripemania.com/

Stripe maniaのWebサイト

ストライプの幅や色を選択するとそのまま画像がダウンロードできます。

FavIcon from Pics

http://www.html-kit.com/favicon/

ファビコンを作る

.gif、.jpg、.pngなどで作った画像をファビコン用.icoに変換してくれるサイト。アニメーション効果も付け加えられます。Twitterのアイコンと同じ画像をファビコンにする場合はTwitterのIDを入力するだけでOK。

Kuku Klok

http://kukuklok.com/

kukuklokのWebサイト

時間の節約とは違う気がしますが、便利なので紹介します。オンラインのアラーム時計。セットした後ネットがおちてもアラームがなります。ちなみにスイス製の時計らしいです。

以前読んだ「Webデザイナの作業効率を改善する10の方法」という記事もなかなか興味深いです。みなさんのおすすめツールがあればコメント欄にて紹介してくださいっ :)




記事のトップへ。

コメント

コメントする
  1. こんなの欲しかった!がいっぱいです!
    これからずいぶん楽ができそうです(笑)
    Web新参者の僕にとっては目からうろこでした。
    やっぱりManaさんのブログからは目がはなせませんねー

  2. ありがとうございます!楽しちゃってください!

  3. ファイル名やフォルダ名を一括変換してくれるツールを昔から重宝しているので、ご紹介します。

    Flexible Renamer
    http://hp.vector.co.jp/authors/VA014830/FlexRena/

    数が多くなりがちな「photo○○」や「image○○」や「thumbnail○○」などのファイル名付与、管理にすっごく役立ちます。

  4. ワイヤーフレームワークには「cacoo」が私の中でイチオシです!共有も出来るのと、チャットも同画面で出来るので、詰めていく時に大変役立ちました。

  5. ブログのコメント欄でよくおすすめされます!こちらも使いやすいですよね。一度触ってみた程度なんで、次回ワイヤーフレームを作る際はCaccoを使ってみようと思います。ありがとうございます!

  6. お、これとっても便利そうですね!時間を作ってちょっと試してみます!ありがとうございます!

トラックバック

トラックバックする
  1. [...]     時間の節約になるWeb制作関連ツール 12+1 超簡単なBGM作成アプリ『音楽室』 [...]

  2. [...] ◆ 時間の節約になるWeb制作関連ツール 12+1 [...]

  3. [...] 時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックス (tags: tools webdev) [...]

  4. Web制作においての作業軽減方法「時間の節約になるWeb制作関連ツール 12+1」…

    常日頃、Web制作作業の効率化をはかる為に、あれこれ考えたりしているのですが、 そんなWeb制作作業においての時間を節約する方法をまとめたエントリー 「時間の節約になるWeb制作関連ツール 12+1」がけっこう参考になりそうです。 ≫時間の節約になるWeb制作関連ツール 12…..

コメントする

Eメールアドレスは公開されません。





トラックバックURL

記事のトップへ。

サブカテゴリー

CSS JavaScript jQuery Webサイト制作 Webデザイン Web関連記事 Wordpress お知らせ インスピレーション フリーランス マーケティング ユーザビリティ 便利ツール

    アンケート

    無料配布されているもので、あったら嬉しいものは?(3つまで)

    結果を見る

    Loading ... Loading ...