読者の方に言われて、「つなぎゴシック」にしたって話
この記事では、デザインつよつよの読者さんに、教えていただいて、サムネイルとYouTube動画の字幕を変えたという話について書きます。
サムネイルに「つなぎゴシック」、YouTube字幕に「モボ」、ブログの見出しに「M PLUS Rounded 1c」を採用しました。
当サイトの読者さんには、色々な分野の専門家がいます。ありがたい限りです。もぅ、全員すごいです。「なんで当サイトなんか見てるんだ。」って思うような方々が沢山います。
そんな中、デザインつよつよの読者さんから、たっぷりのご指摘をいただきました。サムネイルの文字が細い、YouTubeの字幕がグネグネで見にくい…などなどです。
僕は、デザイン力が皆無です。どれが見やすいかすら分からないぺーぺーです。今までもこだわりが一切なく、適当に選んでいました。
たしかに、見返してみると、どれも適当で見にくかったです。「このままではいかん！」と思い、デザインつよつよの読者さんに聞いて、色々勉強させていただきました。
その結果、当サイトの今後のサムネイルの文字は、「つなぎゴシック」、YouTubeの字幕文字は、「モボ」というフォントになることが決定いたしました！（わーい）
さらに、ブログの見出しやサイトタイトルは、Google Fontsの「M PLUS Rounded 1c」に決定しました。本当は、本文もこれにしたかったのですが、一定のフォントサイズ以下になると、文字がギザギザ（ジャギー問題）になるので、やめました。
同じGoogle Fontsの「Kosugi Maru」とも悩みましたが、読者の方から、英語の文字間隔が狭くて見にくいという意見をもらったのでやめました。
結果、以下のようになりました。比較画像を見たい方は、こちらに飛んでください。また、本記事の最後に、今回いただいたフォント情報をまとめた表を貼っています。（こちら）
| つなぎゴシック | ブログのサムネイル画像に利用 |
| モボ | YouTubeの字幕に利用 |
| 源暎エムゴ | もしかすると、YouTubeの字幕に登場するかもしれないが、今のところ利用予定なし |
| Noto Sans JP | ブログの本文に利用。 |
| M PLUS Rounded 1c | ブログの見出しに利用（サイトタイトル、h2、h3など） |
今後変わる可能性も全然ありますが、とりあえず当面は、これでいこうと考えています。YouTubeの字幕文字に関しては、「源暎エムゴ」と「つなぎゴシック」で悩みましたが、最終的に「モボ」にしました。今後予告なしで変わるかもです。
この3つは、どれも方向性は一緒なので、そこまで気にしなくても、大きく道を踏み外すことはないかなと思いました。選ぶのがめんどくさくなったとかじゃないからね！？うん…。
「色々自分で考えた！」みたいな書き方をしていますが、ほぼ読者さんからの助言です。
当サイトは、これまでも色々デザインの改革をおこなっていますが、9割読者さんからの意見ですね。「人に流されやすい」と言えばそれまでですが、本当に読者さんすごくて、説得力あるんですよね～。
本文を「Kosugi Maru」にしました。
本記事を書いた時は、アルファベットの間隔が短いから却下だったんですが、よくよく考えたら、ローマ字と日本語でフォント別々にできるじゃんと思い、アルファベットを「Noto Sans」、日本語を「Kosugi Maru」にしました。
これで、一気に可愛らしい丸みを帯びたサイトになったかなと思います。最高ですね。
4つのフォントのダウンロードリンク
今回僕が選んだフォントは、全部フリーフォントです。無料で利用できます。すごいですよねー。
有料フォントもたくさん教えていただいたのですが、「お金を払うまでして、こだわりたいフォントって、今の僕の中にあるか？」と思った時に、なかったのでやめました。
僕は、フォント素人なので、まずは無料で利用できるフォントから始めて、もっとこだわりが出てきたら、有料フォントも視野に入れようと思います。
教えていただいた方から言われたのですが、「今は良い無料フォントが沢山出てきている”フリーフォント黄金期”」だそうです。だから、こだわりがないうちは、無理に有料フォントを購入しなくても、いいのかなと思います。
つなぎゴシック
「mokuzai（木材）」さんという方が作成したフォントです。「Zen角ゴシックN」フォントを角丸・墨だまり処理したフォントで、仮名を太く90％に小さくしている点が特徴です。
https://mokuzai.booth.pm/items/3885939サンプル画像を貼っておきます。
綺麗すぎじゃね！？今までフォントにこだわってなかった僕からすると、驚きです。太文字っていいですよね。見やすい。よく見たら気づきますが、ひらがなと漢字の大きさが若干違います。漢字のほうが大きくて、ひらがなが小さいです。
ダウンロードページを開いたら、「無料ダウンロード」をクリックします。
0円なんですが、1点注意事項があって、「pixiv ID」が必要という点です。「BOOTH」というピクシブが提供しているサイトなので、ダウンロードするにはアカウントが必要です。僕はたまたま持っていたので、すぐにログインできて入手できました。
ダウンロードしたら、圧縮ファイルを解凍します。解凍ソフトは、各自で用意してください。
展開したフォルダー内にある「TsunagiGothic.ttf」を右クリック→インストールをクリックします。
自分が使っているソフトによっては、インストール不要です。例えば、僕の場合、サムネイル作成には、画像編集ソフト「GIMP」を使います。
GIMPの場合は、フォントをOSにインストールする必要はなく、その代わりに、フォントファイルを指定の場所に配置する必要があります。以下の場所です。
C:\Program Files\GIMP 2\share\gimp\2.0\fonts
一方で、YouTubeの動画作成には、動画編集ソフト「DaVinci Resolve」を使います。こちらのソフトは、OSにインストールされているフォントの中から選ぶタイプなので、OSにインストールする必要があります。
あとは、使い倒すだけです。
モボ
「フロップデザインフォント」が提供しているフォントです。「源ノ角ゴシック」に角丸処理を施したのが特徴です。有料の「モガ」フォントに合うように作成されたようです。
以下のサイトからダウンロードできます。「つなぎゴシック」と同じで、「BOOTH」での販売（0円）なので、pixivアカウントが必要です。
https://booth.pm/ja/items/4647262サンプル画像を貼っておきます。角丸で太いって最高ですね。「つなぎゴシック」と違って、仮名と漢字は同じ大きさです。
「無料ダウンロード」をクリックします。
ダウンロードしたファイルを解凍して、中にある「MOBO.otf」をインストールするか、GIMPのようなソフトで使える場所に配置します。
源暎エムゴ
上記2つで紹介したフォントと違って、角丸がないゴシックというのが特徴です。
「おたもん」さんが作成されていて、2020年10月10日にバージョン1が公開されました。現在は、バージョン2です。（2021年1月22日）
https://okoneya.jp/font/download.html#dl-gemg「水のような、空気のような読んでいて邪魔にならないフォント」をイメージしている通り、癖がなく、見やすいです。サンプル画像を貼っておきます。
本フォントの良い点は、色々な太さがあるという点です。「モボ」や「つなぎゴシック」は、1種類でしたが、「源暎エムゴ」の場合は、5種類くらいの太さが用意されています。状況に応じて、使い分けられます。
読者さん曰く、「フリー版新ゴ」って感じだそうです。そもそも僕は、「新ゴ」を知らなかったんですが、どうやら有料フォントだそうです。1年間で5万弱くらいのすごいフォントです。
代表的なのは、駅名だそうです。「新ゴ 駅」で調べてみてください。「あーー！これが新ゴか！！」ってなりました笑。今まで、世の中にある文字は、どんなフォントかなんて気にしたことなかったですが、意識してみると面白いかもしれませんね。
そのフォントにちょっとだけ似ているのが、本フォントです。こちらは、無料で利用できます。なんてこった！すごい。
余談ですが、「源暎」は「げんえい」と読みます。「げんえいゴシック」ですね。
ダウンロードページを開いて、「源暎エムゴ」の「ZIP形式」をクリックします。他にもいろいろなフォントが公開されているので、間違えないように注意です。
解凍すると、中に5種類のttfファイルがあります。全部インストールしましょう。
僕の場合、使える状態にはしましたが、今のところ、利用予定がありません。つなぎゴシックやモボで満足している状態です。
M PLUS Rounded 1c
Google Fontsが提供しているWebフォントです。丸みを帯びた柔らかい印象なのが特徴です。
https://fonts.google.com/specimen/M+PLUS+Rounded+1c本当は、サムネイルとYouTube字幕だけ変える予定で、ブログ自体に手を加えるつもりはありませんでした。
読者さんと色々協議しているうちに、どんどん熱が入っちゃって、「どーせなら、ブログのフォントも変えてみよう！」ってなったのでした。
デザインつよつよ読者曰く、丸みを帯びたフォントなので、サイトのいたるところに角丸処理がされている当サイトに合うんじゃないか？とのことです。確かに「その通りだ！」と思いました。
丸みを帯びたフォントの中でも、色々議論があったのですが、最終的に本フォントになりました。
Google Fontsをブログに利用する場合は、Windows（OS）にインストールする必要はありません。コードをコピペするだけです。フォントの変更方法がよく分からない初心者さんにありがたいですね。
サイトにアクセスして、ページを下にスクロールします。「Styles」にある好きな太さを選択します。今回は、見出しに使うので、「Medium 500」にしてみます。一般的な「Regular 400」でもいいとは思います。
選択すると、ショッピングサイトのお買い物カートみたいな感じで登録されます。サイドバーが表示されていない場合は、右上のアイコンをクリックします。
サイドバーに、追加したフォントのコードが記載されているます。「<link>」と「@import」の2つの方法があるようですが、僕は、「<link>」にします。書かれているコードをコピーします。
WordPressにログインします。
左側サイドバーの中にある自分のテーマ名→「子テーマの編集」をクリックします。ここらへんの名称は、使っているテーマによって異なると思うので、あんまり参考にならないと思います。僕は、Luxeritas（ルクセリタス）というテーマを使っています。
「アクセス解析（head）」タブをクリックします。ここも使っているテーマによって名称が異なると思います。一番下に、先ほどコピーしたコードを丸々貼り付けます。
続いて、CSSを記述します。子テーマの編集→スタイルシートに記述します。
僕は、見出しだけに適用したかったので、以下のコードになります。
/*見出しだけ、「M PLUS Rounded 1c」にする*/
h1, h2, h3, h4 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}これで、見出しが「M PLUS Rounded 1c」になります。丸みがいい味を出していますね。
本フォントは、フォントサイズが20px以下になると、極端に文字がギザギザして、見にくくなります。
だから、本文には採用せず、フォントサイズが大きい見出しだけの利用にしました。本文は、これまで通りNoto Sans JPです。
この問題は、文字をCSSで若干傾けることで改善されますが、よく見ると、傾いていることが分かってしまいます。「傾けてまで、本フォントを使いたいか？」と言われれば、微妙だったので、やめました。
/*文字を若干傾ける*/
p {
transform: rotate(0.03deg);
}
丸みを帯びた感じは好きだったので、見出しだけでも…という気持ちです。
フォントの比較画像
今回、登場したフォントの比較画像を貼っておきます。下2つは、今まで使っていたフォントで、今後利用予定はありません。
今までは、「ロゴたいぷゴシック-コンデンスド」というのを利用していました。細いのが特徴です。単にこちらのサイトであったから、そのまま利用していただけです。こだわりは一切ありません。
やはり、こうして並べてみると、太いほうが見やすいですね。さらに、角丸処理された「つなぎ」や「モボ」の美しさが一層目立ちます。良すぎる…！
白文字、影ありが美しいと聞いた
デザインつよつよ読者の方から、アドバイスをいただきました。
こちらのYouTubeチャンネルさんを見てみてください。サムネイルがめちゃくちゃ綺麗だと思いませんか！？すごいなぁ…と感心です。
そして、上記リンクとともに、「ある程度太字で、白抜きの文字は、映える」という秘伝の技を伝授していただきました。「太字フォント、白文字、フチなし、影あり」です。これが、安定で美しいそうです。
さっそく試してみました。どうでしょうか？
ナポリタン寿司「う、美しすぎて、ま、眩しいぜ！！なんだこの、何周もして、最終的にシンプルで、洗練されたデザインが良いことに気づいた感じは…！」
ということで、伝授された技をもとに、今後は、白文字&影ありでいこうと思います。
ふと思ったんですが、今美しいと思ったこのスタイルですが、数年後には、ダサいってなっているのでしょうか？なんか、こういうのって時代に応じて、ころころ変わってそうなイメージです。
数年後には、「レインボーでとにかく色を詰め込んだほうがうつくしい！」みたいになってたら、嫌だな…笑。単純に、修正が大変です。このまま、白抜き&影が、「かっこいい」のイメージでありますように…。
感想
以上、当サイトのサムネイル、YouTubeの字幕、ブログの見出しのフォントを変えた話でした。
他にも、沢山の情報をいただきました。デザインに疎い方、ぜひ参考にしてみてください。「フォントの奥ってこんなに深いんだ…！」と感動しました。
| フォント名 | 一言解説 | 有料か無料か？ |
|---|---|---|
| つなぎゴシック | 意識高い系･洗練系。読者曰く、「漢なら、つなぎでしょう！」 | 無料 |
| モボ | 数字と英語が統一されて、すっきりしていて素敵 | |
| 源暎エムゴ | 角丸じゃないゴシック。太さが沢山用意されているので、何かと使える | |
| バナナスリップ | セブンの糖質チョコなどや、お菓子（じゃがいも心地 ）に使われている | |
| はんなり明朝 | ||
| 鉄瓶ゴシック | 僕が、YouTube字幕に使っていたフォント。 読者曰く、グネグネ文字（これ）は読めないので撤廃したほうが良いとのこと。 | |
| ロゴたいぷゴシック -コンデンスド | 僕が、サムネイルに使っていたフォント。 読者曰く、細くて見えないとのこと。 | |
| A1ゴシック | 高額なフォント | 有料 |
| パンダベーカリー | VTuberとかのサムネイルで使われている | |
| ニタラゴルイカ | スマブラ、遊戯王マスターデュエルなどのゲームで使われている | |
| G2サンセリフ | ニタラゴルイカの始祖的ポジション | |
| 新ゴ | 説明書、成分表、バス、病院、駅など、公共的 | |
| 中ゴシックBBB | ファッション雑誌などで使われる3点セット | |
| 太ゴ | ||
| 見出しゴ | ||
| ラグランパンチ | 迫力ある系シリーズ。「キルラキル」というアニメで一躍有名になったフォント | |
| ロゴGブラック | 迫力ある系シリーズ。「太く、強く、黒く」がコンセプト | |
| ゼルダBotWのフォント | ラグランパンチとロゴGブラックを組み合わせた合成フォント |
フリーフォントだと、「バナナスリップ」、「モボ」、「つなぎゴシック」、「源暎エムゴ」、「さつき源代明朝」あたりを入れておけば、間違いないとのことです。
こんなに、フリーで見やすいフォントがあるのに、僕は、なんで「ロゴたいぷゴシック-コンデンスド」や「鉄瓶ゴシック」といった独特なフォントを使っていたんだろうと不思議です。
別に上記2つのフォントが悪いわけではないです。個性を出すには便利なフォントだと思います。ただ、一般的に見やすいかと言われれば微妙です。もぅ数百記事を書いているので、手遅れ気味ですが、今の時点で指摘を貰えて、本当に良かったです。
王道・始祖は、「A1明朝」「リュウミン（モリサワフォント）」だそうです。