01

ファーストビュー

01-header-hero
1

ホバースタイルが2種類ある

  • 反転
  • 透明度が下がる

LP全体でいずれかに統一した方が良いかと思います。

コマロボ版はコマロボサイトに合わせて「透明度が下がる」ですが、ホバースタイルは Air Trade の設計に合わせていただいてかまいません。

納品デザイン
納品デザインの該当箇所
02

楽天市場は避けて通れません

02-why-rakuten
2

見出しの改行位置が変わっている

コンテンツ幅 1200px の内側に入る左右 24px のパディングを、納品データで見込めていませんでした。こちらの不備です、申し訳ございません。

パネル幅は 1152px のままで結構です。下記2箇所の文字サイズをお下げいただければ2行に収まることを確認しました。

  • この見出し clamp(22px, 2.9vw, 36px) の上限を 34px
  • 「選ばれる理由」のカード見出し(861px以上) 19px → 18px

実測の根拠はこちらにまとめています。

納品デザイン
納品デザインの該当箇所

ご提案 日本語フォントの読み込みについて

原因は読み込みフォントによるもの、というご認識のとおりでした。現行環境では2行に収まるようご調整いただく方針で問題ございません。ありがとうございます。あわせて、リニューアルのタイミングで下記いずれかをご検討いただけますと幸いです。

現状

読み込まれている Web フォントは Karla:400Rubik:600,500 の2書体のみでした(テーマ側から出力されています)。見出しには Rubik が指定されていますが、Rubik は日本語のグリフを持ちません。そのため日本語部分は sans-serif、つまり閲覧者の OS 標準フォントで描画されています。Mac では Hiragino Sans、Windows では游ゴシックが使われるため、同じ CSS でも1行の文字幅が変わります。

納品データでは日本語を Noto Sans JP で固定していたため、どの環境でも同じ位置で折り返る想定でした。ブレイクポイントごとの比較と実測値はこちらにまとめています。

推奨ご提案1 Noto Sans JP を読み込み、font-family に明示する

日本語の字幅が全環境で同じになるため、改行位置が納品データどおりに再現できます。今回のような個別調整も不要になります。

用途font-family の指定ウェイト
本文"Karla", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serifKarla 400 / 700
見出し(h1〜h4)"Rubik", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serifRubik 600 / 700
数値・金額"Montserrat", sans-serifMontserrat 700
日本語(共通)上記2つの2番目に入りますNoto Sans JP 400 / 600 / 700

現在不足しているのは Karla 700Rubik 700Noto Sans JP 400・600・700Montserrat 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">

ご提案2 日本語フォントの追加が難しい場合は、OS 標準フォントを明示する

Web フォントを増やせない場合の代替案です。font-family に日本語フォントを並べるだけなら、読み込みは増えません。

--font-heading: "Rubik", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                "Yu Gothic", "Meiryo", sans-serif;

字幅は OS ごとに変わるため改行位置は環境依存のままですが、少なくとも「どのフォントで描画されるか分からない」状態は避けられます。文字サイズの調整も、いちばん字幅の広い Hiragino Sans を基準にすれば全環境で成立します。

03

選ばれる理由

08-results
補足

このセクションも 2 と同じ原因です

カードの並ぶ枠も 1200px → 1152px になっているため、02「注文取込から出荷・キャンセルまで、連携範囲が…」の見出しが3行になっています。

カード見出しの font-size を 19px → 18px(861px 以上)にしていただくと、3枚とも2行にそろうことを確認しました。

04

中段CTA

09-gap
3

中段CTAの背景に、左右だけ色の違う帯が出ている

納品デザイン
納品デザインの該当箇所
05

料金

11-pricing
4

料金の注記に「初期費用は確認中です。」が残っている

確認中の文言が残ったままでした。申し訳ございません。文言削除をお願いいたします。

初期費用については現在、中嶋さんへ確認中です。

06

よくある質問

12-faq
5

FAQセクションに見出しラベル「FAQ」を追加したい

こちらも対応が漏れておりました。申し訳ございません。

他セクションと同じ緑ラベルのスタイルで「FAQ」を追加していただけますか。

07

最終CTA

13-final-cta