こんにちは。おにぎりの海苔はパリパリが好きなサイトウです。
あなたは、自分でホームぺージを作りたいと思ったことはありますか？（以降ホームぺージはHPと表記します）いろいろ複雑そうで、一歩が踏み出せないという方、いらっしゃいませんか？
大丈夫です。実は、IT初心者でも、プログラミンングの知識がなくても、HPを作ることができます。
現在、IT初心者がHP制作をする環境とツールがそろっています。これはチャレンジしないわけにはいかないですよね。
今回は「IT初心者が自分でHPを作る方法やコツ」についてご紹介します。HP制作に興味のある方や、HP制作を検討されている個人事業主の方は、ぜひ読んでみてくださいね。
目次
HPを作る方法は
そもそも、HP制作をするにはどのような方法があるのでしょうか？大きく分けて２つあります。
ずばり、業者に頼むか自分で作るかです。業者に頼むメリットは、
- 質の高いHPができる
- SEO対策やアフターサービスも行ってくれる
- 自分は要望を伝えて完成を待つのみ
です。一方、デメリットは
- それなりのコストがかかる
ということです。HPの更新やリニューアル、セキュリティ対策を継続してお願いすることになれば、費用もさらにアップします。
業者にHP制作を依頼するのは、費用がかかってもいいから質の高いものがほしい・公開日が明確に決まっている・自分で作る手間をかけられない（かけたくない）、という場合におすすめの方法です。例えば、企業が事業を拡大するための先行投資として行う場合には、そう高額ではないでしょう。
しかし、個人でちょっとした情報発信をしていくような場合には、少々不向きといえます。そうなると、やはり自分で作る方が良いと考える方も多いですよね。
自分でHPを作るメリットは
- コストが低い
- 変更をその場ですぐに行うことができる
- 作る楽しさを味わうことができる
です。特に「作る楽しさ」は自分で体験してみなければわからないものです。お菓子作りやDIYなど、制作物そのものだけでなく、作る過程を楽しむ方も増えていますよね。それと同じ感覚です。
IT初心者がHPを制作する時のコツ
実際の制作にとりかかる前に、３つのポイントがあります。満足のいくHPにするために大切なことです。ひとつずつご紹介します。
参考になるサイトを探してイメージをまとめる
まずはどんな雰囲気のページしたいのか、目指す到達点を決めましょう。そして、自分が作りたいサイトの参考になるようなサイトをさがします。
クールでスタイリッシュなイメージのHP、親しみやすく柔らかい印象のHP、たくさんのHPがありますよね。いろいろなサイトを見ることで、「ここにメニューをおきたいな」「この画像が素敵だな」といった考えも自然と出てくるはずです。
すべてを総合して、自分の頭の中で「こんなHPにする！」というイメージをしっかりとまとめましょう。
情報を整理してまとめる
HP制作の最大の利点は、自分で情報発信できるということです。かといって、情報をつめこみすぎるのは良くありません。
特に伝えたいこと・強調したい部分を決めましょう。情報に優先順位をつけるということですね。似たような情報はまとめたり、思い切って省いてしまうのも方法です。
図におこしてみる
イメージと情報がまとまった段階で、サイト名やコンテンツの配置を、大まかに図におこしてみましょう。パワーポイントやエクセルを使っても良いですし、手書きでもかまいません。この図はあなたしか見ませんので、自分さえわかれば大丈夫です。
これはプロも行っている工程で、ワイヤーフレームと言います。ワイヤーフレームは極力シンプルにして、必要な情報をどこに配置するのかを考えます。
ワイヤーフレームが出来上がったところで、デザインを考えます。各コンテンツごとに、色や文章をいれたり、細かくデザインしてみましょう。この段階で、強調したい言葉や文章のフォントを大きくする・太くする・色を変える、下線を引くなども書き出しておきます。
複数のページを制作する場合には、Webサイトの構成も書き出しましょう。これはサイトマップとよばれるものです。
どのページがどこにつながっているのかを図にまとめておくと、各ページが出来上がってリンク先を指定するときに大変役に立ちます。はじめから複数のページを作ることを決めている場合は、ワイヤーフレームの前にサイトマップを作ってしまってもOKです。
このようなHPの「下書き」作業をしっかりと行なっておくと、サイト制作に入った時に「迷子」になりにくいです。迷子とは、制作を進めるうちに、自分が作りたいものがわからなくなってしまうことを指します。
特定のコンテンツ部分に集中しすぎて全体のバランスが崩れてしまったり、途中でレイアウト全体を変更しなければならなくなったりします。自分のHPがカオスにならないためにも、下書き作業は丁寧におこなってください。
IT初心者向けのHP制作方法
自分でHPを作るには、大きく分けて２つの方法があります。プログラミンングスキルがなくてもHPを作ることができる便利なツールを使うか、プログラミンングをしっかり学んで作るかです。
それぞれのメリットとどんな方におすすめかについて、ご紹介します。
便利なツールを使う
難しいことは勉強したくない人・手軽で簡単に作りたい人には、HP作成ができるツールを使う方法がおすすめです。HP制作のツールには下記のようなものがあります。
- Wix(ウィックス)
- ペライチ
- Jimdo(ジンドゥー)
ツールを使うメリットは、マウス操作や文字入力といった、簡単なPCスキルがあれば扱うことができるという点です。しかも、とても使いやすく工夫されています。
また、サービスの内容によって無料プランと有料プランがあります。ご自身のニーズ（データ容量やアフターサービス内容）に合わせて選択してください。
プログラミンングを学んでから作る
すべて自分で作りたい人・自由にカスタマイズしたい人・いずれ仕事にしたい人は、ぜひプログラミンングを学んでからサイト制作を始めましょう。プログラミングを学んでからHP制作をするメリットは、完全オリジナルのHPを作ることができる点です。また、Web制作の仕事につなげることができれば、収入の選択肢が増えます。
具体的な学習方法はこちらではご紹介しませんが、独学で学ぶことも十分可能です。まずは、いわゆる「フロント言語」のコーディングができるようにしましょう。
簡単なLP（ランディングページ：縦に長い一枚のHPのこと）であれば、HTML/CSSを学習すると制作が可能です。
サイトに動きをつけたい方は、さらにJavaScript/jQueryも学ぶと良いでしょう。デザインに凝りたい方は、Webデザインの基礎学習に取り組むのもおすすめです。
プログラミンングを学ぶと、WordPressやBootstrapのテンプレートを使用して、おしゃれでより機能的なサイトを作ることも可能となります。作る過程をじっくりと楽しみたいなら、こちらの方法がおすすめです。
興味のある方は、ぜひチャレンジしてみてください。プログラミンングって、おもしろいですよ！
ホームページ(HP)に必要なコーディングとは？初めてでも分かるHP制作
未経験・初心者向け「HTML・CSSのレイアウト鬼練１〜４」
未経験・初心者向け「HTML・CSSのレイアウト鬼練５〜１０」
まとめ
いかがでしたか？今回は、IT初心者がHP制作をする方法とそのコツについてご紹介しました。
自分の頭にあるイメージを形にすることは、とても楽しい作業です。試行錯誤しながら納得のいく物が出来上がった時、とてもうれしく充実感でいっぱいになります。
HP制作の良いところは、何度でもやり直しができること、思いついたらすぐに修正ができることです。一度作ったら終わりではなく、あなたがHPを育てていくことができます。
おもしろそうだなと思った方は、ぜひHP制作にチャレンジしてみてくださいね。この記事が少しでもお役に立てればうれしいです。
