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

関連記事

20214/24

使いやすそうなサイトを厳選!AIが顔画像を加工しているサイト6選

結婚式の集合写真で目をつむってしまったり、ネクタイが歪んでいたり、昔そういう写真の修正をしていたこともあります。また、少し痩せているように…

20214/16

オンライン上でかわいく写真加工してくれるサイト紹介するよ

スマホで写真加工する方も多いかと思いますが、私は断然PC派です。そんなPC派な方に、パソコンで作業するときに役立つ、オンライン上でかわいく…

20207/16

ファビコンの設定の仕方

「https」に変更してから、ファビコンも表示されなくなったので、 再設定しようといろいろ調べてたら・・・ やだ! めちゃ簡単…

20207/11

コロナで注目されている契約書 ネットで契約書を結ぶ時代【CloudSign – クラウドサイン】

今日は私がお世話になっているオンライン契約書をご紹介致します。 フリーランスでお仕事をする場合、欠かせないのが契約書になってきます…

20202/7

WEBデザイナーさん必見! おすすめのポートフォリオ【無料WordPressテーマ】

WEBデザイナーさんが自分の作品を見せる時に、 ポートフォリオがまとめられたら見やすいですよね。 私が使ったことのあるテーマから、これか…

ページ上部へ戻る