【初心者向け】Figmaの使い方を解説!Webデザインツールについて詳しく。ホームノーコードFigma【初心者向け】Figmaの使い方を解説!Webデザインツールについて詳しく。2023年10月6日SHAREポストシェアはてブLINE※本ページはプロモーションが含まれていますこちらの記事では、WebデザインツールFigma(フィグマ)について初心者向けに解説しています。Figmaの使い方について詳しく知りたい方は、参考にしてください。\Figmaの使い方を効率的に学習できる/Figmaの使い方を学習できるおすすめ講座を紹介Figma初心者の方は、講座等を活用してFigmaの実践的な使い方を学習することをおすすめします。1.初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>2.【2021年最新】現場のプロが教えるfigma初心者はまずはこれ!|0からWEBサイトを簡単に作成。爆速習得裏ワザ公開3.初心者【話題のFigmaでWEBデザイン。WebデザインツールFigma|まとめ目次へWebデザインツールFigmaとは?Figmaとは、ブラウザ上で簡単にデザインができるツールです。使い心地としては、パワーポイントをよりデザイン制作寄りにしたイメージです。ブラウザを起動できれば場所を選ばずに使用することができ、複数人で同時に編集することができるため多くの人に利用されています。UIデザイナーが必要とする多くの機能を備えており、Figmaを利用することで、従来の制作と比較して工数を抑えることが可能になります。デザイナーだけでなく、エンジニアやWebディレクター、ちょっとしたチラシや広告を作成したい人にもおすすめのツールです。2022年7月27日には日本語版がリリースされ、完全日本語対応になったことでも注目を集めています。合わせて読みたい【速報】Figmaの日本語版がリリース!日本語に切り替える方法を解説!Figmaのメリット・できることFigmaのメリット・できることとして、以下の点が挙げられます。操作する場所を選ばない共同編集ができる操作がシンプルで動作が軽いデータの共有が簡単それぞれ解説します。ブラウザを起動できればどこでも利用できます。作業の場所を選ばないため、どこでも好きな場所で作業できます。リアルタイムで共同編集ができるFigmaはリアルタイムで共同編集ができます。話し合いながらデザインすることが容易になり、リモート作業でも効率的に作業することができます。データの共有が簡単Figmaは、データを共有するときの面倒な作業も不要です。URLを送信するだけで簡単に共有できるため、無駄な確認コストをなくすことができます。操作がシンプルで動作が軽いFigmaはとにかく動作が軽いです。作業中もストレスを感じることなく作業することができます。Figamのデメリット・できないことFigmaのデメリット・できないこととして、以下の点が挙げられます。日本語フォントが少ないAdobe製品との相性が悪いそれぞれ解説します。日本語フォントが少ない現状、Figmaは対応している日本語フォントが少ないです。今後追加されることに期待です。Adobe製品と相性が悪いFigmaにはイラストレータやフォトショップとの連携機能がありません。そのため、Adobe製品の使用が必須となっている企業で業務を行う際には注意が必要です。Figmaの料金はいくらかかる?Figmaの料金プランはStarter・Professional・Organizationの3つのプランに分けられます。各プランの料金につきましては、以下の表を参考にしてください。ーFigmaの料金プランについて詳しく知りたい方は、以下の記事を参考にしてください。合わせて読みたい【2022年】Figmaの料金プランを解説!無料プランと有料プランの違いは?Figmaの使い方|アカウント作成~画面構成の説明こちらの章では、Figmaの使い方を初心者向けに画像付きで解説します。Figmaは無料で利用できますので、興味のある方は実際に使ってみることをおすすめします。ログインアカウントの作成Figmaを利用する際にはログインアカウントが必要になります。以下の手順を参考にFigmaのログインアカウントを作成してください。STEP.1Figma公式サイトにアクセス。free」をクリック。STEP.3登録情報を入力。Googleアカウントでも登録ができます。STEP.4画像の画面になれば完了。デスクトップアプリのダウンロード次に、デスクトップアプリをダウンロードしましょう。STEP.1デスクトップアプリのダウンロードWindowsかMacを選択。今回は、Windowsを選択します。STEP.3ダウンロードできたら完了。file」からデザインを作成できます。次に画面構成の説明をします。Figmaの画面は以下の要素で構成されます。デザイン画面ツールレイヤープロパティそれぞれの要素について解説します。デザイン画面デザイン画面は主な作業スペースになります。「フレーム」と呼ばれるアートボードを追加してデザインを作成します。ツールツールにはデザインを作る際に使うツールが並んでいます。ツールには以下の種類があります。選択ツールフレームツール図形ツールペンツールテキストツール手のひらツールコメントツールレイヤーレイヤーではオブジェクトの構造を管理します。プロパティプロパティではオブジェクトの設定を細かく指定できます。Figmaの使い方|フレームの作成~ファイルの書き出しFigmaの基礎情報を理解したら、実際にデザインを作成してみましょう!フレームの作成コンテンツを作成するためには、まずフレームを作成します。STEP.1「ファイル」から「新規作成」を選択。STEP.2「F」をクリックしてフレームサイズを選択。iPhone・タブレット・デスクトップといった様々な種類から選択することができます。今回はデスクトップを選択します。*Figmaではフレームなどを使用するとき、直接クリックして使用することもできますが、ショートカットを活用することで効率的に作業ができます。▶本当によく使うFigmaの便利ショートカット厳選36個まとめ選択すると「Desktop」のフレームが作成されました。STEP.3ツールバーからデザインツールバーには以下のツールがあります。実際にコンテンツを作成してみましょう!STEP.1ツールバーから長方形を追加。今回は長方形ツールを選択してコンテンツを作成します。STEP.2色の変更は「塗り」から色の変更。STEP.3背景に画像を追加する。長方形ツールは、背景に画像を利用することができます。プラグインを活用することで簡単に画像を追加できますので、今回はプラグインを利用します。長方形のフレーム全体を選択し、右クリックから「プラグインを探す」を選択しましょう。STEP.4プラグインをインストールする。Figmaは、プラグインを活用して機能を拡張できます。最適なプラグインを追加してFigmaをカスタマイズしましょう。多くのアイコンを使用できる。数百万を超えるアイコンを使用できる。ファイル形式や解像度も選択できる。フォントのレイアウトの変化を確認できる。手持ちのフォントをリアルタイムでプレビューできる。フォントのサンプルを表示できる。大量のイラストをコレクションしている。ベクター形式でファイルのインポートが可能。デザインに立体感を演出できる3Dキャラクターイラストの素材セット。コントラスト比のチェックや作成した色を実際のウェブデザインに適用できる。コントラスト比が測れる。WCAGに基づいた判定の記載もあり。FigmaデータをHTML・CSSに書き出してくれる。指定したURLのWebデザインを、Figmaデータに変換できる。今回は「Photos」を利用します。画面上部から「Plugins」を選択し、検索窓から「Photos」と検索してください。「instal」をクリックしてPhotosをインストールしましょう。STEP.5編集画面に戻り「Photos」を選択。STEP.6お好みの画像を探す。今回は「City」から画像を選択します。背景が画像に変更されました。STEP.7テキストを入力する。テキストは「T」をクリックすることで入力できます。次にプロトタイプの解説をします。プロトタイプとは、作成したコンテンツの試作品を確認できるデモンストレーションのようなモノです。編集画面より本番環境に近い状態でコンテンツの見た目・動きを確認できるので、完成前の確認などに活用しましょう。STEP.1別フレームを作成する。今回は「1.A」をクリックしたら、別ページに移動する動作を確認します。最初に作成したフレームとは別にフレームを作成しましょう。STEP.2遷移先のページに繋げる。オブジェクトをクリックすると「+」表示されるので、遷移先のページにドラッグして繋ぎましょう。アクションの指定は四角で囲った箇所からできます。今回は「1.Aをクリックしたとき、別ページに移動する」アクションを指定しました。STEP.3プレビューから動作の確認。画面右上の「プレビュー」から設定した動作の確認をしましょう。STEP.4エディターでアプリの設定を行う「1.A」をクリックすると。ページが移動しました!データを共有する作成したコンテンツを共有したい場合は、画面右上の「共有」をクリックしてメールアドレスを入力するか、リンクをコピーすることで簡単に共有できます。注意点として、共有する際に相手に以下の2種類の権限から選択して付与する必要があります。➜閲覧のみ外部の人に共有するときは注意してください。共有権限について詳しく知りたい方は、以下の記事を参考にしてください。最後にファイルを画像やPDFとして書き出す方法を解説します。書き出したい場合は、プロパティから「エクスポート」をクリックして書き出し形式を選択することでできます。書き出し形式は以下の4つから選択することができます。PNGJPGSVGPDF【補足】初心者の方は本や動画での学習もおすすめ!Figmaの基礎的な使い方を解説しましたが、これだけではFigmaを完璧に使いこなすことは難しいです。そこで初心者の方におすすめのFigmaの学習方法を幾つか紹介します。デザインの基礎を理解しよう!これからデザイナーを目指す方は、Figmaの使い方だけでなく、UI・UXといったデザインの基礎についてまずは、学習することをおすすめします。本格的にFigmaの使い方を学習したい方Udemyがおすすめ!本格的にFigmaの使い方を学習したい方は「Udemy」等のオンライン講座がおすすめです。Figmaの扱いになれたデザイナーの方のレッスンを格安で受講できるため、効率的に学習したい方に最適です。\Figmaの使い方を効率的に学習できる/Figmaの使い方を学習できるおすすめ講座を紹介Figma初心者の方は、講座等を活用してFigmaの実践的な使い方を学習することをおすすめします。1.初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>2.【2021年最新】現場のプロが教えるfigma初心者はまずはこれ!|0からWEBサイトを簡単に作成。爆速習得裏ワザ公開3.初心者【話題のFigmaでWEBデザイン。比較については以下の表を参考にしてください。プラグイン利用時のみ実際に使ってみた感想としては、Figmaの方が使いやすい印象です。弊社のデザイナーにも確認したところ、Figmaの方が共同作業がしやすいため、おすすめとの意見でした。XDの解説につきましては、以下の記事を参考にしてください。XDの比較!結局どっちがおすすめなの?WebデザインツールFigma|まとめWebデザインツールFigmaについて解説しましたが、参考になったでしょうか?Figmaは、複数人での共同作業に適したWebデザインツールです。デザイナーに必要な機能を多く備えており、データを共有する際の面倒な作業も不要です。無料から利用できますので、興味のある方はぜひ利用してみてください。本格的にFigmaの使い方を学習したい方は「Udemy」等の活用をおすすめします。最後までよんでいただき、ありがとうございました。\Figmaの使い方を効率的に学習できる/Figmaの使い方を学習できるおすすめ講座を紹介Figma初心者の方は、講座等を活用してFigmaの実践的な使い方を学習することをおすすめします。1.初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>2.【2021年最新】現場のプロが教えるfigma初心者はまずはこれ!|0からWEBサイトを簡単に作成。爆速習得裏ワザ公開3.初心者【話題のFigmaでWEBデザイン。