今回お届けするノウハウはこちら
- 1. 基本的な操作方法とメニューの説明
- 1-1. なぜWordPressではなくSquarespaceなのか？
- 1-2. Squarespaceのお勧めテンプレートは Using My Headを参考にする
- 1-3. Squarespaceでテンプレートからサイトを制作する
- 1-4. 複数の人・アカウントでsquarespaceを管理するには権限の付与が必要
- 1-5. Squarespaceのクイックツアー（簡単なサイトの説明）
- 1-6. Squarespaceで作ったサイトはスマートフォーンではどう見えるのか確認する
- 1-7. Pagesについて – ナビゲーション
- 1-8. ページを削除する方法
- 1-9. 新しいページの種類と作成方法
- 1-10. レファレンスのReadmeは消さずにNOT LINKEDに置いておく
- 1-11. 新しくページを制作する
- 1-12. 僕がSquarespaceを好きな理由（セールスレターが簡単に作れる）
- 1-13. Squarespaceでページの順番を変更する方法
- 1-14. 各ページの setting（設定）について – バックグラウンドに写真やビデオを挿入する方法
- 1-15. SquarespaceのDESIGNの使い方
- 1-16. Logo&Titleについて
- 1-17. Templateについて
- 1-18. Style Editorについて
- 1-19. Checkout Pageについて
- 1-20. Lock Screenについて
- 1-21. Announcement Barについて
- 1-22. Mobile Information Barについて
- 1-23. Squarespace Badgeについて
- 1-24. CUSTOM CSS について
- 1-25. ADVENCEDについて
- 1-26. CommerceのOrdersについて
- 1-27. CommerceのInventoryについて（商品を追加する方法）
- 1-28. SquarespaceのAnalyticsについて
- 1-29. General Settingについて
- 1-30. Website Settingsについて Part1
- 1-31. Website Settingsについて Part2
- 1-32. Commerce Settingsについて
- 1-33. Helpについて
- 2. ホームページを設定する
- 3. 有料商品の一覧ページを作成する
- 3-1. 一覧ページにはお客さんに購入して欲しい順番で商品を並べる
- 3-2. BANNERに背景写真を挿入する方法
- 3-3. SquarespaceのPhoto Editorの使い方
- 3-4. 写真左寄せ、文章右寄せのページを作成する
- 3-5. iMacに埋め込んだ商品モックアップをKeynoteで作成する方法
- 3-6. 写真右寄せ、文章左寄せのページを作成する
- 3-7. Envato ElementsでモックアップテンプレートをダウンロードしPhotoshopで編集する方法
- 3-8. Photoshopで白背景を透明にする方法[マジック消しゴムツール]
- 3-9. Squarespaceでページを複製する方法
- 3-10. Photoshopでマグカップの商品モックアップを作る方法
- 3-11. Photoshopでマグカップの商品モックアップを作る方法その2
- 4. オプトインページを作成する
- 5. セールスページを作成する
- 6. 特定商取引法に基づく表記を作成する
- 7. 使用機材の一覧ページ（リソースページ）を作成する
1. 基本的な操作方法とメニューの説明
1-1. なぜWordPressではなくSquarespaceなのか？
僕は、WordPressを使っています。(このサイト自体、WorPressで運用しています。)でも、使い方が難しいので、初心者の方にはSquarespaceをお勧めします。Squarespaceだと簡単にカッコ良いサイトが作成できます。僕もセールスページを作るときに使っています。
では、早速サイトを作成していきましょう。まずは、www.squarespace.comから、「CREATE A SITE」をクリックします。すると、テンプレートを選ぶ画面に移動します。テンプレートは後で変更することができます。この時点では適当に選んでおきましょう。
1-2. Squarespaceのお勧めテンプレートは Using My Headを参考にする
テンプレートの選択に悩んでいる場合は、Using My Headさんの記事を参考にしてみてください。それぞれのテンプレートがどういった用途にお勧めなのか記載されています。
→https://www.usingmyhead.com/squarespace/squarespace-7-template-comparison-chart?rq=7
1-3. Squarespaceでテンプレートからサイトを制作する
「START WITH (テンプレート名)」をクリックします。僕の場合は、すでにアカウントを作っていて、ログインもしているので「START」をクリックするだけなんですけど、アカウントを作っていない場合はアカウント作成を、ログインしていない場合はログインを要求されます。
この後は、「SITE TITLE」と「SITE DESCRIPTION」の入力を要求されます。後で変更することも可能です。ここまで完了したら、テンプレート通りのサイトが出来上がります。
1-4. 複数の人・アカウントでsquarespaceを管理するには権限の付与が必要
例えば、僕とビジネスパートナーの両方がログインできるようにしたい場合は、権限を付与することができます。どんな権限があるのかは、Squarespace内で「Inviting a Contributor」と検索して確認してみてください。
ホームの「SETTINGS」から、「Permissions」、「INVITE CONTRIBUTOR」の順番にクリックしていきます。そして、権限を付与する人の名前やEメールアドレス入力し、与える権限を選択して「SAVE」します。
1-5. Squarespaceのクイックツアー（簡単なサイトの説明）
- 「PAGES」は、サイトを作成したり、ブログを作るのに使います。
- 「DESIGN」は、外観です。
- 「COMMERCE」は、ECサイトを作成する人が使います。デジタルコンテンツをここで販売するというのはあまり聞きません。TeachableとかThinkificなどにコンテンツを置いておいて、そこでそのまま決済してもらうか、あるいは決済は、SamCartやThiriveCartに代行させるパターンがあります
- 「ANALYTICS」は、分析です。どんなキーワードでこのサイトに来たのかとか、どの国出身なのかとかを調べることができます。もっと詳しく知りたい場合は、GoogleAnalyticsを導入しても良いですね。
- 「SETTINGS」は、先ほどやった「Permissions」などの設定を行う場所です。
- 「HELP」は、サポートです。わからないことを調べたり、問い合わせをすることができます。
右上のアカウントボタンから、「Profile」、「Account & Security」、「Notifications」、「Language」、「Help」、「Log out」があります。どれも簡単な単語が使われているので、大丈夫だと思います。「Notifications」ならメール通知の変更ですし、「Language」なら言語の変更ができます。でも、悲しいことに言語に日本語はありません。
1-6. Squarespaceで作ったサイトはスマートフォーンではどう見えるのか確認する
画面の上の真ん中付近にカーソルを合わせると、矢印が出て来ますので、これをクリックすると、サイトの表示方法を変更することができます。最近は、スマホでブログを見る人も増えて来ています。この前、GoogleAnalyticsを見ていたんですけど、アクセスのだいたい半分はスマホからでした。なので、スマホでも綺麗に表示されるサイトを作成する必要があります。
1-7. Pagesについて – ナビゲーション
ホームで「Pages」を選択すると、一番上に「MAIN NAVIGATION」が表示されます。これは、サイトの上の部分になります。上の画像ですと、「HOME」、「RESTAURANT」、「MENU」、「DRINKS」、「RESERVATIONS」、「README」の部分がそれになります。
「SECONDARY NAVIGATION」は、デフォルトでは空っぽになっているんですけど、追加するとサイトのフッター部分に表示されます。
「NOT LINKED」に関しては、「MAIN NAVIGATION」にも「SECONDARY NAVIGATION」にも現れて来ません。どういったときに使うのかというと、商品のURLとかセールスページを作成したときに使います。「MAIN NAVIGATION」に置いておくと、全員が見れるようになってしまうんですけど、「NOT LINKED」に置いておくことで、URLを知っているお客さんしか見れないようにすることができます。実は、この「NOT LINKED」は後々よく使います。
1-8. ページを削除する方法
ページを消したい場合は、各ページの上にカーソルを置くとゴミ箱のマークが出て来ますので、これをクリックして「CONFIRM」します。
ページを削除するのではなくて、コンテンツを削除したい場合は、ページをクリックして、消したいコンテンツの上にカーソルを置きます。すると、ゴミ箱マークが出てくるので、クリックして「YES」を選択すると削除することができます。
1-9. 新しいページの種類と作成方法
画面の「＋」をクリックすると10種類のページが出てきます。
- Page：これは最も基本的なもので、文章を書きたい場合や写真を載せたい場合に使います。
- Products：これは、商品を置くページです。
- Cover Page：これは、ナビゲーションバーがないページです。
- Folder：これは、ナビゲーションバーのドロップダウンに使います。
- Album：ここには音楽を追加することができます。テーマによっては、再生ボタンが用意してあって、それをクリックすると音楽が流れるというのもあります。
- Index：これは、複数のページを組み合わせて、1ページのワンカラムのページを作成する場合に使います。
- Blog：これはそのままで、ブログを書くときに使います。
- Events：これもそのままで、イベントがある場合に使います。
- Gallery：ここには展示するような感じで写真を載せるときに使います。
- Link：これはリンクを追加する際に使います。
1-10. レファレンスのReadmeは消さずにNOT LINKEDに置いておく
「Readme」は選択したテンプレートでどういったことができるのかが記載されているページです。取扱説明書みたいなものなので、削除せずに「NOT LINKED」に移動しておきましょう。
1-11. 新しくページを制作する
では、新しくページを作成していきましょう。ページは、「＋」から「Pages」を選択するんでしたよね。そしたら、基本的には「PAGE TITLE」を入力して「START EDITING」をクリックするとページが出来上がります。ページの編集が終わったら、必ず「SAVE」しておきましょう。
1-12. 僕がSquarespaceを好きな理由（セールスレターが簡単に作れる）
Squarespaceは1ページのペラページのようなものを作ることができます。しかも、ドラッグ&ドロップでメインナビゲーションやトップページに移動させることができるので、ホントにセールスレターを書くのが簡単です。
1-13. Squarespaceでページの順番を変更する方法
「Index」の中でページを移動させることはもちろん、「Index」そのものを移動することもできます。今回は、「MAIN NAVIGATION」を移動させました。これは、ホームページの一番上にあるものなんですが、「SECONDARY NAVIGATION」に持っていくことで、ページのフッター部分に移動させることができます。
1-14. 各ページの setting（設定）について – バックグラウンドに写真やビデオを挿入する方法
各ページの上にカーソルを置くと歯車のマークが出てきます。これは、設定です。「Basic」と「Media」、「Advanced」があります。「Basic」はそのページの基本情報(タイトルやURLなど)を記入します。「Media」では、画像を載せたり、動画を挿入することができます。「Advanced」は、あまり使わないんですけど、コードを入力することができます。
バックグラウンドに写真や動画を挿入する場合は、「Media」で設定します。「gettyimages」の写真を使おうとすると、購入しない限り、ウォーターマークが出てきてしまいます。なので、Envatoとかから画像を持ってきて突っ込むのが良いです。
写真は設定がほとんどないんですけど、動画は、「PLAYBACK SPEED」で速度、「FILTER」で色を変更することができます。また、ダウンロードした動画でなくても「VIDEO URL」でYouTubeやVimeoのURLを入力して、動画を表示させることもできます。
1-15. SquarespaceのDESIGNの使い方
「DESIGN」の中でもよく使う機能は以下の通りです。
- Logo & Title：これはブラウザに表示されるロゴ(ファビコン)のことです。
- Template：これはサイトのテンプレートです。
- Style Editor：ここでフォントのデザインを変更することができます。
- Checkout Page Style Editor：これは決済ページです。
- Announcement Bar：商品を販売した直後とかに、グローバルナビの上に出して宣伝する場合に使います。
1-16. Logo&Titleについて
「Logo & Title」では、「SITE TITLE」はサイトのタイトル、「TAG LINE」はキャッチコピーです。「LOGO IMAGE」はサイトタイトルの代わりに入れるサイトのロゴ画像で、「BROWSER ICON(FAVICON)」はブラウザに表示されるロゴです。(上の画像) Squarespaceならキューブのロゴがありますが、これが「BROWSER ICON」にあたります。最後の「SOCIAL SHARING LOGO(OPTIONAL)」は、SNSで拡散された時に、サムネイルがなかったらここで設定したものが表示されます。
1-17. Templateについて
「TEMPLATE」では、「INSTALL NEW TEMPLATE」から新しくインストールしたいテンプレートを持ってくることができます。でも、ここで別のテンプレートを選択してもまだ変更されません。インストールして、変更したいテンプレートの上のカーソルを置くと「Previewing」が表示されるので、これをクリックして、「Set as Live Template」をクリックすると変更することができます。
1-18. Style Editorについて
「Style Editor」では、フォントの大きさや色を変えることができます。単語しか書かれていないので、だいたいイメージできると思います。色を変更したい場合は、右にある丸ををクリックすると好きな色に変更できるようになります。もし、変更を取り消したい場合は、消したいものの上にカーソルを置くと左側に「×」が出てくるので、それをクリックすれば変更が取り消されます。ちなみに、HTMLの色を打ち込むことができます。
各「Font」の右側には、下矢印のマークがありますが、これをクリックすると上の画面が表示されます。ここで、フォントの大きさなどを変更することができます。
1-19. Checkout Pageについて
「Checkout Page Style Editor」は、Eコマースの機能になります。自分で商品を納品しなくてはいけないので、デジタル商品を扱っている方はここではなく、TeachableとかKajabi、Thinkificなどを使った方が良いです。
1-20. Lock Screenについて
「Lock Screen」は、URLを知っている方しか見れないページを設定することができます。なので、「Cover Page」と使い勝手が似ています。「CHANGE LAYOUT」で、このページのレイアウトを変更することができます。ページのヘッドラインやテキストを変更する場合は、「BRANDING & TEXT」を使います。「Text」を入れるのか「Logo」を入れるのか選択することができます。一番下にある「Display Lock Screen」を選択すると、画面の右上にカギのマークが表示されるようになります。
1-21. Announcement Barについて
「Announcement Bar」は、ページのトップに表示されるものです。新商品を宣伝する時などに使います。表示したい場合は「Enable Announcement Bar」を選択してから設定していきます。
1-22. Mobile Information Barについて
「Mobile Information Bar」は、HubSpotのリードインを使っている方ならイメージつくと思うんですけど、画面の右下とか真ん中とかに出てくるポップアップです。スマホだとしたから出てきますね。それに似たものです。デフォルトでは「Disable Mobile Info Bar」になっているので、使いたい場合は「Enable Mobile Info Bar(Light)」か「Enable Mobile Info Bar(Dark)」のいずれかを選択してください。そしたら、メールアドレスを追加したり、電話番号を追加する項目が出てくるので、お好きなように設定してみてください。
1-23. Squarespace Badgeについて
「Squarespace Badge」はあまり重要ではありません。これは、「僕はSquarespaceを使っていますよ。」というのをアピールするような機能で、Squarespaceのための広告みたいなものです。バッジを表示させる場合は、一番上の下矢印で「Enable Squarespace Badge」を選択するだけです。
1-24. CUSTOM CSS について
「Custom CSS」はほとんど使うことはないと思います。「デザインが崩れてしまうということがあるので、注意して使ってください。」というような警告がありますので、使用する際は注意して使ってくださいね。海外では「Squarespace CustomCSS Template」みたいに検索をかけるとテンプレートを販売しているサイトが見つかります。なので、サイトをアレンジしたい場合は、そこで購入して入力するのもありです。
1-25. ADVENCEDについて
Adobe CCに登録している場合は、TypekitのIDをここに入力すると、自由にフォントにアクセすることができるようになります。あとは、GoogleもTypekitを用意していますね。でも、もともとフォントの種類は多いので、使うことはあまりないと思います。「TEMPLATE SETTINGS」は、レスポンシブに対応するか非対応にするか選択できます。これも、デフォルトのままにしておきましょう。
1-26. CommerceのOrdersについて
「COMMERCE」は、何回もお伝えしていますが、デジタル商品を販売する場合はあまり使うことはないと思います。やはり、Teachable、Thinkific、Kajabiのいずれかを使うと良いです。デジタル商品ではなく、AmazonみたいなECサイトを作りたい場合は、この機能を使うと良いですね。それぞれの単語の意味は、以下の通りです。
- Orders：注文の管理
- Inventory：在庫管理
- Customers：顧客管理
- Discounts：クーポンの発行
1-27. CommerceのInventoryについて（商品を追加する方法）
Squarespaceで商品を販売する場合、商品の追加をしていきますよね。その方法は、2つあります。
まず1つ目は「Commerce」の「Inventory(在庫管理)」です。右上の「ADD PRODUCT」から商品を追加することができます。
2つ目は「PAGES」から「＋」をクリックして「Products」を選択して作成していく方法です。ページを追加できたら、そのページをクリックして遷移した画面で右上にある「＋」をクリックします。ここでは、「Physical(物販)」、「Digital(デジタル商品)」、「Service(サービス)」の選択肢がありますので、用途に応じて選んでください。そしたら、商品の画像や価格を入力する画面に変わりますので、1つ1つ入力していきましょう。
1-28. SquarespaceのAnalyticsについて
「ANALYTICS」では、GoogleAnalyticsのようにいろんな統計情報を確認することができます。
- Traffic Overview：ユニークビジター数、ビジター数、PV数
- Trafic Sources：どこからアクセスされているか
- Popular Content：どのコンテンツにアクセスが集まっているのか
- Geography：どこの国、都道府県から検索されているか
- Site Search Queries：サイト内の検索窓でどういったキーワードで検索されているか
- RSS Subscribers：どのくらいの人がRSSを購読してくれているか
- Search Engine Queries：どういうキーワードで検索されているか
- Activity Log：ビジターが過去7日間でアクセスしたページのURL
1-29. General Settingについて
まずは「SETTING」の「GENERAL」にある設定は以下の通りです。
- Business Information：会社の名前や住所、電話番号、営業時間などの入力
- Regional：住所の入力や言語の選択
- Permissions：権限の付与で使いますが、前にやったので飛ばします。
- Billing & Account：クレジットカード情報の変更やサイトの削除
1-30. Website Settingsについて Part1
まず、「Basic Information」では、「SITE TYPE」(ビジネス/コマース/非営利/個人)を選択したり、サイトのディスクリプションの記入ができます。また、一番下にある「PROMOTION」にチェックマークを入れておくと、Squarespaceの方で成功しているサイトとして特集してくれることがあります。
「Domains」では、「GET A DOMAIN」でドメインを購入することができます。ドメインを購入しないと、デフォルトでsquarespace.comが入ってしまうのでドメインが長くなってしまいますので、独自ドメインを購入しておきましょう。「USE A DOMAIN I OWN」ではサードパーティで購入したドメインを設定することができます。でも、こっちだとC NAMEの設定などが面倒です。どちらでも構いませんが、面倒な作業が嫌いな方は、Squarespaceで購入することをお勧めします。
その他「Email」ではGoogleのG suitと、「Connected Account」ではVimeoやDropbox、LinkedIn、YouTubeなどのアカウントと繋げることができます。
1-31. Website Settingsについて Part2
次に「Marketing」の説明をしていきます。
- 「Share Buttons」では、SNSの拡散ボタンの設置設定をすることができます。デフォルトでは、全てにチェックが入っているんですけど、いらないものはチェックを外してしまいましょう。
- 「Pin it Buttons」はPinterestの機能で、写真があったらPinを押すかどうか決めることができます。「Enable for Blogs」を選択すると、ブログにある写真にピンボタンが置かれます。ピンのデザインも四角や丸に変更することが可能です。
- 「Facebook Pages」は、Facebookのページと連携させたい場合に使います。
- Google Adwordsを使いたい場合は、「Google Adwords Credit」から設定していきましょう。
- 「Promotional Pop-Up」では、ポップアップの表示設定ができるんですけど、すべてのページに同じポップアップが表示されてしまうので、あまり意味がないです。別のツールを使って、適切な記事に適切なオファーを投げるように設定することをお勧めしま。
- 「SEO」は、文字どおりSEOのセッティングなんですけど、良いコンテンツを作成していくことが重要なのであまり必要はありません。
- 「Blogging」は、ブログの設定です。一番上にある「POST URL FORMAT」はWordPressでいう、パーマリンクです。ほかにも、コメントの設定などもすることができます。
- 「Security & SSL」は、デフォルトのままでOKです。あと必要であれば、一番下にある「Disable Site-Wide Password」からサイト全体にパスワードもかけることができます。
- 「Advanced」は、DeadlineFunnelとかのコードを入力する以外は使うことはないと思います。
1-32. Commerce Settingsについて
- 「Payments」では、StripeとかPayPalと連携してお金を受け取ることができます。でも、サイトの通貨の選択肢に日本円がないので、SamCartなどを使った方が良いですね。
- 「Checkout」は決済完了ページの設定です。ニュースレターに購入者メルマガとか送りたい場合は、MailChimpとかConvertKit連携することができます。ただし、この機能はCommerce機能を使った場合にのみ使えます。
- 「Customer Accounts」に関しては、Learn Moreでよく確認しておいてください。お客さんがアカウントを作る方法とか送料に関する情報がわかります。
- 「Notifications」は通知のことで、カスタマーサポートのメールアドレスとか、お客さんからメールを受け取る時のメールアドレスを設定することができます。
- 「Shipping」は送料のことですね。「ADD SHIPPING OPTION」から送料の選択(一律なのか、従量なのか)ができます。
- 「Taxes」は税金のことで、「ADD COUNTRY」から国を選択して、何%請求するのか、価格に含めるのかどうかを選択します。
- 「Accounting」は、Xeroと連携することで使えるものなんですけど、使うことはありません。
- 「Donations」は寄付です。たまにWikipediaでやっているやつですね。あまり日本人には馴染みがないので、ほぼ関係のない機能です。
1-33. Helpについて
Squarespaceに関してわからないことがあれば、「Help」で検索をかけてみてください。
もし検索しても解決できない場合は、「Contact」からチャットで(英語で)聞くこともできます。
2. ホームページを設定する
2-1. ホームページとは？
ホームページというのは、ブログのイメージが強いですが、僕たちの場合は一番アクセスを集めたいページを表示させます。なので、オプトインページだったり、商品の紹介ページを表示させます。
2-2. カバーページを設定する方法
「NOT LINKED」から「Cover Page」を追加していきます。
次に「Conver Page」の設定をしていきます。「BRANDING & TEXT」では、「Cover Page」のテキストを変更できます。上に画像には、対応するテキストを載せておきましたが、テンプレートのテキストを確認すれば、どこの位置にどのテキストが入るのか理解できると思います。
「MEDIA」では、背景の画像、もしくはビデオを挿入することができます。
「ACTION」は、上の画像でいうと、「GET NOTIFIED」です。つまり、ボタンの設定になります。「GET NOTIFIED」の文言やURLを変更することができます。また、もう一つボタンを追加することができます。でも、アクセスが分散してしまうので、あまりお勧めしません。
「SOCIAL ICONS」は、ページの下部にSNSのボタンを設置するかどうかという設定になります。これも、アクセスを分散させたくないので僕は表示させません。
「STYLE」では、フォントのサイズや色などを変更することができます。
ここまでで、「Cover Page」は完成です。あとは、ホームページに設定するだけです。それは、作成した「Cover Page」の歯車の部分をクリックして、「SET AS HOMEPAGE」を選択するとトップに表示されるようになります。
3. 有料商品の一覧ページを作成する
3-1. 一覧ページにはお客さんに購入して欲しい順番で商品を並べる
多くのサイトでは、複数の商品がある場合購入して欲しい順番を記載していません。それだと、お客さんは迷ってしまうので購入してくれなくなってしまいます。なので、商品の一覧ページでは、お客さんに学んで欲しい順番を明確にしておきましょう。例えば、Step1、Step2みたいな感じです。
また、各商品の下にはリンクを埋め込んだボタンを設置しておきます。リンク先のページはオプトインページの時もあれば、セールスページの時もあります。商品の値段が安い場合は、直接セールスページに飛ばしますが、値段が高いと購入してくれる確率が下がるので、メールコースなどで教育してから販売していきます。
3-2. BANNERに背景写真を挿入する方法
ページの背景画像を挿入する場合は、作成したページので「BANNER」を選択します。そしたら、「Media」の「IMAGE」で写真をアップロードします。
3-3. SquarespaceのPhoto Editorの使い方
写真を挿入したけど、編集したいなという場合は、「BANNER」から「EDIT」を選択します。
すると、上の画像のように「Photo Editor」が開きます。用途に応じて、ツールを使っていきましょう。
3-4. 写真左寄せ、文章右寄せのページを作成する
通常通り、ページを追加したら右上の+(プラス)ボタンをクリックし、「Image」を選択します。そのままだと写真が真ん中にきてしまうので、左に寄せたい場合は、写真をドラッグして左に持っていきます。左に挿入できる場合は、左端に黒い線が出ますので、それを確認したら写真をドロップします。すると、写真が左側、テキストが右側になります。
3-5. iMacに埋め込んだ商品モックアップをKeynoteで作成する方法
商品のモックアップを作成する方法は、2つあります。1つ目は、Keynoteのテンプレートを使う。2つ目は、Photoshopのテンプレートを使う。簡単なのは、Keynoteの方です。それで、そのテンプレートはどこで入手できるかということですが、僕はEnvatoelementsを使っています。
Keynoteで作成する場合は、フィルターを「Presentation Templates」にしてから検索をかけましょう。
ダウンロードしたファイルを開いて、モックアップを探していきます。今回は、iMacのテンプレートをダウンロードしたので、上のようなiMacのモックアップが見つかりました。そして、画面の灰色の部分に画像を挿入していきます。
最後に、「フォーマット」の「背景」で「塗りつぶしなし」を選択しましょう。こうすることで、PNGで書き出す際に、黒くなった部分が透明になって書き出されます。
3-6. 写真右寄せ、文章左寄せのページを作成する
これは、3-4でご説明したやり方の逆をやればOKです。
3-7. Envato ElementsでモックアップテンプレートをダウンロードしPhotoshopで編集する方法
今回は、Photoshopでモックアップを作成していきます。Envatoelementsで何かのワード(例：imac)+mockupで検索をかけてみてください。
ダウンロードできましたら、PSDファイル(Photoshopのファイル)を開きます。今回の場合は「PUT YOUR DESIGN HERE」とあったので、ここをダブルクリックして画像を挿入していきます。もしその表示がない場合は、目のマークを消して、探してみてください。そしたら、右下のアイコンから新規でレイヤーを出して、画像を追加します。追加の仕方は、ウィンドウの「ファイル」で「埋め込みを配置…」を選択します。それで、挿入する画像を選びます。ちなみに、画像の大きさを比率を変えないで変更したい場合は、Shiftを押したまま拡大/縮小させます。
3-8. Photoshopで白背景を透明にする方法[マジック消しゴムツール]
作成したモックアップの背景を透明にしたい場合は、消しゴムツールの中の「マジック消しゴムツール」を使います。それで、背景部分を選択するんですけど、注意点が一つあります。画面左上にある、「許容値」を確認してください。デフォルトだと、ここの値が30とかになっていると思います。それだと、背景だけでなく、他の場所も消してしまうのでここの値は「1」にしておきましょう。それで、背景部分をクリックします。すると、背景がドット柄になりますので、そうなりましたら背景が透明になった証拠です。最後に、ウィンドウの「ファイル」から「書き出し」で「PNGとしてクイック書き出し」を選択して、書き出します。
3-9. Squarespaceでページを複製する方法
ページを複製したい場合は、複製したいページの歯車のアイコンをクリックし「DUPLICATE PAGE」を選択します。すると、ページが複製されます。ただ、複製されたページは「NOT LINKED」に追加されているので、追加したい場所に移動させることをお忘れなく。
3-10. Photoshopでマグカップの商品モックアップを作る方法
今回のモックアップは、マグカップのテンプレートを用意しました。まずは、ファイルを開いて、変更できる部分を探します。3-7では「PUT YOUR DESIGN HERE」でしたが、今回は「PUT DESIGN HERE」と記載してありました。テンプレートによって文言が異なりますので、ご自身でそれらしいものを探してみてください。今回は、写真を挿入するのではなく、文字を入力していきます。元々のデザインの文字を変更することはできないので、長方形ツールで背景と同じ色の長方形を作成し、その上にテキストを追加していきます。入れたい文字や画像などの配置が終わったら、Command+Sでセーブします。それで、元のタブに移動し(通常は一番左のタブ)、変更が適用されているか確認しましょう。
もし余白が多い場合は、ウィンドウの「イメージ」から「トリミング」を選択して、デフォルトのまま「OK」をクリックします。すると、余分な部分が削除されます。あとは、書き出すだけです。
3-11. Photoshopでマグカップの商品モックアップを作る方法その2
ここまでで、モックアップの作成方法は結構理解していただけたと思います。今回は、「＋」の文字を自作しました。その方法をご説明します。まずは、長方形ツールで長方形を作成します。それを、右クリックで「レイヤーを複製…」を選択します。すると、先ほど作成した長方形の上に重なってもう一つの長方形が複製されます。そしたら、回転させたい長方形を右クリックして「パスを自由変形」を選択し、回転させます。2つの長方形をセットで移動させたい場合は、2つのレイヤーをShiftを押しながら選択し、右クリックで「レイヤーからのグループ…」を選択します。すると、移動できるようになります。
4. オプトインページを作成する
4-1. Squarespaceでオプトインページを作る方法
オプトインページは、LP(ランディングページ)やスクイーズページと言われることもあります。どれも意味は同じで、Eメールアドレスを集めるページのことです。無料のコンテンツを渡す代わりに、Eメールアドレスを登録してもらいます。
4-2. SquarespaceのINDEX機能を使う
オプトインページなどのページを作成する場合は、まず、「INDEX」を追加します。「+」から、「INDEX」を選択します。用途に応じて、「MAIN NAVIGATION」にするのか「SECONDARY NAVIGATION」にするのか、それとも「NOT LINKED」にするのかを決めてくださいね。
4-3. オプトインページのヘッドラインを作成する
「INDEX」を追加したら、コンテンツを追加していきます。まずは、ページのヘッドラインですね。「INDEX」の下にある「+ Add Section」からページを追加します。そしたら、適切な名前をつけ、「SAVE」しておきます。
追加したページの上部にカーソルを持っていくと、「(ページ名)」、「EDIT」、「BANNER」、「SETTINGS」の4つが表示されます。「EDIT」は追加したページの編集、「BANNER」はバナー(写真)の追加、「SETTINGS」は細かい設定を行うことができます。
4-4. Spacerで文章の位置を自由自在に操る
挿入した文章の幅を調整したい場合は「Spacer」を使います。「+」ボタンから「Spacer」をドラッグ&ドロップで追加します。「Spacer」の幅もドラッグしながら帰ることができます。
4-5. 画像の上に文字を配置する方法（Overlay）
画像の上に文字を追加したい場合は、「IMAGE」の「DESIGN」で設定していきます。デザインは6つありますが、画像の上に文字を追加したい場合は「Inline」を選択し、ドロップダウンメニューから「Caption Overlay」を選びます。
4-6. フォトショップで商品のモックアップ画像を作る
今回は本のモックアップを作成していきます。今までのものは、長方形ツールを使って文字を消して、その上に自分で文字を追加するタイプでしたが、今回は文字を変更するだけで良いタイプでした。テキストレイヤー(「Book mockup」というレイヤー)を選択して、文字を変更します。文字の変更が完了したら、Command+Sでセーブして、PNGで書き出します。
ここで作成したモックアップを4-5で追加した画像セクションに挿入します。それで、文章を記入して完成したものが上の画像になります。
4-7. ConvertKitのフォームをSquarespaceに設置する方法
ConvertKitのフォームをSquarespaceに載せる場合は、まず、ConvertKitのダッシュボードで「Form」にタブを切り替えます。そして、追加したいフォームを選択します。(まだ、フォームを作成していない場合は作っておきましょう。) 選択したら、「SETTINGS」で「Embed」をクリックします。そうすると、「JAVASCRIPT」と「RAW HTML」、「WORDPRESS」のオプションが出てきます。そのうち、「RAW HTML」を選択し、コードをコピーします。それを、フォームを追加したい箇所にペーストすると、フォームが完成です。※ログイン画面ではフォームが見れませんが、ログアウトすれば見れるようになりますので安心してください。
4-8. 左と右にブレットテキスト（インデントされた文字）を並べる方法
文章を2段落にしたい場合は、もう一つ右か左に「Text」を追加します。この時、注意があって、四角い箱が出ていることを確認し、それから「Text」をドロップしてみてください。そうするとうまくいきます。
4-9. フォトショップで丸くマスキングする方法
写真や画像を丸くマスキングしたい場合は、まず楕円形ツールで円を描きます。Shiftを押しながらだと、綺麗な丸を描くことができます。次に、背景をレイヤーに変更します。背景を選択して、右クリックで「背景からレイヤーへ…」を選択します。そして、楕円形をレイヤーの下に持ってきます。そしたら、メニューバーの「レイヤー」から「クリッピングマスクを作成」を選択します。すると、楕円形ツールで作成した丸の通りに写真がマスキングされます。最後に、メニューバーの「イメージ」から「トリミング」をして完成です。
4-10. Squarespaceにメルマガのフォームを設置する方法
最後に、4-7同様、ConvertKitのメルマガフォームを追加してオプトインページは完成です。
5. セールスページを作成する
5-1. セールスページを作りTeachableでオンラインコースを販売する方法
僕は、海外のマーケティングツールを紹介しているので、いろんなオンラインコースを販売できるプラットフォームを使用しています。その中でも、Teachebleはつがいがってが良いので、非常にオススメです。今回は、セールスページにある購入ボタンにTeachableの決済リンクを挿入していきます。
5-2. 商品が欲しくなってしまう豪華なモックアップを作る方法
今回は、iMacの画面に画像を埋め込むだけのモックアップではなく、それにプラスしてさらにキーノートで作成したワークブックの画像ファイルも追加した豪華なモックアップを作成していきます。
まずは、Keynoteで作成したワークブックをイメージで書き出していきます。メニューバーの「書き出す」から「イメージ」を選択します。デフォルトでは、スライドの「すべて」にチェックがついているので、範囲を指定するために、「開始」を選択します。それで、書き出したい部分を指定します。フォーマットは、「JPEG」でOKです。
Photoshopに戻って、5-3で作成したiMacのモックアップ再利用します。メニューバーの「イメージ」から「カンバスサイズ」を選択します。先ほどは、iMacのモックアップを小さくしたので、「変更後のファイルサイズ」にある「幅」を大きく設定します。今回は、このモックアップの右側に先ほど作成したKeynoteのJPEGファイルを追加したいので、「基準位置」を左に設定します。そしたら、メニューバーの「埋め込みを配置」でファイルを追加していきます。ファイルの配置が完了したら、最後にファイルをPNGとして書き出して終了です。
5-3. Teachableで決済リンクを発行する方法
Teachableで決済リンクを発行するために、まず、オンラインコースを運営しているアカウントのダッシュボードからコースを選択します。そこで、左側にあるタブから「Pricing」を選びます。次の画面で「New Pricing Plan」をクリックすると、「Free(無料)」、「Subscription(月額課金)」、「One-Time Purchase(一括決済)」、「Payment Plan(分割決済)」の4つの選択肢が出てきますので、1つを選んで、フォームを埋めて、最後に「Add Pricing」をクリックします。そうすると、下に支払い方法が追加されます。そこの「PURCHASE URL」を「Copy」して、それをSquarespaceで作成したボタンに埋め込めば完了です。
6. 特定商取引法に基づく表記を作成する
6-1. 特商法の表記がないと後で確実に問題になります（行政指導の場合も）
特定商取引法の表記は必ず作成して、わかりやすい位置に置いておくことをお勧めします。メインナビゲーションに置いておく人はほとんどいないんですけど、今回はその位置に置いておきました。特商法には、以下の内容を記載しておけばOKです。
- 販売業者の正式名称
- 所在地
- 電話番号
- メールアドレス
- 運営統括責任者
- 商品代金以外の必要料金
- 返金・交換の方法
- 役務対価
- 引き渡し時期
- 支払い方法
- 支払い時期
- 販売価格
7. 使用機材の一覧ページ（リソースページ）を作成する
7-1. なぜサイトに使用機材の一覧ページが必要なのか？
使用機材の一覧ページは一言で言うと、アフィリエイトページです。でも、それ以上の意味があります。商品を購入してくれる人からもそうでない人からも、「これはどの機材を使用しているのですか？」と言うような質問がきます。その度に、一人一人に対応するのは面倒なので、このように使用機材の一覧ページを作成しておいて、
7-2. 使用機材の一覧ページを作る方法
今まで、ページを作成する場合は「Index」を使用していましたが、使用機材の一覧ページは1ページ内に全て収まりますので「Page」で作成していきます。適宜、アフィリエイトリンクを埋め込んで行ってください。
