TUGIとHAGI

20代〜30代前半でITエンジニアになりたい人向けの情報ブログ

プログラミング・学習

【画像あり】Webサイト制作の流れを簡潔にまとめました

投稿日:2017/03/27 更新日:

Webサイト制作フローのアイキャッチ画像

「Webサイト作るの楽しそうだからやってみたい!」
「ホームページ作って商品を宣伝したい!」

Webサイトを作る理由には、それぞれで目的があります。しかし、いざサイトを作ろうとしても、制作の流れにおける全体的なイメージがなく、「サイト制作って色々とやることがありそうで、個人だとなんだか大変そうで無理かも。」と思ってしまう場合があります。また、具体的な制作工程を提示している記事が見つからなかったりもします。

この記事では、私が実際の制作工程で描いたラフスケッチなどを紹介しつつ、Webサイト制作の流れについて簡潔に書いていきます。規模や内容によって大変さは千差万別ですが、個人で制作するにしろ外注するにしろ、大まかな流れを知っていれば、理想に近いモノをつくることができると思います。場合によっては、個人でも簡単なWebサイト制作を受注することもできます。

ホームページ作成サービスやCMSを使う場合でも役立つかと思いますので、初めてWebサイト制作をしようとしている人は、ぜひ参考にしてみてください。

 

1.企画・要件定義

① 現状把握をする

課題、要望の把握

・どういった課題があるか
・サイトを作って何をしたいか

予算、スケジュールの把握

② 課題・要望に対するアイディアを出す

目的、ターゲット

・何を目的としてサイトを作るか
・どんなユーザーからの需要を見込んでいるか、見込めるか

目標、運営計画

・いつまでにどの程度の結果を出したいか
・その結果を出すために何が、いつまで、どの程度必要か

ユーザーシナリオ

・ユーザーがどう見て、どう使って、何に満足するか

③ 編集(収集、整理、構築)する

競合調査

・ジャンル、コンテンツ構成、ユーザー層など

収集データ解析

・独自性はどこで出せそうか

④ 開発環境・コーディングなどのポリシーを決める

Webサイト運営プラットフォームの選定

・WordPressやWix、プラットフォーム無しなど

クラス名、インデントなどのコーディングポリシーの決定

⑤ サーバ・ドメインを取得する

 

2.設計

◯ ポイント

・UI(ユーザーが使いやすくするためにどうするか)
・UX(ユーザーの満足度を上げるためにどうするか)

① ラフスケッチを作成する

ラフスケッチ画像

盛り込みたい要素の洗い出し

・どんな内容をコンテンツとして発信するか
・どんな機能を加えるか

サイトマップを樹形図的に作成

※ 上記画像(左)を参照

画面デザインの作成

※ 上記画像(右)を参照

・何を、どこに、どのように表示させるか
・マウスアクションや画像はどうするか
・配色はどうするか(ベースカラー70%、メインカラー25%、アクセント5%)
・書体はどうするか
・レイアウトはどうするか(近接、整列、反復、コントラスト、カラム数)

② モックアップを作成する

モックアップ画像

開発を考えながら、完成に近い形で作成

・配色、書体、レイアウトをどうするか

 

3.開発

テキストエディタ画像

① HTMLでマークアップ作業をする

② CSSでレイアウト組みと装飾をする

③ 更なるカスタマイズを行う

・画像やロゴの用意、jQueryやWordPressプラグインの検討

④ サイト分析ツールやSNS連携、SEO内部施策などの設定をする

・Googleアナリティクス、サーチコンソール設定
・OGP設定
・タイトル、メタディスクリプション設定

 

4.評価・調整

① 各ブラウザで確認する

・仕様書に沿って画面の表示や動きを確認、修正

 

5.公開・運用

データ集計やサイト更新、セキュリティ対策など、サイト運用していく際には、以下の点を意識するといいと思います。

RAMS(Reliability, Availability, Maintainability and Safety)

R  信頼性(= 不具合を発生させない)
A  可用性(= 必要なときに利用できるようにしておく)
M 保守性(= 侵入させない、すぐ修正できるような体制を取る)
S  安全性(= バックアップ、アップデートを忘れない)

「RAMS」とは、システムの信頼性や安全性の評価をおこなう手法を規格化したものであり、就職活動していたときに参加した企業の説明会で耳にしたものです。この考え方はサイト運用でも当てはまると感じたので、今回私の解釈も加え紹介しました。

 

Webサイト制作において全体像を把握することは、とても大切

Webサイト制作の大まかな流れについて、ワークシートのような形で簡潔に書いてきました。サイト制作は、設計までの工程をしっかり踏んでいないと後々修正が難しくなったり、思い通りにならない場合もあります。こなす項目は数多くありますが、力を入れるべきところでは力を入れ、気持ちよく運営ができるようにサイトを構築してみてください。

よく読まれている記事

8stepの画像 1

キーボードは、PCを使って仕事をする人にとっての必須アイテム。 野球で言えばグローブ、TVゲームで言 ...

制作サイトのトップページ画像 2

プログラミングスクール選び、悩みますよね? ここ数年でスクールがどんどん増えてきて、プログラミング初 ...

Futureの画像 3

「ITエンジニアになろうかな〜」という気持ちが少し出てきたとき、「でも、IT業界の将来性って実際どう ...

Why Could?の画像 4

20代後半、業界未経験、プログラミングほぼやったことない・・・ 今は、そんな人でもITエンジニアにな ...

TOP5の画像 5

今から約1年前、「20代後半の業界未経験者を転職エージェントって相手にしてくれるのかな〜」と思ってい ...

-プログラミング・学習

Copyright© TUGIとHAGI , 2017 All Rights Reserved.