クライアントワークを始めるにあたって、いきなり実践に入るのではなく、まずはその土台となるスキルをしっかりと身につけておくことがとても重要です。
ここでは、クライアントとのやり取りやWeb制作をスムーズに進めるために欠かせない基本スキルを、トレーニング形式でしっかりと鍛えていきます💪
「いきなり実案件は不安…」という方も、このトレーニング編を通じて自信をつけてもらえるはずです！
それでははじめていきましょう！
クライアントワークで必須のスキル
まずはクライアントワークに重要なスキルを解説していきます！
Webサイト制作をする中でクライアント・クリエイター双方との折衝で必要となるスキルは挙げればキリがないですが今回は特に重要な3つのスキルを紹介します。
コミュニケーション
コミュニケーション能力は言うまでもないかもしれませんが、最も重要なスキルでもあります。
クライアント・クリエイター共にコミュニケーション無くして仕事はできませんよね。
効果的なコミュニケーションの取り方は「ロードマップ編」を通して、シチュエーション毎の対応を確認していきましょう。
加えて、この章では「円滑かつ好感を得るコミュニケーションスキル」について解説していきます。
Webに関する知識と技術
次にWebに関する知識と技術です。
これまで皆さんは、デザインやコーディングといった専門分野にしっかり取り組んできたと思います。しかし、制作案件の中心人物としてプロジェクトを円滑に進めていくためには、手をつけてこなかった分野にも一定の理解を持っておくことが大切です。
たとえば、デザイナーであれば「静的サイトと動的サイトの違い」や「WordPressの基本仕様」、コーダーであれば「有償素材の扱い方」や「Figmaの基本操作」など。すぐに使う機会がないとしても、知らずにいると現場で急に求められたときに焦ってしまうかもしれません。
また、デザイン・コーディング以外にも、クオリティの担保やWebサイトの運用に必要な知識・スキルはたくさんあります。こうした内容は講座の本編とは少し外れるため、コラムで詳しく解説しています。
クライアントワークでよくある疑問やつまずきやすいポイントなど、実践的なケースをもとに紹介していますので、ぜひ目を通してみてください！
設計力
最後に紹介するのが「設計力」です。
Webサイトの制作においてこのスキルは必要不可欠で、実際に現場でも「設計図」をもとにディレクションを行います。
ここで言う「設計図」とはWebサイトの枠組みとなるもの全体を指します。具体的にはサイトマップやディレクトリマップ、コンテンツマップといった構成を決めるものやそこから作成するワイヤーフレーム（WF）があり、これをもとにデザインやコーディングも含めWebサイトが作られていきます。
この設計図を作成するという工程では、デザインとコーディングの総合的な知識・技術が必要になってきます。
そこでトレーニング編ではロードマップ編に入る前に設計力を磨いていきます！
どうしてもソフトスキルは練習が難しかったり個人によるところが大きいので、実践課題を通して客観的に見てもらえる機会を用意しています。トレーニング編を通してWebサイトの設計・構造を理解して、今後のクライアントワークに活かせるようにしっかり鍛えていきましょう🙌
トレーニング編で身に付けること
先ほども説明した通り、トレーニング編では主に「設計図」の作成方法を学んでいきます。
制作のディレクションは設計図を軸に広げることで比較的安定した精度にすることが可能です。制作するもの自体は毎回違うので絶対安定とは言い切れませんが、設計図をきちんと作成することと数をこなしていくことで確実に精度を高めることはできます。
トレーニング編はクライアントワークをするための筋トレです！筋トレあっての実践なのでしっかりと定着させられるよう一緒に頑張りましょう💪
設計図の種類
ここからは具体的に設計図の内容についてお話していきます！
Day02からは広げるべき設計図をもとにWebサイトのトレースをして学んでいくので、どういうものがあるのかを知識としてインプットしていきましょう🙌
Webサイト制作で登場する設計図は主に以下の4つです。
- サイトマップ
- ディレクトリマップ
- コンテンツマップ
- ワイヤーフレーム
それぞれについてさらに詳しく解説していきます！
サイトマップ
以下のように、Webサイト作成時において構成を図式化したものをサイトマップと呼びます。
ここで必要になるのは各ページのタイトルレベルまでなので、各ページに含まれるコンテンツまでは言及しません。
制作フローにおいて、基本的に最初に作成されることが多いのがこのサイトマップです。
実は「サイトマップ」は別の用途としても使われているので、こちらも押さえておきましょう。
まず1つ目はWebページとして表示するサイトマップです。これはHTMLサイトマップとも呼ばれ、Webサイトに訪れたユーザーがページタイトルの一覧から目的のページを探しやすくするためのもので、特に規模の大きいサイトに置かれていることが多いです。求めている情報が存在するかどうかの確認にも役に立ちます。
参考：食べログ｜サイトマップ
2つ目は検索エンジンに理解してもらうためのサイトマップです。こちらはXMLサイトマップと呼ばれることもあり、主にGoogleなどの検索エンジンにWebサイトの構成を伝える目的で作成されます。
XMLサイトマップはGoogleの公式ドキュメントでも説明があるので参考にしてみてくださいね！
ディレクトリマップ
ディレクトリマップはWebサイト上に設置するすべてのページのタイトルやURLを表にしてまとめたものです。
特に決まりはありませんがExcelやGoogleスプレッドシートなどの表ソフトでまとめられることが多いです。
サイトマップがクライアントとの意思疎通で利用されることが多い中、ディレクトリマップはどちらかというと開発・制作チーム（社内やサイト制作に関わる人間）で共有する用途で使われることが多いです。
この画像のようにページのタイトルとその階層・URLが揃っていることがマストですが、ここに各ページのディスクリプションを追加してSEOの抜け漏れを防いだり、進捗管理シートに使用したりと工夫して使用する例もあります！
ディレクトリマップができたらかなり詳細な内容まで決まってきているので、見積もり、スケジュール、進捗など様々な要素が管理しやすくなるわけですね！
コンテンツマップ
この講座ではコンテンツマップを「各ページに必要な要素を洗い出して整理したもの」として扱っていきます。
もっとラフに言えば、「ディレクトリマップを一歩深掘りしたもの」と思ってもらえればOKです！
コンテンツマップは定義がいろいろあって、実はこれといった決まりがあるわけではありません。
現場によっては「構成表」「ページ設計書」という呼び名だったりするので、そもそも「コンテンツマップ？？」となることもあるかもしれません。
ですが、コンテンツマップを活用することで
- 情報を集約しやすくなる
- ヒアリングの精度が上がる
- 想定外の作業の見落としを防ぐ
- 関係者間の意思疎通をスムーズに
などなど、制作を円滑に進めるための「軸」として非常に役に立ちます。
実際の現場でも、この一枚があるかないかで作業のしやすさやクオリティが大きく変わることも少なくありません。
この講座では、そんなコンテンツマップを重要視しています！
これから「実務で使える形」として、しっかり落とし込んでいきましょう👍️
ワイヤーフレーム
ワイヤーフレームは設計図作成の最終段階となる、Webサイトのデザインの大まかなレイアウト図です！
ここまでで作成した3つのマップをもとに実際にWebページの形にしていきます。必要なページ・セクションは既に整理できているので、それらをページ内にコンテンツとして配置していきます。
また、その際にテキストだけでなくボタンや画像などの場所のイメージも一緒に配置していきます。
本講座では主にFigmaでワイヤーフレームを作成します。
最近ではRelumeという便利ツールもありますが、本カリキュラムを通して最低1回は自力で作成にチャレンジしてみましょう！基礎を理解していることでよりツールを効果的に利用できるようになるのでこちらも筋トレを頑張りましょう！
まとめ
ここまで説明した各種マップはどれもWebサイト制作に関係する人間に対して作業内容を分かりやすくするという目的で作成されます。
Webサイト制作のプロジェクトにおけるリスクとして、作業内容が可視化されていないことによるすれ違いがあります。
「口頭で説明したつもりになっていた」「知らなかった」「聞いていなかった」といった問題は見える形にして分かりやすいところに置いておくことでほとんどが防げます。
そこで一役買うのが、ここまで紹介してきた設計図となるわけです！
最初に丁寧に設計図を作成することで、制作に必要なもの・作業が可視化されます。制作にかかる工数・予算の見積もりやスケジュールの作成、確認作業時のチェックリストなどにも利用することができます。
建築をする際に、設計図なしには建築は進みませんよね。WebサイトはWeb上に建築する建物であるわけなので、同じく設計図が必要になるのです。
設計図の作成は最初こそ時間がかかる作業ではありますが、数をこなして慣れることでだんだんスピードアップしていきます！自分で作業しやすいようにテンプレートを作成したり管理したりすることでディレクションにかかる単価も上げていけるので、地道ではありますがここはコツコツと頑張っていきましょう💪
いよいよ明日からは実際に手を動かしていきますのでお楽しみに！