タグ

【初心者必見！】Wix のWebサイト制作はこう作るんだ！

2023年11月16日
読了時間: 6分

この記事をご覧の方の中には、ご自身でwebサイト制作を検討されている方が多いと思います。

ノーコードwebサイト制作ツールの Wix を使って、プロに依頼せずともかっこいい、イケてるサイトを作りたい。

そんな方におすすめ！

Wix 公式Wixレジェンドレベルパートナーが、「プロがどのようにwebサイトを制作しているか」をご説明致します。詳しくはYouTube 動画でもご説明しておりますので、ご参考ください。

プロがwebサイトを作るときはどうしているの？

制作の詳細の前に、プロがどのようにWebサイト制作チームを組んでいるかご存知ですか？

プロのwebサイト制作会社は、一般的に、下記のように制作セクションを分けていることが多いです。

営業：潜在顧客を見つけ、制作案件の制約につなげる役割。
クリエイター/コーダー：ディレクターが確定させたデザインカンプを元に、webサイトに実装し、機能構築をしていく。
ディレクター（プロジェクトマネージャー）：成約後の制作案件を、クライアントの要件定義・デザイン提案/構築をした後、クリエイター実装までのディレクションを担う役割。

セクションを分けることで、各プロセスのエクスパートが制作のフェーズに併せて活動することができ、最高水準のパフォーマンス（成果物）を出せるようにしたチーム編成をとっていることが多いです。

上記のように制作を進める場合、ディレクター（PM）の能力がとても大切です。

もちろん、営業の案件成約なしには制作は始まらないですし、クリエイターがいなければ最後の機能実装が不可能なので、もちろん欠かせないセクションではありますが、ディレクターのヒアリング力やクライアントの要望を汲み取る力、そこからデザインに落とし込み、制作進捗を滞りなく進めるディレクション力がなければ、実績を残すことができません。

なので、ご自身で制作される方はこの三つのセクションを意識して制作に臨むと、webサイト制作の本質を掴み、制作もスムーズに進めることができます。

Webサイトの具体的な作り方

では、実際に案件成約して制作が始まった際、プロはどのように制作を進めているのでしょうか？

まずは大きく3つの要点を掴む必要があります。

Webサイトの要件定義をする

クライアントのWebサイトを制作する際はもちろんですが、ご自身のサイト制作をする際ももちろん欠かせない点が、この要件定義です。

要件定義とは、

何のためにこのサイトを作るのか（目的）
サイトに来てほしいターゲットは誰なのか（ユーザー導線）
ターゲットに訴求するにはどんなデザインが最適か（マーケティング）
臨む成果は何か（コンバージョン）
成果を出すためにはどんな機能が必要か？（機能面）
完成後、誰が運用するのか（運用面）
上記の制作の納期はいつまでなのか（制作期間）

等を精査する必要があります。

上記以外にもWebサイトの要件定義は様々ありますが、このような重要項目を制作前にきちんと認識し、またクライアントの制作をする際は双方で認識を揃える必要があります。よくあるWebサイト制作の失敗例は、この要件定義段階でのヒアリング不足や認識のズレから、後々、「これは思っていた機能と違う」、「これはできると思っていた」とクライアントの信頼を失うことなので、制作を始める前の要件定義は充分に時間を設けましょう。

要件定義をする際のポイントとしては、デザイン、構成、スケジュール（納期や素材提供までの期間）を抑えれば、大きな齟齬なく制作を進めることができると考えています。

逆に言えば、この要件定義に一番時間をかけて出来るだけ詳細に認識を揃え、Webサイト制作で必要な項目が全て揃うことで、その先のデザイン構築やサイト構成の提案がかなり進みやすくなります。この段階で、クライアントないしはご自身でwebサイトの制作・運用目的を充分に把握することが、制作をスムーズに進める大きなポイントになります。

デザインカンプ（構成書）の作成

要件定義が明確になったら、XDやフィグマ等のツールを使ってデザインカンプ（構成書）を作成します。

デザインカンプには、トップページから下層ページ（複数）までの全てのページのレイアウトやコンテンツを盛り込みます。

そうすることで、各ページのデザインやコンテンツを精査することはもちろん、全ページのトンマナを揃えることができるため提案としてはクライアントがわかりやすい形で検討することが可能になります。

これがもし、要件定義の後すぐにWebサイトに実装してしまうと、全ぺーじを大局的に見ることが難しく、クリエイターからしても折角構築した機能が先方要望と異なり修正になると、制作の工数がかさみます。

それを防ぐために、ディレクターがきちんと構成書段階でサイトの構成・デザインについて認識を揃えておくことで、修正回数が減り、むしろ試行錯誤を実装前に促すことで、よりよいサイト制作を実現することができます。

デザインカンプを作る際に気をつけたい点としては、UI・UXをきちんと説明することです。

ディレクターが提案するカンプは、「何となくここがいい」という感覚的なものではありません。

実際にサイトが完成した際にユーザーが見て、「商品買いたいな」「これってどういうことだろう？」と思わせるような仕掛けや、その後にCTA（＝Call To Action）という次のアクションを起こさせるような導線設計にする必要があります。ここでもやはり、要件定義の内容を基にユーザー導線を構築するため、先の手順の重要性が分かるかと思います。