Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

3 1 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)WEB
この記事は約57分で読めます。

Webデザイナーとして就職すると、突然湧き出る仕事の多さに圧倒されることでしょう。

というのも、クライアントとなる企業の代表や取締役、常務など知の巨人たちと先輩方がお打ち合せを重ねているため。

3 2 1024x662 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

新人デザイナーの関わらない個所で準備が進んでいるため、いつも突然仕事が目の前に降ってくる感覚を味わっている事でしょう。

今回の内容は新人の目には見えない部分、「Webサイトの目的」→「実制作」までとなります。

そもそもなぜWebサイトが必要なのでしょうか?

  1. Webサイトに求められるもの
    1. Webってそもそも何?
    2. WorldWideWebの仕組み
    3. Webサイトは世界に何個ある?
    4. 電車から新聞が消えた日
    5. 面倒なものは消えていく
    6. アナログからデジタルへ
  2. サービスとインターフェイス
    1. UXデザイン(ピジョンシュミレータ&ブレスオブザワイルド)
    2. UIデザイン(ペルソナ5&スプラトゥーン)
    3. UX+UIの具体例(APEX LEGENDS)
  3. Webサイトの目的
    1. Webサイトの立ち位置
    2. Webサイトを作る理由
  4. Web制作の開発方式
    1. 古来からのウォーターフォール開発
    2. アジャイル開発の導入
    3. 開発方式の両立
  5. Web開発のためのサーバーとブラウザ選び
    1. ブラウザ戦争と主要ブラウザ9選
    2. サーバーとレンタルサーバー6選
  6. プロジェクト(企画/計画)規模
    1. 宇宙に行くには何人必要?
    2. 製品開発に見るプロジェクトチーム
    3. プロジェクト(企画/計画)の種類
  7. チームの構成
    1. プロジェクトを実現させる専門家の集結
    2. 組織の構成【機能別組織】
    3. プロジェクトチーム【専門家集団】
    4. TIPS:マトリックス組織
  8. Webサイト制作のおおまかな流れ
    1. Webサイト制作の15工程(全体フロー)
    2. プロジェクトのゴールとコンテンツを定める
    3. ターゲットを知る(ターゲットとペルソナ)
    4. サイトマップを作る
    5. スケジュールを定める(マイルストーンとガントチャート)
    6. 仕様書を用意する(制作仕様書と要件定義書)
    7. 見積もりを算出する
  9. チームの編成
    1. プロジェクトの実現には誰が必要?
    2. 組織成功のためのリーダーシップ理論2種
    3. 部下のモチベーションを支える2つの秘訣
    4. TIPS:リソースの管理
  10. チーム力増強のためのグループワーク
    1. みんなで遊んで頭脳を鍛えるボードゲーム(BDA)
    2. 共通認識を作るピクトセンス
  11. Web制作用語を覚える
    1. Web制作でまず覚えたい用語11選
    2. 用語クイズに挑戦してみましょう
    3. 自分の能力を知る(ダニングクルーガー)
    4. 国家検定の存在
    5. 実践:AI+DTP+ARを使用したWebサイトの制作
  12. Web制作に必要な書類たち
    1. 制作前の書類
    2. 打ち合わせ+事前質問書
    3. 制作中に使用する書類
    4. 要件定義の内容
    5. 納品関連の書類
    6. 経理関連の書類
    7. 税務関連の書類

Webサイトに求められるもの

Webってそもそも何?

大人の教養 インターネット史

1969年10月29日にアメリカで開発された軍事用通信システムARPANETが基となりWebは開発されました。

「ARPANET」は「メタルギアソリッド」や「Xファイル」などの創作物にも登場する、インターネットの卵。

Arpanet logical map march 1977 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
ARPANET論理マップ

IPルーティングやTCPなど現在のインターネットに欠かせない技術が開発されましたが、1986年全米科学財団(NSF)による「NSF NET」が開設されると徐々に下火に。

「ARPANET」は1990年正式に消滅するのですが、その理論や機材は「NSF NET」に引き継がれ、研究舞台が移り変わったとも言えます。

1989年~1990年CERN研究者「ティム・バーナーズ=リー」により現在の[Worl Wide Web]が提案され、あわせてWebブラウザ・Webエディタ・Webサーバーが開発されたことを皮切りに、「NSFNET」は徐々に民間へ開放、現代インターネットの礎となりました。

IP(Internet Protocol)ネットワークに接続されている全てのコンピュータに対して、IPアドレスと呼ばれる番号を付与し、その番号を用いて通信先の指定及び呼び出しを行う。
簡単に言うと「インターネットを使ってやりとりするときのお約束事」、IPアドレスが住所の変わりとなり、パケット(データ単位)で情報を送りあう仕組みの総称です。
ちなみに、IPアドレスを「IP」と呼ぶのは厳密には誤記誤称。
ルーティング異なるネットワークを共通のアドレス体系や通信方式で結び、拠点間・機器間でバケツリレー式に転送を繰り返して宛先まで届ける仕組み
スマホでメールを送るときは、{スマホ→基地局→基地局…→相手}とルーティングを繰り返しメールが相手に届いています。
簡単に言うとカーナビのようなもので、ルーターが相手先までの道順を計算し実行してくれています。
TCP(Transmission Control Protocol)データの受信確認や再送制御により伝送の確実性を確保するコネクション。
配送事故がないように、相手に確実に届いたか確認しながらデータ転送する仕組みです。
メールやチャットがほぼ確実に届くのはTCPのお陰です。

WorldWideWebの仕組み

インターネット=WWWではありません。

【パソコン用語】「インターネット」とは?ざっくり解説!【小学生でもわかる】
インターネットとは何か
インターネット異なるコンピューター同士をつなぐネットワークの総称
WWW(ホームページ/ECサイト)やメールなどを使うための土壌です。
WWW(WorldWideWeb)蜘蛛の巣のように張り巡らされたハイパーテキストシステムの総称
URLや文書内リンクにより、世界中どのコンピューターにも繋がる様を蜘蛛の巣になぞらえて命名されています。

WWWはTCP/IPの上で動くプロトコル(通信規約)の1種、HTTPを利用しデータ転送を行っています。

データ転送のみですので、ホームページはHTML(HyperText Transfer Protocol)コードと画像等のバイナリデータ(0101001のような2進数)が組み合わされた羅列でしかありません。

これを人間の目に見えるようレンダリング(可視化)してくれているのが「Webブラウザ」というわけです。

監修者インタビュー 常設展示「インターネット物理モデル」村井純
日本科学未来館インターネット物理モデル

日本科学未来館では極めて難しいこの内容を、目に見える形で常設展示しておりますので、ご興味ありましたら是非足をお運びください。

プロトコル名内容
HTTP(Hypertext Transfer Protocol)WebサーバとWebブラウザの間でWeb情報をやりとりするためのプロトコル
HTTPを使ってサーバとクライアント(ユーザ)間でやり取りが行われます。
HTTPS(Hypertext Transfer Protocol Secure)SSL(暗号化通信)によってセキュリティを高めたHTTP。 
HTTPSにすることで、通信経路での第三者による情報の盗聴や改ざんのリスクを防止できるプロトコル
現在は[HTTPS]が主流で、HTTPサイト利用時は安全性への警告が表示されます。
FTP(File Transfer Protocol)ファイルを転送するための通信規格。
クライアントとサーバ間で、ファイルのアップロードやダウンロードを行うときに使われるプロトコル
現在ではより安全な[FTPS]や[SFTP]プロトコルが主流。
SMTP(Simple Mail Transfer Protocol)
POP
(Post Office Protocol)
メールの送受信に用いられるプロトコル
現在はPOP3が主流ではあり、メールアプリの初期設定時に入力を求められる。

Webサイトは世界に何個ある?

FireShot Capture 811 Total number of Websites Internet Live Stats www.internetlivestats.com  1024x591 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
全世界の独自ドメイン数

2022年、全世界のWebサイト数は約19億サイト(Total number of Websites発表)もあるそうです。

これは、15人に1人が何らかのサイトを持っている計算となります。

00007 1024x502 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
Webサイトの需要は右肩上がりに増加傾向

ちなみにブログやSNSは含まれておりませんので、実数はさらに膨大な数となっていることでしょう。

主要なWebサイトの用途は、企業案内・製品紹介・サービス・ニュース・コミュニティ・作品集・オンラインショップなど。

1つ疑問に思う方もいるかもしれません、「作品集とか名刺とか、そのサイト紙じゃダメなんですか?」

電車から新聞が消えた日

0011 1024x446 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
2021年オウチーノ総研アンケート結果より

皆様にはあまり馴染みがないかもしれませんが、ほんの20年前までは電車やバスなどで新聞を読む方が大勢いたものです。

現在はどうでしょう?グリーン車以外で滅多に見かけることがありません。

2 1 1024x598 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
「日本財団」2021年意識調査より

上記は「新聞を読まない理由」のアンケート結果です。

「面倒くさい」が3割を越えており、「新聞をとっていない」「お金がかかる」が次点を抑えています。

2~3位は理由が被っている気もしますが、お金の使い道を吟味した結果なのでしょう。

新聞紙1枚のトートバッグ♪News Paper Bag【Paper Craft Tutorial】
新聞紙で作るトートバッグ
親子で作ろう♪災害時にも役立つ【簡単】新聞紙スリッパ!
新聞紙で作る紙スリッパ

さて、新聞の発行部数は2000年より下がり続けている傾向にあります。

2000年はネットニュースが頭角を現した時期でもあり、その後「ホリエモン」さんがライブドアを一躍有名にしました。

2007年ごろにはスマートフォンが国内で大流行。

4年後の2011年には、約20%の方々がスマートフォンを所有するようになりました。

この頃には既に電車から新聞が消えています。

l asa mobasuma 01 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
スマートフォン保有率の遷移(NTTDocomoより)

面倒なものは消えていく

もう何もかも面倒くさい時にみて欲しいアニメ
【怠け癖を直す】人が怠ける理由とやる気を出す方法3選

2021年アンケートでも「面倒くさい」が新聞を読まない理由1位となっています。

セミナーに参加するのも面倒だなと感じた人は9割を超えるでしょう。

人間は面倒事が大キライです。

00005 1024x483 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
面倒くさいの正体(書籍「めんどくさいがなくなる脳」より)
https%3A%2F%2Famzn - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
Amazon.co.jp

新聞は広げるのも畳むのも契約するのも解約するのも面倒なモノ。

新聞を読んでいた層が現在何を見ているかというと、「SNS」「ニュースアプリ」「ニュースサイト」「匿名掲示板」「電子書籍」などです。

すき間時間にちょっとだけ見て、閉じるのも簡単、好きな物だけ見ることができます。

0012 1024x468 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
2021年オウチーノ総研アンケート結果より

アナログからデジタルへ

Webサイトを作る理由は、ユーザーや管理者にとってラクだからです。

たとえばこのサイトも出版物であれば、誤記が見つかった時点でそれはもう面倒なことになります。

0006 1024x323 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
誤記の実例(書籍「信長読本」より)

さらに現代では、Webでしか表現できないものが多々出てきました。

映像やアニメーション、検索、ショッピング、チャット機能などなど。

Webを制作する側にとっては大変なのですが、面倒くさいという「ニーズ」に対し、体験という「付加価値」を持ったWebサイトの需要は右肩上がりの傾向が続いています。

体験型バーチャル英語学習サービス「VIRTUAL GLOBAL GATEWAY」
都心に続々「体験型カフェ」【Nスタ】

如何に「面倒じゃない」けど「体験のある」サイトを作るか、というのはデザイナーにとっての課題です。

これをUXデザインUIデザインと呼称します。

サービスとインターフェイス

UXデザイン(ピジョンシュミレータ&ブレスオブザワイルド)

【基本】UXデザインを始めるには?

デザインの知識として「UX」と「UI」は避けて通れません。

ちなみに2022年は従来のCX(カスタマーエクスペリエンス)・UX(ユーザーエクスペリエンス)・EX(従業員エクスペリエンス)を全て融合したTX(トータル・エクスペリエンス)が主流となってきています。

0002 1024x600 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
用語意味
UX(User Experience)UIを含むサービス全体の利用体験

UXとはつまり「体験」を意味します。

Web制作者が勘違いしがちなのは、「機能」と「体験」の混同。

如何に最新の機能を使おうと、ユーザーは「機能」を目的としてWebサイトを訪れるわけではありません。

ユーザーが求めるものは「体験」であり、「満足感」です。

「機能」はあくまで「体験」のためのツールにすぎません。

UX実例意図
LINEジャンルは無料メールアプリ。
これまでのメールと違い老若男女だれでも使いやすく、気軽に相手と会話を楽しむサービス体験を目的としています。
スタンプという機能で言葉に頼らないコミュニケーション体験を可能としました。
クックパッドジャンルは料理アプリ。
スマホから料理写真だけを取り出す「料理記録」機能により、自身の料理の軌跡を手軽に確認できるサービス体験を実現
栄養管理、献立の作成においても他の料理アプリと一線を画す使いやすさです。
amazonジャンルはネットショップ。
なんでも買える、手軽に買える、販売もできるというサービスをオンラインショッピング機能で実現
世界中どこからでも出品、購入ができるモノのバリアフリーを実現しました。

体験と機能の関係性はゲーム好きの方なら経験から実感できることでしょう。

下記動画のようにゲームとは機能を売りにしているものではなく、得られる経験や体験を販売しています。

リアルを追求すること(面倒事が増える)が必ずしもユーザーが望む体験ではないことがご理解いただけると思います。

『ピジョンシミュレーター』をハトと話せる動物心理学者とやってみた![前編]
【ゲームさんぽ/ゼルダの伝説】気象予報士・石原良純さんと『ブレス オブ ザ ワイルド』をやってみたら、天気の仕組みがよーーくわかった!

UIデザイン(ペルソナ5&スプラトゥーン)

【反面教師】ダサいUIから良いUIデザインを学びます

UXの中でインターフェイス(操作盤)部分をUIと呼称します。

あくまでUXの1部分でしかありませんが、UIの重要性は言わずもがな。

0001 1024x597 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
用語意味
UI(User Interface)UXの中でユーザーに見えている部分

UIに求められるものは「使い勝手のよさ」、要は面倒くさくないものです。

皆様が作るWebサイトも、UIの1部でしかありません。

使い勝手が悪いと、どれだけ良いサービスであってもユーザーは離れていくものです。

UI実例意図
SMBC銀行体験の入り口にあたるWebサイト。
膨大な情報を扱う銀行サイトは、ユーザーが情報を探すのに一苦労します。
SMBCサイトは対面と変わらない親切な接客をテーマとしたWebサイトです。
メルカリサイトやアプリも使いやすいのですが、あえてロゴに着目。
メルカリは「箱から飛び出すワクワク」がCI(コーポレートアイデンティティ)ですが、モーションも含めて企業理念が伝わるデザインとなっています。

こちらもゲーム制作の舞台裏を見てみましょう。

参考のリンク先よりUI設計工程や色彩設計など、UIの意図が見えてくると思います。

Splatoon(スプラトゥーン) 紹介映像

参考:スプラトゥーンのUI制作

UX+UIの具体例(APEX LEGENDS)

【APEX】UIデザインが凄すぎるよ①--メニュー画面編--/ゲームさんぽ
【APEX】UIデザインが凄すぎるよ②--バトル編--/ゲームさんぽ

GoodDesign賞はご存じでしょうか?

この賞を受賞したデザインはUX・UI共に優れたものばかりです。

Webサイトおよびサービスも選ばれていますので、是非参考にしてみてください。

参考:GoodDesignAward

さて、UX・UIの関係性通りデザインとは何かの1部を担うパーツです。

それでは、Webサイトは何を担うのでしょうか?

00008 1024x366 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

Webサイトの目的

Webサイトの立ち位置

Webサイトとは企業経営戦略の一部でしかありません。

下記動画のように目的を達成するための道具です。

【A列車】観光のプロと街づくりゲームに本気で挑戦してみた
目的:街の経済発展 手法:区画整備
【ゲームさんぽ/トロピコ6】森永卓郎さんと考える独裁国家の経済戦略!(前編)
目的:経済的独立 手法:独裁政治

まずは、Webサイトが企業活動のどこに位置するのかを見てみましょう。

下図は役職や項目などをだいぶ削っておりますが、おおまかな仕事の流れを示しています。

仕事とはつまりこの図表そのもの、価値を作ることです。

3 1 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
Webサイトの立ち位置

皆様が作るWebサイトがどこに位置するか把握できましたか?

図表の通り、Webデザインは経営理論の1部です。

ちなみにユーザーとは、顧客の他、取引先や授業員も含みます。

企業が行う具体的な活動の総称。資本(人・設備・お金など)の分配を主とする。

計画書や定款は経営者の思想や思惑に触れるインターフェイスとなる。

企業活動の具体的な方針。(別名:社訓)

これを基に経営ビジョン(将来の具体的な姿)としてドメインブランドCIなどを設定する。

インターフェイス化したものがロゴやコーポレートカラー、イメージキャラクター。

経営ビジョンの中に含まれる項目ですが、「ドメイン」は事業領域「ブランド」は集合要素(価値・経験・ビジョン・カルチャー)からなる識別性(名称・記号・言葉・シンボル・デザインの組み合わせ)「CI」は企業イメージ・行動様式の統一化を指し示す用語です。

Strength(強み)Weakness(弱み)Opportunity(機会)Threat(脅威)の頭文字をとった略語。

自社をとりまく外部環境および自社の内情を分析し、戦略策定、マーケティング、資源最適化などを行うフレームワーク。

この分析をもとにパンフレットや企業紹介映像、イメージ写真などがインターフェイスとして作成される。

GDPやデフレ、インフレ、需要と供給など企業活動の外部環境分析に用いられる学問の1つ。

財市場分析もあり、デフレ期のデザイン、インフレ期のデザインなどが含まれる。

バブル期のデザインなどを調べてみるとインフレ傾向で流行るデザインのヒントになりますよ。

参考:国土交通白書2019

組織の構造形態(マトリックス組織や事業部制組織)など、最適な組織構造を定めるものが組織構造論。

リーダーに求められるもの、部下のモチベーションを上げる方法などが組織行動論です。

どのような市場に、どのような製品を投入するかを定める戦略。

シェアの独占や利益率向上を目的としている。

Product(製品)・Price(価格)・Promotion(プロモーション)・Place(流通≒チャネル)の頭文字をとった略語。

「ブランド構築」「価格戦略」「宣伝方法」「付随サービス」など、マーケティングの基礎でありワークフレームに該当する。

市場戦略と4P戦略をより具体化したもの。「誰に」「何を」「どのように」「えられる付加価値(効果)」の4点を指し示すフレームワーク。

これによりモノ(製品)とコト(サービス)がインターフェイスとして開発される。

①市場調査 ②市場細分化(セグメンテーション) ③ターゲティング ④ポジショニング ⑤マーケティングミックス(4P)からなる戦略策定フレームワーク。

ビジネスモデルを更に細分化し、顧客層を浮き彫りにした具体的な販売方針となる。

地理的な統計に基づいた分析をジオグラフィックデータと呼称し、対象ユーザーの心理学的変数(価値観・生活・こだわり)に基づいた分析をサイコグラフィックデータと呼称する。

地理的要因と性格的要因から顧客のニーズを探るフレームワーク。

年齢や性別、居住地などジオグラフィックに基づいた属性をターゲットと呼称します。

職業や嗜好、家族構成などサイコグラフィックに基づいた属性がペルソナです。

社会全体から見たヒトの行動面、精神面分析を社会心理学と呼称し、流行や誰に投票するかなどを予測する学問です。

行動や仕草のパターンから精神面を分析する学問を行動心理学と呼称し、主に個人を対象に使われます。

実際にはマーケティング戦略より下位業務全てをマーケティング活動と呼称するのですが、あえてここでは販売や広報など、具体的な手法を掲載しています。

この具体的な手法をインターフェイス化したものがWEBサイト、チラシ、パッケージ、プラットフォームなどです。

オンラインマーケティングにはWEBが必要になってきますね。

Webサイトを作る理由

0002 1 1024x699 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

企業活動の1部にあたるWebサイトは、企業にとってのブランド価値を高めたり、利益率向上などを目的としています。

Webサイト制作の起点には何らかの経営目標があり、それを叶える道具がWebサイトです。

皆様の仕事の真価は、目的となる経営目標を達成できるかにあります。

【ゲームさんぽ/マイクラ不動産③】みんなでつくろう「さんぽシティ」!ムロタさんの考える理想の都市計画
待機児童を減らす都市計画
【ダークソウル3×建築史家#02】アノール・ロンド周辺は短期間の工事で一気に建築された可能性が高い〔ゲームさんぽ〕
短期間で作る建築工事

Web制作の開発方式

古来からのウォーターフォール開発

デルタ工業「開発vs製造ラップバトル」篇

Webサイトの立ち位置で使用した図表のように、仕事は上流から下流へ落ちていきます。

各工程が終わらない限り、直下に仕事が流れないため、下流で業務にあたる人間は直前まで業務情報が得られない場面が多々あります。

0010 1024x547 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

この仕事方式を「ウォーターフォール」(滝)と呼称するのですが、皆様が業務に就く場合の多くが下流からのスタートとなるでしょう。

別名は「分業制」、上流で定めた計画を寸分の狂いなく実行していきます。

0031 1024x612 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
ウォーターフォール形式

たとえば「問い合わせフォーム作っておいて」と業務指示があった場合、仕事の流れが把握できないと「何のために、誰のために必要なのか」が理解できないものです。

そのため見当外れな問い合わせ項目を付けてしまったり、ユーザーに伝わらない文言を使用してしまいます。

仕事をする場合は上流で何が決まり、なぜ自分の業務が必要なのか把握することが肝要です。

自分の仕事の重要性を知る事にも繋がりますので、モチベーション維持にも繋がる事でしょう。

巷で言われる「経営者視点になれ」というのは、このことですね。

アジャイル開発の導入

【魔法使い爆誕】弟者の「エルデンリング(ELDEN RING)」【2BRO.】#1
トライ&エラーを楽しむエルデンリング
【SEKIRO】ゲームスタート~まぼろしお蝶まで #1
トライ&エラーを楽しむSEKIRO

ウォーターフォールと対を成す開発方式に「アジャイル(トライ&エラー)」というものがあります。

各工程が終わってから直下工程に進むのではなく、同時並行的に進める開発スタイル。

0013 1024x525 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

デザイン業界ではアジャイル開発が主流になりつつあるのですが、アジャイルを簡単に言えば「1人およびチームで全部やる」開発方式となっています。

また、計画も段階に応じて適宜変更されるのが特徴です。

003 1 1024x598 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

ただし、企業によってアジャイルの範囲はまちまち。

計画から最終テストまで含めてデザイナーが担当する場合もあれば、デザインから制作までを担当する場合もあります。

業務範囲は組織構造やプロジェクト規模に基づいて分別されるので、気になる会社があれば面接時などに直接聞いてみると良いでしょう。

このアジャイル開発は、PDCAサイクルによく似たフレームワークとなっています。

10000 1024x598 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

営業やマネージャー、品質管理などの立場ではPDCAという単語を耳にタコができるくらい聞くものですが、アジャイル開発という単語もデザイン会社では何度も聞くこととなるでしょう。

開発方式の両立

「ウォーターフォール」と「アジャイル」2つの開発方式がありますが、実務ではどちらも使います。

つまり昨今のデザイナーはどちらの開発方式にも順応できるよう、全てに対応できる実務力が求められていることを示します。

便宜上アジャイルの難易度を低と設定しておりますが、制作側の実務的難易度はさほど変わりません。

ウォーターフォールは販売後の効果を想定した計画作成が求められるため、難易度高としています。

0004 1024x346 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

プロジェクト規模が100pオーバーとなるWebサイト開発は、数名のデザイナーがアジャイル開発で作っても終わりません。

このように大規模な開発は必然的にウォーターフォール開発となります。

不動産にたとえると、タワーマンションを工務店1社に作らせるようなものです。

参考:おしごとはくぶつかん 超高層マンションってどうやってつくるの?

逆に10p程度のWebサイトをウォーターフォール開発で作ろうとすると、資源分配(ヒトやモノの配置および費用)に無駄が生じます。

10部屋程度のアパート1棟に、清水建設様や三井不動産様を呼ぶのはオーバースペック過ぎますよね。

【清水建設】スーパーゼネコンの年収を暴露!入社できる人の特徴とは?
平成最大の挑戦 有明体操競技場の建設

Web開発のためのサーバーとブラウザ選び

ブラウザ戦争と主要ブラウザ9選

Webサイト開発においてサーバーとブラウザは必須の設備。

どちらが欠けてもWebサイトは立ちゆきません。

MIcrosoftEdgeやGoogleChrome、Safariなど皆様がWebサイトを閲覧するときに使用するのがWebブラウザです。

動画はGoogle公式による検索エンジン解説動画ですが、200以上あると言われるSEOの評価基準についても1:15~あたりから解説しています。

【戦略】五分で分かる、ブラウザ戦争【ドラマ】

ブラウザがインターネット史に登場するのは1993年NCSAで開発された「NCSA Mosaic」から。

WindowsやMacintosh向けにも提供された画期的な仕様が魅力的で、現代ブラウザの礎になっています。

現代のブラウザは多様化が進み、スマホやタブレットへの対応(レスポンジブ)以外にも様々なブラウザが存在します。

Webデザイナーは主要なブラウザでの動作チェックがかかせません。

ブラウザ名特徴
GoogleChromeシェア率43%(2020年)を誇るブラウザの王様とも言えるシステム。
高スペック、動作性にも優れており、カスタマイズ性も高い代物です。
InternetExplorerシェア率25%のWindows標準搭載ブラウザ。
脆弱性が高く、Microsoft公式もEdgeへの乗り換えを推奨しています。
Mozilla Firefoxシェア率は15%ですが、2019年に脆弱性が発見されセキュリティアップデートが推奨されています。
この脆弱性は非常に危険なもので、悪意あるWebサイトを閲覧した場合PCを乗っ取られる恐れがあります。
Safariシェア率7%のMacおよびiPhoneに搭載されている標準ブラウザ。
Macに最適化されているので基本はMacでの利用が主となります。
最適化故にMacでの動作は快適
Microsoft Edgeシェア率6%のWindows10以降標準搭載ブラウザ。
IEに比べるとスペックは高まっているのですが、他ブラウザに敵うものがありません。
Googleから脆弱性の指摘も受けている代物で、Microsoftのブラウザ評価はあまり高くありません。
Operaシェア率1%のセキュリティ特化型ブラウザ。
広告ブロック、マイニングスクリプトブロックなどが標準搭載されており、Chrome並みの処理速度もあります。
親御様のPCなどにインストールしてあげると架空請求被害などを防止することに繋がるでしょう。
Sleipnirシェア率0.5%の日本製ブラウザ。
フォントレンダリングが特徴で文字がキレイ、マウスジェスチャ機能も搭載されております。
処理速度は中くらい、Chormeより遅くIEより早いといった程度です。
Vivaldiシェア率0.2%、Opera創始者の1人が開発したブラウザです。
タブ管理に特徴があり、同時に複数ページを開く方は重宝するかもしれません。
スペック的にはChromeと同程度、Chromium製ですのでChormeアプリも使えます。
Maxthonシェア率0.1%の中国製ブラウザ。
もともとは政府検閲から逃れるために開発されたブラウザです。
こちらもChromium製のためChomeアプリが利用可能。
中国出張でお世話になるブラウザです。

サーバーとレンタルサーバー6選

「サーバーとは?」5分でわかりやすく解説!
GMOクラウドによるサーバー解説

インターネットの基礎たるネットワークを構成するのは、「サーバー」と「クライアント」、この2種のコンピューターです。

Webデザイナーの多くはWebサイトを公開する際にレンタルサーバーを利用するのですが、サーバーとはデータを保管運用する金庫のような役割を担っています。

何名ものクライアントが同時多角的にアクセスするので、サーバーには高い情報処理能力および堅牢性が求められます。

【ハッカーのリアル】元海外特殊部隊のハッカーが解説!『ウォッチドッグス2』のハッキング〜前編〜【特別出演:ひろゆき】
【セキュリティの極意】元海外特殊部隊のハッカーが解説!『ウォッチドッグス2』のハッキング〜後編〜【特別出演:ひろゆき】

サイバー攻撃もありますし、地震や火災といった災害にも対応できなければなりません、さらにはトラフィック(通信容量)に備える耐久性も必要です。

代表的なレンタルサーバー特徴
AWS(Amazonウェブサービス)世界シェア1位。
商用で最も利用されているであろうサーバーで、ゲームアプリなども大半がAWSにて運用されています。
高い耐久性、堅牢性を備えた従量課金制(アクセス数に応じた料金)サーバー。
法人利用かつ大規模サイトやアプリであればAWS一択の現状にありますが、料金は今回比較に用いた他サーバーの10倍以上ですので、本当に必要かご検討ください。
GMO系列ConoHa・お名前ドットコム・ロリポップ・XREA・iCLUSTA・ヘテムルなどが該当。
お名前ドットコムは独自ドメイン取得で利用される方が多いため、GMO系統サーバーの利用率は高いです。
法人~個人まで幅広く利用され、それぞれ料金体系やサポートなどが若干異なります。
サービス充実度が最も高いのはトラフィックにも強いConohaサーバー。
さくらインターネット参考書などに多く登場するレンタルサーバー。
特徴は料金の安さにありますが、ややトラフィックに弱い印象を受けます。
強みである料金もXREAの方が安いです。
サーバーバックアップは利用者が行わなければならないので、初心者向きとは言い難い代物。
エックスサーバー系列エックスサーバー・wpXが該当。
wpXはトラフィックに優れており、混雑時でも安定した通信を可能としています。
トラフィックに強いのは次点でconohaサーバーとなり、GMO系統・エックスサーバー系統でランキング首位を争っている印象を受けます。
カゴヤジャパンGMO・エックスサーバーに次ぐトラフィック耐久性を持つのですが、サポートや料金面はやや不利。
とはいえ根強い人気があるレンタルサーバーです。
Rebyc系列FUTOKA・ラクサバが該当。
ラクサバはさくらインターネットより料金が安く(月額99円~)、FUTOKAはサポート充実の特徴があります。

プロジェクト(企画/計画)規模

宇宙に行くには何人必要?

宇宙の大きさを体感できる動画

アポロ計画をご存じでしょうか、宇宙開発史に残る人類の偉大な功績の1つです。

1961年~1972年にかけてNASAにより実行され、人類は月を目指しました。

このプロジェクトは1969年、大成功を納めます。

アポロ11号(サターンⅤ)の月面着陸、白黒写真や映像で見たことがある人も多いかと思います。

さて、当時の11号月面着陸プロジェクトには何名のスタッフが関わっていたでしょうか?

人類が月に第一歩を刻んでから50年。アポロ計画を振り返る
20世紀の記録 月への挑戦/人類の偉大な一歩

正解は40万人、女性エンジニアも多数参加しており平均年齢は27歳です。

千葉県と比較すると、柏市の全人口に匹敵します。

0000001 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

鳥取県民の総人口は約55万人(2022年)ですので、NASAプロジェクトの巨大さがより伝わるでしょう。

参考:BBC-NEWS

FireShot Capture 824 www.jaxa .jp  1 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
【JAXA用語】MDR…ミッション定義 SDR…システム要求 PDR…基本設計審査 CDR…詳細設計審査

参考:JAXA-新型基幹ロケットの開発について

宇宙開発プロジェクトはウォーターフォールとアジャイルの組み合わせで構成されています。

ロケット製造は、設計書の通り寸分の狂いなく開発しなければなりません。

下記Youtuberさんのように、ロケット製造部署が思いつきでロケットを作ると大惨事を引き起こします。

エンジンを100基詰めば航空力学を無視して宇宙に行ける説
アジャイル開発で宇宙を目指す教育的コンテンツ
大量の爆弾を使って宇宙にブッ飛ぶ
製造過程における計画性を学ぶ教育的コンテンツ

上記2つの動画のように彼らが行っている開発方式はアジャイル開発なのですが、月面着陸チーム(宇宙飛行士)も常にアジャイルを強いられます。

宇宙では何が発生するかわからないため、宇宙飛行士達は自分たちで状況判断するしかないのです。

このようにプロジェクトとは複数の開発方式を持ったチームで構成されています。

4人で未知の惑星を調査するぞ【ASTRONEER】
チーム性と担当者別を学ぶ教育的コンテンツ
【無人島”リモートワーク”サバイバル】Ep.1究極のリモートワーク開始!WILD Allie2 (ディスカバリーチャンネル)
島流しサバイバルを成功させるアジャイル開発

製品開発に見るプロジェクトチーム

新製品発売でも複数のチームが異なる開発方式で参加していますね。

FireShot Capture 825 ocw.u tokyo.ac .jp  - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

参考:東京大学経済学部-経営管理

製品開発チームは計画を立てます。

この中にはレシピも含まれており、レシピをもとに製造チームはウォーターフォール方式で実製品を作り上げます。

ロット毎に味や見た目が変わっては、計画が破綻してしまいますよね。

下記は実務でやっちゃいけない製造工程および都市計画例です。

バターをまるごとトッピングしたカップケーキはインスタ映えするよねクッキングシミュレーター
調理過程における計画性を学ぶ教育的コンテンツ
観光地を大量に建てれば最強の観光都市になる気がする
都市計画における計画性を学ぶ教育的コンテンツ

逆に販売チームは臨機応変な対応を求められます。

たとえば店頭販売において、NPCのように全ての人間に同じ対応するのは不可能です。

こちらはアジャイル方式で販売というプロジェクトの一端を実行しています。

つまり販売員は難易度は違えど、宇宙飛行士と同じことをやっていると言えます。

地球はもう駄目そうだから火星に移住しよう【Surviving Mars】【ゆっくり実況】#1
火星移住生活を体験するアジャイル型シュミレーション
コンビニ店員となってクソ上司に悪態つきながら客にいろいろおごってもらうジョブシミュレーター
コンビニ店員を体験する教育的コンテンツ
list - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)

参考:高島屋-販売員育成プログラム

大手企業以外では教わるワケでもなく、自分の経験と創意工夫で「高齢者向け」「子供向け」の対応を開発しているのです。

尊敬に値しますね。

プロジェクト(企画/計画)の種類

バカにつける薬を作って大儲けするプレイグインク
バカにつける薬を開発する案件プロジェクト例
一度入ったら絶対に出られない遊園地を作るプラネットコースター
顧客滞在時間を延ばす社内プロジェクト例

宇宙開発、製品開発と2種類のプロジェクトをご覧いただきましたが、プロジェクトの達成には部門や事業、組織の垣根を超えて、同じ目的を達成するためのチームがかかせません。

まず、大まかな分類としてプロジェクトは2種に大別されます。

①社内プロジェクト社内環境改善・ISO取得・コスト削減・新技術確立など企業改革を目的とするプロジェクト
②案件プロジェクト新事業・新製品開発など事業として収益をもたらすことを目的としたプロジェクト

プロジェクト毎に納期や予算は様々。

たとえば、案件プロジェクトとなるJAXA宇宙開発は10年計画です。

マイルストーン(工程表)の進捗毎に中核となるチームは変動しますが、予算規模・拘束期間・難易度全てのボリュームが大きいプロジェクトとなっています。

このプロジェクトを達成するため、部署、事業部、企業、官公庁といった組織から人員が選抜されプロジェクトチームが構成されています。

別な例で言えば、著名なYoutuber様も1人で運営しているわけではないのです。

FireShot Capture 835 仕事を知る UUUM採用サイト recruit.uuum .co .jp  1024x511 - Web制作の基礎:Webサイトの制作フローと制作書類まとめ(2022年版)
Youtuber(UUUM様)のスタッフ構成

参考:UUUM中途採用

対して、社内プロジェクトというものも存在します。

ヒヤリハット報告からなる社内安全強化プロジェクトや、ブランド価値を高めるためのISO取得プロジェクト、新人育成を目的とした社内教習プロジェクトなどが該当します。

こちらも部署、事業部、企業といった組織の垣根を超えた人員が選抜されてチームを構成しています。

「あなたと世界を変えていく。」 モバイルSCOT 30秒