目次
前回の記事では、Webデザイナー（Web制作者）のお仕事の「企画・設計プロセス」をご紹介しました。制作だけのお仕事だけと思いがちなWeb制作のお仕事ですが、制作の前の「何を作るか考えるプロセス」を理解して初めて素晴らしいWebサイト制作の作業に移ることが出来ます。
この記事ではWeb制作プロセスの中の真ん中、「制作」のプロセスをご紹介します。正にWebサイトを「作る」というプロセスです。
制作プロセスを分解する
制作のプロセスは大きく5つのフェーズに分けることが出来ます。
- デザイン制作
- コーディング
- WordPressテーマ化
- サーバー側の作業
- サイト公開
ではそれぞれのプロセスを順に詳しく見ていきましょう。
デザイン制作
Webサイトの見た目づくり、それがデザイン制作です。設計の工程がすべて完了したら、デザイン制作に取り掛かります。
デザインツールを使って、ワイヤフレーム（設計図）をカッコよくデザインする作業です。ここで知っておきたいのが、写真やイラストなどを組み合わせるのもデザイナーのお仕事ということ。カメラマンさんやイラストレーターさんとタッグを組む場合は、こんな写真が欲しい、こんなイラストが欲しいと指示を出せるようにするのもWebデザイナーのお仕事です。
タッグを組まない場合や、クライアントから支給される画像がない場合、有料の素材サイトから写真やイラストを選定する能力も必要となってきます。コンテンツに適した画像チョイスもデザイナーのお仕事。画像のちょっとした処理（色合いや明るさ調整、簡単な合成などのPhotoshopスキル）もデザイナーのお仕事です。
Webデザイン制作で使うアプリケーション
- Adobe XDやFigmaなどのプロトタイピング・デザインツール
- Photoshopなどの画像編集ツール
- Illustratorなどのベクター画像・SVG編集ツール
コーディング（フロントエンド開発）
デザイン制作が完了したら、次にHTML/CSSコーディングの作業に移ります。デザインデータをWebサイトデータに変換していく作業がコーディングです。
デザインデータはグラフィック（言ってみれば画像）ですが、コーディングをすることでデザインデータがウェブブラウザで閲覧、操作できるようになります。プログラミングとは少し違うのですが、マークアップ言語と呼ばれるHTMLとCSSを用いて、Webサイトデータをコーディングしていきます。
HTML/CSSの言語の習得は簡単ですが、順序よく、そして効率良くコーディングするのが案外難しい。コーディングのお仕事は安いイメージがありますが、それは拡張性の無いサイトの場合のみ。拡張性と多様性を持たせたCSSコーディングは、技術よりも管理が高難度と言われています。
コーディングで使うアプリケーションと知識
- VS CodeやAtomなどのテキストエディタ
- HTML
- CSS
- JavaScript
WordPressテーマ化
HTML/CSSコーディングが完了すれば、サイトデータ作りは完了です。クライアントからWordPress化の指定がなければWordPressに付随する作業は必要ありませんが、昨今のWebサイトほぼすべてWordPressで作られていますので、今度はサイトデータをWordPressシステムで使えるよう、WordPressテーマというものに変換していきます。
WordPressはCMS（Content Management System = コンテンツ管理システム）と呼ばれるもので、ブラウザからサイトの内部を編集できるようにするものです。HTMLデータのままだと、サイトを更新するたびにFTPソフト使ってデータのアップロードをしなければなりませんが、WordPressを使えば、ブラウザからサイトコンテンツの管理ができるようになります。
WordPressが何かわからない方や、WordPressのメリットを知りたい方はこちらの記事をチェック
WordPressテーマ化で使うアプリケーションと知識
- VS CodeやAtomなどのテキストエディタ
- WordPress（カスタマイズ知識としての）
- PHPを少し
サーバー側の作業
WordPressテーマ化までの作業が、ローカル環境（あなたのパソコン上）での作業となります。WordPressテーマ化の作業が終わったら、いよいよWebサイトデータを置く場所（サーバー側）での作業が始まります。
サーバー側の作業は大きく分けて4つあります。
- サーバー設定関連作業（WordPressインストールのためのデータベース作成など）
- WordPressインストール（本体＆テーマ）
- WordPress各種作業（プラグイン設定※お問い合わせフォーム含む・ページ作成など）
- 動作確認
- サイト公開
サーバー設定関連作業
まずはサーバーでWordPressを使えるようにするのがサーバー設定作業です。データベースの作成やPHPバージョンの確認、そしてWordPressをインストールするディレクトリを確認します。
WordPressインストール（本体＆テーマ）
データベースを作成し、インストールディレクトリの確認が完了したら、FTPアプリを使いFTPサーバーにログインします。インストールディレクトリに移動し、WordPressデータをアップロード。アップロードが完了したら、設定ファイルのデータベース情報を書き換えて、インストールの準備が完了、インストールに移ります。
また、最近のレンタルサーバーでは、WordPress簡単インストールと呼ばれる機能が搭載されていて、ワンクリックでWordPressをインストールすることが出来ます。
しかしこれはWordPressインストールの仕組みを理解していない人が使ってしまうと、後のトラブルシューティングで取り返しがつかない事に発展する可能性があるので注意が必要です。
WordPress各種作業
WordPressのインストールが完了したら、WordPressにログインし、WordPress管理画面上の作業を進めていきます。制作するサイトに存在するページもすべてWordPressの固定ページを使って作成し、コーディングのプロセスで完成させたHTMLサイトをWordPressで完全再現していきます。
主なWordPress作業
- パーマリンク設定
- プラグイン設定
- お問い合わせフォーム設定
- ページ作成
サイトを公開する前に、テストサイトを完成させる作業と言えるでしょう。
動作確認
すべてのページ作成と設定が終わったら、テストサイトで一通りの動作確認を行います。WordPressでの動作確認では下記の内容を主に検証していきます。
- メニュー（リンク）動作確認
- フォーム動作確認
- パンくずリスト（ページ階層）確認
WordPressサイトの構築の段階では、HTML/CSSコーディングのエラー（サイトデザインの崩れなど）はあるべきではありませんが、万が一エラーが確認できた場合はそれらも修正していきます。
サーバー側の作業で使うアプリケーションと知識
- サーバー設定知識
- FTPアプリ
- WordPress（CMS知識としての）
- ターミナル（コマンドラインツール）※不要な場合もあり
- Webブラウザ
サイト公開
動作確認が終わり、社内での最終確認、クライアントの最終確認が取れたら、晴れてWebサイトの公開です！お疲れさまでした！
サイト公開はスタート地点！保守運用のプロセスへ移ろう！
サイト公開後にはWebサイトの保守運用サポートのお仕事に移ります。ここまではサイトが完成するまでのプロセスで、いかにもWebデザイナーのお仕事っぽい感じでしたが、サイト完成後のサポートやコンサルティングも必要に応じて対応するケースがあります。
保守運用のお仕事は、制作とは全く違うお仕事になりますので、別の記事にて解説したいと思います。
保守運用のお仕事の紹介が終わったら、Web制作者・Webデザイナーはどんなツールやアプリを、どんなシチュエーションで使うのか？という疑問についても解説したいと思っています。
つづく
Webデザイナー（制作者）のお仕事紹介シリーズ
企画と設計
- ヒアリングとプランニング
- 提案
- サイト設計
- コンテンツ設計
- ワイヤフレーム設計
- コピーライティング
- フォーム設計
- その他準備
制作←本記事
- デザイン制作
- コーディング
- WordPressテーマ化
- サーバー側の作業
- サイト公開
保守運用
- 保守管理
- ブログ執筆
- ソーシャルメディアの活用
- サイト修正
使うツール/アプリ
- ウェブブラウザ
- 書類アプリ
- クラウド共有ツール
- デザインツール
- 画像処理アプリ
- テキストエディタ
- FTPアプリ
- コマンドラインツール
1 comment