<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ツールセット | 長嶋雄二公式サイト</title>
	<atom:link href="https://ynagashima.com/category/toolset/feed/" rel="self" type="application/rss+xml" />
	<link>https://ynagashima.com</link>
	<description>セールスライター/マーケターとして活躍したい人のための情報サイト</description>
	<lastBuildDate>Sat, 28 Nov 2020 08:56:51 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://ynagashima.com/wp-content/uploads/2021/10/cropped-logo-1-32x32.png</url>
	<title>ツールセット | 長嶋雄二公式サイト</title>
	<link>https://ynagashima.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/><atom:link rel="hub" href="https://websubhub.com/hub"/>	<item>
		<title>PayPal「ビジネスアカウント」開設方法＆使い方 for 個人起業家 【動画レクチャー】</title>
		<link>https://ynagashima.com/paypal-business-account/</link>
					<comments>https://ynagashima.com/paypal-business-account/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Tue, 05 Nov 2019 02:53:52 +0000</pubDate>
				<category><![CDATA[仕事術]]></category>
		<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[独立起業]]></category>
		<category><![CDATA[PayPal]]></category>
		<category><![CDATA[パソコンスキル]]></category>
		<guid isPermaLink="false">https://ynagashima.com/?p=10931</guid>

					<description><![CDATA[決済システムとして非常に便利なPayPal（ペイパル）のビジネスアカウントを開設する方法を動画中心でお伝えします。 PayPal（ペイパル）は、あなたが商品・サービスを販売した際に、売上を獲得するための手段としてとっても [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="dropcap"><strong>決済システムとして非常に便利なPayPal（ペイパル）</strong>のビジネスアカウントを開設する方法を動画中心でお伝えします。</p>



<p>PayPal（ペイパル）は、あなたが商品・サービスを販売した際に、売上を獲得するための手段としてとってもオススメです。起業家として本気で稼いでいきたいなら、必ず１つはビジネスアカウント作っておきましょう。</p>



<h2 class="wp-block-heading">Paypal（ペイパル）とは？</h2>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>PayPalは『カード決済システム』として個人起業家の活動に、とっても役立つ機能です。</p><p>ペイパルは世界2億5000万人以上、<br> 1800万以上の店舗で利用できる安全な決済サービス。</p><p>カードや銀行口座を登録しておけば、<br> IDとパスワードだけでオンラインショッピングが可能。</p><p>さらに、銀行口座の口座振替設定をすれば、<br>友達や家族とお金のやり取りができる。</p><p>スマホひとつでお金の可能性が広がる<br> ウォレットサービスです。</p><cite>引用元：<a href="https://www.paypal.com/jp/webapps/mpp/personal">https://www.paypal.com/jp/webapps/mpp/personal</a></cite></blockquote>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Paypalでビジネスアカウントを作ろう！ (1:25)</h3>



<p>Paypalは新規登録は無料。年会費も無料で利用できます。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Step1_paypalアカウントを作ろう！" width="1140" height="641" src="https://www.youtube.com/embed/XoZ3tddLPvc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div class="wp-block-atomic-blocks-ab-button ab-block-button"><a href="https://www.paypal.com/jp/webapps/mpp/merchant" target="_blank" rel="noopener noreferrer" class="ab-button ab-button-shape-rounded ab-button-size-medium" style="color:#ffffff;background-color:#0070ba">PayPal（ペイパル）無理ビジネスアカウント開設ページ</a></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#fdf8f7" class="has-background">PayPal個人カウントとビジネスアカウントの違い</p>



<ul class="wp-block-list"><li>PayPalビジネスアカウントなら10万円以上の送金を受け取れる(個人アカウントでも本人確認または口座振替が済めば、10万円以上の送金を受け取れるようになります)</li><li>PayPalアカウントを持っていない人からでも支払いを受け取れる（月額3,000円のウェブペイメントプラス機能）</li><li> 取引履歴や売り上げの管理・データのダウンロードができる</li><li> WEBサイトがなくてもリンクやメールを使って決済を導入できる</li><li> 外貨での受け取りなど、海外通過にも対しても便利な機能を使える</li></ul>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Paypalビジネスアカウントの開設</h2>



<p>PayPalでビジネスアカウント開設する方法を動画解説していきます。</p>



<p>Paypalは売上獲得に欠かせないシステムになるので、必ず利用できるようにしておきましょう。</p>



<p style="background-color:#f6f8fd" class="has-background">個人起業するときに忘れてはいけないのが、売上を受け取る方法をちゃんと確立しておくこと。<br><br>例えばあなたがコンサルタントとして起業するなら、個別コンサルティングやセミナーを販売することがあると思います。<br><br>コンサルティング費用やセミナー費用を受け取る方法としてPayPal（ペイパル）がとっても便利。<br><br>お客様としても、インターネット上で支払いを済ますことができるのは、手間が減って嬉しいものです。<br><br>『銀行振込』に加えて、『カード決済』もできるPayPal（ペイパル）を準備しておきましょう。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">Step2.ビジネスアカウント開設 (4:34)</h3>



<p>ビジネスアカウントの開設方法です。動画レクチャーに沿って作業を進めてみてください。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Step2_ビジネスアカウント開設" width="1140" height="641" src="https://www.youtube.com/embed/-d9IGCuYxh4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#fdf8f7" class="has-background">当然ですが、ここで入力する個人情報はウソ情報ではなく、リアルな情報を入力してください。そうしないと本人確認でつまづく可能性があります。<br><br>ビジネスとしてもウソ情報を入力している人は信頼しづらいですよね。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">アカウント開設【メールアドレスの確認】 (1:28)</h3>



<p>アカウントを開設したら、登録したメールアドレスの確認作業をしておきましょう。今後PayPal（ペイパル）経由で売上を受け取るためにも大事な作業なので、忘れないでくださいね。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Step3_メールアドレス確認" width="1140" height="641" src="https://www.youtube.com/embed/bzXXEP3QUQQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading"> アカウント開設【本人確認】 (3:57)</h3>



<p>メールアドレスの確認作業同様に、本人確認の作業も重要です。PayPal（ペイパル）を利用するために欠かせないところなので、しっかり行っておきましょう。</p>



<p>ここでは、銀行口座を使った本人確認の方法を解説しています。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step4_本人確認" width="1140" height="641" src="https://www.youtube.com/embed/rkRtI74zmgA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">ビジネスアカウント開設の最後に (0:56)</h3>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step5_ビジネスアカウント開設の最後に" width="1140" height="641" src="https://www.youtube.com/embed/-6CVs-Er5UI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>必要な初期設定が完了したら、PayPal（ペイパル）の管理画面をブックマークしておき、いつでもアクセスできるようにしておきましょう。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">売上を受け取るための「決済リンク」を作ろう！</h2>



<p>あなたの商品・サービスを販売して売上を獲得するためには、<strong>決済リンク</strong>を作る必要があります。</p>



<ol class="wp-block-list"><li>一回限りの購入（ワンタイム購入）</li><li>毎月定額の購入</li><li>初月お試し＋２ヶ月目以降は毎月定額</li></ol>



<p>この３つの決済リンクの作り方を順に解説しています。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">決済リンク発行【ワンタイム購入】 (4:09)</h3>



<p>基本的な決済リンクの作り方を解説しています。</p>



<p>例えば、参加費１回3,000円のセミナーを売りたいときは、この方法で決済リンクを作成してください。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step6_paypal決済リンク発行" width="1140" height="641" src="https://www.youtube.com/embed/YF2gbBCmZ60?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">決済リンク発行【毎月定額の購入】 (2:55)</h3>



<p>毎月定額の支払いをお客様から受け取るための決済リンクの作り方です。</p>



<p>オンラインサロンや月額ニュースレターなど、サブスクリプション型のビジネスを実践するときは、この方法で決済リンクを作成しましょう。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step7_ 毎月の定期購読" width="1140" height="641" src="https://www.youtube.com/embed/KHidaYPo1J4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">初回限定をオファーを作る方法 (2:45)</h3>



<p style="background-color:#fdf8f7" class="has-background">初月は無料！２ヶ月目からは5000円！</p>



<p>このような<a href="https://ynagashima.com/offer-99/">オファー</a>で決済リンクをPayPal（ペイパル）で作るための方法を開設しています。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step8_初月オファーの作り方" width="1140" height="641" src="https://www.youtube.com/embed/sTSGpih47Ic?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">PayPalの決済手数料について</h3>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1000" height="817" src="https://ynagashima.com/wp-content/uploads/2019/11/paypal-seller-fees.png" alt="paypal決済手数料" class="wp-image-10972" srcset="https://ynagashima.com/wp-content/uploads/2019/11/paypal-seller-fees.png 1000w, https://ynagashima.com/wp-content/uploads/2019/11/paypal-seller-fees-300x245.png 300w, https://ynagashima.com/wp-content/uploads/2019/11/paypal-seller-fees-768x627.png 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /><figcaption>画像出典元：<a href="https://www.paypal.com/jp/webapps/mpp/merchant/paypal-seller-fees" target="_blank" rel="noreferrer noopener" aria-label=" (新しいタブで開く)">hhttps://www.paypal.com/jp/webapps/mpp/merchant/paypal-seller-feesttps://www.paypal.com/jp/webapps/mpp/merchant/paypal-seller-fees</a></figcaption></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>PayPalでは支払いを受け取る際に手数料がかかります。<br><br>あなたの商品が売れたきに、PayPalに手数料を払う必要があるので売上の全額を受け取れることはできません（値段を決める上でも参考にしてください）。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading"> 決済画面【お客様からの見え方】 (1:57)</h3>



<p>お客様があなたのPayPal（ペイパル）決済システムを利用した時、どんな手順で支払いすることになるのか？</p>



<p>しっかりチェックしておき、支払いステップで悩んだお客様をフォローできるようにしておきましょう。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step9  お客様からの見え方" width="1140" height="641" src="https://www.youtube.com/embed/4CFsOUm2IXQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Paypalを銀行口座に出金する方法 (1:07)</h2>



<p>PayPal（ペイパル）で受け取った売上をあなたの銀行口座に移動させる方法を解説しています。</p>



<p>動画ではパソコンでの出金方法を解説していますが、<a href="https://www.paypal.com/jp/webapps/mpp/personal/pay-with-app" target="_blank" rel="noreferrer noopener" aria-label="PayPalアプリ (新しいタブで開く)">PayPalアプリ</a>を使えばスマホからでも出金することが可能です。</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Step10_PayPalの出金" width="1140" height="641" src="https://www.youtube.com/embed/BVaMMCkoKvY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>銀行口座に出金する際は、手数料が取られます。大きな額ではありませんが、そこは理解しておきましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="700" height="243" src="https://ynagashima.com/wp-content/uploads/2019/11/paypal-fees.png" alt="paypal出金手数料" class="wp-image-10967" srcset="https://ynagashima.com/wp-content/uploads/2019/11/paypal-fees.png 700w, https://ynagashima.com/wp-content/uploads/2019/11/paypal-fees-300x104.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /><figcaption>画像出典元：<a href="https://www.paypal.com/jp/webapps/mpp/personal/paypal-fees"></a><a href="https://www.paypal.com/jp/webapps/mpp/personal/paypal-fees" target="_blank" rel="noreferrer noopener" aria-label=" (新しいタブで開く)">https://www.paypal.com/jp/webapps/mpp/personal/paypal-fees</a></figcaption></figure></div>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">さいごに</h2>



<p>PayPal（ペイパル）を使えば、あなたのビジネスにカード決済システムを導入できます。難しい手続きは必要ありません。</p>



<p>ここで紹介した動画に沿って作業をしてみてください。そうすることでPayPal（ペイパル）のビジネスアカウントを開設することができます。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/paypal-business-account/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>MAMPでローカル環境にWordPressサイトを構築する方法【Mac編】</title>
		<link>https://ynagashima.com/mamp-local-wordpress/</link>
					<comments>https://ynagashima.com/mamp-local-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Wed, 25 Sep 2019 21:00:02 +0000</pubDate>
				<category><![CDATA[パソコンスキル]]></category>
		<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Mac]]></category>
		<guid isPermaLink="false">https://ynagashima.com/?p=10320</guid>

					<description><![CDATA[WordPressでサイトを作成していくと、いろんなカスタマイズを試してみたくなることがある。そんなとき役に立つのが「ローカル環境」でサイトを作っておくことです。 ローカル環境を作っておくと、パソコン上にWordpres [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="dropcap"><strong>WordPressでサイトを作成していくと、いろんなカスタマイズを試してみたくなることがある。そんなとき役に立つのが「ローカル環境」でサイトを作っておくことです。</strong></p>



<p>ローカル環境を作っておくと、パソコン上にWordpressがインストールできるため、インターネット上にはサイトが公開されません。つまり、自分だけが閲覧できるサイトを構築することができます。</p>



<p>もしこんな悩みがあればとっても便利です。</p>



<ul class="wp-block-list"><li>WordPressサイトを作る練習がしたい（いきなり公開してくない）</li><li>気になるプラグインを試しに使ってみたい</li><li>新しいテーマの見え方・機能を事前に確認したい</li><li>追加CSSを加えてみたいけど、どうなるかわからないので試す環境が欲しい</li><li>好き勝手カスタマイズできる練習サイトがあると嬉しい</li></ul>



<p>ここでは、MAMP（マンプ）というフリーソフトを使って、あなたのMacにローカル環境を作る方法をご紹介します。</p>



<p>とっても便利なので、ぜひ構築してください。WordPressでのサイト構築はより一層はかどるし、楽しくなると思います。</p>



<h2 class="wp-block-heading"><strong>ローカル環境とは？</strong></h2>



<p>ローカル環境の専門的な定義は正直よくわかりませんが、ざっくり説明すると下図のようなイメージです。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1000" height="608" src="https://ynagashima.com/wp-content/uploads/2019/09/local.png" alt="ローカル環境とは" class="wp-image-10442" srcset="https://ynagashima.com/wp-content/uploads/2019/09/local.png 1000w, https://ynagashima.com/wp-content/uploads/2019/09/local-300x182.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/local-768x467.png 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /><figcaption>ローカル環境とは？</figcaption></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>「誰にも見られることがない、自分だけの練習サイトを作ることができる」</strong>と思ってください。</p>



<p>ローカル環境という<strong>「WEBサイト構築の練習環境」</strong>が手に入るということです。</p>



<p>ではさっそく、あなたのMacの中にローカル環境を構築する方法を解説していきます。</p>



<p>内容を確認しながら手を動かして、ローカル環境を作ってみてくださいね。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><strong>MAMPを使ったローカル環境の作り方</strong></h2>



<p>MAMPを使うために必要なことは２つです。</p>



<ol class="wp-block-list"><li>MAMPのインストール</li><li>MAMPの初期設定</li></ol>



<p>この２つの作業について解説していきます。</p>



<p>画面を見ながらあなたのペースで設定を進めてみてください。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading"><strong>MAMPをインストールしよう</strong></h3>



<p>最初に<a rel="noreferrer noopener" aria-label="MAMPの公式サイト (新しいタブで開く)" href="https://www.mamp.info/en/" target="_blank">MAMPの公式サイト</a>にアクセスして、Free Download(フリーダウンロード）をクリックしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="654" height="275" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp10.png" alt="MAMP公式サイト" class="wp-image-10326" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp10.png 654w, https://ynagashima.com/wp-content/uploads/2019/09/mamp10-300x126.png 300w" sizes="auto, (max-width: 654px) 100vw, 654px" /><figcaption><a href="https://www.mamp.info/en/" target="_blank" rel="noreferrer noopener" aria-label="MAMP公式サイト (新しいタブで開く)">MAMP公式サイト</a></figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>Appleのロゴマークの下のボタンをクリックして、Mac用のローカル環境をダウンロードしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="614" height="439" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp11.png" alt="MAMPのmacバージョンをダウンロード" class="wp-image-10327" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp11.png 614w, https://ynagashima.com/wp-content/uploads/2019/09/mamp11-300x214.png 300w" sizes="auto, (max-width: 614px) 100vw, 614px" /><figcaption>Mac用のローカル環境をダウンロードしよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>ダウンロードできたら、ダウンロードしたファイルを開きましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="641" height="463" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp8.png" alt="ダウンロードしてMAMPのファイル" class="wp-image-10329" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp8.png 641w, https://ynagashima.com/wp-content/uploads/2019/09/mamp8-300x217.png 300w" sizes="auto, (max-width: 641px) 100vw, 641px" /><figcaption>ダウンロードしてファイルを開こう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>下図の画面が表示されるので「続ける」をクリック</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="641" height="460" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp7.png" alt="MAMPのインストール(大切な情報)" class="wp-image-10330" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp7.png 641w, https://ynagashima.com/wp-content/uploads/2019/09/mamp7-300x215.png 300w" sizes="auto, (max-width: 641px) 100vw, 641px" /><figcaption>続けるをクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>使用許諾契約も「続ける」をクリック</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="643" height="462" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp6.png" alt="MAMPのインストール(使用許諾契約)" class="wp-image-10331" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp6.png 643w, https://ynagashima.com/wp-content/uploads/2019/09/mamp6-300x216.png 300w" sizes="auto, (max-width: 643px) 100vw, 643px" /><figcaption>続けるをクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>インストール先も「続ける」をクリック</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="641" height="460" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp5.png" alt="MAMPのインストール(インストール先)" class="wp-image-10332" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp5.png 641w, https://ynagashima.com/wp-content/uploads/2019/09/mamp5-300x215.png 300w" sizes="auto, (max-width: 641px) 100vw, 641px" /><figcaption>続けるをクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「インストール」をクリック（※インストール先はそのままでOKです。）</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="642" height="462" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp4.png" alt="MAMPのインストールをクリック" class="wp-image-10333" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp4.png 642w, https://ynagashima.com/wp-content/uploads/2019/09/mamp4-300x216.png 300w" sizes="auto, (max-width: 642px) 100vw, 642px" /><figcaption>インストールをクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>インストールの許可を出すためにパスワードを入力ましょう。パソコンにログインするときのパスワードと同じものを入力してください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="645" height="465" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp3.png" alt="MAMPのインストール許可" class="wp-image-10335" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp3.png 645w, https://ynagashima.com/wp-content/uploads/2019/09/mamp3-300x216.png 300w" sizes="auto, (max-width: 645px) 100vw, 645px" /><figcaption>パスワード入力して許可を出そう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>インストール完了がでたらOKです。右下の「閉じる」をクリックしましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="646" height="463" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp2.png" alt="MAMPインストール完了画面" class="wp-image-10336" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp2.png 646w, https://ynagashima.com/wp-content/uploads/2019/09/mamp2-300x215.png 300w" sizes="auto, (max-width: 646px) 100vw, 646px" /><figcaption>この画面が表示されたらインストール完了</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>インストーラはゴミ箱に入れちゃってOKです。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="644" height="461" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp1.png" alt="MAMPインストーラはゴミ箱に捨てる" class="wp-image-10338" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp1.png 644w, https://ynagashima.com/wp-content/uploads/2019/09/mamp1-300x215.png 300w" sizes="auto, (max-width: 644px) 100vw, 644px" /><figcaption>インストーラは捨ててOK</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading"><strong>MAMPの初期設定方法</strong></h3>



<p>MAMPを探して起動しましょう。グレーのゾウさんが目印です。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="278" height="267" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp13.png" alt="MAMPアプリのアイコン" class="wp-image-10340"/><figcaption>グレーの像のアイコンがMAMP</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p style="background-color:#f6f8fd" class="has-background">MAMPアプリの起動方法❶：Finderのアプリケーションから起動</p>



<p>Finderのアプリケーションから『MAMP』ファイルを選択し、その中にあるMAMPアプリを開く。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="567" height="465" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp12.png" alt="MAMPアプリの起動方法" class="wp-image-10341" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp12.png 567w, https://ynagashima.com/wp-content/uploads/2019/09/mamp12-300x246.png 300w" sizes="auto, (max-width: 567px) 100vw, 567px" /><figcaption>「アプリケーション」→「MAMPフォルダ」</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="596" height="504" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp13-1.png" alt="MAMPアプリの起動" class="wp-image-10342" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp13-1.png 596w, https://ynagashima.com/wp-content/uploads/2019/09/mamp13-1-300x254.png 300w" sizes="auto, (max-width: 596px) 100vw, 596px" /><figcaption>グレーのゾウさんを起動しよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p style="background-color:#f6f8fd" class="has-background">MAMPアプリの起動方法❷：Launchpadを使って起動する</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="531" height="334" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp14.png" alt="MAMPをLaunchpadから起動する" class="wp-image-10343" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp14.png 531w, https://ynagashima.com/wp-content/uploads/2019/09/mamp14-300x189.png 300w" sizes="auto, (max-width: 531px) 100vw, 531px" /><figcaption>LaunchpadからMAMPを起動しよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>MAMPを起動後、下図のような画面が開いたら、左下のチェックマークを外して、左上の×ボタンをクリックしよう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="456" height="495" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp15.png" alt="MAMP最初のガイドライン" class="wp-image-10345" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp15.png 456w, https://ynagashima.com/wp-content/uploads/2019/09/mamp15-276x300.png 276w" sizes="auto, (max-width: 456px) 100vw, 456px" /><figcaption>左下のチェックは外しておこう！</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>この画面になったら、設定スタートです。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="554" height="462" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp16.png" alt="MAMPスタート画面" class="wp-image-10347" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp16.png 554w, https://ynagashima.com/wp-content/uploads/2019/09/mamp16-300x250.png 300w" sizes="auto, (max-width: 554px) 100vw, 554px" /><figcaption>ここが初期設定のスタート画面</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>画面左上にある『MAMP』をクリックして、『Preference』をクリックしましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="675" height="437" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp17.png" alt="MAMPのPreferenceをクリック" class="wp-image-10349" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp17.png 675w, https://ynagashima.com/wp-content/uploads/2019/09/mamp17-300x194.png 300w" sizes="auto, (max-width: 675px) 100vw, 675px" /><figcaption>環境設定からPreferenceをクリック</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>すると、こんな画面が出てきます。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="558" height="462" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp18.png" alt="MAMPの環境設定画面" class="wp-image-10351" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp18.png 558w, https://ynagashima.com/wp-content/uploads/2019/09/mamp18-300x248.png 300w" sizes="auto, (max-width: 558px) 100vw, 558px" /><figcaption>MAMPの環境設定画面</figcaption></figure></div>



<ul class="wp-block-list"><li>General</li><li>Ports</li><li>PHP</li><li>Web Server</li><li>MySQL</li><li>Cloud</li></ul>



<p>これらを設定していきます。なんだか難しそうですが、実際には「General」を少しいじる程度です。とっても簡単なので、安心してください。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-1"><hr style="height:30px"/></div>



<h4 class="wp-block-heading">General</h4>



<p>下図のような状態にしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="593" height="490" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp22.png" alt="MAMPのGneralの設定" class="wp-image-10352" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp22.png 593w, https://ynagashima.com/wp-content/uploads/2019/09/mamp22-300x248.png 300w" sizes="auto, (max-width: 593px) 100vw, 593px" /><figcaption>２つのチェックを入れておこう</figcaption></figure></div>



<ul class="wp-block-list"><li>Start servers</li><li>Stop servers</li></ul>



<p>この２つにチェックが入った状態にしておきましょう。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-1"><hr style="height:30px"/></div>



<h4 class="wp-block-heading">Ports</h4>



<p>デフォルトのまま（そのまま）でOKです。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="555" height="456" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp23.png" alt="MAMPのPortsの設定" class="wp-image-10354" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp23.png 555w, https://ynagashima.com/wp-content/uploads/2019/09/mamp23-300x246.png 300w" sizes="auto, (max-width: 555px) 100vw, 555px" /><figcaption>画面のように<strong>デフォルトのまま</strong>でOK</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-1"><hr style="height:30px"/></div>



<h4 class="wp-block-heading">PHP</h4>



<p>デフォルトのまま（そのまま）でOKです。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="550" height="452" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp24.png" alt="MAMPのPHPの設定" class="wp-image-10355" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp24.png 550w, https://ynagashima.com/wp-content/uploads/2019/09/mamp24-300x247.png 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /><figcaption>画面のように<strong>デフォルトのまま</strong>でOK</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-1"><hr style="height:30px"/></div>



<h4 class="wp-block-heading">Web Server</h4>



<p>デフォルトのまま（そのまま）でOKです。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="549" height="452" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp25.png" alt="MAMPのWeb seversの設定" class="wp-image-10356" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp25.png 549w, https://ynagashima.com/wp-content/uploads/2019/09/mamp25-300x247.png 300w" sizes="auto, (max-width: 549px) 100vw, 549px" /><figcaption>画面のように<strong>デフォルトのまま</strong>でOK</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-1"><hr style="height:30px"/></div>



<h4 class="wp-block-heading">MySQLとCloud</h4>



<p>残り２つもデフォルトのままでOKです。特にいじる必要はありません。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="554" height="457" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp26.png" alt="MAMPのMySQLの設定" class="wp-image-10357" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp26.png 554w, https://ynagashima.com/wp-content/uploads/2019/09/mamp26-300x247.png 300w" sizes="auto, (max-width: 554px) 100vw, 554px" /><figcaption>現在のバージョンが表示されるだけ</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="544" height="456" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp27.png" alt="MAMPのCloudの設定" class="wp-image-10358" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp27.png 544w, https://ynagashima.com/wp-content/uploads/2019/09/mamp27-300x251.png 300w" sizes="auto, (max-width: 544px) 100vw, 544px" /><figcaption>設定しなくてOK</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>設定ができたら、右下の「OK」をクリックして、次の設定に進んでいきましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="571" height="446" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp28.png" alt="MAMP設定のOKをクリック" class="wp-image-10360" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp28.png 571w, https://ynagashima.com/wp-content/uploads/2019/09/mamp28-300x234.png 300w" sizes="auto, (max-width: 571px) 100vw, 571px" /><figcaption>設定ができたら「OK」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading">MAMPにWordPressをインストールする準備方法</h3>



<p>ここからはローカル環境にWordPressをインストールする方法を解説していきます。</p>



<p>はじめにStart serversをクリックしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="541" height="446" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp30.png" alt="MAMPのスタートボタンをクリック" class="wp-image-10363" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp30.png 541w, https://ynagashima.com/wp-content/uploads/2019/09/mamp30-300x247.png 300w" sizes="auto, (max-width: 541px) 100vw, 541px" /><figcaption>Start Serversをクリック！</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>クリックして電源アイコンが緑色になったら、真ん中の「Open WebStart page」をクリックします。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="542" height="446" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp29.png" alt="MAMPのスタートボタンを押した後" class="wp-image-10362" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp29.png 542w, https://ynagashima.com/wp-content/uploads/2019/09/mamp29-300x247.png 300w" sizes="auto, (max-width: 542px) 100vw, 542px" /><figcaption>電源アイコンが緑色になればOK</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="542" height="448" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp31.png" alt="Open WebStart page」をクリック" class="wp-image-10364" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp31.png 542w, https://ynagashima.com/wp-content/uploads/2019/09/mamp31-300x248.png 300w" sizes="auto, (max-width: 542px) 100vw, 542px" /><figcaption>「Open WebStart page」をクリック！</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>するとこのような画面が自然と開きます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="757" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp32-1024x757.png" alt="MAMPのスタートページ" class="wp-image-10366" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp32-1024x757.png 1024w, https://ynagashima.com/wp-content/uploads/2019/09/mamp32-300x222.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp32-768x568.png 768w, https://ynagashima.com/wp-content/uploads/2019/09/mamp32.png 1297w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>自動でこのようなページが開く</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>このページの中にある、「phpMyAdmin」をクリックしましょう。（下の画像を参照してください。）</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="659" height="507" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp33.png" alt="「phpMyAdmin」をクリック" class="wp-image-10368" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp33.png 659w, https://ynagashima.com/wp-content/uploads/2019/09/mamp33-300x231.png 300w" sizes="auto, (max-width: 659px) 100vw, 659px" /><figcaption>「phpMyAdmin」をクリックしよう！</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>クリックすると、このような画面が開きます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="712" height="472" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp33-1.png" alt="MAMPのデータベースの作成画面" class="wp-image-10370" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp33-1.png 712w, https://ynagashima.com/wp-content/uploads/2019/09/mamp33-1-300x199.png 300w" sizes="auto, (max-width: 712px) 100vw, 712px" /><figcaption>このような画面が表示される</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「Databases（データベース）」をクリックします。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="620" height="342" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp34.png" alt="「Databases（データベース）」をクリック" class="wp-image-10371" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp34.png 620w, https://ynagashima.com/wp-content/uploads/2019/09/mamp34-300x165.png 300w" sizes="auto, (max-width: 620px) 100vw, 620px" /><figcaption>「Databases（データベース）」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>下図のようなデータベースの画面が表示されます。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="801" height="465" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp36.png" alt="MAMPデータベース作成画面" class="wp-image-10374" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp36.png 801w, https://ynagashima.com/wp-content/uploads/2019/09/mamp36-300x174.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp36-768x446.png 768w" sizes="auto, (max-width: 801px) 100vw, 801px" /><figcaption>このような画面が表示されればOK</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>この画面で、次の通りに入力&amp;選択して「作成」をクリックしてください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="625" height="431" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp37.png" alt="mampのデータベース設定" class="wp-image-10376" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp37.png 625w, https://ynagashima.com/wp-content/uploads/2019/09/mamp37-300x207.png 300w" sizes="auto, (max-width: 625px) 100vw, 625px" /><figcaption>赤枠の部分を設定しよう！</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>Database name(データベース名）はわかりやすい任意のもので入力してあげてください。</p>



<p>ここでは「wordpress」と名付けました。</p>



<p>Collation(照合)の部分は、デフォルトの「utf8_general_ci」のままで大丈夫です。</p>



<p>万が一、別のものになっている場合は、「utf8_general_ci」を見つけて、選択してください。</p>



<p>最終的には下記のようになっています。</p>



<p style="background-color:#f6f8fd" class="has-background"><strong>wordpress＋「utf8_general_ci」　</strong></p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="689" height="411" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp38.png" alt="MAMPのデータベースの作成画面の入力後" class="wp-image-10377" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp38.png 689w, https://ynagashima.com/wp-content/uploads/2019/09/mamp38-300x179.png 300w" sizes="auto, (max-width: 689px) 100vw, 689px" /><figcaption>画面のように入力してみよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>入力ができたら「Create」をクリックしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="625" height="349" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp39.png" alt="Createをクリック" class="wp-image-10378" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp39.png 625w, https://ynagashima.com/wp-content/uploads/2019/09/mamp39-300x168.png 300w" sizes="auto, (max-width: 625px) 100vw, 625px" /><figcaption>Createをクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>今作成したデータフォルダが左に表示されていればOKです。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="617" height="306" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp40.png" alt="データベースの完成" class="wp-image-10380" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp40.png 617w, https://ynagashima.com/wp-content/uploads/2019/09/mamp40-300x149.png 300w" sizes="auto, (max-width: 617px) 100vw, 617px" /><figcaption>左に作成したデータベース（wordpress）が表示されていればOK</figcaption></figure>



<p>ここまで作業ができたら、一旦別のタブを開いて、次の作業に移っていきましょう。</p>



<p>今度はWordPressのインストールです。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading"><strong>WordPressをインストールしてサイトを構築する</strong></h3>



<p><a rel="noreferrer noopener" aria-label="WordPress の公式サイト (新しいタブで開く)" href="https://ja.wordpress.org/" target="_blank">WordPress の公式サイト</a>にアクセスして、WordPressをインストールしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1024" height="430" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp41-1024x430.png" alt="WordPress の公式サイト" class="wp-image-10382" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp41-1024x430.png 1024w, https://ynagashima.com/wp-content/uploads/2019/09/mamp41-300x126.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp41-768x323.png 768w, https://ynagashima.com/wp-content/uploads/2019/09/mamp41.png 1958w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a rel="noreferrer noopener" href="https://ja.wordpress.org/" target="_blank">WordPress の公式サイト</a></figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>画面右上の「Wordpress」を入手をクリックして、画面中央のボタンからWordPressをダウンロードしましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="590" height="526" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp42.png" alt="WordPressをダウンロード" class="wp-image-10383" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp42.png 590w, https://ynagashima.com/wp-content/uploads/2019/09/mamp42-300x267.png 300w" sizes="auto, (max-width: 590px) 100vw, 590px" /><figcaption>WordPressをダウンロードしよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>ダウンロードできたら、ダウンロードしたWordpressのzipファイルを開きましょう。ファイルをクリックして、zipファイルを展開してあげてください。</p>



<p>こんな感じになります。</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp44.png" alt="WordPressのzipファイルを開いた状態" class="wp-image-10386" width="643" height="456" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp44.png 722w, https://ynagashima.com/wp-content/uploads/2019/09/mamp44-300x213.png 300w" sizes="auto, (max-width: 643px) 100vw, 643px" /><figcaption>WordPressのzipファイルを展開した状態にする</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>そうしたらFinderを開いた状態で、『コマンド（⌘）+N』を押して、新しいFinderのウィンドウを開きましょう。</p>



<p>こんな感じ。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="938" height="328" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp46.png" alt="Finderで２つのウィンドウを並べる" class="wp-image-10390" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp46.png 938w, https://ynagashima.com/wp-content/uploads/2019/09/mamp46-300x105.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp46-768x269.png 768w" sizes="auto, (max-width: 938px) 100vw, 938px" /><figcaption>Finderで２つのウィンドウを並べる</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>新しいウィンドウを開いたら、次の手順で、フォルダを見つけてください。</p>



<p>「アプリケーション」→「MAMP（フォルダ）」をクリック</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="567" height="465" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp12.png" alt="MAMPアプリの起動方法" class="wp-image-10341" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp12.png 567w, https://ynagashima.com/wp-content/uploads/2019/09/mamp12-300x246.png 300w" sizes="auto, (max-width: 567px) 100vw, 567px" /><figcaption>「アプリケーション」→「MAMPフォルダ」</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「MAMP（フォルダ）」の中の「htdocs」をクリック</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp47.png" alt="「htdocs」フォルダをクリック" class="wp-image-10391" width="623" height="524" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp47.png 737w, https://ynagashima.com/wp-content/uploads/2019/09/mamp47-300x252.png 300w" sizes="auto, (max-width: 623px) 100vw, 623px" /><figcaption>「htdocs」フォルダをクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>空っぽの「htdocs」フォルダを開く。</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp48.png" alt="空っぽの「htdocs」フォルダを開く" class="wp-image-10392" width="632" height="448" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp48.png 683w, https://ynagashima.com/wp-content/uploads/2019/09/mamp48-300x213.png 300w" sizes="auto, (max-width: 632px) 100vw, 632px" /><figcaption>「htdocs」フォルダを開くと中身は空っぽの状態</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>この空っぽの「htdocs」フォルダに、先ほどダウンロードして展開しておいたWordpressの中身をすべて移行します。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="791" height="315" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp49.png" alt="全てのファイルを移動させる" class="wp-image-10394" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp49.png 791w, https://ynagashima.com/wp-content/uploads/2019/09/mamp49-300x119.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp49-768x306.png 768w" sizes="auto, (max-width: 791px) 100vw, 791px" /><figcaption>「Wordpress」から「htdocs」へ全てのファイルを移動させる</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>移行するとこうなります。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="772" height="325" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp50.png" alt="ファイルの移動完了" class="wp-image-10396" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp50.png 772w, https://ynagashima.com/wp-content/uploads/2019/09/mamp50-300x126.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp50-768x323.png 768w" sizes="auto, (max-width: 772px) 100vw, 772px" /><figcaption>「Wordpress」から「htdocs」へ全てのファイルの移動完了</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>ここまでできたらブラウザに戻って、次のアドレスにアクセスしてください。</p>



<p>			<p class="vk-wp-oembed-blog-card-url-template">
				<a href="http://localhost:8888/">http://localhost:8888/</a>
			</p>
			</p>



<p style="background-color:#fdf8f7" class="has-background"><strong>※ブラウザはGoogle Chromeがおすすめです。</strong></p>



<p>上記アドレスにアクセスすると、このような画面が開くので、「さあ、始めましょう！」をクリックしてください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="650" height="435" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp51.png" alt="ローカル環境でのワードプレスの設定画面" class="wp-image-10397" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp51.png 650w, https://ynagashima.com/wp-content/uploads/2019/09/mamp51-300x201.png 300w" sizes="auto, (max-width: 650px) 100vw, 650px" /><figcaption>「さあ、始めましょう！」をクリックして最後の設定開始</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>下図のような画面が開くので、必要項目を入力していきます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="808" height="625" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp52.png" alt="WordPressとMAMPの接続" class="wp-image-10399" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp52.png 808w, https://ynagashima.com/wp-content/uploads/2019/09/mamp52-300x232.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp52-768x594.png 768w" sizes="auto, (max-width: 808px) 100vw, 808px" /><figcaption>「ユーザー名」と「パスワード」を入力しよう</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「データベース名」には、先述の作業で作成したデータベースの「wordpress」が自動的に入っています。</p>



<p>「データベースのホスト名」には「localhost」と自動で入力されているのでそのままでOKです。もし入力されていなければ、「localhost」と入力してください。</p>



<ul class="wp-block-list"><li>ユーザー名</li><li>パスワード</li></ul>



<p>この２つに入力する内容はMAMPのスタートページから確認できます。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1024" height="621" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp53-1024x621.png" alt="MAMPのMySQLの確認" class="wp-image-10401" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp53-1024x621.png 1024w, https://ynagashima.com/wp-content/uploads/2019/09/mamp53-300x182.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp53-768x466.png 768w, https://ynagashima.com/wp-content/uploads/2019/09/mamp53.png 1060w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>スタート画面からMySQL情報を確認しよう</figcaption></figure></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="877" height="521" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp54.png" alt="ローカル環境のMySQL情報を入力する" class="wp-image-10402" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp54.png 877w, https://ynagashima.com/wp-content/uploads/2019/09/mamp54-300x178.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp54-768x456.png 768w" sizes="auto, (max-width: 877px) 100vw, 877px" /><figcaption>MySQL情報を入力しよう</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>入力が完了したら「送信」をクリックしましょう。するとインストール実行の画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="837" height="676" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp55.png" alt="データベース接続情報の入力" class="wp-image-10404" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp55.png 837w, https://ynagashima.com/wp-content/uploads/2019/09/mamp55-300x242.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp55-768x620.png 768w" sizes="auto, (max-width: 837px) 100vw, 837px" /><figcaption>ユーザー名&amp;パスワードを入力後は「送信」をクリック</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「インストール実行」をクリックしてください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="800" height="374" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp56.png" alt="ワードプレスのインストールを実行する" class="wp-image-10406" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp56.png 800w, https://ynagashima.com/wp-content/uploads/2019/09/mamp56-300x140.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp56-768x359.png 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /><figcaption>インストール実行をクリック</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>インストール実行をクリックすると、「WordPressへようこそ」の画面になります。ここであなたがこれから利用していくローカル環境の『サイト名』や『ログイン情報』を入力してあげてください。</p>



<p>すべて入力したら「WordPress をインストール」をクリックしましょう。</p>



<p>「検索エンジンがサイトをインデックスしないようにする」にもチェックを入れておきましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="789" height="721" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp57.png" alt="WordPressの必要情報を入力" class="wp-image-10408" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp57.png 789w, https://ynagashima.com/wp-content/uploads/2019/09/mamp57-300x274.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp57-768x702.png 768w" sizes="auto, (max-width: 789px) 100vw, 789px" /><figcaption>必要情報をすべて入力して「WordPressをインストール」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「成功しました！」と表示されれれば、ローカル環境の構築は成功です。</p>



<p>「ログイン」をクリックして、管理画面にログインしてみてください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="881" height="555" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp58.png" alt="ログインをクリック" class="wp-image-10411" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp58.png 881w, https://ynagashima.com/wp-content/uploads/2019/09/mamp58-300x189.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp58-768x484.png 768w" sizes="auto, (max-width: 881px) 100vw, 881px" /><figcaption>この画面が出たらログインしてみよう</figcaption></figure>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>ログインをクリックするとローカル環境へのログイン画面が表示されます。この画面は、いつでもアクセスできるようにブックマークしておきましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="828" height="612" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp60.png" alt="ローカル環境へのログイン画面" class="wp-image-10413" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp60.png 828w, https://ynagashima.com/wp-content/uploads/2019/09/mamp60-300x222.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp60-768x568.png 768w" sizes="auto, (max-width: 828px) 100vw, 828px" /><figcaption>ログイン画面はブックマークしておこう！</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>こんな感じで管理画面が表示されれば、ローカル環境の構築成功です。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="950" height="496" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp61.png" alt="WordPressのローカル環境の管理画面" class="wp-image-10415" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp61.png 950w, https://ynagashima.com/wp-content/uploads/2019/09/mamp61-300x157.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp61-768x401.png 768w" sizes="auto, (max-width: 950px) 100vw, 950px" /><figcaption>ローカル環境の管理画面</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>ローカル環境でゼロからサイトを構築していく場合は、これでOKです。この状態からWordPressのサイトを構築していきましょう。</p>



<p>もしあなたがすでにWordPressのサイトを持っているなら、そのデータをエクスポートして、ローカル環境にインポートしてあげましょう。</p>



<p>その方法を次に解説していきます。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-dashed ab-spacer-divider ab-divider-size-2"><hr style="height:50px"/></div>



<h3 class="wp-block-heading"><strong>既存のWordPressサイトのデータをインポートしよう</strong></h3>



<p style="background-color:#f6f8fd" class="has-background"><strong>▼最初は「既存のWordPressサイト」での作業</strong></p>



<p>あなたの既存サイト（実際にWEB上で公開されているWordPressのサイト）の管理画面にログインしてください。</p>



<p>管理画面の左のメニューの中から、「ツール」→「エクスポート」を選択してください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="693" height="451" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp62.png" alt="エクスポートをクリック" class="wp-image-10419" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp62.png 693w, https://ynagashima.com/wp-content/uploads/2019/09/mamp62-300x195.png 300w" sizes="auto, (max-width: 693px) 100vw, 693px" /><figcaption>「ツール」→「エクスポート」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>エクスポートの画面に来たら、「すべてのコンテンツ」を選択して、エクスポートファイルをダウンロードしてください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="750" height="446" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp63.png" alt="「すべてのコンテンツ」を選択して、エクスポートファイルをダウンロード" class="wp-image-10421" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp63.png 750w, https://ynagashima.com/wp-content/uploads/2019/09/mamp63-300x178.png 300w" sizes="auto, (max-width: 750px) 100vw, 750px" /><figcaption>「エクスポートファイル」をダウンロードしよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p style="background-color:#f6f8fd" class="has-background">▼<strong>ここからは「ローカル環境」での作業</strong></p>



<p>ダウンロードができたら、ローカル環境の管理画面に戻ります。</p>



<p>ローカル環境の管理画面の左のメニューの中から、「ツール」→「インポート」を選択してください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="809" height="536" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp64.png" alt="「ツール」→「インポート」を選択" class="wp-image-10425" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp64.png 809w, https://ynagashima.com/wp-content/uploads/2019/09/mamp64-300x199.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp64-768x509.png 768w" sizes="auto, (max-width: 809px) 100vw, 809px" /><figcaption>「ツール」→「インポート」を選択してクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>WordPressから「今すぐインストール」をクリックします。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="754" height="543" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp65.png" alt="WordPressから「今すぐインストール」をクリック" class="wp-image-10427" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp65.png 754w, https://ynagashima.com/wp-content/uploads/2019/09/mamp65-300x216.png 300w" sizes="auto, (max-width: 754px) 100vw, 754px" /><figcaption>「今すぐインストール」をクリックしよう</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>その後、「インポーターの実行」をクリックしてください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="705" height="479" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp66.png" alt="WordPressインポーターの実行" class="wp-image-10429" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp66.png 705w, https://ynagashima.com/wp-content/uploads/2019/09/mamp66-300x204.png 300w" sizes="auto, (max-width: 705px) 100vw, 705px" /><figcaption>「インポーターの実行」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>下図のような画面が開いたら、先ほどWordPressからエクスポートしたファイルを選択してあげましょう。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="852" height="229" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp67.png" alt="「ファイルを選択」をクリック" class="wp-image-10431" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp67.png 852w, https://ynagashima.com/wp-content/uploads/2019/09/mamp67-300x81.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp67-768x206.png 768w" sizes="auto, (max-width: 852px) 100vw, 852px" /><figcaption>ファイルを選択をクリック</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="884" height="330" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp67-1.png" alt="エクスポートしたファイルを選択" class="wp-image-10434" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp67-1.png 884w, https://ynagashima.com/wp-content/uploads/2019/09/mamp67-1-300x112.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp67-1-768x287.png 768w" sizes="auto, (max-width: 884px) 100vw, 884px" /><figcaption>エクスポートした本サイトのファイルを選択</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="814" height="358" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp67-2.png" alt="ファイルをアップロードしてインポート" class="wp-image-10435" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp67-2.png 814w, https://ynagashima.com/wp-content/uploads/2019/09/mamp67-2-300x132.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp67-2-768x338.png 768w" sizes="auto, (max-width: 814px) 100vw, 814px" /><figcaption>ファイルを選択したら「インポートボタン」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>「ファイルをアップロードしてインポート」のボタンをクリックしてから、下図のような確認画面が出てきたら、あなたの都合に合わせて設定をしましょう。設定ができたら、「実行」を押してください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="871" height="211" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp68.png" alt="WordPressのインポート画面" class="wp-image-10437" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp68.png 871w, https://ynagashima.com/wp-content/uploads/2019/09/mamp68-300x73.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp68-768x186.png 768w" sizes="auto, (max-width: 871px) 100vw, 871px" /><figcaption>必要な設定をして「実行」をクリック</figcaption></figure></div>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<p>インポートが完了すると下図のような画面になります。</p>



<p>この画面が表示されたら「ではお楽しみください！」をクリックして、実際のローカル環境のサイトを確認してみてください。</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="836" height="256" src="https://ynagashima.com/wp-content/uploads/2019/09/mamp69.png" alt="WordPressのインポート完了画面" class="wp-image-10439" srcset="https://ynagashima.com/wp-content/uploads/2019/09/mamp69.png 836w, https://ynagashima.com/wp-content/uploads/2019/09/mamp69-300x92.png 300w, https://ynagashima.com/wp-content/uploads/2019/09/mamp69-768x235.png 768w" sizes="auto, (max-width: 836px) 100vw, 836px" /><figcaption>「ではお楽しみください！」をクリック</figcaption></figure></div>



<p>いくつかのファイルはエラーとなりダウンロードできないこともありますが、これであなたの既存サイトのコピーサイトが完成した状態です。</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>



<h2 class="wp-block-heading"><strong>さいごに</strong></h2>



<p>ローカル環境の設定と構築は以上になります。</p>



<p>あとは実際にローカル環境を生かしてどんどんサイトを構築していきましょう！</p>



<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/mamp-local-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>コピーライター必見！リサーチに革命が起きる７つのChrome拡張機能</title>
		<link>https://ynagashima.com/google-chrome-extended-function/</link>
					<comments>https://ynagashima.com/google-chrome-extended-function/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Tue, 11 Jun 2019 02:55:55 +0000</pubDate>
				<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[コピーライター]]></category>
		<category><![CDATA[リサーチ]]></category>
		<category><![CDATA[パソコンスキル]]></category>
		<category><![CDATA[Google Chrome]]></category>
		<guid isPermaLink="false">https://ynagashima.com/?p=9261</guid>

					<description><![CDATA[ひとり起業家として活動する中で、様々なコンテンツを作っていくと思います。ブログ記事、商品・サービス、動画、音声、PDFレポート、などなど。 そんなコンテンツ作成の中で、必ず必要になるのがリサーチ。特にWEBを使ったリサー [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="680" height="486" src="https://ynagashima.com/wp-content/uploads/2019/06/rocket-min.jpg" alt="GoogleChrome拡張機能７選" class="wp-image-9286" srcset="https://ynagashima.com/wp-content/uploads/2019/06/rocket-min.jpg 680w, https://ynagashima.com/wp-content/uploads/2019/06/rocket-min-300x214.jpg 300w" sizes="auto, (max-width: 680px) 100vw, 680px" /></figure>



<p class="dropcap">ひとり起業家として活動する中で、様々なコンテンツを作っていくと思います。ブログ記事、商品・サービス、動画、音声、PDFレポート、などなど。</p>



<p>そんなコンテンツ作成の中で、必ず必要になるのがリサーチ。特にWEBを使ったリサーチは欠かすことができません。</p>



<p>リサーチのクオリティや作業効率は、作成するコンテンツのクオリティにも影響を与えるものです。</p>



<p>ここではコンテンツ作成に伴うリサーチの作業効率を高めてくれる、７つの無料で使えるGoogleChromeの拡張機能をまとめました。</p>



<p>コンテンツライター、セールスコピーライター、SEOコピーライター、WEBコピーライターの方には、オススメの機能ばかりです。</p>



<h2 class="wp-block-heading"><strong>コピーライターのための７つのGoogleChrome拡張機</strong></h2>



<h3 class="wp-block-heading"><font color="#fd8105">1.Video Speed Controller</font></h3>



<p>chrome ウェブストア： <a rel="noreferrer noopener" aria-label="Video Speed Controller (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk" target="_blank">Video Speed Controller</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="722" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add5-1024x722.png" alt="Video Speed Controller" class="wp-image-9263" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add5-1024x722.png 1024w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add5-300x211.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add5-768x541.png 768w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add5.png 1097w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">あらゆる動画の再生速度をコントロールできるようになる拡張機能。</p>



<p>個人的には、「これはもう絶対に入れて！」と強く強くオススメする拡張機能です。</p>



<p>コンテンツ作成のためのリサーチや情報インプットの過程で動画を見る機会は多いと思います。そのとき、通常速度で見るのは正直かなりだるい。Youtubeなら２倍速にはできますが、話し手によっては２倍速でも遅く感じることもあります。</p>



<p>このVideo Speed Controllerなら、あなたが聞き取れる限り、どこまででも再生速度を速くすることができます。2.5倍、3倍、4倍と、再生速度を上げることができるので、かなり重宝すると思います。</p>



<p>Youtube、Vimeo、Facebookでシェアされた動画、おそらくWEB上で表示されるすべての動画速度をコントロールできるようになります。（現時点で、再生速度をコントロールできないケースに遭遇したことがないです）。</p>



<p>コンテンツライター、セールスライター、WEBライターなど、コピーを書く仕事をしていて、動画リサーチが多いなら、入れておかないと時間を損しますよ。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>Video Speed Controllerをインストールすると、動画上にコントローラーが表示されます。（下の画像参照。）<br><br>コントローラのプラスマイナスのボタンをクリック。もしくは、キーボードの『D』と『S』をクリックすることで速度をコントロールするのがオススメです。<br><br>S：再生速度を遅くする <br>D： 再生速度を速くする<br>R ：再生速度のリセット（1.0に戻る）<br>Z - 10秒もどる<br>X - 10秒進む<br>V - コントローラーの表示/非表示</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="799" height="483" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add4.png" alt="Video Speed Controller" class="wp-image-9264" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add4.png 799w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add4-300x181.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add4-768x464.png 768w" sizes="auto, (max-width: 799px) 100vw, 799px" /></figure>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading"><font color="#fd8105">2.Evernote Web Clipper</font></h3>



<p>chrome ウェブストア：<a rel="noreferrer noopener" aria-label="Evernote Web Clipper (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc" target="_blank">Evernote Web Clipper</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="984" height="767" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add1.png" alt="Evernote Web Clipper" class="wp-image-9266" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add1.png 984w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add1-300x234.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add1-768x599.png 768w" sizes="auto, (max-width: 984px) 100vw, 984px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">WEBページ、PDF、スクリーンショットなど、ネット上で見つけた情報をEvernoteに保存してくれる拡張機能。</p>



<p>保存先のノートブックを指定したり、タグを追加することも可能なので、保存したファイル管理もしやすいです。</p>



<p>リサーチの際やスワイプファイルの構築には、かなり役立つ機能になります。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>検索バナーの横にあるEvernote Web Clipperのボタン（Evernoteのアイコン）をクリックするだけ。そうすると下の画像のように、今見ているWEBページをEvernoteに保存することができます。<br><br>あなたの使用状況に合わせて、保存先のノートとタグを設定しましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="600" height="405" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add3.png" alt="Evernote Web Clipper使用例" class="wp-image-9267" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add3.png 600w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add3-300x203.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /><figcaption>使用例：Evernote Web Clipper </figcaption></figure>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading"><font color="#fd8105">3.Full Page Screen Capture</font></h3>



<p>chrome ウェブストア：<a rel="noreferrer noopener" aria-label="Full Page Screen Capture (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl" target="_blank">Full Page Screen Capture</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="735" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add9-1024x735.png" alt="" class="wp-image-9268" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add9-1024x735.png 1024w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add9-300x215.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add9-768x551.png 768w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add9.png 1098w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">表示しているWEBページをそのまま１枚の画像にしてくれる拡張機能。<br><br>pngファイル、PDFファイルの２つの形式に変換してくれる優れもの。長いページを変換した際のバグもなく、綺麗にキャプチャーしてくれます。</p>



<p>ランディンページやセールスレター全体を画像保存したいときに、かなり役立つ拡張機能です。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>検索バーの横に表示される「Full Page Screen Capture」のアイコンボタンをクリックするだけです。<br><br>ひとつ注意点があるとすれば、キャプチャー中は、別のタブに移動しないこと。タブを移動してしまうと、キャプチャーしてくれません。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="896" height="37" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add11.png" alt="Full Page Screen Capture 使用方法" class="wp-image-9270" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add11.png 896w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add11-300x12.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add11-768x32.png 768w" sizes="auto, (max-width: 896px) 100vw, 896px" /></figure>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="502" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add10.png" alt="Full Page Screen Capture 使用例" class="wp-image-9269" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add10.png 700w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add10-300x215.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /><figcaption>使用例：Full Page Screen Capture</figcaption></figure>



<hr class="wp-block-separator is-style-wide"/>



<h3><font color="#fd8105">4.Linkclump</font></h3>



<p>chrome ウェブストア：<a rel="noreferrer noopener" aria-label="Linkclump (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/linkclump/lfpjkncokllnfokkgpkobnkbkmelfefj" target="_blank">Linkclump</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="756" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add15-1024x756.png" alt="Linkclump" class="wp-image-9272" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add15-1024x756.png 1024w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add15-300x222.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add15-768x567.png 768w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add15.png 1075w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">複数のページ（サイト）を一回で開いてくれる拡張機能。</p>



<p>Google検索で表示された上位サイトを上から順番にすべてチェックしたい時、とっても便利です。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>キーボードの『Z』を押しながら、左クリックしたまま開きたいページを選択。選択できたら、左クリックを話すと一気にページを開くことができます。（下のGIFイメージ参照）</p>



<hr class="wp-block-separator is-style-wide"/>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="640" height="480" src="https://ynagashima.com/wp-content/uploads/2019/06/Linkclump-min.gif" alt="Linkclump使用例" class="wp-image-9274"/><figcaption>使用例：Linkclump</figcaption></figure>



<hr class="wp-block-separator is-style-wide"/>



<h3><font color="#fd8105">5.MozBar</font></h3>



<p>chrome ウェブストア：<a rel="noreferrer noopener" aria-label="MozBar (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/mozbar/eakacpaijcpapndcfffdgphdiccmpknp" target="_blank">MozBar</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="721" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add17-1024x721.png" alt="MozBar" class="wp-image-9276" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add17-1024x721.png 1024w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add17-300x211.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add17-768x541.png 768w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add17.png 1138w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">MozBarはライバルサイトのページの価値（評価）やドメインの強さを数値で確認することができる拡張機能。<br><br>表示される数値は、MOZ（米国企業）独自のサイト評価ですが、MOZが国際的に支持を得ていることもあり、ある程度は信頼できる数値だと言えます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="666" height="823" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add18.png" alt=" MOZ使用例" class="wp-image-9277" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add18.png 666w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add18-243x300.png 243w" sizes="auto, (max-width: 666px) 100vw, 666px" /><figcaption>使用例：MOZ</figcaption></figure>



<p>SEOに関わるライティングを実践しているなら、必ず入れておきたい拡張機能だと言えます。自分のサイトを構築していくときも、ライバルサイトをリサーチする１つの指標になりますよね。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>MOZで無料アカウントを作成すると利用できるようになります。（MOZの公式サイトは英語のサイトです。GoogleChromeなら自動翻訳してくれます。）<br><br>MOZアカウント作成はこちら：<a aria-label="https://moz.com/logi (新しいタブで開く)" rel="noreferrer noopener" href="https://moz.com/login" target="_blank">https://moz.com/logi</a><a aria-label="https://moz.com/logi (新しいタブで開く)" href="https://moz.com/login">n</a><br><br>PA：ページの価値。<br>DA：ドメインの強さ。<br>LinkAnalysis：詳細なデータを表示してくれます。<br><br>MOZアカウントができたら、MozBarをGoogleChromeに追加して、有効化させれば自動でPA/DAが表示されるようになります。</p>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading"><font color="#fd8105">6.Instapaper</font></h3>



<p>chrome ウェブストア：<a rel="noreferrer noopener" aria-label="Instapaper (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/instapaper/ldjkgaaoikpmhmkelcgkgacicjfbofhh" target="_blank">Instapaper</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="843" height="676" src="https://ynagashima.com/wp-content/uploads/2019/06/Instapaper.png" alt="Instapaper" class="wp-image-9278" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Instapaper.png 843w, https://ynagashima.com/wp-content/uploads/2019/06/Instapaper-300x241.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Instapaper-768x616.png 768w" sizes="auto, (max-width: 843px) 100vw, 843px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">WEBページやブログ記事をシンプルな記事の形式で保存してくれる拡張機能。<br><br>広告などを削除して、シンプルに記事の内容を保存したい時にはとても便利な機能です。</p>



<p>僕個人としては、ブログ記事の保存用に使用中。Evernoteに比べて、保存スピードが早いので気に入っています。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>検索バーの横に表示される「Instapaper」のアイコンボタンをクリックするだけでページの内容を保存してくれます。<br><br>保存したページの閲覧はInstapaperにログインすることで、チェックすることができます。（無料アカウントの作成が必要です）。<br><br>アカウント作成はこちら：<br><a rel="noreferrer noopener" aria-label="https://www.instapaper.com/ (新しいタブで開く)" href="https://www.instapaper.com/" target="_blank">https://www.instapaper.com/</a><br><br>Instapaperは英語サイトです。GoogleChromeでページを開くと自動翻訳してくれます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1013" height="578" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add20.png" alt="Instapaper使用例" class="wp-image-9279" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add20.png 1013w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add20-300x171.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add20-768x438.png 768w" sizes="auto, (max-width: 1013px) 100vw, 1013px" /><figcaption>使用例：Instapaper</figcaption></figure>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading"><font color="#fd8105">7.文字数カウンター</font></h3>



<p>chrome ウェブストア：<a rel="noreferrer noopener" aria-label="文字数カウンター (新しいタブで開く)" href="https://chrome.google.com/webstore/detail/%E6%96%87%E5%AD%97%E6%95%B0%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/glilfjhglngcfhiogplalcgepclphbhd" target="_blank">文字数カウンター</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="710" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add12-1024x710.png" alt="文字数カウンター" class="wp-image-9280" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add12-1024x710.png 1024w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add12-300x208.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add12-768x532.png 768w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add12.png 1026w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p style="background-color:#fdf8f7" class="has-background">ネーミングそのままに、ページ内の文章の文字数をカウントしてくれる拡張機能。</p>



<p>ライバルサイトのリサーチや自分が書いたコピーの確認の時、入れておくと意外に便利な機能です。</p>



<p style="background-color:#f6f8fd" class="has-background">使い方<br><br>文字数を調べたい部分のコピーを選択して、右クリックします。<br><br>表示されたメニューの中から「文字数カウンター」を選択すると選択した範囲の文字数が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="962" height="504" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add13.png" alt="文字数カウンター使用例1" class="wp-image-9281" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add13.png 962w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add13-300x157.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add13-768x402.png 768w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add13-960x504.png 960w" sizes="auto, (max-width: 962px) 100vw, 962px" /><figcaption>カウントしたい文字を選択して、右クリック</figcaption></figure>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="982" height="466" src="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add14.png" alt="文字数カウンター使用例2" class="wp-image-9282" srcset="https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add14.png 982w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add14-300x142.png 300w, https://ynagashima.com/wp-content/uploads/2019/06/Chrome-add14-768x364.png 768w" sizes="auto, (max-width: 982px) 100vw, 982px" /><figcaption>選択した箇所の文字数が表示されます</figcaption></figure>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><font color="#FF4502">GoogleChromeの拡張機能を味方につけよう</font></h2>



<p>ここで紹介した拡張機能は、リサーチ作業をサポートしてくれるものばかりです。何か気になったものがあれば、ぜひ今すぐ追加して、実際に使ってみてください。</p>



<p>７つの拡張機のはどれもオススメだけど、個人的には、Video Speed Controllerだけは絶対に使って欲しい。そのぐらいオススメの拡張機能です。</p>



<p>おすすめの関連記事はこちら</p>



<figure class="wp-block-embed-wordpress aligncenter wp-block-embed is-type-wp-embed is-provider-content-writer-blog"><div class="wp-block-embed__wrapper">
			<div class="blog-card">
				<div class="blog-card-body-outer">
					<div class="blog-card-body">
													<h5 class="blog-card-title">
								<a href="https://ynagashima.com/copy-reserch/">コピーライティングのリサーチ【入門ガイド】</a>
							</h5>
																			<p class="blog-card-text">
								コピーライターとして習得を避けて通れないスキルが『リサーチ』。リサーチのスキルが上手いか下手かで、コピーライターとしてのスキルも大きく変化してきます。 極論を言…							</p>
												<div class="blog-card-site-title">
							<a href="https://ynagashima.com">
																	<img decoding="async" loading="lazy" src="https://ynagashima.com/wp-content/uploads/2021/10/cropped-logo-1-32x32.png" width="16" height="16" alt="" >
																長嶋雄二公式サイト							</a>
						</div>
					</div>
				</div>
									<div class="blog-card-image-outer">
						<a href="https://ynagashima.com/copy-reserch/" class="blog-card-image-frame">
							<img decoding="async" class="blog-card-image-src" src="https://ynagashima.com/wp-content/uploads/2018/11/reserch.jpg" alt="">
						</a>
					</div>
							</div>

			
</div></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/google-chrome-extended-function/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>メルマガ開封率から考えるコピーライティング＆ビジネスの本質</title>
		<link>https://ynagashima.com/think-essence/</link>
					<comments>https://ynagashima.com/think-essence/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Thu, 16 May 2019 05:23:20 +0000</pubDate>
				<category><![CDATA[コピーライティング]]></category>
		<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[メルマガ]]></category>
		<guid isPermaLink="false">https://ynagashima.com/?p=8712</guid>

					<description><![CDATA[メルマガ配信をしている人なら、必ず気になってしまう数字があります。それがメルマガ開封率です。 メルマガ開封率とは、その名の通り、送信したメールが開かれた割合を表すもの。例えば、100通メルマガを配信して、20通が開封され [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="dropcap">メルマガ配信をしている人なら、必ず気になってしまう数字があります。それがメルマガ開封率です。</p>



<p>メルマガ開封率とは、その名の通り、送信したメールが開かれた割合を表すもの。例えば、100通メルマガを配信して、20通が開封されたなら、開封率は20%になります。</p>



<p>「どのぐらいの読者がメールを見てくれているのか？（開いてくれたのか？）」</p>



<p>その指標になるのがメルマガ開封率ということです。</p>



<p>もしあなたが自分のビジネスを始めていくなら、メルマガは必ず発行して欲しいと思います。しかし、メルマガ開封率には囚われて欲しくないとも思っています。</p>



<p>ここではメルマガ開封率を判断するポイント。そして、そこから読み解くことができるコピーライティングの本質についてお伝えします。</p>



<span id="more-8712"></span>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">メルマガ開封率を左右する『タイトル（件名）』</h2>



<p>メルマガ開封率の数字に関わるのは、メルマガのタイトル（件名）です。メルマガの対ちるに書かれているコピー次第で、メルマガを開いてもらえるかどうかが決まるということです。</p>



<p>Yahoo!のトップページなんかをイメージしてもらうと、わかりやすいと思います。Yahoo!に掲載されているトップニュースのタイトルは、まさにメルマガタイトルと同じ役割です。</p>



<p>「なんだこれ」「これは気になる」「これは知りたい」など。思わず読んでしまいたくなるタイトルを見ると、ついついクリックして記事を開いてしまいますよね。</p>



<p>メルマガタイトルもこれと全く一緒。あなたの読者がメルマガを開いてしまう・開きたくなりタイトルにしてあげることが非常に重要なポイントになります。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">メルマガタイトルとコピーライティング</h3>



<p>「魅力的なメルマガタイトルを書こう！」「読者の興味を引きつけるタイトルにしよう！」こうしたメッセージを一度は見たことがあると思います。</p>



<p>タイトルを興味性のあるものにして、クリックしてもらう。それは確かにとても重要なことです。そして、興味性のあるタイトルを作るために、いわゆるコピーライティングのテクニックがたくさん存在しています。</p>



<ul class="wp-block-list"><li>タイトルには数字を入れよう</li><li>「〇〇の方法、〇〇の秘訣」などの表現を使う</li><li>「限定」「緊急」などの単語を入れよう</li></ul>



<p>などなど。きっとあなたも１度ぐらいは聞いたことがあるかと思います。</p>



<p>確かにコピーライティングのテクニックを利用して、メルマガタイトルを作成することが重要なことです。しかし、その考え方だけだと本質を見失ってしまうことがあります。</p>



<p>あなたにはそんなふうにならないで欲しいと思います。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">コピーライティングの本質につながる大切な視点</h2>



<p>メルマガ開封率をあげたくて、コピーライティングのテクニックを勉強する・実践する・スキルを磨く。そのこと自体は否定しません。そうしたトライ＆エラーの経験も、大切だと思います。</p>



<p>しかし、本当に大事なことはコピーライティングのテクニック習得じゃなくて、読者（見込み客）を理解することです。</p>



<p>もう少し具体的に言えば、「読者の頭の中にある言葉を理解すること」これがとっても重要です。</p>



<p>つまり、、、</p>



<p style="background-color:#f6f8fd" class="has-background">読者の興味・関心を引きつける言葉・表現をコピーライティングのテクニックで作り出そうとするのはなく、<strong>読者の頭の中にある言葉・表現を見つけて、それらをメルマガタイトルに使う。</strong></p>



<p>この視点（考え方）がコピーライティングの本質につながっていきます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">『人』の理解</h3>



<p>そもそも、コピーライティングのスタート地点は『人』ですよね。人の悩み・問題・不満などがあるからこそ、コピーライティングのテクニックが成り立っています。そしてそれは、ビジネスという視点で考えてみても全く同じ。</p>



<p>つまり、あなたのビジネスも『<strong>人（見込み客や顧客）のことを考えること</strong>』がスタート地点になるということ。ここを忘れないで欲しいと思います。</p>



<ul class="wp-block-list"><li>見込み客が普段使う言葉は？</li><li>見込み客が無視できない言葉・表現は？</li><li>見込み客が思わずビクッと反応する言葉は？</li><li>見込み客の頭の中にこびり付いているキーワードは？</li><li>見込み客の心に深く深く刻まれているに表現は？</li></ul>



<p>そんなふうに考えながら、あなたの見込み客や顧客の頭の中にある言葉・表現を理解してあげてください。そして、それを見つけたら、そのままメルマガタイトルに使ってあげる。</p>



<p>たったそれだけのことでも、メルマガタイトルの開封率は変化してきます。もしあなたがメルマガ開封率に悩むなら、見込み客や顧客の悩み・問題をもっと理解することに力を入れてみてください。</p>



<p style="background-color:#f6f8fd" class="has-background">ちなみに僕なら、次のような言葉がメルマガタイトルに入っていると、思わず反応すると思います。（多分…）<br><br>・Apple<br>・ディズニー<br>・スターバックス（スタバ）<br>・子育ての〇〇<br>・チョコレート</p>



<p style="background-color:#fdf8f7" class="has-background">注意点<br><br>メルマガタイトルとメルマガ本文の内容の一貫性が崩れないようには気をつけてください。見込み客の頭の中にある言葉・表現を使うことは大事ですが、それを使うことでタイトルと本文の一貫性が崩れてしまったら意味がありません。<br><br>「ただ開かせることが目的」のタイトルばかりをつけていると、読者からの信頼を失う可能性も高いです。<br><br>例えば、「世界一のチョコレート」というタイトルのメルマガを送ったとします。でも、メルマガの内容はチョコレートの「チョ」の字もなく、がっつりSEOライティングの話。こんな感じのメールはアウトですよね。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">脱“メルマガ開封率”至上主義のすすめ</h2>



<p>『メルマガ開封率が低い。数字が悪い。』そう悩む個人起業家は多いです。しかし、僕はいつも次のように感じています。</p>



<p>「何を持って悪いと判断しているのか？」</p>



<p>個人起業家なんて、人それぞれ状況が違いますよね。メルマガリストの数・配信頻度・配信内容など。これらの要素が関連して、初めてメルマガ開封率が存在するようなものです。</p>



<p>だから数字だけ見て「悪い」と判断するのは非常にナンセンス。「開封率はこのぐらいがいいでしょう」なんていう基準はおそらく存在しない。もし存在したとしても、それは10万とか100万という膨大なリスト数と長期にわたるメルマガ運営実績のある一部の人たちだけです。</p>



<p>僕らのような「めざせ！1万リスト」の個人起業家が、開封率至上主義になるのは非常に危険だと思います。なぜなら、どんなに面白いメルマガ・質のいいメルマガを書いても、必ず一定数は読まれなくなっていきますからね。</p>



<p>あなたも経験ありませんか？</p>



<p>「面白い人のメルマガだったけど、気づいたら読まなくなってた。」そんな経験は誰にでもあることですよね。</p>



<p>メルマガ登録から３ヶ月後、半年後、１年後も読み続けてくれる人がいるとしたら、それはかなりコアなあなたのファン。もしくは、あなたのコピーライティングのスキルが神がかっていることだと思います。</p>



<p>基本的には、メルマガリストが増えれば開封率は落ちていきます。</p>



<p>だから「開封率は悪くなるのが当たり前」そんなふうに理解しておいて欲しいです。そして、もしあなたが開封率至上主義の傾向があるなら、そこから抜け出してください。</p>



<p>開封率なんて、状況次第でいくらでも変化しますからね。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">開封率アップのテクニックより大事なこと</h3>



<p>開封率を上げようと「コピーのテクニック」に走るのではなく、開封率を上げるために「<strong>より深く見込み客や顧客の理解に努める</strong>」こと。これがひとり起業家として活躍し続けるために欠かせない要素だと思います。</p>



<p>テクニックはあくまでも補足的なもの。あなたが見込み客や顧客のことを真剣に考えていけば、自然と相手に響く言葉・表現を見つけることができます。</p>



<p>もしそれで開封率があなたの納得いかない数字だったとしても、開封してくれている人は、高い可能性で質のいい読者さん達です。</p>



<p>人が一生のうちに関われる人数なんて限られてますよね。だから、大衆に響くような胡散臭いメッセージを放つんじゃなくて、あなたが真剣に付き合っていきたい人たちにメッセージを届ける。</p>



<p>そのほうがビジネスが楽しくなると思いませんか？</p>



<p>ps.<br>「見込み客・お客様のことを理解すること」当たり前のようで、とても難しいことですよね。でもビジネスを実践してく中で、忘れないようにしておきたいですね。</p>



<div style="height:28px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/think-essence/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Elementorテンプレートの使い方【成約率17%のLPを作る方法】</title>
		<link>https://ynagashima.com/how-to-elementor/</link>
					<comments>https://ynagashima.com/how-to-elementor/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Thu, 09 May 2019 01:35:28 +0000</pubDate>
				<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[ランディングページ]]></category>
		<guid isPermaLink="false">https://ynagashima.com/?p=8195</guid>

					<description><![CDATA[あなたは、「ランディングページの作り方を知りたい」「セールレターの作り方を知りたい」そうした悩みを抱えていませんか？ ランディページやセールスレターの書き方を勉強して、コピーを書けるようになっても、「じゃあ、それをどうや [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="dropcap">あなたは、「ランディングページの作り方を知りたい」「セールレターの作り方を知りたい」そうした悩みを抱えていませんか？</p>



<p>ランディページやセールスレターの書き方を勉強して、コピーを書けるようになっても、<strong>「じゃあ、それをどうやってWEBページするのか？」</strong>という悩みです。</p>



<p>もし「はい」と答えてくれるなら、このページがあなたの助けになります。ここでは、『Elementor』というWordPressの無料プラグインを使ったランディングページの作り方を解説しています。</p>



<p>解説するランディングページは僕自身が過去２年間ほど利用していたものです。２年間の平均成約率は『17%』そこまで悪くない数字だと思います。</p>



<p style="background-color:#f6f8fd" class="has-background">実際のページはこちら：<br>https://pages-yngsm.com/7step/<br>（2019年現在、このLPからメルマガ登録はできません。）</p>



<p>Elementorは一度操作を覚えてしまえば、デザイン面も自由自在です。個人起業家がメルマガリストを獲得するために欠かせないランディングページをあなたも手に入れてください。</p>



<span id="more-8195"></span>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Elementorとは？</h2>



<div style="position: relative;">
<img decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor.png" alt="topimg"> 
<div style="position:absolute; top:10px; left:10px; width: 300px;">
<p><font color="#D30A5C">Elementorとは何かを簡単に理解しておこう！</font></p>
</div></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Elementorとは、ランディングページやセールスレターを専門知識なしで簡単に作成できるようになるWordPressのプラグインです。<br><br>個人起業家として活動していくなら、扱えるようになっておいて損がないかなり便利なプラグインです。<br><br>利用は無料プランと有料プラン（Proプラン）がありますが、無料プランで必要な機能・使いたい機能は全て利用できます。</p>



<p style="background-color:#f6f8fd" class="has-background">Elementorを利用すると、デザイナーような専門知識がなくても、誰でも簡単におしゃれなランディングページを作ることができます。<br><br>例えば、僕がこのサイトで利用しているランディングページもElementorで作ったものです。<br><br>参考<br>https://ynagashima.com/rocketstart-kit/<br><br>・ランディングページ<br>・セールスレター<br>・サンキューページ<br><br>個人起業家であれば必ずに必要になってくるこうした種類のWEBページを、Elementorで作成することが可能です。</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Elementorのインストール＆有効化</h2>



<div style="position: relative;">
<img decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor.png" alt="topimg"> 
<div style="position:absolute; top:10px; left:10px; width: 300px;">
<p><font color="#D30A5C">ElementorをWordPressにインストール＆有効化しよう！</font></p>
</div></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Elementorは「プラグインの新規追加」からインストール＆有効化することができます。</p>



<p>プラグインの新規追加から「Elementor」と検索して、プラグインをインストール＆有効化しましょう。（※稀にElementorが利用できないテーマがあるようです。）</p>



<figure class="wp-block-image is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/Elementor-min.png" alt="Elementorのインストール" class="wp-image-8196" width="685" height="291" srcset="https://ynagashima.com/wp-content/uploads/2019/05/Elementor-min.png 600w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor-min-300x127.png 300w" sizes="auto, (max-width: 685px) 100vw, 685px" /></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Elementorでランディングページを作るために必要な準備</h2>



<div style="position: relative;">
<img decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor.png" alt="topimg"> 
<div style="position:absolute; top:10px; left:10px; width: 300px;">
<p><font color="#D30A5C">LP作成に必要な４つの素材を準備しよう！</font></p>
</div></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ランディングページを作成するための次の４つを準備しておきましょう。</p>



<p style="background-color:#f6f8fd" class="has-background">・ランディングページで使う画像（おすすめの<a href="http://o-dan.net/ja/" target="_blank" rel="nofollow noopener noreferrer" aria-label="無料素材サイト (新しいタブで開く)">無料素材サイト</a>）<br>・メルマガ登録フォーム（登録フォームのURL）<br>・ランディングページの<a rel="noreferrer noopener" aria-label="テキスト (新しいタブで開く)" href="https://ynagashima.com/lp-writing/" target="_blank">テキスト（コピー）</a><br>・お客様の声、推薦者の声（あればでOK）</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Elementorの基本構造を理解しておこう</h3>



<p>エレメンターは１つ１つのセクションを作成することで、WEBページを構築することができます。<strong>１つ１つのセクションの繋ぎ合わせていき、１つのWEBページを作成するということ</strong>です。下のイメージを参考にしてください。</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/elementor-all-min.png" alt="" class="wp-image-8327" width="550" height="619" srcset="https://ynagashima.com/wp-content/uploads/2019/05/elementor-all-min.png 680w, https://ynagashima.com/wp-content/uploads/2019/05/elementor-all-min-267x300.png 267w" sizes="auto, (max-width: 550px) 100vw, 550px" /><figcaption>イメージ画像：Elementor全体の構成</figcaption></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>１つの１つのセクションは、『カラム』と『エレメント』という２つの要素を持っています。</p>



<p>セクションは次の３Stepで作成できます。<br></p>



<p style="background-color:#f6f8fd" class="has-background">・Step1.新しいセクションの追加<br>・Step2.カラムの設定（選択）<br>・Step3.カラムにエレメントの挿入</p>



<p>上記の３StepがElementorの基本作業です。慣れるまでは少々ややこしいと思いますが、そこは操作する中で覚えていきましょう。</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Elementorの無料テンプレートを活用しよう</h2>



<div style="position: relative;">
<img decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor.png" alt="topimg"> 
<div style="position:absolute; top:10px; left:10px; width: 300px;">
<p><font color="#D30A5C">無料テンプレートを使ってLPを作ろう！</font></p>
</div></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>無料プランでも利用できる『Elementorのテンプレート』を編集していき、メルマガリスト獲得用のランディングページを作成していきましょう。Elementorの操作が簡単とはいえ、いきなりゼロから、自分でデザインを作るのは大変だからです。</p>



<p>このページでは、実際に僕が使っていたランディングページと同じようなタイプのLPの作り方を解説していきます。</p>



<p>完成させるランディングページ（見本LP）：<br>https://pages-yngsm.com/7step/<br><br>＜このLPの特徴＞<br><br>・『メルマガ講座』形式のランディングページ<br>・「無料オンライン講座」などの形でも使うことができる<br>・個人起業家の方には相性がいいLPの形<br>・質の高いリストが集まる傾向にある</p>



<p style="background-color:#f6f8fd" class="has-background">見本のランディングページ（LP）は、Elementorの無料テンプレートをベースに構築したものです。このページの解説でも同じテンプレートを利用していきます。<br><br>見本LPは約２年間使用してたもので平均の成約率（CVR）は17％でした。<br><br>LPO（ランディングページ最適化）の施策は特にしていない状態だったので、テキストの内容やデザインの修正次第では、17%以上の成約率も十分に見込めると思います。<br><br>Elementorを使い慣れてきて、自分に操作できるようになってから、オリジナルのデザイン構築にチャレンジしてみてください。<br><br><br>※お伝えするランディングページが成果を100％確証できるわけではありません。ご理解ご了承ください。<br></p>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Elementorの無料テンプレートの導入手順</h3>



<p style="background-color:#f6f8fd" class="has-background">手順1.テンプレート追加をクリック<br><br>手順2.無料テンプレートを選択する<br>　・右上に『PRO』と記載してあるものは有料テンプレート<br>    ・「虫眼鏡（みたいな）」アイコンをクリックすると「プレビュー」を見ることができます。<br><br>手順3.好きなテンプレートを挿入する</p>



<p>あなたの好みのテンプレートを挿入しましょう。<strong>このページでは「左上（下記イメージ内の赤枠）のテンプレート」を利用して解説を進めていきます。</strong></p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="562" height="321" src="https://ynagashima.com/wp-content/uploads/2019/05/Elementor-templete.png" alt="" class="wp-image-8332" srcset="https://ynagashima.com/wp-content/uploads/2019/05/Elementor-templete.png 562w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor-templete-300x171.png 300w" sizes="auto, (max-width: 562px) 100vw, 562px" /></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】テンプレート挿入と編集画面の設定　<br><strong>※これだけは必ずご覧ください</strong></p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="1.Elementorの使い方_テンプレートの挿入" width="1140" height="641" src="https://www.youtube.com/embed/LckdX_wNzXQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>Elementorの無料テンプレートの導入手順と編集画面の設定</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ffff8c;color:#000000" class="has-text-color has-background"><strong>テンプレート挿入後の注意点</strong><br><br>Elementorのテンプレートを挿入すると、テンプレート内で使用されている画像も一緒にあなたのワードプレスの中にインストールされてしまいます。<br><br>テンプレート挿入後、『メディア』をご覧になってみてください。</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/Elementor4-min.png" alt="" class="wp-image-8207" width="505" height="262" srcset="https://ynagashima.com/wp-content/uploads/2019/05/Elementor4-min.png 700w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor4-min-300x156.png 300w" sizes="auto, (max-width: 505px) 100vw, 505px" /></figure></div>



<p>テンプレートの中で使われている画像ファイルがあなたのワードプレスの中にもインストールされているのがわかると思います。</p>



<p>これらの画像を削除する・しないは、あなたのご都合に合わせて選択してください。もしテンプレートの中でそのまま使うのであれば、そのまま画像を利用しましょう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h2 class="wp-block-heading">無料テンプレートを編集してLPを完成させる具体的な９つの作業</h2>



<div style="position: relative;">
<img decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor.png" alt="topimg"> 
<div style="position:absolute; top:10px; left:10px; width: 300px;">
<p><font color="#D30A5C">9つの作業を実践して、LPを完成させよう！</font></p>
</div></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>挿入したテンプレートのセクション・カラム・エレメントを修正して、メルマガリスト獲得用ランディングページを作成していきます。</p>



<p>ランディングページの上部から順に、編集方法を解説していきます。</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">「ヘッダー（ヘッドコピー）」セクションの作成</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="680" height="350" src="https://ynagashima.com/wp-content/uploads/2019/05/header-min.png" alt="" class="wp-image-8224" srcset="https://ynagashima.com/wp-content/uploads/2019/05/header-min.png 680w, https://ynagashima.com/wp-content/uploads/2019/05/header-min-300x154.png 300w" sizes="auto, (max-width: 680px) 100vw, 680px" /></figure>



<hr class="wp-block-separator is-style-wide"/>



<h4 class="wp-block-heading"><strong>ヘッダー編集1.いらないセクションを削除</strong></h4>



<p>ページトップのセクションを削除しよう。「セクション削除」　ボタンから削除することができます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="107" src="https://ynagashima.com/wp-content/uploads/2019/05/Elementor5-min-1024x107.png" alt="" class="wp-image-8212" srcset="https://ynagashima.com/wp-content/uploads/2019/05/Elementor5-min-1024x107.png 1024w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor5-min-300x31.png 300w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor5-min-768x80.png 768w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor5-min.png 1115w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h4 class="wp-block-heading"><strong>ヘッダー編集2.トップのセクションの画像変更</strong></h4>



<p>ヘッダーの画像をあなた好みの画像に差し替えていきましょう。下記の動画で、画像の編集方法を解説しているのでご覧になってください。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ヘッダー画像の編集</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="2.Elementorの使い方_ヘッダー画像の編集" width="1140" height="641" src="https://www.youtube.com/embed/o4V7EHjHTxk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ヘッダー画像の編集</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h4 class="wp-block-heading"><strong>ヘッダー編集3.「見出し」エレメントの挿入</strong></h4>



<p>ヘッドコピーを書き込むためのエレメントを挿入します。</p>



<p>見出しエレメントを挿入後、次の３つの作業を進めた解説動画もご覧ください。<br></p>



<p style="background-color:#f6f8fd" class="has-background">作業１.見出しのフォントカラーを『白』に変更＆コピーを中央に配置<br>作業２.見出しのフォントサイズの変更<br>作業３.見出しコピーの行間などの修正・調整</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ヘッドコピーの追加と修正</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="3.Elementor_ヘッドに見出し追加＆フォント修正" width="1140" height="641" src="https://www.youtube.com/embed/X7E599k20D0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ヘッダーに「見出し」の追加＆フォント修正</figcaption></figure>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_文字の中央寄せ" width="1140" height="641" src="https://www.youtube.com/embed/402nnTR4jcU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ヘッダーコッピーの中央寄せ</figcaption></figure>



<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>【画像解説】「見出し」エレメントの文字（コピー）の改行について</strong></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="406" src="https://ynagashima.com/wp-content/uploads/2019/05/midashi2.png" alt="" class="wp-image-8247" srcset="https://ynagashima.com/wp-content/uploads/2019/05/midashi2.png 700w, https://ynagashima.com/wp-content/uploads/2019/05/midashi2-300x174.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>「見出し」テキストの修正は『コンテンツ&gt;タイトル』の部分からできます。（上記画像参照。）</p>



<p>・『空白あり』で改行したいときは『&lt;p&gt;』と入力しましょう。（上記画像の①）</p>



<p>・『空白なし』で改行したいときは『&lt;br&gt;』と入力しましょう。（上記画像の②）</p>



<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>【画像解説】見出しのフォントカラー・フォントサイズなどの編集</strong></p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/midashi-font-min.png" alt="" class="wp-image-8236" width="351" height="430" srcset="https://ynagashima.com/wp-content/uploads/2019/05/midashi-font-min.png 502w, https://ynagashima.com/wp-content/uploads/2019/05/midashi-font-min-245x300.png 245w" sizes="auto, (max-width: 351px) 100vw, 351px" /></figure></div>



<p>・フォントカラーの編集：「スタイル&gt;文字色」を選択</p>



<p>・テキストの行間・文字間隔の編集：「スタイル&gt;書体」を選択</p>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h4 class="wp-block-heading"><strong>ヘッダー編集4.背景オーバーレイをかけて、文字を見やすくする</strong></h4>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/Elementor02.png" alt="" class="wp-image-8230" width="615" height="293" srcset="https://ynagashima.com/wp-content/uploads/2019/05/Elementor02.png 680w, https://ynagashima.com/wp-content/uploads/2019/05/Elementor02-300x143.png 300w" sizes="auto, (max-width: 615px) 100vw, 615px" /></figure></div>



<p>オーバーレイをかけておくとヘッドコピー（キャッチコピー）の文字が見やすくなります。適度にオーバーレイをかけておくことがおすすめです。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ヘッダーコピーの背景オーバーレイ</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio wp-embed-aspect-16-9"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="4.Elementorの使い方_背景オーバーレイ" width="1140" height="641" src="https://www.youtube.com/embed/2708Bc2D0T8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>背景オーバーレイの方法</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h4 class="wp-block-heading"><strong>ヘッダー編集5.ヘッダーのコンテンツの幅の調整</strong></h4>



<p>スライドを移動するか、数値を入力することでコンテンツの幅を調整・変更することができます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ヘッダーのコンテンツ幅の調整</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_コンテンツの幅の変更" width="1140" height="641" src="https://www.youtube.com/embed/FabsbeJ_GSc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ヘッダーのコンテンツ幅の変更方法</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h4><span id="button">ヘッダー編集6.「申し込みボタン」の作成</span></h4>



<p>申し込みボタンのセクションの編集をしていきます。はじめに申し込みボタンセクションの「セクション編集」を選択しましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="96" src="https://ynagashima.com/wp-content/uploads/2019/05/bottom-min.png" alt="" class="wp-image-8249" srcset="https://ynagashima.com/wp-content/uploads/2019/05/bottom-min.png 700w, https://ynagashima.com/wp-content/uploads/2019/05/bottom-min-300x41.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /><figcaption>参考画像：「ボタン」セクション</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>ボタン横のテキストを修正</strong></p>



<p>あなたのメルマガ講座の名前、オンライン講座の名前を入力してあげましょう。EbookやPDFなどの無料コンテンツなどをプレゼントする場合は、コンテンツのタイトルを入力してあげてもよいですね。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ボタンテキスト編集</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementor_ボタンのテキスト編集" width="1140" height="641" src="https://www.youtube.com/embed/HSk-sZEXol4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ボタン横のテキスト修正方法</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>【画像解説】ボタン横のテキストを中央寄せに編集する</strong></p>



<p>ボタン横にあるテキストを中央寄せに編集しておきましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="265" src="https://ynagashima.com/wp-content/uploads/2019/05/botton-text-min.jpg" alt="" class="wp-image-8252" srcset="https://ynagashima.com/wp-content/uploads/2019/05/botton-text-min.jpg 700w, https://ynagashima.com/wp-content/uploads/2019/05/botton-text-min-300x114.jpg 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /><figcaption>ボタンテキストの中央寄せ</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>ボタンのCTAのテキストを入力</strong></p>



<p>CTAとは「コールトゥーアクション」の略称です。読者に行動を促してあげる、コピー（文章）を設定してあげましょう。</p>



<p>＜CTAでよく使われるコピー＞</p>



<p>・いますぐ登録する<br>・いますぐダウンロードする<br>・今すぐ無料で手に入れる<br>・今すぐ参加する<br>・完全無料で手にいれる</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ボタンCTA</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementor_ボタンのCTA" width="1140" height="641" src="https://www.youtube.com/embed/VclxzRGF5bA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ボタン編集：CTAの設定方法</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>ボタンにメルマガ登録フォームのリンクを設定する</strong></p>



<p>リンクの部分にあなたのメルマガ登録フォームURLを設定しましょう。デフォルトで記載されている「#」は削除してから、URLを入力してください。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ボタンリンクの設定</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementor_ボタンにリンク設定" width="1140" height="641" src="https://www.youtube.com/embed/9dNrHogMPQM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>メルマガ登録フォームのリンクを設定</figcaption></figure>



<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>ボタンカラーの修正方法</strong></p>



<p>ボタンのカラーは「普通」と「ホバー」の２種類があります。</p>



<p style="background-color:#f6f8fd" class="has-background">普通：通常時のボタンのカラー<br> ホバー：カーソルをボタンに合わせた時のボタンの色</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ボタンカラー修正（普通）</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementor使い方_ボタンカラー修正（普通）" width="1140" height="641" src="https://www.youtube.com/embed/Qv93cPtMTTg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ボタンカラー編集：普通</figcaption></figure>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】ボタンカラー修正（ホバー）</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementor_ボタンカラー修正（ホバー）" width="1140" height="641" src="https://www.youtube.com/embed/_lbHUwOlGIY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ボタンカラー編集：ホバー</figcaption></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<p><strong>ボタンサイズの修正</strong></p>



<p>「サイズ」からお好みのサイズにボタンの大きさを修正できます。個人的には「大」もしくは「特大」にしておくことがオススメです。その他のサイズはボタンが小さく表示されてしまうためです。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【解説動画】ボタンサイズの変更</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementor_ボタンサイズの変更" width="1140" height="641" src="https://www.youtube.com/embed/O12QIXUzqwQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><figcaption>ボタンサイズの変更方法</figcaption></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">ボディーコピーの作成｜３つの要素を作成しよう</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>▼作成するセクションのイメージ画像</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="948" src="https://ynagashima.com/wp-content/uploads/2019/05/body-all-min.png" alt="" class="wp-image-8258" srcset="https://ynagashima.com/wp-content/uploads/2019/05/body-all-min.png 700w, https://ynagashima.com/wp-content/uploads/2019/05/body-all-min-222x300.png 222w" sizes="auto, (max-width: 700px) 100vw, 700px" /><figcaption><em>見本のLPで確認する：</em>https://ynagashima.com/7step/</figcaption></figure>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ボディコピーの最初のパートでは、次の３つの要素を記載していきます。</p>



<p style="background-color:#f6f8fd" class="has-background">＜作成する３つの要素＞<br><br>要素１.見込み客への問題提起<br>要素２.解決策の提示<br>要素３.メルマガ登録後のメリット・ベネフィット</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="wp-block-heading"><strong>ボディーコピー構築1.見込み客への問題提起<br></strong></h4>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="630" height="207" src="https://ynagashima.com/wp-content/uploads/2019/05/body1-min.png" alt="" class="wp-image-8259" srcset="https://ynagashima.com/wp-content/uploads/2019/05/body1-min.png 630w, https://ynagashima.com/wp-content/uploads/2019/05/body1-min-300x99.png 300w" sizes="auto, (max-width: 630px) 100vw, 630px" /></figure>



<p>見込み客が抱える問題・悩み・痛みなどを箇条書きで５〜７項目を示してあげましょう。</p>



<p>＜参考：よくあるコピー＞</p>



<p>・こんなお悩みありませんか？<br>
・こんな不安を抱えていませんか？<br>
・こんな間違いをしていませんか？</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="wp-block-heading"><strong>ボディーコピー構築2.解決策の提示</strong></h4>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="353" src="https://ynagashima.com/wp-content/uploads/2019/05/body3-min.png" alt="" class="wp-image-8260" srcset="https://ynagashima.com/wp-content/uploads/2019/05/body3-min.png 700w, https://ynagashima.com/wp-content/uploads/2019/05/body3-min-300x151.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /></figure>



<p>「メルマガに登録すると、どんな情報を得ることができるのか？」それを簡潔にわかりやすく伝えてあげましょう。ポイントはダラダラ長くなりすぎないようにすること。200文字以内に収めることを意識すると、上記の画像ぐらいのボリュームになります。</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="wp-block-heading"><strong>ボディーコピー構築3.メルマガ登録後のメリット・ベネフィット</strong></h4>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="391" src="https://ynagashima.com/wp-content/uploads/2019/05/body2-min.png" alt="" class="wp-image-8261" srcset="https://ynagashima.com/wp-content/uploads/2019/05/body2-min.png 700w, https://ynagashima.com/wp-content/uploads/2019/05/body2-min-300x168.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /></figure>



<p>「メルマガに登録するとどんなメリット、ベネフィットが手に入るのか？」箇条書きで５〜７項目を示してあげましょう。もっと書ける場合は書いてもらってもOKです。</p>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="wp-block-heading"><strong>ボディーコピー編集1.テキスト&amp;デザインの修正方法</strong></h4>



<p>ボディーコピーのテキスト編集方法については下記の画像をご参考ください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="680" height="350" src="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor-min.png" alt="ボディーセクションの編集方法" class="wp-image-8263" srcset="https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor-min.png 680w, https://ynagashima.com/wp-content/uploads/2019/05/b-Elementor-min-300x154.png 300w" sizes="auto, (max-width: 680px) 100vw, 680px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>要素２と要素３も上記（要素１）と同様の方法で、テキストを編集できます。</p>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<h4 class="wp-block-heading"><strong>ボディーコピー編集2.テンプレートのボタン削除</strong></h4>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="700" height="415" src="https://ynagashima.com/wp-content/uploads/2019/05/botton-delete.jpg" alt="" class="wp-image-8262" srcset="https://ynagashima.com/wp-content/uploads/2019/05/botton-delete.jpg 700w, https://ynagashima.com/wp-content/uploads/2019/05/botton-delete-300x178.jpg 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>編集（ペンのマーク）にカーソルを合わせる。カーソルを合わせたら、右クリック。するとメニューが表示されるので、一番下にある『削除』をクリックする。</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">ボディーコピーの作成｜メルマガ講座内容の作成</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>▼作成するセクションのイメージ画像</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="667" height="887" src="https://ynagashima.com/wp-content/uploads/2019/05/all-min.png" alt="メルマガ講座セクションの全体像" class="wp-image-8266" srcset="https://ynagashima.com/wp-content/uploads/2019/05/all-min.png 667w, https://ynagashima.com/wp-content/uploads/2019/05/all-min-226x300.png 226w" sizes="auto, (max-width: 667px) 100vw, 667px" /><figcaption>見本のLPで確認する：https://ynagashima.com/7step/</figcaption></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ボディーコピーの２つ目のパートでは、あなたのメルマガ講座やオンラインの講座の内容を記載していきます。ここでは７日間バージョンを解説していますが、あなたの意向に合わせて日数は調整してください。</p>



<p style="background-color:#f6f8fd" class="has-background">＜メルマガ講座セクションの作成手順＞<br><br>１.テンプレートの動画エレメントを削除<br>２.テンプレートのお客様の声エレメントを削除<br>３.エレメントの追加<br>４.画像の位置を左に寄せる<br>５.イメージ画像を挿入＆サイズの調整</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>１.動画を削除</strong></p>



<p>テンプレートを挿入した時に掲載されている『動画エレメント』を削除します。動画右上にカーソルを合わせることで「編集」マークが表示されます。編集マークの上で右クリックをしてから「削除」を選択して、動画を削除してください。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【解説動画】テンプレートの動画を削除</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="799" height="371" src="https://ynagashima.com/wp-content/uploads/2019/05/image.png" alt="" class="wp-image-8270" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image.png 799w, https://ynagashima.com/wp-content/uploads/2019/05/image-300x139.png 300w, https://ynagashima.com/wp-content/uploads/2019/05/image-768x357.png 768w" sizes="auto, (max-width: 799px) 100vw, 799px" /></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>2.お客様の声を削除</strong></p>



<p>テンプレートを挿入した時に掲載されている『お客様の声のエレメント』を削除します。エレメントの右上にカーソルを合わせることで「編集」マークが表示されます。編集マークの上で右クリックをしてから「削除」を選択して、動画を削除してください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="761" height="279" src="https://ynagashima.com/wp-content/uploads/2019/05/image2.png" alt="" class="wp-image-8271" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image2.png 761w, https://ynagashima.com/wp-content/uploads/2019/05/image2-300x110.png 300w" sizes="auto, (max-width: 761px) 100vw, 761px" /></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>3.エレメントの追加</strong></p>



<p>『画像ボックス』というエレメントを追加。ドラック＆ドロップで追加できます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="384" src="https://ynagashima.com/wp-content/uploads/2019/05/image4-min-1024x384.jpg" alt="" class="wp-image-8272" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image4-min-1024x384.jpg 1024w, https://ynagashima.com/wp-content/uploads/2019/05/image4-min-300x112.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image4-min-768x288.jpg 768w, https://ynagashima.com/wp-content/uploads/2019/05/image4-min.jpg 1447w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>４.画像の位置を左に寄せる</strong></p>



<p>画面左の編集スペースの中の一番下、『画像位置』から左寄せを選択してください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="962" height="645" src="https://ynagashima.com/wp-content/uploads/2019/05/image5-min.jpg" alt="" class="wp-image-8273" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image5-min.jpg 962w, https://ynagashima.com/wp-content/uploads/2019/05/image5-min-300x201.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image5-min-768x515.jpg 768w" sizes="auto, (max-width: 962px) 100vw, 962px" /></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>５.イメージ画像を挿入＆サイズの調整</strong></p>



<p>メルマガ講座ごとのイメージ画像を挿入しましょう。画像を挿入したら、『スタイル編集』へ移動して下してください。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="949" height="537" src="https://ynagashima.com/wp-content/uploads/2019/05/image6-min.jpg" alt="" class="wp-image-8275" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image6-min.jpg 949w, https://ynagashima.com/wp-content/uploads/2019/05/image6-min-300x170.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image6-min-768x435.jpg 768w" sizes="auto, (max-width: 949px) 100vw, 949px" /></figure>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>「スペース」と「幅」を調整して、デザインのバランスを調整しましょう。見本で作成しているランディングページでは、「スペース」と「幅」ともに『50』で設定しています。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="950" height="511" src="https://ynagashima.com/wp-content/uploads/2019/05/image7-min.jpg" alt="" class="wp-image-8276" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image7-min.jpg 950w, https://ynagashima.com/wp-content/uploads/2019/05/image7-min-300x161.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image7-min-768x413.jpg 768w" sizes="auto, (max-width: 950px) 100vw, 950px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【Elementorの使い方】ここまでの作業の動画解説</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_メルマガ講座の概要の作り方" width="1140" height="641" src="https://www.youtube.com/embed/9VPIXh0z_Gk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>6.メルマガ講座の内容を記載していこう</strong></p>



<p>見出しには、１通１通ごとのテーマを記載。見出しの下のテキストには、その日のメルマガでお届けする内容の要約を記載しよう。（ブログ記事でいうところの、タイトル＆メタディスクリプションです。）</p>



<p>タイトルと説明文、それぞれで書体の設定ができます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="628" src="https://ynagashima.com/wp-content/uploads/2019/05/image8-min-1024x628.jpg" alt="" class="wp-image-8281" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image8-min-1024x628.jpg 1024w, https://ynagashima.com/wp-content/uploads/2019/05/image8-min-300x184.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image8-min-768x471.jpg 768w, https://ynagashima.com/wp-content/uploads/2019/05/image8-min.jpg 1035w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ffff8c;color:#000000" class="has-text-color has-background"><strong>注意点</strong><br><br>&lt;p&gt;タグで改行すると、フォントカラーの変更が文章全体に反映されません。なので、説明文の中で改行を使うときは、&lt;br&gt;タグを使って、改行するようにしましょう。（タグを２個連続で入力すると、１行空白を挟んで改行されます。）<br><br>&lt;br&gt;タグを使って改行すると、文章全体に対して、フォントカラーの変更が反映されます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="940" height="499" src="https://ynagashima.com/wp-content/uploads/2019/05/image9-min.jpg" alt="" class="wp-image-8283" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image9-min.jpg 940w, https://ynagashima.com/wp-content/uploads/2019/05/image9-min-300x159.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image9-min-768x408.jpg 768w" sizes="auto, (max-width: 940px) 100vw, 940px" /><figcaption>&lt;br&gt;タグ使用時</figcaption></figure>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="942" height="495" src="https://ynagashima.com/wp-content/uploads/2019/05/image10-min.jpg" alt="" class="wp-image-8284" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image10-min.jpg 942w, https://ynagashima.com/wp-content/uploads/2019/05/image10-min-300x158.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image10-min-768x404.jpg 768w" sizes="auto, (max-width: 942px) 100vw, 942px" /><figcaption><em>&lt;p&gt;タグ使用時</em></figcaption></figure>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】メルマガ講座セクションのフォントカラー修正の注意点</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_メルマガ講座セクション_テキストカラーの変更方法" width="1140" height="641" src="https://www.youtube.com/embed/RdG4Rm3yopw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>7.メルマガ配信の分だけ、エレメントを複製しよう。</strong></p>



<p>Step６で作ったエレメントを複製することで、必要な日程分のエレメントを簡単に作ることができます。</p>



<p>複製したエレメントは、画像の差し替え、テキストの修正をして、メルマガ講座1日目〜7日目を完成させましょう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】メルマガ講座のエレメントを「７日間分」を作る方法</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_メルマガ講座セクションの作り方２" width="1140" height="641" src="https://www.youtube.com/embed/rlrl8-yTp6M?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>8.メルマガ講座全体の見出しテキストを設定する</strong></p>



<p>最後に、メルマガ講座全体の見出しテキストを設定しておきましょう。「見出し」エレメントの編集部分をクリックすることで、テキストを修正できます。</p>



<p>見出しを設定したら、フォントや文字の太さなど、好みの書体に変更しよう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】メルマガ講座の見出しの作り方</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_メルマガ講座「見出し編集方法」" width="1140" height="641" src="https://www.youtube.com/embed/ntAkz7v7izY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>9.背景の変更（必要なければ飛ばしてOKの内容です。）</strong></p>



<p>メルマガ講座全体像の解説セクションの背景を変更します。動画解説をご覧ください。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】メルマガ講座セクションの背景カラー＆画像の編集</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_メルマガ講座_背景カラー＆画像の編集" width="1140" height="641" src="https://www.youtube.com/embed/BI5GmWurWoQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>10.スペーサーで間隔を調整する</strong></p>



<p>メルマガ日程1日目〜7日目の間隔を調整すること方法です。スペーサーというエレメントを使うと、間隔を作ることができます。</p>



<p>見本のランディングページでは、間隔「20」でスペーサーを入れています。</p>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】スペーサーでエレメントの間隔を調整</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_メルマガ講座_スペーサーで微調整" width="1140" height="641" src="https://www.youtube.com/embed/EYoFa7Xb-q0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">CTAセクションの追加</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>▼作成するCTAセクションのイメージ画像</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="223" src="https://ynagashima.com/wp-content/uploads/2019/05/image11-1024x223.png" alt="" class="wp-image-8288" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image11-1024x223.png 1024w, https://ynagashima.com/wp-content/uploads/2019/05/image11-300x65.png 300w, https://ynagashima.com/wp-content/uploads/2019/05/image11-768x167.png 768w, https://ynagashima.com/wp-content/uploads/2019/05/image11.png 1058w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>メルマガ講座日程の直下でCTA（行動喚起）の文章を追加します。</p>



<p style="background-color:#f6f8fd" class="has-background">作り方<br><br>1.セクションを追加して、CTAテキストを作成<br>2.「矢印（デザイン要素）」の修正</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】メルマガ講座セクション下のCTA作成方法</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elemetorの使い方_メルマガ講座下CTA" width="1140" height="641" src="https://www.youtube.com/embed/hTMCgqdeN-8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】CTA下部の矢印の作り方</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_CTA下部の矢印の作り方" width="1140" height="641" src="https://www.youtube.com/embed/GMKkJ1lu1No?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">２つ目の申し込みボタンの作成</h3>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p><a href="#button">前述の申し込みボタンの作成方法</a>と同じ方法で作成していきましょう。</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">プロフィール＆お客様の声の作り方</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>「プロフィール」と「お客様の声」のセクションは４カラムで作ります。４カラムで作成後に両サイドの幅が「16%」になるように設定しましょう。</p>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】プロフィールの作り方</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elemetorの使い方_プロフィールの作り方" width="1140" height="641" src="https://www.youtube.com/embed/sMT0JG7XAd8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】お客様の声・推薦者の声_作り方①</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_お客様の声の作り方1" width="1140" height="641" src="https://www.youtube.com/embed/-cdTA7fTwgU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】お客様の声・推薦者の声_作り方②</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elemetorの使い方_お客様の声の作り方2" width="1140" height="641" src="https://www.youtube.com/embed/Vesl9UncBcU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">特典の部分を作ろう</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ラストのCTAの前に、特典をプレゼントするセクションを作ります。「メルマガ講座に参加すると同時にこんなプレゼントが手に入りますよ」と示してあげることで、登録率（成約率）を上げる効果を期待できます。</p>



<p>あなたのノウハウをまとめたPDF、音声コンテンツ、動画コンテンツなどが一般的です。見込み客にプレゼントできる無料コンテンツを用意しておきましょう。</p>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】特典セクションの作り方</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elemetorの使い方_特典セクションの作り方" width="1140" height="641" src="https://www.youtube.com/embed/kJ-m67-MZWE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">申し込みボタンの作成.３つ目</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p><a href="#button">前述の申し込みボタンの作成方法</a>と同じ方法で作成していきましょう。</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">フッターの作り方</h3>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" decoding="async" src="https://ynagashima.com/wp-content/uploads/2019/05/footer-min.png" alt="" class="wp-image-8292" width="585" height="128" srcset="https://ynagashima.com/wp-content/uploads/2019/05/footer-min.png 439w, https://ynagashima.com/wp-content/uploads/2019/05/footer-min-300x66.png 300w" sizes="auto, (max-width: 585px) 100vw, 585px" /><figcaption>フッターのイメージ画像</figcaption></figure></div>



<p>フッター部分には、次の３つを掲載しておこう。</p>



<p style="background-color:#f6f8fd" class="has-background">・プライバシーポリシー&nbsp;<br>・特定商取引法に基づく表記<br>・Copyright © あなたのサイト名 All Rights Reserved.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】フッターの作り方</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="29.Elemetorの使い方_フッターの作成" width="1140" height="641" src="https://www.youtube.com/embed/tUtfw7Ds-3Q?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ffff8c;color:#000000" class="has-text-color has-background"><strong>注意点</strong><br>プライバシーポリシーと特定商取引法に基づく表記、この２つのページへのリンクを忘れないように設定をしておきましょう。</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">下書き保存の方法</h2>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="937" height="504" src="https://ynagashima.com/wp-content/uploads/2019/05/image12-min.jpg" alt="" class="wp-image-8293" srcset="https://ynagashima.com/wp-content/uploads/2019/05/image12-min.jpg 937w, https://ynagashima.com/wp-content/uploads/2019/05/image12-min-300x161.jpg 300w, https://ynagashima.com/wp-content/uploads/2019/05/image12-min-768x413.jpg 768w" sizes="auto, (max-width: 937px) 100vw, 937px" /></figure>



<p style="background-color:#f6f8fd" class="has-background">1.画面左下の緑のボタンの「▲（設定を保存）」をクリック<br>2.「下書き保存をクリック」</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】下書き保存の方法</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Elementorの使い方_下書き保存" width="1140" height="641" src="https://www.youtube.com/embed/MicWCggU5VI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">まとめ｜ライバルに差をつけるあなたのLPを作ってみよう</h2>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ここでお伝えした方法で作業を進めてもらえれば、見本のようなランディングページを作成することができます。</p>



<p>完成したら、「公開」ボタンを押して公開していきましょう。</p>



<p>慣れないうちは、少し難しさを感じるかもしれません。しかし、１度操作に慣れてしまえば、Elementorはあなたの強力な味方になってくれます。</p>



<p>ぜひ、Elementorの基本操作をマスターして、ライバルに差をつける、あなただけのランディングページを作ってみてください。</p>



<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">ページタイトルとパーマリンクを忘れずに設定しておこう</h3>



<p>Elemetorの編集画面からダッシュボードに戻り、ページのタイトルとパーマリンクを設定しておきましょう。意外と忘れてしまうことが多いので、要注意です。</p>



<p>Elementorからダッシュボードに戻る方法は下の解説通りです。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#ff0400;color:#ffffff" class="has-text-color has-background">【動画解説】タイトル設定＆パーマリンク設定</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="30.Elemetor_タイトルとパーマリンク" width="1140" height="641" src="https://www.youtube.com/embed/oCSdEjYRCuc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/how-to-elementor/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>集中力MAX！コピーライターのためのfocus boosterの使い方</title>
		<link>https://ynagashima.com/focus-booster/</link>
					<comments>https://ynagashima.com/focus-booster/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Tue, 05 Mar 2019 05:36:58 +0000</pubDate>
				<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[集中力]]></category>
		<category><![CDATA[モチベーション]]></category>
		<guid isPermaLink="false">https://ynagashima.com/?p=6966</guid>

					<description><![CDATA[コピーライターとしてライティング作業に集中したいとき、役立つのがカウントダウンタイマーの存在です。 例えばカウントダウンタイマーを10分でに設定して、10分間だけ書く作業に集中する。たったこれだけで、作業効率を高めること [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="600" height="390" src="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster.jpg" alt="focusboosterの使い方" class="wp-image-6967" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster.jpg 600w, https://ynagashima.com/wp-content/uploads/2019/03/focusbooster-300x195.jpg 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></figure>



<p class="dropcap">コピーライターとしてライティング作業に集中したいとき、役立つのがカウントダウンタイマーの存在です。</p>



<p>例えばカウントダウンタイマーを10分でに設定して、10分間だけ書く作業に集中する。たったこれだけで、作業効率を高めることができます。</p>



<p>ここでは紹介するのはfocus boosterという無料で利用できるカウントダウンタイマーの使い方です。</p>



<p>もしあなたが「まだカウントダウンタイマーを持っていない」もしくは、「カウントダウンタイマーを探している」というなら、focus boosterを使ってみてください。</p>



<span id="more-6966"></span>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">focus boosterを無料ダウンロードしよう</h2>



<p>focus boosterはWindowsとMac、どちらでも利用可能です。以下のサイトから、無料でダウンロードすることができます。</p>



<p>Macはこちら<br><a href="https://focus-booster.jp.uptodown.com/mac/download" target="_blank" rel="noreferrer noopener">https://focus-booster.jp.uptodown.com/mac/download</a></p>



<p>Windowsはこちら<br><a href="https://focus-booster.jp.uptodown.com/windows/download" target="_blank" rel="noreferrer noopener">https://focus-booster.jp.uptodown.com/windows/download</a></p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">focus boosterのインストール＆設定方法</h2>



<p>Macバージョンでの画面で説明していきます。Windowsの方も表示される画面はきっと同じだと思うので、参考にしてください。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>【ステップ１】インストールしてfocus boosterを開く</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="364" src="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster1.png" alt="focusboosterのインストール画面（Mac）" class="wp-image-6971" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster1.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focusbooster1-300x218.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>アプリの中から、focusboosterを選択して『開く』を選択しましょう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="185" src="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster7.png" alt="focusboosterを開く（Mac）" class="wp-image-6973" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster7.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focusbooster7-300x111.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>[open title='もし『開く』が表示されない場合はこちら']</p>



<p>focus boosterにカーソルを合わせてから『右クリック』→『開く』を選択しましょう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="479" src="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster11-min.png" alt="focusboosterを右クリックで開く（Mac）" class="wp-image-6975" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster11-min.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focusbooster11-min-300x287.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>【ステップ２】focus boosterの設定画面へ</p>



<div class="wp-block-image size-full wp-image-6978"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="341" src="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster8-min.png" alt="focus boosterデフォルト画面" class="wp-image-6978" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster8-min.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focus-booster8-min-300x205.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /><figcaption>focus boosterデフォルト画面</figcaption></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>focus boosterの設定画面へ</p>



<div class="wp-block-image size-full wp-image-6977"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="337" src="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster9-min.png" alt="focus boosterの設定画面へ" class="wp-image-6977" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster9-min.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focus-booster9-min-300x202.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /><figcaption>focus boosterの設定画面へ</figcaption></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>【ステップ３】focus boosterの設定内容を確認して好みの設定をしよう！</p>



<div class="wp-block-image size-full wp-image-6979"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="455" src="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster10-min.png" alt="focus boosterの設定内容" class="wp-image-6979" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster10-min.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focus-booster10-min-300x273.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /><figcaption>focus boosterの設定できる内容</figcaption></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>設定項目（上画像の内容）</p>



<ul class="wp-block-list"><li>Session＝作業時間の長さの設定</li><li>Session Length＝カウントダウンする作業時間の長さ</li><li>Play session tracking sound？＝カウンドダウン中に「カチカチ」鳴る音いる？</li><li>Play session complete sound？＝カウンドダウン終了の音いる？</li></ul>



<ul class="wp-block-list"><li>Break=休憩時間の長さ</li><li>Break Length=カウントダウンする休憩時間の長さ</li><li>Play break tracking sound？＝カウンドダウン中に「カチカチ」鳴る音いる？</li><li>Play&nbsp;break complete sound？＝カウンドダウン終了の音いる？</li></ul>



<ul class="wp-block-list"><li>Mini timer＝ミニタイマーの設定</li><li>Minimize main window?＝ミニタイマーを利用した時に、メイン画面を隠しますか？<strong>*</strong></li></ul>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="428" src="https://ynagashima.com/wp-content/uploads/2019/03/focusbooster.gif" alt="focusboosterのミニタイマー設定" class="wp-image-6988"/></figure></div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">focus boosterでできること・できないこと</h3>



<p><strong>■focus boosterでできること</strong></p>



<ul class="wp-block-list"><li>カウントダウン機能</li><li>カウントダウン中の音の有無の設定</li><li>「分単位」での時間設定（１分〜90分）</li><li>休憩時間の設定（１分〜30分）</li><li>画面をミニタイマータイプにできる</li></ul>



<p><strong>■focus boosterでできないこと</strong></p>



<ul class="wp-block-list"><li>「秒単位」の設定</li><li>途中からリスタートができない（一度タイマーを止めたら、そこで終了）</li><li>デザインの変更（現バージョンでは変更できないみたいです）</li><li>設定が１つしか保存できない（時間設定を変えたい時に少しめんどくさい）</li></ul>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><strong>focus booster</strong>おすすめの設定方法【コピーライター編】</h2>



<p>僕自身がfocus boosterを使い分けている方法は２つです。</p>



<p>１つは、長文の文章を書く場合の設定。ブログ記事やランディングページなど書くときにおすすめの設定です。（その他のパソコン作業もこの設定です。）</p>



<p>もう１つは、短時間で文章を書きあげてしまいたい場合の設定。メルマガを書くときにおすすめの設定です。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">【設定方法１】長文の文章を書く場合</h3>



<p>長文コピーを書くときのfocus boosterの設定を紹介します。</p>



<ul class="wp-block-list"><li>時間：50分に設定
<ul><li>tracking soundなし</li><li>complete soundあり</li></ul>
</li><li>休憩：10分に設定
<ul><li>tracking soundなし</li><li>complete soundあり</li></ul>
</li><li>Mini timer：どちらでも良い</li></ul>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="435" src="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster11-min.png" alt="focus-boosterオススメの設定１" class="wp-image-6995" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster11-min.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focus-booster11-min-300x261.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>この設定にすると『50分書いて、10分休む』という『60分１セット』のリズム（作業ペース）を作ることができます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>例えば、ブログを書くなら、１〜３セット回せば１記事を書くことができると思います。（もちろん、文章量や作り込み方によって変化しますけどね。）</p>



<p style="background-color:#f6f8fd" class="has-background">この設定がおすすめポイント<br><br>どんな人でもだいたい１時間ぐらいで集中力が切れると思います。『60分１セット』の設定は、人が持つ集中力の特性に合わせているので自然と作業がはかどりやすいです。<br><br>『60分１セット』を実践するときのポイントは、50分の作業時間が終わったら、どんなに中途半端なところでもピタッと作業を止めること。<br><br>「ここだけ書いたら休憩しよう！」<br>「キリのいいとこまで書いて休憩しよう！」<br><br>こうした気持ちを殺して、休憩してしまうのがオススメです。<br><br>「ここだけ書いたら」「キリのいいとこまで」という気持ちを残しておくと、次の作業を始めるときに、すんなり作業を再開することができます。<br><br>逆に「キリのいいところ」で終わっている文章だと、再開するときに「さて、次は何書くんだっけ…」という感じになってしまうことが多いからです。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">【設定方法２】短時間で文章を書きあげてしまいたい場合</h3>



<p>比較的、短文コピー（2000文字以下）を書くときのfocusboosterの設定を紹介します。</p>



<ul class="wp-block-list"><li>時間：10分に設定
<ul><li>tracking soundなし</li><li>complete soundあり</li></ul>
</li><li>休憩：10分に設定
<ul><li>tracking soundなし</li><li>complete soundあり</li></ul>
</li><li>Mini timer：どちらでも良い</li></ul>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="500" height="427" src="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster12-min.png" alt="focus-boosterオススメの設定２" class="wp-image-6996" srcset="https://ynagashima.com/wp-content/uploads/2019/03/focus-booster12-min.png 500w, https://ynagashima.com/wp-content/uploads/2019/03/focus-booster12-min-300x256.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></figure></div>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>この設定にした場合は、『10分書いて、10分で推敲（すいこう）』と考えます。すると『20分で１記事書く』という作業のリズムを作ることができます。</p>



<p>例えばメルマガを書く場合。</p>



<p>最初の10分間に集中してメルマガの文章を書きます。そして、「ジリジリ」とコンプリートサウンドがなったら、執筆はそこで終了。</p>



<p>つぎの休憩10分の時間を使って、書いた記事を推敲します。</p>



<p style="background-color:#f6f8fd" class="has-background">この設定がおすすめポイント<br><br>この設定のいいところは、自分の成長を数字で実感できることです。<br><br>最初は10分＋10分でメルマガ１本を書くことは、難しいと思います。僕自身、何度も何度もチャレンジして20分で１本書けるようになりました。<br><br>最初は「え、もう終わり！？」ってぐらい書けなかったです。<br><br>でもちょっと無視しながらでもやってると、だんだん時間内にかけるようになってきます。そうなってくると結構楽しいと思います。<br><br>・最初の10分で本文が書けた！<br>・はじめて20分で完成できた！<br>・20分でいい感じの記事が書けた！<br><br>など。10分+10分という数字があることで、自分の成長を目で見て実感することができるんです。<br><br>もしあなたがライティングのスピードを上げたい、短い時間で質の高いコピーを書けるようになりたいと感じているなら、ぜひこの設定は試して欲しいと思います。<br><br>10分+10分が大変そうな場合は、「25分+25分」からスタートしてみてください！</p>



<p>ご紹介した２つの設定はあくまでも僕が使っているオススメの設定方法です。あなたにとって最適な設定方法を見つけて、focusboosterを有効活用してくださいね。</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">さいごに</h2>



<p>コピーライターとして、ライティング作業への集中力はとても大事な要素です。</p>



<p>「だらだら書いていたら１日・２日かかる作業が、集中して書けば２〜３時間で終わる」なんてことは普通にあります。</p>



<p>focusboosterを使ってライディングの集中力を管理することは、コピーライターとしてのスキルアップにもつながるので、ぜひ試してみてください。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/focus-booster/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Gmailに独自ドメインを設定して、ビジネス用のメールアドレスを作る方法</title>
		<link>https://ynagashima.com/gmail-to-owndomain/</link>
					<comments>https://ynagashima.com/gmail-to-owndomain/#respond</comments>
		
		<dc:creator><![CDATA[長嶋雄二]]></dc:creator>
		<pubDate>Tue, 10 May 2016 08:47:01 +0000</pubDate>
				<category><![CDATA[ツールセット]]></category>
		<category><![CDATA[パソコンスキル]]></category>
		<category><![CDATA[gmail]]></category>
		<category><![CDATA[独自ドメイン]]></category>
		<guid isPermaLink="false">http://web-primarketing.com/?p=997</guid>

					<description><![CDATA[メールでのやり取りはビジネスで欠かすことができませんよね。最近は、チャットワークとか、Facebookでやり取りする起業家も多いですが、それでもやっぱりビジネス用のメールアドレスを持っておくことは大事だと思います。 ここ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="dropcap">メールでのやり取りはビジネスで欠かすことができませんよね。最近は、チャットワークとか、Facebookでやり取りする起業家も多いですが、それでもやっぱりビジネス用のメールアドレスを持っておくことは大事だと思います。</p>



<p>ここではGmailのシステムを利用して、独自ドメインでメールアドレスを送受信できるようになる方法をご紹介します。</p>



<p>ひとりでビジネスをしている場合、メールアドレスが独自ドメインというだけでも、少し信頼感UPにつながります。初対面のときは特に重要ですよね。</p>



<p>もしあなたが「ちゃんとビジネス用のメールアドレスが欲しい！」と悩んでいるなら、ここでお伝えする方法を使って、ビジネス用のメールアドレスを作ってみてください。</p>



<span id="more-997"></span>



<p>今回は、エックスサーバーを利用した方法をお伝えします。流れとしては、次の２ステップです。</p>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color"><strong>Gmailを設定するための全体の流れ</strong><br><br>ステップ1.<br>エックスサーバーで独自ドメインを使ったメールアドレスを取得する。<br><br>ステップ2.<br>そのアドレスをGmailで送受信できるようにする。</p>



<p>では、さっそく設定していきましょう。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">エックスサーバーでメールアカウントを取得する</h2>



<p>エックスサーバー側で必要な設定を解説していきます。</p>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading">エックスサーバーで<strong>「インフォパネル」</strong>にログインしよう！</h3>



<p>まずは<a href="https://www.xserver.ne.jp/login_info.php" target="_blank" rel="noreferrer noopener">エックスサーバーログインページ</a>から「インフォパネル」にログインしましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="987" height="579" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-91.jpg" alt="xserverのインフォパネルへのログイン" class="wp-image-999" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-91.jpg 987w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-91-940x551.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-91-300x176.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-91-768x451.jpg 768w" sizes="auto, (max-width: 987px) 100vw, 987px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ログインすると「インフォパネル」が表示されます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="573" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-92-1024x573.jpg" alt="xserverのサーバーパネルへのログイン" class="wp-image-1000" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-92-1024x573.jpg 1024w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-92-940x526.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-92-300x168.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-92-768x429.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-92.jpg 1030w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading"><strong>「サーバーパネル」</strong>から「ログイン」しよう！</h3>



<p>ログインするとサーバーパネルが表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1008" height="668" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-93.jpg" alt="xserverのサーバーパネルの管理画面" class="wp-image-1001" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-93.jpg 1008w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-93-940x623.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-93-300x199.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-93-768x509.jpg 768w" sizes="auto, (max-width: 1008px) 100vw, 1008px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">作業①<br>複数のドメインを持っている場合は、左下のドロップダウンメニューから、今回利用したいドメインを選び、「設定する」をクリックします。<br><br>作業②<br>右上に表示されている「現在の設定対象ドメイン」が今回利用したいドメインになっているか確認します。<br><br>作業③<br>設定対象ドメインに問題がなければ<strong>「メールアカウント設定」</strong>をクリックします。<br><br>クリックすると「メールアカウント設定画面」が表示されるので「メールアカウントの追加」をクリックしましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1011" height="640" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-94.jpg" alt="xserver解説４" class="wp-image-1003" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-94.jpg 1011w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-94-940x595.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-94-300x190.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-94-768x486.jpg 768w" sizes="auto, (max-width: 1011px) 100vw, 1011px" /></figure>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading"><strong>「メールアカウントの追加」</strong>をしよう</h3>



<p>クリックすると、アカウント情報の入力画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="746" height="695" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-95.jpg" alt="xserver解説５" class="wp-image-1004" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-95.jpg 746w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-ef-bc-95-300x279.jpg 300w" sizes="auto, (max-width: 746px) 100vw, 746px" /></figure>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">■メールアカウント<br>「@マークより前の部分」に設定したいメールアドレスを入力しましょう。「@マークより後ろの部分」は、今回設定対象にしたドメイン名が自動で表示されます。<br><br>※ この記事の中では『blog@・・・・・』として設定しています。<br><br>■パスワード<br>パスワードを考えて入力しましょう。<br><strong>※</strong> <strong>このパスワードは、後で使うので、忘れないように</strong>！<br><br>■容量<br>５０００MBまで指定できます。一度に大量のメールを受信しないのであれば、３００MBで問題ありません。<br><br>■コメント<br>使用目的など、後から見てもわかるようにメモしておくことができます。</p>



<p>入力が完了したら<strong>「メールアカウントの作成(確認)」</strong>をクリックしましょう。すると、確認画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1004" height="452" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver6.jpg" alt="xserver解説6" class="wp-image-1007" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver6.jpg 1004w, https://ynagashima.com/wp-content/uploads/2016/05/xserver6-940x423.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver6-300x135.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver6-768x346.jpg 768w" sizes="auto, (max-width: 1004px) 100vw, 1004px" /></figure>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">作業①<br>設定対象ドメインに間違いがないか確認しましょう。<br><br>作業②<br>今回利用したいメールアドレスに間違いがないか確認しましょう。<br><br>作業③<br>特に問題がなければ<strong>「メールアカウントの作成(確定)」</strong>をクリックします。すると、追加完了画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1019" height="379" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver7.jpg" alt="xserver解説7" class="wp-image-1008" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver7.jpg 1019w, https://ynagashima.com/wp-content/uploads/2016/05/xserver7-940x350.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver7-300x112.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver7-768x286.jpg 768w" sizes="auto, (max-width: 1019px) 100vw, 1019px" /></figure>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">確認1.<br>追加されたアカウントを確認しましょう。<br><br>確認2.<br>問題なければ右上の<strong>「メールソフト設定」</strong>をクリックします。</p>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading">メールソフトの設定に必要な情報を確認しよう</h3>



<p><strong>「メールソフト設定」</strong>をクリックすると以下のような画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1003" height="577" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver8.jpg" alt="xserver解説8" class="wp-image-1009" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver8.jpg 1003w, https://ynagashima.com/wp-content/uploads/2016/05/xserver8-940x541.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver8-520x300.jpg 520w, https://ynagashima.com/wp-content/uploads/2016/05/xserver8-300x173.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver8-768x442.jpg 768w" sizes="auto, (max-width: 1003px) 100vw, 1003px" /></figure>



<p>この設定に必要な項目は、後ほどGmailの設定時に必要になります。</p>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">・<strong>受信メール(POP)サーバー</strong><br>・<strong>送信メール(SMTP)サーバー</strong><br>・<strong>ユーザー名</strong><br>・<strong>パスワード（先ほど設定したもの）</strong></p>



<p>これらをメモするか、このページは開いたままにするなど、いつでも確認できるようにしておきましょう。</p>



<p>これで、エックスサーバーでの作業はひとまず完了です。次は、Gmailでの設定を行っていきましょう。</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Gmailで設定変更して独自ドメインを使おう！</h2>



<p>まず<a href="https://www.google.co.jp/" target="_blank" rel="noreferrer noopener">Googleにログイン</a>してGmailを開きましょう。</p>



<p>すると、受信トレイが表示されますので、画面右上に表示されている<strong>「歯車マーク」</strong>をクリックしましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1274" height="102" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91.jpg" alt="gmail設定１" class="wp-image-1011" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91.jpg 1274w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91-940x75.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91-300x24.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91-768x61.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91-1024x82.jpg 1024w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-91-1200x96.jpg 1200w" sizes="auto, (max-width: 1274px) 100vw, 1274px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>メニューが表示されます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="217" height="389" src="http://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-92.jpg" alt="gmail設定２" class="wp-image-1012" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-92.jpg 217w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-92-167x300.jpg 167w" sizes="auto, (max-width: 217px) 100vw, 217px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>表示されたメニューの中から<strong>「設定」</strong>をクリックします。そうすると、設定画面が表示されます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1275" height="145" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93.jpg" alt="gmail設定３" class="wp-image-1013" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93.jpg 1275w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93-940x107.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93-300x34.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93-768x87.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93-1024x116.jpg 1024w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-93-1200x136.jpg 1200w" sizes="auto, (max-width: 1275px) 100vw, 1275px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>表示された設定画面の中から<strong>「アカウントとインポート」</strong>という部分をクリックしましょう。以下の画像のような画面に切り替わります。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1067" height="474" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-94.jpg" alt="gmail設定４" class="wp-image-1014" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-94.jpg 1067w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-94-940x418.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-94-300x133.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-94-768x341.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-94-1024x455.jpg 1024w" sizes="auto, (max-width: 1067px) 100vw, 1067px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">確認1.<br>今回利用したいあなたの<strong>「Gmailアドレス」</strong>が表示されます。複数アカウントをお持ちの方は間違えていないか確認しましょう。<br><br>確認2.<br>「自分のPOP３メールアカウントを追加」という部分をクリックします。</p>



<p>追加をクリックすると、別ウィンドウで「アカウントの追加画面」が開きます。</p>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading">「アカウントの追加画面」の設定（受信設定）</h3>



<p>別ウィンドウで表示される「アカウントの追加画面」はこんな感じです。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="552" height="462" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-95.jpg" alt="gmail設定５" class="wp-image-1019" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-95.jpg 552w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-95-300x251.jpg 300w" sizes="auto, (max-width: 552px) 100vw, 552px" /></figure>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">作業①<br>「メールアドレス」には、先ほどエックスサーバーで作成したメールアドレスを入力します。今回、この記事での私の場合は<strong>『blog@・・・・・』</strong>と入力します。<br><br>作業②<br>入力したら「次のステップ&gt;&gt;」をクリックします。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>「次のステップ&gt;&gt;」</strong>をクリックするとこんな画面になります。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="552" height="464" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-96.jpg" alt="gmail設定５" class="wp-image-1020" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-96.jpg 552w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-96-300x252.jpg 300w" sizes="auto, (max-width: 552px) 100vw, 552px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">作業①<br>「ユーザー名」には、先ほどエックスサーバーで設定したメールアドレスを入力します。<br><br>作業②<br>「パスワード」は、エックスサーバーでメールアカウントを取得したときに設定したパスワードを入力します。<br><br>作業③<br>「POPサーバー」には、先ほどエックスサーバーの「メールソフト設定」画面に記載してあった「受信メール(POP)サーバー」を入力します。<br><br>作業④<br>「ポート」は110でOKです。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>それぞれチェックボックスについては、任意でチェックを入れれば大丈夫です。各チェックボックスの役割は次の通り。</p>



<p style="background-color:#f6f8fd" class="has-background">■受信したメッセージのコピーをサーバーに残す<br>エックスサーバー側にもメッセージを残したい場合にチェックをいれましょう。<br><br>■受信したメッセージにラベルを付ける<br>受信トレイで表示されるときに判別が分かりやすくなります。<br><br>■受信したメッセージを受信トレイに保存せずにアーカイブする<br>メッセージをアーカイブフォルダに直接保存したい場合はチェックしましょう。</p>



<p>すべての設定が完了したら<strong>「アカウントを追加&gt;&gt;」</strong>をクリックします。クリックすると、確認と一緒に、今度は送信できるように設定する画面になります。</p>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading">「アカウントの追加画面」の設定（送信設定）</h3>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="547" height="460" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail7.jpg" alt="gmail設定7" class="wp-image-1023" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail7.jpg 547w, https://ynagashima.com/wp-content/uploads/2016/05/gmail7-300x252.jpg 300w" sizes="auto, (max-width: 547px) 100vw, 547px" /></figure>



<p>上の画像と同じ画面が表示されたら「はい」を選択しましょう。</p>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">『はい。「blog@・・・・・」としてメールを送信できるようにします。』にチェックをいれましょう。（「blog@・・・・・」←ここはあなたの利用したいメールアドレスです）<br><br>問題なければ「次のステップ&gt;&gt;」をクリックしましょう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p><strong>「次のステップ&gt;&gt;」</strong>をクリックすると、下の画面が表示されます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="548" height="462" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-98.jpg" alt="gmail設定８" class="wp-image-1025" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-98.jpg 548w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-98-300x253.jpg 300w" sizes="auto, (max-width: 548px) 100vw, 548px" /></figure>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">■名前<br>入力した文字がメール送信時の送信者欄に表示されます。<br><br>■エイリアスとして扱います<br>詳細を確認してお好みでチェックしましょう。<br><br>入力したら「次のステップ&gt;&gt;」をクリックします。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>クリックするとこのような設定画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="545" height="460" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-99.jpg" alt="gmail設定９" class="wp-image-1030" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-99.jpg 545w, https://ynagashima.com/wp-content/uploads/2016/05/gmail-ef-bc-99-300x253.jpg 300w" sizes="auto, (max-width: 545px) 100vw, 545px" /></figure>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">作業1.<br>「SMTPサーバー」には、エックスサーバーの「メールソフト設定」画面に記載してあった「送信メール(SMTP)サーバー」を入力します。<br><br>作業2.<br>「ポート」は587でOKです。<br><br>作業3.<br>「ユーザー名」は、エックスサーバーで設定したメールアドレスを入力します。<br><br>作業4.<br>「パスワード」は、エックスサーバーでメールアカウントを追加したときに設定したパスワードです。<br><br>作業５.<br>「TLSを使用したセキュリティで保護された接続（推奨）」にチェックをいれます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>すべて入力が完了したら<strong>「アカウントを追加&gt;&gt;」</strong>をクリックしましょう。クリックすると確認画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="551" height="462" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail10.jpg" alt="gmail設定10" class="wp-image-1032" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail10.jpg 551w, https://ynagashima.com/wp-content/uploads/2016/05/gmail10-300x252.jpg 300w" sizes="auto, (max-width: 551px) 100vw, 551px" /></figure>



<p style="background-color:#f6f8fd" class="has-background"><strong>ここまで設定すると「確認コード」が記入されたメールが、エックスサーバーに追加したメールアドレスに送信されてます。</strong><br><br>この画面はそのままにして、またエックスサーバーログイン画面から、今度は<strong>「WEBメール」</strong>にログインしてメールを確認していきます。</p>



<hr class="wp-block-separator is-style-wide"/>



<h3 class="wp-block-heading">エックスサーバーのWEBメールを確認しよう</h3>



<p><a href="https://www.xserver.ne.jp/login_info.php" target="_blank" rel="noreferrer noopener">エックスサーバーのログイン画面</a>を表示します。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1003" height="643" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver9.jpg" alt="xserver解説9" class="wp-image-1034" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver9.jpg 1003w, https://ynagashima.com/wp-content/uploads/2016/05/xserver9-940x603.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver9-300x192.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver9-768x492.jpg 768w" sizes="auto, (max-width: 1003px) 100vw, 1003px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>右上の<strong>「WEBメール」</strong>をクリックします。そして、ログインしましょう。</p>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color">ログイン作業1.<br>「メールアドレス」にエックスサーバーで追加したメールアドレスを入力します。<br><br>ログイン作業2.<br>「パスワード」は、エックスサーバーにメールアカウントを追加したときに設定したパスワードを入力します。<br><br>ログイン作業3.<br>「ログイン」をクリックします</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ログインするとこんな画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="705" height="502" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver10.jpg" alt="xserver解説10" class="wp-image-1035" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver10.jpg 705w, https://ynagashima.com/wp-content/uploads/2016/05/xserver10-300x214.jpg 300w" sizes="auto, (max-width: 705px) 100vw, 705px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>このページの<strong>「ウェブメール」</strong>をクリックしましょう。クリックすると受信トレイが表示されます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1277" height="426" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver11.jpg" alt="xserver解説11" class="wp-image-1036" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver11.jpg 1277w, https://ynagashima.com/wp-content/uploads/2016/05/xserver11-940x314.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver11-300x100.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver11-768x256.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/xserver11-1024x342.jpg 1024w, https://ynagashima.com/wp-content/uploads/2016/05/xserver11-1200x400.jpg 1200w" sizes="auto, (max-width: 1277px) 100vw, 1277px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>写真のように<strong>「Gmailチーム」</strong>から確認メールが届くので、このメールをクリックして開封しましょう。</p>



<p>開封するとこんな感じでメッセージが届いています。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1281" height="625" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver12.jpg" alt="xserver解説12" class="wp-image-1037" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver12.jpg 1281w, https://ynagashima.com/wp-content/uploads/2016/05/xserver12-940x459.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver12-300x146.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver12-768x375.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/xserver12-1024x500.jpg 1024w, https://ynagashima.com/wp-content/uploads/2016/05/xserver12-1200x585.jpg 1200w" sizes="auto, (max-width: 1281px) 100vw, 1281px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Gmailから送信されたメールには、「<font color="#BE0040">赤い矢印（→）</font>」の部分に<strong>「確認コード」</strong>と<strong>「確認用のリンク」</strong>が記載されています。</p>



<p style="background-color:#fdf8f7" class="has-text-color has-background has-custom-color"><strong><span style="text-decoration: underline;">次の①または②、どちらか１つの作業を実行すれば大丈夫です。</span></strong><br><br>①<br><strong>「確認コード」</strong>を先ほど閉じずにそのままにしておいてた「Gmailの設定画面」に入力し「確認」をクリックします。<br><br>②<br>メッセージにある<strong>「確認用のリンク」</strong>をクリックする。</p>



<p>ここでは、そのまま<strong>「確認用リンク」</strong>をクリックします。そうすると最後の確認の画面が表示されます。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1227" height="389" src="https://ynagashima.com/wp-content/uploads/2016/05/xserver-13.jpg" alt="xserver解説13" class="wp-image-1038" srcset="https://ynagashima.com/wp-content/uploads/2016/05/xserver-13.jpg 1227w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-13-940x298.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-13-300x95.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-13-768x243.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-13-1024x325.jpg 1024w, https://ynagashima.com/wp-content/uploads/2016/05/xserver-13-1200x380.jpg 1200w" sizes="auto, (max-width: 1227px) 100vw, 1227px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ここで<strong>「確認」</strong>をクリックすれば設定完了です！</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>最後に、Gmailの設定画面に戻ってみましょう。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1069" height="627" src="https://ynagashima.com/wp-content/uploads/2016/05/gmail11.jpg" alt="gmail設定11" class="wp-image-1040" srcset="https://ynagashima.com/wp-content/uploads/2016/05/gmail11.jpg 1069w, https://ynagashima.com/wp-content/uploads/2016/05/gmail11-940x551.jpg 940w, https://ynagashima.com/wp-content/uploads/2016/05/gmail11-300x176.jpg 300w, https://ynagashima.com/wp-content/uploads/2016/05/gmail11-768x450.jpg 768w, https://ynagashima.com/wp-content/uploads/2016/05/gmail11-1024x601.jpg 1024w" sizes="auto, (max-width: 1069px) 100vw, 1069px" /></figure>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>独自ドメインを利用したメールアドレスが設定されているか確認しましょう。</p>



<p style="background-color:#f6f8fd" class="has-background">Gmailがエックスサーバーの新着メールを確認するのは、１時間に１回くらいのようです。<br><br>もし、すぐにメールを確認したいときは『POP3 を使用して他のアカウントのメッセージを確認』の欄にある<strong>「メールを今すぐ確認する」</strong>をクリックすると受信メールを確認することができます。</p>



<p style="background-color:#f6f8fd" class="has-background">「デフォルトの返信モードを選択」で<strong>「メールを受信したアドレスから返信する」</strong>にチェックをいれておくことをオススメします。<br><br>初期設定のまま「常にデフォルトのアドレスから返信する」にチェックをいれていると、ついついGmailアドレスから返信してしまうミスが増えます。<br><br>「メールを受信したアドレスから返信する」にチェックをいれておくと、メールを返信するときに受信したメールアドレスから返信することができます。</p>



<p>以上でGmailと独自ドメインを結びつける設定は完了です。</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">最後に重要なお知らせ</h2>



<p>独自ドメインを使ってメールのやり取りをしたい場合、Gmailアドレスも無料で簡単に取得できるので今回の設定はとてもオススメです。</p>



<p>ps.<br>「Gmail」のアプリをダウンロードして使えば、スマホからでも独自ドメインでメールを送れますよ。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>





<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1000" height="354" src="https://ynagashima.com/wp-content/uploads/2019/05/new-banner5.png" alt="ひとり起業ロケットスタートキット" class="wp-image-8932" srcset="https://ynagashima.com/wp-content/uploads/2019/05/new-banner5.png 1000w, https://ynagashima.com/wp-content/uploads/2019/05/new-banner5-300x106.png 300w, https://ynagashima.com/wp-content/uploads/2019/05/new-banner5-768x272.png 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://ynagashima.com/gmail-to-owndomain/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
