top of page

サイト制作いろいろ

  • 1月12日
  • 読了時間: 12分

更新日:1月13日

少し前になりますが、SNSのフォロワーさんが「二次創作を展示するために個人サイトを作りたいものの、どのサーバーを借りればいいのかわからない」という話をしてらっしゃいました。


また、Xの規約変更でいろいろあったらしく「Xにはイラストを投稿したくないから個人サイトを作ってみようかな?」という話題をしている方もお見かけします。


更には「個人サイトWebオンリー めぐる市」なんてのも開催されているもよう。


そういったつぶやきを見て思ったのが、自分が個人サイトの運営に利用しているサービスを書いておけばどなたかの役に立つことがあるかも? ということ。


そんなわけで、この記事はそれらを紹介する内容となっております。


私自身は個人サイトを運営していますが、個人サイトはなにかと手間がかかり万人受けするものではないと認識しているため「いまだからこそ個人サイト!」と強くおすすめしているわけではありません。


個人サイトにまったく触れたことがない方ですと、この記事の中で頻出する「サーバー」や「HTML」といった言葉はピンとこないかもしれません。


そういった場合はまず創作・同人サイト制作支援サイト「do.」さんを観覧してみるのがおすすめです。サイトの作り方やサーバーの紹介、テンプレートやプログラムの配布など、ためになる記事がたくさん掲載されています。


以下からの記事は自分が個人サイトの制作に利用させていただいている「Wix」と「FC2ホームページ(以下、FC2)」というサービスの紹介になります。最後のほうにおまけとしてコードエディタも紹介しています。


あくまで自分が利用したことのあるサービスや機能しか把握していないため、もっといいやり方もあるかもしれないという前提でお読みいただけると幸いです。






・WixさんとFC2さんはこういう場合にいいかも


〇無料で利用したい

〇でも広告は無害なものがいい

〇同人サイトを作るぶんには困らない程度の機能は欲しい


自分がレンタルサーバーを探すときに重要視したのがまず「無料であること」。それから「広告がサイトの邪魔をしないこと」でした。


無料のレンタルサーバーの中には広告がかなり目立っているものもあり、サイトの観覧を邪魔したりデザインを損ねるケースも多いです。


そこで見つけたのがWixさんとFC2さん。


私の個人サイトを見ていただけるとわかりやすいのですが、Wixさんは画面の上部に細長い広告が入るだけで目立ちません。FC2さんはPC観覧だと広告なし、モバイル観覧のときは画面の下部にひとつ表示されるという具合です。なおかつ広告の内容がエロ系やグロ系ではありません。


これなら視界に入ってもうざったくなさそう……と感じたため、現在はこれらのサーバーをお借りしています。


3つめの「同人サイトを作るぶんには困らない程度の機能」というのは、自分の場合は「サーバー容量」「一度にアップロードできるデータの容量」「使用できるページやパーツの数が自分にとって必要なだけあるか」ということになります。


サーバー容量はWixさんが500MB、FC2さんが1GBとなっています。数値だけ見るとピンと来ないので最初は不安だったのですが、イラストや小説を掲載するぶんには充分な容量であると感じました。


「一度にアップロードできるデータの容量」を気にしていたのは、私は同人ゲームも個人サイトにアップしたいと考えていたためです。


同人ゲームの中には音楽データも含まれるのですが、これがまあ重いのです。サーバーによってはこの重さが上限にひっかかってしまってアップできない場合もありました。……が、これに関してもいまのところ困ってはいません。


「ページ数やパーツ数に対する機能制限」というのは、サーバーとセットになっていることが多い「サイト作成サービス」にそういった制限がかけられている場合があるためです。Wixさんですとページ数の制限は100Pまでですので、あまり制限を意識せずに利用できています。






wixさんで制作したサイト

画像はいずれもPCから観覧した場合の画面です。



・Wixさんを使ってみていいと感じた点と困った点


〇メアドの登録のみで利用できる

〇無料のうえに広告が地味で無害

〇動きのあるサイトを簡単に作れる

〇テンプレートが豊富に用意されている

〇FTPソフトやエディタは不要

〇アダルトコンテンツ可

△HTMLやCSSは使用できない

△環境によっては編集ページが重い



・とにかくアダルトコンテンツ可なのがありあたい


自分がWixさんを利用している最大の理由が「アダルトコンテンツ可な無料レンタルサーバー」という点です。


日本人向けの無料レンタルサーバーでアダルトコンテンツ可のところはかなり少ないと思われます。文章であればアダルトコンテンツとみなされない場合もありますが、画像の場合はイラストであってもかなり厳しい。


……が、Wixさんはアダルトコンテンツ可なのです。利用するには居住国で定められている成人年齢に達している必要がありますが、エロ二次創作をしている方であれば達しているはずでしょうから問題ありません。



・FTPソフトやエディタは不要


Wixさんは「レンタルサーバー」と「サイト制作機能」と「アップロード機能」がセットになっているサービスのため、それらのアプリをインストールする手間や使い方を調べる労力が省略できます。


Wixさんのような複合サービスではなく、サーバーのみをレンタルする場合はエディタ(Windowsに搭載されている「メモ帳」など)でサイトを編集したあと、それをFTPソフト(フリーウェアの「FFFTP」など)でサーバーにアップロードするという手順が必要になります。


ブログ、メールフォーム、アクセス解析といった機能も別途で登録する必要なく利用できるので、サイト内にそれらを設置したい場合も手軽でいいのではないかと思います。



・HTMLやCSSの知識は不要な反面、それらを使用したくても使用できない


前述したようにWixさんはレンタルサーバーとサイト制作機能がセットになったサービスです。サイトの制作はWeb上にある編集ページで行い、「公開」ボタンを押すとサーバーにアップロードしてくれます。


Webページは任意のパーツをドラッグ&ドロップで配置して作成します。最初は使い方がわからなくて戸惑ったのですが、使い方さえ理解すれば手軽に凝ったサイトが作成できるのでいいなと感じました。



Wixさんの編集画面



左がパソコン観覧用、右がモバイル観覧用の編集画面になります。モバイル観覧用のページはパソコン観覧用のページを作るとそれを元にして自動的に作成してくれるので、あとは細かい部分を自分で調整する形になります。


個人的にはおしゃれなギャラリーが簡単に作れるギャラリー機能が気に入っています。パーツをページに張り付けたあと、アップしたい画像を選択すると左の画像のようにサムネイルを並べてくれて、クリックすると拡大します。



▼ギャラリー機能はこんな感じ



不便に感じたのがHTMLやCSS(Webページをデザインするときに使用する言語)での編集ができない点。


私は以前からHTMLやCSSを使用して個人サイトを制作していたため「このタグを使ってここをこうしたい」と思うこともあるのですが、Wixさんのエディタでは利用できないためもどかしい気持ちになることがしばしばありました。


また、HTMLで制作したサイトのようにページの情報をテキストファイルとしてバックアップしておくことができないため、Wixさんのサービスが終了することがあればここで制作したサイトはすべて消えてしまいます。


HTMLファイルをアップロードできないので外部サイトのテンプレートを使用することはできませんし、「以前のサイトのデータはそのままにサーバーだけ引っ越したい」というのもできません。



・テンプレートはあるものの、Wixさんに慣れている人向けかも?


Wixさんにはテンプレートも用意されているのですが、企業向けなためかやたらデザインが凝っており、趣味の個人サイトには不要と思われる機能(会員登録やショッピングなど)が搭載されているものも多いです。機能に慣れていないうちからテンプレートを使おうと思うと逆に混乱するかもしれません。


よく考えたら自分もテンプレートを使ったことがなかったので試してみました。少し前の記事で書いた「進くん紹介ページ」がそれになります。


テンプレートのデザインをある程度は残しつつ、不要な項目や機能は削除してキャラ紹介ページにしてみました。背景に使用している野球感のある写真はWixさんの素材です。Wixさんには写真、アイコン、イラストなど膨大な数の素材が用意されているので、ほかのサイトから借りてこなくていいのも便利なところですね。






FC2ホームページさんで制作したサイト


画像のページはFC2さんのテンプレートを編集して作成しました。こちらは割とシンプルなデザインのテンプレートが多く、同人サイトにも使いやすいのではないかと思います。


Wixさんでサイトを作成しているのになぜFC2さんでもサイトを作ったかと言いますと、WixさんではHTMLファイルのアップロードができないため、自作の同人ゲーム(JavaScriptというHTMLの仲間みたいな言語で動作しています)もアップロードできないからという理由によります。



・FC2さんを使ってみていいと感じた点と困った点


〇メアドの登録のみで利用できる

〇無料のうえに広告が無害(PC観覧時は広告なし)

〇テンプレートがそこそこ用意されている

〇エディタやFTPソフトは不要

△アダルトコンテンツはアダルト用サーバー以外禁止

△HTMLやCSSの知識はあったほうがいい



・エディタやFTPソフトは不要だけど、HTMLやCSSの知識はあったほうがいい


FC2さんもWixさんのように複数の機能が一体化したサービスです。そのため、こちらもエディタやFTPソフトを別途で用意する必要はありません。


ページの編集をするときは「TinyMCEエディタで編集」と「ソース表示で編集」のどちらかを選択できます。


▼FC2さんの編集画面

左が「TinyMCEエディタ」、右が「ソース表示で編集」の画面。どちらも同じページを編集しています。


「TinyMCEエディタ」はテキストの入力や画像の選択など簡単な操作で編集ができます。操作感はWordやPowerPointに近いと感じたので、それらを使用したことがある方であればなんとなく使い方はわかるのではないかと思います。


文章の変更や画像の差し替えだけでなく、レイアウト自体をいじりたい場合は「ソース表示で編集」からコードを編集する必要があります。そのため、ある程度のHTMLやCSSの知識は必要になるかと思います。


例えば上の見本ページでは横長の背景画像を配置していますが、デフォルトでは画像の縦幅の数値が固定されていて「TinyMCEエディタ」からの編集では横長にできませんでした(画像そのものを横長にしても縦幅は固定されるため横長に表示されない)そのため、「ソース表示で編集」からCSSの値を変更して横長画像にしています。


これらのエディタが使用しにくいと感じる場合は、PCにインストールしてあるエディタで編集したのちに「ファイルマネージャー」という機能でサーバー上にアップロードすることもできます(FTPソフトも使用できます)


「ファイルマネージャー」ではFC2さんの編集画面で作成したファイルを自分のPCにダウンロードすることもできるため、編集ミスやうっかりデータを削除してしまった場合などに備えてバックアップを取っておくことも可能です。


「do.」さんのテンプレートなど外部のファイルを利用したい場合もこのファイルマネージャーでアップロードできます。先に紹介したWixさんと比較すると、コードの知識を要するぶん編集の自由度は高いと言えるかもしれません。



・こんな機能も


自分は利用したことはないのですが、FC2さんには「アルバムメーカー」という機能もあります。ドラッグ&ドロップで簡単にフォトアルバムやWebマンガが作成できるそうですので、イラストやマンガを展示する際に便利そうですね。



・規約がいろいろあるので要確認


FC2さんのサービスは利用するにあたって「これって禁止なんだ!」と思いそうな規約もあるので、きちんと目を通しておいたほうがいいと思われます。以下はその一例となります(一部内容を省略しています)


「サーバーをファイル置き場として利用する行為。トップページからリンクを辿ってアクセスできないファイルが複数ある場合。トップページがindex.html(htm)で作成されていない場合


トップページにパスワード認証をかけ、第三者に閲覧できないようにする行為


他のFC2ホームページ内のサイトからの、直リンクによる画像の外部呼出し行為、及び他サイトへの直リンクによる画像の外部呼び出しを促す行為(バナーを除く)バナー以外の画像を『banner.拡張子』のファイル名で使用する行為


……などなど。






・エディタについて


サーバーの紹介中にしばしばエディタの話が出てきたため、私が使用しているエディタ「Brackets」もおまけとしてご紹介します。


▼Bracketsの編集画面


BracketsはPhotoshopやillustratorで有名なAdobe社が開発したフリーウェアの高機能コードエディタです。海外製のエディタは日本語に対応していない場合が多いそうなのですが、Bracketsは最初から対応しているのがありがたい。


Bracketsは編集画面のサイドバーに関連するフォルダやファイルが表示され、そこから素早くほかのファイルにアクセスすることができます。「現在はこっちのページを編集しているけど、ここのレイアウトを変更するには別のファイルに記述してあるCSSを編集する必要がある」という場合などに便利です。


また、実際に表示される画面を確認しながら編集できる「ライブビュー編集」も標準で搭載しています(対応しているブラウザはchromeのみのようです)選択したコードに関連するコードを判断して入力候補を表示してくれる「クイック編集」機能なんてのもあります。


画像やカラーを指定したコードにポインタを重ねると、どの画像や色が選択されているかを画像で表示してくれる機能(上の画像がそれです)もなかなか便利。「ファイル名や拡張子を間違えていた」などのケアレスミス防止に役立ちます。






・おわりに


個人サイトの制作にはそれ用の知識やツールが必要となるうえに手間もかかり制限も多いので、多くの創作者がpixivなどの作品投稿に特化したサービスを選ぶのはそりゃそうだろうなという印象です。


とはいえ、いろんな事情からそういったサービスを利用したくない、あるいは、自分のようにサイトをいじるのが楽しいという方も少なからずいると思われますので、この記事がそういう方々の参考になると幸いです。

bottom of page