WordPressテーマ「Grider (tcd015)」

WordPressテーマ「Canvas (tcd017)」

WordPressテーマ「Chill (tcd016)」

© STUDIO-colorz All rights reserved.

20142/15

お金をかけずにWEB制作!超便利な無料ツールまとめ

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

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

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

WEB制作のおおまかな流れ

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

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

ワイヤーフレームを作る

kmqsmn000000x8zz

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

◎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/
スマホサイトやアプリのワイヤーフレームが作れます。

サイトの配色を決める
http://www.colourlovers.com/palettes/most-loved/all-time/grid

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

◎ 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/
写真から色を抽出してくれるオンラインサイトです。

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

cleanskinfx_1r

画像の修正といえば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のような加工ができます。

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

スクリーンショット(2014-02-14 20.33.47)

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

◎LogoType Creator
http://logotypecreator.com/

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

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

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

フォント装飾
5181600f4af70aaad4d8716bbca9041d1

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

スクリーンショット(2014-02-14 20.55.28)

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

◎Liveweave
http://liveweave.com/

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

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

CSS
http://www.3x4grid.com/

装飾に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にこだわらなくても、
無料でここまでできます。
思う存分腕を磨けますね!

null

関連記事

201710/18

もしもディズニープリンセスが現実に存在したら?

ディズニーのプリンセスたちはとってもキュートに描かれているけど、想像上のキャラクターなだけに現実とはかけ離れているパーツの大きさだったります…

201710/17

今すぐ使えるHalloweenのかわいくておしゃれなイラスト無料素材

Halloweenの雰囲気を作るのに欠かせないのは、かわいくておしゃれなイラスト素材! 無料の素材の中でも厳選して、かわいくておしゃれな、…

201710/16

【2017年版】忘年会の招待状無料テンプレート作りました。

忘年会シーズンに向けて、そろそろ幹事さんが忘年会のプランを練る時期ではないでしょうか。 今回は忘年会の招待状テンプレート作ってみました。 …

201710/15

【Disney】ディズニーキャラクター(悪役)をモチーフにした香水瓶シリーズ『Disney Villains Perfume』が素敵すぎる

この、香水は日本人アーティスト、ルビー・スパークさんがデザインした、香水瓶シリーズ『Disney Villains Perfume』 ディ…

201710/14

【2018版戌年】年賀状に使える無料イラスト素材

年賀状はいつもご自身で制作する方は必見! 年賀状に使える無料イラスト、来年は戌年なので戌年のイラストも集めました。 使いやすいイラストが…

ページ上部へ戻る