Webサイト制作のための「設計ツール」

「設計(design：デザイン)ツール」は、「Webサイト」で使用する素材の作成や調整を行ったり、Webサイトの画面設計などの作業に使われる。

設計(デザイン)に関するツール(2D)
- 「ラスターグラフィックス」・「ベクターグラフィックス」を扱う
  - Adobe Photoshop
  - Adobe Illustrator
  - GIMP
  - Inkscape
- 「UI/UX」を扱う
  - Adobe XD
- 「映像」を扱う
  - Adobe After effects
  - Adobe Premiere Pro
設計(デザイン)に関するツール(3D)
- Blender
- Autodesk Maya
- Autodesk 3ds Max
- AutoCAD
- Cinema 4D
- Houdini
- ZBrush

1. 設計(デザイン)に関するツール(2D)

参考：Digital image - Wikipedia

参考：Image editing - Wikipedia

1-1. 「ラスターグラフィックス」・「ベクターグラフィックス」を扱う

「ラスターグラフィックス」と「ベクターグラフィックス」の違い

ラスターグラフィックスは、16進数で記述された色情報の集まりであり、ファイル構造はバイナリファイルに分類される。	ラスターグラフィックスのファイル構造 8950 4e47 0d0a 1a0a 0000 000d 4948 4452 0000 001b 0000 001c 0802 0000 001f b353 ba00 0000 0173 5247 4200 aece 1ce9 0000 0004 6741 4d41 0000 b18f 0bfc 6105 0000 0009 7048 5973 0000 0ec3 0000 0ec3 01c7 6fa8 6400 0000 c449 4441 5448 4bd5 92b1 0dc2 3014 4433 0a15 257d fa0c 40e1 9e8a 1128 cc10 4848 5982 9a45 1889 c877 fe22 e734 1c20 91a7 57e5 be5e 61a5 5b0f b7c7 ・・・
参考：Raster graphics - Wikipedia
参考：Raster graphics editor - Wikipedia（Comparison of raster graphics editors - Wikipedia）

ラスターグラフィックスは、16進数で記述された色情報の集まりであり、ファイル構造はバイナリファイルに分類される。

ラスターグラフィックスのファイル構造

8950 4e47 0d0a 1a0a 0000 000d 4948 4452
0000 001b 0000 001c 0802 0000 001f b353
ba00 0000 0173 5247 4200 aece 1ce9 0000
0004 6741 4d41 0000 b18f 0bfc 6105 0000
0009 7048 5973 0000 0ec3 0000 0ec3 01c7
6fa8 6400 0000 c449 4441 5448 4bd5 92b1
0dc2 3014 4433 0a15 257d fa0c 40e1 9e8a
1128 cc10 4848 5982 9a45 1889 c877 fe22
e734 1c20 91a7 57e5 be5e 61a5 5b0f b7c7
 ・
 ・
 ・

参考：Raster graphics - Wikipedia

参考：Raster graphics editor - Wikipedia（Comparison of raster graphics editors - Wikipedia）

ベクターグラフィックスは、XML形式の計算式であり、ファイル構造はテキストファイルに分類される。	ベクターグラフィックスのファイル構造 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" ・・・
参考：Vector graphics - Wikipedia
参考：Vector graphics editor - Wikipedia（Comparison of vector graphics editors - Wikipedia）

設計ツール(2D)	公式サイト	用途
Adobe Photoshop	Adobe Photoshop｜画像編集ソフト【アドビ公式】	「ラスターグラフィックス」の「画像編集」
Adobe Illustrator	Adobe Illustrator \| グラフィックデザインソフト【アドビ公式】	「ベクターグラフィックス」の「画像編集」
GIMP (フリー)	GIMP - GNU Image Manipulation Program	「ラスターグラフィックス」の「画像編集」
Inkscape (フリー)	Draw Freely \| Inkscape	「ベクターグラフィックス」の「画像編集」
その他の画像編集ツール

1-2. 「UI/UX」を扱う

参考：User interface - Wikipedia

参考：User interface design - Wikipedia

参考：User experience - Wikipedia

参考：User experience design - Wikipedia

設計ツール(2D)	公式サイト	用途
Adobe XD	Adobe XD \| UI/UXデザインと共同作業ツール【アドビ公式】	UI/UX
その他のUI/UX編集ツール

1-3. 「映像」を扱う

参考：Visual effects - Wikipedia

参考：Motion graphics - Wikipedia

参考：Video editing - Wikipedia

参考：Video editing software - Wikipedia

設計ツール(2D)	公式サイト	用途
Adobe After effects	Adobe After Effects \| VFXとモーショングラフィックスソフトウェア	VFX・モーショングラフィックス
Adobe Premiere Pro	Adobe Premiere Pro \| 業界最先端の動画編集ソフト【アドビ公式】	動画編集
その他の動画編集ツール

2. 設計(デザイン)に関するツール(3D)

参考：3D computer graphics - Wikipedia

参考：Computer-aided design - Wikipedia

参考：Digital sculpting - Wikipedia

設計ツール(3D)	公式サイト	用途
Blender (フリー)	blender.org - Home of the Blender project - Free and Open 3D Creation Software	3DCG
Autodesk Maya	Maya ソフトウェア \| Maya 2023 の価格と購入（公式ストア）	3DCG
Autodesk 3ds Max	3ds Max ソフトウェア \| 3ds Max 2023 の価格と購入（公式ストア）	3DCG
AutoCAD	AutoCAD 2023 価格と購入 \| Autodesk 公式	CAD
Cinema 4D	3Dモデリング、テクスチャリング、ライティング、アニメーション、シミュレーションソフト｜Cinema 4D by Maxon - Maxon	3DCG
Houdini	Houdini \| 3D Procedural Software for Film, TV & Gamedev \| SideFX	3DCG
ZBrush	Pixologic ZBrush - デジタル彫刻ソフトウェア - Pixologic Japan	3DCG(デジタルスカルプティング)
その他の3Dツール