メインコンテンツまでスキップ

FigmaでのWebデザイン

美しくレスポンシブなWebデザインを作成

Figmaは、世界最高のWebサイトを共同でデザインする無料オンラインプラットフォームです。Figmaは、ワイヤーフレームからデザイン、プロトタイプ、開発まで、シームレスなWebデザインプロセスを実現します。

虹色のイラストで埋め尽くされたWebデザイン画面のグラフィック表現。虹色のイラストで埋め尽くされたWebデザイン画面のグラフィック表現。

FigJamをご利用いただいているブランド

Puma社ロゴSpotify社ロゴPatagonia社ロゴStripe社ロゴNew York Times社ロゴNetflix社ロゴ

あらゆるデバイスに対応するレスポンシブWebデザイン

アイデアから実装までにかかる時間を短縮し、あらゆる場所で適切に機能するデザインを実現します。

チームカーソルが、Webページ上の色のスタイルとオートレイアウトを選択している。チームカーソルが、Webページ上の色のスタイルとオートレイアウトを選択している。

適切なツールでデザインをスピードアップ

プロジェクトをすぐに開始して、オートレイアウト、コンポーネント、スタイルなどのツールを使用して、規模に応じた一貫したデザインを行いましょう。

開発前に命を吹き込む

ノーコードのインタラクティブなプロトタイプであなたのビジョンを披露しましょう。わずか数クリックで実環境のWebエクスペリエンスを再現できます。

デザインからライブサイトまでの時間を短縮する

開発モードは、ハンドオフを構造化し、開発者が必要なものを簡単に見つけられるようにします。

Webデザインの機能の詳細

最初から最後まで共同でビルドできる機能で、優れたWebエクスペリエンスをすばやくデザインできます。

紫色の背景、ボタンテキストの例、カラースタイルなどを含むコンポーネントデザインキットファイル。紫色の背景、ボタンテキストの例、カラースタイルなどを含むコンポーネントデザインキットファイル。

UIキットとテンプレートを使ってみる

Figmaコミュニティが作成した無料のコンポーネントベースのワイヤーフレームキットで、Webサイトのデザインワークフローをスピードアップします

コミュニティを見てみる

モバイルアプリのデザインを囲む複数のチームカーソル。コメントには「この方向性は脈がありそうだ。プロトタイピングを始めよう」と書かれている。モバイルアプリのデザインを囲む複数のチームカーソル。コメントには「この方向性は脈がありそうだ。プロトタイピングを始めよう」と書かれている。

コラボレーターを招待する

部門をまたがるパートナーやステークホルダーを招待して、Webデザインにコンテキストに応じたコメントを追加して、すぐにフィードバックを得られるようにします。

コラボレーションを開始

ボタンのカスタムバリアブルのメニューを選択するカーソルボタンのカスタムバリアブルのメニューを選択するカーソル

デザインシステムをコードに整合させる

コンポーネントとスタイルを簡単に作成、維持、共有し、トークンを使用して、デザインファイルやコード全体で同じ言語を使用できます。

デザインシステムの詳細情報

2人のチームメイトカーソルがアノテーションを使用して、eコマース製品ページでエンジニアリング用のデザインノートを文書化。2人のチームメイトカーソルがアノテーションを使用して、eコマース製品ページでエンジニアリング用のデザインノートを文書化。

開発モードでビルド

Webデザインを明確にし、開発者がそれをコードに変換するために必要なツールを提供します。

開発モードの詳細

職能にかかわらず、全員が1つの集約された場所で表示し、理解し、その対象に自分の成果を盛り込むことができます。

Lauren LoPrete氏、Dropbox社デザインシステム リード

Dropbox社ロゴ
詳しい内容を読む

Web開発者向けその他のリソース

マルチカラーの背景にFigmaのロゴ、黄色のカーソルチャットには「Sweeeeet!」と書かれているマルチカラーの背景にFigmaのロゴ、黄色のカーソルチャットには「Sweeeeet!」と書かれている

Webサイトデザインシステムの構築方法

Figma社マーケティングチームによるfigma.com向けのデザインシステムの構築の事例をご紹介します。

記事を読む

Figmaのコミュニティで「web」を検索した結果。Figmaのコミュニティで「web」を検索した結果。

Webデザインのためのコミュニティリソース

Figmaコミュニティが作成し、提供しているWebデザインのインスピレーション、ツール、テンプレートをご覧ください。

コミュニティを見に行く

紫色の商品ランディングページと商品詳細ページをつなぐプロトタイプリンクを作成するカーソル。紫色の商品ランディングページと商品詳細ページをつなぐプロトタイプリンクを作成するカーソル。

Figmaのプロトタイピングガイド

Figmaのプロトタイピング機能の使い方を説明します。

ガイドを入手する

FAQ