figmaとは

ウェブサイトを作る際になる、デザインの基礎を作る事ができるサイト？になるのかな。
インストール版もあるが、基本的にはオンラインで使うアプリらしいです。
用途として学んだ事は

• サイトマップ
• コンテンツマップ
• ワイヤーフレーム
• デザインカンプ
• etc…

こういった「コーディング前のデザイン」を作るためのアプリです。

Figjamの機能

これは、ホワイトボードにメモ書きを貼り付けて、相関図を作るみたいな感じの機能です。
ドラマなどでよく見る「犯人の隠れた自室」みたいな感じです（謎）

この機能を使って、サイトマップとコンテンツマップの作り方考え方を教わりました。
サイトマップでは、「トップページを起点に飛べるリンク先」を可視化。
コンテンツマップでは、「サイト内にあるコンテンツ（フッター・ヘッダー等カテゴライズしたコンテンツ）」の可視化。
このような「見える化」の為に使うのが大きな役割みたいです。

Designの機能

四角や丸形を使って、サイトの完成図を可視化させる感じです。
「ここがヘッダー。ここがフッター。メインのここにはこの写真」というサイトの配置を視覚的に作ります。

この機能を使ってのワイヤーフレームの作り方を学びました。
これは実際に作るサイトの形を作っていきます。
HTMLでの「タグ」の配置や、「ロゴ」の配置、「写真」の配置、等を実際のウェブサイトのサイズに合わせて可視化していきます。

学び

サイトマップとコンテンツマップに関しては、ある程度頭の中でイメージは出来ると思っていました。
けれど、可視化させておくと思い出しやすいし、間違える事が無くなるなと感じました。
ワイヤーフレームはまだ学び始めたばかりですが、図形や文字を組み合わせる事が出来るみたいです。
なので、（ol）タグや（div）タグという感じで組み合わせ、併せて「ヘッダー」という大きな四角を作っていけばとても分かりやすいのじゃないかと思いました。

→AIによる補足「ワイヤーフレームはdiv等を意識するよりも『構造』を可視化するもの。

1. ヘッダー、ナビ等、役割の意味
2. 一覧、強調等、情報のまとまり
3. 最後にhtmlタグ

という順番で意識した方が良いとらしいです。
『構造』がずれてたらどんなに上手に「タグ」を選んでても地獄行きみたいです（笑）