こんにちは！山梨県でホームページの制作をしているY-DESIGNERです。
この記事では、ホームページの作り方全般の流れとどんな知識やサービスが必要なのかをご紹介します。近年では専門的な知識がなくてもホームページが作れてしまうサービスも多くございますので、制作会社に頼らず自分自身でホームページを作れている方々も多いです。まずは、制作会社に頼らず、自分自身で頑張ってみたい人はぜひ参考にしてください。
※この記事で紹介している様々なサービスの金額は2022年3月のものです。最新の金額はそれぞれの公式サイトにてご確認ください。
この記事の目次
制作会社なホームページ制作の流れ
ホームページ制作会社がホームページを制作する時の流れを簡単に説明すると以下の流れになります。
１、目的やゴールを確認し、ホームページ全体の構成を考えましょう
ホームページの制作にあたり、ホームページを作る目的（集客・認知度向上・製品の売り上げアップなど）と、ホームページのゴールを設定（お問い合わせの獲得・会員登録・商品の購入など）します。
まずは、目的とゴールによって制作するホームページが変わってきます。例えば、商品の購入をゴールにするのであればカート機能が必要だとか、お問い合わせの獲得であれば、フォームが必要だとかってシステム的なことだったり、製品やサービスの認知度向上を目的としているのであれば、コーポレートサイトではなく、プロモーションサイトやサービスサイトになりますのでコーポレートサイトみたいなデザインにしてしまうと思っていた効果が期待できないなどの問題もでてきます。
これと合わせて、必要なページ構成（サイトマップ）も考えます。
また、ペルソナの設定も行います。ペルソナとは、ターゲットユーザーのことで、性別や年齢・職業・生活リズムなどを仮定し、そのペルソナに合わせて構成やデザインを考えます。
２、構成をもとにワーヤーフレームを作成
１で決めた内容をもとにホームページの各ページごとの設計図を作ります。これをワイヤーフレームと言います。初めての時は手書きでも十分だと思います。制作会社ではAdobe CCのアプリを使ったりするのが多いと思います。
３、ワイヤーフレームをもとにデザインカンプを制作
２で作成したワイヤーフレームをもとに、実際にデザインを作っていきます。この段階で完成したホームページの形が見えるようになります。こちらもAdobe CCのアプリを使うことが多いと思います。このソフトのことは後程紹介します。
４、デザインカンプをもとにコーディング・システム開発
ワイヤーフレームやデザインカンプは、あくまでホームページを画像をして作っているだけです。実際にホームページを完成させるためにはここからコーディングという作業になります。英語の呪文のようなものをいっぱい入力します。
５、色々な環境でテスト
コーディングが全て終わったら、色々な環境でテストをします。例えば、ブラウザ別で閲覧し表示が崩れていないか、システムが機能しているかなど、最後の確認をします。
６、サーバーにアップロード
ここまでにサーバーの設定やドメインの取得・それらの紐付けなども行います。テストで問題がなければサーバーにデータをアップします。ここまでで完成になりますが、本来は解析ソフトの設定などなど実はまだまだやることがあったりはしますが、アップまでではこんな感じです。
では、自分でホームページをどうにか作りたい！という人向けの内容が次になります。
まずは画像加工ソフトを準備しましょう
デザインカンプを作ったり、写真の加工をしたりと何だかんだで画像加工ソフトは必要になります。無料から有料まで色々ありますのでいくつか紹介させていただきます。
Adobe Photoshop
きっと名前はみんな聞いたことがあるであろう、合成写真とか作れるやつです。もっと奥が深いんですけどね。こちらは複数プランがありますが、月額1,078円くらい（フォトプラン）から使うことができます。
Affinity Photo
Photoshopに負けない高機能なアプリです。こちらは買い切りのアプリで、しかも格安！高機能だけどできるだけコストを抑えたい人にはオススメです。パソコン版：7,000円で買い切りです。
GIMP
こちらは無料の写真加工アプリです。無料なのにこちらもすごい高機能！
他にもデザインカンプを作るのは大変そうですが、素材が豊富だったりとかで以下のアプリもオススメです。
Canva
先に記載した通り、デザインカンプを作るのは難しいですが、バナーやサムネイルを作るにはこっちの方が簡単で素材も豊富です。無料で使用できますが、有料版にすれば素材や機能も増えます。
Adobe Creative Cloud Express
こちらもCanvaと一緒です。Canva同様無料でも結構色々と便利に使えます。
ホームページを作るのに必要な言語
ここで自分で作ることを諦める人が出てくるでしょう。そう、謎の呪文をいーっぱい入力していきます。主に必要な(勉強した方がいい)言語は以下の通りです。
HTML
HTMLはホームページの文章構造を示す言語です。簡単に言うと、段落・本文・引用・箇条書き・リンクやブロックの種類などを示す言語です。色を変えたり、文字を大きくしたり、動きをつけたりは別の言語になります。
CSS
CSSはホームページの装飾に関わる言語です。色をつけたり、文字を太くしたり、大きくしたり、背景に写真を配置したりするのに必要な言語です。装飾はほとんどCSSで行ないます。
JavaScript (JQuery)
Webサイトに動きをつけたりするのに必要な言語です。馴染みがあるところで言えば、スライドショーやカルーセルにはこの言語が必要になります。
他にもPHPなどありますが、基本的に上記の３つが分かれば大抵のWebサイトは作成できるでしょう。
コーティングにはエディターで
HTMLやCSS、JavaScriptをコーディングするには、エディターがオススメです。Windowsユーザーの方々ならみじかなアプリで”メモ帳”がそれにあたります。つまり、メモ帳でホームページが作れてしまうのです。
ただ、メモ帳自体はホームページなどのコーディングに特化していないのですごく大変です。オススメのエディターをいくつか紹介させていただきます。
Dreamweaverだけは有料になっており、他３つは無料で十分使用できます。
時短の極み！ノーコードでホームページを作ることもできます！
上で散々紹介しておいてですが、実はコーディングしないでもホームページは作れちゃうんです！業界ではノーコードなんて言いますが、それらのサービスやアプリをいくつかご紹介します。
サービスそれぞれで機能や金額が異なりますので公式サイトを確認してみてください。私個人としては、制作会社に頼らず、自分でホームページを作るならノーコードのサービスをオススメします。
ただし、それぞれのサービスそれぞれが独自のものなので、そのサービスで作ったホームページを他のサービスに移動することはほぼできないです。長く運用することを考えて費用や使いやすさも含め、自分に合ったものを御検討いただければと思います。
別記事でノーコードでホームページが制作できるツールについて詳しくご紹介しています。あわせてご覧ください。
ブログ機能も導入したい時はWordPressがオススメ
上で紹介したノーコードのサービスの中にも投稿機能があるものもありますのでそちらでもいいと思いますが、多くの方々がWordPressでホームページを作っているのも事実です。全世界のWebサイトの実に40%近くがWordPressで制作されています。(2022年1月現在)
ノーコードのサービスでもいいのですが、各サービスによってできることできないことがあります。WordPressで簡単になんでもできるとは言いませんが、上で紹介したノーコードのサービスよりも自由度は高く、必要に応じて解決策を探すことができると思います。
WordPressの危険性について
そこでWordPressについて調べてみると、セキュリティ上危険って話が少なからず出てくると思います。絶対安全とは言いませんが、特別WordPressだけが危ないという訳でもないと思います。先ほども紹介した通り、WordPressの世界シェアは40%を超えてます。例えばですが、アメリカのホワイトハウスのホームページもWordPressなんです。本当に危なければホワイトハウスは別のシステムを使っているでしょう。
とはいえ、正しく管理をしないと危ないのも事実。WordPress自体は無料で使えますので制作会社からWebに詳しくない人まで多くの方々が使っています。
まずは、中のシステムを常に最新版にすることを心がけましょう。他にもセキュリティ対策のプラグインやサーバーでもサービスがありますので合わせて管理していけば、特別危険なものでもないというふうにご理解いただくとよろしいかと思います。
SEO対策のことはしっかりと勉強しましょう
SEO対策とは検索エンジンの最適化のための対策です。コーティングするにしろ、ノーコードにしろ、WordPressにしろ、自分でホームページを作るなら絶対に必要な知識になります。
こんなこと言ったら世の中の制作会社を敵に回しそうですが、細かいことを気にしなければコーティングでもノーコードでもどっちでも大丈夫です！どちらにもメリット・デメリットがあります。ただし、SEO対策のことをわかった上でホームページを作っているのであればです。
今まで自分でホームページを作っていたけどリニューアルしてほしいとお問い合わせいただく多くのお客様がここで躓いています。せっかく作ったのに検索にかからない、お問合せもこないなどなど。
SEO対策を勉強する上で先ほど紹介したHTML言語が関係してきます。また、ノーコードでホームページを作成する時は、そのツールに応じた設定方法も覚える必要があります。
Web制作系のサービスやアプリの紹介ページに”SEO対策も大丈夫”みたいなことが書かれてますが、そのサービスを使えばSEO対策になる訳ではなく、”SEO対策に必要な機能はあって、設定するのは皆さんですよ”ってことです。なので、コーティングするにしろ、ノーコードにしろ、WordPressにしろ、SEO対策のことはしっかりと勉強してからのホームページ制作をオススメします。
ホームページをアップするのに必要な物①ドメイン
ホームページのデータが完成したら、いよいよアップ作業です。ホームページを公開するにはドメインとサーバーが必要になります。先で紹介したノーコードでホームページを作る場合は、ドメインとサーバーがセットになっていることが多くありますので公式サイトで合わせてご確認ください。
自分でドメインを取得する場合は以下のサイトなどで取得が可能です。
ホームページをアップするのに必要な物②サーバー
次にサーバーです。サーバー契約時に上で紹介したドメインをセットで取得できるサービスをされているところが多いです。オススメのサーバーをいくつか紹介させていただきます。
上記のレンタルサーバーは違いますが、レンタルサーバーによってはWordPress専用サーバーなんてものもあります。ノーコードのサービスで紹介したものに関してはサーバーもセットになっていますのでコーティングしたサイトをアップする方向けの情報になります。ドメインとサーバーを別々に契約される場合は、それぞれが紐付けされていませんので、そちらの作業も必要になります。
ホームページをアップするのに必要な物③FTPソフト
ドメインとサーバーの用意ができたら、最後にFTPソフトが必要になります。ドメインはインターネット上の住所になり、サーバーは土地だと思ってください。ホームページが家みたいなイメージです。
ドメインとサーバーが用意できたら、家を置く場所と住所が取得できた状態です。その土地（サーバーの中）に家（ホームページ）を移動しなければなりません。そこで必要なのがFTPソフトになります。
FTPソフトはパソコンとサーバーを接続して、サーバーの中にデータをアップすることができるソフトです。
FFFTPとかFileZillaとかが無料で使われているソフトになります。
サーバーによってはファイルアップローダーが機能としてついており、FTPソフトを使わなくても、ブラウザ経由でアップすることもできます。
ホームページを作る上で大切なのは今ではなく、後々自分が管理しやすいようにすること
初めてのホームページで勘違いしてしまいやすいこと、それはホームページの完成がゴールと思ってしまうことです。むしろ逆で、ホームページが完成してからが色んな意味でのスタートになります。
頑張ってHTMLやCSSなど覚えて、コーティングして作ったとしても、その後の更新作業が大変だと、Webサイトの運営をしなくなってしまいます。そう言った意味で、ノーコードやWordPressでホームページを作るのをオススメしています。作業のしやすさや費用面を考慮して自分に合ったツールをお選びいただければと思います。
この記事を読んで心配なら制作会社に頼りましょう
この記事ではホームページのアップまでの内容を書いていますので、その後のアクセス解析のことやPDCAサイクル、コンテンツマーケティングなどのことは触れていません。そう、これらがホームページ完成後からやった方がいいことの一部です。Webサイトが検索にかからなくてもかまわないし、名刺のQRコードとかから見てもらえればいいよって方はここまでの内容で十分です。
検索順位はしっかり上げていきたいという方は先ほど書きました通り、ホームページが完成してからがスタートになります。
ここまででも十分大変な内容だと思います。その後のことも考えるとやっぱり心配だなっと思うのであれば最初から制作会社お願いする方がいいかもしれません。
まとめ
今回はホームページ制作の簡単な流れと、自分でホームページを作るとしたら何が必要かを解説しました。私もホームページ制作の専門学校などを出ているわけでもなく、現在ホームページ制作のお仕事をしていますので、頑張れば自分達でもできます！
でも”餅は餅屋”って言葉もありますので、本業に支障のない範囲で自分でできそうになければ制作会社に相談するのも一つの考えです。
Y-DESIGNERでもWordPressを使ったホームページ制作をしています。山梨県の制作会社の中でも格安で高性能なシステムを提供しております。ご相談・お見積もりは無料ですのでお困りの際は、お気軽にご相談ください。
