![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2023/02/blog-CF2-3.jpg?resize=1024%2C576&ssl=1)
Clickfunnelsは、セールスファネル型サイトをノーコードで誰でも簡単に作成できるアメリカ発のウェブサイト作成ソフトウェアです。
アメリカ発のツールなので操作画面は英語ですが、作成するサイト上の言語を日本語にすれば、当然日本でも使えます。
今回は、そんなClickfunnelsのページで文字や画像を編集してサイトを自分で作成する方法について解説します。
ぜひClickfunnelsを使って機能的かつスタイリッシュなサイトを作ってみてくださいね。
そもそもClickfunnelsって何?という方は以下の記事もご覧ください。
解説動画はこちら
Clickfunnelsの編集画面と3つの構成パーツ
まずは、Clickfunnels上に表示されているテンプレートを選択し、EDIT PAGE(エディットページ:編集画面)をクリックしましょう。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-132342.jpg?resize=870%2C616&ssl=1)
EDIT PAGEをクリックするとページ編集画面が表示されます。
編集画面には
●SECTION(セクション)…カラムを構成する緑色の枠
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_013229000_iOS.png?resize=1024%2C609&ssl=1)
●ROW(ロウ)…カラムの設定する青色の枠
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_013245000_iOS.png?resize=1024%2C590&ssl=1)
●ELEMENTS(エレメンツ)…ROWを編集するオレンジ色の枠
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_013317000_iOS.png?resize=1024%2C583&ssl=1)
という3つの構成パーツがあります。
これらの構成パーツの分類を頭に入れておくとページ作成が行いやすくなるので、ぜひ覚えておいてください。
ページ背景の設定・編集方法
それでは、ページの背景の設定とその編集方法から解説します。
まず、画面上部にある
「SETTINGS(セッティング)」→「BACKGROUND(バックグラウンド)」
をクリックします。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_013429000_iOS.png?resize=1024%2C604&ssl=1)
すると、画面右横にBACKGROUNDの設定が表示されます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_013503000_iOS.png?resize=1024%2C518&ssl=1)
すぐ下のBG IMAGE(バッググラウンドイメージ)をクリックすれば、自分のお気に入りの写真などをアップロードして挿入することも可能です。
たとえば、私がアメリカに行った時の写真をアップロードしてみましょう。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_013514000_iOS.png?resize=1024%2C627&ssl=1)
画面右端にある緑色の「+ADD IMAGE(アッドイメージ)」をクリックすれば、背景が切り替わります。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_014044000_iOS.png?resize=1024%2C540&ssl=1)
(私の顔や体が文字に隠れて少し見にくいですがきちんと反映されました)
また、「IMAGE POSITION(イメージポジション)」という機能で画像の配置やリピートなども自在に調整できます(基本はフルセンターフィットで問題ないでしょう)。
その他にも、
●BG COLOR(バッググラウンドカラー)→背景の色を選択
●BG VIDEO(バッググラウンドビデオ)→YouTubeにアップした動画の貼り付け
などが行えます。
特に動画を貼り付けると、背景が動くちょっとかっこいいページを作ることができますよ。
ただし、背景に動画を設定するとページの読み込みが遅くなり、文章が見えにくくなってしまうので注意してください。
特に広告などページの読み込みが重要なサイトを作成する場合は使わないほうが良いでしょう。
SECTIONの操作方法
次に、カラムを構成するSECTION(緑の枠)の操作方法を解説します。
一番上(ヘッダー)のSECTIONを例に説明しましょう。
まず、ヘッダーにホバーする(マウスカーソルを重ねる)と、SECTIONの緑の枠が表示されます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_014841000_iOS.png?resize=1024%2C567&ssl=1)
枠内にある歯車のアイコンをクリックすると、画面右側にSETTINGS(設定画面)が表示されます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_015453000_iOS.png?resize=1024%2C555&ssl=1)
このSETTINGSから
●背景の色
●パディング(ボックスの外側の空白)のサイズ・幅・高さ
●写真の挿入・リピート
●STICKY(スティッキー)
などの設定が可能です。
特にSTICKYは、ネックが一番上(もしくは一番下)に常に固定された状態で表示できる便利な機能です。
長いページ下にスクロールしてもヘッダーやフッターにくっついたまま表示されるので、お知らせなどを固定したい場合に役立ちますよ。
また、設定の中には「ADVANCED(アドバンスド:上級設定)」という機能があります。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_015544000_iOS-2.png?resize=1024%2C555&ssl=1)
この中の「CORNER RADIUS(コーナーラディウス)」をクリックすると、SECTIONの四隅を丸くしたりボーダーを付けたりすることも可能です。
また、「ADVANCED CSS(アドバンスドCSS)」ではSECTION内のCSSを調整できるので、ウェブデザイナーの方やウェブデベロッパーの方など高度なテクニックをお持ちの方におすすめです。
ROWの操作方法
続いてROW(青の枠)の操作方法です。
SECTION同様、ROWもホバーすると青い枠が表示され、歯車のアイコンをクリックするとSETTINGSを表示できます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_015942000_iOS.png?resize=1024%2C555&ssl=1)
ROWのSETTINGSでは
●カラムの背景やテキストの色の設定
●マージン(ボックス内側の余白)の調整
●テキストの編集(太字・イタリック体・下線・打ち消し線・左寄せ・リンク)
などができます。
ELEMENTSの操作方法
ELEMENTS(オレンジの枠)の操作方法です。
ELEMENTSは、ROWの中に文章の入力やボタン・画像の挿入といった細かい編集ができます。
また、ドラッグアンドドロップで別のSECTIONへ移動できるほか、英語から日本語への変換やロゴの設定なども簡単に行えます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_020045000_iOS.png?resize=1024%2C536&ssl=1)
(ロゴの設定の例)
なお、ロゴやサブヘッドラインなど必要ないと思う要素があればELEMENTSの設定から簡単に削除できますし、後から追加もできます。
実際にページの文字や画像を編集してみよう!
それでは実際にページの文字や画像を編集してみましょう。
STEP1:文字を入力・編集する
まずは、サブヘッドラインとヘッドラインに文字を入力してみましょう。
ELEMENTSでそれぞれのROW内に文字を入力します。
●サブヘッドラインのROW→「オンラインで売り上げをアップしたい経営者の方は必見です!」
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_020420000_iOS.png?resize=1024%2C513&ssl=1)
●ヘッドラインのROW→「オンライン上での売り上げを倍増させる方法をお伝えします!」
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_020442000_iOS.png?resize=1024%2C526&ssl=1)
このようなコピーを入力すれば、どんな人を対象にしているのかを明示できますね。
次に、ヘッドラインの文字をBOLDで太字にしてみましょう。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_020451000_iOS.png?resize=1024%2C541&ssl=1)
これでさらに見栄えが良くなりました。
なお、太字の色を変えたい場合は、ELEMENTSの設定から変更可能です。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_020812000_iOS.png?resize=1024%2C494&ssl=1)
(ヘッドラインの太字の色を青→赤に変更)
また、強調したい単語だけを太字にして、それ以外の言葉は通常のテキストにすることもできます。
さらに、その下の英語を日本語に変換したい場合も、ELEMENTSの設定を開いて英語のテキスト部分に日本語を打ち込むだけで簡単に入力できます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_020814000_iOS.png?resize=1024%2C529&ssl=1)
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021208000_iOS-2.png?resize=1024%2C581&ssl=1)
STEP2:ボタンを編集する
次に、ボタンの編集です。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021402000_iOS-1.png?resize=1024%2C622&ssl=1)
ボタンの文言には、「BUTTON TEXT(ボタンテキスト)」と「SUB TEXT(サブテキスト)」の2種類があります。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021618000_iOS-2.png?resize=1024%2C596&ssl=1)
これらの文言は直接打ち込むのではなく、ボタンのSETTINGSを開いて入力します。
ボタン部分をクリックするとSETTINGSが画面右側に表示されます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021208000_iOS.png?resize=1024%2C535&ssl=1)
それぞれのボタンテキストに日本語で文言を入れると、画面のボタン部分も日本語に変換されます。
●BUTTON TEXT→「今すぐクリックして手に入れる!」
●SUB TEXT→「これは無料のサービスです。クレジットカード登録は必要ありません」
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021302000_iOS-1.png?resize=1024%2C536&ssl=1)
さらに、それぞれの文言のフォントサイズもSETTINGSで変更可能です。
STEP3:フッター部分を編集する
フッター部分には
●会社名
●ブランド名
●名前
●プライバシーポリシー
●特定商取引法
などを日本語で入力しましょう(年号は自動変換機能がないので掲載はおすすめしません)。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021402000_iOS.png?resize=1024%2C622&ssl=1)
中でもプライバシーポリシーは、ランディングページにとって非常に重要な項目です。
ROWの設定を使えば、プライバシーポリシーにリンクを付けて新しいタブでしっかりと明示できます。
まず、「プライバシーポリシー」の文字をマウスで選択するとROWの設定アイコンが表示されるのでリンクをクリックします。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_021618000_iOS-3.png?resize=1024%2C578&ssl=1)
そして、表示されたURL欄に公式サイトにあるプライバシーポリシーのURLをペーストし、斜め上矢印のアイコンをクリックすれば新しいウィンドウで開く設定できます。
特定商取引法や会社概要なども同じようにリンク設定をすることが可能です。
STEP4:画像を追加する
ページ内に画像を挿入したい場合は、ELEMENTSで簡単に行えます。
まず、「ELEMENTS」→「ADD ELEMENTS」をクリックして、画面右横に表示される「IMAGE」にカーソルを合わせ、追加したい箇所にドラッグします。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_022048000_iOS.png?resize=1024%2C547&ssl=1)
すると、「Demo Image(デモイメージ)」と書かれた枠が表示されます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_022058000_iOS.png?resize=1024%2C599&ssl=1)
ここに使いたい画像をアップロードします。
私ヒルトルの電子書籍「ザ・ファネル」の画像で試してみましょう。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_022153000_iOS.png?resize=1024%2C593&ssl=1)
電子書籍の画像がきちんとアップされました。
また、画像の高さや幅の調整もELEMENTSのSETTINGSから簡単にできます。
さらに、ADD ELEMENTSから「VIDEO(ビデオ)」という項目をクリックすれば、YouTubeやVimeo(ヴィメオ)などの動画もアップできます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/10/20221022_022234000_iOS.png?resize=1024%2C592&ssl=1)
動画の自動再生やブランディングオフなどの詳細な設定ができるほか、「THEMES(テーマ)」という項目を選べば、要素のテーマも選べるのでさらに見栄え良くできますよ。
Clickfunnelsで自分好みのビジネスサイトを作成しよう!
今回は、Clickfunnelsで文字や画像を編集する方法について解説しました。
Clickfunnelsには、SECTION・ROW・ELEMENTSという3つの構成パーツがあります。
これらのパーツを利用すれば、ページ内容を自由にカスタマイズして、自分好みの素敵なサイトを作成することが可能です。
「テンプレート使用」「0から作成」のどちらの場合でも、簡単かつ効率的に行えます。
ぜひ今回ご紹介した編集方法を参考にして、Clickfunnelsで売上アップにつながるセールスファネル型サイトを作成していきましょう!
次の記事はこちら
ClickFunnels1.0のアカウントを作成して14日間お試しに申し込む方法
現在クリックファネルの公式サイトからはClickfunnels2.0しか申し込むことができませんので、「クリックファネル1.0」に申し込むには、弊社のようなクリックファネル社のアフィリエイトパートナー経由でしか申し込めません。
以下の記事から値段やお申し込み方法をご確認の上、ぜひ導入を検討されてください↓
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2023/02/blogCF-affi-baner2.jpg?resize=1024%2C269&ssl=1)