mozmoz

| ウェブのあれこれ中心のブログです

Webデザイナーを始めるために必要なもの

2020年7月19日

誰でもなれるWebデザイナー。
最近ではオンラインで学べるサービスも充実してきており、いよいよ道具さえあればスクールに通わなくてもWebデザイナーになれる時代になりました。

じゃあ実際にWebデザイナーを始めようとするとき、何があればいいの?

Webデザイナーになるまでは何が必要かピンと来ない人も多いのではないでしょうか。
というわけで、Webデザイナーを始めるためにはどういったものが必要で、どういう設備があればいいのか紹介していこうと思います。

1. PC

なんと言っても必要なのはパソコンです。
まずはこれがないと何もできません。

多分気になるのはMACがいいのか、それともWindowsがいいのかという話だと思います。
私はどっちも持ってるんですが、お勧めするなら断然Macです。

じゃあWindowsなら仕事にならないのか?そのへんも含めて詳細を書いていきます。

推奨スペックを満たしていれば、MacでもWindowsでも仕事はできる

WebデザインはAdobeというソフトを利用して作っていきます。
とりあえずAdobeが使えれば良いのです。
(もちろん他にもソフトは利用しますが、Adobeが使えて他のソフトが使えないというのがあまりないので)

Adobeはサイトで推奨スペックを公開しています。
Webデザイナーが使用するソフトと、それぞれの推奨スペックは下記です。

Adobe Illustratorの推奨スペック
!https://helpx.adobe.com/jp/illustrator/system-requirements.html

Adobe Photoshop
https://helpx.adobe.com/jp/photoshop/system-requirements.html

Adobe XD
https://helpx.adobe.com/jp/xd/system-requirements.html

動画も考えているならこれも
Adobe PremirePro
https://helpx.adobe.com/jp/premiere-pro/system-requirements.html

MacかWindowsか、どちらにすべきか

一番気になるのはこの辺だと思います、
結論、どっちでもデザインはできます。が、できればMacの方が良いと私は思います。

なぜMacが良いかというと、理由は大きく二つ

・Macユーザーのデザイナーが多いので、データのやり取りがスムーズ
・Adobe製品との相性が良い

特に、二つ目は私に取っては結構大きな理由です。
実際XDのアップデートはMacの方が先を行ってましたしね。

逆にMacのデメリットはこんな感じです。

・高い
・WordやExcelとの相性が悪い

まあ二つ目は人によってはあまり気にしなくていいかもしれないですが。
私はExcel使う機会がぼちぼちあるのですが、まーすぐ落ちるんです。笑

あとは価格の問題ですね。Macは高いです。Windowsはいろんなメーカーが出しているので安価で高スペックなものが揃えやすいですが、Macはそうはいきません。
Windowsを買って軌道に乗ったらMacみたいな戦略もいいかもですね。

WindowsのメリットデメリットはMacと逆です。
安価で手に入りますが、デザイナーでWindowsユーザーは少数派なのでフォントなんかのやりとりが面倒です。

一緒に仕事をしてデータをやり取りする人は、どっちを使っているのか確認してから決めるのもいいと思います。

PCはこんな感じです。


モニター

次にデザインを確認するために必要なのがモニターです。
PC同様にデザインするにあたり、重要なポイントです。

個人的におすすめしたいのは27インチ。
iMacのサイズです。

デザインをしていて不便を感じないサイズですし、ウィンドウを複数開いていても不自由がないサイズです。
逆に23インチだとできなくはないですが、モニターが2枚くらいほしいですね。


Adobe

PCと同じくらい必須なのがAdobeです。
PCがあってもAdobeがなければデザインはできません。

Adobeとはデザインをするためのソフトです。
デザイン時に使用するAdobe製品は主にこの三つ。

Adobe Photoshop

Webサイトのデザインに使用している人も多いのではないでしょうか。
画像加工に優れたソフトです。

取った写真をWebサイトに載せる前にレタッチしたり、加工・トリミングしたりできます。
テキストの加工やイラスト作成だってできます。

画像作成のプロフェッショナルと言った感じです。
最近はAdobe XDでウェブデザインをする流れができてきていますが、Photoshopユーザーもまだまだ多いです。
XDではできない文字の細かいカーニング調整などもできます。
できる幅がめちゃくちゃ広いソフトなので、一つあるだけでWebデザインができるだけじゃなく、表現の幅も広がります。

Adobe Illustrator

ベクター形式でデザインができるソフト。
主にチラシやパッケージ、パネルなど印刷物のデザイン時に使います。
IllustratorでWebデザインしてる人もたまに見かけます。

最大のポイントはベクター形式ということです。
ベクター形式ってなんぞや、というとめっちゃ簡単にいうと、拡大してもギザギザにならないやつです。
滑らかな描画ができる反面、データが重くなるというデメリットもあります。

こちらもデザインをする上では超必須。
EPSファイルやSVGの編集にも使います。

素材サイトから落としてきたベクター形式のファイルを触ったり、自分で手書きしたアイコンやフォントをデザインに載せるのにも使えます。
フォトショップ同様、デザインには絶対欠かせません。

Adobe XD

比較的最近リリースされたデザインソフト。
Webサイトのデザイン、アプリのデザインに特化しています。
Photoshopやイラストレーターがデザインはデザインを作ることに優れていますが、XDはレイアウトやWebサイト全体の構成を作るのに優れています。

どのボタンを押せばどこに遷移するか、などのリンク設定が可能。
また、ホバーやスクロール時のヘッダー固定などの動きもXD内である程度再現することができます。

作ったデザインはリンクで吐き出すことができ、より実装後のサイトに近い状態のデザインを作成することができます。

近頃はXDでデザインすることが主流になってきました。
ぜひ手に入れておきたいですね。

XDはイラストレーターやフォトショップのように個別のDLはないようです。

全部揃えるならAdobe Creatve Cloud

Photoshop・Illustrator・XDすべてをそろえるならCreative Cloudを購入することを強くお勧めします。
年会費を払うだけで、プラン内のソフトをすべてインストールでき、またアップデートも無料です。
それに加えてAdobe Fontも利用可能です。

特に魅力的なのはAdobeのクラウドとAdobe Fontです。
AdobeクラウドはAdobeのクラウドで、作ったデザインをクラウド上にアップすることができます。
これでどこからでもデザインにアクセスすることができます。

またよく使うアイコンをクラウド上にアップしておけば、ドラッグアンドドロップですぐにデザインに配置できます。
クラウドにアップしたデータはPhotoshop・Illustrator・XDのどれからでもアクセスできます。

例えば、イラストレーターで作ったアイコンを、Photoshopで写真の上において、XDに配置ということも簡単にできるわけです。
最アンド高。

フォント


次に必要なのはフォント。
紙でもWebでも超重要なフォントです。

Adobe Font

Adobe Creative Cloudを購入するとついてくるフォント。
英語のほうがフォント数は多いですが、最初に比べると日本語フォントも増えてきました。定額で使える上に、
Creative Cloudに入っているデザイナー同士であれば、データのやり取りも問題がないので割と助かります。

モリサワフォント

業界で知らない人はいないフォントパッケージ。

Webの場合コーディングで使えないフォントは画像になってしまうので、使いどころに注意が必要です。
Web上でもモリサワのフォントを利用したい場合はType Squareという別サービスの契約が必要です。

とはいえ、バナーや紙、キービジュアルには欠かせない一品。

created by Rinker
価格:¥65,336

Google Fonts

Googleが提供しているフォント。商用・非商用にかかわらず無料で使えるWebフォントサービスです。

もちろん、Webサイトにも無料で実装が可能。
Webフォントをわざわざ購入するほどの予算はないけど、デフォルトフォントは使いたくない、みたいな場合にお勧めです。
日本語の種類は正直めちゃくちゃ少ないです。

英字フォントはかなり豊富。
セリフ・サンセリフ・スクリプトまで幅広いフォントが揃ってます。

Webサイトのデザインをするなら絶対に利用することになるでしょう。
無料でデータを落とせるので、データを引き渡す可能性がある場合などにおすすめです。

写真やアイコンなどのデザイン素材


これまでに挙げてきたもので、デザインに必要な設備は大体揃いました。

さあ!デザイン作るぞ!

となったときに必要となるのが画像やアイコン、背景などの素材たちです。
Web上には無料で商用にも使える写真素材サイトや、アイコン素材サイトが数多くあります。

以前にまとめたものがあるので、こちらの記事を参考にしてみてください。

【2020年版】商用利用もできる!おすすめの画像・写真サイト20選!

楽しいデザインライフを!

これだけ揃えばデザインを作成することができます!
最近では設備さえあれば、学校に通わなくてもデザインを学べるオンラインサービスが数多くありますからね。

独学でもデザイナーにはなれます。
ぜひ、楽しいデザインライフを送ってください。