WEBDESIGNER.TOKYO
ウェブデザイナー.トーキョー

WEBデザイナーになろう！と心で決めることは誰でも出来ますが、ではその次のステップとして色々と用意すべき物が沢山！
どれも現場でプロの人たちが使用しているソフトやアイテムですが、今では非常に安価で手を出せるようなりました。
この記事では、WEBデザイナーを目指す方に購入するべきソフトウェアやPCをまとめてみましたので参考にしてみてください。

デスクトップパソコン

残念ながらスマホのみでWEBの仕事を出来るようになった人は見たことがありません。
スマホのアプリだけでは出来ることが限られているため、スマホを利用してWEBデザイナーになることはかなり困難と言えるでしょう。（もしかしたら、今後はスマホのみで制作が完了するようになるかもしれませんが…）

まずは日頃デザインやhtmlコーディング作業を行うために、デスクトップPCかノートPCを購入する必要があります。
PCですと、画面も大きいですしデザインをするのにも複数のソフトを同時に動かす際にも非常に便利です。
そして、htmlコードを書く際にはキーボードでタイピンをした方が圧倒的に早い！

Windows10でWEBデザインをする際のデスクトップPCスペック

WEBデザインをする際に動かすソフトをストレスなく動かせるスペックを下記に挙げるとこんな感じでしょうか。

※すべてWindows10の場合

細かく項目を説明はしませんが、ざっくり言うとメモリやCPUは数字が大きい程性能が良いと考えてください。
ですので、CPUがIntel Core i5よりもIntel Core i7の方がストレスなく作業が出来ます。

HDDとSSDの違いは、SSDの方がPCを立ち上げる起動速度圧倒的に早いと言えます、HDDに比べると高価です。
今ではWindows10等のOSが入っているメイン部分をSSD、その他のデータを格納するエリアをHDDとドライブ分けをしているパターンが多いようです。

Amazonのリスト

上記で挙げたスペックに当てはまるPCを幾つかAmazonからピックアップしてみました。

Dell デスクトップパソコン XPSタワー Core i7プラチナモデル 18Q43SE/Windows10/16GB/256GB SSD+2TB HDD/GTX1060

3) Core i7, HDD 2TB + SSD 256GB, GTX1060
￥ 184,980

UフォレストPC Amazon限定 Core i7搭載省スペースハイエンドデスクトップパソコン【CPU Core i7 7700/メモリ16GB/SSD240GB/HDD2TB/DVDマルチドライブ搭載/OS Windows10pro】

￥ 109,800

富士通 デスクトップパソコン FMV ESPRIMO DHシリーズ WD2/C1 (Windows 10 Home/モニターなし/Core i7/16GBメモリ/約2TB HDD/スーパーマルチドライブ/Office Home and Business 2016/サテンブラック/無線LAN対応)AZ_WD2C1_Z718/富士通直販WEBMART専用モデル

￥ 139,980

いずれは動画制作も…と考えると最初から大きい金額を投入したくもなりますが、いきなり大きな金額を出してマシン性能を持て余すと勿体ないので、まずは5万円以下、10万円以下、15万円以下、それ以上、と4つの金額の範囲でどれくらい予算を掛けられるか？を考え、その中から選択をすると分かりやすいかと。
中古で問題ない人は、中古で揃えた方が初期費用は安く抑えられます。

ちなみに個人的経験で言うとデスクトップPCは3年持てば良い方です。
3年以上経つと世の中のソフトや扱うデータ容量がより大きくなる（重くなる）ため、3年で買い替えできる範囲の金額が一つの目安となりそうです。

WEBデザインをするために必要なソフト

WEBサイト（ホームページ）を作成するためには、まずデザインソフトでデザインを書き起こし、その後でコーディングソフトでhtmlコーディングを行う、と言う2段階の工程が必要になります。

そこで色々なソフトを利用するわけなのですが、極論としては「デザインソフト」「テキストエディタ」でデザインとコーディング作業は最低限可能です。
「テキストエディタ」はPC内に元から入っているアプリケーションソフトである「メモ帳等」でも代替出来るのですが、様々なソフトを使用することで、プレビュー機能がついていたり、コードヒントが付いていたりと便利な機能が盛り沢山で制作時間の短縮できるため、基本は下記のようなソフトウェアを購入することが、WEBデザイナーになるための第一歩と言えるでしょう。

デザイン作業、加工ならAdobe Photoshop

￥ 11,760

写真をリサイズしたりトリミング（切り抜き）したり、フィルタやエフェクトをかけて加工したり、更には写真から人物だけを切り出したり、と様々な機能が利用できるPhotoshop（フォトショップ）。
実際に触っていてデザイン作業が楽しいソフトと言えます。

このフォトショップはメインの機能としては上記のような写真加工なわけですが、WEBデザインソフトとしても大きな力を発揮してくれます。
px（ピクセル）単位での細かな調整が出来ますし、パーツの制作も簡単にできます。
そして最終的にはスライス機能を利用して個別に画像を書き出しいき、後述のDreamweaverでhtmlコーディングをしていく流れとなります。

難点としては重たい画像や写真ファイルを大量に使用するとPCが非常に重くなると言う事。
そのため、デスクトップPC・ノートPCどちらの場合でもある程度CPUやメモリ容量が大きいマシンを用意しないと動作にストレスを感じる事になります。

ベクターデータ、印刷物ならAdobe Illustrator

￥ 26,160

Illustrator（イラストレーター）は、ベクターデータと言うデータの種類を取り扱う事が出来ます。
ベクターデータの利点としては拡大・縮小をしても荒くならないため、非常に使い勝手が良い。（前述のフォトショップでは画像の拡大・縮小は荒くなってしまいます）。

また、イラストレーターを使う人は元々紙媒体のデザイナーが多く、印刷データ（ポスター、パンフレット、DM、名刺）のデザインを思うがままに出来るソフトと言えます。
とは言え、イラストレーターでもそのままWEBデザイン向けのソフトとしても使用できます。

フォトショップとイラストレーターは機能も使い方もかなり似ている（と言うか相互にデータのやり取りを出来る）ので一瞬どちらを使用して良いか判断に迷うかもしれません。
…が、px単位での細かい指定を行うとフォトショップよりは画像の書き出し方法などが若干異なっており、個人的にはPhotoshopの方がきっちりと細かく使えると思います。
最終的には好みの問題かもしれませんけどね。

最近では、スマートフォンとPCでホームページを表示した際に綺麗に画像を見せるため「.svg形式」で画像を作る場面も出てきましたので、今後はイラストレーターでWEBデザインをする場面も増えてくるかと思います。

htmlコーディングならAdobe Dreamweaver

上述のフォトショップ、イラストレーターではデザイン面で重要なソフトでした。
WEBデザイン作業と共に重要なhtmlコーディング作業を行うためのソフトもAdobe側で用意しています。
それが、こちらのDreamweaver（ドリームウィーバー）。

元々は、Macromedia社（Flashのソフトを作っていた会社）のソフトでしたが、今はFlash含めて主だったソフトはAdobe社に吸収されています。
そのお陰て、フォトショップ+イラストレーターでWEBデザイン→画像を書き出しでドリームウィーバーでhtmlコーディング、とすんなりホームページを作る流れが確率されています。

Photoshop、Illustratorは直感的にに使用できたかと思いますが、こちらはhtmlコードをひたすら書きまくるソフト。
htmlコードは覚えるまでがちょっと大変かもですが、phpやjavascriptに比べて英単語も分かりやすく、またオンラインでも本屋さんでもマニュアルが充実しているため非常に覚えやすいです。
（※と言うか、覚えないとWEBデザイナー・フロントエンドエンジニア・マークアップエンジニアはお仕事になりません…）

WEBデザイナーになりたい方は必須のソフトと言えます。

一式まとめて揃えるならAdobe Creative Cloudがオススメ

￥ 59,760

別々のソフトを買うのが面倒だ！
まとめてお得に購入したい！と言う人はこちらの「Adobe Creative Colud」購入が便利です。

上述のPhotoshop、Illustrator、Dreamweaverと言う、WEBデザイナー必須のソフトが使用できますし、更には最新版へのアップデート、様々なフォントを月額料金内で使用可能。
そして、エディトリアルや編集者必須のInDesign、動画クリエイター、3DCG、映像編集でも必須のPremiere、After Effectsが使用出来たりと、購入しない理由がないくらい便利なソフト群も魅力。

月額にならすとわずか￥ 4,980/月で使用できるため、ある意味Adobe社への税金だと思って支払う事をおススメします。
WEBデザイナーや紙のデザイナー、等などクリエイティブな仕事をする人には間違いなく必須のソフトです。

そして、一度ご自分で使用してソフトのクセや使い方を覚えてしまえば、そのまま業界に入って社会人として仕事をする際にも、ほぼすべてのプロの方々が使用しているソフトなので、共通の話題でビジネス的なお話が出来るようになります。

もっと機能について詳しく見たい方や、購入を検討されている方は公式サイトも覗いてみてください。
いかにこのAdobe creative Cloudが強力なソフトなのか理解できるかと思います。

https://www.adobe.com/jp/creativecloud.html