WEB制作に励みたいあなたに朗報！

プロが使用している高額ソフトじゃないと
WEB制作できないと思っている方多いですが、
そんなことありません。

今は無料ツールがたくさんあるので、
初心者さんでも、学生さんでも気軽に、
お金をかけずに無料でWEB制作ができちゃいます。

WEB制作のおおまかな流れ

ワイヤーフレームで全体像を掴み、
サイト配色で全体的なイメージを捉えましょう。
WEB制作をするにあたりこの流れで進めていくと
制作しやすいかと思います。

◎ワイヤーフレームを作る
◎サイトの配色を決める
◎画像のデザイン
・画像修正
・ロゴ制作
◎フォント装飾
◎HTML
◎CSS

ワイヤーフレームを作る

サイトの全体像を最初に掴むのに使用するワイヤーフレーム。
全体像を知ることで、ユーザーをどのように誘導していくのか、
シュミレートできます。

◎Cacoo
https://cacoo.com/
私も使っているツールです。
日本製なのでわかりやすく使いやすいですね。
複数の人が編集できるというシステムになっているのが特徴的。

◎Prototyper
http://www.justinmind.com/
このままリリースできそうなほど、
完成度の高いワイヤーフレームが作れます。

◎SIMPLEDIAGRAMS
http://www.simplediagrams.com/
手書き風ワイヤーフレームが可愛らしい。

◎Balsamiq Mockups
http://www.balsamiq.com/products/mockups
手書き風のワイヤフレーム。

◎PENCIL PROJECT
http://pencil.evolus.vn/Default.html

◎Smart Canvas
http://smartcanvas.net/
スマホサイトやアプリのワイヤーフレームが作れます。

サイトの配色を決める

サイトのイメージを印象づけるのに配色はとっても大事です。
配色は苦手という方でも簡単に配色できる無料ツールをご紹介します。

◎ Browse Palettes
http://www.colourlovers.com/
WEBデザイナーの誰もが知る超有名サイト。

◎Color Scheme Designer 3
http://colorschemedesigner.com/

◎Kuler
http://kuler.adobe.com/
Adobe提供の配色ツールです。

◎ ColorBlender
http://colorblender.com/

◎ウェブ配色ツール Ver2.0
http://www.color-fortuna.com/color_scheme_genelator2/

◎Color Palette Generator from DeGraeve.com
http://www.degraeve.com/color-palette/
写真から色を抽出してくれるオンラインサイトです。

画像のデザイン　【画像修正】

画像の修正といえばphotoshopですが、
高額なものを使わなくても無料ツールでここまで出来てしまいます。

◎CleanSkinFX
http://mediachance.com/digicam/cleanskin.htm
説明HP：http://www.forest.impress.co.jp/article/2008/08/28/cleanskinfx.html
肌をきれいにしてくれるスグレモノ。

◎ToolWiz Pretty Photo
http://toolwiz-pretty-photo.softonic.jp/
Instagramのようなおしゃれなエフェクトができます。

◎Psykopaint
http://www.psykopaint.com/
イラスト風に加工してくれるツールです。

◎DrPic.
http://www.drpic.com/
オンラインでphotoshopのような加工ができます。

画像のデザイン　【ロゴ制作】

ロゴの制作は苦手な方も多いと思います。
でも、このツールを使えば問題解決です。

◎LogoType Creator
http://logotypecreator.com/

◎Graphic Springs
http://www.graphicsprings.com/

◎Logaster
https://www.logaster.com/

◎CoolText
http://ja.cooltext.com/

フォント装飾

いろんなフォントデザインのファイルを持っていたほうが、
表現の幅をきかせやすいです。
しかし、多様はNG　

◎ミウラ Liner_jr
http://www.mopstudio.jp/

◎うつくし明朝体オールド
http://www.flopdesign.com/freefont/utsukushi-mincho-font.html

◎フロップデザインフォント
http://www.flopdesign.com/freefont/flopdesignfont.html

◎ぼくたちのゴシック
http://yoshihisa.que.jp/fontopo/index.html

HTML

HTMLを組むのもなんと無料でできます。
これだけのツールがあれば、組み放題！

◎Liveweave
http://liveweave.com/

◎Crescent Eve
http://www.kashim.com/eve/

◎StyleNote
http://sn.lowedge.com/

CSS

装飾にCSSは必須です。
でも、これも無料ツールでOK

◎CSS3 Generator
http://css3generator.com/

◎3x4grid
http://www.webresourcesdepot.com/grid-builder-drag-n-drop-html-grid-generator/

◎CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/

まとめ

PhotoshopやIllustrator、Dreamweaverにこだわらなくても、
無料でここまでできます。
思う存分腕を磨けますね！