ポートフォリオの作り方

必須！インフラ（AWS/GCP）の構成図の作り方

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • この記事では「必須！インフラ（AWS/GCP）の構成図の作り方」を ポートフォリオ作成 の現場で使える形で整理します
  • なぜポートフォリオにインフラ構成図が必要なのか？ をおさえれば、現場で迷ったときに立ち戻れる
  • インフラ構成図作成におすすめのツール3選 をおさえれば、現場で迷ったときに立ち戻れる
  • 1. diagrams.net (旧 draw.io) をおさえれば、現場で迷ったときに立ち戻れる
  • 2. Cloudcraft をおさえれば、現場で迷ったときに立ち戻れる

必須！インフラ（AWS/GCP）の構成図の作り方 とは

エンジニアのポートフォリオに欠かせないインフラ構成図（AWS/GCP）の作り方を解説。おすすめツール、必須項目、評価を高める設計のコツまで、技術的な深掘りをアピールする方法を学びます。

なぜポートフォリオにインフラ構成図が必要なのか？

エンジニアとしての就職・転職活動において、ポートフォリオは単に「動くもの」を見せるための道具ではありません。採用担当者が最も注目しているのは、あなたが「どのような意図で技術を選定し、どのようにシステムを組み立てたか」という設計能力です。

結論先出し — 構成図は 設計力の証明書。VPC・サブネット・データの流れ の3つが描けていれば、それだけで採用担当者の評価は一段上がります。

特にAWSやGCPといったクラウドサービスを利用している場合、ソースコードだけではシステム全体像を把握するのが困難です。そこで重要になるのが「インフラ構成図」です。構成図があることで、以下のようなメリットがあります。

  • 技術力の可視化はネットワーク設計（VPC、サブネット）やセキュリティ対策の理解度を示せる。
  • コミュニケーションの円滑化は面接時に図をベースに説明することで、複雑な構成も正しく伝えられる。
  • ドキュメント作成能力の証明は実務で必須となる「仕様をドキュメントに落とし込む力」をアピールできる。

本レッスンでは、未経験からプロを目指す方が、実務レベルのインフラ構成図を作成するための具体的なステップとツール、そして「評価されるポイント」を徹底解説します。

インフラ構成図作成におすすめのツール3選

構成図を作成するツールは数多くありますが、ポートフォリオ用としては「美しさ」と「更新のしやすさ」のバランスが重要です。代表的なツールを紹介します。

1. diagrams.net (旧 draw.io)

最も汎用性が高く、エンジニアに愛用されている無料ツールです。AWSやGCPの最新アイコンが標準で用意されており、ブラウザ上で直感的に操作できます。GitHubとの連携も可能で、ポートフォリオ作成には第一候補となります。

2. Cloudcraft

AWSに特化したツールで、等角投影法（アイソメトリック）による立体的な構成図が作成できます。見た目が非常にかっこよく、ポートフォリオのアイキャッチとしても強力ですが、無料版では機能に制限がある点に注意が必要です。

3. Mermaid.js

Markdown内にコード形式で図を記述できるツールです。GitHubのREADME上で直接レンダリングされるため、「コードでドキュメントを管理している」というエンジニアらしい姿勢をアピールできます。複雑なネットワーク図には不向きですが、シンプルな構成なら非常に効率的です。

ツール名特徴おすすめ度
diagrams.net無料・高機能・アイコン豊富
Cloudcraft立体的で見た目がプロっぽい
Mermaid.jsコードで管理・GitHubとの相性抜群

どれを使うか迷ったら、まずは diagrams.net から始めてみるのがおすすめです。実務でも標準的に使われているツールなので、操作に慣れておくと現場に出た時にも役立ちますよ！

評価を高める！インフラ構成図に含めるべき必須要素

単に「サーバーとデータベースがある」だけでは不十分です。プロのエンジニアが見た時に「お、わかっているな」と思わせるためには、以下の要素を必ず盛り込みましょう。

参考までに、評価される AWS 3層構成（Web/AP/DB） をMermaidで表現すると以下のようになります。Public/Private の境界と矢印の向きを意識してください。

diagram (will load when visible)

ネットワークの境界線（VPC・サブネット）

システムがどのネットワーク内に存在し、外部（インターネット）とどう繋がっているかを明示します。特に「パブリックサブネット」と「プライベートサブネット」の切り分けは必須です。データベースをプライベート領域に配置し、セキュリティを考慮していることを示しましょう。

良い例

プレーンテキスト

// 良い構成例：役割ごとにサブネットを分ける [Public Subnet] - Web Server (外部からのHTTPアクセスを許可) [Private Subnet] - Database (Webサーバーからのみ接続可能)

避けたい例

プレーンテキスト

// 悪い構成例：セキュリティリスクが高い [Public Subnet] - Web Server - Database (DBが外部から直接アクセス可能な状態)

データの流れとプロトコル

ユーザーのリクエストがどこに入り、どの経路を通ってデータベースまで届くのかを矢印で示します。その際、HTTP/HTTPS、SSH、ポート番号（80, 443など）を添えると、通信制御への理解度をアピールできます。

マネージドサービスの活用

AWSであれば「Amazon S3（ストレージ）」「Amazon RDS（データベース）」「ALB（ロードバランサー）」など、適切なアイコンを使用してください。自作した部分（EC2など）とクラウドサービスを区別して記述することが大切です。

実践！AWS/GCP構成図を作る5ステップ

それでは、実際に構成図を作成する際の手順を解説します。

diagram (will load when visible)

ステップ1：コンポーネントのリストアップ

まずは、自分のアプリで使用している技術を書き出します。

  • サーバー（EC2、App Engineなど）
  • データベース（RDS、Cloud SQLなど）
  • ストレージ（S3、Cloud Storageなど）
  • ネットワーク（VPC、Route 53など）

ステップ2：外枠（Region / VPC）から描く

いきなりアイコンを並べるのではなく、まずは「AWS Cloud」や「Region」、その中に「VPC」という大きな枠を描きます。これにより、クラウド環境の中に構築されていることが明確になります。

ステップ3：サブネットによる階層化

VPCの中に、インターネットからアクセス可能な「Public Subnet」と、内部からしかアクセスできない「Private Subnet」を描きます。WEBサーバーはPublicに、DBサーバーはPrivateに配置するのがセオリーです。

ステップ4：アイコンの配置と接続

公式のアイコンセットを使用してコンポーネントを配置し、矢印で結びます。矢印はデータの流れる方向に合わせるのが一般的です。ユーザー（スマホやPCのアイコン）からスタートして、ロードバランサー、アプリサーバー、DBへと繋いでいきます。

ステップ5：注釈と仕上げ

図の中に「Security Group」や「IAM Role」などのセキュリティ要素を注釈として加えると、さらに専門性が高く見えます。最後に、文字のサイズや矢印の太さを整えて完成です。

ポートフォリオでの効果的な見せ方と注意点

作成したインフラ構成図は、GitHubのREADMEやポートフォリオサイトの目立つ場所に掲載しましょう。

  • 画像として保存はSVG形式や高解像度のPNG形式でエクスポートし、拡大しても文字が潰れないようにします。
  • 説明文を添えるは図だけでなく、「なぜこの構成にしたのか（例 → 可用性を高めるためにマルチAZ構成にした）」という技術選定の理由をテキストで補足してください。これが面接での深掘り対策になります。
  • セキュリティの配慮は構成図にIPアドレスやパスワード、アカウントIDなどの機密情報を絶対に載せないように注意してください。これらはセキュリティ意識を疑われる原因になります。

ここまでの要約 — SVGで載せる・選定理由を添える・機密情報は伏せる の3点を守れば、構成図は 面接突破ツール として機能します。逆にIDが写り込むと一発で減点です。

細部まで完璧に描こうとすると時間がかかりすぎてしまいます。まずは「全体像が伝わること」を最優先に、主要なパーツを並べることから始めてみましょう。少しずつブラッシュアップしていけば大丈夫です！

まとめ

インフラ構成図は、あなたの技術的な「設計力」と「配慮」を視覚的に伝える最強の武器です。AWSやGCPといった強力なツールを使いこなしていることを示すだけでなく、それらをどう組み合わせて安全で堅牢なシステムを作ったのか、自信を持ってアピールしましょう。最初は難しく感じるかもしれませんが、まずはdiagrams.netで公式アイコンを並べることから始めてみてください。その一歩が、ポートフォリオの質を劇的に向上させます。

現場でよくある具体例

  1. Aさん (受託企業内定) は GitHub の README 冒頭に「誰の何を解決するか」を 3 行で書き、デプロイ URL を最上段に置いた。それだけで書類通過率が 2 倍に
  2. Bさん (自社開発内定) は技術選定理由を README の「Why this stack?」セクションに明記。面接が「決定根拠の深掘り」中心になり、暗記質問が消えた
  3. Cさん (落選続き → 内定) はテーブルを切ってコミット履歴を整理。「feat: 機能追加」のような Conventional Commits に変えた途端、レビュー観点での評価が上がった

次にとるべきアクション

  1. 今のポートフォリオを採用視点で 30 秒見直す — README・デプロイ URL・スクショの 3 点が即座に伝わるか確認する
  2. 改善ポイントを GitHub Issue 化する — 「必須！インフラ（AWS/GCP）の構成図の作り方」で得た観点を、自分のリポジトリの Issue として 3 件登録する
  3. 実装/修正を次の 1 週間で完了させる — Issue を Pull Request に落とし込み、コミットメッセージにも改善理由を残す

次のレッスン

次は データベース設計（ER図）を作品に組み込む方法 で、データベース設計（ER図）を作品に組み込む方法 を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. インフラ構成図 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. インフラ構成図 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

学習を加速したい方へ

未経験エンジニア向けポートフォリオ作成ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータル で実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

復習ミニクイズ

ポートフォリオの評価を高めるインフラ構成図において、セキュリティを考慮した設計（ベストプラクティス）として最も適切なものはどれですか？

参考リンク