ホームページ作成の費用相場について
いくらくらいが適切なの？
ワイヤーフレームツールといえば、SketchやAdobe XDなどが定番とされてきましたが、近年圧倒的な勢いで利用者を増やしているのがFigmaです。しかし、非デザイナーの方の中には、利用が難しそう、日本語に対応しているか不安といった理由から、新しいツールの利用をためらっている方も少なくないのではないでしょうか。
そこで今回は、デザインの知識がない方にも分かりやすくFigmaというツールが一体どういったものなのか、どういった作業ができるのか、さらにレビュー・クチコミについて徹底的に解説します。
Figmaとは？
Figmaとは、ブラウザ上で誰もが簡単に使えるデザインツールです。その他のデザインツールと違って、チームのメンバーと共同編集できる点が大きな特徴となっています。2022年9月にはAdobe社がFigmaを買収したこともあり、次世代のデザインツールとして大きな注目を集めています。
日本語対応済みのデザインツール
Figmaは、2022年より日本語対応を開始しました。日本語版製品インターフェースはもちろん、Webサイトやサポートなども全て日本語に対応しています。東京にはアジア初のオフィスを構えていることからも、FIgmaが日本という市場を重視していることが伺えます。
Webサイトの言語設定の変更は、アカウント設定の中から行ってください。
- Figmaファイルブラウザの右上隅にあるアバターを選択します。
- [設定]をクリックします。
- [言語を変更]モーダルで、使用する言語を選択します。
- [保存]をクリックします
Figmaでできること
Figmaでは、Webデザインに関連するありとあらゆることを実現可能です。ここでは、
- デザイン制作
- ワイヤーフレーム制作
- プロトタイプ制作
- 他者とのデータ共有
- オンラインホワイトボードを使った会議
という5つに焦点を当てて、それぞれの機能をご紹介します。
デザイン制作
Figmaを使えばデザイナーでない人でも簡単に理想のデザインを実現できます。最新のペンツールは、ベクターネットワークによってどんな方向にも自由に動かせて直感的に利用できる点が高く評価されています。デザインのために必要なフレームは、iPhone・Apple Watch・Google・Pixel・デスクトップPCなどが全て用意されており、対応幅が広くスピーディーにデザインを進められる点も魅力です。
また、デザインの知識がない人をサポートしてくれるのがオートレイアウトです。テキストに合わせてボタンのサイズを変更してくれたり、アイテムを移動させるとリスト自体が再配置されたりと、レイアウト調節にかかる時間を大幅に短縮できるでしょう。
ワイヤーフレーム制作
ワイヤーフレームとは、Web制作における設計図を指します。Figmaでは、オリジナルで作成する方法とテンプレートを使用する方法の2つがあります。オリジナルで作成する場合には、ページに必要な情報を明確にした上でフレームを選択し、レイアウトを考えてコンテンツを配置したら、最後にプロトタイプで確認して完了です。
mat
、より簡単にワイヤーフレームを制作したい方はテンプレートを活用してみましょう。既成のワイヤーフレームキットを利用することでよりスピーディーに作業に取り組めます。
プロトタイプ制作
プロトタイプとは試作品という意味を持つ言葉で、完成イメージのデザインを伝える役割を持っています。Figmaを使えば、プロトタイプモードに切り替えてデバイスやスタート画面の設定を行うだけで、簡単に各ページデザインの完成イメージを確認できます。
また、リンクさせたいページについては矢印を使って視覚的につなげられるような工夫も取り入れられていて、Webコードなどの知識がない方でも感覚的に操作できるのが魅力です。
他者とのデータ共有
他のデザインツールにはないFigmaの大きな魅力として、他社とレイヤーを共有できる点があげられます。「Share」ボタンをクリックしてURLを伝えるだけで、誰でも簡単に制作中のデザインを閲覧することができます。
また、コメント機能も充実しており、修正してもらいたい場所にクライアントからのコメントを残してもらったり、気になる点を仲間に伝えたりすることもできます。チーム内で効率よくコミュニケーションを取りながら良いデザインを生み出したいという方におすすめです。
オンラインホワイトボードを使った会議
Figmaには、Fig Jamというチームによるコラボレーションをサポートしてくれるオンラインホワイトボードサービスもあります。300以上のテンプレートを利用することで、より効果的なミーティングやブレインストームミングなどを実現できるでしょう。また、オンラインホワイトボードには、スタンプや絵文字で反応する機能や、カレンダー・タイムライン機能なども備わっています。
Figmaのメリット
Figmaのメリットは、
- 無料で利用できる
- 専用ソフトが必要ない
- 自動保存機能が付いている
- コミュニティに参加できる
- プラグインが豊富に用意されている
などがあげられます。それぞれの魅力についてくわしくご紹介します。
無料で利用できる
Figmaの一番の魅力は、無料で利用できるプランが用意されている点です。スタータープランと呼ばれる無料プランは、無期限で利用し続けることが可能です。
無料プランでできること
- 3つのFigmaファイルと3つのFigJamファイルの利用
- 30日までのバージョン履歴の利用
- 個人用ファイル数の無制限利用
- コラボレーター数の無制限利用
- プラグイン、ウィジェット、テンプレートの利用
- モバイルアプリの利用
参照：Figma-料金
有料プランに変更することで、
- Figmaファイルの無制限利用
- バージョン履歴の無制限利用
- プライベートプロジェクトの作成
などが可能になります。まずは無料で利用して、必要に応じて有料プランに切り替えるのがおすすめです。
専用ソフトが必要ない
Figmaを使用するにあたって、特定のソフトウェアをインストールする必要はありません。Webブラウザ上でアカウントを作成するだけで、誰でも簡単に利用できます。職場でのパソコンや自宅のノートパソコンなどさまざまな端末から利用でき、利便性が高いのが魅力です。
また、デスクトップアプリも提供されているため、デバイス上で利用したい場合も対応できる懐の深さも魅力的です。
自動保存機能が付いている
Figmaには、30分毎の自動保存機能が備わっています。また、これらのバージョン履歴は、無料プランであれば30日間、有料プランであれば無制限で管理可能です。万が一編集前の状態に戻したいという場合でも、簡単に過去のバージョンに戻せるため、自由にデザインを編集できます。
コミュニティに参加できる
Figmaでは、デザインをより魅力的なものにしたい、他のユーザーから学びたいという方にぴったりのコミュニティも用意されています。コミュニティでは、自分の作品を共有したり、デザインのアイデアを学んだりできます。デザイナー・イラストレーター・コンテンツライターなどのさまざまなグループが参加しているため、キーワードを使って気軽に検索してみましょう。最新のトレンドデザインを学びたいという方にもおすすめです。
プラグインが豊富に用意されている
Figmaでは、プラグインが豊富に用意されています。プラグインは、Figmaコミュニティから検索可能で、すぐに利用できます。
たとえば、
- アイコンの挿入
- 動画の挿入
- 画像背景の切り取り
- アニメーションのインポート
- 画像・動画の圧縮
- アクセシビリティのチェック
など、さまざまな機能が簡単に追加できます。必要に応じて、使い勝手の良いものを取り入れてみましょう。
Figmaのデメリット
Figmaのデメリットとしては、
- 出力の拡張子が少ないこと
- 日本語のフォントが少ないこと
があげられます。ここでは、デメリットとその解決策をご紹介します。
出力の拡張子が少ない
Figmaは、PNG・JPG・SVG・PDFの4つの拡張子に対応しています。デザインツールの中では比較的少ない方で、その他の拡張子が必要な方にとっては不便に感じられるかもしれません。
しかし、プラグインを利用すれば、GIFやPSDなどを含むさまざまな拡張子に出力できます。コミュニティ内の検索機能を使って、プラグインで対応できるかどうかを確認してみましょう。
日本語のフォントが少ない
Figmaで用意されている日本語のフォントの数は、決して多くはありません。そのため、デザインが似通ったものに仕上がりやすい傾向にあります。デザイン性の高いフォントを採用したいという方は、拡張子と同じようにプラグインを活用してください。
なかでも特におすすめしたいのが、「Japanese Font Picker」というプラグインです。38種類の日本語フォントが用意されており、テキストとしてその場で試入力しながらフォントを選択できるため使いやすく、デザインの幅が広がります。
その他のデザインツールとの違いとは？
Figmaとよく比較されるのが
- AdobeXD
- Canva
- Sketch
などのデザインツールです。ここでは、それぞれのデザインツールについてFigmaと比較しながらご紹介します。
AdobeXD
デザインツールとして定番のAdobeXDですが、Adobe社がFigmaを買収したことにより2023年1月に単体販売が終了しました。現在でもコンプリートプランに登録すれば利用できますが、今後アップデートが減っていく可能性があるでしょう。
デザインツールとしての機能にはそこまで大きな違いはありませんが、AdobeXDが共有ファイルは1つまで・クラウドストレージ2GBまでと制限されているのに比べ、Figmaでは、共有ファイル・クラウドストレージともに無制限で使用できるのがメリットとなっています。
また、AdobeXDは、年間3万円から7万円費用がかかるのに対し、Figmaは基本料金が無料なので、利用しやすいという魅力もあります。
Canva
Figmaと同じように利用者数を伸ばしているのがCanvaです。Canvaは、デザイン初心者でも、テンプレートや素材を使いながら直感的にデザインを制作できるツールです。また、素材を移動させるだけで動画も作成できることから、高い支持を集めています。
Canvaは、Figmaと同じように無料で利用できるため、両方を試してみて使いやすい方を選ぶのがおすすめです。
Canvaは、テンプレートや素材などが多く初心者でも直感的にデザインできる一方、Figmaはさらに細かい調節や作業を行いやすいというメリットがあります。特にデザインカンプと呼ばれるWebサイトやLPの完成見本や、縦長デザインのLPなどの制作についてはFigmaの方が得意とされています。
Sketch
Sketchは、長い歴史を持つデザインアプリで、基本機能は無料で利用できます。FigmaがWeb上で動作するのに対し、Sketchはデスクトップアプリ上で動作するためFigmaのようなリアルタイムでのコラボレーション機能がないのが大きな違いとなっています。また、Mac専用アプリなので、Windowsを使用している方はインストールできません。
SketchからFigmaに移行したいという方は、FigmaのアカウントにSketchファイルをインポートする機能を使用することで、スムーズにデータ移行を完了させられます。
Sketchの動作性が好きというファンも多いため、Macを使用している方は選択肢の一つとして試してみるのも良いでしょう。
Figmaのレビュー・クチコミ
ここでは、Figmaのレビューや口コミをご紹介します。良い点だけでなく改善して欲しい点も紹介しますので、ぜひ参考にしてみてください。
良い点
“複数名でのデザイン設計や編集に優れています。特に同時編集・共有の機能が大変優れているので、複数メンバーで認識をあわせながらガンガンデザインを変更したり、話あったりということが容易にできます”
“複数名のプロジェクトにて、デザイナー数名でFigmaを利用しています。最初は他社製品からの乗り換えだったため組織に使い方をマスターしたメンバがほとんどおらず、基本的な機能を理解するのに時間がかかりましたたが、使い始めてみると驚くような使いやすさ。特にオートレイアウトの機能の有能さは一度使い始めると他のツールに戻ることができません。あとはバージョン管理や、履歴なども見れるので、間違って操作をしてしまっても戻れるのが助かります。”
改善してほしい点
“最初の導入時にオートレイアウトの使い方がわからず苦戦しました。もちろんググれば使い方はいっぱい出てきますが、最初のチュートリアルをもう少し手厚くして欲しいです。”
“日本語フォントの種類がさらに多いと、より具体的な完成イメージをチーム内で共有できるので、その点が改善されるとより良くなると思います。”
デザインツールの決定版Figmaを活用しよう
今回は、デザインツールの決定版Figmaの魅力をご紹介しました。基本機能であれば誰でも無料で利用できる点や、複数人で共同で作業を行える点がFigmaの大きな特徴です。プラグインやコミュニティ機能などを活用しながら、洗練された独自のデザインを作成しましょう。
Share
