<?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>ブログデザイン | アラフィフエイト｜ 50代からでもアフィリエイトは遅くない</title>
	<atom:link href="https://arafifate.com/tag/%e3%83%96%e3%83%ad%e3%82%b0%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/feed" rel="self" type="application/rss+xml" />
	<link>https://arafifate.com</link>
	<description>『アラフィフエイト』は初めてアフィリエイトブログに取り組むブログ初心者の教科書です。老後に備えて今から副業で稼ぐ仕組みを作りながら、収益が発生するアフィリエイト自動化戦略をお伝えしています。</description>
	<lastBuildDate>Sat, 27 Aug 2022 10:51:14 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.13</generator>

<image>
	<url>https://arafifate.com/wp-content/uploads/2022/03/cropped-z05-32x32.png</url>
	<title>ブログデザイン | アラフィフエイト｜ 50代からでもアフィリエイトは遅くない</title>
	<link>https://arafifate.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"/>
<atom:link rel="self" href="https://arafifate.com/tag/%e3%83%96%e3%83%ad%e3%82%b0%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/feed"/>
	<item>
		<title>【ブログ初心者必見！】読まれるブログにする為のデザインテクニック11選</title>
		<link>https://arafifate.com/beginner/design-technique.html</link>
					<comments>https://arafifate.com/beginner/design-technique.html#respond</comments>
		
		<dc:creator><![CDATA[redeagle01]]></dc:creator>
		<pubDate>Thu, 19 Nov 2020 05:24:19 +0000</pubDate>
				<category><![CDATA[初心者]]></category>
		<category><![CDATA[ブログデザイン]]></category>
		<guid isPermaLink="false">https://arafifate.com/?p=1194</guid>

					<description><![CDATA[<p>初心者がブログを立ち上げた際に、デザインはどの範囲まで行えばいいの？と悩んだ事はありませんか？ [su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px s [&#8230;]</p>
The post <a href="https://arafifate.com/beginner/design-technique.html">【ブログ初心者必見！】読まれるブログにする為のデザインテクニック11選</a> first appeared on <a href="https://arafifate.com">アラフィフエイト｜ 50代からでもアフィリエイトは遅くない</a>.]]></description>
										<content:encoded><![CDATA[<p><strong>初心者がブログを立ち上げた際に、デザインはどの範囲まで行えばいいの？と悩んだ事はありませんか？</strong></p>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-check-square" style="color:#B71313"></i> ブログのデザインってどういう意味？</li>
<li><i class="sui sui-check-square" style="color:#B71313"></i> ブログにデザインをする目的が分からない</li>
<li><i class="sui sui-check-square" style="color:#B71313"></i> 具体的なブログのデザインテクニックを知りたい</li>
</ul>
</div>[/su_panel]
<p>こんな悩みや疑問を解決します。</p>
<div class="su-box su-box-style-glass" id="" style="border-color:#2c000f;border-radius:6px;max-width:none"><div class="su-box-title" style="background-color:#5F1A42;color:#FFFFFF;border-top-left-radius:4px;border-top-right-radius:4px">本記事の内容</div><div class="su-box-content su-u-clearfix su-u-trim" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px"><div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-arrow-circle-right" style="color:#F39800"></i> <strong>ブログデザインの3大要素を理解する</strong></li>
<li><i class="sui sui-arrow-circle-right" style="color:#F39800"></i> <strong>読まれるブログにする為のマル秘テクニック11選</strong></li>
<li><i class="sui sui-arrow-circle-right" style="color:#F39800"></i> <strong>デザインに役立つWebサイトのご紹介</strong></li>
</ul>
</div> </div></div>
<p>ブログ初心者は、覚えなければいけないことがたくさんあります。そんな中で、「デザインまでこだわってブログを作っている時間なんてないよ」思っているかもしれませんね。</p>
<p>最初からデザインに拘ったブログを作成するのは少し難しいです。ですから、ブログのアクセスが増えてきた時点で、デザインを見直していきましょう。</p>
<p><strong>デザインの究極の目的は、『読者ファーストを実現する事』</strong>です。この記事を最後まで読むことによって、<span class="dot"> <strong>読者ファーストを実現するためにデザインで行うべき11のテクニックを知る</strong> </span>ことができます。</p>
<p>ぜひ、最後まで記事を読んであなたのブログにデザインテクニックを使ってくださいね。</p>
<h2>ブログの三大要素を理解する</h2>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-9802 size-full" src="https://arafifate.com/wp-content/uploads/2020/12/blog-dezain.jpg" alt="ブログのデザイン" width="682" height="358" srcset="https://arafifate.com/wp-content/uploads/2020/12/blog-dezain.jpg 682w, https://arafifate.com/wp-content/uploads/2020/12/blog-dezain-300x157.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>ブログにおける読者ファーストを考えた場合、最低でも以下に紹介する<strong>三つの要素は必ず意識してブログを作っていきましょう。</strong></p>
<p>この三大要素をブログ全体、そして各記事に反映させることによって、あなたのブログは他の多くのブログと差別化されて見やすい読者ファーストを意識したブログに生まれ変わります。</p>
<p>結果として、他のブログとの差別化ができて、あなたが作ったブログのファンが生まれ、アクセスが増えるという好循環を生むことになります。</p>
<div class="su-box su-box-style-glass" id="" style="border-color:#2c000f;border-radius:6px;max-width:none"><div class="su-box-title" style="background-color:#5F1A42;color:#FFFFFF;border-top-left-radius:4px;border-top-right-radius:4px">ブログに必要な3大要素</div><div class="su-box-content su-u-clearfix su-u-trim" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px"><div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-arrow-circle-right" style="color:#F39800"></i> <strong>ブログ全体の色合いに注意する</strong></li>
<li><i class="sui sui-arrow-circle-right" style="color:#F39800"></i> <strong>ブログに統一感を持たせる</strong></li>
<li><i class="sui sui-arrow-circle-right" style="color:#F39800"></i> <strong>最低でもH2の下に画像を挿入する</strong></li>
</ul>
</div> </div></div>
以下から、それぞれ解説します。</p>
<h3>ブログ全体の色合いを考えながらブログを構築していく</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-1242 size-full" src="https://arafifate.com/wp-content/uploads/2020/10/pencil-4552590_1920-e1661577342766.jpg" alt="色合い" width="682" height="384" />[/su_panel]
<p><strong>ブログ全体の色合いについては、あなたが想定しているターゲット、あるいはターゲットを更に細かく設定したペルソナに合わせて考えていきましょう。</strong></p>
<p>例を挙げておきます。</p>
<p>例えば、あなたが狙うターゲット層が20代前半の女性だとします。そうすると、今の二十代の女性が好む色合いはどんな色だろうか？</p>
<p>それを考えることがブログの出発点になります。<span class="dot"> <strong>必要なことはリサーチ</strong> </span>です。</p>
<p>二十代前半の女性がよく読む雑誌や生活スタイル、ファッションの傾向など色々とリサーチした上でブログの色合いを決めていきましょう。</p>
<p>例えば、赤やピンクを多く使った色になる場合もあるでしょう。あなたが作ろうとしているブログのジャンルで、どのようなブログが作られているかをしっかりリサーチしていきましょう。</p>
<p>次に狙うターゲット層が30代後半の男性だとします。その場合ならどうでしょうか？</p>
<p>まさか前述した赤やピンクを主体とした色合いにはしないはずです。先ほどとは逆に、グレーや青などの落ち着いた色合いにしていくはずです。</p>
<p>この二つの例からも分かるように、<span class="dot"> <strong>狙うターゲット層によって、ブログの色合いも変わってくる</strong> </span>という事です。</p>
<p>もう一つ例を挙げておきましょう。</p>
<p>次はジャンルによって色を使い分けるという例です。あなたはFX関連のブログを立ち上げるとします。</p>
<p>ターゲットは三十代前半の男性です。この場合はいかがでしょうか？</p>
<p>先ほどのブルーに加えて、黒っぽい色やグレー、紫色なども面白いかもしれません。全体的に少し派手なデザインが良いかもしれないです。</p>
<p>いくつか例を挙げましたが、<span class="dot"> <strong>ブログで狙っているターゲット層やジャンルによってもブログのデザインは考えていかないといけない</strong> </span>ということが分かりますね。</p>
<h3>デザインに統一性を持たせる</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-1213 size-full" src="https://arafifate.com/wp-content/uploads/2020/10/neven-krcmarek-V4EOZj7g1gw-unsplash-e1661577688708.jpg" alt="デザインの統一性" width="681" height="356" srcset="https://arafifate.com/wp-content/uploads/2020/10/neven-krcmarek-V4EOZj7g1gw-unsplash-e1661577688708.jpg 681w, https://arafifate.com/wp-content/uploads/2020/10/neven-krcmarek-V4EOZj7g1gw-unsplash-e1661577688708-300x157.jpg 300w" sizes="(max-width: 681px) 100vw, 681px" />[/su_panel]
<p>次に見ていくのはブログ全体のデザインについてです。<strong>デザインを統一することで読者にとって、ブログ記事は見やすくなります。</strong></p>
<p>ブログの中で統一した方がいいデザインの例をいくつかあげておきます。<br />
<div class="su-note"  style="border-color:#d5dbaf;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;"><div class="su-note-inner su-u-clearfix su-u-trim" style="background-color:#eff5c9;border-color:#ffffff;color:#FFFFF;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;"><div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-file" style="color:#b71313"></i> フォントの統一　　→ページ毎にフォントを変更しない</li>
<li><i class="sui sui-file" style="color:#b71313"></i> 画像の大きさ　　　→画像の大きさを統一する</li>
<li><i class="sui sui-file" style="color:#b71313"></i> 記事中の枠　　　　→ある程度は柔軟性を持たせてもいいが統一感が必要</li>
<li><i class="sui sui-file" style="color:#b71313"></i> 文字の大きさ　　　→どのページも文字の大きさを統一する</li>
</ul>
</div></div></div>
<p>これらの要素を統一するだけで、読みやすいブログへと生まれ変わります。</p>
<h3>画像の挿入と挿入位置について</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10070 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/gazou-ichi.jpg" alt="画像の位置" width="682" height="341" srcset="https://arafifate.com/wp-content/uploads/2020/11/gazou-ichi.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/gazou-ichi-300x150.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>初心者が作るブログに多いのが文字ばかりのブログです。私もブログを作り始めた当初は画像をほとんど挿入していませんでした。</p>
<p>今見ると、とても酷いブログで、とても人様に見せらられる代物ではありません。（笑）</p>
<p>今はブログをユーザーの八割がスマホユーザーだと云われています。ユーザー側に立ってみると分かりますが，<strong>ぎっしりと文字が詰まったブログ記事って、正直なところ読む気がしない</strong>ですよね。</p>
<p><span class="dot"> <strong>モバイルファーストを実現する為にも、上下にスクロールした際に、画像が一つは入るように工夫したい</strong> </span>ものです。</p>
<p>画像を挿入するタイミングですが、ひと通り記事を書き終わってから、記事のイメージに合うものを探していきましょう。</p>
<p><span class="dot"> <strong>画像の挿入位置ですが、私はH2の見出しの直下に画像を入れる</strong> </span>ようにしましょう。その時に挿入する画像は<strong>横長の画像をオススメ</strong>します。</p>
<p>スマホでブログを見ることを想定した場合、縦長の画像だとスマホの画面が画像だけになってしまいます。記事を見てもらう為にも横長の画像がオススメです。</p>
<p>H2の見出しのすぐ下に画像を入れる理由は、記事の内容に合った画像を入れることによって、読者に記事を読む心構えをしてもらったり、記事の内容をイメージしやすくしてもらう為です。</p>
<p>記事の設計については以下のリンクから詳しく解説しています。ぜひ、ご覧ください。</p>
<p><a href="https://arafifate.com/writing/thorough-instructions-on-how-to-write-a-blog.html">https://arafifate.com/writing/thorough-instructions-on-how-to-write-a-blog.html</a></p>
<h2>読まれるブログにする為のマル秘テクニック11</h2>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10071 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/design-skill.jpg" alt="デザインスキル" width="682" height="319" srcset="https://arafifate.com/wp-content/uploads/2020/11/design-skill.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/design-skill-300x140.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>ここからは、具体的に読者ファーストを最大限にする為に、どんなデザインに関するテクニックを使っていくかについて解説します。</p>
<p>「もっとデザインを良くする方法っていっぱいあるよ」と考える人もいると思いますが、ここでは私がブログを作るときに意識している11のテクニックを紹介します。<br />
<div class="su-box su-box-style-glass" id="" style="border-color:#2c000f;border-radius:6px;max-width:none"><div class="su-box-title" style="background-color:#5F1A42;color:#FFFFFF;border-top-left-radius:4px;border-top-right-radius:4px">ブログの見映えを良くする11のマル秘テクニック</div><div class="su-box-content su-u-clearfix su-u-trim" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px"><div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> メインカラーはシンプルな色にする</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> オシャレな配色パターンを真似する</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 見出しを装飾する</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 見やすいフォントにする</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> フォントの大きさに合わせて行間を調整する</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> リンク色は必ず青にする</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> ヘッダーに広告を置きすぎない</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 1記事に最低でも一つの画像を配置する</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 読者が記事の内容を理解しやすいように工夫する</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 吹き出しを使って会話調を取り入れる</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 文字の色を使い過ぎない</li>
</ul>
</div> </div></div>
<p>以下から、それぞれ解説します。</p>
<h3>テクニック①メインカラーはシンプルな色にする</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10074 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/blog-color.jpg" alt="ブログの配色" width="682" height="319" srcset="https://arafifate.com/wp-content/uploads/2020/11/blog-color.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/blog-color-300x140.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>私は毎日記事を書いているので、ライバルチェックは毎日行います。その関連で、人が書いたブログも毎日見ています。</p>
<p>最近はブロガーも個性的な人が増えてきて、個性的でおしゃれなブログもよく見かけるようになりました。</p>
<p>でも、初心者がおしゃれで、あまりにも個性的なブログのデザインを参考にするのは少々無理があります。また、最初から自分がおしゃれで個性的なブログを作るのは難しいです。</p>
<p>それよりも、<strong>一番意識しないといけないのは、読者ファースト</strong>です。いかにブログに訪れた読者がストレスなしに記事を読み進めることが出来るか？</p>
<p>それこそが<span class="dot"> <strong>私たち情報を発信していく者が心がける事</strong> </span>です。</p>
<p>初心者が最初に作るブログの色は白をベースに、その他の色は黒、グレーなどのシンプルな色合いのブログにすれば一番無難だと思います。</p>
<p>ワードプレスを導入していれば、どんな色も使う事は可能です。</p>
<p>そうなると、人間は不思議なもので人とは違う色を使いたくなりますが、そこはグッと我慢して読者ファーストを念頭に考えて色を使いましょう。</p>
<h3>テクニック②オシャレな配色パターンを真似する</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10075 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/blog-color2.png" alt="オシャレなブログ配色" width="682" height="384" srcset="https://arafifate.com/wp-content/uploads/2020/11/blog-color2.png 682w, https://arafifate.com/wp-content/uploads/2020/11/blog-color2-300x169.png 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>白や黒、グレーなどはみんなが使っているので、もう少し個性を出したいと考える人もいるでしょう。</p>
<p>もし、最初から個性を出したいと思うのであれば、どの色とどの色を組み合わせれば見やすくおしゃれになるかを考えて配色しましょう。</p>
<p>とは言っても、デザイナーでもなければ、どんな配色がいいかなんて分かりっこないですよね。</p>
<p>そこで、ここでは非常に参考になるサイトをご紹介します。<strong>サルカワさんが提供する「COOL COLORS」</strong>です。</p>
<div class="su-button-center"><a href="https://saruwakakun.com/design/gallery/palette" class="su-button su-button-style-glass" style="color:#FFFFFF;background-color:#b71313;border-color:#931010;border-radius:0px" target="_blank" rel="noopener noreferrer"><span style="color:#FFFFFF;padding:9px 30px;font-size:22px;line-height:33px;border-color:#cd5a5a;border-radius:0px;text-shadow:none"><i class="sui sui-arrow-circle-right" style="font-size:22px;color:#FFFFFF"></i> 配色パターン見本40選を見る</span></a></div>
<div class="su-spacer" style="height:20px"></div>
「サルカワさん」はブロガーの間では有名な方です。どう有名かと言うと、あの<span class="dot"> <strong>人気ワードプレステーマ「SANGO」の開発者</strong> </span>です。</p>
<p>私もSANGOでいくつかブログを作っていますが、独特の世界感を醸し出している非常のおしゃれなテンプレートです。</p>
<p>男性、女性どちらにも人気のあるテンプレートです。紹介はさておいて、このページには40個のおしゃれな配色パターンが紹介されています。</p>
<p>色コードも表示されているので、非常に使いやすいです。あなたが気に入った配色パターンを見つけたらクリックしてみてください。</p>
<p>右側にその配色を使ったプレビューを見ることが出来ます。<span class="dot"> <strong>自分の好みに合った配色パターンをそのまま使える便利なツール</strong> </span>に仕上がっています。</p>
<p>きっとあなたが気に入る配色パターンを見つける事ができると思いますよ。</p>
<h3>テクニック③見出しを装飾する</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10076 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/blog.jpg" alt="ブログの見出し" width="682" height="380" srcset="https://arafifate.com/wp-content/uploads/2020/11/blog.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/blog-300x167.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>見出しを作ることによって、読者が文章全体の構成を把握して、読み進めやすいようになります。</p>
<p>ただ、見出しも単に大きいだけでは、ちょっともったいないです。せっかくなので、<strong>見出しもおしゃれなデザインを取り入れましょう。</strong></p>
<p><span class="dot"> <strong>ブログデザインは、CSSをいじることによって、装飾することができます。</strong> </span>「CSS」いうのは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。</p>
<p>「HTML」と同じマークアップ言語の一種です。HTMLと違うのはデザイン、装飾のために作られている言語だ言うことです。</p>
<p>素人がCSSを触るのはかなり困難です。</p>
<p>そこで、<span class="dot"> <strong>コピペだけで簡単にデザインを装飾できるのが今回ご紹介する「Nomad Code」</strong> </span>です。</p>
<div class="su-button-center"><a href="https://code.nomad.inc/" class="su-button su-button-style-glass" style="color:#FFFFFF;background-color:#b71313;border-color:#931010;border-radius:0px" target="_blank" rel="noopener noreferrer"><span style="color:#FFFFFF;padding:9px 30px;font-size:22px;line-height:33px;border-color:#cd5a5a;border-radius:0px;text-shadow:none"><i class="sui sui-arrow-circle-right" style="font-size:22px;color:#FFFFFF"></i> 「Nomad Code」でブログをデザインする</span></a></div>
<div class="su-spacer" style="height:20px"></div>
このツールの素晴らしい所は、<strong>有料テーマや無料テーマの両方に対応している点</strong>です。具体的に言うと、以下のテーマに対応しています。</p>
[su_panel background=&#8221;#e3f4f9&#8243; color=&#8221;#135165&#8243; border=&#8221;1px solid #18799d&#8221;]
<strong>■無料テーマ</strong></p>
<p>・Cocoon<br />
・その他ブログ</p>
<p><strong>■有料テーマ</strong></p>
<p>・JIN<br />
・SANGO<br />
・Affinger<br />
・その他のワードプレステーマ<br />
[/su_panel]
もう一つご紹介しておきます。前述しましたサルカワさんのブログに掲載されている見出しの装飾パターンです。</p>
<p>以下のリンクから、色々な配色パターンを見ることができます。ぜひ、ご覧になってあなたのブログの見栄えをさらによくしてください。</p>
<div class="su-button-center"><a href="https://saruwakakun.com/html-css/reference/h-design" class="su-button su-button-style-glass" style="color:#FFFFFF;background-color:#b71313;border-color:#931010;border-radius:0px" target="_blank" rel="noopener noreferrer"><span style="color:#FFFFFF;padding:9px 30px;font-size:22px;line-height:33px;border-color:#cd5a5a;border-radius:0px;text-shadow:none"><i class="sui sui-arrow-circle-right" style="font-size:22px;color:#FFFFFF"></i> サルカワさんのデザイン68選を見る</span></a></div>
<div class="su-spacer" style="height:20px"></div>
H2〜H4までの見出しを装飾することが出来ます。この二つのサイトを使って、あなた独自の世界観を実現してくださいね。</p>
<h3>テクニック④見やすいフォントの大きさにする</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10078 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/blog3.jpg" alt="ブログのフォント" width="682" height="337" srcset="https://arafifate.com/wp-content/uploads/2020/11/blog3.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/blog3-300x148.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>テクニックの三番目は<strong>見やすいフォントの大きさ</strong>にするという事です。色々なブログを見ていて気付くのが文字が小さいということです。</p>
<p>若い世代なら文字が小さくても何の支障もありませんが、私くらいの年代になると、すでに老眼鏡が必要です。</p>
<p>老眼になると小さい文字ってすごく見ずらくなります。多くのブログで多いのが10ピクセル～12ピクセルです。</p>
<p>これでは年配者は見ずらいです。私のブログは14ピクセルに統一しています。</p>
<p>ですから、あなたもブログを作る際は<span class="dot"> <strong>読者ファーストを考えて14ピクセル～17ピクセル</strong> </span>に統一してください。</p>
<p>私もブログをつくり始めた頃は気がつきませんでしたが、老眼になって初めて、文字の大きさは読みやすさに影響することが理解できました。</p>
<h3>テクニック⑤フォントの大きさに合わせて行間を調整する</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10080 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/blog-gyokan.jpg" alt="ブログ行間" width="682" height="349" srcset="https://arafifate.com/wp-content/uploads/2020/11/blog-gyokan.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/blog-gyokan-300x154.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>次に解説するのは行間についてです。文字の大きさも読者ファーストを考える際に大きな要素ですが、<strong>行間も意外と大きな要素になりえます。</strong></p>
<p>文字と文字の行間はブログ全体のイメージに大きな影響を与えます。何故なら、行間が狭すぎても、広すぎても読みづらくなるからです。</p>
<p>ここでも、サルカワさんの記事を参考にすれば学びが大きいです。</p>
<p>この記事を読む事によって、あなたは行間についての知識が深まり、簡単に行間を調整できるようになります。<br />
<div class="su-spacer" style="height:10px"></div>
<div class="su-button-center"><a href="https://saruwakakun.com/html-css/basic/text-setting" class="su-button su-button-style-glass" style="color:#FFFFFF;background-color:#b71313;border-color:#931010;border-radius:0px" target="_blank" rel="noopener noreferrer"><span style="color:#FFFFFF;padding:9px 30px;font-size:22px;line-height:33px;border-color:#cd5a5a;border-radius:0px;text-shadow:none"><i class="sui sui-arrow-circle-right" style="font-size:22px;color:#FFFFFF"></i> サルカワさんの行間に関する記事を読む</span></a></div>
<div class="su-spacer" style="height:20px"></div>
<h3>テクニック⑥リンク色は必ず青にする</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-9729 size-full" src="https://arafifate.com/wp-content/uploads/2020/12/internal-link.png" alt="内部リンク" width="682" height="440" srcset="https://arafifate.com/wp-content/uploads/2020/12/internal-link.png 682w, https://arafifate.com/wp-content/uploads/2020/12/internal-link-300x194.png 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>色々なブログを見ているとリンク色を赤や黄色、紫など自分の好みにしているブログもよく見かけます。リンク色を気にしていないという事だと思います。</p>
<p>しかし、<strong>グーグルやヤフーなど大手ポータルサイトはリンク色に青色を使っています。</strong></p>
<p>特に大手ポータルサイトを利用する機会が多い人は「リンク＝青色」というイメージが定着しているのです。ですから、青以外の色をリンク色に使ってしまうと、読者がリンクと認識しづらくなります。</p>
<p>これってリンクを貼っていても、リンクと気が付かなかったり、警戒心を抱かせてクリックしてもらう機会損失にもつながります。</p>
<p>特にブログで収益化をしたい人にとってはリンクのクリック率はとても重要です。ですから、<span class="dot"> <strong>リンク色は必ず「青」</strong> </span>にしましょう。</p>
<p>一番<strong>クリックされる色は「#0044CC」</strong>と言われているので、この色をリンク色に採用するのが無難です。</p>
<p>また、<strong><span class="dot"> 「リンク色＋下線付き」の方が、さらにリンクとして認識されやすいです。 </span></strong></p>
<h3>テクニック⑦ヘッダーに広告を置きすぎない</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10081 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/ad.png" alt="広告" width="682" height="341" srcset="https://arafifate.com/wp-content/uploads/2020/11/ad.png 682w, https://arafifate.com/wp-content/uploads/2020/11/ad-300x150.png 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>次に初めてブログを開いた時に目に入るヘッダー部分。これは<strong>「ファーストビュー」と言って、読者が初めて見る部分</strong>です。</p>
<p>正確に言うと、ブラウザでWEBサイトを表示した時に、スクロールしないで目に入る領域のことを指します。</p>
<p>ブログによっては、このファーストビューの領域に広告をいくつも置いているのを見かけます。でも、これは読者目線から考えると、マイナスでしかありません。</p>
<p>読者は広告を見に来ている訳ではないからです。</p>
<p>少し考えれば分かることです。ですから、<strong><span class="dot"> 一つくらい置くのは構いませんが、最小限に留めましょう。 </span></strong></p>
<h3>テクニック⑧1記事に最低でも一つの画像を配置する</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-9301 size-full" src="https://arafifate.com/wp-content/uploads/2021/01/seo-kouka.jpg" alt="SEO効果" width="682" height="402" srcset="https://arafifate.com/wp-content/uploads/2021/01/seo-kouka.jpg 682w, https://arafifate.com/wp-content/uploads/2021/01/seo-kouka-300x177.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>先ほど少し触れましたが、<strong>画像は記事中にどんなに少なくても最低一つは挿入しましょう。</strong></p>
<p>繰り返しになりますが、ひと通り記事を書き終えてから、記事のイメージに合う画像を探して挿入します。ブログの読者の多くは、訪れたブログを流し読みします。</p>
<p>流し読みする時に、文字ばかりのブログだと、読まずにスルーします。</p>
<p>これは、SEO的にも大きなマイナス要素になります。グーグルの人口知能はここまでしっかりと把握しています。</p>
<p><span class="dot"> <strong>読まれるブログにする為のも、画像は必須</strong> </span>だと考えてください。</p>
<h3>テクニック⑨読者が記事の内容を理解しやすいように工夫する</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10082 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/kazyogaki.jpg" alt="箇条書き" width="682" height="372" srcset="https://arafifate.com/wp-content/uploads/2020/11/kazyogaki.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/kazyogaki-300x164.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>次も記事をひと通り書き終えてからの作業になります。書いた記事をいかに分かりやすく、飽きずに読んでもらうかを工夫します。</p>
<p>具体的には、以下の要素を取り入れます。</p>
<div class="su-box su-box-style-glass" id="" style="border-color:#2c000f;border-radius:6px;max-width:none"><div class="su-box-title" style="background-color:#5F1A42;color:#FFFFFF;border-top-left-radius:4px;border-top-right-radius:4px">ユーザーに記事を読んでもらう為の5つの工夫</div><div class="su-box-content su-u-clearfix su-u-trim" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px"><div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 画像（イメージ図）</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 分かりやすい表を入れる</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 枠線を入れる</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 箇条書きにできる所は行う</li>
<li><i class="sui sui-arrow-circle-right" style="color:#b71313"></i> 画像の配置を統一する</li>
</ul>
</div> </div></div>
<p>一番下の<strong>画像の位置ですが、ここも読者が記事を読む際の読みやすさに関係</strong>してきます。例えば、記事の中で画像があって、画像の位置がコロコロと変わったらどうでしょうか？</p>
<p>同じ記事の中で、画像の位置が、右、左、中央と同じ記事の中で、画像の位置が変わったら非常に見ずらいのは想像できますね。</p>
<p>何故、見ずらいかというと、ユーザーの目線が右に行ったり、左に行ったり、真ん中に戻ったりと一定しないために、非常に目が疲れます。</p>
<p><strong><span class="dot"> 読者ファーストを実現する為にも、画像の位置は一定の位置に置きましょう。 </span></strong></p>
<h3>テクニック⑩吹き出しを使って会話調を取り入れる</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10083 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/blog-fukidasi.png" alt="ブログの吹き出し" width="682" height="343" srcset="https://arafifate.com/wp-content/uploads/2020/11/blog-fukidasi.png 682w, https://arafifate.com/wp-content/uploads/2020/11/blog-fukidasi-300x151.png 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>ブログのデザイン的に吹き出しを使うことが、おしゃれかどうかは賛否両論あります。ただ、最近の<strong>ブログの流行として「吹き出し」を使っているブログが多くなっています。</strong></p>
<p>流行を取り入れることは非常のいい事だと私個人は思っています。<span class="dot"> <strong>吹き出しをワンポイント的に使えば読者の読みやすさはアップ</strong> </span>します。</p>
<p>人間は文章よりも会話形式の方が一般的には読みやすく感じて知らないうちに読み進めていく傾向があります。</p>
<p>そんな人間の行動パターンを上手く使っているのが吹き出しを上手に使って読ませるというテクニックです。</p>
<p>これは色んなブログを見ながら<span class="dot"> <strong>研究していけば自分なりの使い方が見つかります。</strong> </span>習うよりも慣れろです。</p>
<p>ひと通リ、記事を書き終えたら吹き出しを使ってみましょう。吹き出しについては、有料テーマであれば、最初からプラグインが用意されている場合もあります。</p>
<p>もし、デフォルトのテーマで吹き出しがない場合は、プラグインをインストールして使っていきましょう。</p>
<h3>テクニック⑪文字の色を使い過ぎない（3色くらいが妥当）</h3>
[su_panel background=&#8221;#fafaf5&#8243; border=&#8221;2px solid #e1e1d6&#8243; shadow=&#8221;0px 1px 1px &#8221; radius=&#8221;5&#8243;]<img class="aligncenter wp-image-10088 size-full" src="https://arafifate.com/wp-content/uploads/2020/11/web-design-1.jpg" alt="ウエブデザイン" width="682" height="343" srcset="https://arafifate.com/wp-content/uploads/2020/11/web-design-1.jpg 682w, https://arafifate.com/wp-content/uploads/2020/11/web-design-1-300x151.jpg 300w" sizes="(max-width: 682px) 100vw, 682px" />[/su_panel]
<p>ブログの中には個性を出そうとして、何色も使っているブログもあります。ただし、ブログの中で色を何色も使うと、目がチカチカして非常に読みづらくなります。</p>
<p>その他の弊害としては、色を使いすぎると本当に強調したい部分やリンク色が目立たなくなりスルーされてしまうことがあります。</p>
<p>こういうマイナスを生み出さない為にも、色は最小限にとどめた方がいいです。</p>
<p><span class="dot"> <strong>「色々な箇所で色文字を使って強調しすぎるのは、全部強調していないのと一緒」</strong> </span>ということを覚えておいてください。</p>
<p>私が使っているのは太文字と太文字＋下線のシンプルな装飾にしています。これも戦略の一つでユーザーを中高年に設定しているので敢えて、そのようにしています。</p>
<h3>おまけ～ ブログデザインに役立つWebサイトのご紹介</h3>
<p>いよいよ最後になりました。ここでは、今後あなたが作っていくブログのデザインに役立ついくつかのWebサイトをまとめてご紹介します。</p>
<p>テクニック②でご紹介したサルカワさんのCSSの装飾サイトも併せて記載しておきます。<br />
[su_panel border=&#8221;3px groove #fbd035&#8243; radius=&#8221;10&#8243;]
→　<a href="https://saruwakakun.com/html-css/reference/h-design" target="_blank" rel="noopener"><strong>CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選</strong></a></p>
<p>→　<a href="https://saruwakakun.com/html-css/basic/text-setting" target="_blank" rel="noopener"><strong>【CSS】文字装飾の基本を総まとめ！初心者向けに解説</strong></a></p>
<p>→　<a href="https://www.colordic.org/" target="_blank" rel="noopener"><strong>色の名前とカラーコードが一目でわかるWEB色見本～原色大辞典</strong></a></p>
<p>→　<a href="https://www.tagindex.com/color/color_pattern.html" target="_blank" rel="noopener"><strong>ブログの配色パターンが81種類選べるWebサイト（Tag Index)</strong></a><br />
[/su_panel]
<div class="su-spacer" style="height:10px"></div>
<h2>まとめ～読まれるブログにする為のデザインテクニック11選</h2>
[su_shadow style=&#8221;left&#8221;][su_panel background=&#8221;#FAFAF5&#8243; border=&#8221;2px solid #cccccc&#8221; padding=&#8221;25&#8243; radius=&#8221;3&#8243;]<div class="su-heading su-heading-style-modern-2-orange su-heading-align-center" id="" style="font-size:19px;margin-bottom:20px"><div class="su-heading-inner">＼この記事では、以下の内容についてお伝えしました／</div></div>
<div class="su-row"><div class="su-column su-column-size-1-4"><div class="su-column-inner su-u-clearfix su-u-trim"><img class="alignnone size-medium wp-image-5171" src="https://arafifate.com/wp-content/uploads/2022/03/cropped-z05-300x300.png" alt="MASA" width="300" height="300" /></div></div> <div class="su-column su-column-size-3-4"><div class="su-column-inner su-u-clearfix su-u-trim">
今回の記事では、ブログのデザインの3大要素ならびに、具体的なデザインテクニック11選、そしてブログの装飾に役立つ4つのWebサイトをご紹介しました。<br />
<div class="su-list" style="margin-left:0px">
<ul>
<li><i class="sui sui-check" style="color:#b71313"></i> ある程度記事数が増えてきたら、読みやすさを意識してブログデザインを整える</li>
<li><i class="sui sui-check" style="color:#b71313"></i> デザインの目的は読者ファーストを実践する具体的な対策であると認識する</li>
<li><i class="sui sui-check" style="color:#b71313"></i> 資産となるブログを作るには、何回も見直して納得いくブログを作っていく</li>
</ul>
</div></div></div></div>[/su_panel][/su_shadow]
<h3>今すぐできる具体的な行動</h3>
[su_panel background=&#8221;#eff9e3&#8243; color=&#8221;#166513&#8243; border=&#8221;1px solid #1d9d18&#8243;]<span class="dot"> <strong> ①自分のブログのデザインを見直してみる</strong> </span><br />
<strong><span class="dot"> ②どこをどのように修正していくかの計画を立てる</span></strong><br />
<strong><span class="dot">③計画が決まったら少しずつ実行に移していく</span></strong></p>
<p>繰り返しになりますが、ブログのデザインの最終目的は読者ファーストです。読者にいかに読みやすい記事を提供するか？という事です。</p>
<p>必ず、ブログの記事の先には、ブログを読む読者がいると言うことを覚えておきましょう。</p>
<p>その事を常に念頭に置きながらブログ運営をしていけば、あなたのブログは必ず読まれるブログになっていきます。読者の悩みを解決できる記事をたくさん書いて読者満足度を上げる事が収益に繋がると理解しておきましょう。<br />
[/su_panel]
<p>ブログをデザインする前の段階として、読まれる記事を書く必要があります。読まれる記事を書くにはブログ設計が大切。以下のリンクからブログ設計の記事をご覧ください。</p>
<p><a href="https://arafifate.com/writing/thorough-instructions-on-how-to-write-a-blog.html">https://arafifate.com/writing/thorough-instructions-on-how-to-write-a-blog.html</a><br />
<div class="su-spacer" style="height:20px"></div>The post <a href="https://arafifate.com/beginner/design-technique.html">【ブログ初心者必見！】読まれるブログにする為のデザインテクニック11選</a> first appeared on <a href="https://arafifate.com">アラフィフエイト｜ 50代からでもアフィリエイトは遅くない</a>.]]></content:encoded>
					
					<wfw:commentRss>https://arafifate.com/beginner/design-technique.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
