はじめに
みなさんこんにちは。Spearlyチームのライターもなんです。この記事は、プログラミング初心者の私がヘッドレスCMSである、Spearly CMSを使って1からサイト制作をする記事になっています。
このシリーズでは、サイト作成の全体的な流れはもちろん、コンテンツ作成、コーディング、サイト公開まで解説しているのでぜひ、最後まで読んでみてくださいね◎（今回はサイト作成の流れについて解説します！）
「サイト制作の流れが知りたい！」
「実際に手を動かしてサイトを作ってみたい！」
という方の参考になれば嬉しいです。それでは早速解説していきます✍️
サイト作成の全体的な流れ
Web制作は大まかに分けて５つのステップを経て、リリース（公開）されます。 以下ではステップをひとつずつ紹介します。
STEP① 企画
サイト制作を行うときに必ずしなければいけないのが「企画」です。「何のためにサイトを作るのか」「サイトをどう活用していきたいのか」など、目的やゴールを明確化し、サイトのコンセプトを決めましょう。
1.サイトの目的を決める
何のためにサイトを制作するのかを明確にしましょう。
例えば、サービスや商品を売るサイトなら「売り上げを伸ばす」「サービスの認知度を上げる」などが目的になります。
2.ターゲットを決める
サイトのメインターゲットを決めましょう。ターゲットは、詳細な人物像（ペルソナ）を定めることが大切です。年齢・性別だけでなく生活環境や趣味まで詳しく設定することで、どのようなサイトを作るかを明確化しやすくなります。
3.Webサイトのコンセプト決定
目的・目標・ターゲット設定をもとに、Webサイトのコンセプトを決めます。このコンセプトはプロジェクトの基本方針となり、設計やコンテンツ作成、デザインのすべてにおいての指針になります。
STEP② 設計
企画が終わったら、次はサイトの設計に入ります。ここでは、サイトのコンテンツの企画や、サイト構造の設計、ワイヤーフレームの設計を行います。
1.UXデザイン
UXとはUser Experienceの略で商品やサービスに触れてもらう中でターゲットに対してどのような体験をしてもらうのか設計する工程です。
どんなタイミングでどのコンテンツを魅せていくのか。といった体験をデザインしていきます。「カスタマージャーニー」や「ユーザーシナリオ」といったフレームワークを使ってみるのもいいかもしれません◎
2.サイト構造の設計
サイト構造の設計とは、コンテンツをユーザーの閲覧にあわせ、どのような優先順位で掲載するのかを決定することを言います。サイト構造の設計にはサイトマップを使うのが主流です。
3.ワイヤーフレームの作成
サイトマップをもとに、ワイヤーフレームと呼ばれる画面設計図を作ります。ページごとに「どのような情報」を掲載するのかを定義する工程です。ワイヤーフレームはサイト制作に関係するメンバーがどのようなページを制作するのか共有・理解するための重要な資料です。
4.システムの設計
サイト構造をもとに、どのようなシステムを導入するかの設計を行います。更新が多いコンテンツにはCMSを導入するのか？その場合、どのようなCMSが最適なのか？Wordpressが良いのか？他のCMSも検討すべきか？といった様々な条件を検討する必要があります。
STEP③ コンテンツ・デザイン制作
Webサイトの設計が完了したらデザイン制作に入りましょう。 このとき、企画のときに決めたコンセプトや設計で作成したワイヤーフレームにそって、コンテンツ・デザイン作成をしましょう。
１.コンテンツ作成
ワイヤーフレームをもとに具体的なコンテンツを制作します。キャッチコピーや、会社概要などのテキストはもちろん、どんな画像を使うかも決めましょう。
２.デザインコンセプトの設計
デザインコンセプト設計で確定するものは以下のようなものがあります。
・メインとなる色のルール
・フォントのルール
・レイアウトの大まかなルール
・共通するパーツルール
３.デザインカンプの制作
素材の準備ができたら、各ページのデザインを進めます。できあがったものはデザインカンプと呼ばれます。
このとき、実現不可能な機能がデザインに表現されていないか、システムが動作した際にデザインとして問題がないかも合わせて確認するようにしましょう。
STEP④ コーディング
デザインカンプができたら、コーディングを行います。コーディングは、HTMLやJavaScriptを使用する「フロントエンド」と、PHPなどサーバー言語を使用する「バックエンド」に分かれています。それぞれできることが違うので、実装前に必要な実装と各分担を明確にしておきましょう。
●フロントエンド
デザインカンプと同じものがインターネット上でも見られようにする、主にビジュアル面を調整する工程です。ソースコードと呼ばれる言語で記述する作業です。Webページに表示されるテキストはもちろん、装飾なども実装していきます。主にHTML、CSS、JavaScriptといった言語で構築されます。
●バックエンド
サーバーで動くプログラムを開発する工程で、ユーザからは直接見えません。
よくあるシステムとしてはWordPressなどのCMS（コンテンツ管理システム）やオンラインショップ構築で使われるEC-CUBEなどのパッケージシステムがあります。バックエンドはお店を予約した際に送られる予約完了メールの自動送付や、お店側の予約システムへの登録などのシステム部分を担います。
STEP⑤ リリース
フロントエンドやバックエンドのエンジニアの作業が完了したら、テスト公開行ったあとリリースをしてサイト制作は終了です。
1.テスト
どのユーザーにもデザイン通りの表示を見えているか、仕様通りシステムが動作しているかチェックを行います。
2.リリース
テストで動作に問題点がなければ、リリース作業を行います。これでサイト制作は終了です◎
Spearly CMSを使ってサイトを作る
ここまで、サイト制作の流れを解説してきましたが、この中でサイト内でのコンテンツ作成、コンテンツの埋め込みができるのがSpearly CMSです。
Spearly CMSを使ってサイト作成を行うと以下のような手順になります。
①サイトの企画・設計を行う
②コンテンツ・デザイン制作をする
③Spearly CMS上で、サイト内のコンテンツを作成する
④③で作成したコンテンツをサイトに表現（描画）するために生成されたタグ（埋め込みタグ）を元に、コンテンツの埋め込み、コーディングをする
⑤Spearly CLOUDを使ってリリースする
Spearly CMSをはじめとした各種CMSは、サイト全体はもちろん、ブログやニュースなど、頻繁に更新するコンテンツに使うことで、メリットを発揮します。CMSを使うメリットは大まかには以下の通りです。
①コンテンツの新規作成・更新作業が簡単にできる
②既存のデザインテンプレートに組み込むことができる
③複数人でサイト管理ができる
また、このCMSとは別に「ヘッドレスCMS」というCMSも存在します。実はSpearly CMSはこの「ヘッドレスCMS」という種類に分類されます。ヘッドレスCMSはこれまでのCMSのメリットは保ちつつ、弱点であったセキュリティの脆弱性やサイトの重さを克服した新しいCMSのカタチです。
次回は、Spearly CMSの具体的な使い方について詳しく解説するので、ぜひこちらもチェックしてみてくださいね👀
おわりに
ここまで読んでくださりありがとうございました🌿サイト制作の流れはつかめましたでしょうか？？次回は、Spearly CMSの具体的な使い方について詳しく解説します！それではまた次の記事で👋
🔻Spearly CMSはこちらから🔻
