中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

【初心者向けガイド】Webサイトの作り方について

Webサイトの作り方について。初心者向けガイド Web

初めて自分自身でWebサイトを作る方のために必要な情報をまとめています。

何のためのWebサイトか考える

Webサイトは自分・自社の自己紹介をする場として考える。自分自身(Webサイト)に出来ることを紹介し、知ってもらうことが大前提。

Webサイトを制作する前に、なんのためにWebサイトが必要かを考える必要があります。以下は、そのための考慮ポイントです。

  • 現状把握: 自分や自社が今どのような状況にあるか把握しましょう。これにより、Webサイトの目的や目標が明確になります。
  • 目的/目標: Webサイトで達成したい目的や目標を設定しましょう。これが明確でないと、効果的なWebサイトになりません。
  • 誰のためか: Webサイトの対象ユーザーを明確にしましょう。これにより、コンテンツやデザインがターゲットに合わせて最適化されます。
  • 競合との差異: 自分や自社と競合との違いを明確にしましょう。これにより、Webサイトでアピールすべきポイントが明確になります。
  • 強み/弱み: 自分や自社の強みや弱みを把握しましょう。強みを最大限に活かし、弱みを補うWebサイトを作成できます。
  • 人員/体制: Webサイト制作に必要な人員や体制を整えましょう。適切なスキルを持ったメンバーが揃っていることが重要です。
  • コスト/期間: 制作費用や期間を明確にしましょう。これにより、計画的にWebサイト制作を進めることができます。
  • やるべき事: 上記の項目を踏まえて、Webサイト制作で取り組むべきことをリストアップしましょう。これが、制作の指針となります。

勘違いされがちなのは、Webサイトを作ることのみで成果に繋がる、ということです。成果に繋がらない理由は以下の通りになります。

  1. 短期利益を求め、目先の施策に囚われ続けている。
  2. 部分最適を追い求め、全体最適ができていない。
  3. ターゲットユーザーが大衆向けになってしまっている。
  4. テーマが一貫性がなくなってしまっている。
  5. 選ばれる理由(商品/サービス)作りができていない。
  6. 世の中にどんな良いことがあるのか提言できていない。

Webサイトそのものというよりも、企業として、サービス提供者として改めて情報を整理し、Webサイトという場でコンテンツを提供する必要があります。

コンテンツを考える

企業のWebサイトにせよ、個人のWebサイトにせよ、何のためのWebサイトかを考えたのであればコンテンツも自然と纏まるはずです。以下にWebサイトに掲載するコンテンツとして、よくあるものを纏めておきました。

  • サービス内容
  • 誰のためか
  • 活動理念
  • 活動内容
  • 企業情報
  • 責任者情報
  • 問い合わせ先
  • 責任事項

シンプルに纏めるのであれば、1ページに纏めることも可能ですが、内容によっては複数ページにしていくことも検討が必要になります。

コンテンツの見せ方を考え、表現する

掲載したいコンテンツが纏まれば、どのように表現していくかを考える。ここからが一般的にWebデザインと呼ばれる領域になっていきます。

何のため、要件はなにか、が決まっていれば情報を整理し、設計を行い、ビジュアルデザインに落とし込んでいきます。使用する写真画像やイメージ画像の準備もこの段階で行います。以下は、デザインを考慮する際のポイントです。

  • レイアウト: コンテンツの配置や見た目を考慮しましょう。情報が整理され、ユーザーがスムーズに読み進められるレイアウトが望ましいです。
  • カラースキーム: Webサイトのイメージに合わせた色を選択しましょう。色が印象や雰囲気を大きく左右するため、適切なカラースキームが重要です。
  • タイポグラフィ: 文字やフォントの選択もデザインに影響を与えます。読みやすさや印象を考慮して、適切なタイポグラフィを選びましょう。
  • 画像/動画: 高品質な画像や動画を用意しましょう。視覚的に訴求する力があり、ユーザーの関心を引き付けることができます。
  • UI/UX: ユーザーインターフェース(UI)やユーザーエクスペリエンス(UX)を考慮しましょう。使いやすさや操作性が向上することで、ユーザーの満足度が高まります。

コンテンツをWebサイト用に言語化(マークアップ・プログラミング)する

デザインが決まったら、HTMLやCSS、JavaScriptなどの言語を使ってコンテンツを表現します。以下は、言語化する際の基本的な要素です。

  • HTML: Webページの構造を定義するために使用されるマークアップ言語です。見出しや段落、リンクなどの要素を定義します。
  • CSS: Webページのデザインやスタイルを制御するための言語です。レイアウト、色、フォントなどのスタイルを設定します。
  • JavaScript: Webページにインタラクティブな要素を追加するためのプログラミング言語です。アニメーションやフォームの動作を制御します。

これらの言語を使って、デザインされたコンテンツをコーディングし、Webサイトとして形にしていきます。また、PHPなど多言語も存在しますがここではシンプルなWebサイトの構造として紹介しています。

Web上に公開する

Webサイトが完成したら、インターネット上でアクセスできるように公開します。以下は、公開に必要な手順です。

  • ドメイン取得: Webサイトのアドレスとなるドメインを取得しましょう。ドメイン提供業者(ドメインレジストラ)から購入できます。
  • ホスティング選択: Webサイトのデータを保存し、インターネット上で公開するためにホスティングサービスを選びましょう。共有ホスティング、VPS、専用サーバー、クラウドホスティングなど、用途に応じて適切なプランを選択します。
  • FTP転送: FTP(File Transfer Protocol)を使用して、ローカル環境で作成したWebサイトのファイルをホスティングサーバーにアップロードします。
  • DNS設定: 取得したドメインとホスティングサーバーを関連付けるために、DNS(Domain Name System)設定を行います。ドメイン提供業者の管理画面で、ホスティングサーバーのIPアドレスやネームサーバー情報を設定します。
  • SSL設定: Webサイトのセキュリティを高めるために、SSL(Secure Sockets Layer)証明書を設定しましょう。これにより、WebサイトがHTTPSで安全にアクセスされるようになります。

これらの手順を踏むことで、Webサイトがインターネット上に公開され、世界中の人々がアクセスできるようになります。公開後も、ユーザーからのフィードバックやアクセス解析データをもとに、Webサイトの改善や更新を継続的に行っていくことが重要です。

詳細については下記ページにも様々な点を紹介しているので参照にしてみてください。

https://ma-san.org/notes/first-web-06.html
           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

Web
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました