<?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>LP | Linksbase</title>
	<atom:link href="https://linksbase.net/tag/lp/feed/" rel="self" type="application/rss+xml" />
	<link>https://linksbase.net</link>
	<description>ヒト・モノ・コトをリンクする</description>
	<lastBuildDate>Sat, 23 May 2020 12:08:24 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.1.1</generator>

<image>
	<url>https://linksbase.net/new/wp-content/uploads/cropped-Logo-Fabicon-Colored_500x500-32x32.png</url>
	<title>LP | Linksbase</title>
	<link>https://linksbase.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>完全初心者OK！XDを使ったワイヤーフレームの書き方</title>
		<link>https://linksbase.net/xd-wire/</link>
		
		<dc:creator><![CDATA[Yukino.1]]></dc:creator>
		<pubDate>Sat, 22 Feb 2020 07:44:49 +0000</pubDate>
				<category><![CDATA[ウェブデザイン]]></category>
		<category><![CDATA[ウェブ制作]]></category>
		<category><![CDATA[LP]]></category>
		<category><![CDATA[ウェブデザイナー]]></category>
		<category><![CDATA[フリーランス]]></category>
		<category><![CDATA[ロードマップ]]></category>
		<category><![CDATA[開発者向けテクニック]]></category>
		<guid isPermaLink="false">https://linksbase.net/?p=3811</guid>

					<description><![CDATA[<p>残念ながらスクールではあまり教えてくれないワイヤーフレーム。XDを使って初めてでも10分でできるワイヤーフレームの書き方を解説します。ワイヤーフレームは、ウェブサイトの設計図のようなもの。フォントを決めたり、コンテンツの配置を考えるだけでなく、ユーザーの導線を設計するために重要なステップです。</p>
<p>The post <a href="https://linksbase.net/xd-wire/">完全初心者OK！XDを使ったワイヤーフレームの書き方</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>今日のゴール</p>



<ul><li>ワイヤーフレームとは何か説明できる</li><li>XDでワイヤーフレームを作れる</li><li>XDのショートカットを覚える</li></ul>



<h2>ワイヤーフレームってなんだ？</h2>



<p>ワイヤーフレームはウェブデザインの骨格のことです。 ヒアリングシートをもとに「どこに」「なにを」配置するかを決めていきます。</p>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<figure class="wp-block-image alignnone wp-image-3825 size-large"><img decoding="async" loading="lazy" width="401" height="1024" src="https://linksbase.net/new/wp-content/uploads/Wireframe-sample-401x1024.png" alt="ワイヤーフレームの見本" class="wp-image-3825"/><figcaption>ワイヤーフレームの見本</figcaption></figure>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/anne.jpg" alt="“ウェブデザイナー目指すアン”"></figure><p class="name">アン</p></div>
<div class="arrow_question">
このテンプレがあれば問い合わせがきたらすぐ対応できそう！
</div></div>



<p>ウェブデザインのスクールに行っても、ワイヤーフレームについては教えてくれませんでした。<br>多分、多くのスクールがデザインツールの使い方とコードの書き方のみです。<br>しかしながら、ヒアリングで聞いたことをデザインにいきなり起こそうと思ってもなかなかうまく進まないものです。<br>大まかな設計図としてワイヤーフレームを書くことで、頭が整理されていくはずです。</p>



<h2>なぜワイヤーフレームを書くのか？</h2>



<h3>コンテンツの過不足を確認するため</h3>



<p>ヒアリングで聞いた情報には、重複しているものがあるかもしれません。<br>配置してみると、実はコンテンツが少ないページがあったりして、コンテンツを増やしたり、別のページと合わせたりする必要が出てきたりします。</p>



<h3>導線を決めるため</h3>



<p>ユーザーが回遊しやすいようなサイトにするために、ボタンの位置、数、全ページへのリンクがあるのかなど決めていきます。<br>構造の設計になるので、ここがしっかり組めていないと後々大きく変更することになりかねないので、しっかりすり合わせましょう。</p>



<h3>フォントのルールを決めるため</h3>



<p>意外にも、フォントが与える印象は大きく、ブランドイメージにも関わってきます。<br>ワイヤーフレームの段階で見出し、本文のフォントの種類と太さを決めておくとイメージがしやすいでしょう。<br>ワイヤーフレームの書き方には正解はなく、案件によっても様々です。<br>ブランドカラーを決めてワイヤーの段階から色を決める場合もあると思います。<br>色々な記事を見ながら、自分にあった形にしていきましょう！<br><br><br></p>



<h2>XDワイヤーフレームの作り方</h2>



<p>

用意するもの

</p>



<ul><li>XDをダウンロードしていない方はこちらから。</li><li>ヒアリングシートは<a href="https://linksbase.net/webdesign/hearingsheet/">こちら</a></li></ul>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<p>こちらの３つのルールを守ってワイヤーフレームを書くのがおすすめです。</p>



<h4>白・黒・グレーのみを使う</h4>



<p>あくまでも設計に集中したいので、色を入れるとフォーカスしづらくなります。</p>



<h4>フォントの大きさを決める</h4>



<p>最近は、ゴシック系のフォントで大きく表示させるデザインが流行っていますね。ヒアリングで聞いたイメージや参考サイトをもとに、フォントの大きさを決めておきましょう。</p>



<h4>フォントを決める</h4>



<p>フォントの種類は本当にたくさんあって、悩んでしまいますが、全体のイメージを左右するのでこの段階で決めておきましょう。</p>



<h3>画面サイズを整えよう</h3>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="290" src="https://linksbase.net/new/wp-content/uploads/xdwire1-1.jpg" alt="" class="wp-image-3828" srcset="https://linksbase.net/new/wp-content/uploads/xdwire1-1.jpg 800w, https://linksbase.net/new/wp-content/uploads/xdwire1-1-480x174.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="478" src="https://linksbase.net/new/wp-content/uploads/xdwire2.jpg" alt="" class="wp-image-3827" srcset="https://linksbase.net/new/wp-content/uploads/xdwire2.jpg 800w, https://linksbase.net/new/wp-content/uploads/xdwire2-480x287.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<p>まずは画面サイズを整えていきましょう。<br>おすすめは、横幅1366pxで、そのうち1080pxをコンテンツを表示する幅とするサイズです。<br>XDを開いたら、webのところから1366pxを選びます。<br><br>アートボードが開くので、左端をドラッグしてガイド線を引きます。<br>1080pxのコンテンツ幅にしたいので、両端から143pxのところに引くとぴったりです。</p>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/anne.jpg" alt="“ウェブデザイナー目指すアン”"></figure><p class="name">アン</p></div>
<div class="arrow_question">
このテンプレがあれば問い合わせがきたらすぐ対応できそう！
</div></div>



<h3>カラーパレットを作ろう</h3>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="328" src="https://linksbase.net/new/wp-content/uploads/xdwire3.jpg" alt="" class="wp-image-3829" srcset="https://linksbase.net/new/wp-content/uploads/xdwire3.jpg 800w, https://linksbase.net/new/wp-content/uploads/xdwire3-480x197.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="441" src="https://linksbase.net/new/wp-content/uploads/xdwire4.jpg" alt="" class="wp-image-3830" srcset="https://linksbase.net/new/wp-content/uploads/xdwire4.jpg 800w, https://linksbase.net/new/wp-content/uploads/xdwire4-480x265.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="300" height="276" src="https://linksbase.net/new/wp-content/uploads/xdwire5.jpg" alt="" class="wp-image-3831"/></figure>



<p>次に、カラーパレットを作ります。<br>XDに指定した色を覚えさせておけば後で繰り返し使えたり、一括で色が変えられるようになるので最初に作っておきます。<br>四角形のツール（ショートカット：R）を持って、適当な四角を書きます。<br>右側のプロパティから、塗りの色を変更します。<br><br>Command + Shift + Y　を押して、アセットを開きます。<br>一番上の色の横にある＋マークを押すと、選択しているオブジェクトの塗りの色が記憶されます。<br><br>これを３つ作って、<br>黒：文字色　白：背景が黒の場合の色　グレー：写真用<br>を覚えさせておきましょう。<br>次回から図形やテキストの色を付けたい時、これらをクリックするだけでその色を使えます。<br>そして、このパレットの色を変えると、パレットを使用して色付けした全ての図形に反映されます。<br>やっぱり#DDDDDDのグレーじゃなくて#A2A2A2のグレーにしようと思った時、全ての図形をひとつひとつ修正しなくて良いという分けです。<br>&nbsp;<br></p>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<p>→<a href="https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html" target="_blank" rel="noreferrer noopener">XD ショートカットリストはこちら</a></p>


<p><!--—Adsense 記事内広告—--><br>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6319568993978276" data-ad-slot="9396244149"></ins><br>
<script><br />
     (adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></p>


<h3>フォントを決めよう</h3>



<p>色の次はフォントです。<br>コーディングでも使うのですが、現時点ではとりあえず、<br><strong>大きい見出しから順に、h1、h2、h3</strong><br><strong>本文は、pで囲む</strong>と覚えてください。<br>テキストツール（ショートカット：T）を持って適当なところをクリックして文字を入力します。<br>プロパティから文字の大きさ、太さ、フォントを選びます。<br>色は先ほど登録した黒にしたいので、アセットの黒をクリックして色を適用します。<br>このフォントスタイルを覚えさせたいので、これもアセットから登録します。<br>同じように、h2、h3、pを以下のように設定して、アセットに登録してみましょう。</p>



<ul><li>h1：50px　黒　好きなフォント</li><li>H2：36px　黒　好きなフォント</li><li>H3：20px　黒　好きなフォント</li><li>P：16px　黒　好きなフォント</li></ul>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="430" src="https://linksbase.net/new/wp-content/uploads/xdwire6.jpg" alt="" class="wp-image-3832" srcset="https://linksbase.net/new/wp-content/uploads/xdwire6.jpg 800w, https://linksbase.net/new/wp-content/uploads/xdwire6-480x258.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<h3>コンポーネントを使おう</h3>



<p>XDでは、コンポーネントを使うとさらに効率よくワイヤーフレームを作ることができます。<br>コンポーネントは、何度も使うパーツを覚えていてくれて、使いたい時にすぐに使えるライブラリみたいなものです。</p>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/anne.jpg" alt="“ウェブデザイナー目指すアン”"></figure><p class="name">アン</p></div>
<div class="arrow_question">
このテンプレがあれば問い合わせがきたらすぐ対応できそう！
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="500" height="190" src="https://linksbase.net/new/wp-content/uploads/xdwire7.jpg" alt="" class="wp-image-3834" srcset="https://linksbase.net/new/wp-content/uploads/xdwire7.jpg 500w, https://linksbase.net/new/wp-content/uploads/xdwire7-480x182.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" /></figure>



<p>&nbsp;<br>四角形とテキスト、線（ショートカット：L）を使って、このようなボタンと写真のパーツを作ってみましょう。<br></p>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="500" height="827" src="https://linksbase.net/new/wp-content/uploads/xdwire8.jpg" alt="" class="wp-image-3835" srcset="https://linksbase.net/new/wp-content/uploads/xdwire8.jpg 500w, https://linksbase.net/new/wp-content/uploads/xdwire8-480x794.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" /></figure>



<figure class="wp-block-image"><a href="https://linksbase.net/new/wp-content/uploads/xdwire9.jpg"><img decoding="async" loading="lazy" width="1000" height="959" src="https://linksbase.net/new/wp-content/uploads/xdwire9.jpg" alt="" class="wp-image-3836" srcset="https://linksbase.net/new/wp-content/uploads/xdwire9.jpg 1000w, https://linksbase.net/new/wp-content/uploads/xdwire9-980x940.jpg 980w, https://linksbase.net/new/wp-content/uploads/xdwire9-480x460.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw" /></a></figure>



<p><br>パーツができたら、パーツを構成している全ての要素を選択します。<br>該当の範囲をドラッグで囲うか、Shiftを押しながら全ての要素をクリックしていきます。<br>アセットパネルのコンポーネントの横の＋をクリックすると、そのパーツが記憶されます。<br>先ほど作った見出しも、同じようにコンポーネントとして登録すると便利です。<br><br><br><br></p>



<h2>パーツを組み合わせてワイヤーフレームを作ろう</h2>



<p>登録した色、フォント、パーツを組み合わせながら、ヒアリングシートをもとにワイヤーフレームを描いてみましょう！<br>コンポーネントを使う時は、使いたいコンポーネントをアートボードにドラッグするだけでOKです。<br>コンポーネントは、最初に登録したものが<strong>”マスターコンポーネント”</strong>とされます。<br>このマスターコンポーネントの「色」「フォント」「大きさ」などを変更すると、そのコンポーネント全てがマスターコンポーネントと同じように変化します。</p>



<h3>便利なテンプレートを組み合わせる</h3>



<p>上記のようなコンポーネントが作られたXDのテンプレートファイルが、無料/有料でたくさん出回っています。<br>→<a href="https://blogs.adobe.com/japan/web-adobe-xd-ui-kit-wires-jp/" target="_blank" rel="noreferrer noopener">XD日本語テンプレート</a><br>これを利用するのも良いですね！</p>



<h2>もっとWebデザインを学びたい方はこちら</h2>



<h3>ロードマップ目次↓</h3>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="Mhzz1JWFob"><a href="https://linksbase.net/roadmap/">フリーランスウェブデザイナーになるためのロードマップ</a></blockquote><iframe title="&#8220;フリーランスウェブデザイナーになるためのロードマップ&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/roadmap/embed/#?secret=Mhzz1JWFob" data-secret="Mhzz1JWFob" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h3>次回のレッスン↓</h3>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="hFpzG3bM9N"><a href="https://linksbase.net/tonemanner/">Webデザインのトーン＆マナーとブランディング</a></blockquote><iframe title="&#8220;Webデザインのトーン＆マナーとブランディング&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/tonemanner/embed/#?secret=hFpzG3bM9N" data-secret="hFpzG3bM9N" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h3>前回のレッスン↓</h3>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="BuAS59qxSc"><a href="https://linksbase.net/hearingsheet/">ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！</a></blockquote><iframe title="&#8220;ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/hearingsheet/embed/#?secret=BuAS59qxSc" data-secret="BuAS59qxSc" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure><p>The post <a href="https://linksbase.net/xd-wire/">完全初心者OK！XDを使ったワイヤーフレームの書き方</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>フリーランスウェブデザイナーになるためのロードマップ</title>
		<link>https://linksbase.net/roadmap/</link>
		
		<dc:creator><![CDATA[Yukino.1]]></dc:creator>
		<pubDate>Thu, 06 Feb 2020 12:35:22 +0000</pubDate>
				<category><![CDATA[ウェブデザイン]]></category>
		<category><![CDATA[ウェブ制作]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[LP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[クライアントも知りたいウェブ知識]]></category>
		<category><![CDATA[ビジネス]]></category>
		<category><![CDATA[フリーランス]]></category>
		<category><![CDATA[ペルソナ]]></category>
		<category><![CDATA[ロードマップ]]></category>
		<category><![CDATA[働き方]]></category>
		<guid isPermaLink="false">https://linksbase.net/?p=3775</guid>

					<description><![CDATA[<p>未経験からでも、半年で単価30万の案件は獲得できる！スキルはもちろん、マインドセットや個人事業主の税金や、仕事の獲得方法など、フリーランスウェブデザイナーとして独り立ちするまでの流れをまとめたロードマップです。未経験＆初心者のためのハウツー記事集！</p>
<p>The post <a href="https://linksbase.net/roadmap/">フリーランスウェブデザイナーになるためのロードマップ</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></description>
										<content:encoded><![CDATA[<h2>ブログを書いてるのはこんな人 </h2>



<p>私は、デザインもパソコンも、得意だったわけでもありません。 </p>



<p>海外が好きなので、どこでも稼ぐことができたらいいなと思ってウェブデザインの勉強をして今に至ります。</p>



<p> ウェブデザイナーを目指したのは、前職で「残業で稼いでいる」ことに気がついたからです。 <br>新卒のトレーナーや、チームのリーダーも任せてもらったのに、それが給料に反映されず、だらだら残っていることで稼いでいる自分が嫌でした。 </p>



<p>そこからスクールに通い、仕事を辞め、フリーランスとして活動しています。</p>



<h3>フリーランスウェブデザイナーのいいところ</h3>



<p>会社員から比べて、フリーランスのいいところはこんな感じ。</p>



<ul><li>どこでも働ける</li><li>&nbsp;いつでも働ける</li><li>自分で報酬を決められる</li><li>頑張った分だけ報酬がある</li><li>常に新しいことに挑戦できる</li></ul>



<h2>目標決め: あなたにとってのゼロイチはどこ？</h2>



<p>フリーランスウェブデザイナーになる！</p>



<p>と決めたら、「ゼロイチポイント」を決めましょう。 </p>



<p>ゼロイチは、ゼロから初めて、一人前になるポイントのことです。<br>どうなったら自分はフリーランスウェブデザイナーだと言えるか？という目標ポイントですね。 </p>



<p>フリーランスウェブデザイナーと言っても、色々な働き方があります。</p>



<ul><li>完全フリーランスで生計を立てる</li><li>副業として</li><li>子育ての傍ら</li></ul>



<p>働き方が様々ならば、どんな姿を目指すのか、ゼロイチポイントを高く設定するのかどうかも人それぞれです。</p>



<h3>1件30万、時給換算5,000円</h3>



<p>私のゼロイチは、はじめは、ウェブデザインでお金をいただくことでした。</p>



<p>ただ、いざやってみると、その金額が重要だと感じました。 <br>それで目指したのが1件30万の案件を取ることです。<br>だいたいこれで時給5,000円くらいになる計算でした。 </p>



<p>世の中のブログで見るような素早い成長はしてませんが、独立半年で30万の案件を取れた時は、本当に嬉しかったです。 </p>



<p>そしてそのクライアントさんも喜んでくださり、紹介案件にもつながりました。 <br>この件をきっかけに、「フリーランスウェブデザイナーです」と言えるようになったなと思います。   </p>



<h2>イチからはじめられる教材をめざしています</h2>



<p>このブログシリーズが目指していることです。<br>一通りやれば、フリーで活躍できるようになります！</p>



<ol><li>ディレクションができるようになる</li><li>デザインとコーディングができるようになる</li><li>案件獲得と満足のレビューをもらう</li><li>新しい情報に敏感になる</li></ol>



<p>私自身まだ経験は浅いですが、ちゃんと独り立ちできました！<br>だからこそ私がやってきたことを忘れないうちにシェアしたいなと思っています。<br>未経験から独り立ちするまでの手順書のひとつとして、初心者がググっていることの答えになりますように！</p>


<p><!--—Adsense 記事内広告—--><br /><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /><ins class="adsbygoogle" style="display: block; text-align: center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6319568993978276" data-ad-slot="9396244149"></ins><br /><script><br />
     (adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></p>


<h2>フリーランスウェブデザイナーへのロードマップ</h2>



<h3>プランニングしよう</h3>



<h4>ヒアリングシートを作成しよう</h4>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="CEg1DQJ49B"><a href="https://linksbase.net/hearingsheet/">ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！</a></blockquote><iframe title="&#8220;ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/hearingsheet/embed/#?secret=CEg1DQJ49B" data-secret="CEg1DQJ49B" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h3>Adobe XD・イラレを使えるようになろう</h3>



<h4>XDでワイヤーフレームを書いてみよう</h4>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="odFzXxKOo2"><a href="https://linksbase.net/xd-wire/">完全初心者OK！XDを使ったワイヤーフレームの書き方</a></blockquote><iframe title="&#8220;完全初心者OK！XDを使ったワイヤーフレームの書き方&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/xd-wire/embed/#?secret=odFzXxKOo2" data-secret="odFzXxKOo2" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h4>トーンマナーを決めよう</h4>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="aejVruM7qV"><a href="https://linksbase.net/tonemanner/">Webデザインのトーン＆マナーとブランディング</a></blockquote><iframe title="&#8220;Webデザインのトーン＆マナーとブランディング&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/tonemanner/embed/#?secret=aejVruM7qV" data-secret="aejVruM7qV" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h4>魅力的な写真素材を手に入れよう</h4>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="rHYn2MCnDz"><a href="https://linksbase.net/photostock14/">［商用利用可］海外＆日本の無料写真素材サイト14選！</a></blockquote><iframe title="&#8220;［商用利用可］海外＆日本の無料写真素材サイト14選！&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/photostock14/embed/#?secret=rHYn2MCnDz" data-secret="rHYn2MCnDz" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h4>アイコンを手に入れよう</h4>



<h4>ワイヤーフレームをデザインに起こそ</h4>



<h4>デザインを勉強しよう</h4>



<h4>守破離のプロセス</h4>



<h3>HTML CSSがわかるようになろう</h3>



<h4>スクールに通う</h4>



<h4>独学する</h4>



<h4>Yukinoのウェブ制作講座</h4>



<h3>個人事業主になろう</h3>



<h4>屋号を決めよう</h4>



<h4>開業届を出そう</h4>



<h4>会計ツールを使おう</h4>



<h4>源泉徴収を理解しよう</h4>



<h3>ポートフォリオをつくろう</h3>



<h4>自分のサイトをつくる</h4>



<h3>案件をもらう前に準備しよう</h3>



<h4>案件獲得の方法</h4>



<h4>契約書を交わす</h4>


<p><!--—Adsense 記事内広告—--><br>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6319568993978276" data-ad-slot="9396244149"></ins><br>
<script><br />
     (adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></p>


<h3>案件をとろう</h3>



<h4>ココナラで破格リスティング</h4>



<h4>SNSで宣伝しよう</h4>



<h3>生の声で口コミをもらおう</h3>



<h4>アンケートを取ろう</h4>



<h3>Twitterで最新情報をGETしよう</h3>



<h4>フリーランスがつぶやくべきこと</h4>



<h4>フォローすべき先輩たちのアカウント</h4>



<h4>怪しい勧誘に注意</h4>



<h3>継続案件をもらえるようになろう</h3>



<h4>メルマガを始めよう</h4>



<h4>ブログで発信しよう</h4><p>The post <a href="https://linksbase.net/roadmap/">フリーランスウェブデザイナーになるためのロードマップ</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>LPの作り方　競合リサーチ編</title>
		<link>https://linksbase.net/lp-prep-research/</link>
		
		<dc:creator><![CDATA[Yukino.1]]></dc:creator>
		<pubDate>Wed, 18 Dec 2019 01:45:30 +0000</pubDate>
				<category><![CDATA[マーケティング]]></category>
		<category><![CDATA[LP]]></category>
		<category><![CDATA[クライアントも知りたいウェブ知識]]></category>
		<category><![CDATA[ペルソナ]]></category>
		<guid isPermaLink="false">https://linksbase.net/?p=3683</guid>

					<description><![CDATA[<p>LPを作るときに重要なのは、計画性です。LPは「キーワード検索」→「広告をクリック」の流入を想定しているので、同じようなキーワードで広告を出している他社に勝たなければいけません。そのために、まずはリサーチが重要です。まずは競合を知り、自社は何で戦えるか？を知ることから始めましょう。</p>
<p>The post <a href="https://linksbase.net/lp-prep-research/">LPの作り方　競合リサーチ編</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/taka.gif" alt="起業家のタカ"></figure><p class="name">タカ</p></div>
<div class="arrow_question">
名前まで決めるんですか？！ 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/taka.gif" alt="起業家のタカ"></figure><p class="name">タカ</p></div>
<div class="arrow_question">
名前まで決めるんですか？！ 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<h2>LPの作り方。まずは計画！LP制作は戦略的に進めよう</h2>



<p>LPを作るときに重要なのは、計画性です。 </p>



<p>そもそもLPってなに？という人はこちらの記事を読んでから戻ってきてくださいね。</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="PwyK6n5800"><a href="https://linksbase.net/what-is-lp/">ランディングページとは？ホームページとの違いを解説</a></blockquote><iframe title="&#8220;ランディングページとは？ホームページとの違いを解説&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/what-is-lp/embed/#?secret=PwyK6n5800" data-secret="PwyK6n5800" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<p>LPは「キーワード検索」→「広告をクリック」の流入を想定しているので、同じようなキーワードで広告を出している他社に勝たなければいけません。 そのために、まずはリサーチが重要です。 彼を知り己を知れば百戦殆うからず (<a href="https://www.iec.co.jp/kojijyukugo/vo87.htm">https://www.iec.co.jp/kojijyukugo/vo87.htm</a>) ということで、まずは競合を知り、自社は何で戦えるか？を知ることから始めましょう。</p>



<h3>リサーチの目的</h3>



<p>競合を知る目的は二つです。</p>



<ol><li>自社のLP戦略を立てる</li><li>デザインの参考にする</li></ol>



<p>何をCVとしているか？ どういうロジックで構成しているか？ </p>



<p>どんなコンテンツを盛り込んでいるか？ <br>どんな色を使っているか？ </p>



<p>など様々な要素を分析することで、自社のLPはこんな構成で、こんなデザインにしようという計画が論理的にできるようになります。</p>



<h2>競合リサーチ＆分析の準備</h2>



<p>プロジェクトを一人で動かす時も、またチームで動く時も、LP政策にあたりいくつか頭合わせをしておきましょう。</p>



<h3>ターゲットを決める</h3>



<p>どんな人に見てもらうページなのか？ 出来るだけ詳細にイメージできるように構築しましょう。 </p>



<p>ペルソナを作成すると良いですね！ </p>



<p>ペルソナについてはこちら↓</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-linksbase"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="YdwavAShIS"><a href="https://linksbase.net/what-is-persona/">ペルソナとは？ビジネスもブログも顧客像の具体化で成功する！</a></blockquote><iframe title="&#8220;ペルソナとは？ビジネスもブログも顧客像の具体化で成功する！&#8221; &#8212; Linksbase" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://linksbase.net/what-is-persona/embed/#?secret=YdwavAShIS" data-secret="YdwavAShIS" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h3>キーワードを決める</h3>



<p>ターゲットはどんなキーワードで検索するでしょうか？ キーワードプランナーなども利用しながら、書き出していきましょう。 </p>



<p>書き出しておけば、広告出稿の時にも役立ちます。</p>



<h3>デバイスを決める</h3>



<p>一般的に、BtoCの場合はスマホ、BtoBの場合はPCを重視して作ります。 </p>



<p>ターゲットは、どんな時間帯に、どんな場所で、どんなことを考えている時に検索するでしょうか？ </p>



<p>詳細な状況を想像することで、LPの最適化が測れるので、デバイスも考えておきましょう。</p>


<p><!--—Adsense 記事内広告—--><br><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br><ins class="adsbygoogle" style="display: block; text-align: center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6319568993978276" data-ad-slot="9396244149"></ins><br><script><br />
     (adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></p>


<h2>競合LPを探す</h2>



<p>準備が整ったら、競合のLPを探します。 ここでは２つの方法を紹介します。</p>



<h3>キーワード検索で探す</h3>



<p>LP広告用のページなので、競合他社の名前で検索してもLPは出てきにくいでしょう。 </p>



<p>そこで、キーワード検索とデザイン集を使って探します。 </p>



<p>LPは特定の商材やサービスに絞って作られるので、プロジェクトの製品やサービスが同じものを参考にして分析すると良いですね。 </p>



<p>自分がユーザーになったつもりで、キーワード検索してみましょう。 </p>



<p>検索結果の上下とサイドに出てくるものが広告枠ですので、片っ端からクリックしましょう。 <br>自社の商材に近いものがあったらそのページをメモしておきます。 例：「夕飯　宅配」の場合 検索１ページ目に出てきた結果です。 </p>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="234" height="300" src="https://linksbase.net/new/wp-content/uploads/img_searchResult-234x300.png" alt="" class="wp-image-3695"/></figure>



<p>
これを、エクセルにメモ。
</p>



<p>スクリーンショットも貼っておきます。</p>



<h3>デザイン集から探す</h3>



<p>前回の記事で、LPのデザイン集を紹介しました。 </p>



<p>これらのサイトで、業界や色、キーワードを使って、競合のLPを見つけていきましょう。 </p>



<p>この方法が良いのは過去の作品も集められている点です。 </p>



<p>また、ここでのキーワードは先ほどの検索キーワードではなく、とにかく競合のLPにたどり着けるように検索してOKです。 </p>



<p>競合と言えるものがない場合は、関連性の高いものや、イメージカラーが近いものをメモします。 </p>



<h2>競合LPを詳しくみていく</h2>



<p>リサーチで材料集めができたら、情報を整理して分析します。<br>エクセルなどを利用して整理していきましょう！</p>



<h3>比較表</h3>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="531" src="https://linksbase.net/new/wp-content/uploads/img_comparison.jpg" alt="" class="wp-image-3691" srcset="https://linksbase.net/new/wp-content/uploads/img_comparison.jpg 800w, https://linksbase.net/new/wp-content/uploads/img_comparison-480x319.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<p>調べたLPをエクセルに書き出して、比較表を作ります。<br>それぞれのLPのコンテンツや、その順番、こんな感じで作ってみてください。<br></p>



<h3>競合と自社のポジショニング</h3>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="800" height="342" src="https://linksbase.net/new/wp-content/uploads/img_matrix.jpg" alt="" class="wp-image-3692" srcset="https://linksbase.net/new/wp-content/uploads/img_matrix.jpg 800w, https://linksbase.net/new/wp-content/uploads/img_matrix-480x205.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></figure>



<p>競合と自社をポジショニングには、google sheetsのバブルチャートがおすすめ！<br>可視化できてわかりやすいですよ。<br>今回の「夕飯　配達」では、「１食の価格」×「手間」でポジショニングしてみました。<br>このマトリックスは別の軸を使って二つ以上作っても良いと思います。<br></p>



<h3>検証結果をとにかく書き出す</h3>



<p>分析をする中で気づいたことやいいなと思ったポイント、逆にこれは良くないなと思ったポイントなど、とにかく書き出していきます。<br>それが使えるのかは別で、たくさん書き出すことが重要です。<br>チームメンバーでそれぞれに書き出して意見を出し合うと良いでしょう。</p>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/taka.gif" alt="起業家のタカ"></figure><p class="name">タカ</p></div>
<div class="arrow_question">
名前まで決めるんですか？！ 
</div></div>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/akane.png" alt="サロン経営のアカネ"></figure><p class="name">アカネ</p></div>
<div class="arrow_question">
考えたペルソナが本当に適切かわからなくなりそう·· 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<h2>今回参考にさせていただいた記事</h2>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-lp制作・改善のコンバージョンラボ"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="xyjt6JIKwp"><a href="https://conversion-labo.jp/report/lp_design/7790/">ランディングページ制作に欠かせない競合LP調査</a></blockquote><iframe title="&#8220;ランディングページ制作に欠かせない競合LP調査&#8221; &#8212; lp制作・改善のコンバージョンラボ" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://conversion-labo.jp/report/lp_design/7790/embed/#?secret=xyjt6JIKwp" data-secret="xyjt6JIKwp" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure><p>The post <a href="https://linksbase.net/lp-prep-research/">LPの作り方　競合リサーチ編</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ランディングページとは？ホームページとの違いを解説</title>
		<link>https://linksbase.net/what-is-lp/</link>
		
		<dc:creator><![CDATA[Yukino.1]]></dc:creator>
		<pubDate>Sun, 15 Dec 2019 04:07:11 +0000</pubDate>
				<category><![CDATA[マーケティング]]></category>
		<category><![CDATA[LP]]></category>
		<category><![CDATA[クライアントも知りたいウェブ知識]]></category>
		<category><![CDATA[ビジネス]]></category>
		<category><![CDATA[ペルソナ]]></category>
		<guid isPermaLink="false">https://linksbase.net/?p=3661</guid>

					<description><![CDATA[<p>目的・ターゲットの違い ランディングページとホームページの一番の違いは制作目的です。 ホームページは、会社やサービスの説明のために用意され、比較的幅広いターゲット層が想定されます。 例えば下記のような人たちが考えられます [&#8230;]</p>
<p>The post <a href="https://linksbase.net/what-is-lp/">ランディングページとは？ホームページとの違いを解説</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/taka.gif" alt="起業家のタカ"></figure><p class="name">タカ</p></div>
<div class="arrow_question">
名前まで決めるんですか？！ 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<h2>目的・ターゲットの違い</h2>



<p>ランディングページとホームページの一番の違いは<strong>制作目的</strong>です。 ホームページは、会社やサービスの説明のために用意され、比較的幅広いターゲット層が想定されます。 例えば下記のような人たちが考えられます。 ・取引先 ・顧客 ・求職者 これに対してランディングページは、<strong>特定のキャンペーンのCV（コンバージョン）を上げる</strong>のが目的です。</p>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<p>LPは、意図したCVにつながるように、ターゲットが細かく設定されています。 その結果、コンテンツが限定的でそのコンテンツについて深く展開されているのが特徴です。</p>



<h3>導線・デザインの違い</h3>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="435" height="1024" src="https://linksbase.net/new/wp-content/uploads/lp_example-435x1024.jpg" alt="" class="wp-image-3676"/></figure>



<p>ホームページは幅広いターゲットを想定していることもあり、ユーザーがクリックして遷移できる導線が複数あります。<br> またそのクリックした先にはまた新たなページが用意されています。 </p>



<p>さらに、ブランディングを意識したサイトの場合、ボタンなどな特別目立つようにデザインされていなかったり、アニメーションを利用して時間をかけて見るような凝ったつくりになっていたりします。 </p>



<p>対してランディングページはターゲットが細かく設定され、問い合わせや購入などのアクションを起こさせることを目標にしているので、導線も囲い込むように作られます。<br> 従って当然、クリックした先には購入ページや問い合わせフォームが用意されています。 </p>



<p>また、ランディングページを見ているのは広告をクリックした人であり、その人たちは<strong>何かに困っていてその緊急性も高い</strong>ことが想定できます。 <br>そのため、デザインもブランドイメージを残しつつも、分かりやすいブロック分けや、見出しで内容が分かるようなメリハリのあるデザイン、アクションへ繋がるボタンに奇抜な色が使われたりしています。 </p>



<p>ランディングページ: 大きくわかりやすい色でボタンがデザインされ、ページ内に複数箇所、遷移先が同じ（申込）ボタンが設置されている。 </p>



<h3>ユーザーの入り口の違い</h3>



<p>もうひとつホームページとランディングページの大きな違いがあります。 <br>それは、<strong>「ユーザがどこから入ってくるか」</strong>です。 <br>ホームページは検索エンジンからのユーザーが流入しやすくなります。 複数ページに渡りさまざまな情報を網羅するため、コンテンツが充実しやすく、SEOに効果的だからです。<br> 対してランディングページは1ページで完結するため<strong>SEOには向いていません</strong>。 <br>しかし特定のユーザーを説得するのに効果的なので、ウェブ広告で狙ったユーザーの流入を促すのが良いでしょう。</p>



<figure class="wp-block-table"><table class=""><tbody><tr><td>&nbsp;</td><td>HP</td><td>LP</td></tr><tr><td>目的</td><td>会社やサービスの説明すること</td><td>キャンペーンの成果を上げること</td></tr><tr><td>ターゲット層</td><td>広い</td><td>狭い</td></tr><tr><td>コンテンツ</td><td>多様</td><td>限定的</td></tr><tr><td>ユーザーの入り口</td><td>検索エンジン</td><td>ウェブ広告</td></tr></tbody></table></figure>


<p><!--—Adsense 記事内広告—--><br><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br><ins class="adsbygoogle" style="display: block; text-align: center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6319568993978276" data-ad-slot="9396244149"></ins><br><script><br />
     (adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></p>


<h2>HPとLP こんなふうに使い分けよう</h2>



<p>ホームページとランディングページの違いがわかったら、実際にどんなふうに使い分ければいいかみていきます。<br>例として、こんな企業があるとします。<br>ドライフルーツ製造販売のA社<br>少人数で運営しているので卸売対象に営業をかける人材を雇う代わりにウェブ広告を使っている。<br>顧客層</p>



<ul><li>店舗販売する一般客</li><li>卸売対象の飲食店</li><li>卸売対象のスーパーマーケット</li></ul>



<p>
ホームページの使い方<br>全ての顧客層に向けた情報を掲載<br>コンテンツ

</p>



<ul><li>会社情報<br>概要、所在地、来歴など</li><li>製品情報<br>ラインナップ紹介、新製品情報など</li><li>最新情報<br>イベント出店情報、休業日連絡など</li></ul>



<p>

ランディングページの使い方<br>飲食店への卸売販売強化のためのウェブ広告用<br>コンテンツ

</p>



<ul><li>製品情報<br>こだわりの原料について、お酒との相性表、アレンジレシピ</li><li>卸売価格<br>知りたくなるようにデザインし、CVへ誘導</li><li>レビュー</li><li>専用問い合わせフォーム=CV</li></ul>



<h2>LPの参考デザイン集</h2>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/akane.png" alt="サロン経営のアカネ"></figure><p class="name">アカネ</p></div>
<div class="arrow_question">
考えたペルソナが本当に適切かわからなくなりそう·· 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<ul><li><a href="http://lp-web.com/" target="_blank" rel="noreferrer noopener">ランディングページ集めました</a></li><li><a href="https://site-advance.info/" target="_blank" rel="noreferrer noopener">LP advance</a></li></ul>



<p></p><p>The post <a href="https://linksbase.net/what-is-lp/">ランディングページとは？ホームページとの違いを解説</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ホームページで集客する方法！大事なのは更新と運用です</title>
		<link>https://linksbase.net/get-web-traffic/</link>
		
		<dc:creator><![CDATA[Yukino.1]]></dc:creator>
		<pubDate>Sun, 15 Dec 2019 03:25:40 +0000</pubDate>
				<category><![CDATA[マーケティング]]></category>
		<category><![CDATA[LP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[クライアントも知りたいウェブ知識]]></category>
		<category><![CDATA[ビジネス]]></category>
		<category><![CDATA[ペルソナ]]></category>
		<guid isPermaLink="false">https://linksbase.net/?p=3656</guid>

					<description><![CDATA[<p>ホームページに集客できなくて困っている方、ウェブ集客のために何かやっていますか？ホームページは何もしなければ絶対に誰も来ません。ホームページに集客するには、SEO対策と広告運用がキーです。今日から無料で始められる方法をご紹介します。</p>
<p>The post <a href="https://linksbase.net/get-web-traffic/">ホームページで集客する方法！大事なのは更新と運用です</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></description>
										<content:encoded><![CDATA[<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/akane.png" alt="サロン経営のアカネ"></figure><p class="name">アカネ</p></div>
<div class="arrow_question">
考えたペルソナが本当に適切かわからなくなりそう·· 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<h2>あなたがホームページに集客できない理由</h2>



<p>ホームページに集客できなくて困っている方、ウェブ集客のために何かやっていますか？ ホームページは何もしなければ絶対に誰も来ません。 これ、絶対です。 逆に何か手をかけてやってれば、多かれ少なかれ反応が出てきます。 やっているのに集客できない！という方は頑張り方がずれているかもしれません。 ホームページ集客で悩んでしまう人は、そもそも悩むポイントが違っていることが多いです。 具体的にみていきましょう。</p>



<h3>ホームページで集客できない人の特徴</h3>



<ul><li>デザインがよくないのかなあ・・？ →デザインはそもそもアクセスが来ていないので今考える問題ではない</li><li>裏側のコードが良くないんじゃ・・？ →検索順位を上げるコードはありません。</li><li>&nbsp;SNSと連携させればどうだろう・・？ →SNSにも集客しなければいけなくなりますよ</li></ul>



<p>当てはまる方、いますぐ頭を空っぽにしましょう！ それでは、頑張るポイントを解説します。   </p>



<h2>ホームページ集客は更新と運用</h2>



<p>ホームページに集客するには、「更新」と「運用」の大きく２つの方法があります。<br>「更新」はSEO対策、「運用」は広告運用です。<br>難しそうに聞こえるかもしれませんが、必要なのは忍耐力。<br>多くの人が自分でやる部分は、SEOのためのコンテンツ更新になるのですが、 これは早くて３ヶ月、大抵半年〜１年はかけないといけません。<br>したがって、忍耐力が必要ですし、上司に急かされてもすぐには効果が出ないことを説明できなければいけません。<br>どういうことか？<br>詳しくみていきましょう。</p>



<h3>ウェブ集客の方法１: SEO対策はブログ更新</h3>



<p>SEO対策をすることで、キーワード検索の順位をあげることができます。<br>具体的には主にブログなどを更新していくことでコンテンツを充実させ、徐々に検索にひっかかるように仕掛けていきます。<br>SEOはSearch Engine Optimizationの頭文字で、直訳すると検索エンジン最適化。<br>SEO対策というと、googleやyahooなどの検索エンジンに見つけてもらいやすくするための施策を指します。<br>検索エンジンはいくつかありますが、<strong>最大手であるgoogle</strong>に対して対策すれば大丈夫です。</p>



<h4>googleはどうやって順位を決めるか</h4>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/taka.gif" alt="起業家のタカ"></figure><p class="name">タカ</p></div>
<div class="arrow_question">
名前まで決めるんですか？！ 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<p>実は、googleが検索順位を決めるアルゴリズムは公開されておらず、google社員にすらわからないものです。<br>ただひとつ確実なことは、googleのサービスは、ユーザーが検索した疑問を解決する情報を提供することだ、ということです。<br>したがって、googleは、検索キーワードの答えになる情報を上位にあげるように組まれているのです。<br>とはいえ良いコンテンツをひとつ書いたとして検索順位が上がるわけではありません。<br>コンテンツの質に加えて、サイト自体の信頼性も上げていく必要があります。<br>複数のコンテンツに渡って有益な情報が掲載されていたり、その証拠にSNSや他のサイトでシェアされていたり（被リンク）といったことから、サイトの信頼性を測っています。</p>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<p>というわけで、<strong>「質のいいコンテンツ」 ×「サイトの信頼性」</strong>がgoogle攻略のキーです！</p>



<h4>&nbsp;hタグを使って良質コンテンツを作ろう</h4>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/taka.gif" alt="起業家のタカ"></figure><p class="name">タカ</p></div>
<div class="arrow_question">
名前まで決めるんですか？！ 
</div></div>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<p>googleに理解してもらいやすくするためには、<strong>hタグ</strong>が重要です。<br>書くことを整理するのにも使えるのでマスターしましょう。<br>hタグとは見出しタグのことで、ウェブサイトを表示させるためのhtml言語で使われる指示のひとつです。<br>使い方はとっても簡単！<br>&lt;h1&gt;見出し1&lt;/h1&gt;<br>という感じで文章を挟むように書きます。<br>一番重要なタイトルがh1<br>その次がh2<br>その次がh3<br>という具合に使います。<br>例えば、神戸でおすすめのピザ屋を紹介するならこんな感じ。
&lt;h1&gt;本当は教えたくない！神戸屈指のおすすめピザ屋さん５選&lt;/h1&gt;<br>&lt;h2&gt;中華街エリアで見つけた神戸の本格ピザ&lt;/h2&gt;<br>&lt;h2&gt;神戸北野でいただくセレブピザ&lt;/h2&gt;<br>&lt;h3&gt;テラス席もお洒落でグッド！&lt;/h3&gt;

</p>



<!--YUKINO-->
<div class="question_Box"><div class="question_image"><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/yukino.jpeg" alt="LinksbaseデザイナーのYukino"><p class="name">Yukino</p></div>
<div class="arrow_question">
Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。
</div></div>



<h4>WordPressでhタグを入れる方法</h4>



<ol><li>ビジュアルエディタ画面<br>左上のドロップダウンから設定できます。簡単！<br></li><li>「Text」に切り替えてタグを記入<br>上記のコードを使う場合は、Textタブに切り替える必要があります。<br></li></ol>



<h4>ブログ更新のステップ</h4>



<p>良質なコンテンツを書くためにはステップがあります。<br>とっても奥深いので基本だけ紹介します。</p>



<ol><li>タイトルを決める<br>* 検索してもらいたいキーワードを含めながら魅力的なタイトルを考えます。</li><li>hタグで見出しを作る<br>* 検索したユーザーの疑問に答えることに集中して説明する順番を書き出します。</li><li>コンテンツを書く<br>* あとは見出しに沿って文章を書いていきます。</li></ol>



<p>このように順を追って書いていけば、内容がぶれずに済みます。<br>また、初めて読む人にも理解しやすい論理的な文章になりやすいです。<br>後は<strong>量産</strong>。<br>こんな強者もいて、ウェブ集客のためのブログが収益化するのも夢じゃありません。</p>



<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/manabubannai/status/1116666460649050112?ref_src=twsrc%5Etfw
</div></figure>



<p>Googleが認知するまでには3ヶ月ほどかかるので、出来るだけたくさん書いて3ヶ月後くらいから分析を始めましょう！</p>


<p><!--—Adsense 記事内広告—--><br>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6319568993978276" data-ad-slot="9396244149"></ins><br>
<script><br />
     (adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></p>


<h3>ウェブ集客の方法２: 広告運用はプロとタッグを組む</h3>



<p>「運用」は広告を出稿して集客することです。<br>検索したら、下図のような具合に出てくる広告を出稿して、ホームページに誘導します。<br>SEO対策は基本的に無料でできるのに対し、<strong>広告出稿にはお金がかかります</strong>。<br>また、戦略と分析が重要なので、こちらは<strong>専門の業者を利用することをお勧めします</strong>。<br>自社にマーケティング担当がいて俯瞰的な視点から運用ができるのであれば自社で賄えるのですが、なかなかそうはいかないことが多いのではないでしょうか。<br>SEO対策でのコンテンツ制作は、サービスや商品、業界の情報を発信するので、精通した人をを担当に立てるのが良いでしょう。</p>



<h2>LPで短期的に結果を出す</h2>



<p>広告の効果を最大限にするためには、<strong>ランディングページ</strong>を用意するのが得策です。<br>広告は、ニーズが高い人にクリックしてもらいやすいので、問い合わせや購入といった導線を作った方がより効果的です。<br>その導線を敷いたページがランディングページです。<br>詳しくはこちらの記事にまとめたのでチェックしてください。</p>



<h3>便利な分析ツール</h3>



<p>「更新」と「運用」を始めたら動きを分析しましょう。<br>有名どころをこちらにあげておきます。</p>



<ul><li><a href="https://analytics.google.com/analytics/web/" target="_blank" rel="noreferrer noopener">Google Analytics</a></li><li><a href="https://neilpatel.com/jp/ubersuggest/" target="_blank" rel="noreferrer noopener">Uber Suggest</a></li><li><a href="http://checker.search-rank-check.com/" target="_blank" rel="noreferrer noopener">検索順位チェッカー</a></li></ul>



<h2>まずは行動！ウェブ集客のためにブログを書こう</h2>



<p>ホームページで集客するには更新と運用、つまりブログ更新と広告運用が大切だという話をしました。<br>ブログは誰でも今日から始められます！<br>私のこのブログもまだ始めたばかりですが、とにかく書くことが大切だと痛感しています。<br>こういった記事を参考にしながら、書くことに集中してみてくださいね！</p>



<div class="question_Box"><div class="question_image"><figure><img decoding="async" src="https://linksbase.net/new/wp-content/uploads/akane.png" alt="サロン経営のアカネ"></figure><p class="name">アカネ</p></div>
<div class="arrow_question">
考えたペルソナが本当に適切かわからなくなりそう·· 
</div></div><p>The post <a href="https://linksbase.net/get-web-traffic/">ホームページで集客する方法！大事なのは更新と運用です</a> first appeared on <a href="https://linksbase.net">Linksbase</a>.</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
