なかけんのミニサイト講座

作成概要と必要スキルを確認しよう

ここでは、ミニサイトを作成する流れを見た後、作成するために必要となる知識やスキルを挙げていきます。

目次

ミニサイト作成の流れ

当サイトでは、ミニサイトは「小規模な完結型サイト」と定義しています。ミニサイトは、次のような流れで作成していきます。当サイトのメニューとほぼ同じ内容です。

まずは、ミニサイトのテーマを決めます。規模が大きくなりすぎないよう、また、サイト内で完結するよう、いいテーマを選びます(テーマの選び方は次のページで書きます)。テーマを選んだら、一度、記事の洗い出しを行います。こうして、サイトの規模や、サイトの構成についてだんだんイメージをつかんでいきます。

続いて、より具体的に各ページについて考えていきます。どのようなページのテンプレートが必要かを考え、レイアウトを作成します。それに合わせて、記事の内容も固めていきます。記事を完成させ、アクセス解析などの外部サイト向けの設定などを終えたら、いよいよ公開です。

ミニサイトを作る主な作業手順
  • テーマを決める
  • 記事の洗い出し
  • サイト構成の決定
  • レイアウト作成
  • 記事執筆
  • 各ページ仕上げ
  • 公開

どれくらいの規模か、どれくらい作業が早いか、どれくらい時間をかけられるかにもよりますが、ミニサイトを作り上げるまでにかかる期間は、数日から数か月くらいだと思います。それより長いと挫折する可能性が高まってきます。

ちなみに、当サイトは、ゴールデンウィーク期間中に、企画から完成までたどり着いています。何度かミニサイトを作っていると、作るのはだんだん早くなっていきます。

ミニサイト作成に必要な知識やスキル

先ほど、ミニサイトを作る流れを見ました。前半はサイト作成に必要な専門知識は少ないですが、後半ではいくつか必要となる知識やスキルがあります。例えば以下のものです。

ミニサイト作成に必要な知識・スキル
  • 記事を書く能力
  • HTMLやCSSの知識
  • 自動化する能力

当サイトにしたがってサイト作成を進めていたのに、制作過程の後半で、これらの知識がなくて先に進めなくなってしまった、ということがないよう、事前に確認していきましょう。

記事を書く能力

普段から文章を書いていない人にとっては、記事を書くことは大変かもしれません。

ブログを更新しているなら、この分量を書くにはどれくらい時間がかかるか、というのをある程度予測できますが、多くの場合、記事を書くのは思っているよりも時間がかかるんですよね。そのため、記事を書く能力がないと、時間ばかりかかって、完成するまでに挫折してしまうかもしれません。

ミニサイトのテーマによっては、画像などを用意したほうがいいケースもあります。例えば、ソフトウェアの解説やゲームの攻略法などのサイトなどですね。画像を用意するのも案外時間がかかります。

文章を書くのも画像を用意するのも、慣れていない場合には、時間を長く見積もっていた方がいいでしょう。

HTMLやCSSの知識

ミニサイトを作成するには、各ページをデザインする必要があります。このときに、HTML や CSS の知識がある程度必要になります。

ネットに落ちているテンプレートを使うのもいいですが、まったくカスタマイズせずにそのまま使えることは少ないです。HTML や CSS の知識があまりない状態では、サイトのデザインを思うようにできないかもしれません。できたとしても、すごく時間がかかってしまう可能性があります。

デザインをあまり凝らないなら、当サイトのHTMLのひな型を作ろうCSSファイルを作ろうで公開しているテンプレートを参考にしてみるのもいいと思います。

自動化する能力

ミニサイトを作るには、自動化する能力も必要です。

数ページのサイトなら、全部手作業で作成することもできますが、10ページを超えてくると、自動化できた方がいいでしょう。

僕は自分でプログラムを書いて、HTML のテンプレートファイルにコンテンツを流し込んでサイトを作成する、という手法をとっています。そのため、ヘッダーやサイドバーを全ページ一度に更新する、というようなことができます。

もちろん、全部手作業でやるなら、自動化する能力は不要です。テンプレートを用意し、コピーして作ったファイルで本文を更新していく、というスタイルでも作ることはできます。

ただ、サイトの作成には修正がつきものなので、そのたびに手作業ですべてのページを修正するのはなかなか大変です。

あると便利なツール

必須ではないですが、ミニサイトを作るときに、あると便利なツールもいくつかあります。

例えば、サイトのデザインを行うときに、Bootstrap などのフレームワークが利用できます。フレームワーク自体についての知識が必要になりますが、利用するとデザインがしやすくなるかもしれません。

先ほど挙げた「自動化する能力」については、WordPress や Hugo などのブログツールを使いまわすという手法もあります。

これらを使えば、サイトのページ更新は自動でやってくれます。ただし、テンプレートが必要です。ブログ用のテンプレートはたくさんあるのですが、自分の作るミニサイトにぴったりのテンプレートを見つけるのはなかなか難しいです。

自分で WordPress などのテンプレートを作成・修正するとなると、今度はプログラミングの知識が必要となってしまいます。人によっては、さらにハードルが上がってしまうかもしれません。

ブログツールを使わないなら、記事を書くためのエディタがあると便利です。僕は Visual Studio Code を使っています。検索や置換、HTML の入力補助機能などの便利機能があります。僕にとっては、WordPress よりも快適に記事が書けています。

あると便利なツール
  • Bootstrap などのフレームワーク
  • WordPress や Hugo などのブログツール
  • 記事を書くためのエディタ

おわりに

ここでは、ミニサイトの作成の流れと作成に必要な知識について見てきました。サイト作りの経験があまりない人は、ミニサイトを作り始める前に当サイトの記事を一通り読んでみて、できそうかどうか判断したほうがいいと思います。

次のページでは、ミニサイトのテーマについて見ていきます。ミニサイトのテーマはどうあるべきか、どのように決めていけばいいのか、見ていくことにします。