初めて自分自身でWebサイトを作る方のために必要な情報をまとめています。
何のためのWebサイトか考える
Webサイトは自分・自社の自己紹介をする場として考える。
自分自身（Webサイト）に出来ることを紹介し、知ってもらうことが大前提。
Webサイトを制作する前に、なんのためにWebサイトが必要かを考える必要があります。
- 現状把握
- 目的／目標
- 誰のためか
- 競合との差異
- 強み／弱み
- 人員／体制
- コスト／期間
- やるべき事
勘違いされがちなのは、Webサイトを作ることのみで成果に繋がる、ということです。
成果に繋がらない理由は以下の通りになります。
- 短期利益を求め、目先の施策に囚われ続けている。
- 部分最適を追い求め、全体最適ができていない。
- ターゲットユーザーが大衆向けになってしまっている。
- テーマが一気通貫ではなくなってしまっている。
- 選ばれる理由（商品／サービス）作りができていない。
- 世の中にどんな良いことがあるのか提言できていない。
Webサイトそのものというよりも、企業として、サービス提供者として改めて情報を整理し、Webサイトという場でコンテンツを提供する必要があります。
Webサイトはあくまで、既存のサービス・企業・人の「情報」を提示し、利用してもらい、知ってもらうためのツールです。
Webサイトを作っただけで利益が上がった、ということであればそれは「提供しているサービスが元々素晴らしいものだった」ということです。
なんのためにWebサイトを作るか考えられたのであれば、次はコンテンツを考えましょう。
コンテンツを考える
Webサイトに掲載するコンテンツは可能な限り要件として纏める。
企業のWebサイトにせよ、個人のWebサイトにせよ、何のためのWebサイトかを考えたのであればコンテンツも自然と纏まるはずです。
以下にWebサイトに掲載するコンテンツとして、よくあるものを纏めておきました。
シンプルに纏めるのであれば、1ページに纏めることも可能ですが、内容によっては複数ページにしていくことも検討が必要になります。
- サービス内容
- 誰のためか
- 活動理念
- 活動内容
- 企業情報
- 責任者情報
- 問い合わせ先
- 責任事項
コンテンツの見せ方を考え、表現する
掲載したいコンテンツが纏まれば、どのように表現していくかを考える。
ここからが一般的にWebデザインと呼ばれる領域になっていきます。
何のため、要件はなにか、が決まっていれば情報を整理し、設計を行い、ビジュアルデザインに落とし込んでいきます。
使用する写真画像やイメージ画像の準備もこの段階で揃えていきます。
制作現場として使用しているツールはAdobe社の「Photoshop 」や「XD」が有名です。
アクセシビリティ
構造
画面設計
骨格
ビジュアルデザイン
表層
コンテンツを言語化する
コンテンツをHTML化することで、Webサイトとして公開できるようにする。
コンテンツをどのようなビジュアルで表現するのかが決まればあとは言語化、HTML化を進めていきます。画像データでなければ表現できないような写真を配置したり、HTMLだけで表現できるような情報を整理することが求められます。
テキストデータとしてHTML化をしていくことで、データとして検索が出来たり、機械が様々な認識ができるようになるのもこのHTML化が重要になります。HTMLだけではなく、様々な言語を駆使してWebサイトとして言語化していきます。
プロの制作現場では「エディタ」と呼ばれるツールが利用されます。
おすすめするエディタは「VisualStudioCode」ですが、エンジニアごとに拘りが分かれるところであるので慣れてくれば拘りのエディタを探してみるといいかもしれません。
- HTML
- CSS
- JavaScript
- PHP
etc…
Web上に公開する
Webサイトの言語化ができたら、データをサーバーへ一式アップロードすれば公開ができます。
サーバーの準備も整い、Webサイトに必要なデータも揃えばあとはアップロードをするだけです。
公開するためにはアップロード用のアプリケーション（FTPソフト）を使用することが多いのですが、セキュリティ面を考慮して様々な制約・条件をクリアした上でアップロードを可能にするような場合もあります。
FTPソフトは様々ありますが、WindowsやMacでも大きく違いが出るため、一概にこれがベストを言えません。
有名所と言えば「WinSCP」「FileZilla」でしょうか。サーバーへアップロードするための設定はサーバーを提供している企業や管理者に確認が必要です。
公開後、計測を行うことも重要です。有名所としては「GoogleAnalytics」がプロ、アマ問わず、多くのWebサイトが利用しています。
こちらはHTMLデータに専用のタグを設定しておくことで計測が可能になります。