WEB制作
Read More
WEBデザイナーを目指すあなたが最初に準備するべき4つの必須ツール
今回は、WEBデザイナーを目指す為に最低限必要なものや、ツール、インストールするべきソフトをご紹介します。
あくまで、本気でプロのWEBデザイナー目指そうといった方に向けてご紹介しています。
かかる費用は最低限でご紹介しますが、全て無料ツールでやりたい！といった方向けの記事ではありません。
ですが、どのみちWEBデザイナーを目指すのであれば、今回記載するソフトに行き着くはずです。
プロと同じ環境で作業をすることも上達の近道だと思って参考にしてください。
準備1. パソコン
当たり前ですがパソコンが無いと始まりません。
ここで勘違いされがちなのですが、デザイナー＝MAC（Appleのパソコン）でなければいけない、といった事はありません。
事実、私も今までWindows一筋です。
MACのメリットとして「カッコイイ」。これはもうWindowsユーザーとしても認めざるを得ないメリットです。スペックも申し分ありません。
ですが、Windowsなら同じスペックのパソコンをMACと比べてかなり割安で購入することが出来ます。
そして、WEBデザイン程度であれば、そこまでハイスペックなものも必要ありません。
なので、Windowsのパソコンであれば、デスクトップなら6～8万円、ノートパコンなら8～10万円程度のものを使っていれば当面の問題はないと思います。
もう少し具体的に言うと、CPUはCorei5でメモリは4Gくらいのスペックでも作業は可能です。
もう少し予算があれば、メモリを8Gにしてあげると、ある程度快適に作業出来る環境になると思います。
パソコン選びで、1点だけ注意するとすればモニターの解像度。
デスクトップであれば1920×1080のフルHDで表示出来るモニターがメインになってきているので問題ないとは思いますが、ノートパソコンの場合、まだWXGA・HD解像度 (1366×768) のモニターが採用されている場合があります。
これだと正直、デザイン制作中の作業スペースが狭く、快適に作業することは難しいです。
解像度はなるべく高いもの、モニターサイズは15インチ以上が理想です。
準備2. インストールするソフト
パソコンの準備が出来たら、次はソフトを揃えましょう。
冒頭でも述べましたが、基本的に無料で使えるものを優先的にご紹介しますが、「何とか使えるレベル」の無料ツールは除外しています。
プロになってからも使い続けることが出来るソフトのみご紹介していきます。
画像編集ソフト
まずはデザインを制作するソフトが必要ですね。
これはもう1択です。
「Adobe Photoshop CC」
個人フォトプラン 月額980円
（1カ月は無料体験）
http://www.adobe.com/jp/products/photoshop.html
言わずと知れた画像編集ソフトPhotoshop。
WEBデザイナーにとってPhotoshopは必須ソフトといっても過言ではありません。
よくPhotoshopを無料ツール・無料ソフトで代用！といった記事もみかけますが、私に言わせれば無駄なことでしかありません。どうせみんな最終的にPhotoshopに行き着きます（笑）
ソフト2つ分の操作を覚えるくらいなら初めからPhotoshopを導入し、経験を積んだほうが断然成長も上達も早いです。
更に、Adobe CCのコンプリートプランなら月額4,980円で20種類くらいのソフトが使えます。
中には、IllustratorやDreamweaverといったWEBデザイナー御用達のソフトもあります。
ただ、Illustratorさえあればイラスト描き放題！なんて妄想は捨てましょう。
おそらく最初は線を1本引くのにも四苦八苦するはずです。なので、最初は不要。
まずはPhotoshopを使いこなす事だけに集中しましょう。
実際、自分でイラストを描かない私のPhotoshopとIllustratorの使用頻度比率は8：2くらい。
WEBデザイン実務では、圧倒的にPhotoshopを使っています。
WEBデザインではFireworksを使うという方もいますが、経験上Photoshopを使ってる人が断然多いので、Photoshopで制作を始めることをオススメします。
WEBデザイナーを続けていると、外部のデザイナーと連携をとる必要性が必ず出てきます。
スムーズに作業を共有するには、同じ編集ソフトを使っているということも重要になってきますので、ここは押さえておきましょう。
ソースコードエディター
「WEB」デザイナーたるもの、コーディングの知識も必要だというのが私の考え。
ソースコードを書く為のソフトもちゃんと入れておきましょう。
Adobeでコンプリートプランを選択していれば、Dreamweaverという有名なソースコードエディターが使えます。
ですが、このDreamweaverは既にソースコードエディターの範疇を越えてIDE（統合開発環境）ともいうべき様々な機能が付加され、初心者には扱いにくくなってきた感じがします。
そこで、同じAdobeなのに無料のソースコードエディター、Bracketsをご紹介します。
コーディングに特化した軽量なソースコードエディターとして非常に優秀で使い勝手も良いです。
最初に使った時は、何故これが無料なのか驚いた程、良いエディターだと思います。
無料のソースコードエディターでは少ない日本語対応というのも嬉しいですね。
超オススメです。
「Adobe Brackets」
無料
http://brackets.io/
FTPクライアント
聞きなれないソフトですが、これは作ったWEBサイトをサーバーに転送（アップロード）する時に使うソフトです。
作ったデザインを公開する。みんなに見てもらう為に必要です。
WindowsならWinSCP、MACならFileZillaをインストールしておけば問題ないでしょう。
「WinSCP」
無料
https://winscp.net/eng/docs/lang:jp
「FileZilla」
無料
https://ja.osdn.net/projects/filezilla/
準備3. フォント
まず、初心者デザイナーのあなたにとって、「フォントを買う」という行為に躊躇いを感じるかもしれません。
前回の記事、【PSD付】脱初心者！ランディングページをプロっぽくデザインする5つの方法でもフォントについて少し触れましたが、デザインをする上でフォントは重要な要素です。
フォントはデザイナーの必要経費。ここはケチらず購入しましょう。
フォントにお金がかけられるようになってこそプロの証だと思っています（笑）
フォントパッケージで一番メジャーなのが、モリサワフォントですね。
ただこちらはかなり高価。しかもライセンスは1年更新。
そこでオススメなのがFONT×FAN。
比較的安価でベーシックな日本語フォントも多く、ウェイト（太さ）のバリエーションも豊富。使い勝手が良いパッケージです。こちらは1度購入すればずっと使えます。
「FONT×FAN HYBRID 3」
標準価格：11,772円（税込） → 直販価格：9,990円（税込）
http://www.fontalliance.com/product/ffh3/
準備4. サーバー
最後にWEBサイトを公開する為のインターネット上のスペース、レンタルサーバーを契約しましょう。
レンタルサーバーは様々ですが、最初は安価でコントロールパネルの操作も分かりやすいロリポップがオススメです。
料金も激安。エコノミープランが月額100円で使えます。
wordpressも勉強して使えるようになりたい方はスタンダードの月額500円がオススメですが、いつでもプランのアップグレードが出来るので、最初はエコノミーで通常のサイト制作に励みましょう。
「ロリポップ – エコノミープラン」
月額100円（初期費用1,500円）
https://lolipop.jp/
まとめ
これで最低限の準備は完了です。
パソコンは既に持ってるものとして考えてると、必要経費としては
「Adobe Photoshop CC」 980円/月
「FONT×FAN HYBRID 3」 9,990円
「ロリポップ – エコノミープラン」100円/月（初期費用1,500円）
イニシャルコストとして合計約12,600円、以後毎月1,100円程度となります。
みなさんがWEBデザイナーを始めるにあたってこの費用が高いと感じるか、安いを感じるかどうかは分かりませんが、一昔前、Adobeのソフトが何十万円もした時代からWEBデザインに携わってきた私として、今はWEBデザインが非常に始めやすい環境にあると思います。
この記事を参考に、どうせやるならプロも使う間違いのないツール・ソフトをしっかりと勉強して頂ければ幸いです。