【デイトラ】Shopifyコース DAY4の感想と学習記録

screen_shot Shopify

ごきげんよーう

 

デイトラ5日目!

本日のテーマは「一手間でガラッと変わる!簡単テーマカスタマイズ」です。

 

Shopifyの海外仕様を日本仕様に変えて、より使いやすくします。
デイトラのShopifyコースで唯一コードを編集するのが今日のレッスンです!

今日はちょっとしたハプニングが発生しました。

その辺りもご紹介しつつ、早速スタート!

スポンサーリンク

フォントを日本語対応にしよう

フォントをGoogleフォントに変更します。

 

ShopifyはRubyベースのLiquidというテンプレート言語を使っています。

theme.scss.liquidというファイルを編集してフォントを変えていきますよ。

 

しかしここで事件が。

ファイルを編集してプレビューを確認すると・・・

screen_shot

 

何だこれは。

DAY2であんなに自慢してた見た目が崩れてる・・・

 

え、でもちゃんとやったのに!!?

新しく記述した箇所をコメントアウトしてみるも直らず。

 

ということは、わたしが既存のコードのどこかを変えてしまったということなのですが・・・

このファイルのコード、9,000字以上ある。

 

控えめに言って絶望。

 

ということで、もともと複製していたテーマからtheme.scss.liquidを全コピ→新しいコードを貼り付けて無事表示されるようになりました!

screen_shot

 

よ、良かった・・・

 

わたしはファイルの一番下に移動するときに、Shift+Gを押すクセがあります。

多分今回もそれをやらかして、scssのどこかに「G」が入って表示が崩れてしまったんじゃないかと…

 

気をつけよう。

フォントのサイズを調整する

さて、無事レイアウトが元に戻ったところで、次はフォントサイズを調整していきます!

欧米のサービスに日本語フォントを適用すると、見出しが大きすぎたりして読みにくいテキストになってしまうそうです。

 

欧米のサービスはどうしてもアルファベットを前提にしてますもんね。

既存のサービスはきっとこんな調整もしてくれてるんですよね!すごい。

 

ここで新しく学習したのが、「ジャンプ率」

ジャンプ率とは「本文の文字サイズに対する見出しの文字サイズの比率」のことです。

一般的には下記のように言われているそうです。

・ジャンプ率が高いと若者向けで賑やかな印象

・ジャンプ率が低いと落ち着いた高級感のある大人っぽい印象

せっかくなので、サイトのジャンプ率を調べてみました。

まずは、みんな大好きポケモンのカフェサイト。

明るくて楽しい印象ですね!

pokemon_cafe
「MENU」のフォントサイズは60pxで、その下の文字は18pxです。

 

一方、高級ブランドルイ・ヴィトンのサイト。

 

louis_vuitton
上の文字が1.78125remで下の文字が1.1remです。

 

い、いってんななはちいちにいごーれむ??????

 

正直「フォントサイズってそんな細かく指定するものなんだ…」っていう感想しかないんですが、フォントサイズだけで受ける印象は大きく変わりますよね!

アカウントページの「姓名」と「住所」の入力順を日本仕様にする

これは案件を受けたら1番したいなと思った仕様です!
デフォルトでは欧米仕様でファーストネーム(名)→ラストネーム(姓)の順になっているので、これを入れ替えます。

 

また、住所も番地→市町村→都道府県→郵便番号になっているので、これを郵便番号→都道府県→市町村→番地の日本仕様にします。

 

国を入力する欄もありますが、これは消してしまっても良いんじゃないかなーと思いました。
海外発送も対応するオーナーさんなら別ですけど。

おわりに

一手間でオーナーさんに喜んでもらえそうなカスタマイズを学習できました!
ストアでお買い物してくれるお客さんの立場で考えると、こういう少しの便利さが「また買おう」に繋がるのかもと思いました。

 

そして、レッスンでも触れていましたがバックアップは本当に大事。
大事です。
ではでは〜

コメント

タイトルとURLをコピーしました