フォントスタイル
ここでは、日本語の改行やカーニング（字詰め）の設定、ボディ・タイトル（ボタンとインプット・メニュー）のフォントファミリー・スタイル・ウエイトなどを個別に変更することができます。
ボディ(本文)
このセクションでは、ボディ(本文)のフォントのさまざまな設定をすることができます。
フォントの選択(本文)
3つのフォントカテゴリーからフォントを選択してください。
- システムフォント(高速)
- Googleフォント
- Shopify管理フォント
オプション項目概要
ーシステムフォント(高速)
ラジオボタン選択で、システムフォントをご利用いただけます。システムフォントはOSにデフォルトでインストールされているフォントになります。
メリット
- ページのロード速度が早い
- すでにほとんどのデバイス/OSでインストール済みのため表示に問題ない
デメリット
- フォントのバリエーションが少ない
- デザインの表現力に限界がある
ーGoogleフォント
ラジオボタン選択で、Googleフォントをご利用いただけます。Googleフォントは、Googleが提供している無料のウェブフォントです。文字と見た目のライセンスがオープンなフォントファミリーを数多く揃えております。表示速度やレンダリングパフォーマンスも非常に高いことが特徴です。
メリット
- MISEルでは16種の日本語フォントを選択可能でオリジナリティを高められる
- 美しいフォントでサイトのデザイン性を高められる
デメリット
表示速度やレンダリングパフォーマンスも非常に高いとされているが、ページのロード速度が遅くなる可能性もあります
ーShopify管理フォント
ラジオボタン選択で、Shopify管理フォントをご利用いただけます。
メリット
Shopifyがセレクトした洗練された欧文フォントでデザイン性が高い
デメリット
日本語フォントがない（2023年12月時点）
上記フォント選択を全てに適用
フォントの選択(本文)で設定したフォントグループを、見出し、ボタン、入力、メニュー、にも同じ設定を適用します。見出し、ボタン、入力、メニューに別のフォントを選択したい場合は、オプション「上記フォント選択を全てに適用」のチェックを外してください。
システムフォント選択時有効(本文)
「フォントの選択(本文)」項目の「システムフォント(高速)」が選択時に有効になります。デフォルトでは、ゴシック系の日本語フォントはヒラギノ角ゴシック、欧文はHelvetica Neueなどが左から順にOSや端末ごとに有効なフォントが表示される設定になっています。明朝や丸ゴシックなど、他のフォントファミリーをご利用の場合は、好みのフォント名をcssコードの規則に合わせて入力ください。
ただし、フォントファミリーコードの詳細についてはサポートは行っておりませんので、おわかりにならない場合は、デフォルト設定をご利用いただくか、専門の方にご相談ください。
フォントファミリー設定例
Apple
“SF Pro JP”, “SF Pro Text”, “SF Pro Icons”, “AOS Icons”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “Helvetica Neue”, Helvetica, Arial, sans-serif
‘Helvetica’,’Arial’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’sans-serif
Yahoo!JP
‘メイリオ’, Meiryo,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’ＭＳ Ｐゴシック’,’MS PGothic”MS UI Gothic’,’Helvetica’,’Arial’,sans-serif
WIRED
‘Helvetica Neue’,’Helvetica’,’Arial’,YuGothic,’Yu Gothic’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’メイリオ’, Meiryo,’ＭＳ ゴシック’,sans-serif; serif; cursive; fantasy; monospace;
Amazon
‘Hiragino Kaku Gothic ProN’,’Hiragino Sans’,Meiryo,sans-serif
グレイル（女性ファッション）
“Roboto”, “游ゴシック体”, “Yu Gothic”, “游ゴシックMedium”, “Yu Gothic Medium”, “ヒラギノ角ゴ Pro”, “Hiragino Kaku Gothic Pro”, “Hiragino Sans”, “メイリオ”, “Meiryo”, sans-serif
４℃
“ヒラギノ明朝 Pro”, “Hiragino Mincho Pro”, ‘Noto Serif JP’, “MS P明朝”, “MS PMincho”, serif
参考サイト： font-familyメーカー
上記サイトを利用の際は、font-family: ⚪︎⚪︎⚪︎⚪︎; の⚪︎⚪︎⚪︎⚪︎部分のみを入力してください。
Googleフォント選択時有効(本文)
「フォントの選択(本文)」項目の「Googleフォント」が選択時に有効になります。Google Fontsには、日本語をサポートした多数のフォントが含まれています。その中から16フォントを厳選し、すぐにセレクターから選ぶだけでご利用いただけるようしました。グーグルフォントは手軽に高品質な日本語表示を実現できる優れたフォントです。ぜひサイト制作時に活用していただければと思います。
参考サイト：Google Fonts公式
ご利用いただける書体
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やブラウザの設定で自動で表示されます。
フォントスタイル(本文)
フォントのスタイルを、ノーマルとイタリック体(斜体)に設定できます。
フォントウエイト(本文)
フォントのウエイトを、300(ライト)、400(ノーマル)、700(ボールド)の３種類を設定できます。ただし設定したフォントファミリーによっては、1〜2種のウエイトのみのフォントもあります。Googleフォントについては、公式サイトをご確認ください。
参考サイト：Googleフォント公式
ベースフォントサイズ(本文)
ベースフォント(本文)のフォントサイズを、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
“SF Pro JP”, “SF Pro Text”, “SF Pro Icons”, “AOS Icons”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “Helvetica Neue”, Helvetica, Arial, sans-serif
‘Helvetica’,’Arial’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’sans-serif
Yahoo!JP
‘メイリオ’, Meiryo,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’ＭＳ Ｐゴシック’,’MS PGothic”MS UI Gothic’,’Helvetica’,’Arial’,sans-serif
WIRED
‘Helvetica Neue’,’Helvetica’,’Arial’,YuGothic,’Yu Gothic’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’メイリオ’, Meiryo,’ＭＳ ゴシック’,sans-serif; serif; cursive; fantasy; monospace;
Amazon
‘Hiragino Kaku Gothic ProN’,’Hiragino Sans’,Meiryo,sans-serif
グレイル（女性ファッション）
“Roboto”, “游ゴシック体”, “Yu Gothic”, “游ゴシックMedium”, “Yu Gothic Medium”, “ヒラギノ角ゴ Pro”, “Hiragino Kaku Gothic Pro”, “Hiragino Sans”, “メイリオ”, “Meiryo”, sans-serif
４℃
“ヒラギノ明朝 Pro”, “Hiragino Mincho Pro”, ‘Noto Serif JP’, “MS P明朝”, “MS PMincho”, serif
参考サイト： font-familyメーカー
上記サイトを利用の際は、font-family: ⚪︎⚪︎⚪︎⚪︎; の⚪︎⚪︎⚪︎⚪︎部分のみを入力してください。
Googleフォント選択時有効(見出し)
「フォントの選択(本文)」項目の「Googleフォント」が選択時に有効になります。Google Fontsには、日本語をサポートした多数のフォントが含まれています。その中から16フォントを厳選し、すぐにセレクターから選ぶだけでご利用いただけるようしました。グーグルフォントは手軽に高品質な日本語表示を実現できる優れたフォントです。ぜひサイト制作時に活用していただければと思います。
参考サイト：Google Fonts公式
ご利用いただける書体
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やブラウザの設定で自動で表示されます。
フォントスタイル(見出し)
フォントのスタイルを、ノーマルとイタリック体(斜体)に設定できます。
フォントウエイト(見出し)
フォントのウエイトを、300(ライト)、400(ノーマル)、700(ボールド)の３種類を設定できます。ただし設定したフォントファミリーによっては、1〜2種のウエイトのみのフォントもあります。Googleフォントについては、公式サイトをご確認ください。
参考サイト：Google Fonts公式
プロモボックスの大きいテキストサイズ・h1(見出し)
10～100pxのスケールで、テキストのサイズを変更することができます。
「レイアウト」ブロックのプロモボックス（バナー）には、タイプ#1のv1（画像の上にテキスト）を選びます。h1を44pxに変更しました。そして、このような結果になりました。
そしてこの例では、「レイアウト」ブロックのプロモボックス（バナー）に「タイプ#1 v17」を選択しました 。
プロモボックスのテキストサイズ・h2(見出し)
10～60pxのスケールで、テキストのサイズを変更することができます。
ページタイトルサイズ・h3(見出し)
10～60pxのスケールで、テキストのサイズを変更することができます。どのページでもタイトルのサイズを変更できます。
セクションタイトルサイズ・h4(見出し)
10～60pxのスケールで、テキストのサイズを変更することができます。どのセクションでもサイズを変更できます。
ハイライトテキストサイズ・h6(見出し)
10～60pxのスケールで、テキストのサイズを変更することができます。
ボタン・入力フォーム（インプット）
ボタンフォントサイズ
10～60pxのスケールで、ボタンのテキストのサイズを変更できます。
入力フォームフォントサイズ
10～60pxのスケールで、入力フォームのフォントサイズを変更できます。
メニュー
このセクションでは、メニューのフォントを変更することができます。
1階層目のフォントサイズ
10～60pxのスケールで、第一レベルのメニューフォントのサイズを変更できます。
リストフォントサイズ
10～60pxのスケールで、ドロップダウン・メガメニューのリストフォントを変更できます。
タイトルフォントサイズ
10～60pxのスケールで、タイトルフォントサイズを変更できます。
モバイルメニューのフォントサイズ
10～60pxのスケールで、モバイル版のメニューのフォントサイズを変更できます。
本文・見出し共通
日本語フォント文字詰め(OpenTypeのみ)
日本語OpenTypeフォントで有効な自動カーニングを、「無効」「palt」「pwid」「pkna」の4種を選択できます。OpenTypeフォントの字間情報を制御する「プロポーショナルメトリクス」という機能を利用しています。
- 無効：文字詰めなし
- palt ：仮名・カッコ・句読点の詰め (文字ごとに幅を設定した自動文字詰め)
- pwid：仮名・カッコの詰め(句読点はそのまま。行頭全角スペースも詰め)
- pkna：仮名のみ詰め
英文字の大文字表記を有効化
テキストの大文字・小文字を切り替えることができる機能です。有効にするとテキストが全て大文字に変換され、無効にすると元の小文字の文字列が表示されます。
