ワークフローとプロセス

代表的な技術の組み合わせ

ウェブサイトを構築する際には、さまざまな技術を組み合わせて使用することになりますが、これは一般に技術スタックと呼ばれます。ウェブサイトが大きくなり、複雑になるにつれて、技術スタックも同様に複雑になっていきます。デモを作成する段階では、自分やいくつかの人員しか閲覧しないため、最初はシンプルな構成で済むかもしれません。しかし、一見単純に見える本番用ウェブサイトの技術スタックも、次のような要件を考えてみると、当初考えていたよりも複雑である可能性があります。

• すばやく読み込むこと（これがパフォーマンスの目的です）。
• 多数のユーザーを同時に処理できること（スケーラビリティが確保されている必要があります）。
• 設計が適切であり、ユーザーがサイト内の情報やサービスに簡単にアクセスできること。
• チームが開発や保守を容易に行えること。

とても大まかに言えば、ウェブアプリケーションの技術スタックは同様に次のような構成になるでしょう。

フロントエンド
HTML, CSS, JavaScript
|
バックエンド
Node.js, .NET, PHP, Python, またはその他のサーバーサイド言語
|
データベース
MySQL, Postgres, MongoDB, またはその他のデータベース
|
ウェブサーバー
Apache などのサーバー製品や、Netlify のようなサービスを基盤として構築した、独自のシステム

MDN で主にフロントエンドの部分を取り上げていますが、それさえもさらに多くの要素に分解することが可能です。フロントエンドを例に挙げると、

• ユーザーインターフェースを作成する際に、おそらく JavaScript フレームワーク（React など）を使用することになるでしょう。
• フレームワークでは、HTML の構造を定義するために何らかのテンプレート言語（Mustache など）を使用するだけでなく、動的に可変コンテンツを含む機能も指定されるでしょう。
• フレームワークと互換性のある方法で、CSS を使用してコンテンツのスタイル設定を行うための情報を記述します。これには、純粋な CSS、CSS フレームワーク（Tailwind など）、またはプリプロセッサー（Sass など）が使用される場合があります。
• JavaScript プロジェクトには、新しいコードを追加しても機能が損なわれないことを確認するための検査を含める必要があります。テストは通常、テストフレームワーク（Jest など）を使用して実装されます。
• 大規模なウェブサイトでは、ファイルサイズを小さくしたり、本番コードから未使用の要素を除去したりするなどしてパフォーマンスを改善するため、パッケージング／ビルドツール（Parcel など）が使用されます。
• などです。

同時に、実際の技術スタック以外にも、その管理やウェブサイト用資産の作成に役立つツールがいくつかあります。例えば、次のようなものがあります。

• 自分のプロジェクトの全期間を通じてするのが最適なことを大まかに計画するのに役立つ計画ツール（例: Miro など）。
• バージョン管理システム (VCS)。おそらく、GitHub などの git ベースの VCS を使用することになるでしょう。
• グラフィック／インターフェイスデザインツール（Figma や Canva など）。
• Trello や Asana などのプロジェクト管理ツール。

さて、かなり多くの情報を一度に受け止めるのは大変ですね。私たちのアドバイスは、慌てないでください！ この記事の目的は、突然、以前よりも 10 倍も学ぶべきことが増えたと思わせて、あなたを不安にさせることではありません。単に、ウェブサイトプロジェクト全体像を把握してもらい、今後遭遇する可能性のある用語について、基本的なことを慣れることが目的です。

いずれは、以上のツールや技術のいくつかについてある程度の知識を身につけることになるでしょうが、そのすべてに精通する必要はありませんし、そうである必要もありません。それこそがチームの存在意義だからです。現時点では、HTML、CSS、JavaScript といった中核となるスキルを学んでいることは、間違いなく適切な選択です。その他のツールや専門分野については、キャリアを積むにつれて自然と身につくでしょう。

職種

ウェブ開発チームには、さまざまな役割が存在します。それぞれの役割がどのようなものかを理解しておくと有益です。

プロダクトマネージャー

プロダクトの視点からウェブサイト全体を管理します。具体的には、市場におけるプロダクトのパフォーマンスはどうか、競合他社と比較してどうなのか。その強みと弱みは何なのか。ターゲット層が要求する新しい機能は何か、そしてどの機能が最優先なのか。ウェブサイトの主な成功基準は何か、そして最近追加された新機能はそれらの基準の達成にどのように貢献したのか。プロダクトマネージャーはデータを収集し、レポートを作成することで、チームが自身の業務の有効性を理解し、今後の業務の優先順位を決定できるよう支援します。

プロジェクトマネージャー

チームが遂行する必要がある業務の調整を担当します。プロジェクトマネージャーは、優先順位と期限を定めたプロジェクト計画を作成し、それぞれのタスクの担当者を割り当て、進捗目標が達成されているかを確認し、問題点を洗い出すために定期的な進捗会議を開催し、必要に応じて計画を調整します。

ユーザーエクスペリエンス (UX) デザイナー

製品のターゲット層のニーズを把握し、それらのニーズを最も効果的に満たせるよう、製品のワークフローや使い勝手を設計する役割を担います。UX に関する典型的な課題としては、「ユーザーがホームページにアクセスした際、まずどこへ誘導すべきか？」や「アカウント登録をできるだけ簡単かつ直感的にするにはどうすればよいか？」などが挙げられます。この業務では、ターゲット層をより深く理解するためにユーザー調査やテストを行うことや、アイディアを伝えるためのワイヤーフレームを作成することが多くの場合行われます。UX デザイナーは、プロダクトマネージャーのレポートの主な利用者の一人です。

グラフィックデザイナー

ウェブサイトプロジェクトにおける視覚デザイン業務を担当します。グラフィックデザイナーは、字組み、色選び、アイコンやその他のグラフィック資産の作成、UX デザイナーが作成したワイヤーフレームに基づいたウェブサイトのモックアップ作成など、多岐にわたる業務を担当します。

フロントエンド開発者

これを読んでいるあなたなら、（おそらく）これが目指すべき姿でしょう、フロントエンド開発者は、HTML、CSS、JavaScript を用いて、ユーザーが操作するウェブサイトの視覚的な部分を作成し、UX デザイナーやグラフィックデザイナーが作成した動作やデザインのモックアップを具現化します。

バックエンド開発者

ウェブサイトの非視覚的な部分を担っています。内部データを取得するためのバックエンドコードを記述し、テンプレートから HTML ページを生成し、ユーザーから送信された外部データを処理します。また、ウェブサーバーの設定やサイトのセキュリティ維持なども処理します。

フルスタック開発者

フロントエンド開発とバックエンド開発の両方の業務を処理します。

品質保証 (QA) エンジニア

新しい機能の検査を担当し、正常に動作することを確認するとともに、不具合を報告し、開発者と連携して必要な修正の優先順位付けを支援します。

コンテンツスペシャリスト／テクニカルライター

ウェブサイトのテキストコンテンツが、ターゲットユーザーにとって最大限に役立つよう責任を持って管理します。これには、情報の構成やナビゲーション、ユーザーインターフェースのテキストラベル、ブログ記事、マーケティング用テキスト、製品ドキュメントなどが含まれます。

あまり一般的ではない職種

その他のあまり一般的ではない職種には、次のようなものがあります。

ユーザー調査担当者

規模の大きなチームでは、ユーザー調査やテストをするのが最適であり、専任の調査担当者を保有することが多くの場合あります。

検索エンジン最適化 (SEO) スペシャリスト

ウェブサイトのコンテンツや構造を分析し、関連する検索エンジンの検索結果でウェブサイトがより目立つように変更を発生させます。詳細については、SEO を参照してください。

技術プロジェクトのフェーズ

一般的な技術プロジェクトは、次のように進行することがあります。

1. プロダクトマネージャーが、ウェブサイトに関する新しいユーザー要件を特定します。
2. チームと協議した結果、これらの要件はウェブサイトに新機能を追加することで可能だと決定されます。
3. プロジェクトマネージャーは、新機能を作成するために必要な個々の作業項目についてチームと協議し、それらを管理するための作業プロセスを作成します。
4. UX デザイナーは、新しい機能の動作を説明するワークフローと、サイト上のどの位置に配置されるかをイメージできるワイヤーフレームを設計します。
5. グラフィックデザイナーは、ウェブサイト上でその機能がどのように表示されるかを示すモックアップを、選定されたフォントやカラーパレットとともにデザインします。
6. コンテンツスペシャリストは、機能に必要な UI テキストと、それをサポートするためのドキュメントを作成します。
7. バックエンド開発者は、機能の基盤となるデータを安全に保存・処理するために必要なシステムを構築します。
8. フロントエンド開発者は、グラフィックデザイナーのモックアップに基づいてインタラクティブな機能を作成し、必要なデータを取得できるようバックエンドと連携させます。
9. QA エンジニアは、新しい機能を徹底的に検査し、探した課題について詳細なレポートを作成します。
10. 開発者は、機能のリリースを妨げるほど深刻であると判断されたバグを修正します。
11. （リリースを妨げる）バグが修正され、プロジェクトの承認が下りれば、その機能をウェブサイト上で公開することが可能になります。

これは簡略化したものです。機能の実装自体をめぐってはそれ以外にもさまざまなフェーズが存在し、必ずしもここに示された順序で全てのフェーズが完了するとは限りませんが、これを見れば、どのようなプロセスが含まれるかがお分かりいただけるでしょう。

作業管理プロセス

プロジェクトマネージャーは、何らかのプロセスを使用してウェブサイトプロジェクトを管理し、さまざまな作業項目の進捗状況を監視し、それらが適切な順序で期日通りに完了するよう確認するなどを行います。主なプロセスの種類は以下の 2 つです。

ウォーターフォール

明確で固定されたフェーズに沿ってプロジェクトを実行する手法を指します。それぞれのフェーズは前のフェーズに依存しており、要件の変更はいくつかしかないことが想定されています。一般的に、プロジェクトの終了時には単一の大きな成果物が納品されます。チームの管理はより官僚的になりがちで、自律性は低くなります。

• ウォーターフォール型プロジェクトは、始まる段階で仕様がより明確に指定され、スコープクリープ（プロジェクト途中で要件が追加されること）が発生しにくい傾向があります。さらに、リリース規模が大きく、頻度が低い方が、リリース計画、マーケティング、トレーニングやドキュメントの配信などの面で処理しやすくなります。
• しかし、ウォーターフォール方式は柔軟性に欠ける傾向があり、変更がはるかに遅く現れる。バグの修正に数ヶ月も待たされるのは、苛立たしいものです。

アジャイル

プロジェクトをより柔軟に実行することを指し、複数のフェーズが並行して進められ、プロジェクト全体を通じてさまざまなマイルストーンごとに、複数の小規模な成果物が配信される傾向があります。要件の変更は想定されており、必要に応じて優先順位を調整することで処理可能です。チームは一般的に、より自律性を持ちます。

• アジャイルプロジェクトは柔軟性が高く、要件の変更にもより容易に対応できます。また、リリースの頻度を高めることもメリットです。バグがよりすばやく修正され、イノベーションがより頻繁に現れ、マーケティングチームが話題にできる材料が常に確保できるからです。アジャイルチームでは、継続的な改善がよく話題に上ります。
• しかし、スコープクリープや納期遅延のリスクが高まり、多くの場合、プロジェクトが本当に完了したと感じられないことがあり、また、成果物を配信しなければならないというプレッシャーが絶えずのしかかってきます。

スクラムとカンバン

スクラムと呼ばれる特定のアジャイル手法があり、プロジェクトの進め方について一連のルールが定められています。例を示します。

• スクラムの責任者は「スクラムマスター」と呼ばれます。多くの場合、これは単に別の名称で呼ばれているプロジェクトマネージャーに他なりません。
• 行うべき作業は、スプリントと呼ばれるサイクルに分割され、通常は 2 週間の期間で実施されます。
• 各スプリントの前に、新しい作業候補についてディスカッションが行われ、スプリントに受け入れることが決定したものはバックログに登録されます。
• 作業項目はバックログから取り出され、「進行中」や「レビュー中」といったさまざまなフェーズを経て、完了へと進みます。
• スクラムマスターは毎日、短いスタンドアップミーティングを開催し、全員が自身の進捗状況や直面している課題について話し合うことで、問題を早期に発見できるようにします。
• それぞれのスプリントの終了時には、スクラムマスターがレビューミーティングを開催し、何がうまくいったか、何がうまくいかなかったか、そして次のスプリントに向けてどのような教訓を学ぶことができるかを検討します。

アジャイル手法のもう一つのタイプとしてカンバンがあります。これはスクラムよりもルールが少なく、スプリントを採用せず、アジャイルの「継続的改善」という側面をより重視する傾向があります。カンバンは、カスタマーサポートのチケットなど、明確な終了点が定められていない継続的なプロセスを管理する際に特に有用です。

カンバンボード

Trello や Asana といったツールは、プロジェクト内のさまざまな作業項目のステータスを視覚的に表示する機能を提供しています。これらは通常、カンバンボードと呼ばれていますが、カンバンだけでなく、さまざまなプロセス形態の管理にも使用できます。カンバンボードは複数の列で構成されており、スクラムプロジェクトにおける作業ステータス（「バックログ」、「ToDo」、「進行中」など）、作業の種類（「調査」、「設計」、「開発」など）、あるいはプロジェクトに応じて有用なその他の項目を表すことができます。

GitHub Projects も優れたツールの一つであり、無料で使用できます。GitHub アカウントにログインするだけで使用可能です。

プロジェクトのワークフローを練習する

以上の手法についてよく読み、カンバンボードを使って仕事や個人的なプロジェクトの進捗を実際に追跡してみてください。複雑なスクラム手法を使用する必要はありません。当面は基本的なカンバンで十分です。たとえ一人で作業している場合でも、次のようなワークフローを実践してみることは非常に有益です。

1. タスクの作成。
2. タスクの規模や所要時間の決定。
3. タスクの優先順位付け。
4. 期限順に並べ替え。
5. さまざまなタスクの着手。
6. 作業の進捗に合わせた、ステータス（「進行中」、「保留中」、「完了」など）の設定。

プロジェクトの開始から完了までの進捗状況を追跡してみましょう。自分自身で運営するウェブサイトや、何かしらのサイドプロジェクトで試してみてください。同時に、オープンソースプロジェクトへの参加にもぜひ挑戦してみてください。多くのプロジェクトでは、以上で説明したような作業追跡プロセスが使用されています。

関連情報

• What is a Tech Stack and How Do They Work?, mongodb.com
• Agile vs. Waterfall, ProductPlan
• What is Scrum?, scrum.org

• 前のページ
• Overview: ソフトスキル
• 次のページ