経験値0のWeb担当が、HS書架のWebサイトを1から作った話【制作依頼～公開編】
HS書架代表兼、Web担当の春紫苑（前回カミングアウト済み）です。
Webサイトが目指す目標と目標の優先順位をもとに、前回はWebサイトの制作に必要な情報（構成要素）を洗い出しました。前回までの奮闘状況を知りたい方は、以下の記事をご覧ください。
さて今回は、いよいよ洗い出した情報をもとに、Webサイトを実際に作っていきたいと思います！
依頼前にどんなサイトになるか想像する
と、ここまで期待させておいて申し訳ないのですが、春紫苑自身がWebサイトを作ることはできません。えいてぃーえむえる？しーえすえす？ぷろぐらむ？なにそれ？って思う作家の方、私以外にもいらっしゃるのではないでしょうか？
じゃあ一体なにをするんだ？と言われそうですね。たしかに私はWebサイトを作ることができません。しかし、Webサイトはこんな感じにしたい！という構想（というか、妄想）は頭の中にあります。そしてこの構想を制作してもらう方（Web制作者）に伝え、形にしてもらうことはできます。
ただし制作を依頼する以上、どれぐらいの費用でサイトを構築してもらうか、お見積りを依頼することになるはずです（私も知り合いとはいえ、費用を算出してもらいました）。
この時、Webサイトに含める具体的な内容が決まっていないと、Web制作者は精度の高い（後から費用があまり変わらない）お見積りを出すのは難しいようです。制作者サイドからすれば、内容が曖昧だと赤字が怖いため、費用を高めに設定する場合もあるとか。
そんなわけで、あなたのWebサイトがどれぐらいの分量（情報量やページ数）になるのか、ふんわりとでもいいので考えてみましょう！
ページ構成を考える
うぇぶさいとのぺーじこーせい……なんて響きを聞くと、ものすごく難しいことを想像しちゃうかもしれません。でも大丈夫ダイジョウブ（アナ風に）。前回洗い出した構成要素の分類が、そのままページになってしまいます！（だから前回がんばって構成要素を洗い出しながら整理したんですね）
その前に、Webサイトってどんな形になっているか知っていますか？
HS書架を例に、図に表すとこんな風になってるんですって。
これはWeb制作者さんにご用意いただいたのですが、構成がわかりやすく描かれていますね。
この中のトップページは、各情報（ページ）へアクセスするための入口となるページです。本でたとえるなら目次ページですね。
トップページにリンクされた各ページが、前回の構成洗い出し編でリストアップしたそれぞれの情報を格納するページになります。HS書架なら、下記のようになるでしょうか。
自己紹介のページ
本を売る・自作品を紹介するページ
活動報告ページ
自作品の質問やファンレターを送ることができるページ※
上記4つの主な掲載情報にプラスして、サイトそのものの紹介（とHS書架の紹介）ページの計5つが情報ページになりそうです。
※前回も書いた通り、質問やファンレターを送るページは今回見合わせているので、実際の情報ページは4ページを想定しました
プログラムが必要か考える
Webサイト全体の構成がなんとなく決まりましたね。しかしこのままでは、まだ制作者に依頼するには不十分。なぜなら、プログラムが必要かどうかを検討しなければならないからです。
プログラムと書くと、構えてしまいますよね。私もカタカナ文字だけで
「あ～ダメっ、難しいのキライっ！」
って思いますし。
それに、制作者さんからプログラムって聞いたとき、ページにゲームを表示させるんだろうか、なんて今から考えればずいぶん見当違いなことを想像していました……。
例によってWeb制作者さんから教わったのですが、Webサイトのプログラムって、ページに情報を簡単に加えたり、入力フォームの内容を設定したメールアドレスに送信したりするものが大半なんですって。
例えばHS書架の場合、自己紹介ページは毎回誰にアクセスされても、おなじ内容を表示できればいいですよね。情報を加える頻度は低いと思います。
いっぽう作品を紹介するページや活動報告ページは、どんどん増える可能性が高い。自作品が増えていったり、活動内容を掲載することで、サイトが賑やかになってくれそうです。
というわけで、HS書架では作品紹介と活動報告の2ページに、「えいちてぃーえむえる」が分からない担当者（つまり私）でも、簡単に更新できるプログラムを組んでいただくことにしました。
ゆくゆくはファンレターを送信できるページを加えて、プログラムを追加してもらう予定です。
その他必要な要素を洗い出す
これで依頼の準備がほとんど整いました。あとは、あなたがこうしたい！こうしてほしい！という内容に合わせて、必要なものを加えます。
HS書架の場合だと、前回の記事でも書いた拡散やフォロー用のSNSボタンです。実はこのボタンについては、私がお願いしたというより、制作者さんから提案してくださいました（ありがとうございます！）。
またHS書架のロゴ制作もお願いしました。ロゴはWebサイトのみに使用するというより、あらゆる場面（例えば販促用のポスターや、本の背表紙など）で使用することを想定して制作を依頼しています。
HS書架の背景イラスト
もう一つ私のわがままで、Webサイトの雰囲気を本が読めるカフェ、あるいは民間の図書館のような雰囲気にしたい、という要望がありました。
ビジュアルとして見せるのが一番伝わるだろうなと思いました。しかしそんな都合のいい写真はないですよね……。そこで書架の雰囲気を伝えるイラストも依頼することに決めました。
このイラストは、HS書架の協力絵師様にご協力いただきました（多謝！）
お見積りを依頼する
以上の準備ができたところで、ようやくお見積りを依頼します。これぐらい具体的に決まれば、制作者サイドからもより詳細なお見積りをいただけるので、どちらもハッピーになれます！
もしお見積りの段階で予算オーバーなら、情報を削ったり機能をスリムにできないか検討しましょう。制作者からも予算に合わせた上で、要望に沿う案をいただけるかもしれません。
Webサイト制作費用の相場
Webサイト制作の費用ばっかりは、制作者によってピンキリのようですね……。幸いなことに、HS書架は知り合い価格でがんばっていただいたので、参考にはならないと思います。
もしお見積りが高いと感じるようであれば、複数の制作者にお見積りいただくのがいいかもしれません。ただし、安いからといって信頼に足りる仕事をしていただけるかというと、そうでもないのが難しいところですが……。
前々回の前準備編でも書きましたが、今はアウトソーシング（外注）サービスが充実しているので、確認してみるのも手だと思います。
Webサイト制作発注から納品の流れ
素材（データ）をすべて制作者に送る
制作者さんのお見積りに問題がなければ、いよいよWebサイトを作ってもらいます。楽しみですねっ。
まずはあなたがこれまで準備してきた素材（データ）を、制作者さんに送りましょう。もし不足している素材があったとしても、Webサイトの制作段階で送ることもできます。最初から完璧に素材を揃えっているほうが珍しい、とHS書架の制作者さんもおっしゃってました。そういうものなんですね……。
ドメイン、サーバの契約
もうひとつ、Webサイト制作前に発注側（つまりあなた）が準備するものがあります。それがドメインとサーバの契約です。どめいん？さーば？私たち作家にとって、まったく馴染みのない言葉ですね。サバっぽいから美味しいのかな？なんて初耳のときに思っちゃいましたが、Webサイトにとって、とても大事なので覚えましょう（笑）。
■ ドメイン
ドメインとは、あなたのWebサイトを表示するアドレスのことです（正確には違うようなのですが、基本的にこの理解で問題ないです）。HS書架なら、「hs-syoka.jp」がドメインになります。
■ サーバ
サーバとは、Webサイトのデータを格納する箱のようなもの。現実の世界なら、土地や家を想像してもらうといいかもしれません。
サーバのデータにドメインが紐づくことで、ブラウザ（Webサイトを表示させるソフト）のアドレスバーにアドレスを入力したら、Webサイトが表示されるようになるんですね。
ドメインとサーバは、取得したりレンタルするのにお金が必要です。ドメイン、サーバの管理業者と契約して使えるようになります。
じゃあ「それってどこで契約するの？」って思いますよね。
私を含め初めて契約するなら、ドメインとサーバは同じ会社や系列で契約できる業者さんがいいです。例えばさくらのレンタルサーバや、ムームードメインとロリポップのようなところです。
またサーバのコースも色々ありますが、立ち上げたばかりのWebサイトにパンクするほどの訪問者がアクセスするとは考えにくいので、月額数百円程度のプランで十分です（と言われました）。
さくらのレンタルサーバなら「スタンダードプラン」。ロリポップなら「スタンダードプラン」か「ハイスピードプラン」です（2,022年5月現在）。
ドメインやサーバについては、詳しく書くと一つの記事ができてしまうぐらい奥の深いものですので、もし私の説明でも納得できないようなら、Web制作者にご相談いただくほうがいいかもしれません。
「Web制作の流れ」に話を戻しましょう。
HS書架では、Webサイトの流れは次のような感じでした。
Webデザインのレイアウト（デザイン）を提示してもらう
デザインOKの後、制作したWebサイトをテストアップ
バグやテキストの修正後、Webサイトを公開する
Webデザインのレイアウト（デザイン）を提示してもらう
まずはあなたの要望を聞いた制作者さんが、サイトの設計図と見た目（レイアウト、デザイン）をあなたに提示すると思います。
というのも、実際にWebサイトを作ってしまってから大幅に修正するのは、非常に手間がかかってしまうから。制作者さんによっては、追加で費用を請求されるかもしれません。
そうならないためにも、ラフの段階ですり合わせを行います。おそらくこの時、プロの目から見たサイト構成の提案を受けることもあるでしょう。
実際HS書架では、ラフの段階で制作者さんから色々とご提案いただきました。大きくは次の2つです。
ページ分けをやめ、一つの画面で操作を完結させる
背景画像全面に書架のイラストを表示する
■ ページ分けをやめ、一つの画面で操作を完結させる
こちらから送ったデータを見たところ、一つひとつの項目に情報量が多くなかったので、ページとして独立させるとスカスカになってしまうとのこと。
それならスマートフォンやタブレットで操作する、アプリのような感じにしてはどうですか？と言われ、「確かにそうかも」と提案を受け入れるようにしました。
■ 背景画像全面に書架のイラストを表示する
書架のイメージは、もともと書架のトップページの最初に大きく配置する予定でした。でも仕上がってきそうなイラストがあまりにも素敵だったので、それならずっと訪問者に見てもらったほうがいいと言われ、「確かにそうかも（2回目）」と思って、こちらも採用しました。
このように、ラフの段階からすり合わせておけば、制作者さんも二度手間がありません。その結果、制作期間が短くなり、納期も短縮することができて、一石二鳥ですよね。
デザインOKの後、制作したWebサイトをテストアップ
ここまでくれば、あとはWebサイトを実際に制作してもらうだけです。この段階で、仮の状態になっているテキストや画像などがあれば、しっかりと作ってデータを制作者に渡しておきましょう。
またドメインやサーバの契約をし、制作者さんにドメインとサーバの情報を渡しておきます（でないと、ドメインとサーバを紐づけたり、サーバにWebページのデータを置くことができないと言われました……）。
すべてのページを制作できた段階で、制作者さんは契約したサーバではなく、別のサーバ（もしくは契約サーバでも、別のアドレスで表示する場所）に、仮のデータを置いてもらうことになります（これをテストアップといいます）。
ここであなたはすべての情報が正しいか、しっかりとチェックしましょう。また操作感やわかりにくい箇所がないか、Webサイト全体をくまなく見て回るようにします。間違いはもちろん修正対象です。また少しぐらいの操作感を変更するのであれば、応じてもらえると思います。
プログラムを組んでいるなら、その操作もしっかりとチェック。ページを更新するときは、訪問者から見えない「（更新情報の）管理画面」があるので、そこで不具合が起こらないかも大事なチェックポイントになります。
もうひとつ。チェックはパソコンの画面だけではなく、スマートフォンでもチェックしましょう（iPadなどのタブレットで確認できればなおGood！）。最近はスマートフォンでWebサイトにアクセスする訪問者のほうが多いので、あの小さい画面で見にくかったり操作がしにくいと、訪問者は回れ右をしてしまいますからね……。
バグやテキストの修正後、Webサイトを公開する
テストアップ後、チェックで出てきた情報の掲載ミスやプログラムのバグをすべて修正したら、いよいよあなたのWebサイトを公開します！
あなたの契約したドメイン（アドレス）で、ちゃんと表示していますか？
最近はアドレスがhttp:ではなく、https:（「s」がついているかどうか）で始まるWebサイトがほとんどですが、あなたのアドレスはどうですか？
「https:」ほどセキュリティが強い（と言われているよう）です。ただしhttpsにするには、契約サーバの状況によっても変わるらしいので、制作者にしっかりと聞いておきましょう。
以上でWebサイトの制作は終了です。お疲れ様でした！
普段Webサイトを見ているだけなら、あまり耳にしない用語が飛び交って軽くパニクるかもしれません（私はパニクってテンパりました……）。でも大丈夫です、私にできるぐらいですので、あなたも絶対できます！
それに自分のWebサイトを表示したときの達成感といったら、言葉にできないほど大きなもの。ぜひ味わってみてください！
ちなみに我がHS書架のWebサイトは、パソコン、タブレット、スマートフォンでこんな感じに表示されています。はぁ、カッコいい……。
実際のHS書架Webサイトはこちら。
今後もHS書架のnoteでは、個人出版レーベルを立ち上げるにあたり、やってみたことを共有していく予定です。レーベル立ち上げ予定の方は、ぜひ参考にしてみてくださいねっ。