「ホームページを作って」と言われたらどうする?ウェブ制作の基礎知識

別の事業部からウェブサイトを作ってほしい、とオファーされた。
自社のサービスを紹介するウェブサイトを作りたい。
そんなときに、まずなにをどうすればいいでしょうか。

ヒアリング

発注者はなぜ、どういった理由でウェブサイトを作りたい(またはリニューアルしたい)と思っていますか?

発注者の目的やその他の情報を尋ねます。
下記は初心者向けに、ヒアリングすることをミニマムにまとめましたので参考にしてください。

ヒアリング項目の例

クライアント様情報(漢字やアルファベットの大小、つづりを正確に)

  • 社名
  • ご担当者名
  • ご担当者様の連絡先、連絡方法

ウェブサイト制作の前提条件

  • なぜウェブサイト制作(またはリニューアル)をするのか
  • ウェブサイトで達成したいことは?

商品・サービスに関して

  • 商品・サービス名(漢字やアルファベットの大小、つづりを正確に)
  • 価格帯
  • 商品・サービスの特徴
  • 競合
  • お客様の特徴(ターゲット)
  • お客様の現在の商品(サービス)に対する認識や購買行動とインサイト
  • 好きなウェブサイト、参考にしたいウェブサイト
  • トーン&マナー

その他進行に付随する事柄

  • 対応ブラウザ(特別古いIEを使っていないか、など確認)
  • 予算
  • 希望納品日
  • ドメインとサーバーについての現状と希望

設計する

サイトマップを作成する

ウェブサイトを制作する際には、まずはウェブサイトを作る目的に沿って、必要なコンテンツをリストアップします。
どんなページが必要かを図にしたものを「サイトマップ」や「サイトツリー」と呼びます。

※ Webの仕事でsitemap.xmlといった拡張子が.xmlのサイトマップを触ることもありますが、これとは別ですのでご注意ください。

サイトマップの例

ワイヤーフレームを作成する

ワイヤーフレームとは、サイトの設計図のことです。
AdobeXDやパワーポイント、Illustrator、手書き、色々ありますが、デザインの基となる設計図となりますので、手を抜かずに作ります。ダミーテキストはなるべく避け、わかることはこの段階でどんどん入れほうがいいです。

ワイヤーフレーム例

制作する

デザインカンプを作成する

PhotoshopやAdobeXDを利用してウェブサイトの見た目を決めていきます。

  • PCで見たデザインだけではなく、スマートフォン、タブレットのときにはどのようにレイアウトされるかを意識できているデザインですか?
  • HTMLの概念に沿ったレイアウトですか?
  • スマートフォンのデザインになった途端に、HTMLの構成が変わるようなデザインになっていませんか?
  • ユーザーが迷わない設計になっていますか?
  • アニメーションなどの実装を事前にしっかり決めていますか?(コーダーと分業の場合、後出しでは工数が倍以上かかることもあるので注意)

※初心者向けの解説ですので多くは語りませんが、
アニメーションやシステムを導入する場合は特に、デザインの前段階からエンジニアとコミュニケーションをしっかり取りましょう。

コーディング

  • マークアップは意味のあるものになっていますか?
  • 仮に文章が差し替えられた際に、文字が増量しても崩れないようにできていますか?
  • 画像にはalt属性を記述しましたか?
  • cssが重複していませんか?

チェックする

テスト用のサーバーにアップロードして、ウェブサイトとして不備が無いかを確認します。

  • 各ページのリンクは間違っていませんか?
  • お問い合わせフォームがきちんと動作しますか?
  • OGPやdescriptionなどmeta周りもしっかり入力していますか?

修正

チェックは先方・制作者双方で行い、不備や変更があるところは適宜修正してください。
誤字脱字、謎のスペースが入っている、などの文字周りにも注意しましょう。

SEO対策などの設定

  • GoogleAnalyticsの設定
  • Search Consoleの設定
  • その他アクセス解析ツールの設定

納品

データをそのままお渡しする、もしくはサーバーにアップロードする必要があります。

サーバーにアップロードが終われば再度チェックを行いましょう。本番URLに変更の必要があるものはきっちり設定してから本番サーバーにアップロードしましょう。

ウェブ担当者向けHTML/CSS講座
ウェブサイト解析基礎コース(解析・改善)
デザインソフト基礎コース

この記事を書いた人

Matsuo

Matsuo

[経験]
・制作(Photoshop・Illustrator/HTML・CSS・jQuery・WordPress)
・アクセス解析/SEOライティング/運用改善/企画提案
・講師(職業訓練校/スクール/企業出向)
[活動]
大阪・東京でWeb制作を中心に活動。
また「拡げるキッカケを共創する」を活動指針として
①未来を切り開くスキル習得サポート、②自立したウェブサイト運用のアシスト、を行う。