ロジコヤ

1. Web開発の概要

Web開発の概要

Webアプリケーションとは

Webアプリケーションとは、インターネットを経由して動作するアプリケーションのことを指します。ユーザー（クライアント）はWebブラウザを通じてアプリケーションにアクセスし、バックエンド（サーバー）で処理が行われます。Webアプリケーションは、幅広い用途に使用され、ユーザーにとって利便性が高いという特徴があります。

Webアプリケーションの種類

Webアプリケーションの種類は非常に多岐にわたりますが、よく利用されるものは以下の通りです。

ECサイト

ECサイト（電子商取引サイト）は、オンライン上で商品の購入、販売、決済を行うWebアプリケーションです。B2C、B2B、C2Cなど、目的によってさまざまです。

B2C：Amazon、楽天、Yahooショッピング
B2C：カスタムで構築
C2C：メルカリ、BASE

Blog・CMS

BlogやCMS（コンテンツ管理システム）は、記事の投稿や編集、管理を行うWebアプリケーションです。「Sass」「Eコマース」「クラウン°ファンディング」「セルフ型」など、目的によってさまざまです。

セルフ型：WordPress、Blogger、Tumblr
SaaS型：Ameba、Wix
Eコマース型：Shopify、BigCommerce、Salesforce Commerce Cloud
クラウドファンディング型：Makuake、CAMPFIRE

SNS

SNS（ソーシャルネットワーキングサービス）は、ユーザー同士のコミュニケーションを支援するアプリケーション

汎用SNS：Facebook、X（旧Twitter）、YouTube、Instagram、TikTok
コミュニケーションツール：LINE・Discord

クラウドストレージ

クラウドストレージは、オンライン上でデータを共有するアプリケーションで、文書ファイル、画像、業務アプリのファイルをアップロードやダウンロードできます。

Google Drive、One Drive、DropBox
AWS S3、Google Cloud Storage、Microsoft Azure

業務システム

企業内の業務を効率化するためのWebアプリケーションで、各企業でプロジェクト企画・開発・運用します。

ERP (Enterprise Resource Planning)
CRM (Customer Relationship Management)
SCM (Supply Chain Management)
HRM (Human Resource Management)
ワークフローシステム
人事評価システム
ドキュメント管理システム

企画

プロジェクトの企画

目的の明確化と共有

Web開発の企画ではプロジェクトの全体像（ビジョン）を明確にすることが重要です。Webアプリケーション開発前にプロジェクト関係者の間で、目的、ターゲットユーザー、機能、デザインなどを明確にして共有することで、開発プロセスをスムーズに進行できます。

認識の違いを極力少なくする

5W1H

Webアプリ開発における5W1Hは、開発プロジェクトを効果的に計画し、管理するための枠組みです。

Who：誰が
What：何を
When：いつ
Where：どこで
Why：なぜ
How：どのように

項目	内容	例
Who	プロジェクトに関わるステークホルダーを特定	開発チーム、クライアント、エンドユーザー、プロジェクトマネージャー
What	Webアプリケーションの目的、機能などを定義	要件定義、仕様書、ユーザーストーリー
When	プロジェクトのスケジュール、タイムライン、締め切りなど設定	マイルストーン、スプリント、リリース日程
Where	開発作業を行う場所や環境を決定	オフィス、リモートワーク、共同作業スペース
Why	Webアプリケーション開発の理由、ビジネス上の利点、価値などを説明	企画、プレゼン
How	プロジェクトを進行するための方法論、ツール、技術スタックを決定	ウォーターフォール、アジャイル、スクラム、プログラミング言語、フレームワーク

Web開発とコスト

Web開発のコストは、プロジェクトの規模、複雑さ、要件、開発手法などによって大きく異なります。主なコストの種類は以下の通りです。

人件費
技術コスト
品質管理コスト
技術コスト
教育・トレーニングコスト
品質管理コスト
マーケティングとプロモーションコスト
機会損失コスト

項目	column2
人件費	開発・クリエイターチーム（プロジェクトマネージャー、設計者、デベロッパー、テスター、デザイナーなど）、クリエイター（デザイナー）人件費、外部委託する委託費
技術コスト	開発環境費（ハードウェア、ソフトウェア、ライセンス費用など）、ホスティング・運用費（サーバー、ドメイン、SSL証明書など）、外部APIサービスなどの利用料
教育・トレーニングコスト	開発チームのスキルアップや新技術習得のための教育・トレーニング費用、ドキュメンテーション作成や知識共有のための費用
品質管理コスト	テスト環境の構築、テストツールやCI/CD導入費用、バグ修正や品質改善に関する費用
メンテナンスとサポートコスト	システムの保守、更新、バージョンアップ、ユーザーサポートやカスタマーサービス、セキュリティ対策や脆弱性対応に関する費用
マーケティングとプロモーションコスト	Webサービスやアプリケーションの宣伝・広告費用、SEOやコンテンツマーケティングに関する費用、ユーザー獲得や顧客開拓に関する費用
機会損失コスト	開発期間の延長、競合他社に先行、不具合による信用失墜などの機会損失

調査

調査は情報収集・分析することで、問題解決やアイデア発想に役立てるプロセスです。既存のWebサービスを調査し、インスピレーションを得たり、顧客やユーザーのニーズ、課題、要望を収集して新しいアイデアを決定します。

文献調査

書籍、論文、レポートなどの文献を読むことで、関連する情報を収集します。

インタビュー

専門家や利害関係者にインタビューを行い、直接情報を収集します。

アンケート

対象者に質問票を配布し、回答を収集・分析します。

フィールドワーク

現場に赴き、直接観察や体験を通じて情報を収集します。

調査の手順

目的の明確化

調査の目的と必要な情報を明確にします。

調査方法の選択

目的に応じて、適切な調査方法を選択します。

情報の収集

選択した方法で情報を収集します。

情報の分析

収集した情報を整理し、分析します。

結果の報告

調査結果をまとめ、関係者に報告します。

企画の視覚化

企画を視覚化することは、アイデアを具体化し、ステークホルダー間の理解を深めるために重要です。

マインドマップ

マインドマップは、アプリケーションやサービスのアイデアや概念の関連性を視覚化します。関連するアイデアを階層構造で展開し、アイデアの発散と収束を通して、複雑な問題やシステムの理解に役立ちます。

ストーリーボード

ストーリーボードは、アプリケーションやサービスの利用シーンを連続的にアウトプットし、ユーザーの行動や体験を時系列で可視化します。

ワイヤーフレーム・モックアップ

ワイヤーフレーム

ワイヤーフレームは、Webアプリケーションの画面レイアウトやコンポーネントを簡易的にアウトプットし、データ構造や機能配置を視覚化します。

モックアップ

モックアップは、ワイヤーフレームよりもデザインをより詳細に表現するのが目的で、実際のUI/UXを表現し、ユーザーテストやフィードバック収集に役立ちます。

プロトタイプ

Webアプリケーションやサービスの基本的な機能を実装した試作品で、ユーザー視点の使いやすさを検証できます。また、本運用前に開発へのフィードバックを得ることができる

カスタマージャーニーマップ

動画、プレゼンテーション資料などを活用して、ユーザー視点から企画のコンセプトや価値を視覚的に伝え、クライアントに理解と共感を得るます。接点となるタッチポイントや、ユーザーの感情的な変化を表現します。

ブレインストーミング

ブレインストーミングとは

ブレインストーミング（brainstorming） とは、グループで行う発想法の一つで、特定のテーマや問題について自由に意見やアイデアを出し合うことを指します。

ブレインストーミングの特徴

批判禁止

アイデアを出す際、他のメンバーからの批判は禁止されています。自由な発想を促進するためです。

質より量

より多くのアイデアを出すことが重視されます。独創的で実現可能性の低いアイデアも歓迎されます。

結合と改善

他のメンバーのアイデアを組み合わせたり、発展させたりすることが奨励されます。

平等性

すべてのメンバーが平等に発言の機会を与えられ、hierarchy（上下関係）は無視されます。

時間制限

通常、ブレインストーミングセッションには時間制限が設けられ、集中的にアイデアを出し合います。

ブレインストーミングの手順

テーマの設定

解決すべき問題や目標を明確にします。

アイデアの発想

各メンバーが自由にアイデアを出し合います。

アイデアの整理

出されたアイデアを分類し、似たアイデアをグループ化します。

アイデアの評価

実現可能性、効果、優先順位などの観点からアイデアを評価します。

アイデアの実行

選ばれたアイデアを実行するための計画を立てます。

アイデア発想

アイデア発想とは

アイデア発想は、既存の知識をもとに、新しい考えや概念を生み出すプロセスです。

アイデア出し、収集
収集したアイデアを整理・分類
実現可能性、市場性、収益性などの観点からアイデアを評価
評価結果に基づいて、開発するアイデアを選定

連想法

ある事柄から連想される言葉や概念を次々に書き出していく方法です。

発想トリガー

「もしも〜だったら」「〜を逆にしたら」などの発想を促す質問を使って、新しいアイデアを生み出します。

SCAMPER法

Substitute（代替）、Combine（結合）、Adapt（適用）、Modify（修正）、Put to another use（他の用途に使う）、Eliminate（削除）、Reverse（反転）の7つの観点からアイデアを発想する手法です。

マインドマップ

マインドマップとは

Mindmap（マインドマップ）とは、情報を視覚的に整理し、アイデアを生み出すためのツールです。アイデアを可視化することで、グループでイメージが共有・共感しやすくなります。

マインドマップの特徴とメリット

マインドマップは、中心となるテーマから放射状に広がる枝のように、関連する情報やアイデアを記載していきます。

項目	説明
中心テーマ	マップの中心に主要なトピックや問題を配置
メインブランチ	中心テーマから伸びる主要な枝で、関連するサブトピックを表現
サブブランチ	メインブランチから派生する枝で、より詳細な情報やアイデアを記載
キーワード	短い言葉やフレーズを使用し、情報を簡潔に表現
視覚的要素	色、画像、シンボルなどを使って情報を視覚的に整理

マインドマップのメリット

マインドマップを利用するといろいろなメリットがあります。

項目	説明
情報の整理	複雑な情報を視覚的に整理し、理解する
アイデア発想	新しいアイデアを生み出すためのブレインストーミングツール
記憶力の向上	視覚的な情報は記憶に残りやすい
問題解決	問題の全体像を把握し、解決策を見出す

マインドマップサービス

マインドマップのサービスはいろいろありますが、代表的なものを記載します。無料プランは制限があるものが多いため、頻繁に利用する場合は有料プランが必要になります。

サービス名	無料プラン	有料プラン	主な特徴
Mindmister	○	○	コラボレーション機能、プレゼンテーションモード、Dropboxとの統合
Coggle	○	○	シンプルなインターフェース、リアルタイムコラボレーション、チームの管理機能
Miro	○	○	多様なテンプレート、リアルタイムコラボレーション、統合機能
XMind	○	○	多様なテンプレート、Ganttチャート、オフラインアクセス
Ayoa	○	○	タスク管理機能、Ganttチャート、AIによるアイデア生成
Lucidchart	○	○	フローチャート、UML図、ワイヤーフレーム作成機能