Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は Shopify アプリ「らくらく日本語フォント設定|リテリア Font Picker」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

「らくらく日本語フォント設定|リテリア Font Picker」は、Shopify ストアで日本語フォントを簡単に使用することができる Shopify アプリです。
Shopify のデフォルトでは使用できない日本語フォントが使用できるため、ブランドの世界観をより演出することができます。

ストアに日本語フォントを導入したいと言う方は、ぜひ「らくらく日本語フォント設定|リテリア Font Picker」をインストールしていただきたいです。

https://apps.shopify.com/font-picker-1?locale=ja&from=hp-guide

それでは、アプリを導入することでできること・インストール方法・使い方の解説を行なっていきます。

「らくらく日本語フォント設定|リテリア Font Picker」でできること

「らくらく日本語フォント設定|リテリア Font Picker」を使用すると、以下の画像のように自分のストアでお好きな日本語フォントを使用することができます。
ノーコードで使いたいフォントを選択するだけなので、設定はとても簡単です。

ベースにする日本語フォントとアクセントにする日本語フォントの 2 種類が選択できます。また、あらかじめ用意された日本語フォント以外に Google フォントなどの Web フォントも使用可能です。

また、Online Store 2.0 に対応した Shopify アプリのため、テーマのコードや他のアプリと干渉を起こしません。安心してアプリをインストールいただけます。

アプリのインストール

それでは、実際にアプリのインストールを行なっていきましょう。

ストアの管理画面の「アプリ管理」画面に表示されている「ストアをカスタマイズ」をクリックして、Shopify app store に移動してください。

アプリストアで、「らくらく日本語フォント設定|リテリア Font Picker」を検索してください。
検索結果に「らくらく日本語フォント設定|リテリア Font Picker」が表示されますので、クリックしてアプリの紹介ページを開きます。

「アプリを追加する」ボタンをクリックして、自分の Shopify ストアにアプリを追加します。
Shopify パートナーアカウントをお持ちの方は、開発ストアにインストールを行うことで全ての機能を無料でご利用いただくことが可能です。

マーチャント用のアカウント(普通の Shopify アカウント)ですと、月額 $4.99 でご利用いただけます。また、7 日間の無料お試し期間でアプリの挙動をご確認いただくことができます。

以下の画像のようなアプリのインストール確認画面が表示されます。
プライバシポリシーなどにご同意いただける場合は、「アプリをインストール」をボタンをクリックしてください。

アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後からとなりますので、安心して承認ボタンをクリックしてください。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。

以下のようなアプリの管理画面が表示されれば、インストールは完了です。

ここからは、アプリの詳しい使い方について説明していきます。

アプリの自動有効化

「らくらく日本語フォント設定|リテリア Font Picker」には、アプリの自動追加機能があり、1 クリックでアプリをテーマに導入することができます。
選択したテーマで自動的に日本語フォントが有効化されます。

アプリの管理画面で「アプリをインストールするテーマを選択」でアプリを挿入するテーマを選択します。

テーマを選択したら、「有効化」ボタンをクリックすることで、自動インストールが行われます。

「プレビュー」ボタンをクリックすることで、アプリがインストールされたアプリの画面を開くことができます。

テーマのカスタマイズ画面で「リテリア Font Picker」が正しく有効化されていることを確認してください。

アプリの手動有効化

アプリの自動有効化がうまくいかない場合などは、手動でアプリを有効化してください。

管理画面の「オンラインストア」を開きます。アプリを導入したいテーマの「カスタマイズ」テーマエディタを開きます。

テーマエディタの左下にある「テーマ設定」を開き、サイドバーの上部にあるタブから「アプリを埋め込む」を開きます。埋め込みアプリの中から「リテリア Font Picker」を見つけて、スイッチボタンを ON にしてアプリを有効化してください。

日本語フォントを選択する

アプリの有効化が完了したら、日本語フォントを選択します。
管理画面の「オンラインストア」を開きます。アプリを導入したいテーマの「カスタマイズ」テーマエディタを開きます。

テーマエディタの左下にある「テーマ設定」を開き、サイドバーの上部にあるタブから「アプリを埋め込む」を開きます。埋め込みアプリの中から「リテリア Font Picker」を見つけて、クリックしてアプリの詳細設定を開きます。

「基本設定」の「基本の日本語フォント」でストアのフォントをすべて変更できます。
デフォルトで用意しているフォントは以下になります。

  • ヒラギノ角ゴ
  • メイリオ
  • 游ゴシック
  • ヒラギノ明朝 ProN
  • 游明朝
  • Noto Sans JP
  • Noto Serif JP
  • M PLUS Rounded 1c

リアルタイムでフォントが変更されるので、ストアの見た目を確認しながらフォントを選択することができます。

基本的にはこの設定のみでストアでお好きな日本語フォントを使用することが可能です。

アプリの詳細なカスタマイズ

さらに細かいフォント設定を行いたい方のためのオプションも用意しています。

英語フォントの設定

日本語フォントと合わせて英語フォントを使用したい場合は、「基本の英語フォント」で設定が可能です。
設定した英語フォントは、日本語フォントより優先して英数字に適用されます。

例えば、英語フォントとして「Times New Roman」を使用したい場合は、以下のように設定します。

基本の英語フォント(オプション)
'Times New Roman',

Windows と Mac/iPhone で別のフォントを適用させたい場合は、, で区切って設定することでそれぞれの別のフォントを適用させることができます。

基本の英語フォント(オプション)
'Futura',Century Gothic,CenturyGothic

アクセントフォント設定(プロ向け)

アクセントとして使用したい日本語フォントがある場合は、「アクセントの日本語フォント」で設定が可能です。

アクセントの日本語フォントの選択

基本フォントの設定と同じように、アクセントとして使用したいフォントを選択します。

アクセントのフォントを適用する要素の選択

アクセントの日本語フォントを選択したらそのフォントをどの要素に適用するかを選択します。
以下の見出しの要素については、デフォルトで用意しているため、チェックをつけるだけでアクセントの日本語フォントが適用されます。

  • h1 タグ
  • h2 タグ
  • h3 タグ
  • h4 タグ

以下の画像のように、「h1 タグ」と「h2 タグ」にチェックをつけるとそれらの要素のみにアクセントの日本語フォントが適用されます。

アクセントフォントを適用する追加の要素・クラス名の設定

「追加の要素・クラス名」の設定項目で、見出し以外でアクセントフォントを適用させたい要素やクラス名を指定することが可能です。

例えば .button というクラスの要素に対してアクセントのフォントを適用させたい場合は、以下のように設定してください。要素やクラス名は ,(コンマ)つなぎで幾つでも設定することができます。

追加の要素・クラス名(オプション)
.button,

アクセントの英語フォントの設定

基本フォントの際と同様に、「アクセントの英語フォント」で英数字に適用するアクセントの英語フォントを指定することができます。

例えば、英語フォントとして「Arial」を使用したい場合は、以下のように設定します。

アクセントの英語フォント(オプション)
Arial,

Web フォントの設定(プロ向け)

用意された日本語フォントだけではなく、Web フォントを読み込んで使用することもできます。
この記事では例として、Google フォントの日本語フォントを導入してみます。

カスタム Web フォントのインポート設定

「カスタム Web フォントのインポート」で使用したい Web フォントの読み込みタグを設定します。
Google フォントであれば、以下のような <link> タグが発行されるので、それを貼り付けてください。このコードは、テーマの <head> タグに挿入されます。

ここでは、基本の Web フォント・アクセントの Web フォント両方のインポートを行なってください。

以下の例は「Sawarabi Gothic」をインポートするタグです。(Google フォントの使い方については割愛します。)

カスタムWebフォントのインポート(オプション)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">

基本のカスタム Web フォントの設定

読み込んだ Web フォントを使用するには、「基本のカスタム Web フォント」で使いたいフォントを指定します。
読み込んだ「Sawarabi Gothic」を使用したい場合は、以下のようにします。

基本のカスタムWebフォント(オプション)
'Sawarabi Gothic', sans-serif

アクセントのカスタム Web フォント

アクセントの Web フォントを使用したい場合は、「アクセントのカスタム Web フォント」でフォントを指定してください。

フォントの指定方法は、「基本のカスタム Web フォント」と同様です。

またここで設定した、アクセントの Web フォントは、アクセントのフォントを適用する要素の選択で選択している要素になります。

終わりに

今回は、「らくらく日本語フォント設定|リテリア Font Picker」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/font-picker-1?locale=ja&from=hp-guide

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説