# アイコン ### PageFlyアイコン要素について 概要：[PageFly Icon Element](https://help.pagefly.io/manual/icon-element/) は、ランディングページにアイコンを追加してコンバージョン率を高めることができるように設計されています。アイコン要素は、ボタンのテキストとして、または見出し要素や区切り線要素などと組み合わせて使用できます。 詳細な手順に進む前に、以下のビデオをご覧ください。 {% embed url="" %} ### アイコン要素にアクセスする方法 * **ステップ1**: 要素リストアイコンをクリックして要素のリストを開きます * **ステップ2**: PageFlyの要素タブで、「**Icon**」をクリックして要素のセクションを開きます * **ステップ3**: 使用したい要素をページエディタにドラッグアンドドロップします ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f1b3a5a0ed11f24f4b4a6ef8f0639571bca95b21%2Faccess-icon-element.gif?alt=media) このアイコン要素には、ほとんどのニーズをカバーする複数のバリエーションが付属しています。しかし、時間を節約できるよう、今後さらにバリエーションを追加していきます。 バリエーションをレイアウトにドラッグして、どのように構成できるか確認してください。さらに、見出し、タブ/アコーディオン、リスト、コンテンツリストなど、異なる要素内にある既存のアイコンを見つけることもできます。 ### アイコン要素を設定する方法 アイコン要素には、コンテンツの外観を細かく調整して最高のコンバージョン率を達成できる多くのパラメータが付属しています。 レイアウト内の要素を選択すると、そのパラメータが表示されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdZcKMYaHq-AxQlE-atV9dGIoliE5TEHLVQSCob2sfNbW3QFf2aKdcuYqOMFtdMF3w5qKxtviTTAjDXOtSOpRNktjbvNh1QZslK_HuQ_SkarefVsHtDIAzAQzu2-bidnuRnamuYhv0RBt9F9yQf_gkey0CJFygam27pPDNttonM8hQ.png) 現在、PageFlyは独自のアイコンの追加をサポートしていません。この場合、[画像要素](https://help.pagefly.io/manual/image-element/)を使用してください。 #### 一般設定 **アイコン設定** * **Icon**: 「**Select icon**」ボタンをクリックして、表示するアイコンを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8af124459f1f417736537e0481df09e3d0fe5530%2FAD_4nXfatT_D_yI6GDoTIXQllgZ2LWh2k-tN6fWdwBH0fYByhpm-_fAQrJmiMgDRTA9psulk0Wh0IjhejdoTtFj6YRf4dR6YEEBdIwd-6Ay3TE1nNOz4Y0u9yzoga5GFcx48qb95c1XDYsafvK_tnRO6key0CJFygam27pPDNttonM8hQ.gif?alt=media) * **Size**: 表示されるアイコンのサイズを設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2fc2669319227649bfe073ac25ddf4492ee47f9a%2FAD_4nXduEg7N8mXxWIF0Khw1mS7EciB_bB5s1iULD1osZTCS17GHuMoTkUu0Oembvtt_I_Ejch50NBb3yU8NwzDG26Z-hguWuegtDaOx3UlyNEpk792gDKd8sq-RvT27OPIpFWqo12fkrx29cZ3dqh5lQwkey0CJFygam27pPDNttonM8hQ.gif?alt=media) * **Align self**: 表示されるアイコンの位置を調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1a814e8abc707db22d6006106092ffe34d8e4714%2FAD_4nXdsuTrkDkONicIiqgG2AIQWzvObpvrvA6tJuP5upnrbD-YMd2bW1EXNXVPjWO4sXPV9u8XXkYiNPr3zkePWLHxgsOw1-7ZZ-RY3NSvQve4sAy1fH3dO4tS_8aBouiC4ybSrF6QAdkkCipelNtpRkey0CJFygam27pPDNttonM8hQ.gif?alt=media) **アクション** ACTIONパラメータの詳細については、[こちら](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/)をご覧ください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9ac17d884ae66873f952f4643d17450cd62b6f14%2FAD_4nXd6qUnWy0eyNGt5z_WsVtSjw6I_GUISNglzlzKhWrL-LAUcKCjpb8GAabaUIlKfY5b2ubeSvzp8lI5LdTRLMqS8hkYDyXLn8c0gNN-LO8nEq4oQgkb6DOlcy0hekNlEQtEeH9A9bu6KV972zDlKPwkey0CJFygam27pPDNttonM8hQ.png?alt=media) #### スタイル設定 - グローバルスタイル お好みのアイコンスタイルの種類を設定するには、[グローバルスタイル](https://help.pagefly.io/manual/global-styling-feature/) ( ダッシュボード > 追加機能 > グローバルスタイル) に進んでください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-109027c2271d4754760ad518da38774d322d54bb%2Ficon-global-styles.png?alt=media) ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdQN5xAvugn1hv98wofOW708tpSYWTulc2YzTOhuMTmP8J_H8bVv29DJf15D-9uTJPd_4lay1skViL4fyj47SSdhi_gJ0Sli2y7mfXBpaGJT5XMzbAK43KSfxsQqYbT2SdQOuQl9cgAwoMqqdQoPAkey0CJFygam27pPDNttonM8hQ.png) [スタイルタブ](https://help.pagefly.io/manual/elements-style-settings/)についてさらに詳しい情報をご確認いただけます。 ### 使用例 #### アイコンの色を変更する方法 まず、「**Styling**」タブに移動し、Overallセクションまでスクロールします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-884fe636e7dd7dba122f2a2ae779db679ebd9bb3%2FAD_4nXfcgWeJ9URjrCW7HFMk-ka5hW5HHwUy-_ktWcygezfy6RYTdmK-EPPgXpHTrifuxm_BoMedOhHLnXX5EEQ2FFuHffvXFQrRxVbWaBz19Ds7V9BHv-i2rxsxaTCMLg3r8VT9zSQEjFUHUoSaAISykey0CJFygam27pPDNttonM8hQ.gif?alt=media) #### アイコンの背景色を変更する方法 「**Styling**」タブ > Backgroundセクションまでスクロールするだけで、アイコンの背景色を変更して目立たせることができます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5a17fa0ec1e6cca2988b5f940ac6e93f4de24619%2FAD_4nXdTDevIMMyfZdSZ2Bfz_DBKu9onpeaNNa556sUINVpi4S75cT0TsulDYHIzQU1c0AJMfkAjoxJiIBnvc6Dx6HyHJuHP-FXYDUNcB5wV5Mdoija74u3FNHst4oQDtMr7HqErmFMemlf9Stpfd6zTCQkey0CJFygam27pPDNttonM8hQ.gif?alt=media) ### アイコン使用のベストプラクティス * 普遍的に理解され、関連する概念を明確に表すアイコンを使用します。あいまいすぎるアイコンや難解なアイコンは避けてください * ウェブサイト全体でアイコンの一貫したスタイルを維持します。これにより、統一感のある視覚的アイデンティティとより洗練された外観が生まれます * アイコンが明確で理解しやすく、視覚的に魅力的であることを確認するために、さまざまなデバイスや異なるユーザーグループでテストしてください ### よくある質問 **1. アイコン要素とは？** PageFly Icon Elementは、コンバージョン率を高めるために、ランディングページにアイコンを追加するように設計されています。アイコン要素は、ボタンのテキストとして、見出し要素や区切り線要素と組み合わせて使用できます… **2. アイコン要素のグローバルスタイルはいくつありますか？** 選択できるアイコンスタイルの種類は6つあります。「Styling Tab」でアイコンスタイルを編集できます。 **3. もし希望に合うアイコンが見つからない場合、カスタムアイコンをアップロードできますか？** 現在、設定に合わせてカスタムアイコンをアップロードすることはサポートされていません。ただし、画像をアップロードするなどの別の方法を試すことができます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d72574769135915691fdab6fce0af12d57f17a30%2FAD_4nXfd1MaPPFBpXCwWWN9sBDdr2rxI82LwzgVKtXF-CbyfsWcJ54mr1tnaqh7-Ra6_MYi62siuacRbNhlHj4Vc81YajZMpWlLwBTGZrgKc6_K6OX3MpcMtW6EBHD0OMcRWvjxcCvwJQEezke1ElVJRhQkey0CJFygam27pPDNttonM8hQ.gif?alt=media) ### 参考資料 * [How to use Goat ‑ Trust Badges and Icons with PageFly](https://help.pagefly.io/manual/how-to-use-goat-%E2%80%91-trust-badges-and-icons-with-pagefly/)