創作・同人サイトの作り方!サーバーのレンタルからサイト公開までの全手順

創作・同人サイトの作り方!サーバーのレンタルから公開までの全手順

今はSNSでも気軽に作品を公開できる時代ですが、個人サイトには個人サイトの魅力があります。これから初めてサイトを作る方・作りたいと思っている方も少なくないでしょう。

そこで、初めての方でも迷わずサイトを作れるように、htmlテンプレートを使ってサイトを制作する場合の、サーバーを借りてから公開するまでの手順をまとめました

なお、サイトを作る方法はこの記事で紹介するもの以外にも、主に2つあります。もしこの記事を読んで「自分にはできなさそうだ…」「思ってたより面倒くさそう」と思ったら、別の方法も検討してみてください。

サーバーをレンタルしよう

まずはサーバーがなければ何も始まりません。無料のサービスもありますので、とりあえずサーバーを借りてみましょう。

そもそもサーバーって?

サーバーとは、インターネット上の土地のようなものです。例えば、新しくお店を開いたり、家を建てたりするには土地が必要ですよね。それと同じで、ネット上にサイトを公開するにはまずサーバーを確保する必要があります。

土地に「広さ」「利便性」「地域色」「値段」がいろいろあるように、サーバーにも「容量」「使えるプログラム」「利用料金(無料のものもあります)」など、いろいろな特色があります。

創作・同人サイトで使えそうなサーバーをまとめた記事がありますので、参考にしてください。

いろいろあって「どれ選べばええねん……」と思うかもですが、初めてサイトを運営する場合は、まず無料サーバーの中から好みにあったものを選べばOK。とりあえず運営してみて、サイト運営が楽しくてもっとガッツリやりたくなったら、有料サーバーに移行してもいいでしょう。

試しにファイルをアップロードしてみよう

サーバーを借りたら、まず試しに自分でhtmlファイルを作り、アップロードしてみましょう。

パソコンに付属のメモ帳アプリを開き、適当な文字列を打ち込んで、「index.html」という名前で保存して下さい。

訪問者がサイトにアクセスしたとき、最初に参照されるのがindex.htmlです。「http://xxx.xxx.jp/」というURLへジャンプしたときに表示されるページは、「http://xxx.xxx.jp/index.html」と同一であり、アドレスの「index.html」の部分が省略して表示されています。これはインターネット上で共通のルールなので、必ず「index.html」と名付けたファイルをトップページとして作りましょう。サイト内に「index.html」がない場合、セキュリティ上の問題が出てくる場合もあります。

はじめてのサイト作り
iPadアプリ「Textastic」で打ち込んでいます

保存したら、それをサーバーにアップロードします。

たいていのレンタルサーバーサービスでは、ブラウザ上で管理画面にログインすると「FTPアップロード」とか「ファイルマネージャ」みたいな名前で、サーバー上にファイルをアップロードするツールが用意されています。ここは、サービスによって違うので、分からなければ「サーバー名+ファイルアップロード」などで検索し、調べてみてください。

アップロードしたら、自分のサイトに割り当てられたアドレスに、ブラウザからアクセスしてみてください。index.htmlに打ち込んだ文字列が表示されていたらOKです。

はじめてのindex.html
サイト作りの第一歩です

こんな感じで、htmlファイルを編集してサイトを作っていくわけですが、ただ文字列を打ち込んでいくだけではサイトは形になりません。htmlというマークアップ言語のルールに沿って制作しなければ、ただ黒い文字が羅列しているだけの味気ないサイトになってしまうのです。

かといって、素人がいきなりhtmlの書き方を勉強しようとすると、きれいなサイトを作れるようにまでに多大な時間がかかってしまいます。そこで登場するのがhtmlテンプレートです。

htmlファイル一式を用意しよう

htmlテンプレートとは、あらかじめ完成形として整えられたhtmlファイル一式のことです。すでにデザインが出来上がっているので、html言語の使い方をよく知らない素人でも、サイト名や文章を自分で差し替えるだけで、さほど時間をかけずにオリジナルのサイトを作ることができます。

テンプレートは当サイトでも配布していますし、他にもテンプレート配布サイトがいくつかあります。どれを使うべきというのはないので、デザインが好みのものを探してみてください!

少しアドバイスするなら、慣れないうちは複雑なデザインのものは避けるのが無難です。例えば当サイトでいうと「深海」は、パララックスという機能をつけるためにいろいろと作り込んでいるため、初心者のうちは触らないほうがいいかも。アニメーションが少なく、シンプル・ベーシックなデザインのテンプレートから始めましょう。

お気に入りのテンプレートが見つかったら、必要な箇所を編集し、自分のサイトとして仕上げていきます。テンプレート編集の方法とコツは、以下にまとめています。

編集中のhtmlファイルは、サーバーにアップロードしなくても、動作をブラウザから確認することができます。確認したいhtmlファイルを右クリック>開く>ブラウザを選択すると、お使いのブラウザで実際の表示を確認することができます。

ファイルをサーバーにアップロードしなくてもブラウザ表示が確認できます
ファイルをサーバーにアップロードしなくてもブラウザ表示が確認できます

ミスを防ぐため、少しずつ確認しながら編集を進めていきましょう。

さあ、テンプレートの編集が終われば、もう公開は目前です。張り切っていきましょう!

サーバーへアップロードしよう

サイトが形になったら、いよいよサーバーへアップロードします。

大量のファイルをアップロードするので、サーバーの管理画面からではなく、専用のツールを使ってアップロードすることをオススメします。

無料で使える有名なソフトがFFFTP、FileZillaです。私はFFFTPを使っています。

サーバーの管理画面からサーバー名やパスワードを確認し、これらのソフトに入力設定すれば、ローカルフォルダからファイルを一括でアップロードできるようになります。詳しい使い方は各自で調べてみてください。

アップロードが完了したら、早速ブラウザからサイトにアクセスしてみましょう!意図した通りに表示されていれば、サイト作りは終了です。あとはコンテンツが増やし、サイトを更新していきましょう。やったね!

おわりに

慣れないうちは大変ですが、サイト作りはとても楽しく、取り組みがいのある趣味です。ぜひ、お気に入りの飲み物でもそばに用意して、もくもくと取り組んでみてください。

もし、どこかでつまづいたときは、GoogleやYahoo!などの検索エンジンに頼ってみましょう。検索エンジンは情報の宝庫ですので、きっと解決策が見つかるはず。

サーバーまわりの質問にはお応えできませんが、テンプレート編集に関する質問であれば、当サイトでも受け付けています。困ったときはご活用ください。

あなたのサイト作りが楽しいものになりますように!

創作・同人サイトにオススメのサーバー

スターサーバー キャンペーン中!

オススメ度  star star star star star

スターサーバーでは2021年5月10日まで、すべてのプランの初期費用が無料になるキャンペーンを実施中です!キャンペーン期間中は、月額440円のスタンダードプランより上位のプランを12ヵ月以上で新規契約すると、契約期間を1年分無料延長できるほか、.comや.netなどのドメインが1年間利用無料になります。

使用料 初期費用1,650円無料!
最低月額138円〜
WordPress有は月額330円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ 不可

最低月額138円のローコストで、大容量・高速のサーバーが利用できます。契約中のプラン変更も可能。とりあえず有料サーバーを試したい方にオススメ

スターサーバー

ロリポップ!レンタルサーバー

オススメ度  star star star star star

使用料 初期費用1,500円~
最低月額100円〜
WordPress有は月額250円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ

月額100円から使える、コスパ最強の老舗レンタルサーバー!個性的で可愛いドメインが選べるのも魅力的。当サイトもロリポップ!を利用しています。

ロリポップ!レンタルサーバー

リトルサーバー

オススメ度  star star star star star_half

使用料 初期費用920円
最低月額150円〜
容量 20GB〜
WordPress すべてのプランで可
成人向けコンテンツ

比較的新しいレンタルサーバー。なんと缶ジュースほどの値段でWordPressを安定したサーバーで使える!7日間の自動バックアップ機能もあって、もしものときも安心。個人サイトの新しいスタンダードになるかも

リトルサーバー

さくらのレンタルサーバ

オススメ度  star star star star star_half

使用料 初期費用1,048円~
最低月額131円〜
WordPress有は月額524円〜
容量 10GB〜
WordPress ライトプランのみ不可
その他のプランは可
クイックインストール機能付き
成人向けコンテンツ

自動バックアップなど、安心・快適にサイトを運営する機能が魅力のレンタルサーバー。財布にも優しいのが◎。もちろんWordPressも使えます

さくらのレンタルサーバ

XREA Free

オススメ度  star star star star star_border

使用料 無料
容量 1GB
PHP
WordPress
いずれも使用可

なんと無料ながらWordPressも使える。必要な機能を必要なだけ、シンプルなレンタルサーバー。物足りなくなったら有料プランへグレードアップも可!手軽に始められて、初心者にもやさしい仕様

XREA
レンタルサーバー比較