CMSを用いたクライアントワークでのWebサイト制作フロー、注意したいポイント

Webデザインやコーディングを学んだら、実際に案件を受けてクライアントワークを行います。本記事では、WordpressやShopifyなどのCMS（コンテンツ管理システム）を活用する場合のWebサイト/ECサイト制作フローと、クライアントとのトラブルを避けるために注意したいポイントについて紹介します。

• クライアントワークでもCMSはよく使います
• CMSを活用するメリット
• クライアントワークにCMSを使う時の注意点
• CMSを使用する場合のWebサイト制作フロー
• 1. クライアントのヒアリング
• 2. サイト構造設計
• 3. ワイヤーフレーム作成
• 4. デザイン作成
• 5. CMSのセットアップ
• セットアップが完了したら…
• 最後に
• クライアントワークでCMSを使う3つのポイント
• まとめ

クライアントワークでもCMSはよく使います

Webデザインやコーディングを学んだら、実際に案件を受けてクライアントワークを行います。その時に「CMSを使う」という選択肢に出会うことが多いでしょう。

エンジニアとして開発に携わるのではなく、Webデザイナーとしてデザインして実装まで一人で行う場合は、CMSを使う確率がかなり高いです。というのも、WordpressやShopifyなどのCMS（コンテンツ管理システム）は、制作～運用までの効率がかなり良いため。クライアントワークに活用することで、エンジニア領域のコーディングスキルが無い場合でも、お客様の要件を叶えるサイトが作れます。

クライアントとしてもCMSを使うことで費用や期間が抑えられ、納品後の運用もしやすいので、CMSベースのWEBサイト・ECサイト制作を希望される方が多いです。ただし、依頼を成功させるためにはクライアントとのコミュニケーションや、CMSの仕組みをきちんと理解してもらいながら仕事を進めていく工夫が必要です。

CMSを活用するメリット・デメリットと、クライアントの理解を得ながら制作を行うためのフローを見ていきましょう。

CMSを活用するメリット

イチから全てを作らなくてもOK！

CMSにはあらかじめ用意されたテンプレートや機能があるため、ゼロからコードを書く必要がありません。基本的な機能やレイアウトはCMSがサポートしてくれるので、細かいコードに時間を割かずに済みます。

短納期の案件でも、テンプレートやプラグインを活用することでクオリティを保ちながら早く仕上げることが可能です。案件によっては、初心者でもチャレンジしやすいというメリットもあります。

機能拡張や運用の負担が軽減

CMSは基本機能に加え、プラグインやアプリを追加することで簡単に機能を増やせます。
例えば、独自開発するとものすごく難しいEC機能を数クリックで追加する、なんてことも可能。 メジャーなプラグインにはドキュメントや解説サイトなどもあるので、設定等も調べながら行うことが可能です。

また、CMSではサイト公開後にクライアントが自分でテキストや画像を更新できるようになります。クライアントが自分でリアルタイムでの更新ができることから、喜ばれることが多いです。クライアントの満足度が上がるだけではなく、画像一枚の差し替えにメールでやり取りして…なんていう制作者側の手間も軽減されます。違う案件を受けられますね。

クライアントワークにCMSを使う時の注意点

クライアントの理解度による認識のズレ

クライアントが使用するCMSの特徴・仕組みを理解していないと、説明に時間がかかったり誤解が生じたりします。

• 操作の慣れが必要
  「簡単に更新ができる」とは言われていても、機能説明や操作を難しく感じてしまうクライアントもいらっしゃいます。不満が出ないよう、使い方説明などのフォローが必要になるケースもあります。

• 期待値のズレ
  同じCMSでも、どこまでカスタマイズするかで機能も外観も大きく変わります。クライアントが「希望通りに何でもできる」と捉えてしまっている場合は、後で不満が出るケースもあります。最初に基本機能を把握してもらい、ご予算に合わせてカスタマイズ内容を協議したうえで制作を進めましょう。

• テンプレートの制約
  CMSで用意されたテーマやテンプレートを使う場合、大幅なカスタマイズには限界があります。既存のテーマ・テンプレートを使用する場合はデザインに制約があること、完全オリジナルのような独自性を求める場合は予算と期間が必要なことを説明しましょう。
  また、デザイン等をカスタマイズする場合は制作者側のスキルも求められます。

セキュリティや更新の負担

CMSは便利ですが、その分だけセキュリティリスクもついてきます。また、システムの更新が必要な場合もあります。

• プラグインの管理が必要
  便利なプラグインですが、複数追加するとプラグイン同士が競合してうまく動かないケースがあります。また放置するとセキュリティ上の問題が発生することもあるため、定期的な更新と動作確認が必要となります。

• 外部の影響を受けやすい
  CMS自体のアップデートで、一部の機能が動かなくなるなどのトラブルも考慮する必要があります。問題発生時のクライアント対応、問題解決（対処）能力が必要です。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

CMSを使用する場合のWebサイト制作フロー

CMSを導入するデメリットがわかったところで、クライアントと円滑に制作を進めるためのフローを考えていきましょう。

1. クライアントのヒアリング

ヒアリングは、クライアントの要望と制作者のアイデアを一致させる最初のステップです。
この段階でしっかりと情報を引き出し、目標や要件を明確化することで、後の工程をスムーズに進める土台を築きましょう。ヒアリングの質がプロジェクトの成功を左右すると言っても過言ではありません。

クライアントの基本情報から、希望される仕様（機能）、デザイン要件などまでしっかりと掴んでいきましょう。

以下では初期のヒアリングで明確にしておくべき、4つのポイントを紹介します。

① 目的の明確化

まずは、クライアントが制作するWebサイトを通じて達成したい目的を明確にします。
例えば以下のような具体的なゴールを整理します。

• 売上の向上
• ブランド認知度の向上
• お問い合わせの増加
• ユーザーとの信頼構築

目的を具体化することで、必要な機能についても自然と洗い出すことができます。この段階で目標の優先順位をつけておくと、デザインや機能の方向性がブレにくくなります。

② ターゲットユーザーの特定

次に、サイトの主な訪問者となるターゲットユーザーを特定します。クライアントがすでにターゲット層やユーザーニーズを決定している場合は、それをヒアリングしていきましょう。

もし、クライアント側で決められていければ、以下のような質問を通して具体化します。

• 主な顧客層の年齢や性別、職業は？
• 顧客層は、どのような課題を抱えている？
• 顧客層に提示できるメリットは？
• 何をきっかけにサイトを訪問する？

必要に応じてペルソナ（架空の顧客像）を作成してクライアントと共有しても良いですね。
ターゲットユーザーやニーズを整理しておくことで、導線の設計やデザインが「大外れ」になってしまうリスクも軽減できます。

③ 機能要件の整理

次に、Webサイトで必要な機能を洗い出します。
この段階では、CMSの標準機能で対応できる部分と、外部アプリやプラグインが必要な部分を区別します。例えば以下のような内容です。

• お問い合わせフォーム
• 商品購入機能（EC機能）
• 商品や投稿のカテゴライズ、階層化
• ブログ投稿や更新機能
• 会社概要等の独立したページ

CMSの制限を踏まえつつ、必要な要件を可能な限り簡潔にまとめ、クライアントと確認しておきます。この段階であらかじめ現実的な範囲を提案することで、無理のない設計が可能になります。

④ デザイン要件の把握

クライアントのデザインの希望を具体化します。
ブランドガイドラインがある場合は、それを基にデザインの方向性を共有します。以下のようなポイントを確認するとよいでしょう。

• ブランドカラーやロゴの有無
• 希望するデザインテイスト（例：シンプル、ポップ、モダン）
• クライアントの競合サイト
• デザインの参考にしたいサイト等

競合サイトやインスピレーションの参考例を確認することで、イメージのすり合わせがしやすくなります。また、クライアントが希望するデザインを探るだけではなく、ターゲットユーザーやペルソナ像と合致するかも考慮できると良いでしょう。

⑤ 作業範囲の確認

最後に、CMSに商品や記事などの登録をどの程度行うかを確認しましょう。
あとあと、分厚い紙の商品カタログを渡されて「これ全部登録してくれるんだよね？」という話になったら、確実に大変です。登録を代行するならその分の予算と費用が必要ですから、見積もり前に、制作者とクライアントとの作業分担は決めておきましょう。

ヒアリングシートを作成しておくのもおすすめ

必要な作業を割り出すだけではなく、クライアントとの共通認識を作るためにもヒアリングは重要。聞くべきこと、相談すべきことは多岐にわたりますので、あらかじめヒアリングシートを作っておいてもよいでしょう。先にクライアントにご記入頂き、それを元にミーティングを行うことで時間短縮に役立てることも出来ます。

どうヒアリングを行うかは、クライアントや、携わる制作によって変わってきます。
以下のように、ヒアリング手順やマスト項目を解説してくれているサイトも多くありますので、参考にしながらご自身の方法を確立していきましょう。

我々スキルハブでも、無料（登録不要）で使えるテンプレートを公開しています。
ご自身が受ける案件に応じてカスタマイズしていただいたり、オリジナルのヒアリングシートを作る際の参考にご活用くださいませ。

2. サイト構造設計

サイト構造設計は、Webサイトの「設計図」を作る重要な工程です。建築で言えば「間取り」にあたる部分で、ページの配置や動線をしっかりと考えることで、ユーザーにとって使いやすく、クライアントの目的を達成しやすいサイトを作る基盤となります。この段階で構造を固めておくことで、デザインや開発の後戻りを防ぎ、プロジェクト全体の効率が向上します。

丁寧な設計が、ユーザーとクライアントの双方に満足されるサイト制作の基盤となります。

① ページ構成の具体化

ヒアリングで得た情報を基に、必要なコンテンツを洗い出し、それをどのようにページに分けるかを決めます。ユーザーが求める情報にスムーズにたどり着けるよう、関連性や優先順位を考慮しながら整理します。

※クライアント側でページ構成が作られ、リストを渡されることもあります。

【進め方の例】

1. 掲載するべき情報をリストアップする
   ヒアリングで聞き出したWebサイト/ECサイトに掲載したい内容をリストアップします。

2. 情報をカテゴライスして、優先順位をつける
   リストアップした情報を、大きなカテゴリーで分類します。例えば、ECサイトならカテゴリー=商品カテゴリーと思われがちですが、ここではもっと大きな情報の区分としてのカテゴリーです。
   例：会社情報、商品情報、実店舗情報など

3. 情報をページに振り分ける
   関連する情報を1つのページにまとめるか、複数のページに分けるのか、細かい部分を詰めていきます。この時に掲載する情報の順位、ページの階層設計もある程度決めておきます。
   例：企業理念と沿革は1ページにまとめる、実店舗ごとに独立したページを作る、など

② CMSにおけるページ設計・機能要件の確認

CMSでは、テーマやテンプレートによってページ構成の自由度や使用できる機能に制限があります。例えば、WordPressの固定ページの場合は親子関係を作れますが、Shopifyの独自ページでは親子関係を設定することはできません。

構想したページの構成や階層構造、機能が実現可能かどうかを確認してみましょう。

1. 標準機能の把握と活用
   CMSの標準機能やテンプレートでどこまで要件を満たせるか確認します。

2. カスタマイズの検討
   標準機能で足りない部分があれば、プラグインの導入やテンプレートのカスタマイズを検討します。

3. クライアントと確認
   CMSの制約や可能性を丁寧に説明しながら、ページ構成をクライアントに提案し、必要に応じて調整します。クライアントから素材（文章、画像、動画）を提供してもらう場合、この段階で必要なものを明確にして共有しておきましょう。

③ サイトマップ（構成図・階層図）の作成

サイト全体の構成を示すサイトマップを作成し、クライアントに共有します。
これにより、クライアントと制作者の間で共通認識が持てるようになります。

設計編：サイトマップ、ディレクトリマップを作成する | トフでもできるコンテンツタイプ
https://www.movabletype.jp/developers/contentstypeguide/plan/mapping.html

上図のように、視覚的にわかりやすく表現することでクライアントに伝わりやすくなります。コンテンツマップ（コンテンツリスト）と呼ばれるページ一覧表は表形式にすることが多いですが、サイトマップはパッと見てわかるよう工夫すると親切です。

【使用されるツール例】

• Adobe Illustrator
• Adobe XD
• Figma
• Canva
• Excel
• PowerPoint
• Googleスプレッドシート
• Googleスライド　など

④ ユーザーフロー設計

最後に、ユーザーがサイト内で行う行動（ユーザーフロー）を設計し、ページ間の動線やナビゲーションを具体化します。ユーザーのアクションをシミュレーションすることで、目的に応じた誘導設計を行い、コンバージョン率を高めることができます。

ユーザーフロー設計方法、フロー図の作り方は下記サイトがとてもわかりやすいです。

3. ワイヤーフレーム作成

ワイヤーフレーム作成は、サイトの構造や各ページのレイアウトを視覚化する工程です。詳細なデザインではなく、ページの配置や情報の流れを大まかに示すための設計図のようなものです。この段階では、作り込みすぎずに全体の方向性を共有し、クライアントと合意を形成することが重要です。

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

ページごとのレイアウトや情報の配置を簡単に示します。
具体的な要素（例：ヘッダー、メインコンテンツ、CTAボタンなど）の配置を明確にしつつ、詳細なデザインは避けます。

何をどうやってワイヤーフレームを作ったら良いかわからない、という方は、下記の記事を参考にさせていただきましょう。見本もあるので、自分が作るところをイメージしやすいです。

【初心者】失敗しないワイヤーフレームの作り方！（作成ツールも紹介）
https://web-director.net/know-how/wire-frame-howto/

また、補足のテキストを横に添えたり、クライアントとコメントを付け合って進めていく方法もあります。ワイヤーフレームの時点でどのくらい作り込むかは人・企業によっても異なるので、柔軟に汰央しましょう。

戦略的なWebサイト制作するためのワイヤーフレームの作成方法
https://webdesignerstart.com/production-practice/wireframe/

【ワイヤーフレーム制作に使用されるツール例】

• 手書き（特に最初、情報整理しながらラフ作成をするのに）
• Figma
• Adobe XD
• Excel
• PowerPoint
• Googleスプレッドシート
• Googleスライド　など

② クライアントの合意を得る

ワイヤーフレームをクライアントに共有します。
それぞれのページレイアウトをより具体的にするだけではなく、サイトマップやユーザーフロー設計と合わせてユーザー動線をイメージするのも重要です。ユーザーがどのようにページ遷移を行うか、サイトで達成したい目的に沿った動線になっているか協議し、合意を得ましょう。

4. デザイン作成

ワイヤーフレームで決定したレイアウトを基に、具体的なデザイン作成していきます。
CMSを活用する場合、選定したテーマに合わせて効率的にデザインを構築しつつ、クライアントのブランドや好みに応じた調整を行います。

① テーマ選定

既存のCMS用テーマやテンプレートを使用する場合は、要件やクライアントの希望に最も適したものを選びます。必要であれば、テーマ選定時に優先度の高いデザイン要素を確認し、テーマ間の比較を行います。

選定時には、以下の点を中心に検討してくと良いでしょう。

• レイアウトの柔軟性（カスタマイズしやすいか）
  
• 必要な機能が搭載されているか
  
• デザインの方向性がブランドに合っているか
  

② デザインカンプの制作

デザインカンプとは、WEBサービスやアプリの最終的なデザインの完成イメージを指します。人によってデザイン案やモックアップデザインなどとも呼びます（業種によりこれらを区別することもありますが、Web制作では呼び分けが曖昧です）。

クライアントの要望を反映しつつ、具体的な配色やフォント、画像などを取り入れてWebページ/アプリ画面の「完成イメージ」を作りっていきましょう。このとき、単にきれいなビジュアルを作るのではなく使いやすさや複数のデバイス（PC、スマートフォンなど）での見え方を意識して制作を行うことが重要です。

デザインカンプとは？ホームページ制作の依頼時に見るべきポイント
https://www.xserver.ne.jp/bizhp/homepage-design-comp/

【デザインカンプ制作に使用されるツール例】

• Figma
• Adobe XD
• Adobe Illustrator
• Adobe Photoshop
• Sketch　など

【CMSを使う場合のポイント】

記事タイトルや商品名などをクライアント側で登録する場合は、一行で表示するのか、折り返すのか（折り返す場合は何行まで表示させるのか）などまで考慮してデザイン考えると良いです。例えば、中央揃えで数文字だけ折り返したりしちゃうと、ちょっと残念ですよね。

別の人がコーディングをする場合も、デザインカンプ内でどう作っていくかの情報があるとスムーズに作業が進みますよ。

5. CMSのセットアップ

デザインが通ったら、いよいよ実装！
CMS本体やテーマをインストールして、デザイン通りにセットアップしていきましょう。

CMSセットアップと拡張機能の追加

新規立ち上げの場合はCMSのインストール、もしくは開設手続きなどを行って初期設定を行います。
また、CMSや使用するテーマに搭載されている以上の追加機能が必要な場合は、公式アプリやプラグインを導入します。

デザインの実装

デザインに基づいて、CMSのテンプレートやテーマをインストールして適用します。

• 既存のテーマを使う場合：必要に応じてカスタムスタイルや機能を追加
• 自作する場合：使用するCMSに合わせたコーディングを行う

デザインカンプからコーディングを行う場合は、画像を書き出したり、カンプだけではわからない部分について考慮する必要があります。上のデザイン制作で紹介した文字数や回り込みなどが最たるものですね。

上から順にコーディングしていくと、コードが難解になってしまう可能性が高いです。最初に特徴や構造を把握し、デザイナーが他人の場合はデザインカンプ上の疑問点・問題点を確認するようにしましょう。下記の記事もわかりやすく参考になります。

Web制作の成否を決める、デザインカンプから画像を書き出すための手順とポイントを実務目線で解説
https://www.shoeisha.co.jp/book/article/detail/374

コンテンツの導入

コンテンツマップやコンテンツリストで打ち合わせた情報をもとに、サイトに必要な情報をCMS上で登録していきます。代表的な記事や商品だけ登録するか、全ページ・全アイテムを登録するかは、クライアントとの取り決めによって変わります。

検索や絞り込み機能など、コンテンツがなくては確認しにくい機能の動作確認も行いましょう。

クライアント確認

登録されたコンテンツやデザインが要件を満たしているか、CMSと表示ページをクライアントに確認してもらいましょう。修正事項や追加の要望をヒアリングし、必要に応じて対応します。

セットアップが完了したら…

ここまでで「サイト制作」は基本的に完了です。
クライアントとの契約次第で、サイト公開前のテストやSEO対策、制作後の運用サポートを行っていきましょう。

1. 公開前テストと確認

   • 全てのページが主要ブラウザで正しく動作するか、リンク切れなどの問題がないかをテストします。
   • SEO設定やメタデータの確認を行い、検索エンジンやアナリティクスツールなどへの登録を行います。

2. 公開と初期対応

   • サイトを公開し、クライアントとともに動作確認を行います。
   • 初期トラフィックのデータを収集し、改善の必要がある部分を洗い出します。

3. 運用サポートと改善

   • Google Analyticsやその他の解析ツールを利用して、ユーザー行動を分析します。
   • 必要に応じてコンテンツの追加やデザインの微調整を行い、目標達成をサポートします。
   • 定期的にクライアントと成果を共有し、次のステップを計画します。

最後に

クライアントワークでCMSを使う3つのポイント

1. クライアントの理解を深める

クライアントとの情報共有を積極的に行い、CMSの制約や利点について透明性を持たせます。ヒアリング時に、初期状態でできること、オブションとしてカスタマイズで対応可能なことを伝え、期待値を調整することも重要です。

クライアントによってはページ遷移がピンと来ていない事があるので、CMSのデフォルト状態（初期テーマ、もしくは使用するテーマやテンプレートの初期状態）でのレイアウトとユーザーフローを実際に見せると話がスムーズに進みます。見本用のデモサイトや、下のような説明用の画像などがあると良いでしょう。

2. 要件はCMSに合わせてシンプル化する

クライアントの要望に対して「必要十分な仕様」を目指すことは重要です。
しかし、テーマの独自カスタマイズや、プラグインの数が増えるほど、動作が重くなったり、競合により不安定になる可能性も高まります。クライアント側からすると、制作にかかる料金が予算を超えることもあるでしょう。

クライアントの言葉を鵜呑みにして言われたことをすべて盛り込むのではなく、話し合って要件を整理することが重要です。「どうしてその機能が欲しいのか」までヒアリングすると、基本機能で対応可能だったり、別のアプローチ法が見つかることも多いので、しっかりとクライアントの要望を把握しましょう。

標準機能でできることを中心に構成し、独自カスタマイズする内容を絞り込んでいきましょう。このときにクライアントがCMSの特性、性質を理解していると話を進めやすいです。

3. 運用を見据えた設計をする

公開後の運用が容易になるよう、管理画面の使いやすさも設計時には考慮しましょう。特にWordPressやShopifyのようなCMSの場合、運営者自身が商品やコンテンツの追加・修正作業がスムーズにできるように意識して設計・実装を行う必要があります。

我々制作者側は大体のことは出来てしまいます。極端な話、コードを手打ちし対応も可能ですよね。しかし、クライアントさんはWeb制作者ではありません。基本的なPC操作/最低限の知識があれば使えるように、管理画面の作りを意識しましょう。

まとめ

CMSの活用は制作者と運営者（クライアント）の両方にメリットがあり、効率よくWebサイトを構築することが可能です。運営者のスキルを意識してあげることで、納品後も使いやすいWebサイトを作成することができるでしょう。

反面、クライアントへの説明や、要件のすり合わせがうまく行かないとトラブルになったり、手直しが大量発生するなどの一面もあります。クライアントとの密なコミュニケーションを基盤に、柔軟に対応していくことが大切です。今回ご紹介した制作フローは一例ですので、クライアントの理解度やあなたの進めやすさを取り入れて、柔軟に対応していきましょう！