絵師さんのために個人サイトの作り方を伝授する

以前に自分のサイトを持ちたい絵師に知ってほしいことという記事を描いたのですが、具体的な作り方には触れていなかったので、この記事で個人サイトの作り方を私のできる範囲で、全力で説明したいと思います。

作りたいサイトと使える資力を分析しよう

最初に『作りたいサイト』や『自分がサイト作りに割ける労力やお金』を分析しましょう。ちょっと面倒かもしれませんが、とても大切です。『どんな機材で作るか』も検討しましょう。例を挙げます。

  • 作りたいサイト:イラストレーターの結城辰也さんみたいなサイト
  • 使える労力:サイト作りにあまり手間はかけたくない
  • お金:できれば無料で作りたい
  • 機材:スマホしか持っていない

もしサイト作りに詳しい方にこれを伝えたら、みんな同じ返事をするはずです。『Tumblrを使えばいいよ』と。Tumblrとは何かは後ほど説明します。別の例も挙げます。

  • 作りたいサイト:イラストレーターの武田みかさんみたいなサイト
  • 使える労力:サイト作りをしっかりと勉強して作りたい
  • お金:毎月500円ぐらいまでなら
  • 機材:パソコンを使える

こちらの要望を伝えたら、今度はこんな返事が来ます。『まずはHTMLの書き方を覚えよう』。そして嬉々として作り方を教えてくれるでしょう。

作りたいサイトや状況によって、選択肢はこんなにも異なってきます。それは、さながら地図もないのに分かれ道に立たされるかのようです。でも心配いりません。

どの方法を選んでもいい

たくさんある作り方のうち、どれを選んでも良いのです。どれでもいいんです。そして途中で辞めたり変えたりしても構いません。これから、この記事で色々な作り方を紹介していきます。それを読んでみて、ピンときたものを試してみましょう。繰り返します、どれを選んでもいいんです。どれでもいいので、試してみましょう。

この記事では10通りの方法を紹介します。

1. HTMLを手打ちする

もっとも原始的なやり方です。実のところ私はこれがもっとも手っ取り早く、最高の方法だと思っています。HTML? いきなり分からない言葉ですね。でも、不安に思わないでください。ゆっくりと説明します。大丈夫です、理解できます。もし分からなくても、別の方法を試せばいいのです。

こんな状況を思い浮かべてみたください。来週の月曜日には草刈りがあります。あなたはそれを皆に知らせる役を任されます。どうやって知らせようか考えます。そこでプリントを作って皆に配ることにします。まず何をしますか。パソコンを起動します。次にどうしますか。Wordを起動します。次は? 文章を入力します。次は? プリンターを使って印刷します。それをどうしますか? まとめて持っていって、皆に配ります。

ウェブサイトを作って公開するのも、大差はありません。すべてをパソコン上に行っているだけなのです。インターネットで公開するための専用のスタイルの文書を作り、内容を入力して、それを然るべき方法で皆に配信します。では、具体的にどうやって作るのでしょうか。試してみましょう。

「いやまて、わたしはスマホしか持っていない」という方もおられると思います。実はスマホでもHTMLを手打ちすることができます。でも、パソコンでやる方法とはかなり異なってくるので、最初にパソコンの例を、次にスマホやタブレットの例を説明します。

HTMLを作ってみる:パソコン編

まずパソコンを起動しましょう。それからメモ帳を起動します。ところでメモ帳はご存じでしょうか。Windowsのパソコンに標準で搭載されている、とてもシンプルなテキストエディターです。どうやって起動するのか分からなかったら、画面左下のコルタナさんに聞いてみましょう。『メモ帳』と入力すると、候補を挙げてくれるはずです。そのアプリを開きましょう。

メモ帳に次のように入力します。もちろん、無理に手打ちする必要はありません。コピー&ペーストしましょう。手打ちする場合は、英字は半角で打ちます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サイトのタイトル</title>
  </head>
  <body>
    <p>サイトの内容</p>
  </body>
</html>

初めてこれを見ると「うわぁ、意味のわからない文字がいっぱいだ」と不安になるかもしれません。でも覚えることはそんなに多くないので、心配しないでください。

次にメモ帳に書いた文章を保存します。ファイルの種類の欄を『すべてのファイル』に変更します。

ファイル名を『index.html』とします。半角英字で書きます。全角だと正常に認識されないので注意してください。

文字コードを『UTF-8』に指定します。文字コードとは何か説明すると少しややこしい話になってしまうので、ここでは割愛します。

ここまで設定できたら、『保存』ボタンを押してファイルを保存します。指定したフォルダにindex.htmlというファイルが生成されてましたか。

では次に保存したhtmlファイルが正常に表示されるか確認してみましょう。作成したindex.htmlを右クリックします。次いで『プログラムから開く』の項目に移動して、『Microsoft Edge』を選びます。

  1. index.html を右クリック
  2. プログラムから開く
  3. Microsoft Edge

ブラウザ内に『サイトの内容』と表示されましたか。おめでとうございます! あなたは初めてウェブページを作ったからです! ええ、なんの味気もないページですが、これは記念すべき第一歩です。

ところで私たちは絵師ではありませんでしたか。せっかくなので、絵を表示してみましょう。それがなくては始まりません。ペイントを起動して何か絵を書きます。もちろんお使いの手慣れたソフトを使って描いても構いません。私は初心に戻って、ペイントを使ってみます。

さて、何を描きましょうか。あいにくペンタブがつながっていないので、マウスで描くことを強いられています。うまく描けるでしょうか。がんばります。

ふぅ。よく描けたと思います。よく描けたら自分を褒めましょう。よくやった! えらいぞ! なにせ私たちは絵師なので、絵を描くことが原動力であり、絵を描くことに達成感を感じるからです。ここでエネルギーをチャージして、さあ、次に進みましょう。

描いたファイルを保存します。先ほど作成したindex.htmlと同じフォルダに保存しましょう。ファイル名は何でも良いのですが、ここでは『girl.png』とします。ファイルの種類はPNGのままで大丈夫です。

そうしたら『保存』ボタンを押してファイルを保存します。フォルダ内にgirl.pngが作成されましたか。では、作成した画像を早速ウェブページに埋め込んで見ましょう。ここからが本番です。

index.htmlファイルを次のように手直しします。重要なのはimgの行です。その行でgirl.pngを読み込むように指定しているわけです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サイトのタイトル</title>
  </head>
  <body>
    <p>今日のイラスト</p>
    <img src="girl.png">
  </body>
</html>

これができたら、index.htmlを上書き保存します。それから先程と同じ手順でブラウザで表示の確認をしてみましょう。

  1. index.html を右クリック
  2. プログラムから開く
  3. Microsoft Edge

ふおぉぉぉ! ブラウザに画像が表示されました! テンションが上ります! やはり絵があってこそですね! いやあ、なんだかもう、満足しました。こうやって、少しずつ少しずつ自分の思い通りのページを作っていくのがHTMLを手打ちする醍醐味です。

もし、ここまでやっても全くテンションがあがらず疲れるだけだとしたら、もしかすると、HTML手打ちは向いていないのかもしれません。そうだとしても、別の方法も紹介するので、そちらも試してみてください。

HTMLの書き方の説明はこのくらいにしておきますね。では、次なる段階に進んでみましょう。

無料のレンタルサーバーを借りてみる:パソコン編

HTMLを作っただけでは、他の人が見ることができません。それを公開できるサービスがレンタルサーバーです。おすすめのレンタルサーバーをいくつか紹介したいと思います。

おすすめの有料レンタルサーバー

Xserver:とても人気のあるレンタルサーバーです。スペックも良くて容量も多く、安心して使える有料レンタルサーバーです。月額900円~

さくらのレンタルサーバ:老舗で実績のあるレンタルサーバーです。月額129円からのライトプランもあるので、気軽に始めることができます。

mixhost:高性能かつリーズナブルなレンタルサーバーです。サイトを高速に表示することができます。月額880円~。

おすすめの無料レンタルサーバー

Xdomain:前述のXserverと同じ会社が運営している無料のレンタルサーバーサービスです。現在おすすめできる無料のレンタルサーバーはXdomain一択です。Xdomainを使っている絵師さんのサイトは見つからなかったのですが、ペイントソフトの開発者が使用していたので紹介します。

レンタルサーバー借りてみよう

「有料と無料、どちらが良いの?」と聞かれたら、私は有料と答えます。有料のほうが性能・サービス・サポートすべての面で勝っているからです。

でも初めての方には、まず無料のサービスをおすすめします。無料のサービスで試してみて、もっとたくさんのことをしてみたくなったら、有料のサービスに移行する、というのが良いと思います。

もしXdomainを試してみたい場合は、IT工房さんのページなど、すでにわかりやすい解説記事を公開してくださっている方がおられるので、そちらを参考にしてみてください。(私は解説を書く力が尽きてしまいました)

HTMLをレンタルサーバーに公開してみよう

こちらも概略だけ説明したいと思います。HTMLをレンタルサーバーにアップロードするためには専用のソフトを使う必要があります。それらはFTPクライアントと呼ばれています。代表的なFTPクライアントには次のようなものがあります。

このうちFFFTPとFileZillaはXdomainの方で公式のマニュアルが用意されているので、そちらを参照してください。Xdomain:FFFTPの設定Xdomain:FileZillaの設定

慣れないうちはFTPクライアントでアップロードする作業は面倒に感じるかもしれません。とはいえ、HTMLを手打ちで書き、それをレンタルサーバーにアップロードして公開する方法は今でも有力な手段だと思っているので、ぜひ試してみてください。

HTMLを作ってみる:スマホ編

パソコンを持っていない場合、HTML手打ちのサイト作りは茨の道に思えるかもしれません。とはいえ幸いにも便利なアプリがあるので、紹介したいと思います。(ところで私はスマホを持っておらず、iPadしか持っていないので、詳しいことはよく分からなかったりします)。

iPhoneやiPadをお使いでしたらCodaというアプリを使ってHTMLを書くことができます。FTP機能も内蔵されているので、別途FTPクライアントを用意することなくページを公開することができます。余談ですがCodaにはMac版もあり、とても人気があります。

Androidについては使ったことがないのでわからないのですが、ネットで検索してみた限りではFTPクライアントがいくつかあるようです。htmlを作成できるテキストエディタも当然あると思うので、Androidをお使いの方も、やる気さえあればHTML手打ちのウェブサイト作りに挑戦できるはずです。

HTML手打ち:まとめ

以上、HTML手打ちによるウェブサイト作成について説明しました。後半、駆け足になってしまいましたが、いかがだったでしょうか。思い描いているウェブサイトを細部まで作り込みたい場合は、やはりHTMLを手打ちするのは、古典的ながら今でもとても優れた手段だと思っています。

HTML作成を補助するツールについて説明を加えます。HTMLファイルを装飾するCSSファイルと動きを加えるJavascriptスクリプトというものがあります。これは特別な制限がない限りほぼすべてのレンタルサーバーで利用可能なHTMLを拡張する有力なツールです。

HTML作成を手助けしてくれるソフトも多く存在します。先程紹介したCodaもそのうちの一つです。またAdobeが開発しているDreamweaverは高性能なウェブサイト作成ツールです。HTMLをスムーズに書くためのエディターも多くあります。Adobeが開発しているBracketやGithubが開発したAtomなどです。

では、HTML手打ち以外にウェブサイトを作るどんな方法があるでしょうか。一つずつ紹介していきたいと思います。

2. オーサリングツールを使う

HTMLを自分で打つことなく、直感的にHTMLを含むウェブページを作成するソフトを利用する方法があります。そのようなソフトをウェブサイトオーサリングツールと呼びます。有名なものだと、以下のようなものがあります。

先程手短に紹介したDreamweaverもオーサリングツールに分類されることがあります。これらはHTMLの作成を強力に補助してくれるツールですが、基本的にはウェブサイトづくりの大まかな流れ(ページを作る・レンタルサーバーを借りる・レンタルサーバーにページを公開する)は変わりません。

基本的にレンタルサーバーを借りたり、公開のための設定を色々としなくてはいけないのは、変わらず必要であることに注意してください。とはいえ、オーサリングツールの開発元でウェブサイト公開サービスをしている場合もあるかもしれません。事情はそれぞれのツールによって異なってくるので、自分にあったツールやサービスを一つずつ検討する必要があるかもしれません。

3. 静的サイトジェネレータを使う

すべてのHTMLを手打ちするのではなく、もっと簡易的な書式で書いて、それをウェブページの形に一括変換してくれるソフトウェアがあります。静的サイトジェネレータなどと呼ばれています。いくつか紹介します。

これらはHTMLの形で出力されるので、軽量で高速なウェブサイトを作ることができます。基本的にターミナルを使ってソフトを動かすので、やや敷居が高いかもしれません。

4. ウェブ上でサイトを作れるサービスを利用する

レンタルサーバーを借りたり、FTPソフトを使ってファイルをアップロードするのが面倒な場合は、ウェブ上でウェブサイトを作れるサービスを検討できるかもしれません。以下のようなサービスがあります。

どちらも無料のプランがあるので、気軽に始めることができます。またどちらもモバイルアプリが用意されているので、スマホ等でサイト作りを始めることができます。

これらのサービスはウェブ上で直感的にサイトを作ることができます。画像のサイズをマウスで調節したり、文字の大きさや装飾などもWordのように簡単に指定することができます。

ところで私は、解説に夢中になるあまり、これが『絵師』に向けた記事であることをすっかり忘れていました! すみません、すみません! JimdoやWixを使っている絵師さん、それなりにいます!

かっこいいです! これらのウェブサービスはブログのように、ある意味で固定されたデザインではなく(テンプレートはありますが)、ウェブサイトを作れるサービスなので、自分でデザインを色々とカスタマイズできるのは大きな魅力です。

5. Tumblrをウェブサイトとして利用する

JimdoやWixも手軽なサービスですが、そこまで自由度がなくてもいいから、もっと手軽に簡単にウェブサイトを作りたい場合は、どうすればいいでしょうか。Tumblrをウェブサイトとして利用するという方法があります。

Tumblrはミニブログの一種ですが、カスタマイズ次第でウェブサイトのようにも使えるのが魅力の一つです。多くの絵師さんがTumblrをウェブサイトとして利用しています。企業のウェブサイトして使っているケースもあり、十分に実用的です。実際に使っている絵師さんのサイトをいくつか紹介します。

どれも素敵です! Tumblrは有志が作成されたテーマを自分のサイトに適用することができます。その中でも(前回の記事でも触れましたが)、SANOGRAPHIXさんの作成されたIllustfolioシリーズが人気です。

本当に可愛いです! 私のウェブサイトが霞んで見えます(汗)。

Tumblrは管理画面もわかりやすくモバイルアプリもあるので、とにかく気軽に自分のイラストを公開できるウェブサイトを持ちたいという方にはうってつけのサービスです。またミニブログとしての側面もあるので、『お気に入り』されたり『リブログ』されたり、反応が分かるのも特徴の一つです。

ちなみにTumblrテーマを自作することも可能です。これにより頑張ればTumblrだけで自分だけのオリジナルデザインの個人サイトを作ることができます。余談ですが、独自ドメインの設定を無料でできるのも大きな利点です(もちろん独自ドメインの取得は別途、有料で購入する必要がありますが)。

6. WordPressをウェブサイトとして利用する

非常に多くの人が使っているツールがWordPressです。実際にはブログツールなのですが、柔軟性が高く機能も多いので、ウェブサイトとしてもよく利用されています。

WordPressを使う方法は大きく分けて2つあり、1つ目はWordPress.comのサービスを利用すること、2つ目はWordPressを自分のサーバーに組み込むことです。

1つ目は、サービスに申し込むだけ(無料のプランもあります)なのでとても簡単です。有志が作った数多くの美しいテーマを選ぶことができ、ブログのようにも、ウェブサイトのようにも使うことができます。

2つ目は、使い方次第でかなり色々なことができます。HTML手打ちの項で紹介したサービス(Xserver、さくらのレンタルサーバー、mixhost、Xdomain)はどれもWordPressを簡単にインストールするためのオプションがあるので、こちらの方法も比較的簡単に試すことができます。

WordPressのテーマも自作することができます。こちらはPHPというプログラミング言語を利用するので、難しくもかなり多くのことができます。記事を管理と機能の充実、どちらもバランスよく享受したいのなら、WordPressは有力な選択肢になるでしょう。

7. Github Pagesを使う(玄人向け)

玄人向けなのですが、Githubというプログラマー向けのサービスを利用して、ウェブサイトを無料で公開することができます。

無料レンタルサーバーの項では、Xdomain一択だと述べましたが、本当はGithub Pagesもぜひ候補に加えたいです。無料で広告も一切ありません。開発者の多くはGithub Pagesを利用して自分のウェブサイトを公開しています。

さすがにGithub Pagesでウェブサイトを公開している絵師さんは見つからなかったので、音系プログラムを作成しておられる方のサイトを紹介します。

8. VPSサービスを使う(玄人向け)

これは完全にウェブサイトの運営を技術的に楽しみたい人向けです。VPSというのは、仮想的なサーバーのことなのですが、すごくざっくりと説明すると、遠隔で操作できるパソコンをレンタルしているようなイメージです。次のようなサービスがあります。

余談になってしまうかもしれませんが、絵師としてはConohaのマスコットキャラクターの『このはちゃん』が可愛いということを述べておきたいと思います。

かなり色々なことができます。絵師としての自分ウェブサイトを作るだけに留まらず、ウェブサービスを自ら作ってしまうこともできるかもしれません。もちろん、それなりの難しさと自由度が伴います。

9. 自宅サーバーを立てる(玄人向け)

ウェブサイトを公開したいのなら、サーバーをレンタルせずとも、実は自宅にあるパソコンでできます。でも技術的にも金銭的にも安全面でも注意が必要です。24時間運用したい場合は特にそう言えます。

サーバーを立ててウェブサイトを公開するだけなら、意外と簡単にできます。絵師が自分のサイトを持つために自宅サーバーを立てるのにメリットがあるのかは分かりませんが、技術的にはとても楽しいので、やってみたい方はぜひ挑戦してみてください。

10. その他の作り方(マニア向け)

上記以外の方法でもウェブサイトを作って公開することができます。例えば以下のようなやり方があります。

  • Google Apps Script(GAS)でHTMLを出力する
  • Amazon S3やConohaのオブジェクトストレージをレンタルサーバー代わりにする

これらは裏技的な使い方なので、実用的ではないかもしれませんが、技術的にはとても面白いので紹介しました。

独自ドメインのことも少しだけ

書き忘れていたので、ここで少しだけ触れたいと思います。独自ドメインについてです。

どのウェブサイトにも『http://xxx.xxx.xxx』みたいなのが付いてきます。これをウェブサイトのアドレスまたはドメインと呼ぶのですが、ウェブサービスを利用すると、そのウェブサービス特有のドメインが付いてしまいます。Tumblrだったら『https://xxx.tumblr.com』のようになります。

私のウェブサイトは『https://dolphilia.com』です。ウェブサービス特有のドメインの付いていていない独自のドメインになっています。これが独自ドメインです。

独自ドメインは基本的に有料で、ドメインレジストラと呼ばれる業者からドメインを買う(借りる)必要があります。独自ドメインを購入できるサービスをいくつか紹介します。

あれ。Xdomainは無料のレンタルサーバーとしても紹介しましたね。Xdomainはドメインの取得や管理などのサービスと無料レンタルサーバーの両方を提供しているからです。

繰り返しになりますが、独自ドメインを利用したい方は、独自ドメインは基本的に有料で、ドメインを扱っているサービスで購入する必要があることを覚えておきましょう。

SSL暗号化通信についても少しだけ

昨今セキュリティについての注意がいっそう喚起されています。そしてインターネットでの分かりやすいセキュリティ対策として挙げられているのが、通信が暗号化されているサイトのみを使用するというものです。具体的に言うとウェブサイトのアドレスが『http』ではなく『https』で始まっているウェブサイトが信用できるという情報です。

個人情報のやり取りをしない個人サイトでは、通信を暗号化することにあまり意味はないと思います。とはいえ、世間でこれだけセキュリティが注目されている以上、暗号化通信に対応したいと考えるのも、もっともなことです。

それで利用したいウェブサービスが暗号化通信に対応しているかどうか確認する必要があります。この記事で紹介したサービスはほとんどがSSLに対応ないしは対応可能ですが、対応できなサービスもあります。

Xdomainの無料レンタルサーバーはSSL暗号化通信に対応していません。この記事ではXdomainを推していますが、暗号化通信を導入したい方にはおすすめできません。もしXdomainの代わりになるようなサービスを探しているとすれば、今のところ多少敷居は高いかもしれませんが代替サービスとしてはGithub Pagesが良いと思います

この記事で挙げたサービスは、Xdomain以外は暗号化通信に対応しているはずです。自宅サーバーやVPSを使用する場合でも、今はLet’s Encryptを使用すれば無料で証明書を取得することができます。

※ウェブサイトの表示を高速化してくれるCloudFlareというサービスがありますが、このサービスは暗号化通信に対応しています。ですから、XdomainのウェブサイトをCloudFlareを経由して公開することによって、無料でウェブサイトを暗号化通信に対応できる可能性があります。

いろいろ書いてるけど、結局どれがオススメなのか

私が本心でオススメするのは、

  • 独自ドメインを取得する
  • 有料レンタルサーバーを借りる

この2つです。

というのは、私自身がそうしているので、本心ではこれ以外にオススメしようがないからです。私はこれが現状では一番良いと思っています。とはいえ、どちらも有料なので、敷居は高いですし、誰にでもオススメできるわけではない、というのも承知しています。

そんなわけで、いろいろなサービスを試してきた体験者として最初にオススメするとしたら、こうなります。

  • 手軽におしゃれにイラストを公開したいならTumblrを使うべし!
  • オリジナリティを求めるならXdomainを選んでHTMLを学ぶべし!

この二択です。どちらも独自ドメインを設定できるというのが大きなポイントです。Tumblrは手軽で使いやすくテーマもすごくおしゃれです。Xdomainの方はXserverという高性能な有料サーバーに移行しやすいのが好印象です。

どっちがいいのと聞かれたらXdomainと答えます。もし暗号化通信を導入したい場合は、代わりとしてGithub Pagesをおすすめします。

まとめ

絵師のためと銘打っておきながら、解説に熱中するあまり、絵師さんに的を絞った記事にできなかったのが反省点です。絵師のタイプ別に適切なサービスを紹介するとか、見た目のオシャレさならコレとか、そういった視点でも良かったのかなと思いました。

それからTumblrを有力候補として推しながら、あまり具体的なことを書けなかったのも心残りです。とても人気があり知人から使い勝手も聞いていましたが、私自身あまりTumblrをあまり深く使ったことがないのが詳細に書けなかった原因です。

数年前までなら「ウェブサイトを作る」=「HTMLを書く」だったのが、今では選択肢が広がりました。いろいろなニーズに応えていて嬉しい反面、初めてウェブサイトを作りたい人にどうやって作るのか説明するのが難しくもどかしさを感じました。

この記事で紹介した方法を、簡単な順に並べてみます。

  1. Tumblrをウェブサイトとして利用する(Tumblr)
  2. ウェブ上でウェブサイトを作れるサービスを使う(Jimdo,Wix)
  3. WordPressをウェブサイトとして利用する(WordPress.Com)
  4. レンタルサーバー+オーサリングツールを使う(ホームページビルダー,BiND)
  5. レンタルサーバー+HTMLを手打ちする
  6. レンタルサーバー+静的サイトジェネレータを使う(Jekyll,Hugo,Hexo)
  7. Github Pagesを使う
  8. VPSサービスを使う(さくらのVPS,Conoha)
  9. 自宅サーバーを立てる
  10. その他の作り方(GAS,オブジェクトストレージ)

この中で、経験則からおすすめしたのが、次の2つでした。

  • Tumblrをウェブサイトとして利用する
  • レンタルサーバー+HTMLを手打ちする

本心でおすすめしたが、次の方法でした。

  • 独自ドメインを購入する
  • 有料のレンタルサーバーを借りる

以上、絵師のための個人サイトの作り方についての解説でした。最後まで読んでくださりありがとうございます。

記事のタイトル「絵師さんのために個人サイトの作り方を伝授する」| 公開した日付()| 更新した日付(2018年7月5日)| 更新した回数(9回)