MENU
ファンレターを書いてみませんか?

当サイトの作品を読んで、「なんかちょっと心がソワソワしたぞ」「うるっとしちゃった」「単純に文章が好き!」という方は、私にファンレターを送って下さい。

応援されることは嬉しい。
応援する方は2倍嬉しい。

あなたのお気持ち待ってます。

ばなやん(一ツ屋有美子)にファンレターを贈る

他のサイトとの差別化をはかりたいなら、統一性をもたせよう!

2020 2/19
他のサイトとの差別化をはかりたいなら、統一性をもたせよう!

前回はページを見た読者さんに即閉じられないためにすることをお話ししました。
嫌われる要素をなくせばいいってことですね。

今回は、それにプラスして、ページに統一性を持たせるとよりファンになってもらいやすくなる、というお話をします。

サイトのデザインや統一性はBlogであれば使っているテーマが自動的に行ってくれます。
(当サイトはWordpressでのサイト作りで説明しています)
そして、サイト全体となると、雑記のように多岐にわたるジャンルのお話をしていると、どうしても統一性を保つというのは厳しいです。

かくいう私も、『小説』『デザイン』『下ネタ』『ビジネスマインド』『ゲーム』など、話したいことがわんさかあります。
ジャンルはバラバラ、小説とそれ以外の記事では、文章の見せ方も違います。
facebookで一時期入っていたオンラインスクールでのお友達は、小説と日頃の私の話(文章)のイメージがあまりにも違いすぎて、本当に私が書いたのか? と思われるほどですw

ですので、ポイントはジャンル(=カテゴリー)ごとに統一性を持たせるということです。

Googleなどで検索して来られる読者さんは、そのページの情報だけ知りたいという方が多いです。
ですので、サイト全体のデザイン・統一性よりも、ジャンル(カテゴリー)ごとに統一性があると読者さんは安心して読み進めることができます。

もう一つ、統一性をもたせる=テンプレート化することで、作業を簡略することもできます。
書く側の作業量が減り、読者さんの安心感も得られるのでやっておかない手はないです!

目次

ジャンル(=カテゴリー)ごとに統一性を持たせる

ジャンル(=カテゴリー)ごとに統一性を持たせる

統一性をもたせる部分は以下の3つです。

  • アイキャッチ画像と見出し画像のテイストを合わせる
  • 画像に使われているカラーを見出しカラーに取り入れる
  • 見出しのデザインもカラーに合わせたスタイルにする

では、一つずつ例を見ながら進めますね。

一ツ屋有美子@声優小説家
当サイトの設定(css)も公開しますので、参考にされる方はどうぞ!

 

アイキャッチ画像と見出し画像のテイストを合わせる

アイキャッチ画像というのは、記事の表紙のようなもので、記事タイトルの下に表示されます。
一番目を引く画像なので、こちらにキャッチコピーを書いたり、タイトルを入れたりします。
こちらも、ただ写真を貼り付けるよりも文字を入れるなどして一手間加えることが大事です。

ここでのポイントは2つ。

  • 使わせてもらっているイラストを同じイラストレーターさんにしている
  • 文字色を同じにし、その背景色も取り入れる

これだけです。

見出し画像というのは、見出しの直後に置く画像のことで、こちらがあった方がいいと通算5億PVを誇る方のブログを拝読し、気付いたことです。

私はアイキャッチ画像を『900×556』ピクセルに、
見出し画像を『1200×320』ピクセルにしています。

後ほど見本をお見せします。

画像に使われているカラーを見出しカラーに取り入れる

カッコいい配色の比率は
メインカラー70%:サブカラー25%:補色5%
と言われています。(オンラインのWebデザインスクールでも学びました)

この内のどのカラーを使用してもいいと思います。
ちょうど、h2,h3,h4と3色あるので、そのままメイン,サブ,補色としてもいいかもしれません。
(h2とは見出し2ということです。記事(章)タイトルのまとまりのタイトルのこと)

↓↓↓配色に関しての記事はこちら

あわせて読みたい
あなたに「デキる」配色の比率をお伝えします
あなたに「デキる」配色の比率をお伝えします「配色なんて、自分のテンションが上がるもんでいいっしょ」と、思わず考えてしまいがちですが、それは違います。やはり「見られるサイト」「魅了されるサイト」という...

見出しのデザインもカラーに合わせたスタイルにする

カテゴリーにもよりますが、小説は四角のイメージなので、基本『線』を意識したデザインにしています。
カラーも濃い青緑が青なので、丸よりも線といったスタイリッシュなイメージ。

デザインカテゴリーのメインカラーは、パステル系のピンクで全体的にかわいい&優しいを意識した配色です。
ピンク・黄色・水色・オレンジとふわっとしたイメージなので、丸の見出しにしました。

あとは、見出し画像とのバランスも考えるととてもいいと思います。

 

『小説』のカテゴリーは別

画像

大手の投稿サイト(「なろう」「カクヨム」「エブリスタ」など)を見てもらうとわかると思いますが、本編にアイキャッチ画像というものは存在しません。
章タイトルのすぐ下には本文が載っています。小説サイトなのに、いつまで経ってもストーリーが読めないというのはおかしいですよね。
(※E★エブリスタでは一つ一つの話に表紙がありますが、本文の初めに画像はありません)

私も、小説を読もうとしていて開いたページにドーンと画像があると、若干テンション下がります。
やっぱりすぐに読みたい。
ということで、当サイトもアイキャッチ画像を非表示にしてあります。
(小説以外のお話の時は表示するように設定)

非表示にしているアイキャッチ画像に、ぞこまでこだわらなくてもいいんじゃない? と思われるかもしれませんが、小説といえどSNSでシェアされることを考えるとアイキャッチ画像はあった方が断然いいです。

私は連載と短編で分けています。
連載が表紙のように、短編はタイトルとイメージ画像が一緒に見られるようにしています。

連載小説|Love Case

画像

そして、当然のことながら小説の中に見出しは存在しないので、そこのカラーやデザインというのは、書き方やマインドのお話の時に使っています。

小説の見せ方(サイトデザイン)は、やはり大手の真似をした方がいいです。
読者さんが読み慣れている形式が一番。

 

カテゴリー別のデザイン例

画像
ここからは当サイトの例です。
当サイトは大体『小説』と『デザイン』の2つに分けていますので、そちらの見出しや画像をお見せします。

デザインのアイキャッチ画像

画像

見出し画像

画像

イラストはIWOZON-イヲゾン-さんの作品をお借りしました。
ちなみに、この文章を囲っている枠組みの色もデザインと変えています。

小説に関わるカテゴリー

サイトの作り方、文章の書き方などの技術的な話

アイキャッチ画像

画像

見出し画像

画像

収益を得る方法

アイキャッチ画像

画像

見出し画像

画像

イラストはちょこぴよさんです。

このような感じです。

興味がたくさんあることはいいことだと思っています。
ただ、読んでくれた人が少しでも「よかったな」と思えるようなもの作りをしていきたいですね。
そのためにある程度のカテゴリー分けは必要だし、見せ方も考えられると、書いている本人もまた楽しくなります。

私もまだまだだけど、考えることはやめられませんw
好きこそものの上手なれ! ですね。

一ツ屋有美子@声優小説家
ここまでお読み下さり、ありがとうございます!!

ブログランキングに参加してます!

次のリンクをクリックして応援してもらえると嬉しいです。
よろしくお願いします(@゚∀`@)ノ

 



この記事が気に入ったら
いいね または フォローしてね!

注意

特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。

目次
閉じる