経験値0のWeb担当が、HS書架のWebサイトを1から作った話【構成要素洗い出し編】
「個人出版レーベルを立ち上げるなら、Webサイトを立ち上げよう！経験値がなくても怖くないよ」を掲載するシリーズ。
前回は「Webサイトってとっても役に立つ」「形を作る前に、目的を明確にしよう」という内容を記事にしました。興味のある方は、前回記事をリンクしておくのでご覧ください。
あらためて見返すと、Web担当＝春紫苑だって自分でバラしちゃってるし……。相変わらずバカな私（ガックリ）。
コホン、それはともかく、第二回は前回最後に予告したとおり、Webサイトに掲載する「構成要素の洗い出し」を書いていこうと思います。
構成要素とは「掲載する情報」のこと
ところで「構成要素」って書くと、なんだか難しそうな気がしません？ここでいう構成要素とは、要するにWebサイトに掲載する情報のことです。
たとえば自分のことを知ってもらう自己紹介だったり、出版する本の情報だったりといったこと。難しく考える必要ないですね。
で、各構成要素には内容を表す素材※があります。
※ごめんなさい、これ私が勝手に表現した言葉です。Web制作者（デザイナーやエンジニア）さんに渡して制作物（HTMLやプログラム？）を作ってもらうから、その材料という意味です。
素材
内容を表現する素材は、次のようなものがあります……いや、あるらしいです（全部把握してない（汗））。
テキスト（文字情報）
画像（図や写真、イラストなど）
動画（YouTubeにアップされているものなど）
音楽（BGMや効果音など）
操作できるもの（ゲームや360°回転できる風景など）
各構成要素に対し、どんな素材を用意すればユーザー（Webサイトの訪問者）に伝わりやすいかを考えるわけですね。
もちろん技術力や経験、予算によって、用意できる素材には限界があると思います。ですが、なるべくユーザーに伝わるような素材を用意しましょう。
掲載情報をリストアップしてみる
では実際にHS書架で必要な情報をリストアップしてみます。
経験値0のWeb担当が、HS書架のWebサイトを1から作った話【前準備編】で、Webサイトの目的を以下のように定めました。
自分のことを知ってもらう
本を売る
活動報告をする
ファンを作る、増やす
自作品を紹介する
自分や作品への質問、ファンレターを受け取る
この目標をもとに、どんな情報が必要なのかをリストアップします。
ところで「自分のことを知ってもらう」や「ファンを作る、増やす」のように、同じような情報が必要になる目標もあるので、同時にまとめていこうと思います。
「自分のことを知ってもらう・ファンを作る、増やす」ために必要な情報
まずは作家自身のことを知ってもらい、ファンを増やすための情報を書き出してみましょう。
ここでは自己紹介の情報が必要です。とはいえ履歴書を作るわけではないので、生年月日や学歴、クラブ活動などの情報は必要ないと判断しました。
それより必要なのは、私がどんな作品を書いているのか、どれだけの作品数があるのか、などの実績。あと、どんな作家が好きなのか、どんな作風（ハッピーエンドや成長物語など）が好みなのか。つまり読者が作品を選ぶ指標になるかどうか、という基準で掲載情報を決めていきます。
このほか、文字情報ばかりにすると圧が大きいので（笑）、この機会に自分のアイコン（イラスト）を書架の協力イラストレーターさんに作っていただき、掲載することにしました。
もう一つ、私のSNSアカウント情報も掲載し、興味を持ってくださった訪問者にフォローを促すことも考えました。
この項目の素材
自己紹介用（テキスト）
春紫苑アイコンイラスト（画像）
春紫苑SNSアカウント（リンクアドレス）
「本を売る・自作品を紹介する」ために必要な情報
今回Webサイトを作るにあたっての最優先目標、「本を売る=自作品を紹介する」ための情報をリストアップします。
これから創作していく自作品は、電子書籍としてKindleでセルフ出版の予定ですので、購入可能なページへのリンク。
あとはイラストレーターさんが描く魅力的な表紙も掲載することにします。中身の分からない小説を手にする材料として、表紙は大切ですからね。
本当ならこれ以外にも小説のタイトルやあらすじ、簡単な紹介文、価格などの情報も必要なのですが、HS書架ではこれらすべて掲載しないことにしました。どうしてだと思いますか？
実はHS書架のWebサイトを立ち上げるにあたり、各小説のシリーズごとに紹介するページ、いわゆる「特設サイト」を作ることを決めています。特設サイトで小説の詳しい情報はわかるので、HS書架のWebサイトで掲載する必要はないんですね。
ここまで書いてきましたが、やっぱり本の価格ぐらいは掲載したほうがいいかも、と思い始めています……。もしWebサイトに本の価格が掲載されているようでしたら、心変わりしたんだなと笑ってください。
なので、シリーズごとに設ける予定の、特設サイトへのリンクを掲載する情報としてリストアップの一つに加えます。
この項目の素材
購入先のリンク情報（リンクアドレス）
表紙（画像）
特設サイトへのリンク情報（リンクアドレス）
※ただし出版作品は随時更新するため、最初から情報が決まっているわけではありません。あくまで情報を乗せる箱がいる、と想定しておけばOKです
「活動報告をする」ために必要な情報
続いて、私春紫苑がどんな活動をしているのか、HS書架がこれからどんなことを行うのか、を掲載するのに必要な情報を考えます。
といっても活動自体はまだ行っていないので、何を書くのか決まっているわけではありません。なので情報自体は自由ということになります。
ここで一つ留意することがあります。活動報告（ニュース、お知らせ）などは情報の鮮度が大事だということ。たとえば「○月○日に開催するイベントに出展します」と掲載していても、何年に掲載されたのか不明だと、読んでいる訪問者が混乱しますよね。
更新情報には掲載した日付を必ずつけるようにしましょう。もし一度掲載した情報を頻繁に書き換えることがあるなら、書き換えたことがわかるよう、更新の日付も掲載すると、より訪問者にとって親切ですね。
この項目の素材
お知らせ情報（テキストや画像など）
掲載日時（テキスト）
※出版作品とおなじく更新する部分なので、情報の箱を用意する想定です
「自分や作品への質問、ファンレターを受け取る」ために必要な情報
最後の目標として挙げた、「自分や作品への質問、ファンレターを受け取る」ために必要な情報ですが、最小限だと私のメールアドレス（この場合、HS書架で用意する質問・ファンレター用のメールアドレス）があれば事足ります。
といってもメールアドレス宛に直でメールを送るのって、ハードル高すぎません？私がもし読者なら、作者宛にお手紙を直接送るってとっても勇気が必要です……。
そこで他のWebサイトでよく見かける、「フォーム」を用意することを検討します。フォームって要するに、お問い合わせでよく見かける入力欄のあるページですね。最後に送信ボタンをポチッと押すと、サイトの運営者に内容が届くアレです。
フォームなら、メールで直接より少しだけ心理的なハードルが下がって読者も送りやすいし、こちらもWebサイトから届く専用のメールアドレスを作っておけば、全部そのアドレスにフォームからのメールが集約されてチェックし忘れることがないので、どちらもハッピーになれます＾＾。
一旦フォームの仕組みについてはこれぐらいにして、フォームを設置するために必要な情報について考えましょう。基本的には訪問者に「何を聞きたいか」が、そのまま必要な情報となります。
とはいっても質問やファンレターの受け取りが目的なので、訪問者に聞きたいことって「名前（ニックネームでOK）」と「連絡先（メールアドレス）」「質問（ファンレター）内容」ぐらいかな、と。
入力項目をあまり増やしすぎると、訪問者も入力が面倒になって送ってくれなくなるので、なるべく項目数は増やさないほうがいいと思います。
と、ここまで書きましたが、2022年5月4日時点で作品が一つもない私に、ファンレターが届くはずがないので（＾＾；）、この目標は一旦保留（つまりこの情報もリストから除外）しました。
この項目の素材
HS書架専用のメールアドレス（メールアドレス）
フォームの入力項目（テキスト）
その他必要な情報と素材
これで各目標に合わせて、必要な情報と素材がすべて出揃いました。次はいよいよWebサイトを実際に作っていきましょう！と行きたいところですが、訪問者のためにもう少し用意したほうがいい情報（と素材）があります。
ロゴ
色違いのバリエーションもある
そのサイトを表すシンボルマーク。ページの左上に配置されることが多いです。企業マーク、レーベルのロゴなど見たことがありますよね。
ロゴがなければ、あなたのレーベル名をそのまま文字で配置してもいいのですが、あるとレーベルの顔として覚えてもらえるので、余裕があれば作りましょう！
SNS共有用ボタン
せっかくWebサイトを作ったのに、誰にも見てもらえないって悲しくないですか？それなら訪問者に広めてもらえるよう、Twitterやfacebookなどの共有用ボタンを作りましょう！
サイトを訪れた方が「ぜひみんなに知ってほしい」と思ってもらうWebサイトを作ることが前提ですが、ボタンをポチッと押すだけで広めてもらえる可能性があるので、共有用のテキスト（SNSに掲載するテキストが自動で挿入できるんです）を考えておくことも大切ですね。
どういったWebサイトかの説明
あなたのサイトを訪れる人が、レーベルのことを知っているとは限りません。なので、初めて訪れた人に、このサイト（やレーベル）がどういった目的で作られているのかを説明する情報が必要です。「初めての方へ」のようなページを見たことがある方もいらっしゃるのではないでしょうか。
HS書架では、Webサイトがどういった目的で作られているのか、またHS書架をなぜ立ち上げようとしたのかの情報を用意しています。
この項目の素材
HS書架専用のメールアドレス（メールアドレス）
フォームの入力項目（テキスト）
ようやく構成要素の洗い出しが終わりましたね！
ここでネタバラシをすると、Web制作者に発注する場合、前回の前準備編と今回の構成要素の洗い出し編の内容は、制作者サイドからヒアリングという形で整理していくことが多いです（笑）。
じゃあなぜ書いたんだー、読んだ時間を返せーって声が聞こえてきそうですね。大丈夫、安心（？）してください。
実際ヒアリングでWebサイトの方向性を決めていくにしても、目的を明確にしていないと後からブレる可能性が高いんです。またこちらで素材を用意することには変わりありません。
また目標や目的をヒアリングしてこない制作者は、あなたのイメージ通りにWebサイトを制作できる可能性が低いので、依頼するかどうかを今一度検討しましょう。前準備編や構成要素洗い出し編の記事内容を知っておくだけでも、どういった制作者に依頼すればいいかの参考になるはずです。
実際私が依頼した（知り合いの）Webデザイナーさんに、上記内容を色々と教えていただきました（本当にありがとうございました）。それまでデザイナーさんとのひどいやり取り（主に私の責任）は、放送事故レベルです……。
そんなわけで、あなたもこの知識を頭の片隅に置いて、Webサイトを作るなり、依頼してみてください。
いよいよ次回は、Webサイトをインターネット上に公開するための準備を各予定です。
ドメイン？サーバ？なにそれ、おいしいの？ってならないために、ぜひお読みくださいね。
今回も長々とお付き合いくださり、ありがとうございました！