ホバースタイルが2種類ある
- 反転
- 透明度が下がる
LP全体でいずれかに統一した方が良いかと思います。
コマロボ版はコマロボサイトに合わせて「透明度が下がる」ですが、ホバースタイルは Air Trade の設計に合わせていただいてかまいません。
LP全体でいずれかに統一した方が良いかと思います。
コマロボ版はコマロボサイトに合わせて「透明度が下がる」ですが、ホバースタイルは Air Trade の設計に合わせていただいてかまいません。
コンテンツ幅 1200px の内側に入る左右 24px のパディングを、納品データで見込めていませんでした。こちらの不備です、申し訳ございません。
パネル幅は 1152px のままで結構です。下記2箇所の文字サイズをお下げいただければ2行に収まることを確認しました。
clamp(22px, 2.9vw, 36px) の上限を 34px へ実測の根拠はこちらにまとめています。
原因は読み込みフォントによるもの、というご認識のとおりでした。現行環境では2行に収まるようご調整いただく方針で問題ございません。ありがとうございます。あわせて、リニューアルのタイミングで下記いずれかをご検討いただけますと幸いです。
読み込まれている Web フォントは Karla:400 と Rubik:600,500 の2書体のみでした(テーマ側から出力されています)。見出しには Rubik が指定されていますが、Rubik は日本語のグリフを持ちません。そのため日本語部分は sans-serif、つまり閲覧者の OS 標準フォントで描画されています。Mac では Hiragino Sans、Windows では游ゴシックが使われるため、同じ CSS でも1行の文字幅が変わります。
納品データでは日本語を Noto Sans JP で固定していたため、どの環境でも同じ位置で折り返る想定でした。ブレイクポイントごとの比較と実測値はこちらにまとめています。
日本語の字幅が全環境で同じになるため、改行位置が納品データどおりに再現できます。今回のような個別調整も不要になります。
| 用途 | font-family の指定 | ウェイト |
|---|---|---|
| 本文 | "Karla", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif | Karla 400 / 700 |
| 見出し(h1〜h4) | "Rubik", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif | Rubik 600 / 700 |
| 数値・金額 | "Montserrat", sans-serif | Montserrat 700 |
| 日本語(共通) | 上記2つの2番目に入ります | Noto Sans JP 400 / 600 / 700 |
現在不足しているのは Karla 700、Rubik 700、Noto Sans JP 400・600・700、Montserrat 700 です。Roboto はエアトレード様のグローバルナビ用のため、こちらの要件には含みません。
読み込みは新しい css2 でお願いいたします。現在は旧 API の css?family= ですが、css2 は日本語を unicode-range で自動分割して配信するため、ページ内で使う文字を含むぶんだけが読み込まれます。納品データで実測したところ、Noto Sans JP は1ウェイトあたり36個のサブセットに分割されていました。日本語 Web フォントは重い、という懸念はこの方式で回避できます。
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Rubik:wght@600;700&family=Noto+Sans+JP:wght@400;600;700&family=Montserrat:wght@700&display=swap">
Web フォントを増やせない場合の代替案です。font-family に日本語フォントを並べるだけなら、読み込みは増えません。
--font-heading: "Rubik", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic", "Meiryo", sans-serif;
字幅は OS ごとに変わるため改行位置は環境依存のままですが、少なくとも「どのフォントで描画されるか分からない」状態は避けられます。文字サイズの調整も、いちばん字幅の広い Hiragino Sans を基準にすれば全環境で成立します。
カードの並ぶ枠も 1200px → 1152px になっているため、02「注文取込から出荷・キャンセルまで、連携範囲が…」の見出しが3行になっています。
カード見出しの font-size を 19px → 18px(861px 以上)にしていただくと、3枚とも2行にそろうことを確認しました。
確認中の文言が残ったままでした。申し訳ございません。文言削除をお願いいたします。
初期費用については現在、中嶋さんへ確認中です。
こちらも対応が漏れておりました。申し訳ございません。
他セクションと同じ緑ラベルのスタイルで「FAQ」を追加していただけますか。
Shopify Connect 専用フォームになりますか。その場合、フォームページの作成をお願いいたします。