ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


本格的なホームページの作り方とは?まず知っておきたい7つのこと

当ブログでは、ホームページを作る上での基礎をお話しています。
基礎は大事なことで、基礎がしっかりしていないと応用もできないためです。

ただ、基礎を網羅した時に次のステップに行くのが自然な流れですが、その先には「ホームページを本格的に作りたい」と思われる方もいるでしょう。

本格的なホームページの作り方とは?
では、ホームページを本格的に作る場合どうしたら良いのでしょう。
そんな疑問を抱えている初心者の方の為に、できるだけわかりやすくお話いたします。

本格的なホームページを作りたい理由

まず、一番重要なところは「なぜ本格的なホームページを作りたいのか」というところです。
いきなりなんだ、と思われるかもしれませんが、実はとても大切なことなんです。
もしあなたが、ホームページ制作の仕事で食べていきたいという考えであれば、この先を読み進めて下さい。

 
そうではなくて、あなたが行うビジネスのためのツールとして持ちたいということであれば、業者に頼んでしまったほうが楽ですし効率的です。
なぜか?それはあなたの仕事ではないからです。ホームページを本格的に作るということは、かなり大変な作業になります。

 
私は、ホームページ制作に携わらせて頂いてから約10年ほどが経過しますが、今でも勉強する日々が続いています。
初心者の方が、本格的なホームページ(完成度にもよりますが)を作るとなれば何ヶ月、下手したら年単位になってしまうかもしれません。
それこそメインの仕事に差し支えてしまう恐れがあります。

仮に制作会社にお願いするとしたらいくらかかるの?

昨今、ご存知の通りスマホが普及してからというもの、PC用の画面だけでなくスマホ用に最適化されたホームページを作る必要が出てきました。
更にいえば、パソコン、スマホだけでなくタブレットなどと色々なデバイスで見れるように、ホームページ作成をすると訪問者に優しい作りとなります。

 
これらを考えて作る場合、ホームページのボリュームにもよりますが、高いところだと数百万円、通常でも何十万円はくだらない価格帯です。
ただこれらは制作会社の位置付けであり、中には個人事業主として、スマホにも対応したホームページを3万円~作ってくれるホームページ制作屋さんもあります。

本格的なホームページの定義

ここからは、本格的なホームページを作りたい初心者の方向けてメインにお話していきます。

まず、本格的なホームページといっても、どんなホームページが本格的なものなのかという定義が曖昧です。
例えば、ホームページによってはWEBデザインやhtml等だけでなく、phpやcgi、またはシステムそのものなど、
様々な要素が組み込まれているホームページもあります。

 
ただ、基本的にはデザインと骨組みとなるhtml(css)などは必須になり、シンプルにいえばこの2つができればホームページは作れるので、
ここでは主にこれらの内容としてお話していきたいと思います。

環境を整えよう

ホームページを作るには、最低限用意するものがあります。
それは、デザインソフトとテキストエディタといわれるものです。
どちらも聞き覚えがあるとは思いますが、デザインソフトであればフォトショップ。
テキストエディタであれば、ドリームウィーバーや秀丸、TeraPad、サブライムテキストなどを使いましょう。

 
更に欲を言えば、パソコンのスペックはある程度、高性能のものを用意しましょう。
フォトショップなどを使うと、低スペックのパソコンだと、固まってしまったり動作が鈍く作業しづらい場合があります。

ホームページの構成を考える

あなたはどんなホームページを作りたいですか?
まず、理想とするホームページのレイアウトだったり内容をまとめてみましょう。
紙にラフとして書き出してみるのもアリです。

納得できるものが仕上がったら、それを元にデザインを落としこんでいきます。

※ここで(もっと前の段階でもOK)、どのデバイスに対応させてホームページを作るかも決めておきます。
対応範囲によっては、レスポンシブデザインだったり、スマホ専用のサイトなどを考慮して進める必要があります。

デザインセンスを身につける

フォトショップを使い、ホームページをデザインしていきます。
ただ、いきなり言われてもどのように作るのかわからないと思いますので、
ネットだったり本を買って勉強する必要があるでしょう。

今はインターネット上で欲しい情報は、ほぼ手に入る時代なので、とりあえずググりまくって勉強あるのみです。

 
また、デザインセンスというものが存在します。
これは私にもあなたにも持ち合わせているものです。
「わたしセンスないからな・・」なんて思ったら、まず、あなたが目標としている、もしくは素敵だなと思うホームページをマネして作る練習をしましょう。

テキストエディタを使ってコーディング

デザインが完成したら、テキストエディタを使ってコーディング作業を行います。
ここでいうコーディングとは、主にhtmlとcssのプログラミング作業です。
htmlとcssには、いくつか種類があります。

 
例えば、html5・css3が今のところ最新ですが(150120現在)、これらはすべてのブラウザや環境に対応しているわけではないので、最新だからといって絶対使う必要もありません。
これも、あなたのホームページがどんな環境で、どんなユーザーに見られるかなどを考えたり、あらゆる場面を想定して選定すると良いと思います。

 
このあたりも、色々な情報がネット上に転がっているので、リサーチしましょう。
また本などもいくつか購入して勉強するのもアリです。

サーバーにアップロード

コーディング完了後、ローカル環境(主力となるブラウザ/FirefoxやIE、サファリ、グーグルクロームなど)で確認して問題なければ、本番環境として指定のサーバーにデータをアップロードします。

 
更に、アップロード後も念のため再度ブラウザで表示確認し、問題ないかを最終確認します。
表示崩れなど起こしていたら、修正して完了です。
お疲れ様でした。

まとめ

ここまで、ホームページを作る上での流れをざっくりとですがお話してきました。
最低限の工程しかお話していませんが、他にもやるべきことは沢山あります。
ただ、今回は本格的なホームページを初心者の方が作ることを想定した場合に、必要であろうメインのお話をさせて頂きました。

 
WEB業界は、移り変わりが早く、トレンドや技術も次々に変化していきます。
なので、一年前に覚えたことが今では古くなっているなんてザラにあります。
その為、常に情報収集も必要ですし、覚えることも山積みです。

 
もし、これからWEBデザイナーないしWEB制作者として、本格的なホームページを作る仕事に就く場合はそれなりの覚悟が必要かもしれません。
私も日々勉強あるのみです。