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

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

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

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

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

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

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

そもそもサーバーって?

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

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

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

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

サーバーを借りたら、まず試しに自分で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!などの検索エンジンに頼ってみましょう。検索エンジンは情報の宝庫ですので、きっと解決策が見つかるはず。

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

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

   【PR】HTML/CSSを基礎から勉強したい方へ

HTML/CSS初心者のための書籍を執筆しました

個人サイトを作ろう! テンプレートですぐできる!すぐに身につく!HTML&CSS

これから初めてHTML・CSSに触れる方や、過去に個人サイトを作ったことがあるけど、最新のHTML・CSSやウェブサイト制作を学び直したい!という方に向けた、創作・同人サイトを作るための本です。
書籍購入者には特典として、「do」でも配布していないオリジナルHTMLテンプレート3種が利用できます。本書では、このテンプレートを実際に自分で編集することでHTML・CSSを学んでいくため、初めての方でも理解しやすい内容に仕上がっています。
「do」では紹介しきれなかった、サイト制作の基礎の基礎から網羅した入門にオススメの書籍です。ぜひお手に取ってみてください!

Amazonで購入する