こんにちは！web制作一筋18年、仙台のwebデザイナーはるちかです。
ホームページを作りたいけど、どうやったらいいの？
そんな人向けに手順をまとめてみました。
ホームページを自作するメリット
①コスト削減
ウェブデザイナーや開発者に依頼する代わりに、自分でホームページを作成することでコストを削減できます。
特に個人や小規模ビジネスの場合、自作のホームページは予算にやさしい選択肢です。
②自分で更新、カスタマイズが可能
自分でホームページを作成することで、デザインやコンテンツを完全にカスタマイズできます。
また、更新のする際も自分で更新・変更したいタイミングで行えます。
③技術の向上
ホームページを自作する事はウェブ開発スキルを向上させます。
プログラミング言語やWordPressといったツールの経験を積むことができます。
ホームページを自作するデメリット
①時間と労力の負担が大きい
ホームページを自作するにはHTML、CSS、JavaScriptなどのウェブ開発技術を学ぶ必要があります。
wixやjimdoといった作成ツールを使う場合は、ツールの使い方を覚えなければいけません。
初心者やITが苦手な人にとって、技術を習得しホームページを作るには多くの時間と労力がかかることがあります。
また、ホームページは公開後どう運用するかがとても大切です。
更新、保守管理、メンテナンスの労力も必要となります。
②クオリティの不足
プロと比べて自作の場合、デザインや機能の品質が多くの場合劣ります。
デザインクオリティが低いと、見込み客に対して訴求力が弱くなり、
機能が足りないとユーザーが行動まで至らない可能性が高まります。
③セキュリティとメンテナンスの課題
自作の場合、セキュリティやメンテナンスの問題に自分で対応しなくてはいけません。
知識が不足している場合、ハッキングやセキュリティ侵害の標的になる可能性が高まります。
また、ウェブテクノロジーは進化し続けており、ホームページのメンテナンスやアップデートが必要です。
これに対処するための時間とリソースを確保する必要があります。
【1.企画】ホームページを制作する流れ
①目的、目標の設定
ホームページを企画する際に最初に考えるべきステップは、明確な目的と目標の設定です。
何を達成したいのか、ホームページを通じて何を伝えたいのかを明確にしましょう。
例えば、製品やサービスのプロモーション、情報提供、コミュニティの構築、売上の増加など、目的を具体的に定めます。
合わせて達成可能な目標を設定しましょう。
②ターゲット選定
見込み客の対象となるターゲットを明確に選定することが成果を出す第一歩です。
ターゲットの悩みや問題を理解し、ニーズや興味を把握することでコンテンツやデザインを最適化できます。
ターゲット選定は、年齢、性別、地理的な位置、趣味、関心事など、さまざまな要因を考慮して行います。
これにより、ターゲットに合わせたコンテンツを作ることが出来、効果的なコミュニケーションを実現できます。
③3C分析
3C分析（Customer、Company、Competition）は、競合他社と市場環境を理解するために重要です。
顧客の視点からは、顧客のニーズ、要求、行動パターンを分析します。
企業の視点からは、自社の強みや弱み、リソース、戦略を評価します。
競合の視点からは、競合他社の動向、市場での位置、差別化ポイントを調査します。
これにより、戦略の方向性を明確にすることができます。
【2.設計】ホームページを制作する流れ
①ページ構成/サイトマップ
ホームページ設計の第一段階はページ構成やサイトマップの策定です。
コンテンツやページの配置を計画し、全体の構造を設計するプロセスです。
ユーザーが求めている/訴求すべきコンテンツを洗い出し、ページごとにまとめたうえ階層化させましょう。
②ワイヤーフレーム(WF)の作成
WFは、ページ構成を作った後、実際のレイアウト画面を作る工程です。
WF作成は、デザインと機能の調整を行うのに非常に有用です。
見込み客がページをどのように回遊し、情報を取得するかを視覚化し、改良点を特定できます。
通常、コンテンツ(テキスト、画像、動画など)の配置、ユーザーインターフェース要素（ボタン、フォーム、ナビゲーションメニューなど）の配置を視覚的に表現します。
色はや写真は使わず、白黒で作られることが一般的です。
WFを作成することは、デザイン作業をスムーズに進めるのに役立ちます。
【3.デザイン】ホームページを制作する流れ
①デザインキーワードを決める
デザインキーワードは、ホームページのビジョンや目的を表現するための言葉やフレーズです。
例えば「モダン」「シンプル」「親しみやすい」「プロフェッショナル」などが考えられます。
これらのキーワードは、デザインの方向性を明確にし、一貫性のあるウェブサイトを作成するのに役立ちます。
デザインキーワードを明確にすることは、配色、フォント、レイアウト、アイコン、写真の選定など、デザインに統一感をもたせることにつながり、強い印象を与えることができます。
②配色を決める
デザインにおいて、配色はユーザーの感情や印象に強く影響を与えます。
配色を決める際は、主要なベースカラーと補助カラーを選び、これらを組み合わせて一貫性のあるものにします。
コントラストや視認性も考慮し、テキストやボタンが読みやすく、デザインが洗練されたものになるように注意しましょう。
③テイストを決める
テイストは、ホームページの雰囲気を決定する要素です。
コンテンツ、フォント、イメージ、アイコン、ボタンスタイル、アニメーションなど、デザイン全体に影響を与えます。
選定の際には、ブランドの個性やコンセプトに一致することが重要。
例えば、クリエイティブなアートギャラリーではアーティスティックなテイスト。
法律事務所ではプロフェッショナルでシンプルなテイストが求められます。
テイストに悩んだときは、参考サイト集をみるのも良いでしょう。
【4.構築】ホームページを制作する流れ
①ドメイン/サーバーの契約
ドメインとは、ホームページの住所です。
ドメイン管理会社との契約が必要となります。
インターネット上のページにアクセスした際に出てくる「https://〇〇〇.com」という文字列です。
適切なドメインを選ぶ際には、以下のポイントを考慮してください。
・ホームページのテーマに関連性がある
・短くて覚えやすいド
・競合を避ける
サーバーはホームページのデータを置く保管場所です。
「レンタルサーバー」と検索し、上位に出てくる会社であれば大体は問題が無く使えます。
合わせて「レンタルサーバー 比較」で自分に合ったサーバーの情報を調べましょう
尚、自作サービスを使う場合は上記の作業は必要ないことが大半でしょう。
②HTML/CSコーディング
1.【難易度：★★★★★】HTML/CSSコーディング
HTML/CSSコーディングは自由度が高く、こだわったデザイン・機能を実装したい方におすすめです。
また、サーバー・ドメイン代だけですので、制作費用も一番抑えることができます。
HTML/CSSコーディングは習得に時間がかかり、作業コストも高いです。
また、web上の動きを実装するにはJavascript、問合せフォームを設置するにはPHPといった言語の習得も必要です。
2.【難易度：★★★】CMSツールを使う
CMSとはコンテンツ・マネジメント・システムを指します。webサイトの構築や更新を簡単に行うことを目指し作られています。
WordPressやMovableTypeといったツールが有名です。
専門知識なしでオリジナリティのあるホームページ作ることが可能ですが、
CMS自身の知識や、アップデート、セキュリティ、保守管理といった作業が必要です。
3.【難易度：★】作成ツールを使う
難易度が低い分、クオリティは下がりますが以下の利点があります。・ドラッグ＆ドロップといった直観的な操作で簡単に作れる。
・テンプレート(雛形)をベースに作れる。
無料のものを選ぶと広告が表示されるため有料のプランを選ぶのが良いでしょう。
まとめ
ざっくりですがホームページ自作する方法についてまとめました。
ホームページを作る作業は楽しいですが、手間と時間がかかります。
・制作に時間がかかりすぎて、本業の時間が少なくなった…
・せっかく作ったのにクオリティが低く、見込み客から見た印象が悪い…
このようの状況にならないよう、自社のリソースに合わせ自作が良いか依頼が良いか判断しましょう。