【2022年11月版】ナノ(nano)の夢小説サイトの作り方！【スマホでもPCでもOK】
※（2022/09/03 元の記事内容がわかりづらかったので全体修正しました！）
はじめに
夢小説が作れるサービスはフォレストやAlice、XRIAなどいろいろありますが、私はナノが好きです。好きなところをあげるとキリがないのですが、特に以下三点がおすすめポイントです。
- 管理サポートが今も継続していること
- （サーバメンテナンス、SSL化や保存容量の引き上げなど）
- 自由度がかなり高いこと（サイト作成上の融通が利くこと）
- 有料版で広告が消せるところ
ちなみにナノは広告が気にならなければ無料でも利用可能です。でもサーバーなど維持費もかなりかかると思うので、感謝の気持ちもこめて私は有料版を利用しています。
今回は「できれば長くサービス継続してほしい……」という思いを込めて今回は個人サイト（同人サイト・夢小説サイト）でよく見かけるナノ（nano：http://nanos.jp/）を利用した夢小説サイトの作り方を簡単に説明したいと思います。
（あわよくば有料版利用者が増えてナノが栄えますように……！）
注意書き
ここでは夢小説サイトを作るにあたって最低限の設定・作り方を掲載しています。
ナノの機能はたくさんあるので、ここではすべてを説明できていませんが、よくわからない部分は実際に触ったり調べたりしていってもらえれば……と思って書いています。
というのもここでは色々書いていますが、まずナノにユーザ登録して、てきとうなテンプレートを適用して、いじっていくと分かってくる部分も多いです。（サイトを作ってる人はほとんど独学ですしね）
あまりとらわれず自由に調整しつつ、分からない部分を都度調べて行けば、案外スムーズに夢小説サイトが作れるんじゃないかなと思います。
独自タグについて
なお、ナノでサイトを作っているとよく出てくる便利なナノ独自の機能「独自タグ」についても今回は詳しく書いていません。下記公式サポートページもご参照ください。
□独自タグとは https://nanos.jp/doc/tag
※独自タグとは[#blog1_リンク文字#]みたいな#（シャープ）で囲まれたタグです。例えば [#blog1_リンク文字#] だと「リンク文字」をクリックすると一つ目に作ったブログへのリンクするように設定できます。
ユーザ登録について
今回はナノのユーザ登録が完了していることを前提に説明していきます。
（ナノを利用する場合はユーザ登録が必須です）
まだユーザ登録していない方は↓にて登録方法を説明していますのでご確認ください。
ではユーザ登録を完了したらさっそくやることリストを見て行きましょう！
やることリスト
・ナノの全体設定をおこなう
－ 検索避けをおこなう ※1番最初にやること！★
－ 広告の表示場所を決める
－ または有料版を使うなど
・以下について決める
－ サイト名 ★必須
－ トップページなどの雰囲気を決める★ほぼ必須
（テンプレートを使う場合）
－ 作るページの種類を決める
‐注意書きページ
‐更新履歴ページ
‐夢小説ページ ★必須
‐memo・ブログ等のページ
‐アルバムページ
－ オプションを決める
‐カウンター
‐フォーム
‐拍手
‐画像を使いたい
・それぞれのページ・機能を作りこんでいく
（補足：テンプレートや素材について）
・それぞれのページ・機能をそれぞれリンクで繋げる
（メニューのリンクを設定する・ランクなどをつなげるなど）
こうして並べるとめちゃくちゃやることが多いみたいですが、シンプルなサイトで全体設定&トップページ・Mainページだけなら慣れると1時間くらいで形になるかと思います。
夢小説サイトとして必須の部分は「★」をつけているので、先に★印を済ませた後に必要な機能を追加していってもOKです。
ナノの全体設定をおこなう
検索避け
検索避けというのは簡単に言うと、Googleなどに登録されないようにする設定です。
夢小説に限らず、二次創作系のサイトは公式や他のファンに見つからないよう、検索避けが基本とされてます。
Pixivやツイッターのプラスタグが主流なのでイメージしづらいかもですが、ジャンル問わず二次創作・夢小説サイトを運営するのなら一番最初に検索避けをしておいた方がいいです。（一回Googleに登録されてしまうと、検索避けも意味なくなってしまいます）
| 検索避けの設定方法 管理画面にて「ホムペ設定」を押す →「制限」の中にある「アクセス禁止・検索避け」にて 「検索ロボット（検索避け）」にチェックを入れて「保存する」を押す |
広告について
ナノは無料版を使用する場合、広告が表示されます。
- 広告は上/下のどちらかに表示するか選べます。
- （広告が下にあると鬱陶しいので、上に移動させる人が多いです）
- スマホ表示時は追加で下部固定の広告が表示されることがあります
| 広告の表示位置の設定方法 管理画面にて「ホムペ設定」を押す →「表示」の中にある「その他共通設定」にて 項目「広告上部表示」を「する」にして「保存する」を押す |
検索避けと広告についての設定方法はこちらのページで詳しく説明しているので、もし分からなかったらご参照ください。
無料版と有料版の違いについて
見ればわかる通り、ナノでは非常にきわどい広告が表示されます。
訪問者が小説を読んでいても気が逸れるだけでなく、編集していても気になってしまいます……。
もし広告を非表示にしたい場合は1,000円（90日間）から有料プランがあるので公式サイトを確認してみてください。
■□ナノヘルプ（公式）
┗全般 > 有料版
https://nanos.jp/help/category/27/
有料版と無料版の違いは広告の有無のみです。
無料版でも十分機能は試せますので、サイトがある程度完成してから設定しても良いと思います。
（有料版の手続きではWebmoneyという耳慣れないプリペイドサービスを使うのですが、コンビニで簡単に買えるので慣れればあまり手間ではないかと思います）
以下について決める
次に作る機能をざっくり決めて、ざっくり作っていきます。
作りながら考えていってももちろんOKですが、構成を先に決めておくとスムーズに作り進められます。
サイト名 ★
サイト名、既に決まっていると良いですが、迷う人はかなり迷うと思います。
好きな食べ物、季節、英語ドイツ語フランス語、漢字熟語、天気、動植物、ことわざ、数字などなど。
トップページなどの雰囲気を決める★
どんな雰囲気にしたいかざっくり決めます。
お手本にするサイトがあると作りやすいです。もしこだわらないよ！という場合はテンプレートというものを使ってしまうのも良いと思います。
テンプレートとは初めから型が出来上がっているもので、それを自分用にカスタマイズします。（例えばタイトル部分の文字やMain→Worksに文字を修正したり、色合いを変えたり）
一から作るのは大変なので、好みのテンプレートを見つけて、それをちょちょいと修正するのが良いと思います。
| 全体の雰囲気 ・シンプル/かわいめ/おしゃれ/シック など… →使いたい色やフォントの雰囲気など |
| トップページの全体構成 ・1カラム（よくある。作るのも簡単でおすすめ） ・2カラム（パソコンで見た時に左側にメニューがあるなど左右に分かれているタイプ。スマホで見ると1カラムに変わったりする） →構成については「テンプレートを使う」でも詳しく書いています。 |
| 画像の有無 ・画像なし（初心者の場合はこちらがおすすめ） ・大きな画像があるタイプ（どどーんと） ・小さな画像があるタイプ（ちょこんと） →画像については「素材について」でも詳しく書いています。 |
| トップページに載せるもの ・メニューだけを掲載するシンプルな構成（一番かんたん） ・トップページに説明文を載せる ・トップページに説明文・小説分岐まで載せる |
作るページの種類を決める
夢小説サイトを作るのなら夢小説を載せるページは必須ですが、それ以外はあってもなくても大丈夫です。
個人的なおすすめ構成は夢小説ページ（Main/book）＋更新履歴＋注意書き＋カウンター＋拍手です。
ブログについてはツイッターやtumblerなど別サービスを利用する人もいますね。自分が作りたいページがどれなのか確認しておきましょう。
夢小説ページ★
夢小説サイトをやるのなら必須ですね。
小説機能は初めての場合はちょっと戸惑うことがあるかもしれませんが慣れれば大丈夫です。
| 作り方 編集画面の「機能管理」→上の方「機能作成」→「小説」を選んで次へ→ 必要ならタイトルを修正（dream/main等）、色を選ぶ（後から変更可能です） →「作成する」→小説ページが出来上がりました |
注意書きページ
トップページに注意文を載せない場合は作成することをおすすめします。書く内容は「無断転載しないでね」「公式とは関係ないよ」という内容や、人によっては「成人向けの内容を含むよ」といったことです。
| 作り方 編集画面の「子ページ管理」→「新規ページ作成」→タイトルを入力して「作成する」 →子ページが出来上がりました |
更新履歴ページ
日々訪問してくれる方は「前回見た時から更新があったかな？」ということが気になるので、更新履歴ページはあった方がいいです。
更新履歴の追記に返信を書いたり、長い文章を書く「memo」「Blog」等のページを別途設けたりするパターンがありますね。
「memo」「Blog」等も更新履歴と同じように作ります。
| 作り方 編集画面の「機能管理」→上の方「機能作成」→「ブログ」を選んで次へ ①必要ならタイトルを修正する（blog/memo等） ②レイアウト（日記風/リアルタイム風）は簡単に言うと 日記風→タイトル&本文（ブログみたいに使いたい人向け） リアルタイム風→ツイッターみたいな感じ（短文向け）です。 ③色を選ぶ（後から変更可能です） →「作成する」→更新履歴ページが出来上がりました |
アルバムページ
もしイラストや写真など画像をたくさん掲載したい場合はアルバムページがおすすめです。ただ、普通の夢小説サイトでは使う機会は少ないかと思います。
夢絵などを描く人向けですね。
| 作り方 編集画面の「機能管理」→上の方「機能作成」→「アルバム」を選んで次へ→タイトル・色などを設定して→「作成する」→アルバムページ出来上がり |
その他、便利な機能
カウンター
カウンターを使えば訪問者数が簡単にわかります。
カウンターはとても簡単に使えます。使っている人も多いですね。
| 作り方 編集画面の「機能管理」→上の方「機能作成」→「カウンター」を選んで次へ →タイトル等変更したい場合は修正（基本はそのままでOK）→作成するで作成完了 カウンターはタグ（#ac1_total# みたいなの）をページに貼ることで訪問者数をカウントすることができます。 こちらでも詳しく説明しています。 |
フォーム
お問合せフォームです。フォームに連絡があった場合はメール通知も来ますが、ナノ上のフォーム履歴は30日で消えてしまうのが欠点です。
感想を送ってもらう場合は次の「拍手」機能の方が使いやすいと思いますが、メールで受け取りたい場合はフォームメールを使うのも良いでしょう。
| 作り方 編集画面の「機能管理」→上の方「機能作成」→「フォームメール」を選んで作成する |
拍手/clap
夢小説サイトでよく見かけるヤツです。テキスト記入欄で感想を気軽に送れます。デフォルトでは一行しか送れないのが難点ですが、ナノ上の履歴も残るのでおすすめです。
| 作り方 編集画面の「機能管理」→上の方「機能作成」→「拍手」を選んで作成する |
画像を使いたい
ナノで画像を使う場合は以下の二段階が必要です。
- 使いたい画像をアップロードする
- アップロードした画像の「貼り付け用タグ」または「URLタグ」を使って貼り付ける
使いたい画像をアップロードする
編集画面の「素材管理」→上の方「素材アップロード」からアップロードできます
アップロードした画像は「素材管理」ページに表示され、それぞれクリックすると「貼り付け用タグ」「URLタグ」が確認できます。
それぞれのページ・機能を作りこんでいく
各機能の使い方は、既にYahoo知恵袋などに質問もあるので、調べたり触ったりしながら作っていくのも楽しいと思います。
ここではデザイン面について書いておきたいと思います。
テンプレートや素材について
上記で作成したページ・機能は基本、ナノの公式テンプレートが適用されています。
こだわりがなければそのまま使っても良いですが、せっかくサイトを作るのならもっといい感じにしたいかと思います。
一から作成することも可能ですが、そういった知識にあんまり詳しくない、またはもっと手っ取り早く作りたい、という人も多いでしょう。
そんな人を助けてくれるのがテンプレート・素材配布サイトです。
具体的には？
テンプレートとは初めから型が出来上がっているもの。お手本のようなものですね。
素材とは基本画像（写真・イラスト・テクスチャ/模様のようなもの）やお題（いい感じの言葉、ポエム）です。
それぞれ「自由に使ってもいいよ」または「〇〇を条件に使ってもいいよ」と配布して下さっているサイトがあります。
各サイトで配布されているテンプレート・素材をお借りすることで比較的簡単に、見栄えのいいサイトを作れます。
テンプレートはこれもおすすめ！
ナノの場合は、ナノの中で配布されているテンプレートというものがあります。
これがとっっっても簡単で便利です！
| ナノの中で配布されているテンプレートの探し方 トップページの場合は編集画面の「トップページ編集」→「テンプレから探す」と進むと、いろんな人が作ったテンプレートがあります。（トップページ以外も似た感じです） 好きなものを選んで下の方「これにする」をクリックすると簡単に適用できます。 初めての方はぜひお試しください。 （ちなみに「LOUIS VUITTON ブランド コピー店」みたいなやつはスパムです。押しても危険はないですが、無視しましょう） |
ここでひとつ注意点があります。
テンプレートを新しくすると、今まで編集していたものがすべて消えてしまうことが多いです。もし残しておきたい場合は、メモ帳やメモアプリに元の文章を残しておきましょう。
テンプレート・素材配布サイト
ただしサイトを作っていると「もっと違うデザインにしたい」「いろいろな素材を使いたい」となってくるでしょう。
そんなときに役に立つサイトをいくつかご紹介します。
デコヤ（画像配布サイト）
ナノと同じ運営元が運営している画像配布サイトです。
ナノで使う場合にはリンク不要、独自タグ（#sozai2233_w# みたいなの）を貼り付けるだけで簡単に画像が表示できる！というとてもありがたいサイトです。
生徒会長はxxxがお好き（ランクサイト）
上記はいろんなサイトをまとめた「ランクサイト」です。
上のサイトのうち、画像・素材についてはこちらで確認できます。
各サイトの素材やテンプレートを使用する場合は規約・ルールを必ず確認しましょう。
| テンプレートの使い方 各サイトで「全体レイアウト」「HEAD」といった長いコードが配布されています。 そのコードをコピー→自分のサイトの編集したいページの編集画面「全体レイアウト」や「HEAD・HTML詳細」の「HEAD内」にそのまま貼り付けます。 貼った後は、「全体レイアウト」で文言を変えたい部分などを修正します。 |
| 素材の使い方 デコヤ以外の素材を利用する場合は、まず素材を自分の端末に保存します。 その後、「画像を使いたい」で説明したように画像をナノにアップロードし、専用のタグを貼り付けて画像を使います。 ちなみに画像のサイズを調整したい場合は、専用のアプリ等でトリミングするほか、「HEAD・HTML詳細」の「HEAD内」で調整する方法があります（CSSに関する知識が必要です） |
各機能を作り終わったら……
それぞれのページ・機能が出来上がったら、各ページを行き来できるようにリンクをつけます。
具体的には「前のページに戻る」「トップに戻る」だったり、トップページから各ページに行けるようにしたり、と設定していきます。
リンクについてはHTMLの知識がちょっとだけ必要になるので最後に説明しておきます。
全体レイアウトのポイント！
ナノの全体レイアウトは「HTML」というルールを使って書いています。
HTMLは、以下のような特徴があります。
- 整えたい部分をタグで囲む
- タグというのは＜＞で囲ったアルファベットです。例えば…
- <h1>サイト名</h1>
- <h2>informaiton</h2>
- <div>ここに説明を書きます！</div>
- みたいな風に<〇〇>と</〇〇>をセットで使います。
- タグはページ上には表示されません。
- リンクもタグで囲む
- リンクしたい場所は以下のタグで囲みます！
- <a href=”ここにURLを書く”>main</a>
- ↑の場合はmainを押すと””内に書かれたURLにリンクできます。
HTMLで調べるといろんなサイトが出てくるので、興味が出たら調べてみるとサイト作りが楽しくなると思います。
作り方を見てきました
というわけでナノでサイトを作る場合に決めることなどをざーっと見てきましたがいかがだったでしょうか。
初めての場合はやるべきことが多くて混乱するかと思いますが、実際に操作していくと簡単に設定できます。
なのでまずナノにユーザ登録して、てきとうなテンプレートを適用して、カスタイマイズしながら試行錯誤するのがおすすめです。
詳細は時間があれば別途記事を作成していきますね。
ひとまずはここまでお疲れ様でした！ぜひナノでサイトを作ってみてください！
フルカスタムホームページ nano