webデザイナーも使ってる!webデザイン初心者に超役立つ無料ツール10選

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

スクリーンショット 2016-07-31 1.55.00
これからwebデザインを始めようとする人にとって、「まずは何から揃えればいい?」「いろんな便利ツールがあるみたいだけど、情報が多すぎてどこから手をつけたらいいかわからない・・・。」という悩みに直面することは多いはず。
そんなときは、プロのwebデザイナーも使っているツールからまずは勉強してみましょう。ツールといっても有料のものや無料のものなど、数多くの種類が存在しますが、今回は無料のツールにスポットを当ててご紹介します。すべて使用は無料なので、デザインの勉強にも役立つこと間違いなし!

<バナー作成>

1.素人でもすぐにwebデザインが作成できる「canva」

バナーやSNSへの投稿用画像作成は、プロのデザイナーはもちろんのこと、これからwebデザインを始めようという人にとっても最も大事な作業です。しかし、この「バナーデザイン作成」をスピーディーかつ優れたデザインにするためには、たくさんの時間と労力、そして慣れを必要とします。「もっとカッコイイバナーがサクサク作れたらなあ・・・。」と思っている全ての人におすすめのツールが「canva」。たくさんのバナーテンプレートが用意されているので、写真や文字を差し替えれるだけで、センスのよいバナーやデザイン案が作れます。

canva

 

<画像圧縮>

2.画質を保ったままサイズを圧縮する「JPEG Minimizer」

webデザインを始めるにあたって、気にしなければいけないことのひとつが「なるべくファイルサイズを小さくする」ということです。表示スピードを早くすることが命題となってくるため、いかにクオリティーの高い画像を軽いファイルサイズにするかということが重要となってきます。

高解像度のカメラで撮影した画像は、とても大きなサイズになってしまうため、そのままwebに使うということはできません。そこで登場するのが「画像を圧縮する」という技術です。圧縮すると必ず画質が落ちてしまいますので、使うツールを選択するのが大事です。
「JPEG Minimizer」は、画質を保ったままに、JPEGやPNGイメージを最小サイズに圧縮する賢いツールです。手持ちのJPG 画像をアップロードして、ファイル容量が小さくなった画像をダウンロードできるというサービス。一度に画像を最大20個までファイルをアップロードできます。

<画像作成>

3.オンラインで画像編集可能な「Photoshop Express Editor」

スクリーンショット 2016-07-30 1.57.16

webデザインには画像編集ソフトが必須ですが、フォトショップは有料なので、いきなりそれを導入する前に、まずは無料版ツールで試してみましょう。「Photoshop Express Editor」は、オンラインで使える無料の画像編集ツールです。本家のフォトショップに比べて機能制限があるものの、画像切り抜きや加工、文字入れなど基本的な機能は揃っているので、簡単な画像作成ならサクサクはかどります。

Photoshop Express Editor

 

 

4.大人気の無料グラフィックツール 「GIMP」

スクリーンショット 2016-07-30 21.31.44

画像編集ソフトの中でも、愛用者が多い「GIMP」。フォトショップと同じような機能が使えるということで評判です。レイヤー機能やエフェクト、ブラシなど高度な機能が揃っています。愛用者が多いので、詳しい使い方が勉強できるサイトもたくさんあり、これから画像編集の勉強は始める人にもおすすめです。

GIMP

 

<Chrome拡張機能>

ブラウザはどれをお使いですか?パソコンを購入したときに最初からインストールされている「Internet Explorer」(Windowsの場合)や、「Safari」(Macの場合)のブラウザが一般的ですが、webデザインをするにあたっては「Chrome」ブラウザの使用が便利です。なんといってもそのポイントは拡張機能が充実していること!webデザインに役立つツールをご紹介します。

5.ページで使用されているフォント情報を取得「What font」

スクリーンショット 2016-07-30 1.42.08

ネットサーフィンをしているとき、「このフォントかっこいい!」と思うものに出会うシーンがたくさんあります。「何という名前のフォントなんだろう?」「もしフリーのフォントなら自分もこれをデザインに使いたい!」と思ったとき、フォント名を調べるのはとっても大変。そんなときにChrome拡張機能の「What font」を使えば簡単。拡張機能をインストールすると、Chromeブラウザのツールバー部分に「f?」というアイコンが出現しますので、それを押した上で、気になるフォントの上にマウスを持っていきます。すると、使用されているフォント名が表示されるという優れもの。フォント名を調べる時間を劇的に短縮してくれるツールです。

What font

 

6.画面上の色を取得できる「ColorPick Eyedropper」

スクリーンショット 2016-07-30 21.45.26

webデザインをするにあたって、使用する色を決める作業もとても大事です。使用する色を悩む段階で、「今見ているページ上にある色のカラーコードを知りたい。この色を使いたい」という場合に役立つのが「ColorPick Eyedropper」。この機能を追加すると、Chromeのツールバーへアイコンが表示されます。あとは、アイコンをクリックして、読み取りたい色の上にマウスを持っていけばOK。色の上でクリックすると、カラーコードを数値で表示してくれます。

ColorPick Eyedropper

 

<ボタン作成>

7.フラットタイプのボタンをデザイン「2.5dButton Flat UI Elements」

フラットタイプのボタンをデザインできるツールです。日本語にも対応しているのと、アイコン画像も選べるので便利。ボタンの形状やテキストの大きさ、背景の色などをリアルタイムでシミュレーションしながら作れます。今はフラットタイプのボタンが主流なので、手間をかけずにサクッとボタンを作れるツールで仕事効率化ができます。

2_5dbutton

 

<ファビコン作成>

8.ファビコンを自動生成してくれる「favicon.cc」

スクリーンショット 2016-07-31 1.42.12

「ファビコン」とは、favorite icon(フェイバリット・アイコン=お気に入りアイコン)の略語です。WEBサイトを開いた時に、アドレスバーに表示される小さいアイコンです。もちろんなくてもよいのですが、あったほうがホームページの存在をより一層印象付けることができますので、今はファビコンにこだわる人もたくさんいます。また、ファビコンを設定するメリットとしては「サイトの完成度を高める」「そのサイトにアクセスしやすくなる」という点も挙げられます。こだわりのファビコンを作るために便利なツールが「favicon.cc」です。

favicon.cc

 

<配色デザイン>

9.webサイトの配色に迷ったときに便利!「Heu/360」

 

スクリーンショット 2016-07-31 1.55.00

web制作をする場合、必ずといっていいほど悩んでしまうのが「配色」です。このツールは、配色バランスに悩んだときに助けてくれるというもの。使い方としては、まずはサイトの左側から「明るさ」の基準を選びます。その明るさを基準に、右側にカラーホイールが並ぶので、メインカラーとなる色を1色だけ選択します。すると、そのメインカラーと調和する色だけが画面に残り、合わないと判断された色は表示されません。現在表示されている色の中から、どんどん調和する色を選んでいけば、配色の参考になります。

Heu/360

 

<ロゴ作成>

10.オリジナルロゴがサクッと作れる「Logo Garden」

スクリーンショット 2016-07-31 2.07.52

webデザインにおいて、サイトのロゴ作成はもっとも重要です。既存のロゴをそのまま使う場合はともかく、新規にサイトロゴを作成するとなると、骨の折れる作業です。そこで便利なのが、Webブラウザ上でスタイリッシュなロゴが作成できるというサービス。全てオンラインで完結します。まずはサイトにアクセスし、ロゴを作るサイトのカテゴリーを選びます。「ビューティー」「ファイナンス」など、豊富なカテゴリーが用意されています。カテゴリーを選ぶと、シンボルアイコンがいくつか表示されます。ロゴデザインをするにあたって、こういったシンボルアイコンが用意されているというのは、とてもありがたいですね。そして画面の右側でレイアウトを調整したり、色はフォントを調整したりして、好みのロゴに仕上げていきます。仕上がったロゴは、低解像度のものなら無料でダウンロード可能。高解像度なロゴや、ロゴを使用した各種オプションは有料となります。

 

Logo Gardem

 

まとめ

これからwebデザインを始める人に役立つ無料ツール10選をご紹介しました。「デザイン」というと、難しくて特殊なものと考えがちですが、今は便利ツールがたくさん登場したおかげで、誰にでもセンスのいいwebデザインができる環境が整っています。ぜひ今回ご紹介したツールを使いこなして日々のデザインワークにお役立てください。

【ソフトバンク携帯のりかえでどこよりも高いキャッシュバックを保証します!】    
【ソフトバンクのiPhone7、スマホを購入したい方はこちら】
【auのiPhone7、スマホを購入したい方はこちら】
【ドコモのiPhone7、スマホを購入したい方はこちら】

販売店比較早見表

店舗名

                                           詳細

おとくケータイ

乗り換えキャッシュバック最高額を保証してくれます

  • オンライン完結でテナント費がない分、キャッシュバック金額が大きい
  • webだけではなく電話やメールで相談もできるので安心
  • キャッシュバック最高額を保証してくれる
  • ソフトバンクに乗り換えるなら最もお得

ソフトバンクオンラインショップ

ドコモオンラインショップ

au Online Shop

  • 各キャリア公式のためiPhone7含め人気機種の在庫が豊富
  • 24時間対応でオンライン完結のため時間をとられない
  • オンラインショップ限定キャンペーンもあり、プランも自由に選べるため料金を安くできる
  • キャリアを乗り換えない機種変更なら一番お得

ソフトバンクショップ, auショップ, ドコモショップ

  • 不要なオプション加入など営業をされる
  • キャッシュバックは出ない場合が多い
  • 混雑しているため非常に時間がかかることがある
  • 店員の質にばらつきがある
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る