WEB制作に必要なものまとめ

こちらのサイトではWEBのノウハウについてまとめていますが、制作に必要な環境について書いておかないと、それぞれの環境に差があって説明しにくいことに気づきましたので、この記事でWEB制作に関するソフトなどについてまとめておきたいと思います。

やっぱり最優先で揃えたいPC

WEB制作でコードを書く作業はそんなに重い作業ではないのですが、デザインデータに主に「photoshop」という画像処理ソフトでデザインを利用します。
あとは「adobe XD」とか。これも別にすごく軽いソフトではないので、
最新版のPhotoshopがちゃんと動くのが作業PCの最低条件かと思います。

PhotoshopがそしてXXが動かないよーとかいってるやつ！さっさと買い換えろ！
せっかく時間を割いて勉強してるのに、色々無駄で勿体無いですよ。

10~15万ぐらい出せばすべて解決します。
スピードが早くなり、効率がいいのは言わずもがな、気に入ったPCで作業できるという心の問題も大きいです。

OSはどっちがいいの？

windowsでもMacでもどっちでもいいです。気に入った方を使ってください。
Macは高くて低スペック、と言われがちですが軽さや筐体の丈夫さ、キーボードの打ちやすさ、画面の美しさは折り紙つきなのでそういうところを気にしてwindowsを選ぶとめっちゃ高いです。
反面、macは一番安いノートを選んでもその辺は妥協してないと保証できます。
あと、結構古くてもオークションなどで人気なので下取り価格が下がらないのもいいですね。
自分は、ほぼ価値がゼロになるまで使い倒しそうな勢いですけどね。
不満がほとんどないからしょうがない。

どちらを選ぶかについてはどこを重要視するか、ですね。
使い慣れたwindowsの方が効率がいいということもあるでしょう。

Linuxはどうなの？

サーバーでよく使われるOSですのでサーバーとかに詳しい人が使ってるイメージ。
photoshopは動かないと思いますので、メインで使うのは難しいかもしれません。
デザインに関わらない人なら行けるかも。

ネット環境

当たり前ですがネット環境は必要です。
ソフトのダウンロードなど結構帯域を使いますので、モバイル回線のみはかなりきついかもしれません。
光回線などの固定回線を契約しておいた方がいいでしょうね。

WEB制作で使うソフト

デザインソフト

まず、デザインソフトを使用します。このサイトではあまりまだ触れられていませんが。
デザインがメインの業務でなくても、デザインを受け取って画像を切り出す作業は必要なのでインストールは必須でしょう。

adobeソフトなのでこちらから
Creative Cloud
月額有料のソフトです。
映像を作成するソフトも含まれています。WEBも映像を組み込むような場面が多くなっていますので、そういったことを視野に入れればそんなに高くないです。
月額利用料分くらいは頑張って稼ぎましょう。

Photoshop

adobeのソフトはクラウドサービスの月額制になっていますので、全てのソフトが使えるプランに登録しておいた方がいいと思います。
Photoshopは写真の加工を行うソフトですが、WEBデザインにも利用できます。
絵を描くソフトとしても使えますし、汎用性のある万能ソフトです。
ワイヤー作成 → デザイン作成・画像補正・イラスト作成 → デザイン納品
までこのソフト一本でできちゃいます。
月額有料のソフトです。

WEBデザインや、ワイヤー作成ソフトは色々他にもあるんですが、「画像編集」という点でどう考えてもphotoshopに勝てるソフトがないので、なかなか他のソフトが普及していない気がします。
納品となると、相手も同じソフトを持ってる必要がありますしね。

多分どれもphotoshopの作業ファイル形式である「psd」出力の機能を持っているのではないでしょうか。

Illustrator

Webデザインにおいてはさほど存在感がありませんが、イラストレーターも利用します。
元々はイラストを作ったり、紙媒体のレイアウトを行うためのソフトです。

ロゴやアイコンを作成する時に利用します。
SVGという軽量でどんなに拡大しても問題ないベジェ曲線データの画像を作成できますので、そういった場合に使用します。
とはいえ、シルエットのアイコンデータはフリー素材がかなり充実していますので、わざわざ作成する機会もやっぱりすくないですけどね。

また、紙媒体出身のデザイナーはだいたいIllustratorのほうが得意ですので、webデザインをすべてこのソフトで行うという方もいます。
月額有料のソフトです。

エディタ

HTMLやCSSはテキストデータなので、まずはこれが必要です。

Visual Studio code

最近使ってからメインになっていますが、最初からWeb制作に必要な機能が搭載されている感じがすごくいいです。
Gitとかもこのソフトを使えばさほど抵抗なく利用できるのではないでしょうか。
近くにそういった技術に詳しい人がいるとすごくいいと思いますけど。
WinでもMacでも使えます。
無料です。

Visual Studio Code

Dreamweaver

Adobeのソフトウェアです。昔に比べるとかなーりよくなっているはずのソフトなんですけど、結局使ってないんですよね。いろんな機能がついているが、なんとなく重い印象がネックですね。
ほかのソフトでも問題ないのでわざわざ使う必要がない、みたいな感じでしょうか・・・。
月額有料のソフトです。

atom

github謹製のエディタ。
軽くて機能拡張もでき、カスタマイズすることでどんどん自分好みのエディタになります。
多分、別のパソコンでも環境を統一できると思うんですが、Visual Studio codeが初期状態で使いやすすぎるせいでこのソフトの出番はだいぶ減ってます。
Atom

ただインストールしただけだと物足りないエディタなので、いろんな記事を調べて適用できる方におすすめ。

チャットソフト

お客さんのやり取りや、制作者同士のやりとりで必要になってきます。

LINE

お客さんが使える環境にあるという一点で使う機会が多いです。
ただし、過去データが見れなくなることが多いです。
WEBにメッセージ履歴が残ってないので、端末を変えたりすると過去のデータが見れなくなることがあります。仕事のやり取りで使うには不安が大きすぎます。
バックアップを撮る機能はありますが、そんなことを気にするより他のツールを使ったほうがいいでしょう
お客さんとのやりとりはしょうがないですが、最低でも制作者同士のやりとりは他のツールで。

チャットワーク

月額利用料を払ってないと、部屋が5つぐらいしか作れないという制限があります。
でも割と普及してますし、チャットソフトとしての不満はあんまりないです。

slack

使ったことないんですけど、チャットワークより無料による制限が少なそうなのがすごくいいですね。
エンジニアが使ってるイメージがすごくあります。
チャットワークは割と閉じた印象なのですが、slackはいろんなソフトと連携して面白いことが色々できるみたいです。
機会があればちゃんと使ってこのサイトでもそういった記事を作ってみたいですね。