Skip to content

Webサイトの作り方

ma-san
ma-san(鈴木正行)

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

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

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

Webサイトを制作する前に、なんのためにWebサイトが必要かを考える必要があります。

現状把握
目的/目標
誰のためか
競合との差異
強み/弱み
人員/体制
コスト/期間
やるべき事

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

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

Webサイトそのものというよりも、企業として、サービス提供者として改めて情報を整理し、Webサイトという場でコンテンツを提供する必要があります。
Webサイトはあくまで、既存のサービス・企業・人の「情報」を提示し、利用してもらい、知ってもらうためのツールです。
Webサイトを作っただけで利益が上がった、ということであればそれは「提供しているサービスが元々素晴らしいものだった」ということです。

なんのためにWebサイトを作るか考えられたのであれば、次はコンテンツを考えましょう。

コンテンツを考える#

Webサイトに掲載するコンテンツは可能な限り要件として纏める。

企業のWebサイトにせよ、個人のWebサイトにせよ、何のためのWebサイトかを考えたのであればコンテンツも自然と纏まるはずです。
以下にWebサイトに掲載するコンテンツとして、よくあるものを纏めておきました。
シンプルに纏めるのであれば、1ページに纏めることも可能ですが、内容によっては複数ページにしていくことも検討が必要になります。

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

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

掲載したいコンテンツが纏まれば、どのように表現していくかを考える。

ここからが一般的にWebデザインと呼ばれる領域になっていきます。
何のため、要件はなにか、が決まっていれば情報を整理し、設計を行い、ビジュアルデザインに落とし込んでいきます。
使用する写真画像やイメージ画像の準備もこの段階で揃えていきます。
制作現場として使用しているツールはAdobe社の「Photoshop 」や「XD」が有名です。

アクセシビリティ
構造
画面設計
骨格
ビジュアルデザイン
表層
Adobe
Photoshop
Adobe
XD

コンテンツを言語化する#

コンテンツをHTML化することで、Webサイトとして公開できるようにする。

コンテンツをどのようなビジュアルで表現するのかが決まればあとは言語化、HTML化を進めていきます。画像データでなければ表現できないような写真を配置したり、HTMLだけで表現できるような情報を整理することが求められます。
テキストデータとしてHTML化をしていくことで、データとして検索が出来たり、機械が様々な認識ができるようになるのもこのHTML化が重要になります。HTMLだけではなく、様々な言語を駆使してWebサイトとして言語化していきます。

プロの制作現場では「エディタ」と呼ばれるツールが利用されます。
おすすめするエディタは「VisualStudioCode」ですが、エンジニアごとに拘りが分かれるところであるので慣れてくれば拘りのエディタを探してみるといいかもしれません。

HTML
CSS
JavaScript
PHP
etc...
Microsoft
VisualStudioCode

Web上に公開する#

Webサイトの言語化ができたら、データをサーバーへ一式アップロードすれば公開ができます。

サーバーの準備も整い、Webサイトに必要なデータも揃えばあとはアップロードをするだけです。

公開するためにはアップロード用のアプリケーション(FTPソフト)を使用することが多いのですが、セキュリティ面を考慮して様々な制約・条件をクリアした上でアップロードを可能にするような場合もあります。
FTPソフトは様々ありますが、WindowsやMacでも大きく違いが出るため、一概にこれがベストを言えません。
有名所と言えば「WinSCP」「FileZilla」でしょうか。サーバーへアップロードするための設定はサーバーを提供している企業や管理者に確認が必要です。

WinSCP FileZilla

公開後、計測を行うことも重要です。有名所としては「GoogleAnalytics」がプロ、アマ問わず、多くのWebサイトが利用しています。
こちらはHTMLデータに専用のタグを設定しておくことで計測が可能になります。

GoogleAnalytics

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

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

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

るり
気軽にご相談ください。
千葉県四街道市を中心に、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。