クラウドサーバーで使われているAWSですが、公式で用意されているアイコンがあります。AWS アーキテクチャアイコンのページからダウンロードが可能です。

いくつか用意されている

Amazon側がいくつかのアイコンツールを用意してくれてます。

ツールキット

• Microsoft PowerPoint
• Sketch

この2つのツールキットが容易されています。PPTのほうは中身は英語で色々書かれていますが、アイコンが下の方にまとまってあります。

アセット

アセットはアイコンのセットがpngとsvgと2つはいってます。1つのアイコンにつき2ファイルあるということになります。イラストレーターやベクターデータを使う方からしたらsvgが使えるのはありがたいかなと思います。
このアセット残念な点は、フォルダ分けされていますが基本的にはわかりづらいです。どこに何があるか初見ではわかりません。

描画ツールとダイアグラム作成ツール

サードパーティー製ツールでも作成できるということで、そのサイトの案内があります。CacooやFigmaなどあるので、アカウント持っている方はこっちで作った方がいいかもしれません。

アセットを使って構成図を作成

今回はツールキットでもサードパーティー製でもなく、アセットをダウンロードしてそこからアイコンを探して構成図を作りたいと思います。

なぜアセットをダウンロードして使うのか？

サードパーティー製ツールは有料版とかではないとベクターデータとしてダウンロードできなかったり、会員登録が必要と個人的には手間がかかるのと、なんでもかんでも登録してとなると後から管理が面倒です。

PPTなどは資料作成とかで使った事はありますが、普段から使うわけではないので慣れていないので構成図とかどうやって作ればいいのかわからないので、論外。Sketchはそもそも持ってません。

イラストレーターを使って作るぞ

というわけで、イラストレーターを使って作っていこうと思います。といっても、作り方を丁寧にここではかくわけではなく、作り終わった図を載せておきます。使うアイコンなどの場所を載せておきます。

必要なアイコンとしては以下のアイコンを使います

• ユーザー
• インターネット
• AWSクラウド
• VPC
• クラウドフロント
• ELB(ALB)
• EC2
• RDS

構成図としてはよくあるパターンのになります。クラウドフロントを経由してALB→EC2に接続という流れです。データベースは別にするということで中で分れています。

アイコンの場所

ダウンロードしたフォルダを解凍して、awsと名前を変えます。そこから必要なアイコンはいかの通りになります。

ユーザーアイコン

• aws > Resource-Icons_01312024 > Res_General-Icons > Res_48_Light > Res_Users_48_Light

インターネット

• aws > Resource-Icons_01312024 > Res_General-Icons > Res_48_Light > Res_Globe_48_Light

AWS

• aws > Architecture-Group-Icons_01312024 > AWS-Cloud-logo_32
• aws > Architecture-Group-Icons_01312024 > Virtual-private-cloud-VPC_32
• aws > Resource-Icons_01312024 > Res_Networking-Content-Delivery > Res_Amazon-CloudFront_Functions_48
• aws > Resource-Icons_01312024 > Res_Networking-Content-Delivery > Res_Elastic-Load-Balancing_Application-Load-Balancer_48
• aws > Resource-Icons_01312024 > Res_Compute > Res_Amazon-EC2_Instance_48
• aws > Resource-Icons_01312024 > Res_Database > Res_Amazon-Aurora-PostgreSQL-Instance_48

ファイル名はpngかもしれませんが、SVGを使う場合はすぐ近くにSVGがあるのでそれを使ってください。