FigmaとMasterGo入門
🎯 核心的な問い
ゼロからモダンなデザインツールを使ってWebプロトタイプを作成するには？
1. なぜフロントエンドデザインツールを学ぶのか？
始める前に、一つの疑問を理解する必要があります：なぜ「フロントエンドデザインツール」を学ぶ必要があるのでしょうか？HTML / CSSコードを直接書いてもページを作れるのに、ソフトウェアと技術をもう一つ学ぶことは本当に必要でしょうか？
実際、ページを動かすことと、プロダクトを良く設計することは全く別の概念です。コードはブラウザでどうレンダリングするか、異なるデバイスでどう動くかという問題にしか関心がありません。フロントエンドデザインツールが解決するのは、情報配置の問題です。フロントエンドのインタラクションをどう配置するか、異なるページ間の遷移をどうするか、視覚的優先順位をどう配分するかといった問題です。デザインツールでキャンバスを作るだけで、版面、情報階層、インタラクション方法を1つの画面で比較検討し、最も適切な表現効果を選ぶことができます。
直接コードを書いたり、AIで完全なフロントエンドページを生成したりすると、通常ユーザー体験はあまり良くありません。厳密なプロダクトはユーザーとフロントエンドのインタラクションの快適さや、異なるページで伝えたいコンテンツの分布を考慮し、ユーザーの視点からまずフロントエンドページの配置を行い、その後コード変換や生成を行います。
また、チーム協業の観点から見ると、フロントエンドデザインツールは関係者の協力コストを下げます：デザイナー、プロダクトマネージャー、開発者がそれぞれの想像や抽象的なコード説明に頼るのではなく、リアルタイム協業をサポートし、可視化され、注釈可能で、反復可能なキャンバスを中心に、バージョン管理、要件変更、フィードバックについて議論できます。さらに、モダンなフロントエンドデザインツール自体がもはや単なる描画ソフトではなく、ワンクリックでコードの一部を生成し、デザインシステムとコンポーネントライブラリを管理できます。新时代のデザインツールは、多くの反復的な手作業（整列、注釈、エクスポート、スタイル変更）を自動化・バッチ化し、ページ設計の開発効率を大幅に促進しています。
1.1 フロントエンドデザインツールの変遷
歴史を振り返ると、いわゆるフロントエンドデザインツールは継続的に進化してきた技術です。90年代のローカルビットマップ編集中心のPhotoshop時代から、2010年前後のSketchによるベクター化・コンポーネント化ワークフロー、そして2016年以降のFigmaによるクラウド上での協業の完全実現まで、デザインチームは単独作業からリアルタイムマルチユーザー協業へと移行しました。2025年に至り、AIは既にこれらのツール内部に実用的に組み込まれています：「一言の指示からページドラフトを生成」から「デザイン稿を直接実行可能なフロントエンド構造に変換」まで、「デザイン即コード」「人機共创」が概念から利用可能な生産力へと変わりつつあります。
本節では、最も代表的な2つのモダンなフロントエンドデザインツールを紹介します：FigmaとMasterGoです。一方で、これらはモダンなUI/UXに必要な核心機能（ベクター編集、コンポーネントシステム、自動レイアウト、コード受け渡しなど）を網羅しており、ワイヤーフレームからハイファイデリ、開発引き渡しまでの完全なループをサポートします。他方で、これらのツールはどちらも2025年以降、実用的なAI機能を追加しており、プロトタイプを維持しながらデザイン画像を本当に実行可能なプログラムに変換するのを支援します。
1.2 誕生の旅
モダンなフロントエンド専用ツールが誕生する前の時代、インターフェースデザイン業界の視覚デザイン作業は長い間、Photoshopのような「万能型」デザインソフトが兼任していました。デザイナーはローカルでレイヤーを重ねて、ページ全体の視覚効果を細かく設計し、最終的にサイズの大きい.psdソースファイルをフロントエンドエンジニアに納品していました。フロントエンドがデザイン画像を正確に再現するには、3つの煩雑で重要な作業を手動で完了する必要がありました：
1つ目は「スライス」：.psdファイルの多層構造から、ボタン、アイコン、ロゴ、背景モジュールなどの独立した視覚要素を一つずつ分割・抽出し、PNG、JPGなどのWebブラウザが直接読み込める画像形式にエクスポートする必要がありました（WebブラウザはPSDのレイヤー情報を直接認識できず、分割された画像に依存してディテールを表示するため）。
2つ目は「寸法測定」：ソフトウェアの測定ツールを使って、各要素の幅・高さ、異なるモジュール間のマージン（margin/padding）などのデータを一つずつ確認し、すべての寸法がピクセル単位で正確であることを保証する必要がありました。
3つ目は「注釈の抽出」：デザイン画像から「見えないが必須の」暗黙パラメータを抽出する必要がありました。例えば、テキストのフォントサイズ、ウェイト、行間、各カラーブロックのRGBやHEXカラー値など、デザイナーが紙に書いていない「設計仕様」を手動で「抽出」して記録する作業でした。
その後、フロントエンドの実装段階が本格的に始まりました。ネイティブのHTML/CSS/JSであれ、Vue、Reactなどのフレームワークであれ、本質的なプロセスは同じです。フロントエンドは「コンテナを核心的なキャリア」として、设计中の各モジュールの階層とセマンティクスに従ってページ構造を再構築します。ここでのコンテナとは、明確なレイアウト境界を持ち、子要素を専門に保持・整理する単位を指し、具体的なコンテンツを直接表示するのではなく、Flex、Gridなどのルールを通じて内部要素の配置範囲を定めます。そして「構造ブロック」（トップナビゲーションバー、サイドバー、記事リストエリア、フッターなど目で見える機能/コンテンツエリア）は、コンテナに依存して存在します。各構造ブロック内部には、さらに小さなコンテナがネストされて要素を整理します。例えば、1つの記事リスト項目は「リスト項目コンテナ」が内側の余白と全体レイアウトを制御し、さらにタイトル、要約、時間、カバー画像などの詳細要素を包み込みます。
モダンなフロントエンドフレームワークでは、これらの「構造ブロック（および関連するコンテナと要素）」は通常「コンポーネント」として実装されます。コンポーネントは簡単に言えば、明確な境界を持ち、コンテナレイアウトとロジックを統合した再利用可能なインターフェース単位です。外観と配置を制御するコンテナ（例えば「ボタンコンポーネント」はコンテナで幅・高さ、角丸を定義し、「記事カードコンポーネント」はコンテナでタイトル、カバーの位置を整理）を含むだけでなく、インタラクションロジックもカプセル化します。デザイン稿に繰り返し登場し、形が統一されている部分（統一スタイルのボタン、繰り返し使用される記事カードなど）は、コード内でコンポーネントに抽象化されます：異なるページ/シーンで再利用でき、重複開発を減らすだけでなく、コンポーネント内コンテナの統一ルールにより、すべての再利用箇所のレイアウトとスタイルの高い一貫性を保証します。
その後、フロントエンドはスタイルシステムを使って視覚とレイアウトを再現します。スライス段階でエクスポートされたPNG/JPGなどのリソースは、コンポーネントや構造ブロック内部の<img>、背景画像として、または各フレームワーク推奨の静的アセット方式でインポートされます。寸法測定段階で得られた幅・高さ、間隔、行の高さなどの具体的な数値は、width、height、margin、padding、line-heightなどのスタイルプロパティに変換され、対応するコンポーネントや構造ブロックに適用されます。注釈抽出段階で整理された色、フォント、シャドウ、角丸、hover/activeなどの状態は、CSS、CSS Modules、CSS-in-JS、Tailwindなどの具体的なスキームにおけるcolor、font-family、font-size、box-shadow、border-radiusおよび擬似クラスや状態クラス名に落とし込まれます。この時点で、スライス、寸法、注釈が提供するのは一連の正確な視覚パラメータであり、コンポーネントと構造ブロックが提供するのはこれらのパラメータを保持するコード組織単位であり、両者が組み合わさって、保守可能で再利用可能なインターフェース実装を構成します。
しかし、ローカルファイル中心のモデルは本質的に非効率です。バージョンはメールやクラウドストレージで転送され、新旧の原稿が混同しやすく、デザインと開発の間では上記のような複雑なやり取りに大きく依存し、協業コストとエラー確率は決して低くありません。
モバイルインターネットの台頭後、インターフェースの複雑さとイテレーション速度のニーズが急速に高まり、Photoshopの「大きくて万能」な特性が次第に重く感じられるようになりました。この段階でSketchが登場しました。SketchはUIデザインそのものに特化し、視覚的な後処理に関連する負担の大部分を削除しました。Symbolsを使ってボタン、ナビゲーション、入力ボックスなどの再利用性の高い要素をコンポーネント化し、一箇所の変更でグローバルに同期できるようにしました。さらにZeplinのようなツールと組み合わせて、注釈とスタイル断片を自動生成しました。Sketchは「コンポーネント思考」をデザインワークフローに導入しました。しかし、やはりローカルファイルベースのデスクトップアプリケーションであり、リアルタイム協業にはクラウドストレージ、サードパーティプラグイン、バージョンツールを経由する必要があり、「複数人が同時に同じ原稿を修正する」という問題を根本的に解決していませんでした。
本当にゲームチェンジャーとなったのはFigmaです。2016年以降、UIデザイン、プロトタイピング、コメント協業をブラウザに統合し、リアルタイムマルチユーザーカーソル、オンラインコメント、バージョンタイムライン、共有リンクなどのモダンな機能をサポートしました。今日では当たり前に見えますが、当時はPhotoshop / Sketchモデルへの真っ向からの挑戦でした。
ここに至り、インターフェースデザインはもはや各個人のPCに散らばるファイルではなく、1つのオンラインでリアルタイム更新されるクラウドキャンバスに集中するようになりました。このキャンバスを中心に、さらに自動化やAIの方法でデザインとフロントエンドコードの境界を曖昧にすることを想像できます。
当初は各種プラットフォームプラグインに頼り、デザイン稿中のコンポーネント、スタイル情報を半自動的にコード断片（React/Vueコンポーネントスケルトン、CSS変数など）としてエクスポートすることしかできませんでした。その核心的本質はプラグインによる構造化情報抽出です。その後、プラットフォーム能力の進化に伴い、大部分のデザインプラットフォームが大規模モデルのMCP（Model Context Protocol、モデルコンテキストプロトコル）機能をサポートし始めました：このプロトコルは標準的な仕組みを提供し、大規模モデルがデザインファイル、プラグインインターフェース、プロジェクトメタデータに安全かつ制御可能にアクセスできるようにし、デザイン稿のコードへのエクスポートをより便利にします。
さらに、プラグインとMCPの基盤の上で、フロントエンドコードの自動化はデザイン稿から直接コード構造を導出する段階へと進みました。デザインツール内でワンクリックでフロントエンドプロジェクトスケルトン、コンポーネント階層、スタイル体系、対応するコード結果を生成できるようになりました。これにより、デザイナーとフロントエンド開発エンジニアは手動でデザインディテールを移す作業から解放され、ユーザー体験の最適化と機能バージョンの更新イテレーションに多くのエネルギーを注げるようになりました。
2. Figma入門
ここから抽象的な概念部分から実際の操作段階に移ります。時間の都合上、Figmaの基本的な操作ロジックのみを学びます。デザインツールを全く使ったことがなくても、練習についていけるようにします。Figmaの完全な機能を学習したい場合は、Figmaが提供する詳細な公式チュートリアルを参照してください：https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners
または以下のチュートリアルを参考に、個人ポートフォリオのようなシンプルなWebページを素早く構築することもできます：https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collectio
左側はプロジェクトの新規作成とリソース管理の入り口で、右上のいくつかのボタンはFigmaの主要な機能です。その中で、MakeはAIに一言で大まかなインターフェースや構造ドラフトを生成させるもので、DesignはWeb/Appインターフェースの設計、コンポーネントの構築、プロトタイプ作成のメインワークスペースです。FigJamはチーム用ホワイトボードで、付箋を貼ったり、フローを描いたり、初期段階の議論に使います。Buzzはブランドアセットのスケール生産ツールで、ブランド一貫性を保ちながらコンテンツをバッチ生成するために使用します。Siteはデザインを実際にアクセス可能なWebページやドキュメントサイトにまとめて公開するためのものです。
一見するとFigmaの機能が多く、入りにくく感じられますが、実はこの種の機能ツールは本質的に慣れの問題であり、最初に操作ミスを恐れる必要はありません。一度に完璧にしようとせず、まず触ってみて、使っているうちに自然と素早く上達できます。
本チュートリアルでは、素早く入門するため、Design機能について簡単に説明します。
2.1 Designファイルを新規作成
ホームページまたは右上の入り口からDesignを選択し、新規ファイルを作成すると、空白のデザインキャンバスに入ります。 このインターフェースは大まかに3つの部分に分かれています：左側はページとレイヤーで、ページや要素の親子関係を確認・修正するのに使います。中央はキャンバスで、現在の効果を確認するためのものです。右側はプロパティとスタイルで、具体的な形状、色、スタイルを修正するのに使います。下部のツールバーはツールの切り替えに使用し、選択、図形描画、テキスト入力、コメント、プラグインなどが含まれます。ツールを選択した後、Escキーでデフォルトのマウスツールに戻れます。
2.2 最初のFrame（アートボード）を作成
正式に要素を配置する前に、まずページの明確な境界を決める必要があります。この境界はFrameが担います。下部のツールバーでFrameツールを選択するか、キーボードのFを直接押して、キャンバス上に矩形領域をドラッグします。
- 下部ツールバーのFrameツールを使用するか、キーボードの
Fを直接押す。 - キャンバスに矩形領域をドラッグし、右側のプロパティバーで幅を例えば
1440、高さを900に変更する。 - 左側のレイヤーバーで、このFrameの名前を変更する。例えば
My First Pageやプロジェクト名。
このFrameが1画面のインターフェースのページコンテナとなり、以降のタイトル、テキスト、ボタン、画像などの内容はすべてこのFrame内部に配置し、キャンバスの任意の場所に散らばらせないようにします。Frameを境界として内容を整理することで、スクロール設定、異なるデバイスサイズへの適応、画面エクスポート、プロトタイプ作成時に構造を管理しやすくなります。
2.3 Frame内にテキストとシンプルな要素を配置
コンテナができたら、次に最も基本的なコンポーネントの配置方法を学びます。例えば：タイトル、サブタイトル、ボタン、プレースホルダー画像ブロック。
- テキストツール（下部ツールバーの
T）を選択し、Frame内をクリックしてページタイトルを入力。例：My Portfolio。 右側のプロパティで、フォントサイズを少し大きく（例：96）、フォントウェイトを少し太くする。 - タイトルの下に、テキストツールで簡単な説明文を入力。例えばこのページが何をするのかの1〜2行の説明。 フォントサイズは少し小さく、行の高さは少し広めにして、詰まって見えないようにする。
- ボタンの雛形を作る： 矩形ツールでタイトルの下におよそ
200 × 48の矩形を描き、右側で目立つ塗り色を設定し、適度に角丸を加える。
- テキストツールで矩形の上にボタンテキストを入力。例：
Get Started。矩形とテキストを一緒に選択し、上部の配置ツールでテキストを水平・垂直ともに中央揃えにする。 - ボタンの横または下に、大きな薄いグレーの矩形を「画像プレースホルダー」として描く。後で展示画像を配置するのに使用。
ここまでで、非常にシンプルだが構造が完全な「ホームページドラフト」ができました：タイトル、説明文、ボタン、メイン表示エリア。
2.4 Auto Layoutを活用して要素を整理
すべての要素をただドラッグして配置しただけでは、ページはすぐに乱雑になります。Figmaで非常に重要な概念がAuto Layoutです。これは一連の要素をルール付きのコンテナに変えることができます。
「メインタイトル + サブタイトル + ボタン」の3つを選択し、右側のプロパティバーでAdd Auto layoutをクリックします。
すると、これら3つが1つのコンテナに包まれ、右側でパラメータを調整でき、内部の要素レイアウトがパラメータに応じて自動的に適応・調整されます：
- 縦に並べるか横に並べるか
- 要素間の間隔はどれくらいか
- このブロック全体からコンテナの端までの内側余白（padding）はどれくらいか
同様に、ボタン内部もAuto Layoutを使えます。以下のような効果を実現できます：テキストを調整すると、ボタンの長さも自動的に調整される。
まずボタン背景の矩形とボタンテキストを選択し、Auto Layoutを追加して、これら2つを「ボタンコンテナ」にします。次にこのボタンコンテナを選択し、幅と高さを両方ともHug contentsに設定します。これにより、テキストは常にボタンの中央に保たれ、テキストが増減すると、ボタンの幅が自動的に追従して変化します。
2.5 ボタンを再利用可能コンポーネントに変換
ここで新しい概念、コンポーネントを学びます。コンポーネントとは繰り返し利用できる要素のことで、ボタンのような要素は、後で繰り返し使うことが予想される場合、コンポーネント化を検討できます。先ほどAuto Layoutを追加したボタンをベースに操作します：
- ボタンコンテナ全体を選択。
- 右クリックでCreate component（コンポーネントを作成）を選択。
これで、このボタンは通常のレイヤーグループから、コンポーネントのマスターになりました。以降、他のページやFrameで同じスタイルのボタンが必要な場合、左側のAssetsパネルから直接ドラッグして使用できます。
この時点で、使用されているすべてのボタンは、このマスターの同期コピーです。マスターの色、角丸、間隔を修正すると、すべてのインスタンスが自動的に同期更新されます。
以上で、Figmaの基本的な使い方の入門が完了しました。最初にすべての機能を理解する必要はありません。まずこのシンプルなページを作ってみて、これらのコア操作に慣れ、公式チュートリアルのより多くの機能を徐々に探索していけば、使用回数が増えるにつれて必ず上達できます。
3. MasterGo入門
Figmaの基本的なワークフローを理解した後、MasterGoを見てみましょう。MasterGoは中国版のFigmaと考えることができますが、一部の機能に違いがあります。全体的に、Figmaと同様のインターフェースレイアウトと操作理念を引き継いでいます：キャンバス、レイヤーツリー、プロパティパネルがあり、コンポーネント、スタイル、自動レイアウト、マルチユーザー協業を同様にサポートしています。より詳細な内容はMasterGOの公式チュートリアルを参照してください：https://mastergo.com/tutorials/12?全程高能，MasterGo 最完整实用教程，让你从零到精通！
3.1 デザインファイルを新規作成
MasterGo管理画面に入る
- MasterGo公式サイトを開きアカウントにログイン。
- ログイン後、「ファイルリスト / プロジェクトリスト」のようなホームページエリアが表示され、デザインファイルの管理に使用します。
新規ファイルを作成
- 右上の+デザインファイルのボタンをクリックするか、Figmaなどのファイルのインポートを選択。
- クリック後、空白のキャンバスに入ります。これがMasterGoのデザインワークスペースです。
基本インターフェースの各エリアについて Figmaの使い方を学んだ後、MasterGoの使い方もほぼ同じで、主にいくつかのエリアに分かれています：
- トップツールバー：キャンバスの最上部に位置し、左側にファイルの場所とファイル名、中央に一連のよく使うツールボタン（選択、エリア/アートボード、図形、テキスト、注釈、コメント、プラグイン選択、AIツールなど）、右側に現在オンラインのメンバー、共有の入り口、キャンバスのズームとプレビュー制御機能の入り口。
- 左側パネル：主にレイヤーとリソースに分かれており、レイヤータブではページリストとそのページ下のすべてのレイヤーの構造と階層を確認できます。
- 中央キャンバスエリア：具体的な描画とレイアウトのワークスペースで、すべてのFrame、コンポーネント、図形がここに表示されます。
- 右側プロパティパネル：選択したオブジェクトのプロパティを確認・編集するために使用します。例えばサイズ、位置、配置、背景塗り、ボーダー、角丸など。何も選択されていない場合は、キャンバス関連の設定（背景色、ラベル、エクスポートオプションなど）が表示されます。
3.2 最初のFrameを作成
正式に内容を配置する前に、インターフェースの境界とサイズを決めるページコンテナが必要です。このコンテナはMasterGoでは通常Frameと呼ばれます。
手順：
- Frameツールを選択
- ツールバーでFrame / アートボードツールを見つけてクリックすると、プリセットパラメータでアートボードに直接内容を作成できます。
- またはショートカットキー（通常は
F、差異がある場合は実際のインターフェースを参照）を使用。
- キャンバスに矩形領域をドラッグ
- ドラッグ後、選択枠付きの領域が表示されます。
- 右側のプロパティパネルで、このFrameの幅と高さが確認できます。
- 幅を例えば
1440、高さを900に変更（1画面のWebページでよく使われるサイズの1つ）。
- Frameの名前を変更
- 左側のレイヤーパネルでこのFrameを見つける。
- 名前をダブルクリックして、プロジェクト名に変更。例：
My First Page、またはお好みのページ名。
3.3 アートボードの内容を作成
コンテナができたら、Figmaで学んだ方法と同様に、簡単に似たような表示ページを作成できます。（Figmaアートボードのテキスト要素をコピーしてみてください。テキストコンポーネントの直接貼り付けインポートがサポートされています）
注目すべきは、Auto Layout機能の挙動にわずかな違いがあることです。MasterGoでFigmaと同様にボタンの長さがテキストの長さに応じて変化するようにするには、まず対応する矩形要素のベースにコンテナまたはコンポーネントを作成する必要があります。図を参照してください：
コンテナの作成に成功したら、ボタン矩形とテキストを対応する並列のコンテナに入れ、右側でAuto Layoutのボタンを見つけて自動機能を有効にすると、ボタンの幅がテキストの長さに応じて変化する機能が正常に実現できます。
3.4 AIによるページ生成
MasterGoで注目すべき面白い機能がAIページ生成です。一言や参考画像から、MasterGoで編集可能なコンポーネントを生成し、直接使用できるコードを取得できます。中国語や英語で直接要件を入力でき、ページは要件に応じて構造が明確なページレイアウトドキュメントを返します。効果は以下の通りです：
デザインドキュメントの生成が完了したら、生成開始をクリックし、少し待つと対応する実際のWebページ効果が取得できます：
この時点で2つの操作選択があります：1つ目は青いボタンをクリックして生成結果を直接キャンバスに挿入、2つ目はコードプレビュー機能をクリックして現在の完全なページのコードを直接取得。具体的な操作インターフェースは以下の通りです：
結果をキャンバスに挿入した後、Webページの全体レイアウト、要素のディテール（フォント、色、間隔など）をより細かく調整し、最終効果が期待に完全に合致するまで仕上げられます。
4. 次のステップ：プロトタイプからコードへ
前述の内容で、FigmaとMasterGoの基本的な操作を学び、構造が完全なインターフェースプロトタイプを作成できるようになりました。次の重要なステップは：これらのデザイン稿をブラウザで実際に動くフロントエンドコードに変換するにはどうすればよいか？
📚 後続チュートリアル
詳細な方法についてはデザインプロトタイプからプロジェクトコードへを参照してください。以下を学びます：
- マルチモーダルAIによる直接変換：デザイン稿のスクリーンショットをAIに送り、直接HTML/Reactコードを生成
- Figma Make：Figma公式AIツールを使って高精度にデザインを再現しコードをエクスポート
- MasterGo AI：ワンクリックで編集可能なページを生成しコードを取得
これらの方法にはそれぞれ長所と短所があり、異なるシーンに適しています。プロジェクトのニーズに合わせて適切なワークフローを選択することをお勧めします。
5. まとめ
本章の学習を通じて、以下のことを習得しました：
フロントエンドデザインツールの価値：なぜデザインツールが必要なのか、そしてそれらが情報配置やチーム協業の問題をどう解決するかを理解。
Figmaの基本操作：
- DesignファイルとFrameアートボードの作成
- テキスト、図形などの基本要素の追加
- Auto Layoutを使ったアダプティブレイアウトの実現
- 再利用可能なコンポーネントシステムの作成
MasterGoの基本操作：
- Figmaと同様のインターフェースレイアウトに慣れる
- Frameと基本的なアートボード内容の作成
- AIページ生成機能を使った迅速なプロトタイプ作成
💡 次のステップ
フロントエンドデザインツールの基本的な使い方をマスターしたので、以下に挑戦できます：
- 自分のための個人ポートフォリオページをデザインする
- 今後のプロジェクトのためにインターフェースプロトタイプをデザインする
- デザインプロトタイプからプロジェクトコードへを学び、デザイン稿を実行可能なコードに変換する
ホグワーツ肖像画を作ろうプロジェクトに取り組む場合は、まずインターフェースプロトタイプをデザインし、その後コードをエクスポートしてAIの対話機能と組み合わせることができます。