FigmaのWebサイトデザイン画面の表示方法。画面が見つからないとき。 / いがわ

.

Memo

FigmaのWebサイトデザイン画面が見つからないとき。

FigmaのWebデザイン用画面が見つからない?

FigmaのUI/UXデザインが変更。

Figma Sitesの登場。

Figma Config 2025の開催後、FigmaのUI/UXがアップデートされており、機能がもりもりになっている。

Webサイトデザイン用のフレームも、AIとノーコードツールの流れによって、機能やインターフェイスが変わっている。

Webサイトデザイン用の画面が増える。

従来のデザイン画面もそのまま使用できるが、「Figma Sites」、日本語では「サイト」という、新しいデザインスペースが増えている。

2025.05.10時点ではベータ版。使用には有料プランが必要。)

FigmaのWebデザイン用画面が見つからないとき。猫と戯れる。

Webデザイン兼コーディング、そしてサーバーへ。

IllustratorやPhotoshopでのデザインや画像加工、HTMLやCSSなどでのコーディング、WordPressのオリジナルテーマ作成など、ひとりで制作をこなすような場合は追いつくのが大変。

それでもFigmaの大きなメリットとして、WordPressのように無料プラン(スタータープラン)でも使用できることが挙げられる。

Figma Sitesでは、Figmaで制作したデザインが、そのままHTMLやCSSなどのコードへ反映、生成される。

WordPressなどのCMS対応はこれからで、SEO的にどうかは不明だが、良くも悪くもコーディング作業が自動化できる。

Webサイトだけでなく、UI/UXデザインも。

サイトだけでなく、アプリなどのUI/UXデザインもFigmaで行える。

学生や初心者など、学習用に使用しているユーザーも、制作の規模に応じて課金していくことができる。

各プランの料金も良心的。


Webサイトのデザイン用画面へ進むには。

Figmaログイン後の手順。

「ドラフト」>「デザイン」から。

左にあるメニューから、「ドラフト」の「+」マークをクリックし、「デザイン」を選択すればOK。

ドラフトは下書きという意味で、オートセーブ機能により、保存も自動的にされる。

FigmaのWebサイトデザイン画面への開き方の説明画像。

右上の「作成」のボタンのメニューから、「デザイン」を選択しても進める。

FigmaのWebサイトデザイン画面への開き方の説明画像。

Figmaデザイン画面からの手順。

「ファイル」>「新規デザイン」から。

すでにデザイン画面に入っている場合は、左上にあるFigmaのメインメニューから、「ファイル」>「新規デザイン」でも可能。

FigmaのWebサイトデザイン画面への開き方の説明画像。

Webサイト用のフレーム。

「フレーム」>「デザイン」から。
デザインパネルのフレーム。

デザインパネルには、スマホ、タブレット、デスクトップなど、主要なデバイスサイズに合わせたフレームが用意されている。

FigmaのWebサイトデザイン用のフレームの説明画像。

たとえば「スマホ」>「iPhone 16」を選択すると、自動的にそのサイズのフレームが生成される。

FigmaのWebサイトデザイン用のフレームの説明画像。


Figmaの各プランと料金について。

Figmaは有料プランでも。

コスパが良い。

Figmaの有料プラン(プロフェッショナルプラン)でも、月額450円から3,000円と、敷居が低く、かつ段階的に上げられる。

場面場面に応じたコストで利用ができる。

Figmaの各プラン。

Figmaのプラン(年払い)

現時点(2025年5月)では、下記の料金設定となっている。

インフレや物価高、円安などの影響でコストが上がっている中、この料金設定は非常にありがたい。

Figmaの料金プランの画像。(月額)

Figmaのプラン(月払い)

月額契約でも750円と、単発作業や学習用としても使用しやすい。

Figmaの料金プランの画像。(年間)

Figmaのプラン(ビジネス向け、年払い。)

企業向けにもビジネスとエンタープライズが用意されている。

Figmaの料金プランの画像。(ビジネス、エンタープライズ)

引用元:プランと料金 | Figma

2025.05.10時点。)

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。