読者の方に言われて、「つなぎゴシック」にしたって話

その他,ブログ

ナポリタン寿司のアイコン

この記事では、デザインつよつよの読者さんに、教えていただいて、サムネイルと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割読者さんからの意見ですね。「人に流されやすい」と言えばそれまでですが、本当に読者さんすごくて、説得力あるんですよね~。

4つのフォントのダウンロードリンク

今回僕が選んだフォントは、全部フリーフォントです。無料で利用できます。すごいですよねー。

有料フォントもたくさん教えていただいたのですが、「お金を払うまでして、こだわりたいフォントって、今の僕の中にあるか?」と思った時に、なかったのでやめました。

僕は、フォント素人なので、まずは無料で利用できるフォントから始めて、もっとこだわりが出てきたら、有料フォントも視野に入れようと思います。

教えていただいた方から言われたのですが、「今は良い無料フォントが沢山出てきている”フリーフォント黄金期”」だそうです。だから、こだわりがないうちは、無理に有料フォントを購入しなくても、いいのかなと思います。

つなぎゴシック

mokuzai(木材)」さんという方が作成したフォントです。「Zen角ゴシックN」フォントを角丸・墨だまり処理したフォントで、仮名を太く90%に小さくしている点が特徴です。

サンプル画像を貼っておきます。

「つなぎゴシック」のサンプル画像

綺麗すぎじゃね!?今までフォントにこだわってなかった僕からすると、驚きです。太文字っていいですよね。見やすい。よく見たら気づきますが、ひらがなと漢字の大きさが若干違います。漢字のほうが大きくて、ひらがなが小さいです。

ダウンロードページを開いたら、「無料ダウンロード」をクリックします。

「つなぎゴシック」のダウンロード画像1

0円なんですが、1点注意事項があって、「pixiv ID」が必要という点です。「BOOTH」というピクシブが提供しているサイトなので、ダウンロードするにはアカウントが必要です。僕はたまたま持っていたので、すぐにログインできて入手できました。

「つなぎゴシック」のダウンロード画像2

ダウンロードしたら、圧縮ファイルを解凍します。解凍ソフトは、各自で用意してください。

「つなぎゴシック」のダウンロード画像3

展開したフォルダー内にある「TsunagiGothic.ttf」を右クリック→インストールをクリックします。

「つなぎゴシック」のダウンロード画像4

自分が使っているソフトによっては、インストール不要です。例えば、僕の場合、サムネイル作成には、画像編集ソフト「GIMP」を使います。

GIMPの場合は、フォントをOSにインストールする必要はなく、その代わりに、フォントファイルを指定の場所に配置する必要があります。以下の場所です。

C:\Program Files\GIMP 2\share\gimp\2.0\fonts
「つなぎゴシック」のダウンロード画像5

一方で、YouTubeの動画作成には、動画編集ソフト「DaVinci Resolve」を使います。こちらのソフトは、OSにインストールされているフォントの中から選ぶタイプなので、OSにインストールする必要があります。

「つなぎゴシック」をDaVinci Resolveで使ってみた画像

あとは、使い倒すだけです。

「つなぎゴシック」をGIMPで使ってみた画像

モボ

フロップデザインフォント」が提供しているフォントです。「源ノ角ゴシック」に角丸処理を施したのが特徴です。有料の「モガ」フォントに合うように作成されたようです。

以下のサイトからダウンロードできます。「つなぎゴシック」と同じで、「BOOTH」での販売(0円)なので、pixivアカウントが必要です。

サンプル画像を貼っておきます。角丸で太いって最高ですね。「つなぎゴシック」と違って、仮名と漢字は同じ大きさです。

「モボ」のサンプル画像

「無料ダウンロード」をクリックします。

「モボ」フォントのダウンロード画像1

ダウンロードしたファイルを解凍して、中にある「MOBO.otf」をインストールするか、GIMPのようなソフトで使える場所に配置します。

「モボ」フォントのダウンロード画像2

源暎エムゴ

上記2つで紹介したフォントと違って、角丸がないゴシックというのが特徴です。

おたもん」さんが作成されていて、2020年10月10日にバージョン1が公開されました。現在は、バージョン2です。(2021年1月22日)

「水のような、空気のような読んでいて邪魔にならないフォント」をイメージしている通り、癖がなく、見やすいです。サンプル画像を貼っておきます。

「源暎エムゴ」のサンプル画像

本フォントの良い点は、色々な太さがあるという点です。「モボ」や「つなぎゴシック」は、1種類でしたが、「源暎エムゴ」の場合は、5種類くらいの太さが用意されています。状況に応じて、使い分けられます。

読者さん曰く、「フリー版新ゴ」って感じだそうです。そもそも僕は、「新ゴ」を知らなかったんですが、どうやら有料フォントだそうです。1年間で5万弱くらいのすごいフォントです。

代表的なのは、駅名だそうです。「新ゴ 駅」で調べてみてください。「あーー!これが新ゴか!!」ってなりました笑。今まで、世の中にある文字は、どんなフォントかなんて気にしたことなかったですが、意識してみると面白いかもしれませんね。

そのフォントにちょっとだけ似ているのが、本フォントです。こちらは、無料で利用できます。なんてこった!すごい。

余談ですが、「源暎」は「げんえい」と読みます。「げんえいゴシック」ですね。

ダウンロードページを開いて、「源暎エムゴ」の「ZIP形式」をクリックします。他にもいろいろなフォントが公開されているので、間違えないように注意です。

「源暎エムゴ」のダウンロード画像1

解凍すると、中に5種類のttfファイルがあります。全部インストールしましょう。

「源暎エムゴ」のダウンロード画像2

僕の場合、使える状態にはしましたが、今のところ、利用予定がありません。つなぎゴシックやモボで満足している状態です。

M PLUS Rounded 1c

Google Fontsが提供しているWebフォントです。丸みを帯びた柔らかい印象なのが特徴です。

本当は、サムネイルとYouTube字幕だけ変える予定で、ブログ自体に手を加えるつもりはありませんでした。

読者さんと色々協議しているうちに、どんどん熱が入っちゃって、「どーせなら、ブログのフォントも変えてみよう!」ってなったのでした。

デザインつよつよ読者曰く、丸みを帯びたフォントなので、サイトのいたるところに角丸処理がされている当サイトに合うんじゃないか?とのことです。確かに「その通りだ!」と思いました。

丸みを帯びたフォントの中でも、色々議論があったのですが、最終的に本フォントになりました。

Google Fontsをブログに利用する場合は、Windows(OS)にインストールする必要はありません。コードをコピペするだけです。フォントの変更方法がよく分からない初心者さんにありがたいですね。

サイトにアクセスして、ページを下にスクロールします。「Styles」にある好きな太さを選択します。今回は、見出しに使うので、「Medium 500」にしてみます。一般的な「Regular 400」でもいいとは思います。

「M PLUS Rounded 1c」をブログに使う手順画像1

選択すると、ショッピングサイトのお買い物カートみたいな感じで登録されます。サイドバーが表示されていない場合は、右上のアイコンをクリックします。

「M PLUS Rounded 1c」をブログに使う手順画像2

サイドバーに、追加したフォントのコードが記載されているます。「<link>」と「@import」の2つの方法があるようですが、僕は、「<link>」にします。書かれているコードをコピーします。

「M PLUS Rounded 1c」をブログに使う手順画像3

WordPressにログインします。

左側サイドバーの中にある自分のテーマ名→「子テーマの編集」をクリックします。ここらへんの名称は、使っているテーマによって異なると思うので、あんまり参考にならないと思います。僕は、Luxeritas(ルクセリタス)というテーマを使っています。

「M PLUS Rounded 1c」をブログに使う手順画像4

「アクセス解析(head)」タブをクリックします。ここも使っているテーマによって名称が異なると思います。一番下に、先ほどコピーしたコードを丸々貼り付けます。

「M PLUS Rounded 1c」をブログに使う手順画像5

続いて、CSSを記述します。子テーマの編集→スタイルシートに記述します。

「M PLUS Rounded 1c」をブログに使う手順画像6

僕は、見出しだけに適用したかったので、以下のコードになります。

/*見出しだけ、「M PLUS Rounded 1c」にする*/
h1, h2, h3, h4 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}

これで、見出しが「M PLUS Rounded 1c」になります。丸みがいい味を出していますね。

「M PLUS Rounded 1c」をブログに使う手順画像7
「M PLUS Rounded 1c」の注意点

本フォントは、フォントサイズが20px以下になると、極端に文字がギザギザして、見にくくなります。

だから、本文には採用せず、フォントサイズが大きい見出しだけの利用にしました。本文は、これまで通りNoto Sans JPです。

この問題は、文字をCSSで若干傾けることで改善されますが、よく見ると、傾いていることが分かってしまいます。「傾けてまで、本フォントを使いたいか?」と言われれば、微妙だったので、やめました。

/*文字を若干傾ける*/
p {
    transform: rotate(0.03deg);
}
「M PLUS Rounded 1c」を少し傾けた場合と通常の状態の比較画像

丸みを帯びた感じは好きだったので、見出しだけでも…という気持ちです。

フォントの比較画像

今回、登場したフォントの比較画像を貼っておきます。下2つは、今まで使っていたフォントで、今後利用予定はありません。

新しくなった当サイトで利用するフォント一覧画像

今までは、「ロゴたいぷゴシック-コンデンスド」というのを利用していました。細いのが特徴です。単にこちらのサイトであったから、そのまま利用していただけです。こだわりは一切ありません。

やはり、こうして並べてみると、太いほうが見やすいですね。さらに、角丸処理された「つなぎ」や「モボ」の美しさが一層目立ちます。良すぎる…!

白文字、影ありが美しいと聞いた

デザインつよつよ読者の方から、アドバイスをいただきました。

こちらのYouTubeチャンネルさんを見てみてください。サムネイルがめちゃくちゃ綺麗だと思いませんか!?すごいなぁ…と感心です。

そして、上記リンクとともに、「ある程度太字で、白抜きの文字は、映える」という秘伝の技を伝授していただきました。「太字フォント、白文字、フチなし、影あり」です。これが、安定で美しいそうです。

さっそく試してみました。どうでしょうか?

白文字で影ありにした「つなぎゴシック」画像

ナポリタン寿司「う、美しすぎて、ま、眩しいぜ!!なんだこの、何周もして、最終的にシンプルで、洗練されたデザインが良いことに気づいた感じは…!」

ということで、伝授された技をもとに、今後は、白文字&影ありでいこうと思います。

ふと思ったんですが、今美しいと思ったこのスタイルですが、数年後には、ダサいってなっているのでしょうか?なんか、こういうのって時代に応じて、ころころ変わってそうなイメージです。

数年後には、「レインボーでとにかく色を詰め込んだほうがうつくしい!」みたいになってたら、嫌だな…笑。単純に、修正が大変です。このまま、白抜き&影が、「かっこいい」のイメージでありますように…。

感想

以上、当サイトのサムネイル、YouTubeの字幕、ブログの見出しのフォントを変えた話でした。

他にも、沢山の情報をいただきました。デザインに疎い方、ぜひ参考にしてみてください。「フォントの奥ってこんなに深いんだ…!」と感動しました。

フォント名一言解説有料か無料か?
つなぎゴシック意識高い系・洗練系。読者曰く、「漢なら、つなぎでしょう!」無料
モボ数字と英語が統一されて、すっきりしていて素敵
源暎エムゴ角丸じゃないゴシック。太さが沢山用意されているので、何かと使える
バナナスリップセブンの糖質チョコなどや、お菓子(じゃがいも心地)に使われている
はんなり明朝
鉄瓶ゴシック僕が、YouTube字幕に使っていたフォント。
読者曰く、グネグネ文字(これ)は読めないので撤廃したほうが良いとのこと。
ロゴたいぷゴシック
-コンデンスド
僕が、サムネイルに使っていたフォント。
読者曰く、細くて見えないとのこと。
A1ゴシック高額なフォント有料
パンダベーカリーVTuberとかのサムネイルで使われている
ニタラゴルイカスマブラ、遊戯王マスターデュエルなどのゲームで使われている
G2サンセリフニタラゴルイカの始祖的ポジション
新ゴ説明書、成分表、バス、病院、駅など、公共的
中ゴシックBBBファッション雑誌などで使われる3点セット
太ゴ
見出しゴ
ラグランパンチ迫力ある系シリーズ。「キルラキル」というアニメで一躍有名になったフォント
ロゴGブラック迫力ある系シリーズ。「太く、強く、黒く」がコンセプト
ゼルダBotWのフォントラグランパンチとロゴGブラックを組み合わせた合成フォント

フリーフォントだと、「バナナスリップ」、「モボ」、「つなぎゴシック」、「源暎エムゴ」、「さつき源代明朝」あたりを入れておけば、間違いないとのことです。

こんなに、フリーで見やすいフォントがあるのに、僕は、なんで「ロゴたいぷゴシック-コンデンスド」や「鉄瓶ゴシック」といった独特なフォントを使っていたんだろうと不思議です。

別に上記2つのフォントが悪いわけではないです。個性を出すには便利なフォントだと思います。ただ、一般的に見やすいかと言われれば微妙です。もぅ数百記事を書いているので、手遅れ気味ですが、今の時点で指摘を貰えて、本当に良かったです。

王道・始祖は、「A1明朝」「リュウミン(モリサワフォント)」だそうです。

Posted by ナポリタン寿司