- 創作系の個人サイトを作ってみたいけど、何から始めたらいいの？
- 個人サイト制作向けのテンプレートが欲しい
そんなあなたにおすすめなのが「個人サイトを作ろう！テンプレートですぐできる！すぐに身につく！HTML＆CSS」です。
ポチップ
「創作・同人サイト制作支援サイトdo」の運営者様が執筆した、創作系個人サイトを作りたい人向けの基礎知識の解説本です。
レスポンシブデザインに対応した特典テンプレートが3種類付いてくることにも注目。
私は15年以上前に無料サーバーで個人サイトを作ったことがありますが、HTMLとCSSはしばらくの間ほとんど触っていませんでした。
ですが、本書を読んでHTMLとCSSを復習し、テンプレートを使ってイラストを展示する個人サイトを作ることができました！
この記事では、以下のことを解説します。
- 個人サイト本の特徴
- 特典テンプレートのメリット
- 個人サイトを作る心構え
「個人サイトをつくってみたい」という場合は、一読するだけでも知識が得られますので、最後までお付き合いくださいね。
▼個人サイトと一緒に設置すると役立つ「てがろぐ」の解説はこちら
個人サイト本のメリット
個人サイト向けの本書の特徴は、イラストや小説などの創作者に寄り添った内容という点です。
書店でウェブサイト制作の本を見渡しても、実際にアニメ・マンガ系の創作活動を行っている著者の解説本はこの1冊だけでした（見逃してたらごめんなさい）
ポチップ
大半のウェブサイト制作本は会社やお店のホームページの作り方がメインとなっています。
なので、創作系サイトを学ぶための最初の一冊としてとても心強いです。
また、サイト制作のためにはHTMLとCSSという言語の知識がある程度必要となります。
HTMLとCSSとは簡単にまとめると
HTML：Webページ内の文書構造を記述する言語
CSS：Webページ内のデザインを定義する言語
のことです。
本書では、個人サイト制作に必要なHTMLとCSSを効率よく学ぶことができます。
本の中で紹介されているおすすめサーバーや参考サイトも、個人サイト向けのものとなっています。
個人サイト向けの特典テンプレートのメリット
本書には、3種類の個人サイト向けテンプレートが特典として付いてきます。
①BASIC（スタンダードなデザイン）
②CUTE（幅がちいさく可愛いタイプ）
③ELEGANT（幅が広く小説向け）
私は②CUTEのテンプレートを元に個人サイトを作りました。
実際に編集して感じた、テンプレートのメリットを紹介します。
レスポンシブデザイン対応済みでPCとスマホ両方で見やすい
特典テンプレートはすべて、必要最低限のレスポンシブデザイン対応済みです。
レスポンシブデザインとは、サイトデザインやレイアウトをPC/スマホの画面サイズに応じ見やすくすること。
レスポンシブデザイン設定は、サイト制作初心者には難易度が高めなので、あらかじめ設定されていてとても助かりました！
以下のように特典テンプレートではPCで見た画面とスマホで見た画面で、サムネイルの並びなどが自動的に調整されます。
↑PCでは、メニューの文字が表示されていたり、イラストのサムネイルが5列になっています。
トップの画像は幅が広いです。
↑スマホでは、メニューの文字が畳んであり、イラストのサムネイルが2列になっています。
トップの画像は幅が狭いものが表示されています。
参考：筆者の個人サイト「おえかきガーデン」
イラスト展示に便利なプログラム付き
特典テンプレートでは、イラストの展示に便利な「fuwaimg」というプログラムがすでに利用できる状態になっています。
「fuwaimg」はイラストのサムネイルをクリックすると、イラストがふわりと浮き上がり全体を見られるようになるプログラムです。
このプログラムのおかげで、イラストを展示するためのページを別途作る必要がないのでとても便利です。
SNSアイコンと区切りラインの画像素材付き
テンプレートの中に、SNSアイコンが含まれておりそのまま使えます。
SNSアイコンはSVG形式で、サイズを変更しても劣化しないベクター画像形式となっています。
- ピクシブアイコン
- インスタアイコン
- noteアイコン
- YouTubeアイコン
- LINEアイコン
- マシュマロアイコン
- Tumblerアイコン
※Xアイコンはなく、旧ツイッターの青い鳥のマークとなります。
他にも点線等の装飾ラインの画像も7種類付いており、サイトの区切りにも使えて便利です。
その他テンプレートのメリット
- 検索避け対応あり
- イラスト展示/小説展示どちらにも対応
- 1列デザイン/2列デザインが選べる
- 基本的なカスタマイズの方法も本の中で解説あり
自分に合ったテンプレート・ページを選んでサイト制作ができるように工夫がされているので、テンプレートを初めて編集する場合も作りやすいと思います。
テンプレートを活用してイラストを展示する個人サイトを作る流れ
自分がテンプレートを活用して個人サイトを作った手順をざっくりと解説します。
①テンプレートから使うページを選ぶ
展示物は多くないので、トップページとリンクページの2種類のページを作ることにしました。
トップページには「index.html」
リンクページには「noheader.html」
のページデータを使うことに決めました。
②展示用イラストをサイト用に集める
個人サイトに載せるイラストをピックアップします。
③イラストのサムネイルを作る
展示するイラストをクリスタで250px四方に切り取りサムネイルを作ります。
④テンプレートを書き換える
テンプレートの編集は、メモ帳を使って行いました。
サイトのタイトル、プロフィール等を書き換え、不要な部分を削除。
イラストを展示するために必要な部分も書き換えました。
⑤サーバーの「ファイルマネージャー」でデータをアップする
個人サイトのサーバーはブログで契約しているConoHa Wingを使用しています。
「ファイルマネージャー」というファイルをアップロードできる機能でサイトのデータをアップロードして完成です。
個人サイト制作には勢いも必要
個人サイトの制作に必要なのは、HTMLとCSSの基礎知識であるのは確かですが、個人的には「勢いも大事」と伝えたいです。
「HTMLとCSSをしっかりと学んでから作ろう」と考えるのは自然なことで、その気持ちがよく分かります。
分野は違いますが、私は同人誌を「上手くなってから描こう」と考えていたことを後悔しているので、ある程度知識がついたらサイト制作にすぐ進むことをオススメします。
そのためには、とりあえず直接テンプレートを編集してみて自分用のサイトに仕上げてみるのが近道。
特典テンプレートのデータをコピーして取っておけば、デザインを崩してしまってもやり直しが可能。
なので、慎重になりすぎず気軽にサイト制作を楽しんでもらいたいです。
個人サイト向け本：まとめ
「個人サイトを作ろう! テンプレートですぐできる! すぐに身につく! HTML&CSS」の内容とテンプレートについて解説しました。
ポチップ
個人サイトを作るのは、ハードルが高い・・と最初は感じるかもしれません。
ですが、本書を読めば基礎知識とサイト制作の流れが分かります。
手元に置いておくと心強い1冊ですので、ぜひお手に取ってサイト制作の一歩を踏み出してみてくださいね！
▼SNSに疲れがちな創作者向けの記事です
