＜バナー作成＞
1.素人でもすぐにwebデザインが作成できる「canva」
バナーやSNSへの投稿用画像作成は、プロのデザイナーはもちろんのこと、これからwebデザインを始めようという人にとっても最も大事な作業です。しかし、この「バナーデザイン作成」をスピーディーかつ優れたデザインにするためには、たくさんの時間と労力、そして慣れを必要とします。「もっとカッコイイバナーがサクサク作れたらなあ・・・。」と思っている全ての人におすすめのツールが「canva」。たくさんのバナーテンプレートが用意されているので、写真や文字を差し替えれるだけで、センスのよいバナーやデザイン案が作れます。
＜画像圧縮＞
2.画質を保ったままサイズを圧縮する「JPEG Minimizer」
webデザインを始めるにあたって、気にしなければいけないことのひとつが「なるべくファイルサイズを小さくする」ということです。表示スピードを早くすることが命題となってくるため、いかにクオリティーの高い画像を軽いファイルサイズにするかということが重要となってきます。
＜画像作成＞
3.オンラインで画像編集可能な「Photoshop Express Editor」
webデザインには画像編集ソフトが必須ですが、フォトショップは有料なので、いきなりそれを導入する前に、まずは無料版ツールで試してみましょう。「Photoshop Express Editor」は、オンラインで使える無料の画像編集ツールです。本家のフォトショップに比べて機能制限があるものの、画像切り抜きや加工、文字入れなど基本的な機能は揃っているので、簡単な画像作成ならサクサクはかどります。
4.大人気の無料グラフィックツール 「GIMP」
画像編集ソフトの中でも、愛用者が多い「GIMP」。フォトショップと同じような機能が使えるということで評判です。レイヤー機能やエフェクト、ブラシなど高度な機能が揃っています。愛用者が多いので、詳しい使い方が勉強できるサイトもたくさんあり、これから画像編集の勉強は始める人にもおすすめです。
＜Chrome拡張機能＞
ブラウザはどれをお使いですか？パソコンを購入したときに最初からインストールされている「Internet Explorer」(Windowsの場合）や、「Safari」（Macの場合）のブラウザが一般的ですが、webデザインをするにあたっては「Chrome」ブラウザの使用が便利です。なんといってもそのポイントは拡張機能が充実していること！webデザインに役立つツールをご紹介します。
5.ページで使用されているフォント情報を取得「What font」
ネットサーフィンをしているとき、「このフォントかっこいい！」と思うものに出会うシーンがたくさんあります。「何という名前のフォントなんだろう？」「もしフリーのフォントなら自分もこれをデザインに使いたい！」と思ったとき、フォント名を調べるのはとっても大変。そんなときにChrome拡張機能の「What font」を使えば簡単。拡張機能をインストールすると、Chromeブラウザのツールバー部分に「f?」というアイコンが出現しますので、それを押した上で、気になるフォントの上にマウスを持っていきます。すると、使用されているフォント名が表示されるという優れもの。フォント名を調べる時間を劇的に短縮してくれるツールです。
6.画面上の色を取得できる「ColorPick Eyedropper」
webデザインをするにあたって、使用する色を決める作業もとても大事です。使用する色を悩む段階で、「今見ているページ上にある色のカラーコードを知りたい。この色を使いたい」という場合に役立つのが「ColorPick Eyedropper」。この機能を追加すると、Chromeのツールバーへアイコンが表示されます。あとは、アイコンをクリックして、読み取りたい色の上にマウスを持っていけばOK。色の上でクリックすると、カラーコードを数値で表示してくれます。
＜ボタン作成＞
7.フラットタイプのボタンをデザイン「2.5dButton Flat UI Elements」
フラットタイプのボタンをデザインできるツールです。日本語にも対応しているのと、アイコン画像も選べるので便利。ボタンの形状やテキストの大きさ、背景の色などをリアルタイムでシミュレーションしながら作れます。今はフラットタイプのボタンが主流なので、手間をかけずにサクッとボタンを作れるツールで仕事効率化ができます。
＜ファビコン作成＞
8.ファビコンを自動生成してくれる「favicon.cc」
「ファビコン」とは、favorite icon(フェイバリット・アイコン＝お気に入りアイコン)の略語です。WEBサイトを開いた時に、アドレスバーに表示される小さいアイコンです。もちろんなくてもよいのですが、あったほうがホームページの存在をより一層印象付けることができますので、今はファビコンにこだわる人もたくさんいます。また、ファビコンを設定するメリットとしては「サイトの完成度を高める」「そのサイトにアクセスしやすくなる」という点も挙げられます。こだわりのファビコンを作るために便利なツールが「favicon.cc」です。
<配色デザイン>
9.webサイトの配色に迷ったときに便利！「Heu/360」
web制作をする場合、必ずといっていいほど悩んでしまうのが「配色」です。このツールは、配色バランスに悩んだときに助けてくれるというもの。使い方としては、まずはサイトの左側から「明るさ」の基準を選びます。その明るさを基準に、右側にカラーホイールが並ぶので、メインカラーとなる色を１色だけ選択します。すると、そのメインカラーと調和する色だけが画面に残り、合わないと判断された色は表示されません。現在表示されている色の中から、どんどん調和する色を選んでいけば、配色の参考になります。
＜ロゴ作成＞
10.オリジナルロゴがサクッと作れる「Logo Garden」
webデザインにおいて、サイトのロゴ作成はもっとも重要です。既存のロゴをそのまま使う場合はともかく、新規にサイトロゴを作成するとなると、骨の折れる作業です。そこで便利なのが、Webブラウザ上でスタイリッシュなロゴが作成できるというサービス。全てオンラインで完結します。まずはサイトにアクセスし、ロゴを作るサイトのカテゴリーを選びます。「ビューティー」「ファイナンス」など、豊富なカテゴリーが用意されています。カテゴリーを選ぶと、シンボルアイコンがいくつか表示されます。ロゴデザインをするにあたって、こういったシンボルアイコンが用意されているというのは、とてもありがたいですね。そして画面の右側でレイアウトを調整したり、色はフォントを調整したりして、好みのロゴに仕上げていきます。仕上がったロゴは、低解像度のものなら無料でダウンロード可能。高解像度なロゴや、ロゴを使用した各種オプションは有料となります。
まとめ
これからwebデザインを始める人に役立つ無料ツール10選をご紹介しました。「デザイン」というと、難しくて特殊なものと考えがちですが、今は便利ツールがたくさん登場したおかげで、誰にでもセンスのいいwebデザインができる環境が整っています。ぜひ今回ご紹介したツールを使いこなして日々のデザインワークにお役立てください。
販売店比較早見表
|
店舗名 |
詳細 |
|
『おとくケータイ 乗り換えキャッシュバック最高額を保証してくれます |
|
|
|
|
ソフトバンクショップ, auショップ, ドコモショップ |
|
』
