D
DigiSchool
コース一覧カテゴリブログ
ログイン無料で始める
D
DigiSchool

デジタルマーケティングとWeb制作のスキルを身につけて、キャリアを加速させましょう。

カテゴリ

AIWebデザイン広告運用SEOMEOLP制作HP制作SaaSECデザイン

サービス

  • コース一覧
  • カテゴリ一覧
  • ブログ
  • 無料会員登録

サポート

  • 利用規約
  • プライバシーポリシー

© 2026 DigiSchool. All rights reserved.

← 実践Webデザイン - Figma完全マスター講座
2 / 12
レッスン 2
35分

Figmaの基本操作 - フレーム・シェイプ・テキスト

Figmaの基本操作 - フレーム・シェイプ・テキスト

フレームとは

フレームはFigmaにおける最も重要な概念です。Webページやスマートフォン画面のサイズを定義する「器」として機能します。

フレームの作成方法は2つあります。ツールバーのフレームアイコン(F キー)を選択し、キャンバス上でドラッグするか、右側のプリセットから選択します。

よく使うフレームプリセット

  • 1**Desktop**: 1440×1024(標準的なデスクトップサイズ)
  • 2**MacBook Pro 14"**: 1512×982
  • 3**iPhone 15 Pro**: 393×852
  • 4**iPad Pro 11"**: 834×1194

シェイプツールの使い方

シェイプツール(R キー)では、四角形・円・線・多角形・星形などの基本図形を描画できます。

  • 1**四角形(Rectangle)**: R キーで選択、ドラッグで描画。角丸はプロパティパネルで数値指定
  • 2**楕円(Ellipse)**: O キーで選択。Shiftを押しながらドラッグで正円
  • 3**線(Line)**: L キーで選択。直線の描画に使用
  • 4**多角形・星形**: シェイプツール長押しで選択可能

テキストツール

テキストツール(T キー)でテキストを配置します。フォント・サイズ・行間・文字間隔などをプロパティパネルで調整できます。

日本語フォントの推奨設定は以下の通りです。

  • 1**見出し**: Noto Sans JP Bold、24-48px
  • 2**本文**: Noto Sans JP Regular、14-16px、行間150-175%
  • 3**キャプション**: Noto Sans JP Regular、12px

塗りと線の設定

すべてのオブジェクトには「塗り(Fill)」と「線(Stroke)」を設定できます。プロパティパネル右側で色・透明度・グラデーションを自由に調整しましょう。

  • 1塗り: 単色、線形グラデーション、放射グラデーション、画像塗りが選択可能
  • 2線: 太さ、位置(内側・中央・外側)、破線設定が可能

整列とスマートガイド

複数のオブジェクトを選択すると、上部ツールバーに整列オプションが表示されます。左揃え、中央揃え、均等配置などを活用して、正確なレイアウトを実現しましょう。

🏋️実践ワーク

1. 1440×1024のデスクトップフレームを作成してください

2. 四角形でヘッダー(幅1440×高さ80)を作成し、背景色を#1a1a2eに設定してください

3. ヘッダー内に白色テキストでサイト名を配置してください

4. シェイプを使ってシンプルなボタンを作成してください

📝まとめ

フレーム・シェイプ・テキストはFigmaの三大基本要素です。これらを自在に操作できるようになることが、すべてのデザインワークの土台となります。ショートカットキーを覚えて、効率的に操作できるよう練習を重ねましょう。

← 前のレッスン
次のレッスン →

レッスン一覧

1Figmaとは?Webデザインツールの選び方2Figmaの基本操作 - フレーム・シェイプ・テキスト3デザインの4原則 - 近接・整列・反復・コントラスト4配色の基礎 - カラーパレットの作り方5タイポグラフィ - フォント選びと文字組み6コンポーネント設計とバリアント7Auto Layoutで効率的なレイアウト8レスポンシブデザインの実践9プロトタイプとインタラクション10デザインシステムの構築11開発者への引き継ぎ(Dev Mode)12ポートフォリオサイトの実践制作