Webサイトを制作する流れと各フェーズのポイントをご紹介

7/26/2022

記事の文字数:4577文字

こんにちは。KRAFTの岡田です。
KRAFTは、群馬県前橋市を拠点としてウェブ制作を承っております。


今回は、ウェブ制作はどんな流れで進んでいくのか・どんな工程があるのかをご紹介していきます。
お問い合せをいただいてから納品までの流れで説明していきます。

1.お問い合せ・ご相談

まずは最初にご相談のご連絡をいただくところから始まります。


2.ヒアリング

お問合せ・ご相談内容についてより深く確認するフェーズになります。
最初の段階では、以下の内容について深掘りをしていく必要があると考えております。

  • サイトの種類(コーポレートサイト、メディアサイト、キャンペーンサイト等)
  • サイトを作る(リニューアルする)目的
  • 事業の強み、特徴
  • サイトのコンバージョン
  • ターゲット など



KRAFTでは、テンプレートを用意しておりヒアリング前にご記入いただいてから確認しつつより具体的にする方法で行っております。
制作側はこのようにしておくことで最初に聞いておくべき要点を漏らさずに抑えることができます。





サイトは見た目や機能面に重きを置きがちですが、しっかりと最初のヒアリング段階で「制作する意味や意図・方向性」を定めておく必要があります。
設計や情報の引き出しが疎かになってしまうと、制作フェーズに入った時に右往左往して工数が余計にかかってしまう恐れがあります。

要件をしっかりとまとめておく必要があります。


3.企画提案

ヒアリング時に話し合ってまとめた方向性をより具体的に企画へ落とし込んでいきます。

  • 競合サイトのリサーチ
  • 過去の事例や業界上での必要なコンテンツ確認
  • コンバージョンを達成するためのコンテンツ選定 など


必要なコンテンツなどの精査が終わり次第、そこでまとまった内容を資料にしていきます。
言葉だけだと伝わりづらい事項でも資料化することによって、わかりやすくかつ見返しやすくすることができます。




4.情報設計・サイト設計

必要となるページや各ページに記載する内容を精査していきます。

4-1 サイトマップの作成

各ページの内容を構造的に明示していきます。
下記のように、どのページにどんなセクション(コンテンツ)が必要なのかを決定していきます。

■ トップページ
L お知らせセクション
L 会社概要セクション
L 事業内容セクション
....


4-2 ワイヤーフレーム作成

サイトマップを更に見た目でもわかりやすいような形にしていきます。
このフェーズのことをワイヤーフレーム作成とも言われています。



各ページに必要なテキストや情報・仕様を確認します。
ワイヤーフレームの段階で、動的に変化する場所をしっかりと決定しておく必要があります。
コンテンツマネジメントシステム(CMS)が入る場所は、クライアント側で更新できるようにする箇所になります。

後から「やっぱりここにも必要」などとなると大きく工数が増えてしまう恐れがありますので、あらかじめ決定します。


5.デザイン制作

ワイヤーフレームからデザインを制作していきます。
トーン&マナーを統一し目的にあったデザインに仕上げていきます。
ターゲットとするユーザーに訴求できるような見せ方をしっかりと考えてデザインへと落とし込んでいきます。

画像や写真を使用する場合は、テイストにあったものを慎重に選んでいく必要があります。
写真1枚、1つの文章でサイトの表情は大きく変わってきます。
必要に応じてサイト内で使う写真も撮影を行い、企業や店舗などの様子がわかるようにするのも1つの手段としてあります。

写真の重要性については、下記の記事内でご紹介しています。
ウェブサイトにおける写真の重要性



6.サイト構築

HTML CSS JavaScriptなどの言語を利用してデザインをウェブ上で閲覧できるようにしていきます。

6-1.更新や管理を考慮した構築

純粋にデザインを再現するだけではなく、公開後のメンテナンスや更新のことを考慮した設計をする必要があります。
コンポーネント設計やクラス命名など考えるべき箇所が多くあります。

■ 実際のコード


6-2.SEO施策

構築の際には、以下の項目を意識して行います。

  • クローラーに正確に読み取ってもらえる記述
  • 正確な見出しタグなどの使用
  • SEOを意識した内部的な施策
  • 画像の設定の仕方や圧縮 など


SEO対策の1つとして内部施策という考え方があり、それがこの構築の際重要になってきます。
正しい記述(マークアップ)が行われているのか。表示速度は遅くないかなど意識するポイントは数多く存在します。

例として、当サイトの表示速度などを含めたスコアは以下になっております。



必ずしも高得点=SEOが強くなるということではありませんが、一般的には1つの基準とされています。


7.公開

各チェックが完了したら最後に本番環境に公開します。
公開するには、「サーバー」「ドメイン」などが必要になります。

サーバーの選び方について
ドメインの選び方について



構築したものを本番の環境に移行し、改めて各チェックをし問題なければ納品となります。


ウェブサイト制作はKRAFTへご相談ください

KRAFTでは、企画から写真選定など含めて1つ1つ丁寧に行い企業の雰囲気に合ったサイト制作を心がけています。
ウェブ周りについて、少しでもお悩み事がございましたらお気軽にご相談ください。

お問い合わせは下記より受け付けております。
https://o-kraft.com/contact

長期運用ホームページ制作が得意です。

作って数年で使えなくなってしまっては勿体ないです。
会社と共に成長していけるようなホームページ制作をメインにkraftでは制作を行わせていただきます。

WordPressなどを使って専門的な知識がなくても編集できる機能を追加することも可能となっていますので、
担当者側でも操作することができます。
また、コンテンツ作成から運用面でのアドバイスも行っています。

ホームページのリニューアル・新規作成などお気軽にご相談ください。

無料相談はこちら

Contact

案件のご相談はこちらから

ウェブサイト周りについてお困りの際は、
こちらよりお問い合わせください。
専門的観点からご提案させていただきます。

相談する

3項目入力で完了

今すぐ相談する