Webデザインデザイン制作につかえる便利な有料・無料ツールとお役立ちサイト15選!【残り8名】2020年5月スタート17期生募集中たにまちくんデザイン制作に使うソフトを揃えようと思うんだけど、PhotoshopとIllustratorくらいしかないのかな?無料のソフトがあれば嬉しいけど、どんなときでも使える有料ソフトは持っておきたいな。トリペン先生デザイン制作ソフトの有名所は世界的にシェアも広い「Photoshop」と「illustrator」が手堅いな!有料ソフトと合わせて無料のソフトも便利なものがたくさんでているから、合わせて使うと効率アップだぞ!これからデザイン制作の仕事をしていくなら、デザイン制作ツールが必要です。世界的にシェアが広いAdobe社の「Photoshop」「Illustrator」などが、デザイン制作の代表的なソフトです。長く使うなら年々開発で機能がパワーアップしていくという意味でも、有料のソフトを一つは持っておくことが推奨されます。有料ソフトと合わせて無料ツールや、素材サイトなどを利用することで効率よくデザイン制作をすることができます。代表的なツールとWebサイトをまとめましたので、ぜひ参考にしてみてくださいね。まとめ:有料ソフトならAdobeCCに契約しておけば、ほとんどがカバーできる!デザイン制作ツール(有料)本格的に仕事レベルでデザイン制作を始めるのであれば、必須になる高クオリティのデザインツールを紹介します。近年はさまざまなソフトの技術開発が進み、Adobe以外のソフトでデザイン制作を完成される方もいますが、まだまだAdobeソフトのシェアは大きいです。有名なソフトくらいはぜひ知っておきましょう。Photoshop「Photoshop(フォトショップ)」は、Adobe社から提供されている世界で最も有名なビットマップ画像編集ソフトです。プロフェッショナル仕様のデジタル画像編集アプリケーションです。高度な画像選択や手描きさながらのペイント、インテリジェントなレタッチなど、パワフルで新しい写真編集ツールと革新的な機能の数々を備えています。ネイティブサポートし、幅広いワークフローの効率化を実現します。(引用:Adobe公式サイト)このビットマップ画像とは、「ピクセル」といわれる正方形の色が付いたマスが連続して画像を表現しています。色みの補正・修正や画像の編集に強く、写真やイラストの加工にも強いため、デザイナーでなくてもPhotoshopを使っている方は多いでしょう。illustrator「illustrator(イラストレーター)」も、同じくAdobe社から提供されているベクター画像編集ソフトです。印刷、Web、モバイル、ビデオなどの幅広い用途で活用できる、業界標準の強力なグラフィックアプリケーションです。高度な描画ツール、豊かで自然な表現を可能にするブラシツール、作業時間を短縮する様々な機能が備わっています。ベクター画像とは、上記のビットマップ画像と違い、座標を元に画像を描写している画像です。その特徴として、自由に画像が荒れることなく大きさや形を変更することができます。illustratorはPhotoshopほど加工は得意ではありませんが、ショートカットや大まかな操作方法は似たような部分が多いので、片方が使えるようになれば、両方の操作を覚えるのはそこまで大変ではありません。illustratorはオブジェクトの重なり方が特殊なので、その仕組みさえ覚えればあまり難しくはありません。Cloud」への契約が必要になります。(通称AdobeCC)AdobeCCの契約プランにはいくつか種類があり、Adobeが提供している他のソフトなどもまとめて自由に使えるコンプリートプランや、指定のソフトだけを契約できる単体プラン、法人向けプランなど複数のプランが用意されています。デザイナーとしてこれから活動していくなら、基本的には「個人向けのコンプリートプラン」がオススメです。AdobeCCに契約していればデザインソフトだけではなく、動画編集ソフトやDTPソフトなども同じ金額で使い放題です。学生や学校教員の方には「学割」が利用でき、少し契約費用を安く抑えることができます。Adobe社と携帯している芸術系の大学、専門学校などでは生徒が対象の割引制度などがあります。Coding社が開発のWebやモバイルのUIデザインに特化したデザイン制作ツールです。UIデザインとは、アプリやソフトウェアの「ユーザーインターフェース」デザインのことで、主にWeb業界で使われることが多いですが、UIデザインの考え方はデザイン全体でも常識となりつつあります。雰囲気としてはあとで紹介する「AdobeXD」とも似ています。グラフィックデザインよりも、Webデザイン・アプリのデザインに関わる方にはおすすめです。契約料金は「$99/年」です。日本円にして年間約1万円ほどで利用できます。デザイン制作ツール(無料)最初に有料の使い勝手と便利さが安定したソフトを紹介しました。次は、有料のソフトとセットで使ってみたい無料で使える便利な制作ツール・ソフトを紹介します。無料のソフトでも手軽な画像作成が簡単にできたり、動作が軽いのでアイデアのブレストに使うなど、自分のやりたいことに合わせて気軽に使っていけるのが最大の魅力です。AdobeXD「AdobeXD(アドビエックスディー)」はこちらもAdobe社から提供されている、Webデザイン・UIデザイン制作ツールです。無料のスタータープランがあり、無料体験版でも制約はありますがほとんどの機能を使うことができます。便利なのはカンプの共有機能や、UIデザインに欠かせないプログラムの動きをアニメーション生成できるなど、実はかなりの高機能なソフトです。年々開発が進みできることがかなり増えてきたので、WebデザインにおいてはAdobeXDCC一つで十分になる時代が来るかもしれません。Editor」はブラウザで使用できるビットマップ画像編集ツールです。画面や使い方がどことなくPhotoshopに似ているため、Photoshopが使える方なら外出先や仕事先のパソコンで簡単に画像編集をすることができます。これは本当にあった話ですが、多少のデザインを扱う会社のパソコンにPhotoshopが入っておらず、さらに制作系ソフトが何も入っていない現場もあります。ブラウザで使用できるサイトを知っていると、ちょっとしたときに役に立つこともあるので、ぜひ困ったときは活用してみてください。Canvahttps://www.canva.comこちらもブラウザで画像編集やバナー作成、ブログのアイキャッチなどが簡単に作れる便利なツールです。会員登録でつくったデザインを保存・再編集でき、無料のテンプレートや素材などが揃っているので、いきなり一からバナーやデザインを作るのが難しいという方には、こちらで画像制作の雰囲気を掴むのもオススメです。簡単に起動できるので、アイキャッチ、カバー画像の作成にもぴったりです。Paint(メディバンペイント)」は無料で使える高性能のペイントソフトツールです。WindowsでもMacでも使用でき、iPadなどのアプリ版も配信されています。クラウドでファイル保存・同期ができます。したイラスト作成から本格的なイラストにも使えます。PencilとiPadなどとセットで使うことで、さらに生産性を上げることできるでしょう。その他便利ツール・サイト実施に制作のするためのツールやソフト以外にも、制作をする上で困ったときに参照にできるサイトをいくつか知っておくと、とても便利です。デザイン制作で意外と困るのは、自分で素材を用意するためにそれを探す時間で制作にかける時間が圧迫されてしまうことです。制作の時短にも繋がるので、便利なサイトはぜひ自分でブックマークして予めどのサイトから探すのか、決めておきましょう。Font-familyメーカーhttps://saruwakakun.com/font-familyオススメWebサイトの記事でも紹介している「サルワカ」さんが制作のフォントツールです。元々はWebデザイン制作の際に、サイトで表示するフォントを指定するタグを発行できる大変便利なツールですが。多くのフォントを並べて比較したり、有名なサイトで使われているフォントが分かったりと、眺めているだけでも楽しく勉強になるサイトです。Fonts(旧Type-Kit)https://fonts.adobe.comまたしてもAdobe社のツールですが、これは大変便利なツールなので紹介させてください。Fonts(旧Type-Kit)」は、Adobe社が提供しているフォントのサブスクリプションサービスです。こちらに登録されているフォントは、自由にPhotoshopやillustratorにフォントとして追加でき、さらにロイヤリティフリーなので商用利用が可能になっています。いった権利関連の確認もクリアしたフォントが登録されているので、業界問わずデザインをする上で必ずお世話になることでしょう。こちらもAdobeCCに契約すれば、自動的に使えるようになります。MONO(アイコンモノ)」は、フリーで使えるアイコン素材、ベクター素材を提供しているフリー素材サイトです。Webデザインや印刷物、資料作成などに幅広く使用できます。素材の再配布は禁止、データの著作権は放棄していないなど、利用の前には必ず規約をチェックしておきましょう。当ブログの画像作成にも、こちらのサイトの素材にお世話になっています。Awesome(フォントオーサム)」は、WebデザインのHTMLとCSSを使ってアイコン表示ができるアイコンWebフォントです。MONO」が画像素材ならば、こちらはアイコンをWebフォントとしてWeb上で使用できるようにしたものです。詳しい使い方は省きますが、Webフォントとして表示するのでCSSではフォントと同じ扱いで大きさ・色の変更ができるのが便利なポイントです。こちらもかなり種類があるので、Webでアイコンを探すならまずこちらをチェックするべきでしょう。原色大辞典https://www.colordic.org原色やパステルカラーなどの膨大な数のカラーコードや色名が網羅されているまさにカラー辞典のようなサイトです。このサイトに記載されているカラーコードはWebデザインでもデザイン系ソフトの色を指定するときにも使用できます。基本色を指定して、配色パターンが参照できるのも大変便利です。プランを選択することで、毎月決められた上限の素材を自由に入手することができます。有料の素材サイトだけ合って、扱っている写真はフリー素材写真よりも種類が多くクオリティも高いものが揃っていますが、やや契約料金が高めです。毎月、一定量の画像や素材を使うのであれば、オススメできるサイトです。写真AC・イラストAChttps://www.photo-ac.com写真やイラストなどの幅広い種類の素材を無料でダウンロードできるフリー素材サイトです。いずれかのサイトに会員登録すれば、すべての関連サイトで同じアカウントを利用できます。無料プランでは1日のダウンロード数に制限があり、スモール以外のサイズの画像は有料ダウンロードなどの一部制限があります。有料プランではlargeサイズの画像が制限無しでダウンロードできたり、ダウンロード枚数の制限が開放されます。いらすとやhttps://www.irasutoya.com「いらすとや」は、フリーのイラスト素材サイトとしてあまりにも有名なサイトです。中にはどんなときに使うのかわからない画像もありますが、その自由さもいらすとやの魅力と言えます。時間やお金をかけられないプレゼン資料やちょっとしたポスターの作成時など、緩やかで汎用性が高いイラストが活躍できる範囲は広いでしょう。まとめ:有料ソフトならAdobeCCに契約しておけば、ほとんどがカバーできる!デザイン制作に便利なソフトやツールを、有料と無料でそれぞれ紹介してきました。ほとんどの部分で「Adobe」が提供しているサービスがでてきましたが、デザイン業界の最大手であり年々ソフトの開発を続け、便利な機能や次々と実装されているので、特別なこだわりや金銭的に問題がなければ「AdobeCC」に契約するのは最も無難かもしれません。自分が長く使えるぴったりの制作ソフトを見つけて、自由にデザイン制作に励んでみてくださいね。【残り8名】2020年5月スタート17期生募集中クリエイターズ・ファクトリーでは毎週、個別の説明会・相談会を開催しております。受講生の9割が全くの未経験からWeb業界へ進んでいますので、不安を感じている方でも安心して受講いただけます。詳しく聞きたい方は、説明会にご参加下さい。Mr54475519flag受講コースについてhow_to_reg先輩インタビューsmsよくあるご質問まずは説明・体験会にご参加ください説明会では、ヒアリングをしてスクールの説明をします。お悩みの事や質問などは、お気軽にお聞きください。