デザインツール,フリー

 

ブログでいちばん大切なものは、そう『コンテンツ』ですね。
だけど、いくら美味しい料理でもそれを盛るお皿がイマイチなお皿だと、美味しい料理の味も半減してしまうかもしれません。

サイト訪問者さんに『このサイトは素敵なサイトだ!』とファーストインプレッションを与え、好きになってもらったり、また訪問したいと思ってもらうようにデザインも見なおしていきたいところです。

実際、魅力的なビジュアルはサイトアクセスの向上への一助になります。

しかし、そうはいってもサイトを魅力的に見せるためにビジュアルを凝るというのは敷居が高いですし、そもそもツールとか知らないし・・・と思われるかもしれません。

そこで、今回は初心者の方でも簡単に扱えてしかも無料で高機能なサイトデザインツールをご紹介いたします。
ぜひWebサイトをデザインする際には便利に活用してくださいね!

 

Webデザイン初心者に役立つフリーのデザインツール10選!

1. ビットマップ画像編集ソフト:GIMP

デザインツール,フリー

こちらは言わずと知れたビットマップ画像編集ソフトの『GIMP』。

Photoshopなみの高機能と拡張性を持っており、多くのWebデザイナーに愛用されています。

無料なのにこの機能の多さは本当にすごい。
絶対インストールするべし。

REF: 画像編集ソフトGIMPとは?ダウンロードやインストール方法と活用術

2. ベクターグラフィックソフト:Inkscape

デザインツール,フリー

Illustratorのように使えるベクターグラフィックソフト『Inkscape』。

WebデザインではPhotoshopやGIMPが利用されることが多いイメージですが、イラストの多いWebサイトや、フラットデザインのサイトではこちらが便利ですね。
ちょっとしたボタンやアイコンを作成するのにも適しています。

JPEGでの書き出しができないなどIllustratorよりも若干機能は劣りますが、それでも自由自在なドローツールやテキストツール、ベジェ曲線の描画、パスを使ったベクトル形式の画像などできることは多機能に及び、様々なファイル形式の保存にも対応しています。

これがあればIllustratorの出番があまりないんじゃないでしょうか。

Link: Inkscape

3. ブラウザ上で使える画像編集ソフト:Pixlr Editor

デザインツール,フリー

この『Pixlr Editor』は、なんとブラウザ上で動作する画像編集ツール。

Chrome拡張機能なのでオンライン上でないと使用できないですが、画像編集がブラウザ上で作業できるという素早さと手軽さは本当に便利です。

ちょっとトリミングし忘れた〜という時もささっとアプリを立ち上げて処理するだけ。

オンライン上とはいってもしっかり機能は網羅されており、他にも色調補正やクローンスタンプ、ブラシ、テキスト、フィルター、レイヤーなどGIMPでできるようなことがほとんど出来てしまいます。

編集した画像は、FacebookやPicasa、Flickrで共有したり、逆にこれらのSNSから画像をこのツールで開いて編集・保存する、なんてこともできてしまいます。

オンラインに特化したツールだからこそなせるワザですね!

Link: Pixlr Editor

4. Webサイトのカラーを調べる:ColorPick Eyedropper

デザインツール,フリー

よく他のサイトを見ていると『わーこの色めっちゃいい色!』と気になるカラーはありませんか?

この『ColorPick Eyedropper』を使うと、ブラウザ上に表示されているコンテンツに使われている色を一瞬で調べることができるんです。

これはChrome拡張機能なのでブラウザがChromeに限られるのですが、追加後ヘッダーメニューに教示されるアイコンをクリックして、調べたい色の場所をクリックするだけ。

するとカラーコードが表示され、それをそのままコピーすることもできます。
非常にお手軽ですね^^

Link: ColorPick Eyedropper

5. Webpページのサイズを簡単に測る:Page Ruler

デザインツール,フリー

『Page Ruler』は、Webページ内のサイズを簡単にサクッと測れる便利ソフト。

『この画像ってどのぐらいの大きさなのかな〜?』『サイドバーの幅はどのぐらい取ってるんだろ?』と思った時、まるでものさしで測るかのようにさっと測れます。

これもChrome拡張機能なので使用できるブラウザはChromeのみ。
追加したあとヘッダーメニューに表示されるアイコンをクリックしてドラッグするだけで、ページ上部に幅や高さなどの数字がリアルタイムで出てきます。

ブログ開設時にも非常に活躍しますね。

Link: Page Ruler

6. Webサイトで使われているフォント情報が分かる:WhatFont

デザインツール,フリー

こちらの『WhatFont』は、Chromeの拡張機能で、Webページで使用されているフォントの種類やサイズ、色などの詳細情報を表示してくれるツールです。

カッコいいサイトを見つけた時に、『このフォントって何使ってのかな?』と気になることがありますよね〜。

フォントはWebサイトの雰囲気に大きく影響するものなのでちょっと変えるだけでも全然違うのですが、いざ選ぼうとするとあまりの種類の多さにどれを選べばいいか悩んでしまうこともありますよね。

この『What Font』は、他のサイトのフォント情報を丸裸に(笑)してしまうツールなので、困ったときに参考にさせてもらいましょう。

文字の上にカーソルを置いただけで情報を表示してくれます。

Link: WhatFont

7. お洒落なアイキャッチ画像が簡単に作れる: Canva

デザインツール,フリー

こちらも大変秀逸なサービスですね。
『Canva』は、ブラウザ上でブログのアイキャッチ画像やバナーが簡単に作れるオンラインサービスです。

非常に質の高い画像素材や、テンプレートで用意されている素材も非常に豊富。
編集もとってもシンプルでバーをちょちょっと動かすだけという手軽さなのに完成物はかなりのクオリティの高さ。

この記事のトップ画像もこちらのツールで作ってみました^^

画像素材は自分で素材を準備すれば無料ですが、ライブラリにあるものは一部有料のものがあります。
それでも1枚1$とリーズナブルなので使いやすいですね。

Link: Canva

8. 角丸もドロップシャドウもCSSシミュレート: CSS3 MAKER

デザインツール,フリー

ちょっとスタイルを付けたい時、CSSの記述を自分でいちからやろうとするとめんどくさいですよね。
初心者の方にとってはCSSをいじるのは敷居が高いと感じて億劫になってしまうかもしれません。

この『CSS3 MAKER』は角丸やドロップシャドウのCSSを直感的にシミュレートしてくれるCSSジェネレーターです。
他にもグラデーションやアニメーションなど10種類ものCSSを生成してくれます!

操作も数値を入力するのではなく、バーを動かしながら視覚的に変化を確認できるのでとても直感的。

これがあれば難しいCSSの知識がなくてもスタイル付けは完ぺきですね^^

Link: CSS3 MAKER

9. 配色シミュレートサイト: kuler

デザインツール,フリー

『kuler』はAbobeが提供しているオンラインカラースキーマ。

デザインてやっぱりカラーの組み合わせでかなりセンスが出るところなので、しっかりと配色を選んでいきたいところですが、なかなかどんな組み合わせがいいのかパッとは出てこないですよね。

このサービスを利用すれば、カンタンにいろいろな配色パターンを作れるのでアイデアの一助になってくれますし、なんと他の人が作成したパターンも見れるのでとても参考になります。

どんな色がいいか迷った時はぜひ使い倒したいツールですね^^

Link: kuler

10. PCに入ってるフォントを一覧で表示 : wordmark.it

デザインツール,フリー

フォント選び迷いますよね〜

GIMPやInkscapeなどのソフトでフォントを選ぶときにいちいち一つずつ表示して確認するのも面倒なもの。

たいていのツールのフォントは『フォント名』で選択するので、選択してみないとそのフォントがどんなものだったか分からないですよね。

そういうときは、この『wordmark.it』を使うといいですよ^^
このツールは、あなたのパソコンにインストールされているフォントを一覧で表示してくれるツールです。

表示もボタン一つでロードできて、サッと一覧を見せてくれるのでフォント選びが楽になり時間の短縮にもなりますね。

Link: wordmark.it

まとめ

サイトのデザインはやはりブログ訪問者さんの右脳に真っ先に働きかけるものなので、素敵なサイトだと思われるように工夫していきたいですよね。

今回は、初心者でも無料で簡単に扱える便利デザインツールをご紹介しましたが、どれも私も愛用しているものばかりです。

非常に使いやすいですし、ブログを運営している時はずっと役立つと思いますので、ぜひ活用してみてくださいね。