初めに
本記事は、小渕リツ子が運営している個人サイトの作成過程を備忘録代わり＆個人サイトおすすめ用に記録するものである。
対象ホームページ
- 創作サイト：にとんぜぽ
- 同人サイト：と、どこか。
- ブログ：なかったことにしたこと
ホームページ概要
- サーバー：スターサーバー
- 言及システム：HTML/WordPress
ものすごく簡単な用語解説（確証なし）
- HTML：ホームページのデータファイルの形式の一つ。絵をかいてjpg形式にしてインターネットに画像をアップロードするように、情報を入れて中身を作った後にhtml形式にしてアップロードする。専用の書き方があり、それを覚える必要がある。
- WordPress：ものすごく機能が豊富なブログサービス。はてなブログやFC2,amebaブログなどはいわゆる「ブログ記事」を載せる専用の形式しか存在しないが、WordPressはそのほかに「固定ページ」を作る機能があって、それのおかげで、固定ページでイラストや小説を載せ、ブログページでブログ記事を更新する、ということができる。また、RSS配信も自動でついてくるなど、便利なサービスである。筆者のブログページはwordpressを使用している。固定ページサンプル→免責事項
①個人サイトの作り方についての記事・書籍を読む
私はツイッターで見かけた素敵な絵を描かれる方が「個人サイトいいよ」という記事ののちに簡単な作り方の記事を上げてくださっており、それを読んだのがきっかけで個人サイトを整備しようという気持ちになった。しかし、詳細な作り方はわからなかったため、インターネットの集合知に頼って作り方を調べることにした。
参考サイト
- do
- その他、個人が有志で書いている記事（個人サイトのためリンクなし）
- 検索ワード：個人サイト 同人サイト 作り方
最初の挫折ポイントとして、「『地味でシンプルな作成ハウツー記事』が存在しないOR検索除けをしておりグーグル検索では見つかりにくい」というものがある。私は正直、「どんどんpvを稼ごう！」というようながつがつした記事特有の書き方が苦手である。やたら長いタイトルとかも。しかし、SEO対策など、検索に引っ掛かりやすくするためにはこのような手段をとるのが王道のようで、たいていの親切なハウツー記事は、親切だからこそ、このような文体になる。
複数窓で記事をあっちこっち行くのが手間で、またそのようながつがつしたタイトルを見るのもげんなりするため、書籍を購入することにした。
参考書籍
- 個人サイトを作ろう！ テンプレートですぐできる！すぐに身につく！HTML&CSS
こちらは、上記のサイト「do」の管理人さんが執筆したもので、内容としては、「do」において記事化されているものが、より基礎から、親切に、がつがつした文体を脱いで、まとめて書かれている。私はこの本をもとにほぼすべての工程を終えた。HTMLやCSSのやや複雑なコマンドは検索をして補完する形をとった。こちらのいいところは、pv数を稼ぐのが目的ではない「個人サイト」を作成することを前提に書かれているため、ビジネス寄りながつがつした文体がないことである。索引も存在し、目次も豊富であるため、わからないところはすぐに引ける辞書的な役割も果たしてくれる。
②レンタルサーバーを選ぶ・契約する
ホームページの中身は、データファイルである。「個人サイト」自体は究極サーバーを借りずとも作成できるのであるが、その場合、自分のPCないしUSBなどの外部メモリを使用しなければ見ることはできない。すなわち、インターネットの海に流すことができないのである。
ここが挫折ポイント２となるだろう。サーバーを借りる、借りなければ公開できない、というのが、pixivやTwitterなどのプラットフォームに慣れていると感覚的に納得しにくい。しかし、まあpixivもTwitterもアカウントを作成しなければ作品を発表できないわけで、そのアカウントづくり、と考えてみることにした。
では、契約するレンタルサーバーを選ぼう。ここ挫折ポイント３だ。なぜならさまざまなレンタルサーバーサイトの印象が「がつがつしている」だからだ。「がつがつしてるって何？全然普通じゃん」って思っている人はまじで個人サイト作ったりコーディングしたりする適性が高いと思うので読み飛ばしてください。
そういうがつがつしたものを練り歩くのが嫌だったので、わたしは最初のきっかけとなった記事の書き手さんが使用しているスターサーバーのライトプランに契約した。大胆にも複数年契約である（そのほうが月額比でやすくなるので）。しかし、その後もうちょっと考慮しといたほうがよかったなってことがあったので、ここに書いておく。
スターサーバーライトプランの概要
- 容量（どのくらいのデータを上げられるか）：160GB
- ドメイン（違うURL母体のサイトをどのぐらい作れるか）：50個
- 無料ドメイン（スターサーバーオリジナルの無料ドメインをどれだけ使えるか）：3個
- wordpress使用：可
- MySQL5データベース（wordpressをいくつのドメインに対して使えるか）：1個
太字の部分について簡単に解説していく。
ドメイン数・無料ドメイン数
ドメインとは、「〇〇〇.com」の〇〇〇の部分の文字列のことを言う。ホームページのデータを入れるフォルダーの名前と考えるとわかりやすいと思う。インターネットの海にサーバーに乗って漕ぎ出し、ドメインという形で場所をとって、そのフォルダーの中にホームページのデータを入れるとインターネットにホームページを公開できるという仕組みだと私はとらえている。
自分のパソコンやUSBであれば、フォルダーの名前は勝手につけられるが、それは自分がパソコン・USBを買っており、ほかに使う人がいないからである。多くの人が自分のデータを公開するインターネットでは、ドメインの名前はかぶってはいけないし、場所を借りるにもお金がかかる。
スターサーバーのライトプランのドメイン：５０個というのは、利用者がそれぞれ借りたドメインを５０個までなら置くスペースを確保できますよ、ということだ。ドメインを５０個くれるということではないことに注意されたい。
で、ドメインを取得する話である。これは、ほかの人が使ってない文字列であれば年額50~1000円くらいで契約できる。ここ挫折ポイント5。サーバーも借りたのにまた契約か…となるのである。そこで、私は無料ドメインを使用することにした。
スターサーバーは「ネットオウルのドメイン」というものを提供している。そこでドメインを借りると、「好きな文字列.指定の文字列.jp」という形でドメインをとることができる。
https://nitonzepo.sometime.jp/
https://kozeniand.folder.jp/
この場合、「nitonzepo」「kozeniand」が好きな文字列、「sometime」「folder」が指定の文字列である。スターサーバーライトプランでは、このような形で無料ドメインを３個まで取得できる。
違うサイトを作りたい場合は別のドメインをとらなくてはならないのか？
上記で、私は創作サイトと同人サイトで別のドメインをとっていることがわかるだろう。これは当時なんとなく違うURL文字列のほうがいいと思ってそのようにしたのだが、ホームページファイルをアップロードする場所が分けられるという利点があり、やはり別のドメインをとってよかった、と思っている。
ドメイン名をフォルダー名ととらえなおすと、同じドメインに複数のサイトのファイルが存在することで、やや混乱する可能性がある。
ただ、上記の内容はあくまでこのような形で無料ドメインを使用する場合に限る。契約をして独自ドメインを取得すると、サブドメインというものが設定できるため、１つのドメインを契約して、サブドメインを使うことで、複数のサイトを運営できる。
サブドメイン
独自ドメインを取得すること、サブドメインに関する利点はdoの以下の記事にまとまっている。サブドメインに関するところを引用する。
サブドメインを使えば別のサイトも運用できる
独自ドメインを取得すると、そのドメインのサブドメインも利用できるようになります。
サブドメインとは、例えば「sample.com」というドメインを取得した場合、「aaa.sample.com」とか「bbb.sample.com」のように、本来のドメインの前にさらに好きな文字列を付け足したもののことです。
当サイトでは「gt-gt.org」という独自ドメインのサブドメイン、「do.gt-gt.org」を利用しています。さらに、EASELデモサイトは「easel.gt-gt.org」、WordPressサイト制作支援メディアACTでは「wp.gt-gt.org」というサブドメインを利用しています。
ドメインが異なるサイトをいくつも運営していると、サイトごとに別のサーバーを利用しているように見えますが、実はこれらのサイトは全て同じサーバーで運営しています。ひとつのサーバーに対していくつものサブドメインを関連づけることができるのも、独自ドメインの魅力です。運営しているサイトごとにサブドメインを割り振れば、それぞれのサイトが独立しているように見えて、オンリーワン感が強まるのでおススメです。
このように、ドメイン名は制作者にかかわる独自のものにして、サブドメイン名をサイト名にする、という手法があるようである。
スターサーバーライトプランだと、実質無料で作れるサイトは３個まで
上述の通り、スターサーバーライトプランで取得できる無料ドメインは３個であり、それらのドメインにサブドメインを作ることはできないため、URLが異なるサイトは３個までしか作れない。ジャンルごとにサイトを分けたい人などは、独自ドメインの取得を考えてみてもいいだろう。
MySQL5の数＝Wordpressが使用できるドメイン数
wordpressが使えるし、ドメインも複数個とれるんだから、すべてのサイトでwordpressが使えるのかな、と思うとそうではない。詳しくないのでここは特に私独自のとらえ方だが、この、MySQL5データベースの数は、すなわち、wordpressが使用できるドメインの数である。したがって、スターサーバーライトプランでは、一つのドメインにしかwordpressを使用できない。
はじめ、すべてのサイトをwordpressで作る気満々でネットオウルのドメインを取得してしまった私は、ここが挫折ポイント6となった。創作サイトと同人サイトのどちらをwordpressにするか悩んだ末、HTMLを勉強し、そこではカバーできなかったブログだけwordpressを使用するため、創作サイトのドメインにwordpressをインストールし、リンクを両方のサイトにつなげるという形をとった。
これは確証がないが、もしかしたら独自ドメインを取得してサブドメインでサイトを分ける使用にすれば、すべてのサイトでWordpressを使用できるのかもしれない。やっている方がいたら教えてほしい。
その他考慮すべき点
- 成人向け表現の規制の度合い
- 同人表現の規制の度合い
- SSL設定(https://にできるかどうか)
- .htaccess（リダイレクト機能）が使えるか
- cgi（てがろぐなどのシステム）が使えるか
予算に合わせて好きなものを選ぶといいと思う。
気になっているレンタルサーバーサービス
-
同人・創作サイト専用レンタルサーバー「WitchServer」
二次創作・R18制限に関して規制がない。これはサーバー単位で規制はしないというもので、実際訴えられたからといってこれを盾にできるわけではないのだが、こういった明言がなされているサーバーは少ない。また、サブドメインが無制限というところから、無料で複数個URLの異なるサイトが作れるのだと考えられる。データベース（MariaDB）数も無制限というところから、wordpressも複数ドメインに読み込めるのだろうか？5GBという容量が値段の割にかなり少ないため、その点ちょっと予算との兼ね合いがある。
-
やや割高だがサービス充実「さくらのレンタルサーバ」スタンダードプラン
年齢制限表現に関する規制の明言がある。WordPressのデータベースも50個ということで、複数のサイトでWordPressが使え、またモリサワのwebフォントが使用できる。しかし、無料独自ドメインが2つのみであり、異なるURLのサイトは2（+1）つしか作れない。月額換算420円～など、やや高額であるところも難点だ。ちなみに、さくらサーバのスタンダードプラン月額換算128円～だと、WordPressが使えない。悩みどころである。
- その他参考サイト
わたしはサーバーをあんま考えずに契約してしまったのだが（しかも複数年）、結構大事なので慎重に選ぼう。
③サイトを作ってみる：使うシステムを選ぶ
まあWordPressを使うかHTMLを使うかをきめる、ということである。
筆者の管理するサイトは、以下のような形になっている。
- 創作サイト：基本HTML/ブログのみwordpress
- 同人サイト：HTML
全部HTMLorWordPressにしないのはなぜ？
なぜ統一しないのか、という点については、以下の理由がある。
- wordpressが複数ドメインで使えなかったから
- wordpressが少し使いにくいから
- ブログをHTMLで作成するのが難しかったから
- HTMLだと、ページごとにデザインを変えられるから
一つ目に関してはすでに述べたので言及しない。
WordPressは使いにくい？
便利なサービスであるのだが、便利だからこそコマコマとしたところが気になってしまう。以下のような点が気になる。
- 英語での使用が前提となっていることが多く、翻訳調であったり、翻訳機能を使う必要がある。
- サイトデザインを決定する「テーマ」が膨大かつ、おしゃれすぎており、個人サイトのようなこじんまりとしたものに向いているものが少ない。
- それぞれの機能に関する有料プランへの広告が頻繁に来る。
のようなものである。おしゃれで洗練されたサイトを作りたければ向いているのだと思う。ここで本記事を通して使う謎用語を使うが、wordpressは全体的にテンションががつがつしているような気がして、気後れする部分が大きい。
ブログをHTMLで作れなかった
厳密に言うと、ブログ記事自体を作成するのは結構簡単にできるのだが、「カテゴリ別」「月別」アーカイブの作り方がわからなかった…。WordPress他ブログサービスでは、多分その記事に記載されているカテゴリーのリンクをポンと押せば同じカテゴリーの記事が並ぶのだが、あれってどうやるんだろう…「ブログ HTML 作り方」で検索してもめぼしい記事が出てこないので、私の旅は続く…。
ページごとにデザインが変えられるHTML
おそらく、WordPressでは基本的に一つのサイトで一つのデザインを使うことが前提とされている。だから、このページはこのテーマ、このページはこのテーマ、と変えるのは難しい。不可能ではないらしいが、たぶん王道の使い方として想定はされていないだろう。
しかし、HTMLでは、それぞれのファイルに記載された内容を反映するだけなので、別のCSSと連携させたデータをアップロードすれば、デザインが違うページを同じサイトに共存させることができる。
こういうところはHTMLの利点といえる。いいとこどり、というか、できないところ補い、という形で、わたしはHTMLとWordPressの両方を使用している。
④サイトを作る：作り方を読む（再）
作り方を読む。私は大体冒頭に示した書籍を頭から読んだ。
⑤サイトを作る：テンプレートを探す
各サイトの仕様テンプレートは以下の通り
- 創作サイト：上記書籍の特典テンプレ―ト「BASIC」
- 同人サイト：peta2
- ブログ：write → Adventurous
- booknook告知サイト：Simple slider
だいたい「do」に頼りっきりである。HTMLファイルの中にどこをいじったらどう変化するかという説明が逐一書かれていて使いやすいイメージ。上記書籍は特典テンプレートに沿った解説も載っていたので、それに従っていじっていた。
こんなテンプレートのまとめサイトが存在する。選んでみても楽しいかも。
⑥サイトを作る：中身をつくる
HTMLファイルを編集してひたすらコンテンツを作る。創作サイトのコンテンツは以下の通り。
- 創作サイト「にとんぜぽ」
- トップページ
- メインビジュアル
- サイトタイトル・概要・注意事項
- 更新履歴
- 展示物内容
- リンク
- 自己紹介
- サイドバー：サイトマップ
- イラストページ
- 創作絵
- キャラ化の絵
- TRPGの立ち絵
- 読み物ページ
- 嘘日記
- 書き物：小説・手書き日記
- プライバシーポリシー
- 問い合わせ
- トップページ
使用ソフト・導入プログラム
-
VScode
HTML/CSS/js/htaccessが編集できるソフト。無料。追加プラグインでプレビュー機能あり。
-
fuwaimg
本サイトで画像が画面遷移せず拡大表示できるのはこれのおかげ。もう少し大きくなってほしい。
-
いいねボタン改
ぽちっと押せるハートボタン。告知ページの部数アンケートもこれ。
-
MailForm01
おたより箱に使用。
-
てがろぐ
寝言に使用。スキンはskin-minimal。
⑦サイトを作る：その他もろもろ
- ファビコンを設定する
- RSS配信をする
- サイトドメインのメールアドレスを作ってメールフォームを機能させる
- サーチに登録してリンクを貼る
使用プログラム
⑧サイトを公開する
サーバーサービスから一つずつアップロードもできるが、FTPクライアントソフトを使用することで一気にアップロードできるので、それを使用することにした。
使用プログラム
⑨WordPressのこまごましたもの
主にHTMLについて話したが、WordPressのこまごましたことについても話す。
使用プラグイン
-
AddToAny Share Buttons (シェアボタン)
これ。シェアボタンを設置できる。 -
Classic Editor
なんか編集するのに便利。
-
Easy Table of Contents
これ。目次を挿入できる。 -
FooBox Image Lightbox
これ。画面遷移せず拡大表示できる。 -
まろやかWEB拍手 for WordPress
これ。画面遷移せずお礼イラスト表示や定型文、メッセージ送信ができる。 -
SEO SIMPLE PACK
こんな風にTwitterカードを表示できるもの。 -
Simple Author Box
これ。私はこれをサイドバーウィジェットの先頭に置くことで、スマホから見ると記事を読んだ直後、パソコンからだと右上という見やすい位置にこれが表示されるようになり、それぞれのサイトに飛びやすくなるか？と思って設置した。 -
Simple Blog Card
こんな風になるやつ。埋め込みできないサイトもこういう感じにできるし、デザインが統一されていい。
ちなみに、WordPressの記事を普通に埋め込むと以下のようになる。
-
WordPress Popular Posts
これ。人気記事を表示できる。 -
WP Dark Mode
これ。ダークモードにできる。 -
Yet Another Related Posts Plugin (YARPP)
これ。各記事の下に、タグやカテゴリやタイトルから検出された関連記事が記載される。
その他微調整
タグの文字の大きさを統一した
これに関する話。記事数に応じて文字が大きくなったり小さくなったりするのが嫌だったので、文字サイズを調整した。
こうすると全部同じサイズになる。
免責事項を書いた
固定ページ機能を使って免責事項を書いた。
あとはここに書いてある。気になる人は読んでみてください。
個人サイトを作るうえでの心意気
個人サイト、どうにかこうにか作れるものである。しかし、どうにかこうにか作るために、大切なことがある。
わからないことが多いことを受け入れる
わからないことが多い。新しいゲームの説明書を読まずともいくらか操作できていた生活を送っていると、個人的にはやる作業の多さよりこれがきついんじゃないかと思われる。挫折ポイントの根幹である。しかし、やってこなかったことはわからないことが前提だ。これを受け入れて、観念してチャレンジする心意気を持っておく必要がある。
調べる・読む・やってみる
書籍を読む。検索をする。気に入る記事が出るまで検索ワードを変える。読む。やってみる。うまくいかない。もう一度読む。やってみる。このPDCAサイクルをぐるぐるぐるぐる回すこと。たいてい一度ではうまくいかない。HTMLのコマンド入力はもちろん、慣れないうちは検索して目当ての記事を出すのも難しい。とにかくdo do doである。doさんのサイトタイトルの由来が少しうかがえてしまうほど、doだらけの営みである。とにかく、うまくいかないということは何かが間違っているということなので、参考資料を探し、読み、やるということが重要だ。
個人サイト作りをやってよかったこと
新しいことに安価でチャレンジできた
自分語りをすると、ずっと勉強をし続けていて、そういう進路を進んでおり、部活動やサークルなども小学校時代から慣れ親しんだ分野で、絵も物心ついた時からずっと描いており、冗談抜きで15年以上、自動車免許取得以外で「まったくやったことがないこと」にチャレンジしたことがなかった。そして、大人になると何をやるにも金がかかる。新しいことを始めるには、精神的にも金銭的にもハードルが高くなっていく。
その点、個人サイト作りは未知でかつ安価に新しいチャレンジができる。教室へ行くなんて言ったらサーバーレンタル代の比ではないだろう。そういう意味でお得な趣味である。
戦いの中で成長できるが、それが数字に表れない
自分の学びの度合いによって、できることがどんどん増える。私のサイトもとりあえずここを安息地点としているが、アニメーションを追加したり、もっとおしゃれなレイアウトにしたりなど、自分が学べばやれることは増える。
これのいいポイントは、それが数字に即時に表れないことだ。例えば、絵であれば人気のジャンルにはまる、絵がうまくなる、作品を熟読して独自の感性で絵が描けるようになる、などの成長が、結構数字に出がちである。それが張り合いになることもあるが、手段と目的がごっちゃになってしまうこともある。しかし、例えば今、私のサイトでアニメーション機能が実装されたとしても、それが原因でアクセス数が即時に増えることはないだろう。そういう、「どこまでも自己満足」という範囲が保たれており、「たのしいからやるんだ」という範囲で遊ぶことができる。
あたたかい反応を大切にできるようになった
個人サイトに来るというのは、意思が必要だ。ログインしたら自動的に作品が流れてくるわけではない。わざわざサーチをめぐり、もしくはブックマークをし、「このサイトに行くぞ」という気持ちがないと来ない。ツイッターのようにアカウントが見られるわけではないのに、より「人」を感じることができる。そしてTwitterに足をのばした時も、いいねを数字ではなく、人として認識できるようになる。いつもありがとう、みんな…。
自身の中の評価軸が増えた
いままでTwitterが評価軸の主軸であったが、そこにもう一つ太い軸として個人サイトが追加された。Twitterはすべてではない。当たり前かもしれないが、理屈として知っていても実感するのは難しい。Twitterで評価されなくても、おもしろがってくれる人がいる、その逆もある。そういうことで、自分のアウトプットを多面的にとらえることができるようになる。
ひとり遊びが上手になってきた
個人サイトは、ひとり遊びに最適な場所である。今まで、amebaからTwitterへと、とにかく、人とつながるSNSをやってきた。私のインターネット生活は、他者とつながるのが前提であり、他者からの反応が欲しくてやるものだった。絵を自分のために描くより、リクエストをもらって描くほうが好きだったし、すごくひとり遊びが苦手だったのだと思う。個人サイトを作ることを通して、「自分が楽しいからやる」という感情を獲得し、絵を描くテンションも変わってきた。自分のために、いろいろやっていくぞ！
個人サイトのススメ
誰も私を見ていないんじゃないか、SNSで簡単にみられるから見てるだけじゃないのか、自分には価値があるのだろうか、そんな風に考えてSNS疲れをしている人がいたら、もしよかったら個人サイトを作ってみてほしい。あなたの作品にたどり着くハードルを少し上げることで、それでも来てくれる人の存在をとても大事に抱きしめられるようになるかもしれない。そして、人の目を気にせず自己開示をできる場所を手に入れることで、自分も大事にできるかもしれない。私は大事にできるようになりました。
個人サイトを持っている方へ
世の中にはたくさんのハウツー記事が存在する。しかし、それぞれの文体が自分に合わないなどで、個人サイト作りに興味がありながらも、一歩を踏み出せない人たちがいるかもしれない。もしよければ、あなたがどうやって、何を参考にして、個人サイトを作ったのか、書いてみるというのはいかがでしょうか。あなたのサイトを好んでみている方は、あなたの文体が性に合っているだろうから、あなたの文体なら、個人サイトの作り方を知ることができるかもしれません。私は、好きな作家さんのハウツー記事がきっかけでした。そんな風に、誰かのきっかけになるかもしれません。
リンクOKです
この記事に関して、誹謗中傷目的でない限り、リンクの規制はありません。個人サイトなので個別記事にリンクを貼ってもいいものか悩む場合があるかもと思って記載します。何かの参考になれば幸いです。
感想・訂正などありましたらweb拍手などからご連絡ください。
こんなサイトができます
以下、私のサイトを貼って、この記事を終わろうと思います。
【宣伝】嘘日記再販しています。
よろしくお願いいたします。
参考資料
