こんにちは。
株式会社クラウドシードの制作担当です。
本記事では、無料で利用可能な高機能デザインツール「Figma（フィグマ）」の導入方法について詳しく解説していきます。
日本語フォントの利用方法やFigmaの日本語化なども解説しているので、ぜひ参考にしてみてください。
目次
Figmaとは
FigmaはWeb上で使用できる高機能なUI/UXデザインツールです。
AdobeXDやSketchとは違い、アカウントを作成すれば誰でも基本無料で使うことができます。「趣味でデザインをしてみたい！」「デザインを独学で始めてみたい」という方にもおすすめのツールです。
さらに、複数人でリアルタイム編集を行えるので、リモートワークなどで同僚と直接やり取りのできないプロのデザイナーやディレクターにもおすすめです。（無料プランでは編集権限が2人までとなります。）
ブラウザ版Figmaの導入方法
アカウント作成
Figmaを利用するためには、アカウントの作成が必要です。ブラウザ版のFigmaはアカウント作成のみで利用できます。
まずは、アカウントの作成を行いましょう。Figmaの公式ページへアクセスし、画面右上の「Sign up」をクリックしてください。
表示された入力フォームにメールアドレスとパスワードを入力し、「Create account」(アカウント作成ボタン）をクリックしてください。
次にアカウント名の入力と、職業を選択を行います。
これでアカウントの作成は完了です！
ブラウザ版を利用する場合は、これで利用が可能となります。
Web版を日本語化する方法
Figmaのテキストはすべて英語で記載されています。このままでも不便を感じないのであれば問題ありませんが、英語が苦手な方には使いにくいのではないでしょうか。
英語だと使いづらいと感じている方は、日本語化したWeb版で操作を覚えてから、デスクトップ版を利用してみてもいいかもしれませんね。
Web版の日本語化に使用は、Chrome拡張機能の「Figma 日本語化」です。ほぼすべてのメニューの日本語化に対応しており、直感的に使用できます。
インストールするためには、次の手順を踏んでください。
- Chromeウェブストアで「Figma 日本語化」と検索
- 「Chrome に追加」をクリック
Chromeの拡張機能一覧に「Figma 日本語化」のアイコンが表示されていれば、導入は完了です。
デスクトップ版Figmaの導入方法
Figmaはデスクトップアプリでも利用できます。
※デスクトップ版を利用する場合にも、アカウントのログインは必要です。アカウント作成方法については前項を参考にしてください。
ご自分のアカウントアイコンをクリックすると、ハンバーガーメニューが表示されます。その中から「Get Desktop App」を選ぶと、zipファイルのダウンロードが始まります。
ダウンロードしたファイルを解凍し、アプリを起動してください。
アプリが起動すると、ログインを求められます。前項で作成したアカウントでログインしましょう。
ログインが成功すると、デスクトップアプリの使用が可能になります。これで、Web上と同じようにデスクトップアプリ版も利用できます。
デスクトップ版のファイル共有方法
デスクトップ版でもブラウザ版と同じように、複数編集者で共同編集を行えます。そのためにはファイル共有リンクを作成しなくてはなりません。
ファイル共有リンクの作り方は次の通りです。
まず、共有したいファイルを開き、アカウントアイコン横の「Shere」ボタンをクリックします。
「Copy link」ボタンをクリックし、URLをコピーしましょう。
これで、共有リンクの作成は完了です。
デザインを見せたい方や共同作業を行いたい方にメールやチャットなどでリンクを共有すれば、共同編集を行えるようになります。
日本語フォントの導入方法
以上の解説を参考にすれば、Figmaの導入はできるかと思います。しかし、このままでは日本語のフォントを使用することが出来ません。
ローカルフォントの設定を行えば日本語フォントも利用できるようになるので、その方法を解説しますね。
まず、アイコンをクリックし、「settings」を選択します。
設定画面内の「Fonts」という項目にある「Download Installer to enable local fonts」をクリックしてください。Zipファイルがダウンロードされるので、ファイルを解凍し開きます。
これで、Figmaでもローカルフォントの利用が可能です。
ローカルフォント使用時の注意点
自分１人だけで制作するなら問題は無いのですが、他者とデザインを共有しながら制作する時は「共同編集者全員が同じローカルフォントをインストールできている状態」にしておく必要があります。共有相手のPCに自身が使用したフォントが無ければ、デザインが崩れる恐れがあるためです。
どのPCでも同じデザインで見せたい時は、ダウンロードやインストールの必要なく利用できるGoogleフォントがおすすめです。デザイン崩れなどのトラブルを防ぐためにも利用してみてください。
まとめ
以上、Figmaの導入手順でした。
基本無料で複数人とリアルタイム編集もできるFigmaは、リモートワークが推奨されている現在では非常に便利なアプリです。ここまで高機能なソフトを基本無料で利用できるのは、「デザインを勉強してみたい」という方にとって非常にうれしい事ですよね。
ぜひ、この機会にFigmaを触ってみてください。
デザインを受注したい企業様がいたら
株式会社クラウドシードWeb制作部には、各種ホームページ制作やグラフィックデザインを受注いただけます。
ホームページの作成やデザインリニューアル・名刺やチラシ、メニュー表やパンフレット作製など、すべてのデザイン業務をお客様のご要望に合わせて制作する事が可能です。それぞれ、豊富な実績もございます。Web制作会社ならではのノウハウや知見も組み込み、お力添えさせていただきます。
お客様の課題やご要望に合わせたプランを提案させていただき、初期費用は一切いただきません。
ご相談・お見積りは無料で承っておりますので、以下よりお気軽にお問合せください。
