webデザインの勉強

【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー

デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。

デザインをしている方は「Adobe Fonts」からダウンロードされることが多いかと思いますが、たくさん種類があるので迷いますよね・・・

そんな方(自分も含め)に向けて、使いやすくておすすめの素敵なフォントを26種類(+)まとめてみました!

フォントの印象実際に使ったデザインの例も合わせてご紹介していきます!

▼ピンタレストで保存してね📌♡「【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜」のピンタレスト画像

shio
shio
それでは早速いきましょう♪

欧文フォントバージョンもあります↓

【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー
【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts...
Adobe ccの1番安い購入方法|社会人デザイナーが契約するコンプリートプランのアイキャッチ画像
Adobe ccの1番安い購入方法・比較|社会人デザイナーが契約するコンプリートプランこんにちは、webデザイナーのShioです^^ Adobe製品は価格がなかなか高いので、購入するのを躊躇される方が多いかと思います。 ...

明朝体

貂明朝

adobefont貂明朝の画像

「貂明朝」は、高級感もありつつ、優しい丸みが特徴的で親しみやすさもある明朝体です!

  • 歴史の浅い最近開発された明朝体
  • 筆運びが特徴的(躍動感のある手書き風)
  • 優しい丸み
  • Adobeオリジナルフォント
  • 高級感のある明朝体
  • レトロな雰囲気
  • おしゃれ

ちょっとおしゃれな葬儀屋さんのwebサイトのデザインをした際に、メインビジュアルに使用しました。
雰囲気が出て、とても使いやすかったです。

shio
shio
タイトル見出しに、さりげなくアクセントを入れたい時に使えます!女性向けデザインにもいいですね♡

▼今回のアイキャッチにも使用しました!

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー

 

リュウミン

adobefontリュウミンの画像

「リュウミン」は、スタンダードな明朝体で使いやすいフォントです。
ウロコにはやわらかさをもたせており、親しみやすい雰囲気になっています。

  • 均整のとれたスタンダードな美しい明朝体
  • ウロコにはやわらかさをもたせており、親しみやすい雰囲気
  • DTPの基本書体として本文から見出しまで使用されている
  • 教科書などにも使用される
  • 太さは1種類のみ

▼こちらのブログのバナーに使用しました!

デザインブログの最初に読んでほしい記事〜自己紹介・おすすめ記事〜のバナーhttps://watashino-design.com/first-blog/

本当に、綺麗で親しみやすく読みやすい明朝体ですね。。。
最初に読んでほしいという想いを込めたアイキャッチなので、親しみやすさもありつつ、バナーの綺麗な雰囲気に馴染むフォントを探していて、「リュウミン」に辿り着きました!

shio
shio
私は、「綺麗系な女性向けデザイン」の制作時に「リュウミン」をよく使っています。

黎ミン

adobefont黎ミンの画像

「黎ミン」は、シンプルで親しみやすい表情をもつ現代的な明朝体です。

  • シンプルで親しみやすい
  • かなはフトコロが大きめで文字幅の差が少ない現代的なフォント
  • 縦組・横組どちらでも並びが美しく読みやすい
  • 欧文・数字はシンプルで誤読しにくい字形
  • 太さは1種類のみ
  • オーソドックスな本文用明朝体

 

秀英明朝

adobefont秀英明朝の画像

「秀英明朝」は、明朝体のウロコ部分がぷっくりとして優しく、横線の太さも十分あるので読みやすい、上品な明朝体です。

  • 美しく読みやすい書体
  • 本文にも見出しにもベーシックで使いやすく

秀英体には、明朝体、ゴシック体、丸ゴシック体などが存在するので、合わせて使えば、様々なデザインで活躍できそうですね!

▼「秀英明朝」を使用したバナーです(本文)

webデザイナーshioの制作バナー(おかゆ)の画像
shio
shio
上品な女性をイメージさせるフォントですよね。。

丸明オールド

adobefont丸明オールドの画像

懐かしいけど古すぎない、
かしこまってるけど、堅すぎない
懐かしくて、モダンな明朝体。

  • 丸明朝体!で可愛い♡
  • 漢字は縦線、横線、点、トメ、ハネ、ハライなどどれも先端が丸い(※)
  • 漢字が大きくて、平仮名が小さい
  • 平仮名は筆文字のような形
  • 縦組みでも横組みでも綺麗で読みやすい
  • 温かみや懐かしさを与える書体
  • 筆の動きが強調された文字は躍動感も感じさせられる

(※)▼エレメントに丸を用いることで柔らかな印象を与えています。

adobefont丸明オールドの説明画像adobe公式サイトより

赤丸に注目!丸で作られています!先端も丸い!

▼丸明オールド使用のアイキャッチ

【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)のポイントのバナーhttps://watashino-design.com/blog-banner-point/

バナー制作実績【2021年秋】| webデザイナーshioの画像https://watashino-design.com/works-banner-2021autumn/

shio
shio
私の最近の推しフォントです。
丸文字な明朝体って新しいですよね、美しくて可愛らしくて、躍動感もあって素敵なフォントです✨

 

ゴシック体

秀英角ゴシック金

adobefont秀英角ゴシック金の画像

スタンダードですっと読みやすく、真面目な印象を与え、使いやすいフォントです。

  • 秀英明朝とマッチするスタンダードなゴシック体
  • 平仮名は大ぶり手書き字形にも近く親しみやすい
  • 短文や見出しなどに◎
  • 3ウエイトあり
  • 読みやすく真面目な印象

 

秀英角ゴシック銀

adobefont秀英角ゴシック銀の画像
  • かたくなりすぎず抜けすぎない
  • 字の間に空間があるのでがある
  • 3ウエイトあり
shio
shio
秀英角ゴシックは金銀ありますが、「金」はスタンダードで横組み向き、「銀」は癖があって縦組み向きです。

▼秀英角ゴシック銀使用のアイキャッチ

秀英角ゴシック銀使用のビールのバナー

見出ゴ MB31

adobefont見出しゴシックMB31の画像

「見出ゴMB31」は今時だけど伝統的で使いやすいフォントです。

  • 見出し・タイトル」に◎!
  • ゆったりと言葉の意味を伝えることができる書体
  • 始筆にアクセント

▼見出ゴMB31を使用したブログのアイキャッチ

【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナーhttps://watashino-design.com/webdesign-study-book02/

いい感じに存在感があります!ゴシックだけどおしゃれな雰囲気を感じます。

shio
shio
2021年09月10日(金)以降adobefontsで使えなくなってします( ;  ; )
かなり気に入っていたのでショック!!!!

りょうゴシック

adobefontりょうゴシックの画像

「りょうゴシック」は馴染みやすいゴシック体です。

  • EL / L / R / M / B / H / UHの7書体が揃っている!
  • スピード感のある文字で明るい印象

 

丸ゴシック体

DNP 秀英丸ゴシック Std

adobefont秀英丸ゴシックの画像

「秀英丸ゴシック」は、クラシックな印象を持つ丸ゴシック体です。

  • 落ち着いたほのぼのとした印象を持つ丸ゴシック体
  • 親しみやすさ上品さが印象的

▼こちらのバナーで使用しました

【webデザインの勉強】すぴかあやかさんのセミナーに参加しましたの画像
【webデザインの勉強】デザイナーすぴかあやかさんのセミナーに参加しましたtwitterを見ていたら、フォーローしているすぴかあやかさんがデザインの講演をするという情報が流れてきて、これはデザイナーさんからデザ...

この記事内にも書いているのですが、「秀英丸ゴシック」はすぴかさんの推しフォントなんです✨
講義のスライドもこちらのフォントを使用されていました。

筑紫A丸ゴシック

adobefont筑紫A丸ゴシックの画像
  • 丸ゴシックだけど、子供っぽくなりすぎない
  • しっかりした印象を与える
  • 伝えたいメッセージを優しく伝えたい時に効果的
  • 女性向けデザインにも◎

▼「筑紫A丸ゴシック」を使用したブログのアイキャッチ

制作会社WEBデザイナーが良く使うフリーイラストサイトまとめ11選https://watashino-design.com/free-illust-site/

筑紫B丸ゴシック

adobefont筑紫B丸ゴシックの画像

先ほどの”筑紫A丸ゴシック”と比べると、
筆で書いたような線のつながりがある、ちょっとレトロさを感じる書体です。

  • あたたかさやさしさを感じられるフォント
  • ふところを絞ったデザインの丸ゴシック体
  • 漢字は温かみのある丸みを帯びた

※筑紫A・Bの漢字等は、共通の文字を使用

shio
shio
私は個人的にレトロ感のある”筑紫B丸ゴシック”の方が好きです。Aより垢抜けた印象を受けます。

▼「筑紫B丸ゴシック」を使用した商品バナー

筑紫b丸ゴシックを使用したバナー画像

 

ちび丸ゴシック

adobefontちび丸ゴシックの画像

「ちび丸ゴシック」は、文字を見せるためだけではなく、文章を読ませるための丸ゴシック体です。

  • 出しゃばりすぎないデザイン小さめな字面からちび丸ゴシック
  • 清潔感があるので長文でも使いやすい
  • 本文から小さめの見出しまで使える

※2021年09月10日(金)以降Adobe Fonts のライブラリから提供終了になります。

いろはマルみかみ

「いろはマル」の漢字部分を置き換えたものです。

  • レトロ感のある丸ゴシック。使い勝手のよいフォント。
  • かわいい・優しい雰囲気を出せます。
  • ウエイトは3種類あるので使いやすいです。
いろはマルみかみ用のナビスコクラッカーのバナー

じゅん

adobefontじゅんの画像

「じゅん」は、優しくリズミカルなカーブをもち、ソフトなイメージの表現に最適な丸ゴシック体です。

  • 手書きのイメージを残し、読みやすさを考慮した文字の大きさに設計
  • 視線の流れを妨げず親しみやすいデザイン
  • 先端の丸みと太さがバランスよく調和
  • じゅん101は絵本雑誌の本文などに使えます

 

シネマ丸ゴシック

adobefontシネマ丸ゴシックの画像

「TBシネマ丸ゴシック」は、字幕文字制作者の協力で書き起こしたシネマ仮名と組み替えた映画字幕用書体として制作されたフォントです。

  • 字幕本来の使い方であるキャプションとしての使用もできる
  • 印象に残したい本文にも適してる
  • 太めの書体なので、長文には不向き

※2021年09月10日(金)以降Adobe Fonts のライブラリから提供終了になります。

手書き文字

ペンレター

adobefontペンレターの画像

綺麗な素直な女性が書いたような手書き文字ですよね。
とても読みやすいです!

創作のコンセプトは、『いい性格の字体で思いを伝えたい』。
手書き書体の個性は人の数だけある。素直で素敵な人の文字はとても心地いい。
デジタル手書きを極めると、心和む(なごむ)ペン書体が生まれました。
Adobe

▼インスタの投稿でよく使用しています^^
手書き文字は親しみやすい雰囲気になるので
インスタ向きです*

adobefonts「ペンレター」を使用したデザインの画像

恋心

adobefont恋心の画像

ラブレターに書かれているような雰囲気のキュンとする可愛らしい手書き文字です♡

▼「恋心」を使用したブログのアイキャッチ

webデザイナー、インスタグラムのアイコンを作りましたのバナーhttps://watashino-design.com/instagram-icon/

その他

ことだま

adobefontことだまの画像

「肩ひじ張らない、かしこまらない」少し間を持たせた角丸ゴシック体で、組んだときに柔らかな表情を見せられるのでは。
Adobe

ナチュラル綺麗な印象のフォントです。

「ことだま」を使用したinstagramのinstagramの投稿画像 「ことだま」を使用したinstagramのinstagramの投稿画像

こちらのインスタグラムの投稿や

「ほんとに、フォント。」で勉強したデザインの画像(パン屋)

こちらのフォントの勉強していた時に制作したバナーで使用しました^^
横文字は「筑紫A丸ゴシック」です。

webデザイナーの就職活動前編〜未経験からwebデザイナー〜のバナーhttps://watashino-design.com/syukatu1/

個人的に使用頻度が高いフォントです。

クレー

adobefontクレーの画像

手書きの、硬筆で書いたようなアクセントを持った手書き風のフォント。

  • すっきりと整った鉛筆やペンなどを使って書いた書体
  • 本文にも使いやすい
  • 本文組みに適してる

 

キリギリス

adobefontキリギリスの画像
  • ひらがなのみのフォント
  • 可愛らしく、独特な雰囲気
  • 子供向けのデザインに良く使われている
shio
shio
保育園のサイトで見かけて、「可愛いな〜なんていうフォントなんだろう」と思っていたら、adobe fontsで見つけました!
「ここぞという時に使用したい!」と思い、見つけて即アクティベートしました!
一度見たら忘れられない書体です。

▼「キリギリス」を使用したバナー

キリギリスのフォントを使用したバナー画像

VDLアドミーン R

adobefontアドミーンRの画像

『語りかけてくる文字』をコンセプトに生まれた、明朝体の優しさゴシック体の力強さを加味したタイプフェイスです。

  • ヨコ太のラインと大きく丸いウロコが特徴
  • ポップでレトロな雰囲気
  • 字の止め部分がまるくぷっくりで手書きのようで親しみやすい
  • 明朝体のようなゴシック体のようなフォント

 

漢字タイポス48 Std

adobefont漢字タイポス48の画像
  • シンプルで可愛い
  • 優しく親しみを持てる

▼「漢字タイポス」を使用したブログのアイキャッチ

【無料/商用可】WEBデザインで使えるおすすめフリー画像・写真素材サイト11選https://watashino-design.com/free-photo-site/

▼「漢字タイポス」を使用したバナー

「ほんとに、フォント。」で勉強したデザインの画像(カジュアルデザイン)

※2021年09月10日(金)以降Adobe Fonts のライブラリから提供終了になります。

shio
shio
ここから紹介する4つのadobe fontsは、個人的に可愛いな〜と思ったフォントです。

babywalk

adobefont-babywalkの画像

文字に空間があって、抜け感のあるフォント。
今時なフォントですね〜

kotsubu

adobefont-kotsubuの画像

太い部分と細い部分のバランスが絶妙で、クイっと曲がった曲線が可愛い♡

▼「kotsubu」をタイトルに使用した商品バナー

suzume

adobefont-suzumeの画像

動物に例えたら「スズメ」ぽいフォントですよね。
小ぶりでチュンチュンしてて可愛い♡

tsurumaru

adobefont-turumaruの画像

名前の通り、ツルが絡まったようなデザインのフォントですね。

 

\ オンライン講座もついているのに、adobeを安く購入できます! /

私もデジハリONLINE利用してます^^🌿
詳しくはこちらの記事で▼

Adobe ccの1番安い購入方法|社会人デザイナーが契約するコンプリートプランのアイキャッチ画像
Adobe ccの1番安い購入方法・比較|社会人デザイナーが契約するコンプリートプランこんにちは、webデザイナーのShioです^^ Adobe製品は価格がなかなか高いので、購入するのを躊躇される方が多いかと思います。 ...

フォントの参考書の紹介

私が普段フォントを選んだり、学ぶ時に参考にしている本をご紹介します☺️🧡

日本語フォントは『フォント辞典』を、よく参考にしています。
事例もついているのでありがたい!お気に入りの1冊です♡

『ほんとに、フォント。』もおすすめです^^
日本語フォントと欧文フォントの組み合わせなど参考になりました!
この本で素敵なフォントに出会うことができました🥺🌿
今回紹介したフォントも載っています✨

欧文フォントは『となりのヘルベチカ』を読みました!
新しい発見があったり、フォントを擬人化して物語を通して学ぶので、分かりやすいし学びが定着しやすいと感じています。

▼その他のおすすめ本はこちら💐

webデザイン初心者おすすめ勉強本3冊|未経験webデザイナーが最初に読んだのバナー
未経験webデザイナーが最初に読んだwebデザイン初心者おすすめ勉強本今回はこれからwebデザインを勉強し始める方に向けてお勧めしたい本をご紹介します。 未経験から勉強を始めた私も実際この3冊を読んで...
【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナー
【webデザイナーおすすめ】デザインする時に役立つ勉強本8選+こんにちは ^^💐 今回は私がデザインする時によく読んでいる本をご紹介します。 私はデザインに困ったとき、本...

おわりに

どれも素敵なフォントですよね〜
こうしてまとめることで、フォントの引き出しが増えた気がします。
ますますフォント選びが楽しくなりそうです^^

▼欧文フォントのまとめはこちら

【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー
【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts...

▼Goole fontsのまとめはこちら

【Google fonts】webサイトに使えるおすすめ日本語フォント〜10選〜の画像
【Google fonts】webサイトに使えるおすすめ日本語フォント(無料)〜10選〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...
【Google fonts】webサイトに使えるおすすめ欧文フォント〜20選以上〜の画像
【Google fonts】webサイトに使えるおすすめ欧文フォント(無料)〜20選以上〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...

では、また!

※2021年09月10日(金)以降Adobe Fonts のライブラリから提供終了になるフォントもありますので詳細はadobeのサイトでご確認ください。

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー