成功
アイコンの使用
Align Shopifyテーマの対応するアイコンフィールドに、統一感のあるMaterial Symbolsまたは絵文字を追加します。
Alignの多くのコンテンツエリアには、テキストの横やボタン内に視覚的な手がかりを追加するアイコンフィールドがあります。Shopifyテーマエディターでは、これらのフィールドを見出し、本文コンテンツ、機能の強調、行動喚起などのエリアに使用できます。
Shopifyでセクションとブロックの設定が表示される場所の概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
各Alignアイコンフィールドには、Materialアイコンのスラッグまたは絵文字という1つの値を入力できます。テキストのみで表示する場合は、フィールドを空白のままにします。
アイコンスラッグを見つけて使用する
Section titled “アイコンスラッグを見つけて使用する”Alignストアフロント全体で一貫したアウトラインスタイルを使用する場合は、Materialアイコンのスラッグが適しています。利用可能なアイコンは、Material Symbolsライブラリで探せます。
- Material Symbolsを開きます。
- 必要なシンボルを検索します。
- 検索結果からアイコンを選択します。
local_shipping、verified、chevron_rightなどの小文字のスラッグをコピーします。- 該当するAlignのアイコン設定にスラッグを貼り付けます。
スペースとハイフンはアンダースコアと同様に扱われ、大文字と小文字は区別されません。ただし、Material Symbolsからスラッグを直接コピーする方法が最も確実です。
スラッグのスペルが間違っているか利用できない場合、アイコンが正しく表示されないことがあります。
代わりに絵文字を使用する
Section titled “代わりに絵文字を使用する”対応するAlignのアイコンフィールドには、絵文字を1つ貼り付けることもできます。コンテンツアイコン、ボタンアイコン、パンくずリストの区切り、その他の特殊なアイコン設定で使用できます。
絵文字を追加する
Section titled “絵文字を追加する”- 📦、✓、⭐などの絵文字を1つフィールドに貼り付けます。
- フレーズや複数のシンボルは入力しないでください。
- アイコンが不要な場合は、フィールドを空白のままにします。
適切なスタイルを選ぶ
Section titled “適切なスタイルを選ぶ”絵文字は、親しみやすい、カジュアルな、またはキャンペーン主導のメッセージに適しています。シンプルな信頼性やメリットを示す一文に個性を加えることもできます。
絵文字には、アウトラインのMaterialアイコンスタイルではなく、各絵文字固有のカラースタイルが使用されます。ローカルのIcon color設定は絵文字に対する効果が弱い場合があるため、同じページで名前付きアイコンと併用する際は慎重に使用してください。
コンテンツアイコンとボタンアイコン
Section titled “コンテンツアイコンとボタンアイコン”アイコン設定には、通常2つの役割のいずれかがあります。どちらも入力形式は同じですが、レイアウトの異なる部分に影響します。
コンテンツアイコン
Section titled “コンテンツアイコン”- 見出し、キャプション、機能を示す一文の横または周囲に表示されます。
- 主なアクションとして機能するのではなく、メッセージを補足します。
- エディターでは通常、Iconと表示されます。
ボタンアイコン
Section titled “ボタンアイコン”- ボタンまたはリンク形式のアクション内に表示されます。
- ボタンラベルを補強し、アイコンのみのレイアウトでは表示されるアクションそのものになります。
- エディターでは通常、Button iconと表示されます。
可能な限り、ボタンアイコンはテキストと組み合わせてください。アイコンは次に何が起こるかを補足するものであり、唯一の手がかりにしないでください。
アイコンを分かりやすく配置する
Section titled “アイコンを分かりやすく配置する”一部のコンテンツエリアにはIcon positionがあり、近くのテキストに対するアイコンの配置を調整できます。
- Topでは、アイコンがテキスト群の上に配置され、中央揃えやエディトリアル風のレイアウトに適しています。
- Bottomでは、アイコンがテキスト群の下に配置され、コピーを先に見せられます。
- Leftでは、横並びのレイアウトでアイコンがテキストの前に配置されます。
- Rightでは、アイコンがテキストの後に配置されるため、読者はコピーを先に目にします。
- Middleでは、アイコンが主な視覚的アンカーとして中央に配置されます。
横並びのレイアウトは、小さい画面では縦に積み重なることがあります。左、右、中央の配置を使用する場合は、モバイルでの表示を確認してください。
ボタンアイコンのレイアウトを設定する
Section titled “ボタンアイコンのレイアウトを設定する”ボタンがアイコンに対応している場合、Button layoutでアイコンとラベルを一緒に表示する方法を調整できます。
- Icon leftでは、アイコンがボタンテキストの前に配置されます。ラベル付きボタンで最も一般的なパターンです。
- Icon rightでは、アイコンがボタンテキストの後に配置されます。次へ進むことを示すアクションに適しています。
- Icon onlyでは、表示ラベルなしでアイコンが表示されます。
カラーとスタイルを調整する
Section titled “カラーとスタイルを調整する”デフォルトでは、アイコンはAlignのアイコンカラーを継承し、コンテナに合わせて拡大縮小されます。一部のエリアには、コントラストを強めたり、ブランドらしいアクセントを加えたりするためのローカルコントロールもあります。
- Icon colorでは、アイコン自体のカラーを変更します。
- Icon border colorは、アイコンが枠線付きの形状内に配置される場合に使用できます。
- Show icon borderは、一部の機能紹介スタイルのレイアウトで、バッジのようなアウトラインを表示するために使用できます。
ローカルでのカラー上書きに関する詳しいガイダンスについては、カラー設定を参照してください。
特殊なアイコンフィールドを使用する
Section titled “特殊なアイコンフィールドを使用する”ほとんどのAlignアイコンフィールドには、そのラベルが特定のレイアウト上の役割を示している場合でも、同じルールが適用されます。Materialスラッグまたは絵文字を貼り付けるか、アイコンを非表示にする場合はフィールドを空白のままにします。
- Separator iconは、山形やスラッシュ風のシンボルとして、パンくずリストの項目間に表示されます。
- Home iconは、パンくずリストにホームへのショートカットを表示します。
- Announcement iconは、お知らせバーのメッセージの横に小さなアクセントを追加します。
- Heading iconは、見出しの表示にインラインのアクセントを追加します。
- Draggable iconは、特定のインタラクティブコントロールで使用するハンドル形式のシンボルを設定します。
- Contact or feature iconsは、メールの詳細や機能の強調など、コンテンツブロックに個別のアクセントを追加します。
これらはマーチャントが選択するMaterialスラッグまたは絵文字であり、自動的に表示されるシステムアイコンではありません。
その他のアイコンタイプを把握する
Section titled “その他のアイコンタイプを把握する”自由入力のアイコンフィールドですべてのAlignのアイコン風要素を制御できるわけではありません。
- Social media iconsは、テーマ設定で構成されたソーシャルプロフィールURLを使用します。
- Payment iconsは、有効な決済方法を自動的に表示します。
- カート、アカウント、検索、メニューなどのNavigation utility iconsは、ヘッダーに組み込まれています。
配送情報の強調
Section titled “配送情報の強調”- Material Symbolsで
local_shippingを検索します。 - スラッグをコピーし、短い送料無料メッセージの横にあるIconフィールドに貼り付けます。
- または、より温かみのあるカジュアルなアクセントとして📦を使用します。
パンくずリストの区切り
Section titled “パンくずリストの区切り”- パンくずリストの項目間にコンパクトなアウトラインの区切りを表示するには、Separator iconを
chevron_rightに設定します。 - または、よりシンプルなテキスト風の区切りとして›または→を使用します。
使用上の注意
Section titled “使用上の注意”- スタイルを意図的に選択してください。 一貫性を重視する場合はMaterialスラッグを使用し、各絵文字固有のカラーや、より表現力のあるトーンがメッセージに合う場合は絵文字を使用します。
- ライブラリからスラッグをコピーしてください。 アイコン名を推測するのではなく、Material Symbolsで検索してスラッグを貼り付けます。
- 意図的にアイコンを非表示にしてください。 シンボルを追加しても意味が伝わりやすくならない場合は、フィールドを空白のままにします。
- 関連コンテンツに一貫性を持たせてください。 ページ全体でアウトラインのスラッグまたは絵文字を繰り返し使用し、表示に統一感を持たせます。
- コントラストとモバイルレイアウトを確認してください。 特にカスタムカラーや背景メディアを使用する場合は、明るい背景と暗い背景の両方でアイコンを確認し、小さい画面でも配置が正しく機能することを確認します。