【イベント報告】『サイトづくりに必要な段取り』｜STUDIO山口｜デジタルハリウッドの専門スクール（学校）

『サイトづくりに必要な段取り』を開催いたしました!

皆さんこんにちは！デジタルハリウッドSTUDIO 山口運営スタッフです。
今回のライブ授業は「サイトづくりに必要な段取り」です。このイベントでは、普段STUDIO山口で学習されているデザインからコーディングの部分、それよりも前の段階から完成した後のことも含めて、仕事としてのWebサイト制作の全体像を掴んでいただく内容です。

今後Webデザイナーとして、就職やフリーランスを目指すにあたり、どのような段取りを行っていけばよいのか？クライアントやお客様と円滑に企画を進めていくためのコツなどを、原田TRから紹介していただきました。

Webサイト制作の流れ

まずはWebサイト制作の一通りの流れを確認していきました。
Web制作は、ヒアリングから始まり企画提案、その企画提案をもとに原稿やデザインの作成、取材や撮影を行い、それをもとにコーディングを行い、サイト公開まで至ります。

まずは、サイト制作の企画の部分からレクチャーがスタートしました。

①企画について

Webサイト制作するにあたって、企画や仕込みの部分が最も重要になってくるので、今回のイベントではここの「企画について」の話を重点的にやっていきました。

クライアントへのヒアリング

まずは、どういった目的のWebサイトを作成したいのか？クライアントやターゲット（利用者）のニーズや利益となることを探っていきます。その際に、『５回のWhy手法』という方法で、ある問題点から改善策を抽出していきます。

それを掴めず計画や制作に進んでしまうととても危険です。また、クライアントの意見を鵜呑みにしてしまうのもあまり良くはありません。クライアントが認識していない問題点を見つけてあげるとサイト制作もいい方向に進んでいくはずです。

よりスムーズにヒアリングするためにも予めクライアントに「ヒアリングシート」を送り、事前に情報を掴んでおくことも良いでしょう。

Webサイトの目的と目標

目的とは、Webサイトで会社の製品の宣伝や販売など、実現をさせたいこと。その目的には販売数や申し込みなどの数値が関わってきて目標はそれを達成したい数字となります。

ここでよく使われる目標達成評価のための指標を紹介します。
KGI：売上高など、Webサイトで実現したい最終的な大きな目標

KPI：KGIを達成する為に、まずはこの目標を達成しようという中間目標

市場と競合の調査

デザインやコンテンツを決めるのに競合している他社が何をしているかを調査します。他者と差別化を図ったり、参考にする際にリサーチすることはとても大切です。

コンテンツ内容、サイトマップの作成

コンセプト・コンテンツを決定し誰に何を一番伝えたいかを具体的にします。何をしたいかが分れば自ずとコンテンツもリストアップされてくるので、それを基にページを構成する流れになります。サイトマップを最初に作っておくことで、具体的なサイトイメージをクライアントやお客様と共有できるのでサイトマップは必ず作っておいた方が良いです。

ドメインの提案

短めで社名やサービス名をもとに、覚えやすい名前をいくつか考え、取得可能か調べます。

見積り

制作工数、金額を前もって概算しておきます。

◯通信費
・サーバー
・ドメイン
・システム利用料

◯消耗品（物品を購入した場合）

◯旅費交通費（取材を伴う場合）

◯外注費

◯自分の人件費

スケジュール管理

自分のスケジュール以外にもクライアントや外注の動きも含めたスケジュールを管理します。資料、素材などの準備物、その締切等も入れると打ち合わせ時に依頼しやすくなります。

工程表（ガントチャート）
必要な作業項目を洗い出し、各項目の進行状況を把握できます。

・納期より3日前の完了を目指す
・パツパツのスケジュールにしない
・実現可能な予定をたてる

と、ここまでの企画フェーズがしっかりできていないと、後々大変になってきます。関わる人が多かったり、大きな案件になる程、この傾向は顕著に出てきます。段取り8分、仕事2分と言われるほどここまでの企画フェーズはとても大切なんです。

②設計について

ここからは、デジハリのWebデザインのカリキュラムに沿った内容も入ってきます。

システム、機能要件について

お知らせの投稿やお問い合わせフォームのサイト組込みをイチから自分でプログラミングするのはとても大変です。 CMS（コンテンツ管理システム）という、技術的な知識がなくても、テキストや画像等のコンテンツでWebによる情報発信ができるシステムでインスタグラムやツイッターみたいな感覚でWebを更新できるものを活用しましょう。

サーバー提案

要件が決まったらサーバー会社を決めていきます。

・自分でWebサイトを管理運営するのか？
・アクセス数が多くなりそうなので表示が高速なサーバーがよいのか？
・サーバー会社のサポート体制はしっかりしているのか？
・ドメイン更新を含めた年間維持費は？

レンタルサーバーを借りるサービスの中に、PHP、MySQLがないとWordPressのインストールが出来ないので、確認をする必要があります。

ワイヤーフレーム

制作するWebサイトの要素や機能、情報を設計図面のように配置しておき、お客さまや制作チームメンバーと認識を合わせるために使用します。

・Adobe XD
・Figma
・Exele

デザインカンプ

打ち合わせなどを通してワイヤーフレームに変更を加えた、おおまかなレイアウトをもとにディテールを作成していきます。
Adobe XDだとリアルにサイトを観覧しているかのように確認できたり、ピンポイントでピン留めができコメントも残せたりもするので修正箇所などを明確にすることもできます。

③制作について

HTML、CSS、JavaScript（フロントエンド）

HTMLやCSSなどを用いてデザインデータをもとにコーディングを行なっていきます。

HTML：文書の構造を定義する言語
CSS：HTMLの見た目を指定する言語
JavaScript：ブラウザを動かすための言語

WordPressの仕組み

お知らせや毎日、毎週のようにコンテンツが変わっていくものを運用する場合、HTMLで直接書き換えるのはかなり面倒なのでTwitterやインスタグラムと同じ感覚で変更できるようサポートしてくれるのがWordPressです。

デジハリのWordPress講座ではオリジナルのHTMLをもとにテーマファイルを仕上げますが、
予算がなく、ありモノデザインで事足りる場合は有料・無料のテーマを使う場合もあります。

テスト公開とフィードバック

出来上がったファイルをサーバー上にアップロードして確認していきます。
しかし、公開前はまだ誰にも見られたくないので、「BASIC認証」やWordPressであればメンテナンス用のプラグインを使ってアクセスに制限をかけて、公開前にクライアントに確認してもらうことができます。

制作が終わればいよいよ公開に向けて準備していきます。

④運用準備

サーバーの契約

ここでは実際に「さくらのレンタルサーバー」のページで詳細を説明してくださいました。
さくらのレンタルサーバーではライトプラン以外でWordPressを利用することができます。

ドメインの取得

スムーズに話を進めるためにも、予め取得されていないドメインを調べておくと良いです。

FTPでのアップロード作業

Webサイトへのアップロードは何度も行う作業のため、わざわざアプリケーションを開いて1つ１つアップロードするのも面倒になってきます。実務でFTPを利用する際はDreamWeaverが便利でサーバーと自分のパソコンのファイルを関係付け、ファイルの更新をすればサーバーの方も更新されるので手間がはぶけます。

Googleの各種サービス設定

Google analytics

Webページのアクセス解析サービス。アクセスしたユーザーを分析したり広告の効果を測定します。 あらかじめ設定した目標を達成したかを分析します。

Search Console

Googleでサイトがちゃんと表示されているかなどの詳細なレポートを見ることができます。
登録作業をすると検索エンジンのロボットが、サイトを分析したり、内容を記録しアクセスがあるかどうかを伝えてくれ、SEO対策なんかで使われます。

Googleマイビジネス

サイトの検索結果に関係なく自社情報をページのファーストビューに表示します。
しかし第3者からの不正な変更を阻止する為に、定期的な監視が必要となります。

納品前チェック

いよいよ納品です。最後に正常にサイトの運営ができるかを確認していきます。

・メンテナンスモードは解除しているか？
・主要デバイス、ブラウザでサイトが正常に観覧できるか？
・リンク切れが発生していないか？
・OGPタグを適切に設定し、SNSでシェアされた時のサマリーを確認したか？
・URLは常時SSL接続になっているか？
・サイトデータのバックアップ計画は立てているか？

とあげると切りがないので、チェックリストなどを整備して納品時にチェックしましょう！

まとめ

Webサイトの公開までの道のりは意外と長く、段取りなしでは到底ゴールすることは難しいです。
段取り8分、仕事2分の心構えで臨み、ヒアリングの段階からクライアントやお客さまとしっかりとコミニュケーションを交わし、入念に段取りを確認しましょう！
しかし納期は大切ですが予定通りいかないこともあります。計画は軌道修正のタイミングを見極めるためにあるので、スケジュール通り進めることに固執しすぎないようにしましょう！

デジタルハリウッドSTUDIO山口にはWebデザイナー専攻の他にも、デザインを学ぶことのできるグラフィックデザイン講座が開設されています。「デザインを仕事に活かしたい」「デザインについて学びたいけど何を勉強すればいいの？」とお悩みの方、ぜひ一度、STUDIO山口にお問い合わせください！以上、イベント報告でした！