『MISEル』ユーザーマニュアル/🟦フォントスタイル (1)
MISEルストアMISEル Youtube
MISEルストアMISEル Youtube
🟦
『MISEル』ユーザーマニュアル/🟦フォントスタイル (1)

フォントスタイル (1)

ここでは、日本語の改行やカーニング（字詰め）の設定、ボディ・タイトル（ボタンとインプット・メニュー）のフォントファミリー・スタイル・ウエイトなどを個別に変更することができます。

ボディ(本文)

このセクションでは、ボディ(本文)のフォントのさまざまな設定をすることができます。

フォントの選択(本文)

3つのフォントカテゴリーからフォントを選択してください。
  • システムフォント(高速)
  • Googleフォント
  • Shopify管理フォント
テーマ設定:フォントスタイル - フォントの選択(本文)
 

オプション項目概要

ーシステムフォント(高速)

ラジオボタン選択で、システムフォントをご利用いただけます。システムフォントはOSにデフォルトでインストールされているフォントになります。

メリット:

  • ページのロード速度が早い
  • すでにほとんどのデバイス/OSでインストール済みのため表示に問題ない

デメリット:

  • フォントのバリエーションが少ない
  • デザインの表現力に限界がある
 

ーGoogleフォント

ラジオボタン選択で、Googleフォントをご利用いただけます。Googleフォントは、Googleが提供している無料のウェブフォントです。文字と見た目のライセンスがオープンなフォントファミリーを数多く揃えております。表示速度やレンダリングパフォーマンスも非常に高いことが特徴です。

メリット:

  • MISEルでは39種の日本語フォントを選択可能でオリジナリティを高められる
  • 美しいフォントでサイトのデザイン性を高められる

デメリット:

  • 表示速度やレンダリングパフォーマンスも非常に高いとされているが、 ページのロード速度が遅くなる可能性もあります
 

ーShopify管理フォント

ラジオボタン選択で、Shopify管理フォントをご利用いただけます。

メリット:

  • Shopifyがセレクトした洗練された欧文フォントでデザイン性が高い

デメリット:

  • 日本語フォントがない（2024年10月時点）

上記フォント選択を全てに適用

フォントの選択(本文)で設定したフォントグループを、見出し、ボタン、入力、メニュー、にも同じ設定を適用します。見出し、ボタン、入力、メニューに別のフォントを選択したい場合は、オプション「上記フォント選択を全てに適用」のチェックを外してください。
テーマ設定:フォントスタイル - 上記フォント選択を全てに適用
 

システムフォント選択時有効(本文)

「フォントの選択(本文)」項目の「システムフォント(高速)」が選択時に有効になります。デフォルトでは、ゴシック系の日本語フォントはヒラギノ角ゴシック、欧文はHelvetica Neueなどが左から順にOSや端末ごとに有効なフォントが表示される設定になっています。明朝や丸ゴシックなど、他のフォントファミリーをご利用の場合は、好みのフォント名をcssコードの規則に合わせて入力ください。
ただし、フォントファミリーコードの詳細についてはサポートは行っておりませんので、おわかりにならない場合は、デフォルト設定をご利用いただくか、専門の方にご相談ください。
テーマ設定:フォントスタイル - システムフォント選択時有効(本文)
 

フォントファミリー設定例

Apple : 　

Yahoo!JP : 　

グレイル（女性ファッション）:

４℃ :

 
また、自由にシステムフォントを組み合わせて作成できる下記サイトも参考になります。 「font-familyメーカー」サイト

Googleフォント選択時有効(本文)

「フォントの選択(本文)」項目の「Googleフォント」が選択時に有効になります。Google Fontsには、日本語をサポートした多数のフォントが含まれています。その中から16フォントを厳選し、すぐにセレクターから選ぶだけでご利用いただけるようしました。グーグルフォントは手軽に高品質な日本語表示を実現できる優れたフォントです。ぜひサイト制作時に活用していただければと思います。Google Fonts公式
テーマ設定:フォントスタイル - Googleフォント選択時有効(本文)
 

ご利用いただける書体

ゴシック体

  • BIZ UDPGothic
  • Dela Gothic One
  • DotGothic16
  • IBM Plex Sans JP
  • Kosugi Maru
  • M PLUS 1p
  • M PLUS 2
  • M PLUS Rounded 1c
  • Mochiy Pop One
  • Mochiy Pop P One
  • Murecho
  • Nanum Gothic
  • Noto Sans Japanese
  • Potta One
  • Rampart One
  • RocknRoll One
  • Sawarabi Gothic
  • Shippori Antique
  • Shippori Antique B1
  • Train One
  • Yusei Magic
  • Zen Antique Soft
  • Zen Kaku Gothic New
  • Zen Kurenaido
  • Zen Maru Gothic

明朝体

  • BIZ UDPMincho
  • BIZ UDMincho
  • Hina Mincho
  • Kaisei Decol
  • Kaisei HarunoUmi
  • Kaisei Opti
  • Kaisei Tokumin
  • Noto Serif Japanese
  • Sawarabi Mincho
  • Shippori Mincho
  • Zen Antique
  • Zen Old Mincho

丸ゴシック体

  • Kiwi Maru

デザイン

  • Klee One
 

Shopify管理フォント(本文)

「フォントの選択(本文)」項目の「Shopify管理フォント」が選択時に有効になります。変更ボタンをクリックすると、Shopifyのサーバーで管理している豊富な英語フォントがご利用いただけます。日本語フォントは英語フォントと近いフォントファミリーがOSやブラウザの設定で自動で表示されます。
テーマ設定:フォントスタイル - Shopify管理フォント(本文)
 

フォントスタイル(本文)

フォントのスタイルを、ノーマルとイタリック体(斜体)に設定できます。
テーマ設定:フォントスタイル - フォントスタイル(本文)

フォントウエイト(本文)

フォントのウエイトを、300(ライト)、400(ノーマル)、700(ボールド)の３種類を設定できます。ただし設定したフォントファミリーによっては、1〜2種のウエイトのみのフォントもあります。Googleフォントについては、公式サイトをご確認ください。Google Fonts　https://fonts.google.com/?subset=japanese&noto.script=Hira
テーマ設定:フォントスタイル - フォントウエイト(本文)

ベースフォントサイズ(本文)

ベースフォント(本文)のフォントサイズを、10〜60pxの範囲で1px単位で調整できます。
テーマ設定:フォントスタイル - ベースフォントサイズ(本文)

見出し

日本語の自動改行を有効化

日本語の文節を自動で判断して、改行する機能を有効・無効を設定します。さまざまなウェブサイトのサイズで、読みやすいテキスト折り返し(改行)された日本語表示を実現します。GoogleのオープンソースコードBudouXの分かち書きのための機械学習モデルを利用しています。
テーマ設定:フォントスタイル - 日本語の自動改行を有効化
 
 

フォントの選択(見出し)

3つのフォントカテゴリーからフォントを選択してください。
  • システムフォント(高速)
  • Googleフォント
  • Shopify管理フォント
💡
注意：「上記フォント選択を全てに適用」のチェックが外れている必要があります。フォントが反映されない場合は、まずはこちらの項目の確認をお願いします。
テーマ設定:フォントスタイル - フォントの選択(見出し)
 

オプション項目概要

ーシステムフォント(高速)

ラジオボタン選択で、システムフォントをご利用いただけます。システムフォントはOSにデフォルトでインストールされているフォントになります。

メリット:

  • ページのロード速度が早い
  • すでにほとんどのデバイス/OSでインストール済みのため表示に問題ない

デメリット:

  • フォントのバリエーションが少ない
  • デザインの表現力に限界がある

ーGoogleフォント

ラジオボタン選択で、Googleフォントをご利用いただけます。Googleフォントは、Googleが提供している無料のウェブフォントです。文字と見た目のライセンスがオープンなフォントファミリーを数多く揃えております。表示速度やレンダリングパフォーマンスも非常に高いことが特徴です。

メリット:

  • MISEルでは16種の日本語フォントを選択可能でオリジナリティを高められる
  • 美しいフォントでサイトのデザイン性を高められる

デメリット:

  • 表示速度やレンダリングパフォーマンスも非常に高いとされているが、 ページのロード速度が遅くなる可能性もあります

ーShopify管理フォント

ラジオボタン選択で、Shopify管理フォントをご利用いただけます。

メリット:

  • Shopifyがセレクトした洗練された欧文フォントでデザイン性が高い

デメリット:

  • 日本語フォントがない（2023年12月時点）

システムフォント選択時有効(見出し)

「フォントの選択(見出し)」項目の「システムフォント(高速)」が選択時に有効になります。デフォルトでは、ゴシック系の日本語フォントはヒラギノ角ゴシック、欧文はHelvetica Neueなどが左から順にOSや端末ごとに有効なフォントが表示される設定になっています。明朝や丸ゴシックなど、他のフォントファミリーをご利用の場合は、好みのフォント名をcssコードの規則に合わせて入力ください。
ただし、フォントファミリーコードの詳細についてはテーマサポート範囲外となりますので、おわかりにならない場合は、デフォルト設定をご利用いただくか、専門の方にご相談ください。
テーマ設定:フォントスタイル - システムフォント選択時有効(見出し)
 

参考サイトのフォントファミリー設定

Apple :

Yahoo!JP :

グレイル（女性ファッション）:

４℃ :

また、自由にシステムフォントを組み合わせて作成できる下記サイトも参考になります。 「font-familyメーカー」サイト　https://saruwakakun.com/font-family
 

Googleフォント選択時有効(見出し)

「フォントの選択(本文)」項目の「Googleフォント」が選択時に有効になります。Google Fontsには、日本語をサポートした多数のフォントが含まれています。その中から16フォントを厳選し、すぐにセレクターから選ぶだけでご利用いただけるようしました。グーグルフォントは手軽に高品質な日本語表示を実現できる優れたフォントです。ぜひサイト制作時に活用していただければと思います。Google Fonts公式
テーマ設定:フォントスタイル - Googleフォント選択時有効(本文)
 

ご利用いただける書体

Noto Sans Japanese（ゴシック体）
Noto Serif Japanese（明朝体）
Zen Kaku Gothic New（ゴシック体）
Zen Maru Gothic（丸ゴシック体）
Zen Old Mincho（明朝体）
M PLUS 1p （ゴシック体）
M PLUS Rounded 1c（丸ゴシック体）
Shippori Mincho（明朝体）
Shippori Antique（明朝体）
Sawarabi Gothic（ゴシック体）
Sawarabi Mincho（明朝体）
BIZ UDPGothic（ゴシック体）
Hina Mincho（明朝体）
Kiwi Maru（丸ゴシック体）
Kosugi Maru（丸ゴシック体）
Kaisei Opti（デザイン書体）
 
 

Shopify管理フォント(見出し)

「フォントの選択(見出し)」項目の「Shopify管理フォント」が選択時に有効になります。変更ボタンをクリックすると、Shopifyのサーバーで管理している豊富な英語フォントがご利用いただけます。日本語フォントは英語フォントと近いフォントファミリーがOSやブラウザの設定で自動で表示されます。
テーマ設定:フォントスタイル - Shopify管理フォント(見出し)

フォントスタイル(見出し)

フォントのスタイルを、ノーマルとイタリック体(斜体)に設定できます。
テーマ設定:フォントスタイル - フォントスタイル(見出し)

フォントウエイト(見出し)

フォントのウエイトを、300(ライト)、400(ノーマル)、700(ボールド)の３種類を設定できます。ただし設定したフォントファミリーによっては、1〜2種のウエイトのみのフォントもあります。Googleフォントについては、公式サイトをご確認ください。Google Fonts　https://fonts.google.com/?subset=japanese&noto.script=Hira
テーマ設定:フォントスタイル - フォントウエイト(見出し)
 

プロモボックスの大きいテキストサイズ・h1(見出し)

10～100pxのスケールで、テキストのサイズを変更することができます。
テーマ設定:フォントスタイル - プロモボックスの大きいテキストサイズ・h1(見出し)
「レイアウト」ブロックのプロモボックス（バナー）には、タイプ#1のv1（画像の上にテキスト）を選びます。h1を44pxに変更しました。そして、このような結果になりました。
テーマ設定:フォントスタイル - プロモボックス見出しフォントの例
そしてこの例では、「レイアウト」ブロックのプロモボックス（バナー）に「タイプ#1 v17」を選択しました 。
テーマ設定:フォントスタイル - プロモボックス タイプ#1 v17

プロモボックスのテキストサイズ・h2(見出し)

10～60pxのスケールで、テキストのサイズを変更することができます。
テーマ設定:フォントスタイル - プロモボックスのテキストサイズ・h2(見出し)

ページタイトルサイズ・h3(見出し)

10～60pxのスケールで、テキストのサイズを変更することができます。どのページでもタイトルのサイズを変更できます。
テーマ設定:フォントスタイル - ページタイトルサイズ・h3(見出し)

セクションタイトルサイズ・h4(見出し)

10～60pxのスケールで、テキストのサイズを変更することができます。どのセクションでもサイズを変更できます。
テーマ設定:フォントスタイル - セクションタイトルサイズ・h4(見出し)

ハイライトテキストサイズ・h6(見出し)

10～60pxのスケールで、テキストのサイズを変更することができます。
テーマ設定:フォントスタイル - ハイライトテキストサイズ・h6(見出し)

ボタン・入力フォーム（インプット）

ボタンフォントサイズ

10～60pxのスケールで、ボタンのテキストのサイズを変更できます。
テーマ設定:フォントスタイル - ボタンフォントサイズ

入力フォームフォントサイズ

10～60pxのスケールで、入力フォームのフォントサイズを変更できます。
テーマ設定:フォントスタイル - 入力フォームフォントサイズ

メニュー

このセクションでは、メニューのフォントを変更することができます。

1階層目のフォントサイズ

10～60pxのスケールで、第一レベルのメニューフォントのサイズを変更できます。
テーマ設定:フォントスタイル - 1階層目のフォントサイズ

リストフォントサイズ

10～60pxのスケールで、ドロップダウン・メガメニューのリストフォントを変更できます。
テーマ設定:フォントスタイル - リストフォントサイズ

タイトルフォントサイズ

10～60pxのスケールで、タイトルフォントサイズを変更できます。
テーマ設定:フォントスタイル - タイトルフォントサイズ

モバイルメニューのフォントサイズ

10～60pxのスケールで、モバイル版のメニューのフォントサイズを変更できます。
テーマ設定:フォントスタイル - モバイルメニューのフォントサイズ

本文・見出し共通

日本語フォント文字詰め(OpenTypeのみ)

日本語OpenTypeフォントで有効な自動カーニングを、「無効」「palt」「pwid」「pkna」の4種を選択できます。OpenTypeフォントの字間情報を制御する「プロポーショナルメトリクス」という機能を利用しています。
無効：文字詰めなし
palt ：仮名・カッコ・句読点の詰め (文字ごとに幅を設定した自動文字詰め)
pwid：仮名・カッコの詰め(句読点はそのまま。行頭全角スペースも詰め)
pkna：仮名のみ詰め
テーマ設定:フォントスタイル - 日本語フォント文字詰め(OpenTypeのみ)

英文字の大文字表記を有効化

テキストの大文字・小文字を切り替えることができる機能です。有効にするとテキストが全て大文字に変換され、無効にすると元の小文字の文字列が表示されます。
テーマ設定:フォントスタイル - 英文字の大文字表記を有効化

日本語役物を半角有効化

日本語特有の約物（やくもの）を、半角に調整するための専用Webフォントに置き換える機能です。約物（例：、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝）を半角に調整することで、文頭の揃いや右のラインの見栄えを整えます。
 
『MISEル』ユーザーマニュアル/🟦フォントスタイル (1)