プロのデザイナーとして、基本的には有料フォントを使うことが多いのですが、フリーフォントでも「このフォントじゃなきゃヤダ!」ってやつがたくさんあります。, ※なるべく商用利用可能で、漢字も使えるものを中心としています。 ※念のため利用規約については各サイトをご覧ください。. [ 営業時間 ] 平日 9:00~18:00. Copyright (C) DOE Co., Ltd. All Rights Reserved. ※以下は自前でWEBフォントを使う方法なので、読まなくても結構です。 @font-faceとは簡単に言うと、ユーザーにWEBフォントファイルを読み込ませるcssの構文です。 基本的な使用例を見てみましょう。 まず、@font-faceでのfont-familyで名前を定義します。名前は何でも構いません。 次にsrcで読み込むファイルの指定をします。 ここでは3つの値を指定していますが、url()の値以外は必須ではありません。 local()にはフォントの正式名称を入力します。 ユーザーのパソコンにフォントがインストールされて … この記事は公開から 1890 日経っているため、情報が古くなっている可能性があります。, 湘南鎌倉総合病院 腎臓病総合医療センター様 [医療 / 腎臓病総合医療センター / レスポンシブサイト], アイミー様 [コンタクトレンズ・レンズケア用品販売(LP) / レスポンシブサイト], 平安レイサービス様 [Wedding Dress Contest / PCサイト]. 5.はんなり明朝. // ]]> このGoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。, ボールドボタンで太くするのもいいけど、もっと文字を太くするとタイトルや見出しも見やすくなるし。, 資料とかデザインとか作っていると、スペース上ここは目立たせたいけど、これ以上文字は大きくできないってことがあるじゃない?, これは、ぼくが「デザインがなんかうまくいかないなー」って時にためしてみる方法なのでみなさんもぜひやってみてください。, これは、上で紹介したNoto Sans Japanese/源ノ角ゴシックを丸文字にしたもの。, 高速道路の看板は2010年からヒラギノ角ゴシック体W5に変わっていっているらしいですが、ぼくの中では生き続けています。(最近使ってないけど), 大人気のフリーフォントですね。有料フォントだと丸明オールドとか、A1明朝とかのようなオールド感あふれるフォントです。, はんなり明朝もオールド感があるフォントですが、もっとオールド感があるフォントです。, この世界観は便利、こういう味わい系のフリーフォントはたくさんありますが、ここまで太字なものは少ないです。, こども丸ゴシックより、クセがすごいので取扱い注意ですが、カラフルにすると子供向けになります。(ただし漢字はほとんどありません), 同じく子供向け。こどもまるゴシックと、やまフォントのパターン違いとして使えます。以下省略!, そのままでもそこそこそれっぽい感じになります。地域の施設とか歯医者とかのロゴで今時っぽい感じがつくれますね, 選んだフォントを見てみると、「レトロ、オールド系のフォント」や、「手書き風フォント」を多く選んでいることに気づきました。, ぼくは仕事でデザインを作っているので好みもないとは言いませんが、たくさんの人に共感してもらえるフォントを選ぶことが多いんです。, それは。最近発売されたオールド系フォントって「昔っぽいけど今っぽくもある」んです。, オールド系フォントって、年配の方には「懐かしいな!」と思ってもらえるし、今の人にも「レトロでかっこいいじゃん!」と思われる弁便利なフォントです。 たくさんの人が「納得」しやすいフォント。これは仕事にとっても使いやすい!(特に上司の上司を納得させないといけない現場だと更に有効です), 「じゃあ古いフォントなら、なんでもいいんだね!」 と言うとちょっと違うと思ってて、実は今回紹介したフォントってオールドっぽいけど実は今っぽくカスタマイズされて作られているフォントなんですね。, あとは、手書き風を多く選んだ理由は、こうです。 ものが売れづらくなった今、お客さんと1対1で「買ってください、あなたのためにカスタマイズしました!」と言ってものを売ることが大事。 つまり、「どれだけ心がこもっているかをうまく伝えるのが大事」な時代になったということでしょうか。, じゃあ、昔はどうだったかというと、「憧れ」みたいなものが重要視されていたのかなと思います。, ▼こども丸ゴシックなどで紹介したデザインみたいなのが、たくさん載ったデザイン集、最近買ったデザイン集の中でNo1のヒットです。, ▼こどもの感覚に響くデザインがたくさん載っています。理論ではなく感覚に響くデザイン!, 月刊MdN 2016年11月号(特集:絶対フォント感を身につける。2)[雑誌][Kindle版], リアルタイムでアクセス解析を見ている。 たくさんの人がフォント記事を見てる中「プリントパック 電話 つながらない」でうちのブログに来ている人も…おつかれさまです。 #プリントパック, — ベーコン@北海道デザイナー (@dogdog464646) 2016年10月28日, 2018-06-22 SSL化により、SNS拡散の数字が0になってしまいました。 たくさんの拡散ありがとうございました。, ① 1番人気の記事です ここ3年間で本当に買ってよかったもの55選(じっくり選んだものだけ), ② Kindle Unlimitedのおすすめ本50選!4年間の体験レビュー!ジャンル別です。【2020年版の体験談】, ③ 【2020】MacBook Pro&Airおすすめの周辺機器デザイナーが選びました, 【リコマース体験談】買取額も公開!評判通りブックオフと比較にならないね!【口コミ】, フリーデザイナー・ブロガーです。 /発想力系デザイナーなのでグラノーラ屋も始めました(4年目)/フリーランスで生き抜く方法を発信中。フリーランサー、ブロガー、「デザインを始めたい人」に向けてブログを書いています。/10万PV/2019年2月SBクリエイティブよりデザイン解説本出すよ ▼自己紹介記事はこちら ベーコンってどんな人? ▼最初に読んでほしい厳選記事! 初めてベーコンブログと言えばこの記事【ジャンル別の人気記事】 >>広告・レビュー依頼はこちら, 【そんじゃーね】"ブログの締め言葉"を使ってデザインしたブロガー名刺はインパクト大だよ!, 【比較】おすすめのLEDリングライト TaoTronics 12インチ 撮影用ライトを使ってみた, 【Apple公認5000円台】ワイヤレスイヤホンBeats FlexをAirPodsと比較&を3日間しっかり使ってみたレビュー, MacやiPhoneにおすすめの4ポート高速充電アダプター(USB-A&C)RAVPower RP-PC136, [SONYが教えくれた]α7Cはα7Siiiと同じ手ブレ補正&ジャイロ情報があるんだって, Bose QuietComfort Earbudsのレビュー&Apple AirPods Proとの比較, 【日本語フリーフォント】本当は教えたくない!デザイナーが仕事で使ってる12選【商用可】, Kindle Unlimitedのおすすめ本50選!4年間の体験レビュー!ジャンル別です。【2020年版の体験談】, 【2020】MacBook Pro&Airおすすめの周辺機器デザイナーが選びました. フォントの中でも明朝体は読みやすく多くのデザインに使われています。今回は、おすすめの明朝体フォントを27選まとめました。同じ明朝体でもイメージが異なります。ご自身のデザインに合わせてご活用ください。 a1明朝の基本となる骨格を参照して作成された、オールドスタイルのゴシック体ファミリーです。線画の交差部分の墨だまり表現や、エレメントの端々に僅かな角丸処理を加えることで、温もりのあるデザインに仕上げています。lからbまで4つのウエイトで展開されています。 大人気のフリーフォントですね。有料フォントだと丸明オールドとか、a1明朝とかのようなオールド感あふれるフォントです。 ひらがな、カタカナに特徴があるフォントです。 これまではホームページで明朝体を使いたいときは、従来のようにWindows用、Mac用と別のフォントを指定して、別のフォントとして表示させてきた気がします。(例えばWindowsではHGS明朝E、Macではヒラギノ明朝 Pro W6など) // WEBフォントを使うとこういった異なるフォントを表示させるということもないのですが、筆者が知っている実践で使えそうな日本語WEBフォントといえばGoogleが提供しているNoto Sansフォントくらいで明朝体のWEBフォントは知りませんでした。, 無料で登録ができ、月間1万PV、ドメイン1つ、フォント1つという制限はありますが、通常のホームページを運用するのであれば問題無いと思われます。, 数行のJavaScriptと一行のCSSを記述するだけでサブセット化まで対応したWEBフォントが使用できます。, また、このサイトでは『TypeSquare Web Font Tryout』という便利なサービスがあります。, ホームページのURLを入力すると、WEBフォントを使用したシュミレーションができ、最適なフォントを探しやすくなります。, ※ TypeSquare Web Font TryoutでDOEトップページのフォントを変更中。, 無料のプランでは月間25,000PV、ドメイン1つ、フォント2つまで使用可能です。, 次に使いたいフォントをクリックし、『フォントを使用』を押してフォントの登録をします。, WEBフォントを実装するにはjsとcssの記述が必要ですが、別ウィンドウで開く管理画面からコピペして下さい。, こちらはWEBフォントを提供しているサービスではなく、フリーフォントを集めただけのサイトです。, フォントの配布サイトを提供しているだけですので、WEBフォントとして利用するにはライセンスの確認をしましょう。, @font-faceとは簡単に言うと、ユーザーにWEBフォントファイルを読み込ませるcssの構文です。, まず、@font-faceでのfont-familyで名前を定義します。名前は何でも構いません。, ユーザーのパソコンにフォントがインストールされているかをチェックし、インストール済ならそのフォントを使います。この場合フォントのダウンロードは行われずに済みます。, しかし、IE9以下ではlocal()自体が使えなかったり、他にも問題点があることからlocal()は使用しないほうが一般的には安全だそうです。, ちなみに@font-faceでWEBフォントを定義するだけではテキストにフォントは適用されません。, @font-faceで定義したfont-familyをスタイルで適用させる必要があります。, @font-faceの詳しい解説サイトはこちら:@font-face – CSS | MDN, 『CSS3開発者ガイド』という本で推奨されていた@font-faceの記法を紹介します。, url()がいくつもありややこしいですが、本命はWOFF形式のフォントを読み込ませることです。, 他の記述はWOFF形式に対応していない場合に、代わりに読み込ませるための記述です。, 先程述べたような互換性の高い@font-faceの記述を使うためには、複数のフォントファイルが必要となります。, Font Squirrelによる@font-face Generatorを使用すると、必要なフォントファイルを自動生成してくれます。, FONT FREEで紹介したような無料で配布しているフォントの中にも、フォントの改造や商用での利用を禁止を製作者が定めている場合があるので、使用する前にライセンスの確認をしておきます。, WEBフォントを使用する際、英語フォントであればフォントファイルが軽いためそのまま使えるのですが、文字数の膨大な日本語フォントは、そのまま使うには重すぎます。, これを解決するために、WEBページを読み込む際にそのページで指定した文字列だけ取り出して、フォントサイズを小さくしたフォントファイルを毎回作成するサブセットという仕組みを利用します。, 上述したTypeSquareやAdobe TypekitではJavaScriptを用いて動的にサブセット化させているようですが、どういう仕組みで動いているかは筆者には理解できませんでした。, ですので予め指定した文字だけを収録したフォントファイルを作成するツール(使い方簡単)を紹介します。, 本当は動的なサブセット化が簡単に実装できればいいんですけど、現状ではある程度プログラミング知識がないと手が出せないようです。, プラグイン『WordPress Popular Posts』のリストアイコン設定方法, DOEはホームページ制作をリーズナブルな料金で提供しています。まずは、下記の自動見積りで概算費用をご確認ください。簡単10秒の操作です。, [ TEL ] 045-641-1868 フォントの中でも明朝体は読みやすく多くのデザインに使われています。今回は、おすすめの明朝体フォントを27選まとめました。同じ明朝体でもイメージが異なるフォントもありますのでご自身の使用するデザインに合わせてご活用ください。, ダウンロード先:http://gutenberg.osdn.jp/ja/license.html, よく見ると、しっかりした明朝ではない、しかし、明朝より安心感を与えてくれるほっこりするフォント。, ダウンロード先:http://poiut.web.fc2.com/computer/fonts/HOKKORI-FONT.html, “JIS X 0213:2004”をサポートし、商用・非商用に限らず無償で利用できる高品位な日本語フォントの明朝体パック。, ダウンロード先:http://ipafont.ipa.go.jp/old/ipafont/download.html, 和文文字(仮名や漢字など)は固定幅、欧文文字は文字幅に合わせた変動幅を基本とした実装を行われ、日本語文書作成の利便性の向上を目指したフォント。明朝体版。, ダウンロード先:http://ipafont.ipa.go.jp/node26#ja, “JIS X 0213:2004”をサポートし、商用・非商用に限らず無償で利用できる高品位な日本語フォントの明朝体。, アルファベットのセリフ体をベースにデザインした1byteカタカナフォント。ロマンチックさと神秘性を兼ね備えつつ、文字のカーブを緩やかにすることで、上品さが演出できます。, ダウンロード先:http://www.font910.jp/font-list/1byte03.html, ダウンロード先:http://blueskis.wktk.so/AozoraMincho/download.html, ダウンロード先:http://www.flopdesign.com/font4/inishie.html, 柔らかさ・レトロな味わい・漢字とかなのバランスなど求められるオールドスタイル明朝体のエッセンスは残しつつ、横へのつながりを感じさせるモダンなデザインになっているフォント。無料ダウンロードでき商用可能な漢字も入った日本語書体です。, ダウンロード先:http://www.flopdesign.com/freefont/utsukushi-mincho-font.html, おもてなし明朝フォントの角を丸くしたデザインのフォント。より和風レトロな可愛さをイメージできます。商用利用の場合は製品版の購入が必要です。, ダウンロード先:http://www.flopdesign.com/font4/omotenashi-marumin-font.html, ダウンロード先:http://www.flopdesign.com/font4/omotenashimincho.html, ダウンロード先:http://n-yuji.info/index.php/totika-font2, 角丸ですっきりとした明朝体です。少しの墨だまりと、オールド系明朝体のエッセンスを含んだ日本語フォント。, ダウンロード先:http://www.flopdesign.com/font4/formin.html, ダウンロード先:http://font.gloomy.jp/honoka-mincho-dl.html, 日本語の文字と組版を考える会が無料で提供しているデジタルフォント特太明朝体仮名書体。, ダウンロード先:http://opentype.jp/mirrorfont.htm, 通常の明朝体の漢字フォントに、極端に小さなひらがなとカタカナを組み合わせて創り出した書体。, ダウンロード先:http://freefonts.jp/font-koku-min.html, ダウンロード先:http://www.sodan.org/~penny/blosxom.cgi/2007/06/04, ダウンロード先:https://osdn.jp/projects/ume-font/wiki/FrontPage, ダウンロード先:https://mandel59.github.io/mutsuki/, フリーフォントである「XANO明朝」フォントの旧字化を試みてみて「QANO明朝L」フォントを元に、人名許容・康煕別掲字について JIS X 0213:2004に適合しない実装を行ったフォント。, ダウンロード先:http://www.asahi-net.or.jp/~sd5a-ucd/freefonts/QuiMi-mincho/, http://poiut.web.fc2.com/computer/fonts/HOKKORI-FONT.html, http://ipafont.ipa.go.jp/old/ipafont/download.html, http://www.font910.jp/font-list/1byte03.html, http://blueskis.wktk.so/AozoraMincho/download.html, http://www.flopdesign.com/font4/inishie.html, http://www.flopdesign.com/freefont/utsukushi-mincho-font.html, http://www.flopdesign.com/font4/omotenashi-marumin-font.html, http://www.flopdesign.com/font4/omotenashimincho.html, http://n-yuji.info/index.php/totika-font2, http://www.flopdesign.com/font4/formin.html, http://font.gloomy.jp/honoka-mincho-dl.html, http://www.sodan.org/~penny/blosxom.cgi/2007/06/04, https://osdn.jp/projects/ume-font/wiki/FrontPage, http://www.asahi-net.or.jp/~sd5a-ucd/freefonts/QuiMi-mincho/. (adsbygoogle = window.adsbygoogle || []).push({});