WEB制作環境を整えよう!

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はいろんなソフトと連携して面白いことが色々できるみたいです。
機会があればちゃんと使ってこのサイトでもそういった記事を作ってみたいですね。

プロジェクト管理

良いタスク管理ツールについて考えをまとめておくよ


この記事でも少し触れましたが、プロジェクト管理ツールを利用するのが割と一般的になりつつあります。
複数人でTODOを共有できるソフトウェアです。

使ってみるとわかりますが、めちゃくちゃ効率がいいです。

trello

有料のツールが多い中、無料でかなりのことができるツールとなっています。
おすすめです。
trello

プロジェクト管理ツールに関しては会社に所属している場合はそこで使っているソフトを利用するケースが多い気がしますので、今回触れるのはこの程度にしておこうと思います。

ブラウザ

制作したものが実際動作するか確認が必要!
ということでWEBブラウザーは必須です。

Chrome

このソフトの検証ツールに慣れすぎて、これなしでは作業ができません。
でもJavaScriptとかの検証についてはそんなに明るくないので、その辺も調べた上記事にしてみようかなと思います。

EDGE

windows10のデフォルトブラウザーです。
Windowsでないと動きませんよ。

internet explorer 11

もういいだろ、デフォルトから消してくれ、な「internet explorer 11」です。
とはいえ、昔のIEと比べて、表示が異なってしまうことは少ないかな、と思います。
Windows専用です。

Safari

Macのデフォルトブラウザーです。
Windows版もありましたがそれはもうサポート切れてると思いますので気にしなくていいです。
iOSのデフォルトブラウザーでもありますので、スマホでの動作確認もこちらで。

Firefox

Firefoxです。バージョンが新しくなって早くなったみたいです。
ほとんど使ってないですけど、頑張って欲しい。

Androidデフォルトブラウザ

Android持ってないので今は違ったらすいません。
デフォルトでついてるブラウザです。
Androidスマホでの検証で必要になります。

ブラウザまとめ

Win、Mac、iphone、Androidスマホ
を全部持ってないと上記の検証はできないんですよね。
ちょっと古い端末はそんなに高くないので、一応持っておくといいかもしれません。
持ってる人に借りて確認するのも全然ありだと思います。

FTPソフト

サーバーにファイルをアップロードするために必要なソフトです。

FTPソフトの使い方を覚えよう!サイト公開のやり方


このサイトではFilezillaを使ってます。

レンタルサーバー

自分の作品を公開したり、サイトをテストするために自分のサーバーを持っておくのは割と一般的な気がします。
ドメインも持っておくといいでしょうね。
月額費用はかかりますけどね。

まとめ

まとめると必要なツールは

  • パソコン
  • ネット環境
  • Adobeのツール
  • エディタ(この記事では VScodeを採用)
  • ブラウザ
  • FTPソフト
  • レンタルサーバー

これらが揃っていれば割と場所も選ばずに活動できるということです。
いい世の中になったなーと思います。
そして、今後も生き残れるように決意を新たにした次第であります・

おわり。