さくらメモリーのお知らせ・雑記・小話・おもしろいこと探し

小説個人サイトの作り方2_サイトデザインを考えよう

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

サイト作成するにはまずサイトデザインを考えよう!

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

まずはどんなサイトを作りたいのか考えて、本当に作りたい!となってから作り始めるのがいいよ!

個人小説サイトをつくるには?

個人サイトを作るにはどうしたらいいかを先に書くね!

ずばり、WordPressがオススメ!(作成は無料)

個人サイトが多く作られていたときは、ブログを使うことが多かったみたいだね。
ただ、ブログだとスマートフォンから見たときに小説のタイトルごとに話数一覧表示が綺麗にできなかったりと、投稿サイトと比べたときに見劣りしてしまいやすいのが問題点。

ただ、ブログだと、無料で作れたりするからその点はいいかもしれないけれど、それなら投稿サイトを使うことをオススメするよ!

WordPressもブログで多く利用されていたりするけれど、プラグインという機能を使えば、工夫次第でどんなサイトも作れるのがオススメのポイント。

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

小説サイトとはイメージが違うけれど、このサイトもWordPressだよ

個人小説サイトってどうなってるの?サイトマップご紹介

個人小説サイトを作ろうとなったときに、実際に作るだけの意味があるのか、理想のサイトができそうかを検討することから始めよう!

どこでサイトを作るのがいいか、小説投稿サイトではなく個人サイトにする理由などをじっくり見返せるよ!

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

実際に私がほしいと思った機能を紹介するね!

サイトに欲しかったページ

【】の中はさくらメモリーのメニュー文言!

  • トップページ【Home】
  • 注意書きページ【Information】
  • メインページ(小説タイトル一覧)【Main】
  • 小説ページ(話数一覧)【例、時空幻想図書館】
  • 小説本文掲載【例、1プロローグ】
  • 表紙イラスト掲載ページ【Gallery】
  • ブログのような呟きメモページ【Memo】
  • お問い合わせ【Mail】

トップページに欲しい機能

  • 最初の案内・どんなサイトか
  • 更新履歴

トップページには、更新した履歴を自動で表示してくれる機能が欲しかった!

最初はTwitterを埋め込んで更新履歴として使っていたけれど、一覧で表示したいのと、ページが重くなるから変えたよ。
今はinformationの下にTwitterが埋め込まれているから見てみてねー!

注意書きに欲しい機能

  • サイトの注意事項
  • 執筆者等の紹介

注意書きページはそのまま、注意事項をざっと書いているページ。

著作権についてや、禁止事項など。

それと、このページで執筆者情報なども紹介しているよ。

メインの小説ページに欲しい機能

特に重要なのがメインになる小説ページ。

ここのページデザインはしっかり考えないと、イメージと違う!ということが起こりやすい。

小説ページは三段階に分かれているよ。

  1. 小説タイトル一覧ページ
  2. 小説話数一覧ページ
  3. 小説本文

さくらメモリーでは、上の順番で表示をさせたかったのと、極力手間を省きたくて、小説投稿サイトのように、小説を執筆したら小説話数が自動で追加される仕組みを作りたかった。

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

実際のイメージはさくらメモリーを見てね

そして、独自ドメインが使えつつこれができるのが、WordPressだった!

ちなみに、話数を自動で横に並べるというのは、専門外だから詳しい人に聞いてね。
一つずつリンクを貼るなら横並び表示の方法も説明できるけど、自動化した方が楽だと思うよ。

表紙イラスト掲載ページに欲しい機能

小説に表紙をつけたかったから、そのイラストを一枚絵として閲覧できるページを作成したかった。

  • イラストをずらっと表示できる機能

ブログのような呟きを書ける場所

  • 小話などを置くスペース

このブログのようなMemo機能だけど、さくらメモリーを見てもらうとわかると思うけど、URLが違っているよ。

さくらメモリー
https://sakuramemory.com
さくらメモリー内Memo
https://blog.sakuramemory.com

これは、独自ドメインには、サブドメインといって、独自ドメインから派生したドメインを作ることができるから。

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

今は一つのドメイン代で複数サイトが作れると思ってくれたらいいよ!

https://sakuramemory.comは、小説投稿に使っているから、ブログを別サイトとして作成してリンクでつなげているよ。

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

このサイトと違うのはサブドメインか独自ドメインかだけだね

お問い合わせページに欲しい機能

最後に、感想やお問い合わせがあったときに、メールで通知が来るページ。

  • メールで通知がくるフォーム機能
https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

さくらメモリーにあるページはこれで全部かな

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

他にもYouTube動画の埋め込みとかもできるから、いろんな使用方法があるねー

https://shousetu.work/wp-content/uploads/2019/12/6405E03C-59A4-4D62-8979-2A0CB44C24C9.jpeg
海琴

さくらメモリーでも動画作成を考えてるよー

どんなサイトを作りたいのかデザインを考える

今紹介したのを踏まえて、どんな機能が欲しいのか、どのページになにを載せるのかをざっとラフに下ろすといいかも!

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

ノートとかに書きなぐるのがいいよ!

一応自動化しているものを一覧にしておくね。

  • 更新履歴(小説本文を投稿すると自動で画像、タイトル、日付、簡単な内容が表示される)
  • 話数一覧(小説本文を投稿すると、タイトルが自動で一覧表示される)
  • Twitter自動投稿(小説本文を投稿するとTwitterに自動でツイートされる)

この二つ以外は手動だね。
小説のタイトル一覧ページは、リンクでつないでいるよ。
頻繁に更新するものではないから、ここは手動でも大きな問題はないよ。

どこでサイトを作成するかの決め方

オススメはWordPress!

WordPress自体は無料だけど、別でサーバー代とドメイン代がかかるから、よーく相談してね。
サーバーをどこで借りるかによって変わって来るけど、最初は1年で1万円くらいの運営費で考えて問題ないよ。

他には、

忍者ブログ・fc2

ここでサイト作っている人も結構いるから調べるといろいろ出てくるはず。

HTMLで全部自作する

知識があるならこれもいいと思う、けれど!
自動化がほとんどできないのと、小説の改行とかがコード手打ちになると思うから手間がかかる。
それと、これもサーバー代とドメイン代が別でかかるよ

小説サイト作成サイトを利用する

小説サイトを作るのに特化した携帯サーバーもあるよ。
ナノ、リゼ、など。ただここは同人サイトを作っている人が多い気がする。
これも検索するとたくさん情報が出てくるよ。

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

全部無料がいいのか、有料でもいいから自分のものにしたいかで決めるといいかも!

https://shousetu.work/wp-content/uploads/2019/12/178E14AA-8CFF-4938-A7AC-F206DC9BB4E1.jpeg
海琴

個人サイトは自由だけど、多少手間がかかることは頭に入れておいてね!

https://shousetu.work/wp-content/uploads/2019/12/6405E03C-59A4-4D62-8979-2A0CB44C24C9.jpeg
海琴

次からは具体的な作り方!それじゃあ、グッバイビー!