この記事の目次
Webデザイン制作におけるFigmaの使い方
![Webデザイン制作におけるFigmaの使い方](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-65.jpg)
Webサイトの設計
Webサイト設計のフェーズでは、Figmaが非常に強力なツールとして役立ちます。 まず、サイトマップの作成に利用されます。 通常、ExcelやPowerPointを使ってサイトマップを作成することが多いですが、Figmaを使うことで共有とリアルタイムの編集が簡単に行えます。 クライアントやチームメンバーと画面を共有し、その場で意見を取り入れて変更を加えることができます。Webデザイン制作
Webデザイン制作の段階でもFigmaは大活躍です。 ここでは「デザインカンプ」を作成します。 デザインカンプとは、最終的なWebページのデザインをビジュアル化したもので、クライアントやチームとイメージを共有するために非常に重要です。 この段階で共有編集ができるFigmaの機能は大いに役立ちます。実装・システム開発・コーディング
デザインが完成したら、次は実装・システム開発・コーディングの段階に進みます。 ここでもFigmaが力を発揮します。 Figmaで作成したデザインデータは、コーディングの際にも非常に役立ちます。 Figmaには、マージンやパディングなどのCSS情報を表示する機能があります。 この機能を使えば、デザインから直接コードをコピーしてコーディングに利用できます。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
画像データもFigmaから書き出し可能なので、デザインをそのままWebページに反映させることができます。
リリース
最後にWebサイトをリリースする段階です。 このフェーズでは、Figmaの役割は一段落しますが、過去のプロジェクトファイルやデザインデータは、今後の運用・改善フェーズで再利用するために保管しておくと便利です。 Figmaプロジェクトを適切に保存し、必要に応じていつでもアクセスできるようにしておくことが大切です。Figmaで使える無料Webデザインテンプレート
![Figmaで使える無料Webデザインテンプレート](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-66.jpg)
Responsive Portfolio Template
![Responsive Portfolio Template](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-172628.png)
CreateX
![](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-173557.png)
Travel Agency Landing Page
![Travel Agency Landing Page](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-173716.png)
New Year Deal Web Page
![New Year Deal Web Page](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-173844.png)
Marka Email Genearator
![Marka Email Genearator](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-174113.png)
Bookshop Website
![Bookshop Website](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-174237.png)
Agency Landing Page on Envato Elements
![Agency Landing Page on Envato Elements](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-174410.png)
Open
![Open](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-174523.png)
Breakpoints
![Breakpoints](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-24-174634.png)
Figmaでのワイヤーフレームの作り方
![Figmaでのワイヤーフレームの作り方](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-67.jpg)
どのように情報を設計するか整理する
ワイヤーフレームを作成する前に、まず必要な情報を洗い出し、それに優先順位をつけることが重要です。 ユーザーが「何をしたいのか」「なぜそれをしたいのか」などの要求定義を通して要件を明確化し、それを基にサイトマップを作成しましょう。 このステップにより、情報の整理と構造化がスムーズに進むので、ワイヤーフレーム作成の土台を作り上げます。メイン機能のページから作り始める
Figmaでワイヤーフレーム作成を始める際には、まずメインとなる機能のページから取り掛かると効率的です。 例えば、洋服のECサイトを作成する場合、トップページや商品一覧ページから始めるとよいでしょう。 新規デザインファイルを作成し、フレームタブを使ってPCやスマホに対応するフレームを選びます。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
これで各デバイスに合わせたデザインを効率よく作成できます。
コンテンツを配置する
情報が整理されたら、次にコンテンツを配置します。 Figmaのシェイプツールやテキストツールを使って、洗い出した情報を実際にレイアウトしていきましょう。 まずはざっくりとした配置で問題ありません。 細かい部分は後で微調整できますので、大まかな骨組みを作り上げていきます。 また、数値を使って図形のサイズを指定することもできるので、詳細なレイアウトも簡単に行えます。テキストスタイルの設定をする
ワイヤーフレームを進める中で、テキストのスタイルを設定することが非常に役立ちます。 Figmaには「ローカルスタイル」を設定する機能があり、文字サイズやスタイルを事前に設定しておくことで、複数のページにわたるテキストの統一感を保つことができます。 特にフォントサイズや色を一括で変更できるのは、大きな時間節約になります。 また、コンポーネント機能を使えば、再利用可能なパーツを簡単に扱えます。遷移がわかるようにする
作成したページがどのように遷移するかをビジュアルに理解するために、各ページを矢印で繋いでおきます。 ここで便利なのが、Figmaの「AutoFlow」プラグインです。 このプラグインを使うことで、ページ間の遷移を視覚的にわかりやすく表示できます。 これにより、ユーザーがどのページからどのページへ進むか、一目で理解できるようになります。プロトタイプを作成する
最後に、作成したワイヤーフレームを実際に動作させてみるためにプロトタイプを作成します。- 右上にあるプロトタイプモードに切り替え、ボタンやリンクとなるシェイプに矢印をつなぎます。
- 遷移方法やインタラクションを設定したら、右上にある再生ボタンからプロトタイプを実際に試すことができます。
Web制作でのFigmaのメリット7つ
![Web制作でのFigmaのメリット7つ](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-68.jpg)
ソフトが必要なくブラウザ上で手軽に利用できる
Figmaの大きな魅力の一つは、専用ソフトをインストールする必要がない点です。 アカウントを作成してログインするだけで、インターネットに接続されているパソコンからすぐに利用可能です。 これは特にフリーランサーやチームでの作業が多い場合に非常に便利です。 ブラウザさえあればどこでもアクセスできるため、外出先でもスムーズに作業を続行できます。開発スピードが速く効率良く進める
Figmaは非常に高速で、ストレスなく作業が進められます。 特に、スムーズな操作感とレスポンスの速さが多くのユーザーに評価されています。 作業がサクサク進むことで、プロジェクト全体の進行もスムーズに行えます。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
リアルタイムでの変更も即座に反映されるため、フィードバックや修正作業も効率良く行えます。
複数人で共同作業ができる
Figmaは複数人での共同編集機能が非常に優れています。 URLを共有するだけで、チームメンバーやクライアントが同じファイルにアクセスし、リアルタイムでコメントをつけたり修正を加えたりできます。 従来のようにファイルをやり取りする手間が省け、大幅に効率が向上します。 これにより、多様な意見を取り入れながら迅速にプロジェクトを進められます。プラグインを便利にカスタマイズできる
Figmaのもう一つの魅力は、その豊富なプラグインによるカスタマイズ可能性です。 例えば- アイコンの挿入
- 商用利用可能な画像の取り込み
- 自動背景削除
様々な職種の人の利用が可能
FigmaはUIデザイナー向けのツールとして知られていますが、実際には- マーケティング担当者
- プロジェクトマネージャー
- エンジニア
無料プランがある
Figmaには基本的な機能を利用できる無料プランが存在し、これが大きな魅力となっています。 無料プランでも多くの機能が使えるため、まずは気軽に試してみることができます。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
もちろん、無料プランには使用ファイルの数などに制限があるため、本格的に利用する場合は有料プランに移行することをおすすめします。
デザイン制作に必要なツールは搭載されている
Figmaにはデザイン制作に必要なツールが一通りそろっています。- 図形描画ツール
- テキストツール
- 色選択ツール
Web制作でのFigmaのデメリット3つ
![Web制作でのFigmaのデメリット3つ](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-71.jpg)
ガイド線の固定ができない
Figmaには、ガイド線を固定する機能がありません。 これは一見、些細なことのように思えますが、実際のデザイン作業では大きな影響を与える場合があります。 たとえば、デザインを進めていく過程で無意識のうちにガイド線を動かしてしまうことがあります。 このような場合、後になってデザインの全体を見直したときに、ガイド線の位置がずれていることに気付くことがあります。 このずれがデザインのバランスに悪影響を及ぼすこともあるため、固定機能がないのは不便です。使用中は特に注意が必要です。ヒストリー機能がない
Figmaには、作業工程を逐一記録し、特定のポイントまで遡って修正を行う「ヒストリー機能」がありません。 この機能がないと、特にデザインを簡単に比較したり、ある地点まで戻ってやり直すといった作業が難しくなります。 たとえば、複数のデザインパターンを構築して比較検討する際に、ヒストリー機能があれば効果的に作業を進められますが、Figmaでは逐一保存しておく必要があります。 これが少し手間に感じることがあるかもしれません。出力形式が少ない
Figmaのファイル出力形式は、2023年4月時点で「PNG」「JPG」「SVG」「PDF」と限られています。 Photoshopや他の著名なデザインツールの形式に対応していないため、それらのツールで作業を継続したい場合には困難なことがあります。 例えば、クライアントから編集データを残した状態での納品を求められた際、Figmaで作成したデザインを他のツールで開くことが難しいです。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
そういった場合には、他のツールやフォーマットへの変換が必要になることもあるので、予め注意が必要です。
Figma(フィグマ)が学べるWEBデザインスクールランキングおすすめ7選
![Figma(フィグマ)が学べるWEBデザインスクールランキングおすすめ7選](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-70.jpg)
SHElikes(シーライクス)
![SHElikes](https://digital-hacks.jp/blog/wp-content/uploads/2024/04/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-04-06-15.47.55.jpg)
受講スタイル | 通学 or オンライン |
コースと費用 | スタンダードプラン:162,800円 ライトプラン:107,800円入会金:162,800円 |
受講期間 | 1ヶ月〜12ヶ月 |
サポート体制 | ・添削サポート ・お仕事チャレンジサポート ・コーチング指導サポート |
質問形式 | チャット質問 |
学習可能なソフト | Illustrator / Photoshop /Figma/広告・SNSバナー制作/コーディング/ライティング/マーケティング |
公式サイト | https://shelikes.jp/ |
デイトラ
![デイトラ](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-01-105158.jpg)
受講スタイル | オンライン |
コースと費用 | Webデザインコース:119,800円 |
受講期間 | Webデザインコース:90日間 |
サポート体制 | ・チャット質問サポート ・キャリアサポート |
質問形式 | 24時間いつでも質問OK(回答はコース毎に定められた時間のみ) |
学べるスキル | Figma / Photoshop |
公式サイト | デイトラ |
Winスクール
![Winスクール](https://digital-hacks.jp/blog/wp-content/uploads/2024/04/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-04-06-18.07.08.jpg)
受講スタイル | 通学 or オンライン |
コースと費用 | WEBスタンダードPlus:333,000円 WEBデザイナーPlus:410,300円 WEBクリエイター:333,000円 WEBマスター:440,000円 WEBプログラマ:444,400円 WEBプログラミングプロ:539,000円 |
受講期間 | 6〜10ヶ月 |
サポート体制 | ・転職・就職サポート ・質問サポート |
質問形式 | 対面質問 |
学習可能なソフト | Illustrator / Photoshop / HTML / CSS / SEO / LP制作 / ポートフォリオ制作 |
公式サイト | https://www.winschool.jp/ |
RaiseTech(レイズテック)
![RaiseTech(レイズテック)](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-02-093511.jpg)
受講スタイル | オンライン |
コースと費用 | デザインコース:通常448,000円(税込)、学割288,000円(税込) |
受講期間 | デザインコース:4カ月 |
サポート体制 | サポート期間無期限と課題添削無制限、2週間全額返金保証、履歴書添削、案件の獲得支援 |
質問形式 | 質疑応答:10:00~24:00 |
学習可能なソフト | Premiere Pro/Photoshop/Illustrator/YouTube編集/SNS度が制作/モーショングラフィックス/ビジネス |
公式サイト | https://raise-tech.net/ |
デジタルハリウッド STUDIO by LIG
![デジタルハリウッドSTUDIO](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-01-110953.jpg)
受講スタイル | 通学 or オンライン |
コースと費用 | Webデザイナー専攻:517,000円(税込) Webデザインベーシック講座(旧:Webデザイン入門プラン):149,600円(税込) |
受講期間 | 2〜6ヶ月 |
サポート体制 | ・就転職サポート ・添削サポート ・マンツーマンサポート |
質問形式 | チャット質問、直接質問 |
習得可能言語 | Illustrator / Photoshop / XD / DreamWeaver / デザインスキル など |
公式サイト | デジタルハリウッドSTUDIO |
DMM WEBCAMP
![DMM WEBCAMP](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/スクリーンショット-2024-05-01-110554.jpg)
受講スタイル | オンライン |
コースと費用 | Webデザインコース ・8週間プラン268,400円(税込) ・16週間プラン378,400円(税込) ・24週間プラン488,400円(税込) ・32週間プラン598,400円(税込) |
受講期間 | 8週間、16週間、24週間、32週間 |
サポート体制 | キャリアアドバイザーが転職支援サポート、返金保証、24時間利用可能 |
質問形式 | チャット |
習得可能言語 | HTML、CSS、JavaScript |
公式サイト | DMM WEBCAMP |
TechAcademy
![TechAcademy(テックアカデミー):時間と場所を選ばない学習環境](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-05-091432.jpg)
- 案件紹介サポート
- チャット質問サポート
- マンツーマンサポート
受講スタイル | オンライン |
コースと費用 | Webデザインコース(学生):4週間273,900円(税込)、8週間361,900円(税込)、12週間438,900円(税込)、16週間515,900円(税込) (社会人):4週間284,900円(税込)、8週間372,900円(税込)、12週間449,900円(税込)、16週間526,900円(税込) |
受講期間 | Webデザインコース:4週間、8週間、12週間、16週間 |
サポート体制 | 副業支援あり、仕事紹介保証、給付金対象 |
質問形式 | チャット質問(15:00~23:00) |
学べるスキル | Photoshop、HTML/CSS3、ワイヤーフレーム、Sass、jQuery、Webデザインの原則 |
公式サイト | https://techacademy.jp/ |
![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
興味があるスクールがありましたら、是非体験授業や説明会に参加してみてくださいね!
Figmaでのwebデザインに関してよくある質問
![Figmaでのwebデザインに関してよくある質問](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-69.jpg)
Figmaのファイル出力形式は?
Figmaは、デザインファイルをさまざまな形式で出力することができます。 特によく使われるのはPNG、JPG、SVG、PDFなどです。 これらの形式によって、デザインデータを適切に共有したり、開発チームやクライアントに提供したりすることができます。 また、プロジェクトの要件に応じて、ファイルの解像度や品質もカスタマイズできるため、最適な形でデザインを提供することが可能です。Figmaのテンプレートはどこにありますか?
Figmaには公式のテンプレートライブラリがあり、さまざまなデザインプロジェクトにすぐに使えるテンプレートが揃っています。 公式サイトやFigmaコミュニティからダウンロードすることができます。 検索機能を使って、必要なテンプレートを見つけることも可能です。 特にマテリアルデザインやiOSデザインガイドラインに沿ったテンプレートは、多くのデザイナーに利用されています。Figmaでのワイヤーフレーム作成に使えるおすすめプラグインは?
Figmaでのワイヤーフレーム作成には、便利なプラグインがいくつかあります。以下にその代表的なものを紹介します。Wireframe
「Wireframe」プラグインは、さまざまなワイヤーフレーム素材を選んでクリックするだけで簡単に自分のファイルに挿入できる便利なプラグインです。 このプラグインを使えば、ユーザーインターフェース(UI)のアイディア出しや、具体的なデザインを作成するのに役立ちます。 あらかじめ用意されたパターンを組み合わせるだけで、短時間で効率的に作成できるのが魅力です。Autoflow
「Autoflow」プラグインは、簡単に滑らかな矢印を作成できるプラグインです。 図形を選択してクリックするだけで、自動的に矢印で繋ぐことができます。 これにより、ページ遷移やユーザーフローを視覚的に表現するのが容易になります。 ワイヤーフレームだけでなく、複雑なフローチャートを作成する際にも非常に便利です。Wire Box
「Wire Box」は、作り込んだデザインをワイヤーフレームに変換してくれるプラグインです。 既存のウェブサイトをリニューアルする際に、ゼロからワイヤーフレームを作成する必要がなく、デザインの効率化に役立ちます。 このプラグインを使えば、既存のサイトを簡単にワイヤーフレームに戻し、新たなアイディアやデザイン改善のための基盤を迅速に作成できます。Figmaのデザインデータを公開する方法は?
Figmaでは、デザインデータを共有URLを作成して公開することが可能です。 デザインデータを他のチームメンバーやクライアントと共有する際に、このURLを使えば簡単にアクセスできるようになります。 また、共有設定を変更することで、アクセス権限を制限することもできます。 例えば- 閲覧のみ許可する
- 編集を許可する
Figmaで公開設定をするやり方は?
Figmaでの公開設定は非常に簡単です。- デザインファイルを開き、右上の「共有」ボタンをクリックします。
- そこで表示されるメニューから、「リンクの設定」を選びます。
- リンクの公開範囲を設定します。
- 誰でもアクセスできるリンクを作成する場合は「公開」、特定のユーザーにのみアクセスを許可する場合は「特定の人」などを選択します。
Figmaでwebデザインを作るときのサイズは?
FigmaでWebデザインを作成する際のサイズ設定は、プロジェクトの要件やターゲットデバイスに関係します。 一般的には、デスクトップ用のデザインの場合、幅1440ピクセルや1920ピクセルのアートボードを使用します。 モバイル用のデザインの場合、幅375ピクセル(iPhone Xなど)や414ピクセル(iPhone Plusシリーズなど)がよく使われます。 Figmaにはデバイスプリセットもあるので、それを利用すれば簡単に適切なサイズのアートボードを作成できます。Figmaを活用してwebデザインを簡単に作りましょう!
![Figmaを活用してwebデザインを簡単に作りましょう!](https://digital-hacks.jp/blog/wp-content/uploads/2024/05/★-72.jpg)