creatersnest54

Web制作に欠かせない便利なWebツール30選


オンライン上で使うことができる様々なツール類はWeb制作に欠かせないものとなっています。いつでもどこでも、PCとネット環境さえあれば利用できて、ちょっと便利なツールからソフトウェアの代用になりえるような高機能なツールまで。今回はそんな便利なWebツール30選を幅広くご紹介します。

 

Real-Time HTML Editor

HTML-Instant-http://www.htmlinstant.com/

ブラウザ上でHTMLを書くとそのまま確認できるツール。エディタを開くのが手間なときに、ささっと書いてすぐに確認できます。

 

Simplenote

Simplenote

http://simplenote.com/
シンプルで使いやすいオンラインテキストエディタ。スマホアプリを使えばほぼリアルタイムにPCとテキストが同期できます。

 

Grid Layout Generator

Grid-Layout-Generator

http://www.pagecolumn.com/grid_layout_generator.htm
グリッドレイアウトのサイトを作りたい際に、指定したグリッドのHTMLとCSSを生成してくれます。

 

Initializr

Initializr

http://www.initializr.com/
レスポンシブデザインを含む、HTML5で記述されたテンプレートをチェックボックスやラジオボタンのON/OFFだけで簡単に作成できます。

 

CSS3.0 Maker

CSS3.0-Maker

http://css3maker.com/
角丸やグラデーションやトランジション、アニメーションなど、簡単にCSS3のプロパティを生成することができるツール。手打ちのマークアップだけでは困難な作業なので、積極的に活用しましょう。

 

Spritebox

Spritebox

http://www.spritebox.net/
ローカル環境にある画像ファイルをUPすると、CSSスプライトを生成してくれます。Webの高速化のためにもCSSスプライトは使用していきたいです。

 

ProCSSor – Advanced CSS Prettifier

ProCSSor

http://procssor.com/
CSSを手書きで書いていると、書式の見た目がどんどん悪くなりがちです。このツールを使えばキレイな書式に整えてくれますので、適宜整えておきましょう。

 

.htaccess Editor

htaccess-ファイルを簡単作成「.htaccess-Editor」

http://www.htaccesseditor.com/
設問にそってプルダウンから選んだり入力するだけで、htaccessファイルを生成してくれます。こういったツールを使えば構文ミスから来るエラーを防ぐことができます。

 

ダミーテキストジェネレータ

ダミーテキストジェネレータ

http://webtools.dounokouno.com/dummytext/
文章の文字数が指定されたWebページを制作をする際に、仮として当て込むためのダミーテキストを作成できます。文字数以外にも細かな指定が可能です。

 

こぴらん

こぴらん

http://copyrun.net/
同じテーマで大量に文章を書いていると、誰かが書いたものと似てしまうことがあります。このツールを使えば、他サイトで同じような表現が使われていないかをチェックできます。

 

カラーホイール | カラースキーム – Adobe Color CC

Adobe-Color-CC

https://color.adobe.com/ja/create/color-wheel/
配色のアイデアを練ることができる、オンラインカラースキーマ。たくさんの人が作ったカラーテーマを見ることもできるため、ヒントをもらえるサービスです。

 

Preloaders.net

Preloaders.net-

http://preloaders.net/
自分で作ろうとすると案外面倒くさい、プリローダー時のアニメGIFアイコンをサイズや色を指定して簡単に作成できます。

 

Stripe Generator

Stripe-Generator

http://www.stripegenerator.com/
背景画像を使用する機会も減ってきましたが、こちらは背景画像で利用できる継ぎ目のないストライプ画像を生成できます。

 

Google MapBuildr – Google Map Making — Simplified

Google-MapBuildr

http://mapbuildr.com/
APIキーの取得など、少し手間はかかりますがGoogleマップをオシャレにカスタマイズできるツールです。サイトカラーとかけ離れたマップがそのまま載っていると魅力半減です。一手間かけて完成度を高めてみましょう。

 

Another HTML Lint

Another-HTML

http://www.htmllint.net/html-lint/htmllint.html
HTML5に準拠したマークアップになっているかをURLの入力だけでチェックしてくれるバリデーションツール。極力正しいマークアップを心がけたいですね。

 

W3C CSS 検証サービス

W3C-CSS-検証サービス

http://jigsaw.w3.org/css-validator/
Webで利用される技術の標準化を進める国際的な非営利団体、W3Cが提供するCSSのバリデートチェッカー。一度は通してみましょう。

 

Frame

Frame

http://frame.lab25.co.uk/
Webデザインのモックアップ画像やスクリーンショットの画像を、実際にMacやスマートフォンで利用しているかのような画像を生成してくれます。プレゼン資料の説得力が増すのでオススメです。

 

日本語文章校正ツール

日本語文章校正ツール

https://www.japaneseproofreader.com/
文章に言葉の間違いや不適切な表現が含まれていないかをコピペで簡単チェックできます。文章を書いたら一度チェックするように習慣づけると、勉強になります。

 

Office Online – Word、Excel、PowerPoint – Office.com

Office-Online-

https://office.live.com/start/default.aspx?omkt=ja-JP
まだまだ業務に欠かせない、マイクロソフトWord、PowerPoint、Excel、OneNoteがブラウザ上で使用できます。再現度も高いです。

 

iCloud

iCloud

https://www.icloud.com/
MacのオフィススイーツであるPages、Numbers、Keynoteをブラウザ上で使用できます。PDF形式でダウンロード可能なので質の高い資料を作成可能です。

 

Photo Editing and Effects | Autodesk Pixlr

Pixlr

https://pixlr.com/
Web制作で画像を扱うソフトと言えばAdobe Photoshopですが、出先のPCから画像を編集したいときはWebツールの「Pixlr」がオススメです。Photoshop形式のPSDファイルを開いての加工も可能です。

 

[email protected]

focus-will-

https://www.focusatwill.com/
集中力を向上させてくれるBGMを集めたオンラインサービス。いつもこれを再生しながら作業しています。

 

Send a Fax for Free – Try e-Faxing with MyFax.com

Send-a-Free-Fax

http://www.myfax.com/free/
Web画面からFAXを送信することができます。古くからの企業など、FAXでのやり取りを希望される場合の緊急用としてブックマークしています。

 

cloudconvert

CloudConvert

https://cloudconvert.com/
何から何までコンバートというキャッチコピーのとおり、オンライン上でWordファイルをPDFPDF変換したり、EPS画像をGIFに変換することができます。

 

ubersuggest

Keyword-suggestion-tool

http://ubersuggest.org/
検索のサジェストワードを一覧で表示してくれます。日本語にも対応。サジェストに出てくるのは他ユーザーが検索したキーワードなので、SEO対策の参考になります。

 

Stylify Me – Online Style Guide Generator

Stylify-Me

http://stylifyme.com/
URLを入力すると、そのサイトで使用されている色やフォント、画像を1ページにまとめたPDFとしてダウンロードができます。資料作成が捗ります。

 

Similarweb

SimilarWeb

http://www.similarweb.com/
URLを入れると、そのサイトのPVや滞在時間、離脱率や流入経路まで表示されるマーケティングツール。Web制作からWebディレクションまで手がけるようになると、こういった数値も意識したいですね。

 

Facebook Debugger

Debugger

https://developers.facebook.com/tools/debug/
Facebookに関連したOGP設定が正しいかをチェックできるツール。ページをシェアされたときに変な画像がサムネイルとして表示されないか注意しましょう。

 

OGP画像シミュレータ | og:image Simulator

OGP画像シミュレータ

http://ogimage.tsmallfield.com/
いろいろややこしいサイズのFacebook用OGP画像を確認することができるツール。制作した画像をドラッグ&ドロップすれば、Facebook上でどう見えるかシミュレートしてくれます。

 

ホームページ作成 | ホームページビルダー 無料 | WIX

WIX

http://ja.wix.com/
最後に番外編です。Web制作を仕事にしていると「ちょっとサイト作ってよ、タダで」と言われることがあります。そういうときは無料のサイト作成ツールを紹介しましょう。そして、そういったツールに負けないような努力を続けましょう。

 

まとめ

いかがでしたでしょうか?Webツールは本当にさまざまな種類があるので、ぜひブックマークに入れて活用してみてください。どんなPCを使っていても、ブラウザさえあれば同じスタイルで作業ができるというのは効率化の面でも重要です。無料のサイト作成ツールに負けず、いいアウトプットを続けていきたいですね!

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleSNSのプロフィール画像などに最適!無料で似顔絵を作成できるWebサービスまとめ