Webデザイナーを目指す際、どんなソフトを使っているのか？ 気になるところだと思います。
Webデザイナーが業務シーンによって、どのようなソフトを使うのか、全体像をざっくりでもいいので把握しておいた方がイメージしやすいと思いますので、この点について解説します。
受注前の提案、見積もり段階
提案用スライド作成
提案は「スライド作成ソフト」を使用。Microsoft Office（マイクロソフト オフィス：MSオフィス）の『PowerPoint（パワーポイント）』が一般的。Mac版もありますが、Apple社のMac専用ソフトで『keynote（キーノート）』を使っている方もいます。
簡単なもの、ページ数が少ないもの、表が多いもの等ではMSオフィス『Word（ワード）』や同じく『Excel（エクセル）』を使うこともあります。これらもMac版がありますが、Apple社のMac専用ソフトで各々同様のソフト『Pages（ページズ）』や『Numbers（ナンバーズ）』を利用する方もいます。
御見積書の作成
御見積書は数字がメインなので、「表計算ソフト」を使用。ほぼ、MSオフィス『Excel（エクセル）』一択ですね。Macの方でApple社のMac専用ソフト『Numbers（ナンバーズ）』を使う方もいます。
なお、これまでご紹介したソフトについては、使いこなせるに越したことは無いですが、最初からそれほど習熟度は必要ありません。基本的な文書作成ができれば全然OKです。後述するグラフィック系ソフトの方が断然優先すべきです。
コンテンツの配置案とデザイン案の作成
ワイヤーフレームの作成
Web制作案件を受注したら、細かい仕様を定めた後、どこにメニューやコンテンツを配置するか、という「ワイヤーフレーム」を作成します。このワイヤーフレームは、基本的には四角に文字を入れるだけの「部屋の見取り図」のようなもの。
簡単な描写のため、どのようなソフトでもいいのですが、Adobe（アドビ）社の『Illustrator（イラストレーター）』『Photoshop（フォトショップ）』『Fireworks（ファイアーワークス）』のような「画像作成・処理ソフト」や『PowerPoint』『Excel』を使う方もいます。
社内で決められたソフトがあれば、それを使い、特に決まってなければ使い慣れたソフトを使います。
デザイン案（カンプ）の作成
ワイヤーフレームで「どこに何を配置するか」が大まかに確定したら、次は、Webサイトのトップページや中ページのデザイン案を作成します。このようなものを「デザインカンプ」と言います。
「デザインカンプ」とは「Desing Comprehensive Layout（デザイン コンプリヘンシブ レイアウト）」のことで、簡単に言うと仕上がり見本ですね。
ここは完全に「画像作成・処理ソフト」の出番で、『Illustrator』『Photoshop』『Fireworks』のどれかか、併用して作成します。
Webページの作成からサーバーにアップするまで
Webページの作成
デザイン案がOKとなれば、いよいよ実際にWebページを作成していきます。
Webページは、主にHTMLの文書構造とCSS（スタイルシート）によるデザイン制御、および、画像から成り立ちますが、画像については、「画像作成・処理ソフト」の『Illustrator』『Photoshop』『Fireworks』のどれか、または併用して作成します。
HTMLやCSSの作成は「HTMLやCSSのコーディング補助・管理ソフト」の『Dreamweaver』や「テキストエディタ」と呼ばれるソフトを使います。
Windowsの代表的なテキストエディタには『メモ帳』があります。
『Dreamweaver』も広義では「テキストエディタ」と言えるソフトなのですが、Web制作を効率化してくれる便利な機能があり、それらの機能が追加された「テキストエディタ」だと考えると分かりやすいかもしれません。
私の場合は、HTMLとCSSのコーディング補助に『Dreamweaver』を使い、簡単なHTML修正などはフリーのテキストエディタ『EmEditor』を使っています。
FTPでサーバーにファイルをアップ
Webページができたら、サーバーにファイルをアップします。
サーバーにファイルをアップするには「FTPツール」を使います。FTPツールは有料から無料まで様々あります。
以前は有料のFTPソフトを使っていましたが、最近は無料でも十分な機能があるFTPツールも出てきました。
現在、私は無料で利用できる『FileZilla』というFTPツールを利用しています。
Webページの表示チェック、動作確認
ファイルをサーバーにアップしたら、チェックに入ります。
Webページの表示チェックや動作確認の理想は、ユーザーさんが表示するであろう環境を想定して、全て実機でチェックすることです。
ユーザーさんの環境を想定する際は、主に以下の３つの要素を掛け合わせて考えます。
- デバイス
- OS
- ブラウザ
デバイスとOS
「デバイス」とはWebページを表示させるための機械のことです。デバイスとOSには以下の３つがあります。
- PC（デスクトップ）：「Windows」「Mac」
- タブレット：「iOS」「Android」
- スマホ：「iOS」「Android」
デバイスやOSにはバージョン違いもありますので、様々な種類の組み合わせになります。
Webブラウザ
前述のデバイスとOSの組み合わせに、Webサイトを表示させるためのアプリケーションである「Webブラウザ」が加わります。
Webブラウザは基本的に以下の４つがチェックの対象になります。
- Internet Explorer（インターネットエクスプローラー：通称IE）
- Firefox（ファイアーフォックス）
- Google Chrome（グーグル・クローム）
- Apple社のSafari（サファリ）
Webブラウザにもバージョン違いがあります。Internet Explorer以外のブラウザはソフト側で随時自動更新していくため、あまりバージョン違いのチェックは必要ないのですが、Internet Explorerはバージョン8・9・10・11と更新せずに使い続けているユーザーさんが結構いるので、Webサイトのブラウザ対応ポリシーによっては、全てチェックする必要があります。
Web制作会社は最低でも最新のWindowsパソコンとMac、iPadとAndroidタブレット、iPhoneとAndroidスマホを用意して、それぞれに、各Webブラウザを入れてチェックする必要があるということです。場合によってはガラケーも必要かもしれません。
このように最近は多種多様のデバイスが世に溢れており、Webサイトのチェックも大変になってきました。
契約時にチェックの範囲を明確にしておかないと、あとあとトラブルになりかねないので要注意です。
まとめ
- 提案や見積書作成は「MSオフィス系ソフト」を利用
- デザインや画像処理、HTMLやCSSのコーディングは「Adobe系ソフト」を利用
- コーディングでは、適宜「テキストエディタ」も利用
- ファイルのアップに「FTPツール」
- 表示チェックに各デバイスとOS、Webブラウザのバージョン違いを用意
今回の記事では、Webデザイナーの業務シーン別によく使うソフトの解説をしました。
これでざっくりとでも、どのような時にどのようなソフトを使うのかイメージしやすくなったのではないかと思います。
各ソフトの解説については以下の記事をご覧ください。
