全部無料!WEBデザイン初心者におすすめのツール・サイト8選

Pocket

全部無料!WEBデザイン初心者におすすめのツール・サイト8選

レンタルサーバーも借りて、WordePressのインストールも完了したし、いよいよ本格的なブログ運営がスタート!という段階で困るのが、画像作成やバナーデザインを行うためのツールです。
WordPressのテンプレートが充実しているとはいえ、オリジナリティを出すだめには、やはりロゴ作成やアイキャッチ画像の作成やデザインをする機会が増えてきます。
Webデザイナーの使用ツールであるフォトショップやイラストレーターは有料で高いので、使えないという方が多いかと思いますが、無料で使えるフリーツールでも機能は充実しています。
もちろん、本格的にWebデザイナーを目指すなら、フォトショップやイラストレーターを使いこなせた方が良いですが、まずは、今回ご紹介するツールで、WEBデザインの基本に挑戦してみてはいかがでしょうか?

ロゴ作成

Logo Garden

Logo Garden
Logo Garden
日本語未対応ですが、Webブラウザ上で簡単にセンスの良いロゴが作成できるサービスです。
シンボルマークとフォントも自由に選択できますので、コンセプトに沿ったロゴが完成できます。

バナー作成

canva

canva
canva
バナー作成だけでなく、インフォグラフィックやプレゼンテーション用の画像、名刺、フライヤー、FacebookやTwitter用の画像など、魅力ある画像が簡単に作成できる無料のオンラインサービスです。
スタイリッシュなテンプレートが多数用意されているため、誰でもかんたんに素敵な画像を作成できます。

画像圧縮

TinyPNG

TinyPNG
TinyPNG
画像を作成し、ブログに表示させる場合、極力画像のファイルサイズを軽くしなければなりません。
「TinyPNG」は、画質を保持したまま、JPEGやPNGイメージを最小サイズに圧縮できるツールです。
サイトから画像をアップロードして、ファイル容量が小さくなった画像をダウンロードます。
一度に画像を最大20個/5MBまでファイルをアップロードできます。

画像作成

Photoshop Express Editor

Photoshop Express Editor
Photoshop Express Editor
webデザインの画像編集ソフトといえば、フォトショップですが、フォトショップは有料なので、導入する前に、まずは無料版ツールで使用してみましょう。「Photoshop Express Editor」は、オンライン上で使用できる無料画像編集ツールです。
有料のフォトショップほど機能は豊富にないですが、基本的な、画像切り抜きや写真加工、テキスト入力は揃っているので、簡単な画像作成なら十分対応できます。

GIMP

GIMP
GIMP
無料の画像編集ソフトの中でも、特にユーザーが多い「GIMP」です。
レイヤー機能、エフェクト、ブラシ等、フォトショップの同様の機能が使用できます。
ユーザーが多い分、詳しい使い方が勉強できるブログ記事やチュートリアルサイトも豊富にあるため、画像編集の勉強は始める人にもおすすめです。

ボタン作成

2.5dButton Flat UI Elements

2.5dButton Flat UI Elements
2.5dButton Flat UI Elements
フラットタイプのボタンをデザインできるオンラインツールです。
日本語対応に対応しており、ボタンの形状やテキストの大きさ、背景の色の調整に加え、様々なアイコン画像も選択できます。
HTML、CSSも自動生成されるので、ダウンロード後、コピペするだけで、すぐにサイトに反映できます。

ファビコン作成

favicon.cc

favicon.cc
favicon.cc
「ファビコン」とは、favorite icon(フェイバリット・アイコン=お気に入りアイコン)の略語で 、WEBサイトを開いた時に、タブやアドレスバーのURL前に表示される小さいアイコンです。
ファビコンはサイトのトレードマークやシンボルマークの役割もあるので、ぜひ作成しましょう。

配色デザイン

Heu/360

Heu/360
Heu/360
webデザインの初心者が一番悩むことは、「配色」だと思います。
配色はセンスがある人しかできないと思われる方もいるかもしれません。
利用方法は、左側の「Brightness」から明るさの基準を選びます。
その明るさを基準に、右側に 色相環のカラーホイールが並ぶので、メインカラーとなる色を1色だけ選択します。
そのメインカラーと相性の良いカラーが選択されます。
カラーホイール内からの色を選んでいくことによって、配色の参考になります。

まとめ

今回はWEBデザインに必要な無料で役に立ちそうなデザインツールをと紹介しました。
無料といえど、各ツール共に豊富な機能が備えられていてます。
このような便利なツールを活かして、面白いデザインでご自身のブログを彩ってください。
当記事が皆さまのサイト運用の一助になれば幸いです。

Pocket