検索結果0件」

    【無料】Figmaの特徴と使い方を解説いたします【YouTubeサムネ作りに最適】

    【無料】Figmaの特徴と使い方を解説いたします【YouTubeサムネ作りに最適】

    こんにちは、シンヤです!

    今回は、【無料】Figmaの特徴と使い方を解説いたします【YouTubeサムネ作りに最適】というテーマで、お話しいたします。


    Figmaとは?

    Figmaとは、Webブラウザでもデスクトップアプリでも動かすことができる、デザインツールのことです。
    今デザイン界隈で最もあついツールといっても過言ではありません😊

    Figmaには、今までのデザインツールにはなかった様々なメリットがあります。
    そしてこのメリットが、多くのデザイナーをFigmaに熱中させる要素となっております。

    Figmaのメリットは、主に以下になります。

    1. 無料
    2. ブラウザでもアプリでも動かせる
    3. どのパソコンやOSでも使える
    4. 常に最新のデザインデータになっている
    5. かんたんにデザインを共有できる
    6. 同じファイルを複数の人たちで編集できる
    7. 同じ部品を複数の人たちで管理できる

    それぞれ詳しく解説いたします。


    Figmaの特徴7つ

    1. 無料

    Figmaは完全に無料で使い始めることができます!
    今までのデザインツールは、

    • 一つのツールを買うだけで、10万円ぐらいお金を支払わないといけなかった
    • 毎月5,000円ぐらいお金を支払い続けないといけなかった

    など、買い切り・月額のサブスクリプションどちらを選ぶにしても、高い料金を支払わないと使うことができませんでした。
    つまり今までのデザインツールって、初回の導入のハードルがめちゃくちゃ高かったんですよね😅

    導入のハードルに関しては、他にもいくつか改善されたサービスやプロダクトが出てきました。

    などがそうですね。

    こちらに関しては、以前詳しく解説いたしました記事があるので、以下をご参照ください。
    【激安】IllustratorとPhotoshopとIndesignの代わりとなる、おすすめのツール3選

    少し話が脱線してしまいましたが、上記のように既存のデザインツールの、「価格の高さ」に対して改良を試みているプロダクトはあります。
    ですが、

    • 無料で使える
    • 無料でも本格的な機能が使える

    というデザインツールは、私はFigma以外知りません。
    今からデザインを学び始めるなら、Figmaから初めてみることを強くおすすめいたします😊

    2. ブラウザでもアプリでも動かせる

    Figmaはブラウザでも動かせますし、無料で使えるデスクトップアプリもあります。
    どちらを使ってもいいですが、デスクトップアプリならパソコンにダウンロードされたフォントが使えるので、デスクトップ版を使うのをおすすめします😊

    なぜこのようなことができるのかというと、

    Webアプリケーションで作られているから

    です。
    Webアプリなので、当然Webでも動かせることができます。

    今は技術がものすごい進化していて、Webでもスマホアプリと同じような機能・操作性を実現させた、アプリケーションを作ることができます。
    専門的にいうと、「Single Page Application(SPA)」といいます。

    FigmaはこのSPAの技術を採用しているため、Webでもデスクトップアプリでも、同じような操作性を実現できます

    SPAを使わない場合、Webとアプリで別々の言語で開発しないといけなかったので、開発コストが膨大にかかってきます。
    それゆえに必然と、

    • Webだけでしか使えない
    • デスクトップアプリでしか使えない

    というようなプロダクトが多いです(例えば有名なSketchとか、AdobeXDとかですね)

    それに対してFigmaの場合、Web版のプロダクトを表示させるだけで、デスクトップアプリの画面が完成します。
    その為開発工数が大幅に削減できるので、Webとアプリ両方のプロダクトを、迅速に開発できるのではと予想しています😊

    3. どのパソコンやOSでも使える

    Figmaは前述でご紹介したように、SPAを使ったWebプロダクトのため、どのパソコンやOSでも使えます。

    Webページって、どのパソコンで見ても同じ画面が表示されますよね。
    根本的な原理はそれと同じです😊

    このように、どのパソコンやOSでも同じように動作させる技術のことを、

    クロスプラットフォーム

    といいます。
    この「クロスプラットフォーム」で開発できるのが、Webアプリの一番の強みの一つでもあります😊

    ただしLinux版のデスクトップアプリはないので、LinuxのOSをお使いの方は必然的に、Web版のみを使うことになります😅

    4. 常に最新のデザインデータになっている

    FigmaはWeb上に全てのデザインデータが格納されているので、常に最新のデザインデータになっています。
    デザインを変えるたびに、ファイルを複製して名前を変える・・・みたいな作業をする必要は、ございません😊

    またFigmaには、「History」という機能があり、自動的に過去のデザインデータの履歴も保存しています。

    「過去にどんなデザインデータを作ったのか見てみたい」と思った場合は、Historyを使えばいつでも過去のデザインデータを見ることができます😊

    5. かんたんにデザインを共有できる

    デザインを作る際、一番悩むポイントの一つに「制作中のデザインを、どうやって外部の方々に共有するか」というものがあります。
    FigmaはURLをシェアするだけで、かんたんに制作中のデザインを共有することができます😊

    またFigmaはWebアプリなので、

    制作中でも即自動的にデザインデータを反映してくれる

    という機能があります。
    専門的にいうと、「データバインディング」といいます。

    作業中のデザインデータがいつでも見れるので、URLをシェアするだけで常に最新のデザインデータを先方にお見せすることができます😊

    よくある、「デザインを変えるたびにファイルを送信する」という作業をする必要は、ございません😊

    6. 同じファイルを複数の人たちで編集できる

    Figmaに同じチームに所属しているデザイナーなら、一つのファイルを複数同時に編集することができます😊

    • Aさんの作業が終わるまで待たないと
    • Bさんが作業したファイルを編集して大丈夫かな?

    というような心配事が起きることはありません。

    7. 同じ部品を複数の人たちで管理できる

    Figmaには「Team Library」という機能があり、同じチームに所属している人たちなら、同じ部品を複数の人たちで管理できます。

    この部品一つ一つのことを、「Component」と呼びます。

    部品をComponent化して管理することで、

    • 同じ部品を複数のファイルで使いまわせる
    • 部品を代えれば、共通の部品全てのデザインが切り替わる
    • デザインの整合性が取れやすくなる

    などのメリットがあります。
    これがチームでFigmaを使う最大のメリットの一つになります。
    これにより、

    • 画面毎にデザインが違う
    • どのファイルにどの部品があるかわからなくなった
    • プロダクトにどんな色が使われているかわからない

    などといった問題を、かなりの確率で減らすことができます😊


    アカウント登録をする

    ではここから、Figmaの始め方を解説していきます。
    なおFigmaはパソコンでしか使えませんので、スマートフォンをお持ちの方はまずはパソコンのご購入からお願いいたします😅


    まずはFigmaのトップページにアクセスして、「Sign Up」をクリックします。


    メールで登録しても問題ございませんが、アカウントの管理がしやすいので「Sign up with Google」から、Googleアカウントで登録することをおすすめします😊


    「Tell us about yourself」という画面が出てきたら、適当に自分の仕事を選択します。
    「I agree to join Figma's mailing list」は、チェックを入れても入れなくても、どちらでも問題ございません😊


    「Welcome to Figma」の画面が出てきたら、好きなチーム名を入力します。


    「Invite collaborators」は、「共同編集者」を追加する画面です。
    特にいないと思うので、「Skip this step」をクリックしてください😊


    「Choose a plan for your tham」は、無料で使いたい方々がほとんどだと思うので、「Starter」を選択してください。


    「You're all set!」の画面が出てきたら、完了です😊
    その後のチュートリアルを見たい方は「Show me around」をクリックして、必要ない方は「No. thanks」をクリックしてください。


    デザインを作ってみる

    無事アカウント登録ができたので、実際にデザインを作っていきましょう😊


    画像のように右上の「プラスマーク」を押して、新しいファイルを作成します。


    ファイルを作成したら、シャープマークのようなアイコンをクリックして、ドラッグします。
    四角い箱ができたと思います。
    Figmaではこれを「Frame」と呼びます。


    Frameを作成したら、印と同じ矢印マークをクリックして、Frameを選択します。
    次に印の数字をいじります。
    これがFrameの、横と縦の大きさになります。

    とりあえず「横1280 × 縦720」にします。
    これはYouTube公式から発表されている、最適なサムネイルのサイズになります。


    Tのマークをクリックします。
    これで、テキストを入力することができます。
    とりあえず適当に、「YouTubeサムネイル」と入力してください。


    再び矢印マークをクリックして、入力した文字をクリックします。
    その後、赤いマークの設定を適当にいじります。

    これがフォントの設定になります。
    好きなフォントに変更したり、フォントサイズや太さを変更してください😊


    コメントを残す

    吹き出しのアイコンをクリックします。
    これでコメントを残すことができます。

    他の人のデザインで気になるところがあったり、デザインの意図を先方に伝えたい場合、積極的にコメントを残しましょう😊


    作ったファイルを共有する

    ファイルを作ったら、右上の「Share」をクリックします。
    その後「Copy link」をクリックします。

    これでファイルのURLがコピーされたので、共有したい人にURLを送ります。 たったこれだけでファイルの共有ができちゃいます😊


    FigmaはYouTubeサムネイル作りに最適

    • 無料
    • 機能も本格的
    • かんたんにデザインを共有できる
    • 誰でもデザインにコメントを残せる

    という特徴のFigmaは、

    • 特に外部のデザイナーと協力する
    • クライアントと迅速にデザインの仕様を詰めていく

    という場合、非常に役に立ちます。
    YouTubeのサムネ作りをされている方々は、

    • デザイン経験が浅い
      • 無料で使えるFigmaならすぐデザインを始められる
    • YouTuberという「接点がない」人と仕事をする
      • 必然的にリモートワークになる

    ということが多いと思うので、Figmaととても相性が良いと思います。
    ではでは、またね〜🤗

    • 【無料】Figmaの特徴と使い方を解説いたします【YouTubeサムネ作りに最適】

    広告