こんにちは。
最近僕の属しているとあるコミュニティで画像作成をされている方が多いので、僕が知っている中で画像作成・デザインに使えるツールをまとめてみようと思いました。
全くの初心者でも使いやすい一方で最終的に実務でも使えるツールを厳選したつもりではあるので、ぜひこの記事が参考になってくれたら嬉しいなと思います！
画像・デザイン作成ツール
①Canva
公式URL：https://www.canva.com/ja_jp/
①テンプレート素材が豊富。テンプレをいじるだけで完成度の高いデザインを作れる
②慣れてしまえば難しい操作を必要とせずにデザインを作成できる
③無料で使えるフォントが非常に豊富
Canvaはデザイン・画像作成の初心者でも直感的に使えるデザインツールです。アイマスをやっている方なら『Pグリ』の名刺作成ツールに操作感が比較的似ていますね。
Canvaの売りの一つがテンプレート素材の存在です。完成度の高いデザインがテンプレートとして提供されており、オシャレなものからビジネスチックなものまで満載。これらを基に編集することで初心者でもオシャレなレイアウトを作成することができます。
提供素材も優秀。グラデーション図形や斜線入り円形といったハイクオリティなデザインに必要不可欠な素材もそのまま使用できます。
そして日本語フォントだけで数百種類あると言われるフォントの豊富さも売り。使いたいフォントがないということはまず無いといっていいほどの量を誇ります。
詳しい使い方は下記の動画を参照していただきたいのですが、操作感もマウスドラッグで完結するものが多く直感的。
総じて画像作成に慣れていない初心者、手軽にかっこいい画像を作りたい方には非常におすすめの無料ツールです！
【参考動画】
②Figma
①Adobeソフトの使用感そのままに基本無料で使える
②「ペンツール」「クリッピングマスク」「グラデーション」など、できることが非常に多い
③実務でもよく使われるため趣味の域を超えた利用にも対応できる性能
画像作成初心者向けのツールがCanvaなら、ある程度画像作成やデザインに慣れてきた人がさらに上のクオリティを目指したい時に役立つツールがFigmaです。
「無料で使えるAdobe XD」といった感じの性能で、基本的な図形ツールはもちろん、ペンツールや角丸機能・グラデーションツールといったイケてるデザイン作成に不可欠なツールも完備。
さらに多数のプラグインを導入することで自分好みの性能にカスタマイズすることも可能。完成度・拡張性の高さは完全に無料のレベルを逸脱しているといえます。
また、元々はWebデザイン用ツールなこともあり実務でのアプリ開発・Webサイトデザイン作成にも使われるツールです。つまりFigmaに慣れておけば将来的にデザインを仕事や副業で使う際にも強い味方となってくれます。
総じて一歩上の画像作成を目指したい人・デザイナーを目指す人の足がかりとして非常に役立つ無料ツールです！
【参考動画】
デザイン参考資料系
画像作成をする際に必要となってくるのが参考資料の存在。ここでは無料で良質なデザインを集められるサイトをいくつか紹介していきます。
王道中の王道。検索したいワードを入れれば対応したデザインをたくさん見つけられます。
見つけるだけでなく、ボード機能を使えばデザインをまとめておくことも自由自在。画像作成の際には必須級のツール(サイト)です。
②SAMUNE
目を惹かれる良質なデザインのYouTubeサムネイルを集めたギャラリーサイト。思わずクリックしてしまうような事例をデザイ…
良質なYoutubeサムネイル画像を集めたサイト集です。気に入ったサムネイルをクリックすればそのまま動画に飛べるのもGood。
「ジャンル」「デザインテイスト」「色」などから検索できる上に更新頻度も安定しているため、さまざまなデザインの収集には抜群のサイトです。
③BANNER LIBRARY
バナーデザインの参考になる、おしゃれで良質なバナーデザインをまとめたギャラリーサイト、BANNER LIBRARYです。…
良質なバナーを集めたギャラリーサイトです。他にもバナーを集めたギャラリーサイトはありますが、トレンドのバナーだったりオシャレなものはこのサイトが多い印象。
こちらもサイト内検索で数多くの選択肢の中から選べるため、デザインの参考として最適。普段から眺めておいて好きなバナーを収集するのにもおすすめできるサイトです。
④MUUUUU.ORG
Webサイトからデザインを参考にしたい時に有用なWebギャラリーサイトです。ギャラリー系サイトには他にも『SANKOU!』『I/O 3000』『81-web.com』などがあります。
業界からの評価が高い上に種類も豊富。画像デザインをする上でもWebデザインから学べる部分も多いため、参考資料として強い味方になってくれるはずです。
⑤ホットペッパー/ホットペッパービューティー
あまり言われていないかもしれませんが、無料で入手できる紙媒体デザインの参考資料として非常に優秀なんですよね……！
一冊の中に数多くのデザインバリエーションがある上に「イマドキのデザイン」が豊富に詰まっている点がGood。駅を探せば大体置いてある関係上、入手難易度が低い点も見逃せません。
デザイン作成用便利ツール系
ここでは画像を実際に作成したり、気になった色・フォントを調べる時に使える(よく使う)サイトやツールを紹介します！
①Blobmaker【流体シェイプ作成】
Make organic SVG shapes for your next design. Modify the com…
最近のデザインでトレンドになっている『流体シェイプ』を作成できるジェネレーターサイト。形や角を調整できる上にランダムで多数のシェイプを生成できます。
気に入った形と色のシェイプはsvgとしてすぐにデザインで使えます。
(コードも生成できます。エンジニア系の人にはそちらの需要もあるかも？)
②Colorzilla【色を調べるツール】
高度なスポイトツール、カラーピッカー、グラデーション生成ツールなどの多彩で魅力的な機能…
いわゆる『Google拡張機能』の一種で、Webサイトからお気に入りの部分の色を特定できるツールです。
サイトを眺めている時に良いと思った色を見つけたタイミングや、PC上から特定のキャラクターの色合いを調べたくなった時などにおすすめ。使いこなせると世界が変わります。
③Fonts Ninja / WhatFont【フォントを調べるツール】
Speed up your design workflow!…
The easiest way to identify fonts on web pages.…
いずれもWebサイト内で使われているフォントを手軽に調べられるツールです。オシャレなサイトや気に入ったフォントを見つけた時には、これらを使って調べてみるといいでしょう。
Webサイトで使われるサイトは『Webフォント』と呼ばれるものが多いです。それらは次に紹介するサイトから大体は入手することができます。
たまに「日本語フォントを検索したのに英語フォントの名前が出てくる」ことがあるのでそれだけは注意。
④Google Fonts【フォントサービス】
Googleで提供されているフォントが無料で使用できるサイト。前述のWebフォントは大体がGoogle Fonts対応フォントのため、Webサイトで気に入ったフォントや参考にしたいフォントを見つけたらここを見てみるのがGood。
ライセンス関連もしっかりしているので気軽に使えるのもありがたいポイントですね。
⑤Tiny PNG【画像軽量化サイト】
Free online image compressor for faster websites! Reduce the…
大きいサイズや要素の詰まった画像を作成すると、容量が大きくなりすぎて表示に時間がかかってしまうケースがあります。そこで役立つのがこのページ。
簡単に画像軽量化ができ、画質を落とさずに軽い画像を作ることができます。タイムラインでサクサク表示されるようになるためより多くの人に快適に見てもらえるようになります！
おわりに
ここまで読んでくださりありがとうございます！
この記事が好評でしたら、次回以降にまた別の資料だったりデザイン系の記事も書いていこうと思います。ご要望などがあればコメント等に残していただけると幸いです。
