ストアが選んだパレットと書体を見る。
Shopify のテーマは、自身の設定をページの中で宣言しています。Evidio は色を HEX 値として、フォントファミリーをそのウェイトとともに読み取ります。
ストアのビジュアルアイデンティティを、コードから読む。
デザイン
わかること
- テーマが宣言しているブランドカラー（HEX 値）
- 色をクリックすると HEX コードをコピー
- ストアフロントが読み込んでいるフォントファミリー
- 各ファミリーで読み込まれているウェイト（フォントファイルに記載がある場合）
- 各フォントを探すためのリンク
スクリーンショットから推測する代わりに、正確な色とフォントがわかります。
テーマの設定から、パレットへ。
ストアを分析する
パレットとフォントは、追加のリクエストなしで、分析の他の項目と一緒に読み取られます。
色を読む
パレットから、どの HEX 値でもコピーできます。
書体を読む
各フォントファミリーとそのウェイトを確認し、開いてフォントファイルを探します。
ブランドのビジュアルの選択を、正確に調べる。
あるストアの見た目が気に入り、ムードボードやクライアント向けのブリーフのために、その正確な色とフォントを知りたいとします。スクリーンショットから色を拾っても近似値にしかならず、フォントは目で見ただけでは名前を特定しにくいものです。
分析は、テーマが宣言している色とフォントを読み取ります。推測する代わりに、正確な HEX 値をコピーし、フォント名を確認できます。
答えを出せる質問
- このストアのブランドを形づくっている色はどれか。
- どのフォントを使っているか。
- ニッチの中で、パレットはどう違うか。
テーマが宣言する色であり、画面上のすべての色ではない。
Evidio はページに書き込まれたテーマの設定から色を読み取り、装飾的な値を除外します。外部のスタイルシートにある設定や、Evidio が読み取らない形式で書かれた設定は見逃します。ウェイトは、フォントファイルに名前として記されている場合にのみ表示されます。画像やアプリのウィジェットによって、一覧にない色が加わることもあります。
このワークフローをさらに調べる。
よくある質問
色はどこから来ていますか。
Shopify のテーマがページに書き込む CSS 変数からです。これは、マーチャントがテーマエディターで選んだ設定を反映しています。Evidio はブランドカラーを残し、装飾的な色を除外します。
パレットはどこで見られますか。
拡張機能のツール（各色をコピーできます）と、Cloud ワークスペースのストアのページです。比較画面では、パレットが並べて表示されます。
ウェイトが表示されないフォントがあるのはなぜですか。
ウェイトは、ストアが読み込むフォントファイルの名前から読み取るためです。セルフホストのフォントやその他の形式では、名前にウェイトが含まれていないことがあります。
この機能はどのEvidioプランに含まれますか？
この基本機能は無料プランで利用できます。有料プランでは、必要に応じて上限の拡大や追加機能が提供されます。
次の Shopify ストアで Evidio が見つけるものを確かめましょう。
Evidio を Chrome に追加し、実際のストアを分析して、役立つシグナルをリサーチ用ワークスペースに残しましょう。