Webデザイン

Figmaでも使える!日本語フォントのおしゃれな無料フォント10選!インストール方法も解説! 

Figmaを使ってバナーやチラシをデザインしてみたけど、日本語フォントがいつも同じ…

ということで、少しでもデザインのバリエーションを増やすためにも、
おしゃれな日本語フォントを探してみましたのでご紹介します♪

本記事の内容

  • オススメ無料フォント10選
  • フォントのインストール方法
  • Figmaへの反映方法

ゴシック体部門

にこ角

ニコニコ動画のロゴっぽいフォントの角ゴシック版。丸文字バージョンもあります。

ニコ角のフォント画像

http://nicofont.pupu.jp/nicokaku-plus.html

851ゴチカクット

名前のとおりカクカクしててとても印象的なフォント。フォントだけで雰囲気でます。

851ゴチカクットフォント画像

https://pm85122.onamae.jp/851Gkktt.html

せのびゴシック

背伸びしているような縦長のフォント。格好つけてそうだけどなんかかわいいフォントです。

せのびゴシックフォント画像

http://modi.jpn.org/font_senobi.php

かんじゅくゴシック

ガタガタしているラインから、完熟している感が溢れているフォント。

かんじゅくゴシックフォント画像

https://flopdesign.booth.pm/items/2296522

明朝体部門

うつくし明朝体+

その名のとおり美しいフォント。清楚な雰囲気が漂っています。

うつくし明朝体フォント画像

https://www.flopdesign.com/freefont/utsukushi-mincho-font.html

Kaisei Opti

こちらはGoogleFontsなので活躍の幅が広いし、それでいておしゃれなフォントです。

KaiseiOptiフォント画像

https://fonts.google.com/specimen/Kaisei+Opti#standard-styles

丸文字部門

いろはマル

名前もフォントもカワイイからお気に入りです。本文でも見出しでも活躍してくれます。

いろはまるフォント画像

http://modi.jpn.org/font_irohamaru.php

ほのかアンティーク丸

いろはまるよりちょっと大人っぽい雰囲気のフォントです。

ほのかアンティーク丸フォント画像

http://font.gloomy.jp/honoka-antique-maru-dl.html

フリー部門

からかぜ

残念ながら漢字はありませんが手描き感がすごいおしゃれなフォントです。

からかぜフォント画像

https://booth.pm/ja/items/1219316

  • バナナスリップplus
  • ロゴにもなりそうな可愛くておしゃれなフォント、ただのお気に入りです。

    バナナスリップplusフォント画像

    パソコンへのインストール方法は?

    それではフォントをインストールしていきましょう。
    手順は6ステップで簡単なのでまだインストールしたことがない人も

    ぜひおしゃれフォントを活用してください♪

    ステップ1
    フォントのダウンロードページからダウンロード

    ステップ2
    zipファイルを展開

    ステップ3
    フォルダ内にある「ReadMe」や「利用前にお読みください」などと書かれている利用規約や利用ルールを把握

    ステップ3スクリーンショット

    ステップ4
    フォントファイルをダブルクリック

    ステップ4スクリーンショット

    ステップ5
    Font Bookで「フォントをインストール」をクリック

    ステップ5スクリーンショット

    ステップ6
    これでインストール完了!fontbookに追加されているはずです。

    ステップ6スクリーンショット

    Figmaへの反映方法も簡単!

    Figmaをまだつかっていないかたは下記記事に詳しく解説していますので、どうぞ。

    Figmaは、Webベースのツールなのでそのままローカルのフォントを
    ツール上で使用することができません。

    ただ、1回設定してしまえば、
    ローカルフォントが使用できるので設定していきましょう。

    ステップ1
    右上にあるアカウントメニューのところから、「Settings」を開きます。

    ステップ1スクリーンショット

    ステップ2
    「Fonts」項目から「Download installer」を選択

    ステップ3
    インストールを完了させたら設定完了です。

    《注意点》
    Figmaは日本語に対応していないので、
    Figma内で表示されるフォント名は全て英語で表示されます。

    例:せのびゴシック➔Senobi Gothic

    私も最初は日本語のフォント入ってないってめちゃくちゃ探してました(笑)


    これでFigmaで日本語フォントが使えるようになります。
    Figmaをまだ使っていない人はぜひ触ってみてください。

    まとめ

    最後までお読みいただきありがとございます。

    フォント以外にも、写真やイラストのフリー素材について気になるかたは、こちらをどうぞ。

    またそのうち「かわいいフォント」編も作成しましたので、気になるかたはこちらからどうぞ

    それではまた!

    -Webデザイン
    -, ,