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ページの表示チェックや動作確認の理想は、ユーザーさんが表示するであろう環境を想定して、全て実機でチェックすることです。

ユーザーさんの環境を想定する際は、主に以下の3つの要素を掛け合わせて考えます。

  • デバイス
  • OS
  • ブラウザ

デバイスとOS

「デバイス」とはWebページを表示させるための機械のことです。デバイスとOSには以下の3つがあります。

  • PC(デスクトップ):「Windows」「Mac」
  • タブレット:「iOS」「Android」
  • スマホ:「iOS」「Android」

デバイスやOSにはバージョン違いもありますので、様々な種類の組み合わせになります。

Webブラウザ

前述のデバイスとOSの組み合わせに、Webサイトを表示させるためのアプリケーションである「Webブラウザ」が加わります。

Webブラウザは基本的に以下の4つがチェックの対象になります。

  • 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デザイナーの業務シーン別によく使うソフトの解説をしました。

これでざっくりとでも、どのような時にどのようなソフトを使うのかイメージしやすくなったのではないかと思います。

各ソフトの解説については以下の記事をご覧ください。

関連記事Webデザイナーがよく使うソフトについて解説します