11月 2016


 AIで書いた小説が星新一賞の1次選考を通過したことから、これからどういった小説家であるべきなのか考えてみました。

AIが星新一賞の1次選考を通った


きまぐれ人工知能プロジェクト作家ですのよ

 2016年03月21日、人工知能が第4回 日経「星新一賞」の1次選考を通過しました。作品は上記リンク先の項目「成果」から閲覧できます。

 AIというと全自動で書かれた作品と思いがちですが、手動8割・自動2割という配分のようです。AIがどういった作業をしたのかも不明。しかし、一次選考を通過したということは、AIが全1510作品あるアマチュア小説の内、かなりの上位に入ったということになります。

「AIに仕事を奪われ、失業率が高くなる」という話は各所でされていますが、どうやら「芸術の世界は大丈夫」というわけにはいかないようです。大なり小なり、創作のあり方自体が変わってしまうでしょう。

 そういった時代はいつくるのでしょうか。IT業界は「ドッグイヤー(犬と同じくらい早く成長する)」と呼ばれています。明日は……流石に大丈夫だと思いますが、1年後は誰も予測できません。我々物書きは、今のうちにAIに対して、どう対抗・共存していくか考えてみる必要があります。

小説創作におけるAIの使い方


 松原教授は「将来的には、個々人の嗜好(しこう)に応じて100万人に100万通りの小説を届けるようなこともできるかもしれない。人工知能が天才的な名作を書けるかどうかは怪しいが、『普通に面白い』作品を量産するのには向いている」とみる。

(2016年1月5日 人工知能はアートの夢を見るか? 人間に残された聖域は:朝日新聞デジタル より引用)

 ドラえもんのひみつ道具に「まんが製造箱」というものがあります。「雑誌作りセット」の内ひとつの道具で、機械に漫画を読ませるだけで作風を完全コピーできるという代物です。まるでコピー元の作家が新作を書いたようなクオリティを提供でき、原稿料はタダ。

 誰でも自分好みの作品を作れる。まさにドラえもんの世界がそのままやってくるというのが、AI研究者の意見ということになります。例えば近未来、以下のような手順で小説創作をすることになるかもしれません。


  1. AIソフトを起動
  2. アイデアとなる単語を記入
  3. 大まかなプロットを読み込ませる
  4. 物語のテンプレートを選ぶ
  5. 作成された小説を推敲する
  6. ☆小説☆完成☆


 このような作り方になると、既存の基礎知識――文法・文章作法――といったものを覚える必要性が薄くなります。人間のやることはアイデア編集……つまり独創性に富んだ人が有利になる時代が来るのですね。そうじゃない人でも、創作が簡単になるのは確かでしょう。

 しかし、AIが発達しすぎると逆に作家たちが淘汰される恐れもあります。

しかし、いずれ独創性をもったAIが登場する




 すでに「ディープラーニング(深層学習)」という手法によって、人間っぽいAIの開発が進められています。

 加えて、ビッグデータ収集も出来る。人間で想像してみましょう。「世界中の本を読んだし、何がウケるのか分かるし、独創性の定義についても理解しているよ」という作家が簡単に生まれてしまうわけです。上の方で説明した「まんが製造箱」よりも高性能……まさに「事実は小説より奇なり」状態になってしまいます。

 そうなってしまっては「共存」なんて甘っちょろいことは言えません。ある意味ターミネーターの世界となってしまいます。人間がAIに勝つには、AIにないものを利用する他ありません。

 完全AIの小説がどういうものか想像できませんが、どんなに綺麗で面白い物語を書けたとしても、自分は感動しないでしょう。それにはふたつの理由があります。


  1. 市場データでは、人間の表面上の行動しか理解できないから。
  2. 人間が書いて、はじめて説得力が生まれるものがある。


 1番目の話は有名なマーケティング論。Googleで「顧客 本当に欲しいもの」と検索すれば、スティーブ・ジョブズやヘンリー・フォードの名言が出てきます。自分は経済学には明るくないので、興味のある方は調べてください。「サイレントマジョリティ」という概念も参考になるでしょう。

 大事なのは2番目です。「他人の人生を疑似体験する」という効果のある小説では、作家がどういう人生経験を積んだのかが非常に重要となってきます。

「俺はこういう経験をして、こう考えたから、こういう結論を出した」

 それは、AIでは絶対に作り出せないものですよね。だって、自分は自分であって、AIはAIなのだから。いくら偉人たちのデータを集めようが、そこに自分がいなければ良いんです。

 そうなると、小説の行き着く先は私小説かもしれないですね。

自分たちは40~50年もちこたえれば良い


 もしかしたら、この記事で書いたことは全部的外れになってしまうかもしれません。これから先、どうなるのか分からないのですから。AIが想像以上に進歩して、人間の完全上位互換になっても、特におかしくはないですしね。

 しかし、自分が死んだ後に起きる問題について対策を立てても仕方ないですよね。100年先の問題なんか、今の赤ちゃんたちでも関係のない話ですから。AIの進歩は凄まじいですが、10年先を見越して活動していれば十分でしょう。社会に出て40~50年ほどもちこたえたら、後は若者の課題です。

「AIに脅かされながら生きるのか……」と悲観的な思考が渦巻くところですが、プロ棋士の羽生善治先生のように考えれば、そう暗い話でもありません。
 将棋がコンピュータによって完全解明されてしまったら、どうするんですか。という質問に、羽生はケラケラ笑いながらこう答えた。

「そのときは桂馬が横に飛ぶとかルールを少しだけ変えればいいんです」

 その瞬間に将棋は新しい命を与えられ、なにもかもが一からやり直しになる。天才の視野にはそんなことさえ映っているのである。

※週刊ポスト2014年5月2日号

(2014年04月24日 コンピュータが将棋を完全解明したら? 羽生善治三冠の回答 | マイナビニュース より引用)

 社会のルールを決めるのは、あくまで人間。小説がAIに壊されてしまったら、また新たな表現を作ればいいんです。


 Twitterで何をつぶやくか分からない人へ向けて、どうツイートすればバズったり、セルフプロデュースに繋がるのか解説してみました。

セルフプロデュース観点でツイートを考える


 自分は複数のハンドルネームを使って、Twitterを利用しています。web小説関連に力を入れてから半年程度なので、@crosgreはあまり人気がありませんが、他のアカウントはセルフプロデュースに成功しています。

 そのアカウントはフォロー数600程度、フォロワー2600程度。アルファツイッタラーには程遠い数字ですが、小さな界隈でここまで人気者になれば十分でしょう。同ジャンルのアカウントのなかでは、ぶっちぎりの1番でした。

 1000RT以上されたツイートをいくつも作り出し、放置しているだけなのにフォロワーがどんどん増え、何かつぶやくだけで誰かがRT・いいねを押す……フォロワーの質は、かなり良いと思っています。

 そこまでアカウントを成長させられたのは、ツイートに人一倍工夫を凝らしたからです。Twitterはツイートしてナンボですからね。フォロワーたちの良い刺激になるよう、常日頃からバズりそうなツイートを考えていました。

 考え方は非常にシンプルなんですけどね。無意識にやってる方も多いです。しかし、「こうすれば人気が出るんだ」とポイントを意識するだけでも、かなり違った効果を出せると思います。

 そこで今回は、どういうふうにツイートすれば人気者になるのか、解説してみました。

日常生活のツイート


「生きている感」を出せるのが利点。Twitterはコミュニケーションツールであるので、誰かと関わりたい人が多い傾向にあります。日常生活をつぶやいている人は親近感を持ちやすく、「この人ならリプライを送っても良い」という印象を与えることができます。

 日常生活ツイートとして効果的なのは「趣味の話」と「ちょっとだけ特別な出来事」です。趣味の話をすれば同族が集まってくるのでフォロワーアップに繋がりますし、印象づけとしても優秀な作用をもたらします。後者を書く理由は、いつも似たようなツイートをしないための防止策として役立ちます。

ウケ狙い


 主にリツイートされやすいのが利点。拡散されることによって、自分に興味を持ってくれる人を増やせます。140文字以内でギャグを考えるのはけっして簡単なことではありませんが、数打てば何かしら当たります。

 重要なのは、拡散してくれそうなフォロワーを一定数確保しておくことですね。そのフォロワーたちが興味ありそうな話を題材にすることも意識しましょう。文章は「フリ」と「オチ」と落語的な構成で書いていくと、ウケやすいツイートが作れます。

考察


 アカウントの価値を高めるツイート。ウケ狙いほどのリツイート効果はないのですが、「いいね」をされる数が多いです。有益な情報を流すことで、フォロワーの興味関心を引けるようになります。考察の質に比例して、普段の何気ないツイートでさえも注目されるようになるので、長期的な効果のあるツイートと言えるでしょう。

 基本的には、フォロワーたちが興味を持ちそうな内容が良いです。ブログ記事やレポートとは違って、抽象的な文章表現を心がけましょう。自分の考えを広く曖昧に伝えることで、受け手は自分の経験をもとに、納得できるよう解釈してくれるからです。そもそも140文字以内で具体的なことは書けません。

RT・リンクを使ったツイート


 考察・ウケ狙いツイートと同じく、価値を高める効果があります。簡単に中身のあるアカウントを作れのですが、自分自身の面白さにはつながらないため、フォロワーが増える要因にはなりません。自分は、何もつぶやくことがない時に利用しています。

 リツイートは、キュレーションメディアやまとめブログと同じ、「情報の編集」と言えます。なので、身内ウケの強いツイートは、出来れば避けたほうがいいでしょう。「面白い」「興味関心がもてる」「話題・共感性がある」……この3要素のうち、どれくらい当てはまっているかによって、リツイートするかどうか決めましょう。

リプライ・DM


 人と仲良くするため、あるいは印象づける効果のあるツイート。僕は「この人にはフォローしてもらいたいけど、リフォローしてくれないなぁ……」という時に、よくリプライを送っています。1番大事なツイートゆえに、使い方を誤るとマイナスに働くこともあります。損得勘定を意識するよりも、「リプライしたくなったら、リプライする」と、肩の力を抜きましょう。

 とはいえ、気をつける点はあります。キャラでもない限り、誰かに嫌われるようなことは書かないように注意してください。巡り巡って自分自身が損をすることになります。相手の意見に対しては、まず最初に肯定の姿勢を見せて、後半で自分の意見を述べるようにしましょう。1番簡単に好かれる方法は、行儀の良い人であり続けることです。

宣伝


 自分が持つコンテンツを紹介し、利益を狙うツイート。今まで培った人間関係を利用するため、事前にどれだけ人気者になったかか大事になります。

Twitterでありがちな宣伝ツイートは、大抵効果が薄い|KaKuKaKu

 宣伝に関する話は、上記リンク先にて解説しています。

【まとめ】エンターテイナーであれ


 要は「面白い人間になれば、人気が出るよ!」ということです。難しいことのように感じられるかもしれませんが、自分が面白いと思ったことをしていれば、誰かしら共感してくれるものです。

 世の中を見渡すと「なんでこんなやつに友達がいるの?」といった人もいますよね。そんな人も誰かに好かれるのですから、人気者になるのは簡単なんです。

Twitterにおけるセルフプロデュース概論|KaKuKaKu

「そもそもTwitterでセルフプロデュースする方法がよくわからない」という人は、上記リンク先を一読してください。


 Vaster2を例に、GoogleAdsenseのレスポンシブ広告2つを記事下に、横並び表示する方法を紹介しています。CSSを使って、スマホでは非表示になる仕様です。

レスポンシブ広告はdisplay:none;で非表示にしても良い


 300x250や336x280の広告をふたつ横並びに置く手法―ダブルレクタングル―を採用しているサイトをよく見かけます。複数の広告を表示させることによって、クリック率の上昇を見込めるそうです。この配置方法はパソコンなら問題ないのですが、スマートフォンへの配慮を考えるとなかなか難しいのが難点。

 アドセンス広告をスマホで表示する際は、画面内に2つ以上の広告が入らないように工夫する必要があります。Google側がそう規約を出しているから、ここは絶対に守らないといけません。

 どのサイトでも、PCでは2個表示、スマホでは1個表示するように設定しています。CSSのメディアクエリを使えば簡単に実現できるのですが、広告をdisplay:none;で非表示にするのはアドセンスの規約違反になってしまいます。

 しかし、AdSenseのヘルプページを読むと、どうやら公式な抜け道があるようです。

禁止されているコードの改変方法

AdSense コードを以下の方法で改変することは禁止されています。

  • display:none などを使用して広告ユニットを隠す(ただし、レスポンシブ広告ユニットを実装している場合を除く
  • コンテンツが隠れてしまうような方法、またはコンテンツが広告を覆い隠すような方法で AdSense 広告コードを設定する
  • モバイルサイトやレスポンシブ デザインのサイトでコンテンツと広告が重なるような方法で広告ユニットを配置する
  • 非表示キーワード、iframe、その他の方法を使用して広告のターゲット設定を操作する
  • メールやソフトウェアで広告を配信する
  • 広告の配信方法や表示方法を操作して不当に注目を集める(画面内にスライドイン表示される広告、ズームイン / ズームアウトされる広告など)
  • ユーザーがモバイル ウェブページでドラッグ操作を行ったときに広告クリックを発生させる

(2016年11月20日 AdSense 広告コードの修正 - AdSense ヘルプより引用

 つまり、レスポンシブ広告ならdisplay:none;で非表示にしても規約違反にならないということです。グレーどころかまったくのホワイト。公式でも、レスポンシブ広告を非表示にするコードを配布しています(当記事の項目「参考サイト」を参照)。

 しかし、レスポンシブ広告は時と場合によって大きさが変わってしまう仕様。Bloggerだとコードをそのまま貼り付けても上手くいかないし、そもそもどうやって横並びに表示するんだ……と、初心者には課題が山積みですね。

 そこで今回は、そんな小難しいカスタマイズを最初から最後まで解説してみました。

Bloggerでアドセンス広告を貼る際の基礎知識


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 アドセンスのアカウントページから広告コードを生成すると、上記のスクリプトが表示されます。これをそのまま貼るとエラーが出て保存できません。async属性を”async='async'”に書き換えて、src属性の先頭に”http:”を追加してください。

 どのコードも同じスクリプトを使うので、このjsファイルは1個だけ表示していれば、後は必要ありません。サイトの軽量化のため、2個目の広告以降は削って設置しましょう。

レスポンシブ広告を300x250にして、テーブルタグで並べる



<table width="100%">
<tr>
<td colspan="2">
                          <center><b>スポンサードリンク</b></center><br/>
  </td>
  </tr>
<tr>
<td align="left" valign="top">
【左の広告】
  </td>
<td align="right" valign="top">
【右の広告】
  </td>
  </tr>
</table>

 ダブルレクタングル表示をするならテーブルタグが最も簡単です。「HTMLを編集」にて、上記HTMLの中に広告コードを挿入しましょう。Vaster2なら「アドセンス」と検索をかければ、どこに置けば良いのか分かるはずです。

 いつでも300x250表示にするため、広告コードのstyle属性に”width: 300px;height: 250px;”を追加し、”data-ad-format="auto"”を削除してください。特にこだわりがない場合は、そのままでも大丈夫だと思います。

スマホでは非表示にする



.adslot_1 { display:inline-block; }
@media (max-width: 768px) { .adslot_1 { display: none; } }

「HTMLの編集」にて、上記CSSを”]]></b:skin>”より上においてください。

 さきほど設置したアドセンスのコードに戻り、左側に表示される広告のタグをいじります。insタグ内のclass属性に”adslot_1”を追加し、style属性からdisplay要素を消去しましょう。


 大体、こんな形になるかと思います。

 最後にテンプレートを保存して、想像通りに表示されているか確かめましょう。PCとスマホ、両方で確認するのを忘れずに。

参考サイト


レスポンシブ広告コードを修正する方法 - AdSense ヘルプ
↑の項目「広告ユニットを隠す」から、CSSを拝借しました。必要最低限まで削ってあります。スマホでは横長広告にしたい場合や、その他のカスタマイズをしたいのなら参考になります。Bloggerユーザーならぜひ一読をオススメします。


 小説を書く練習を、4つのステップに分けてみました。執筆の手助けになれば幸いです。

ワナビの発達課題



クロスグリ・ワーナビー[Crosgre Warnaby]
(2012~ ツイッター)

 クロスグリ・ワーナビーは「小説創作における技術的発達は、ある一定の法則に従って段階を踏まなければならない」と提唱した、精神分析家……ではなく哲学者……でもない、ただの作家志望である。フィンセント・ファン・ゴッホに似ているのは気のせいだ。

 人が初めて小説を書いてから、売れっ子作家になるまでの過程を4段階に分け、それぞれのステップに適した課題を設定。そうして出来上がった「ワナビの発達課題」は作家志望たちを震撼させ、世に普及されていくことに(なるといいなぁ)。

 以下が「ワナビの発達課題」の詳細である。初めて小説を書く段階から、順を追って説明しよう。

誕生期 ―小説の書き方も知らない時期―


 何かしらの小説を読んで、「俺も小説を書いてみるか!」と思い立って筆を執る時期。

 創作の良し悪しが分からないため、書いては自画自賛を繰り返す傾向がある。もちろん作品としての完成度は低いが、誰も指摘せず褒めてくれる。書くたびに自己有能感を覚えるので、全ての発達課題のなかで1番幸せな状態と言える。

 創作の楽しさを見出すのが1番重要。モチベーションが続けば自然に、次の発達課題へと進むだろう。

心理療法としての小説


 小説を書くということは、時として自分の深層心理を描くものである。人には話しづらい物事はもちろん、言語化しづらい不安・心の傷を芸術として表現することで、気持ちが楽になっていくのだ。これは心理学用語で「アートセラピー」と呼ばれている。本を読む時も同様の効果が得られる。


 アートセラピーは、自分自身の内面を掘り下げる作業だ。自分のことばかり考えて書いたものだから、出来上がった作品は読むに堪えない代物であることが多い。しかし、「貴方らしさ」を探すのには有効な練習方法であるため、今後のオリジナリティへ繋げるべく一度は試してみるのをオススメする。

コミュニケーションツールとしての小説


 インターネット上で作品を公開すると、大なり小なりの反応が出てくる。そこで創作仲間が生まれて、創作行為に対する報酬効果を獲得できる。「創作をすれば相手にされる」という承認欲求を満たすようになり、親和欲求へとつながっていく。

 本来孤独である物書きは、他人からどう見られているのかなかなか気づけない。感想をくれる人を作るのは、今後のステップアップに大きな助けになる。また、自分と他者を比較するために、近くにいる人の作品を読むことも大事だ。

他人のモノマネをする


 素人は得てしてオリジナルを作りたがるが、何事も基盤がないと完成にすら到達しない。基礎は、他人のモノマネから形成していくものだ。そこから他人の骨格を盗み取り、創作のやり方を学んでいくのがセオリーとなる。

 出来るだけ多くの作品を真似するほうが良いにきまっているが、最初のうちは多くの作家をブレンドするのは避けたほうがいいだろう。何を意識すれば良いのかわからなくなり、しっちゃかめっちゃかになる可能性があるからだ。

収集期 ―小説の基本のキを習得する時期―


 自作品が低クオリティであることに気づく時期。

 書籍やインターネット等で技術的な理論を勉強し、創作活動に反映させようと試みる。多くの場合、「コンプレックスからの脱却」が原動力であり、憧れの作家との差を自覚している人ほど収集期が長くなる。創作に関して多感になり、他人からの評価内容を気にする傾向がある。

 コンプレックスが大きすぎても、小さすぎても成長を妨げる要因となるため、脱落者が多い。ワナビ発達課題における第一の闇と(個人的には)呼んでいる。

読みやすい文章を心がける


 収集期における最大の課題は、「自分の文章は、綺麗な日本語ではない」と自覚し、読みやすい文章を心がけることだ。日本語文法や文章作法、論理性のある(話が飛ばない)文章に気を配り、二重否定や二重表現などを極力減らしていく。いつも日本語を使っているから勘違いしがちだが、きちんとした日本語を書くには、多大な努力が必要となる。

 読みやすい文章を作るのは勉強的(いかに間違えないか)で、創造性とは直接結びつかない作業である。いきなりレトリックや描写から文章表現を考える人も多いが、それらの高等技術は「実際に読まれるようになってから意識する」ことである。アート的な文章を書けても、伝わる努力をしていなかったら意味がない。

物語の基礎構造を覚える


 小説を書きなれない人は得てして、書きたいシーンだけを書くことしか考えない。自由気ままに物語を書いていては論理性の欠けた作品になってしまい、読者が気持ちよく読み進めることができない。三幕構成や起承転結などを学んで、物語の基礎構造――各シーンの、配置の仕方――を身につける必要が出てくる。

 論理性のある物語というのは、全てのシーンが繋がっていることである。なにも難しい話ではない。「Aが起きたから、Bが起きた。Bが起きたから、Cが起きた」とピタゴラスイッチないしバトンリレーの要領でシーンを配置すれば良いのである。そのためには大なり小なり、プロットの作成方法も覚えなければならない。

オリジナリティを目指す


 誕生期にて得られた自己有能感(自分が優れているという感覚)は、収集期にて消耗されていく。代わりに劣等感が身体を動かすようになっていくが、自己有能感が完全になくなった作家志望は筆を折ることになる。ポジティブな創作活動を維持するためには、オリジナリティが必要不可欠である。

 小説を書き続けるには「なぜ小説を書くのか」という命題に、自分なりの回答が出来なくてはならない。小説よりも映画や漫画のほうが人気が出るのに――収集期を抜け出すには、その種となるものを不明瞭ながらも見つけ出し、育てていく必要がある。

鍛錬期 ―プロデビューへあと1歩の時期―


 最低限クオリティの小説を、創作出来た人に訪れる時期。

「そこそこ読まれるんだけど、プロになれない」という悩みを持ち始めるのが特徴。悩みが解消されずに脱落する人や、固定ファンがいることによって慢心する人が出始める「第二の闇」である。

 構成に気をつけたり、描写で狙った効果を出すことが課題になる。キャッチーさが養われていくため、鍛錬期を乗り越えられた人間は、商業作家として通用する実力を手に入れるようになる。

最初の掴み


 三幕構成や起承転結通りにシナリオを作れたとしても、人気の出る小説にはならない。起伏のないシーンがだらだらと続いていたら、読者は途中で読むのをやめる。それを阻止するには物語の推進力……つまり「つい読み進めちゃう要素」を意識する必要がある。

 序盤は謎と快感を散りばめて、読者が食いつきそうなエサを撒く。謎とは文字通りミステリーのことだが、快感とは「俺つえー」「ハーレム」などのあざとい演出のことを指す。中盤は障害を段階的に置いて、キャラクターを追い込むのが重要になってくる。

可愛い女の子を描く


 鍛錬期最大の課題となってくるのが、魅力的なキャラクターを作ることだ。特にライトノベル作家志望であるのなら、可愛いヒロインを書けるかどうかで、その後の作家人生が決まってくる。物語がつまらなくても、文章が汚くてもヒロインさえ可愛ければ売れるのだ。

 小説では、アニメ・漫画のように視覚的な女性表現は難しい。容姿端麗・胸が大きい・声質が良い等の特徴を並べるでは、読者を惹きつけられないからだ。仕草や言動によって、女性らしさを醸し出す必要がある。

描写による盛り上げ


 分かりやすい文章が書けるようになると、次は描写やレトリックによる雰囲気作りが大事になってくる。読者の感情・想像を煽れない文章では、ただの脚本だからだ。描写は映画におけるカメラワークの役割を持っている。作中の世界を様々な角度から「見せる」ことで、読者の脳裏に実体化されるのだ。ここは各々の文体センスが光るところである。

 文体センスを上げるには、描写やレトリック以外のことにも気を使う必要がある。書き出し・文と文の結び・文章のリズム等……極めようものなら果てしない。とにかく沢山の小説を読み、小説以外の文章にも触れ、映画や漫画を見る。実際に様々な経験をすることも大事であり、「文章とは人生経験の集大成である」と言っても過言ではない。時間をかけて養うものだ。

成熟期 ―日本中を動かす時期―


 技術が十分に身につき、自分にしか出来ない作品を創作できるようになる時期。

 ここまでくれば最早売れっ子作家となり、筆一本で食べていけるようになる。あとは、心に残るような芸術品を作るのが目標だ。職人としても、「でかいブームを起こして印税がっぽがぽ生活するぞ!」というビジネスとしても、より高品質かつオリジナリティの高い作品を作るのは、当然の考えだろう。

 正直に書くと、自分の力量では成熟期を的確に解説することは難しい。しかし、「何となく、これなんじゃないかな?」という話は出来るので、仮の段階ではあるが苦心してみた。

実在しているような世界


 いつまでも人々の記憶に残る小説は、得てして「あたかも、実在しているような世界」であることが多い。「あのキャラクターはどうなったのだろう」「物語の裏では何が起きていたのだろう」と読者たちに想像の余地を与え、考察に精を出させる。その特徴は二次創作されやすさに繋がり、多くの人々を動かす力となる。

 世界を作るのは、あくまで登場人物たちだ。設定資料はその手助けをしているに過ぎない。まるで生きていると思わせるような……ある種のリアリティを帯びたキャラクターを作るには、ひとりひとりにバックボーンをもたせる必要がある。「主人公はこういう家庭で生まれ、こういうふうに育ち、こういう考えを持っている」という物語上では映らない歴史を作れば、自ずと世界も魅力的になる。

文学性を磨く


 小説とは、人間関係および心理を描くものである。「心理を描くためには、対立と葛藤が大事だ」とはよく言われている。他人の葛藤は心の栄養になるからだ。古来より我々人間は、他人を知ることで自身の人生を豊かにしてきた。「人々の心を救う」というとエゴかもしれないが、文学として扱われる小説には、人を成長させる効果があるのは間違いない。

 ゆえに「全ての要素は心理描写のためにある」と言っても過言ではない。創作するうえで、ひとつひとつの要素に対し「これは登場人物の心理にどう影響してくるか」を考えるのは、初心者のうちから慣れておきたいところだ。登場人物の葛藤は、シンプルなものほど良い。ある部分で抽象性をまとっていると、人々はそこを都合よく自分に当てはめることが出来る。

発見・発明する


 開拓者の功績は、多くの人々を動かす。承認欲求が満たされるのは当然、「人に楽しんでもらいたい」というエンターテイナー気質であれば、自分のアイデアが文字通り世界を変える結果になったら、作家冥利に尽きるというものだろう。

 何かを発見・発明するには、知識の量が物を言う。映画・音楽といった他の芸術に触れることはもちろん、様々な学問や娯楽に精通していないと難しい。作家になりたいなら四六時中小説のことを考える勢いが大事だが、専業作家になれるレベルの実力があれば、あえて小説から遠ざかることも時として必要なのだ。

【まとめ】ワナビの一生は、重荷を負うて、遠き道を行くがごとし


 発達過程は、書き続けること、考え続けることで次のステップに上がる。時間を置かないと乗り越えられない壁もあるし、特定の課題に対しての得手不得手もある。時には「俺、三幕構成とかよくわかんないけど、なんか文学性のある小説書けるぜ」という人を見つけては歯を食いしばることもあるだろう。

 大事なのは、何度転んでも立ち上がる根性。それと、目標を見失わない姿勢だ。急いで走れば、周りの景色は見えなくなるし、思わぬところで転ぶ。カメのように慎重な足取りで歩き、基礎をしっかりと踏み固めていこう。


 Vaster2を例に、ラベルを分類別に表示する方法 、ラベルを1行ずつ表示する方法、複数のラベルガジェットを繋げる方法を掲載しています。

ラベルガジェットを分類別に表示したい


 Bloggerのラベルガジェットは、「あいうえお順」か「頻度順」でしか、表示される順番を指定することができません。

 当サイトのように「メインは○○関連なんだけど、他のジャンルについても情報発信したい」というブログでは、メインカテゴリとサブカテゴリに分けて表示したいところです。

ラベルを分類別に分けて表示 - Bloggerの使い方

 そこで見つけたのが、上記リンク先。なるほど、ラベルガジェットを複数使うことで、分類別に表示できるようですね。

 しかし、日本人向けテンプレート「Vaster2」を利用していると、この方法で分類別表示しても見た目がダサすぎます。スティーブ・ジョブズがiPhoneの美しさにこだわったように、ブログデザインも格好良くないといけません。

 というわけで、今回は複数のラベルガジェットをつなげて、ひとつのガジェットみたいに見える方法を紹介します。

ラベルガジェットを改造しよう


 Vaster2のラベルガジェットは1行にいくつものボタンが配置されてしまうため、コンパクトなのですが見づらい仕様となっています。まずは1行に1つのボタンだけ配置されるように、CSSをいじりました。


.list-label-widget-content ul li a {
   font-size: 13px;
       color:$(label.color);
   transition:0.4s;  /* 徐々に変化させる */
padding: 6px 10px;
    border: 1px solid $(label.border);
   background-color:$(label.background);
   width: 100%;
   max-width: 278px;
   display: inline-block;
   float: left;
   clear: both;
   margin-bottom: -1px;
}
.list-label-widget-content ul li a:hover{
color:$(label.color.hover);
background-color:$(label.background.hover);
text-decoration:none;
}
.list-label-widget-content ul{
   list-style-type: none;
   padding:0;
   margin-top: -4px;
   line-height: 1.4em;
}

「HTMLの編集」にて、ラベルの項目を上記CSSに書き換えましょう。

 テンプレートデザイナー版を意識してカスタマイズしたので、通常版を使っている場合は$マークから始まる文字列を、普通のカラーコードにしてください。


 テンプレートを保存すると、上記画像のような見た目になります。何十個もラベルを表示しない場合は、こちらのほうが都合が良いですよね。

見出しタグに必須の要素


 見出しとガジェット本体がつながっていないと、いかにも「ラベルガジェットをふたつ並べてます」という印象になってしまい、格好悪いです。

 サイドバーにある特定の見出しだけ、表示を変える方法をご紹介します。


/* サイドバーのラベル見出し */
.sidebar .labelh{
font-size:120%;
border: double 3px #666666;/*見出しの枠線*/
color:#333333;/*見出しの文字の色*/
line-height: 26px;/*hタグの高さ*/
padding-left:10px; /*見出しの文字の左にスペース*/
background-color:#fff;/*backgroundタグを使う場合は不要*/
//border-left: 0px;/*borderタグを使わない場合に使用*/
margin: 0px;
margin-top: 1px;
}

「HTMLの編集」で、上のCSSをサイドバー関連の近くに置いてください。

 background-colorから下の記述は、他の見出しでも使うので消さないでください。邪魔をしている時はコメント化しておきましょう。


 HTMLの編集にて、ガジェットのHTMLコードをいじります。

 上の画像のように、ガジェット内の見出しタグにclass属性を追加して、テンプレートを保存します。


 後はHTML/Javascriptのガジェットを使って、ラベルだと分かる見出しをつけて、完成です。上の画像のように、あたかも「ひとつのガジェットで、ラベルが分類表示されている」ように見えます。

表示が崩れてしまう場合は


 ラベルごとの投稿数を表示をする場合、投稿数が枠内に収まらず、表示が崩れてしまう場合があります。その時は「HTMLの編集」にて、該当するラベルガジェット<b:widget~></b:widget>の中を、以下のコードに書き換えましょう。


              <b:includable id='main'>
                <b:if cond='data:title'>
                  <h4 class='labelh'>
                    <data:title/>
                  </h4>
                </b:if>
                <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                  <b:if cond='data:display == &quot;list&quot;'>
                    <ul>
                      <b:loop values='data:labels' var='label'>
                        <li>
                          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'>
                            <data:label.name/><b:if cond='data:showFreqNumbers'><span dir='ltr'>(<data:label.count/>)</span></b:if></a></li>
                      </b:loop>
                    </ul>
                    <b:else/>
                    <b:loop values='data:labels' var='label'>
                      <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'>
                          <data:label.name/>
                        </a>
                        <b:if cond='data:showFreqNumbers'>
                          <span class='label-count' dir='ltr'>
                            (
                            <data:label.count/>
                            )
                          </span>
                        </b:if>
                      </span>
                    </b:loop>
                  </b:if>
                  <b:include name='quickedit'/>
                </div>
              </b:includable>

 本来、まるまる書き換える必要はないはずなのですが、どこが悪いのか自分も理解できていないので、とりあえずの応急処置としてご利用ください。

参考サイト


デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE
↑のを参考に、ラベル見出しのCSSを作りました。他にも色々な見出しがあるので、自分好みのデザインにカスタマイズしましょう。


 Twitterでありがちな宣伝活動「過剰な無差別RT」「無差別フォロー」「自動定期ツイート」が、なぜ非効率なのかを解説しています。「小説家になろう」「カクヨム」などのweb小説中心の話です。

宣伝になってないツイートが多すぎる


 ある日、フォロワーが何千人もいる人と、Twitterの宣伝活動について話す機会がありました。その人のアカウントは無差別RTや、botによる宣伝が9割を占めているもので、フォロワーは多いけどリプライのやりとりはほぼありませんでした。

 自分はその人に質問しました。

「なんでフォロー外なのに、他人の作品をリツイートしまくってるの?」

 そうしたら、こう返答されました。

「リツイートしまくればフォロワーが増えるし、自作品を読んでもらえる可能性があるから」

 ちなみにその人は「小説家になろう」で活動していて、総合評価は100~200pt程度でした。

 うーん、なんで気づかないかなぁ……。

「自作のweb小説を読んでもらいたいなら、もっと他にやるべきことがあるんじゃないの?」

 という言葉をなんとか飲み込み、自分は早々に話題を切り上げました。

 そもそも、Twitterで宣伝活動をしている人たちを見ていると、セルフプロデュースとしては非効率すぎる行為をしている人が多すぎますよね。

・過剰な宣伝
・他作品の宣伝をリツイートしまくり
・挙句の果てには無意味にフォロワーを増やしている

「意味がない」わけではありません。効果がまったくなかったら、やる人はいませんからね。得をしている錯覚に陥っているから、続ける人が多いのです。

Twitterにおけるセルフプロデュース概論|KaKuKaKu

 Twitterの基本的な使い方は、上記リンク先にて説明しています。要約すると「コミュニケーションをとらないアカウントには価値がない」ということを書きました。

 今回は、Twitterのweb小説界隈でありがちな宣伝活動について、なぜ非効率なのかを解説してみました。

他人の作品をRTしまくることについて


 フォロー外他作品をリツイートしまくっても、何の得もしません。それどころかRTが過剰だと、Twitterアカウントの価値を落とすことになります。

 リツイートすればするほど、フォロワーのタイムラインを埋めていることに気づきましょう。興味のないツイートをRTされまくったら、大体のフォロワーは耐えられません。Twitterでコミュニケーションを楽しみたい層は貴方をフォロー解除するか、ミュートにします。

 そうして、どんどん質の低いフォロワーしか残らなくなります。「リツイートを非表示にする機能を使ってくれるだろ」という意見もありますが、Twitterの仕様上、リツイート非表示にするよりブロックするほうが手間のかからないことを、よく意識してください。

 宣伝にはならないし、自分は得しないしで、最悪ですね。多少の効果があるだけに、裏でものすごい損をしていることに気づかない。今、Twitterで「おはよう」と書き込んだとして、何人がそれに反応してくれますか? もし0人であった場合は、そこに貴方のファンはいないということです。Twitterを続ける価値はありません。

 ちなみに、過剰なRTといっても面白いツイートばかりなら問題ないです。それは編集・まとめ行為なので、立派なコンテンツと呼べるからです。ただの宣伝をRTされまくってもつまらないですよね。

フォロワーを増やしまくる行為


 これに関しては白黒つけがたいですが、個人的には推奨しません。確かに何もしないよりはマシなんですけどね……。

 フォロワーを増やすのは確かに効果があるのですが、無差別的なフォローだと非効率極まりないでしょう。web小説界隈をフォローするにしても、ただ「とにかく、なろう・カクヨム民をフォローしまくろう」という考えで止まっているようなら、思ったような成果を上げづらいでしょう。

 少しでも気の合う人をフォローするのは当然。それよりも、フォロワーが1000人くらい溜まったら、それ以上増やしても無意味だということを覚えておきましょう。Twitterアカウントの価値は、フォロワーの数で決まりません。何人と仲良くしているかが1番大事です。

 1000人の知り合いよりも1人のファン。いくらフォロワーを増やそうが所詮は知り合いなので、宣伝に興味を持つ人は少ないです。

定期宣伝ツイートの是非


 宣伝自体は必要ですが、頻繁にやるのはNG。リツイートと同じく、フォロワーのタイムラインを圧迫してしまうからです。毎日同じものを宣伝しているのも効果が薄いですね。フォロワーからすれば「もう知ってるよ」という感想しか出てきません。

「自分のログ(最新のつぶやき一覧)を宣伝ばかりにしない」のも大事です。宣伝が多すぎると、誰かが貴方のアカウントを見た時に「生きてるアカウント」ではないと判断する可能性があります。自分がどれだけ普通のツイートをするかによりますが、同じ宣伝は、多くても1日3回程度にしておきましょう。

 何時間、何分おきの定期宣伝は避けましょう。出来れば手動で、宣伝文句を毎回変えておくのがベターです。思いつかない場合は日常ツイートにURLをくっつけるだけで大丈夫です。自動で行う場合は、ちゃんと狙った時間帯だけにツイートするよう設定しておきましょう。


 Twitterで人気者になる、基礎中の基礎を書きました。「小説家になろう」「カクヨム」などのweb小説だけではなく、絵師やユーチューバーなど、色んな人が参考にできるように普遍性の高い内容となっています。

勘違いされる「セルフプロデュース」の意味


 セルフプロデュースとは、「自分をよく知ってもらう方法」のことを指します。

 web小説界隈ではセルフプロデュースという言葉が、あまり良い意味で使われていません。ソースは調べても見つかりませんでしたが、どうやら偉い人が「自作品を見てもらいたいなら、セルフプロデュースが大事」と発言したところ、「駄作でも宣伝が良ければ売れる」と曲解して伝わってしまったようです。

 本来のセルフプロデュースは、そのような意味を含んでいません。そもそも駄作の知名度を高くしても「有名な駄作」になるだけであって、作品の評価が高くなるはずがありません。筆一本で生活したいのなら、どうやっても相応の実力が必要になります。


「俺の作品は素晴らしいのに、人気が出ない」
「知名度が高くなれば正当に評価されるはずだ!」

 ……と、考える人もいます。自分に自信があるのなら、新人賞に応募したり、講師活動をしている作家に持ち込んだほうがチャンスがあります。もしそれが出来ないのなら「知名度を上げる暇があったら、少しでも良い小説を書く練習をしろ」という結論になります。

 自分はセルフプロデュースを軽視しています。そんなことを考えなくても、頑張る人にファンが集まるものですから。しかし、頑張っているのに応援されない人がいることも事実ですね。そういった境遇には、セルフプロデュースが必要になってきます。

 まずはTwitterの利点を把握し、セルフプロデュースの基礎を知りましょう。

TwitterはTwitterで、価値のあるコンテンツを作る必要がある


 Twitterにおけるセルフプロデュースは、ふたつの効果があります。

1,自分のファンをひとまとめにする
2,自分のことを興味のない人に、自分のことを知ってもらう

 1番目は、多彩な活動をしていて、すでに一定数のファンがいる場合のみの話。多くの人は2番目の効果を意識することになります。興味を持たせるためには、TwitterはTwitterで独立したコンテンツを作らなければいけません。つまり、宣伝ツイートだけでは意味がないということです。

 Twitterを宣伝目的で利用するのなら、価値のあるアカウント作りを心がけましょう。単調で無機質なツイートばかりでは、形だけのフォロワーしか増えずに宣伝効果を出せません。とにかく「この人は面白い人だ」と思わせ、自分の存在をフォロワーの記憶に残すことを考えましょう。

平凡な人でも、人気者になれる


 自分のことを知ってもらうには「自分は生きている。何々ついて活動している」というアピールが重要になってきます。Twitterはコミュニケーションツールなので、生身の人間と関わりたい人が多いです。多くの人たちと接点を持つために、様々なことについてツイートしましょう。

 つぶやく内容は、自分の興味関心のある話だけで大丈夫です。そこに、自分だけの意見・体験を交えているのが理想的ですね。面白かったり、有益な情報をつぶやけたら良いのですが、平凡な日常生活でも十分「貴方らしさ」に繋がります。

 知名度を上げるには「個性」や「カリスマ」というものが大事になってきますが、これらは後からついてきます。Twitterというのは自由自在にコミュニティを作れる反面、環境が悪いとどんな個性的な人も相手にされません1番大事なのは「どう発言するか」ではなく、「自分のことを好きになってくれそうな人と、相互フォローすること」です。

セルフプロデュースにコミュニケーションは必須


 Twitterをやるからにはコミュニケーションは欠かせません。色んな人の意見を聞けますし、情報収集としても優秀。宣伝目的なら、コミュニケーションをとることで拡散性を上げられるのも大きなメリットですね。悲しいことに、顔見知り程度の人間に手を差し伸べる人はいません。

「チャンスは自分で掴め」という言葉があるように、コミュニケーションは向こうからやってきません。色んな人をフォローし、自発的にリプライを送りましょう。人間関係を築くのは時間がかかりますが、拡散性を上げる確実な方法です。

 誰かと仲良くする方法は簡単。自分にとって興味のあるツイートをした人がいたら、話しかるだけです。あまりにも単純すぎて信じられないかもしれませんが、人間というのは、自分に興味を持ってくれた人のことを覚えてくれるもの。それだけで十分なんです。

Twitter最大の利点は「コミュニティの境界線が曖昧である」ということ


 Twitterの良いところは、グループ機能が弱いことです。実質的なグループや、ダイレクトメッセージはありますが、ほとんどの人が普通にツイートすることが多いでしょう。仲良い人で固まっているような集団でも、その中に入るのはリアルほど難しくありません。

 まず1人のフォロワーと仲良くなって、お友達になる。次はお友達のフォロワーを漁り、フォローする。「友達の友達」は同じ人種であることが多い上に、共通の友人がいるので仲良くなりやすいです。いわゆる芋づる式と呼ばれるものですね。

 そうやってお友達を増やすと、自分なりの対人環境が出来上がります。到達するには試行回数を重ねるしかないのですが、面倒臭がることはありません。単純に、打算を排除して、仲良くしたい人と仲良くしてるだけで良いのですから。
 

【まとめ】普通に楽しむのが無難


 要は「生きている感を出すこと」と「同じ人種をフォローする」ことが大事なのですが、こんな意見も聞こえてきそうです。

「なんだ、大したことを書いていないじゃないか」

 そう思った方に、コミュニケーションを取らずとも人気者になる方法をざっくりと教えましょう。

・何かしらの実績を出す
・拡散されやすいツイートを投稿する
・様々なコンテンツを作る

 コミュニケーションを取るほうが圧倒的に簡単ですね。よくわからなかったら難しいことを考えず、普通に楽しんだほうが遥かに成果を出せます。よこしまな心は、態度から溢れるので注意してください。


 本を好きになれる方法を紹介しています。読書家になるには、実は積読が効果的だと知っていましたか?

まずは本を好きになるべし


「本を読む」という行為は、頭脳のトレーニングになります。

 ページに書かれた情報を読み取り、脳内で組み立てる。学術書であれば内容を理解することで論理性を高められますし、小説であれば想像力を養いつつ感情豊かな心を作れます。

 頭を使う娯楽であるため、楽しみながら賢い人間になれるのです。

 ……しかし、読書が面倒くさいものだと思っている人が多いですよね。その考えは間違いで、ちゃんと順序よく読書していけば、誰でも本が好きになるんです。だって、「脳に刺激を与える」という特徴は、優秀な娯楽である証拠なのですから。

 というわけで、今回は読書量を増やすために、本を好きになる方法を紹介いたします。

読まなくても良いから本を買う


 本を買っても読まない――いわゆる積読(つんどく)――という行為は、お金の無駄遣いというイメージが強く、世間からは良く思われていません。しかし、読書家になりたいなら、まず本を買わないといけません。身近にあると読んでしまう……という話もあるのですが、1番は「お金をかけた」という事実を作ることです。

 人間は損をしたと思いたくない傾向があります。お金をかけた物に対しては、なんとか有効活用しようとするので、本を読む確率が上がります。何事もきっかけがないと始めづらいので、悩んでいる暇があるなら、とりあえず何か買いましょう。

 積んでおく本は、少量では意味がありません。お金をかければかけるほど「もったいない」という気持ちも強くなるので、出来るだけ沢山買う必要があります。……とはいえ、興味のある本なんかそうそう思いつかない人もいるでしょう。その時はあえて興味のない本を買ってみましょう。実際に読むかどうかは関係ないですし、「こんなの読まねえよ」という本を選ぶのは新鮮な感覚になるので、意外と楽しいです。

読みやすい本を読む


 読書量を増やせない人は、活字に慣れていない傾向にあります。その状態で専門書を読んでも理解に時間がかかり、思うように読書量を増やせないでしょう。

 オススメは、児童向けに書かれた本から読むことです。専門用語が少なく、かなり噛み砕いて説明してくれているものが多いので、誰でも読めます。「学術書は読みたくないけど、単純に読書量を増やしたい」というのなら、ライトノベルや児童文学を読みましょう。

「子供向け」という響きに抵抗がある場合は、海外の児童文学という選択肢もあります。児童書っぽさが薄いので、公共の場でも視線を気にしなくて済みます。ただし、翻訳の良し悪しがあるのには注意してください。


気づきを探しながら読む


 読書量が増えない根本的な理由として、「本を読むメリットが分からない」というものがあります。人生の成功者や先輩方がしきりに読書を勧めるのは、「知識が増える」からなのと、「脳の刺激になるから」です。大抵の場合、この2つは繋がっていますが、切り分けることもできます。

「知識が増えると、脳が刺激される」と思いがちなところを「とりあえず脳を刺激する」と要素を分解することで、読書への敷居を下げられるのです。まずは「読書=勉強」という幻想を捨てること。そこで大事になるのが「気づきを得る」という考え方になります。

 興味を持ったこと、不思議だと思ったことをメモを取ってみましょう。分からない単語でも人名でも、なんでも良いです。気づいたところで何の得にもならないことでも良いです。とにかく面白がることの名人になるしかありません。

 どうしても気づきを得られないようなら、さっさと別の本を読んだほうが良いですね。何事もそうですが、楽しむことを第一優先しないと、好きになることは難しいです。

必要なところだけ読む


「気づきを探せ!」といっても、無理な状況は多々あります。序盤で述べられている情報が、すでに知っているものだと、読むのが苦痛ですよね。逆に分からない話ばかりで理解しづらい時も、読む気が失せてしまうでしょう。

 そんな時は、面白そうな部分だけ読みましょう。目次に目を通して、「これは!」と思った部分だけ読むのが良いです。小説だとこの方法は使えませんが、学術書・ハウツー本・実用書に関しては、「読みたいところだけ読む!」で十分なのです。

「でも、全部読まないともったいないよね……」と思われるかもしれませんが、「全部読まなきゃ」と思って、腰が重くなり、結局1ページも読まないよりはマシです。そもそも脳に刺激を与えるために本を読むのですから、刺激を受けない部分はスルーするのが正しいと言えます。本は最初から最後まで順を追って読む必要はありません。

【まとめ】モチベがあれば何でも出来る


 色々と書きましたが、1番大事なのは「モチベがあるかどうか」です。読書を習慣化させるには数ヶ月は毎日のように本を手に取る必要があります。

 モチベーション維持の仕方は、下記のリンク先で紹介しています。ゲームを例に「どうやったらやる気が出るのか?」を解説しつつ、具体的な方法を掲載しているので、この記事を読まれた方は参考になると思います。

やる気が起きない!ゲームで学ぶ3つのモチベアップ術|KaKuKaKu


 連絡フォームガジェットを個別ページに表示する方法と、CSSカスタマイズ、お問い合わせの雛形を掲載しています。コピペでOKです。

メールフォームは専用ページを設けるべき


 Bloggerには「連絡フォームガジェット」というメールフォーム機能があります。

 しかしサイドバー向けのデザインという前代未聞の仕様。使い勝手がすごく悪いです。文字は打ちづらいし、気づく人はいないし……多くのユーザーが不満を持っています。

 そもそも、メールフォームというのは専用のページにあって然るべきです。大きいと文字が打ちやすくなりますし、利用規約を書きたいですしね。

Create Separate Contact Page in Blogger - Blogger Widgets

「外部サービスを使うしかないのかな……」

 と思っていたところ、上記の記事を見つけました。海外サイトなので英語表記ですが、Google翻訳を使ってなんとか読んでいくと、「Javascriptを使えば、固定ページに連絡フォームガジェットを置けるよ」とのこと。

 さっそく設置!


 うーん、クソダサい。

 そもそも表記が崩れていますし、英語だし、何より小さすぎるという問題を解決できていません。

 これでは意味がない。ということで、今回は上記リンク先を参考にしつつ、お問い合わせページに相応しいメールフォームを作ってみました。

導入手順


 連絡フォームガジェットを削除(大事!)した後、自身のブログIDをメモしておきましょう。

 管理画面のURL「blogID=」から始まる数字がブログIDです。


<script>
var blogId = 'ブログID';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='送信中...';
var contactFormMessageSentMsg = 'メッセージを送信しました。';
var contactFormMessageNotSentMsg = 'メッセージを送信できませんでした。';
var contactFormEmptyMessageMsg ='内容がありません。';
var contactFormInvalidEmailMsg = 'メールアドレスが正しくありません。'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<br />
<center>
<form name="contact-form">
<br />
<br />
<table>
<tbody>
<tr>
<td>お名前 : </td>
</tr>
<tr>
<td><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="60" type="text" value="" /></td>
</tr>
<tr><td>メールアドレス : <em><span style="color: red;">(必須)</span></em></td>
</tr>
<tr>
<td><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="60" type="text" value="" /></td>
</tr>
<tr>
<td colspan="2">内容 : <span style="color: red;"><em>(必須)</em>
</span><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="2"><br />
<center>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="送信" /></center>
</td>
</tr>
</tbody></table>
<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</center>


 固定ページをHTMLモードにして、上記のコードを挿入してください。「ブログID」のところを、さきほどメモした数字に置き換えるのも忘れずに。

 パーマリンク設定も忘れないようにしましょう。固定ページではパーマリンク設定の項目がないので、タイトルに「contact」や「mailform」とだけ打ち込んで、一旦公開。そうするとタイトルがそのままリンクに適応されます。その後で、「お問い合わせ」や「メールフォーム」などの、ちゃんとしたタイトルにしましょう。

 これだけで完成。固定ページに連絡フォームガジェットを貼り付けられます。念のために、動作の確認をしておきましょう。

 しかし、見た目が悪すぎて使う気になれません。CSSで格好良くしましょう。

CSSでお問い合わせページに相応しいデザインにしよう



/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100%;
max-height: 100%;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 40%;
max-width: 40%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

How To Add a Contact Form on a Blogger Blog

 リンク先のCSSをカスタマイズして作りました。

 HTMLの編集にて、]]></b:skin>を検索。その上に、上記CSSを挿入しましょう。


 このような見た目だったら、お問い合わせしたくなりますね。

お問い合わせページの雛形



<h2>
メールフォーム</h2>
<br />
 メッセージは確認次第、対応させていただきます。<br />
<br />
 お問い合わせはTwitterでも受け付けています。その他の用件や、お問い合わせしたのに返信が来なかった場合などにも、ご利用ください。<br />
<br />
<fieldset>
<legend> <b><span style="color: blue;"><b>メールを送る前に</b></span></b></legend>
<br />
<div style="line-height: 1.4;">
 このページでは、以下の内容を承っております。<br />
<br />
<ul type="disc">
<li>仕事、活動などの依頼</li>
<li>当サイトのコンテンツに関する質問、連絡</li>
<li>当サイト内での問題報告</li>
</ul>
<br />
<span style="color: red;">※メッセージ内容は、当ブログ内で公開する可能性がございます。詳しくはプライバシーポリシーをご一読ください。</span><br />
<br /></div>
</fieldset>

 最低限ですが、雛形としてご利用ください。


 当ブログのキャプチャですが、大体こんな見た目になります。個別ページとしては文字数が少なすぎる(231文字)ので、各自利用規約を足す必要があります。

良いお問い合わせページを作るには


 お問い合わせページを設置する理由はふたつあります。

・サイト内の問題報告
・お仕事の依頼

 後者はよほど有名にならないと来ないと思いますが、人生何があるか分かりませんからね。専門的な活動をされている方なら是非、仕事依頼に関する規約は用意しておきましょう。


 Bloggerテンプレート「Vaster2」で利用できる固定トグルメニューを作りました。ドロップダウン機能つき。CSSとHTMLコードを公開しているので、コピペでカスタマイズできます。

トグルメニューはスマホユーザーに親切


 いまやスマホでネットサーフィンが日常となった現代では、「いかにスマホユーザーに親切なサイト作りをするか?」が集客力につながってきます。

 トグルメニューはコンパクトな見た目でありつつも、重要なリンク先を詰め込めるので、スマホ画面での利便性を向上させることができます。

 今回ご紹介するのは、Yukihy Lifeにて公開されているトグルメニューをBlogger向けにカスタマイズしたもの。お馴染み、日本人向けテンプレート「Vaster2」でも利用可能です。

 改変点は以下の通り。


・画面上に固定されるように設定
・メニューを2列表示
・PCだと完全非表示になるように設定
・ドロップダウン要素を排除
・レスポンシブ要素をVaster2基準に変更
・その他、Bloggerでは表示が崩れてしまう部分を修正


ソースコードと導入手引き



/*******トグルメニュ*********/
@media screen and (min-width:767px){/*PC時に非表示する要素*/
#menu{
    display: none;
}}
@media screen and (max-width:768px){/*スマホ時に表示する要素*/
#menu{
    background: #333333;/*背景色*/
    margin: 10px auto;
}
#container{
    margin-top: 40px;
}
#menu-inner{
    background: #333333;/*背景色*/
    position: fixed;
    top: 0;
    margin: 10px 10px -20px 10px auto;
    z-index: 2;
    width: 100%;
    height: auto;
    opacity: 0.8;
    margin-left:0px;
}
#btn-content{text-align: right;}/*ボタン位置*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #333333;/*ボタン背景色*/
    color: #fff;/*ボタン文字色*/
    font-size: 70%;
}
#menu-content{
    display: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}
#menu-content > li{
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    float: left;
    width: 50%;
    height: 40px;/*ボタンの大きさ*/
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;/*ボタンの大きさ*/
    background: #333333;/*背景色*/
    color: #fff;/*文字色*/
    font-size: 90%;
    padding: 0;
    text-decoration: none;
    z-index: 2;
    border: 1px solid #ffffff;
}}

 CSSはテンプレートに組み込むか、<style type="text/css"></style>で囲んでHTML/JavaScriptガジェットでheaderに挿入してください。


<div style="clear:both"></div>
<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="fa fa-align-justify" aria-hidden="true"></i>MENU</span>
    </div>
    <ul id="menu-content">
      <li><a href="">ホーム</a></li>
      <li><a href="">サイトマップ</a></li>
      <li><a href="">このサイトについて</a></li>
      <li><a href="">お問い合わせ</a></li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 768;/*スマホ時に表示する要素*/
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

 上記コードを、HTML/JavaScriptガジェットでheaderに挿入してください。

 ボタンの数は多くても6~8つくらいにしておきましょう。

トグルメニューを使いこなすためにカスタマイズ


 以上で完成なのですが、このままでは機能面に欠けているのでカスタマイズを推奨します。

 トグルメニューはスマホユーザーに向けて設置するもの。どうせならスマホで便利な機能をつけまくりたいものです。

「トップページに戻るボタン」はスクロールしづらいスマホ画面では重宝しますし、ページ内リンクはスマホでは気づかないコンテンツに目を向けさせることができます。このふたつが是非入れておきましょう。

「ページトップに戻るボタン」を配置




 トグルメニューは画面上を占拠するわりには、活用領域が少なくてもったいないですよね。とりあえずMENUの横に、「ページトップに戻るボタン」を置いておきましょう。

 ボタンを押した後にページを動かしてる感じが欲しい場合は、上記のリンク先が参考になります。

    <div id="btn-content">
        <span id="menu-btn"><i class="fa fa-align-justify" aria-hidden="true"></i>MENU</span>

 さきほど紹介したHTMLに、上記のタグがあります。btn-contentの真下に「ページトップに戻るボタン」のタグを挿入しましょう。

ページ内リンクを充実させる


 スマホ画面ではサイドバーや関連記事などに意識が向かないので、トグルメニューにページ内リンクを置いておきましょう。 

「HTMLの編集」から好きなガジェットに飛び、見出しタグにid属性を追加。そのid名をリンク先に設定するだけでページ内リンクの完成です。関連記事やシェアボタンも同様の手順で飛ばせるようにできます。

やっぱりドロップダウン機能も欲しい時のCSS



/*2階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    margin-top : -1px;
    padding : 0;
    border: 1px solid #353535;
    width: 200px;
    height: 40px;
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;
    background: #fff;/*階層メニューの背景色*/
    color: #333333;/*階層メニューの文字色*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #fff;/*階層メニューをクリックした時の背景色*/
    color: #333333;/*階層メニューをクリックした時の文字色*/
}

 上記のコードを、最初に紹介したCSSにくっつけます。最後にある}}の間に入る形にしましょう。


超簡単!スマホサイトでもタッチでhoverが効くようにする方法 | 渡邉 充敏 - Watanabe Mitsutoshi

 そのままでは動かないので、上記リンク先のコードを設置してください。


        <li>
            <a>記事を探す<i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
            <ul class="second-content">
                <li><a href="#">検索する</a></li>
                <li><a href="#">人気記事</a></li>
                <li><a href="#">関連記事</a></li>
            </ul>
        </li>

 階層メニューのHML表記は、上のようになっています。普通のメニュー項目と並べて置いておきましょう。

参考サイト


CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

 冒頭でも書きましたが、この記事で紹介しているトグルメニューは、Yukihy Life管理人・ゆきひー様の制作物をカスタマイズしたものです。リンク先では、この記事以上に丁寧な解説をされているので、困ったことがありましたら一読をオススメします。

 リンク先のメニューは高機能でいて、PC時にはグローバルメニューになるという優れもの。そのほうが管理が楽になるのですが、はてなブログ向けに作られたものなので、Bloggerで使う場合には記述を修正する必要があります。

 トグルメニューだけに表示したいリンクもあるだろうと思って、あえて分けてみました。お好みで選択してください。


 Bloggerテンプレート「Vaster2」で利用できるソーシャルボタンを作りました。CSSとHTMLコードを公開しているので、コピペでカスタマイズできます。

ソーシャルボタンをカスタマイズ


 日本人向けBloggerテンプレート「Vaster2」では、すでにソーシャルボタンがついています。

 デザインには申し分ないのですが、記事上に設置するには少々大きすぎます。

 そこで今回は、記事上に最適なソーシャルボタンを作ってみました。

記事上向けのシンプルなパネル型


ソーシャルボタン(PC)


 Wordpressサイトでよく見かけるパネル型アイコンを再現しています。シンプルかつスタイリッシュなデザインなので、どういったブログデザインにも溶け込みます。

 かなり大きめですが、必要最低限の装飾しか施していないので、記事上に置いても鬱陶しさを感じません。


 大きいボタンが嫌な場合は、幅を狭めることでコンパクトになります。

スマホでも安心のレスポンシブデザイン


ソーシャルボタン(スマホ版)

 PCだとボタンが3つずつ並んでいますが、スマホからだと2つずつ並ぶようにしています。小さめに設定しているので、存在を主張しつつも邪魔になりません。

日本で需要の高いLINEボタンを実装


 SNSによる拡散を期待できないPocketの代わりに、LINEボタンを入れています。

 その他は、Vaster2と同じラインナップ(Twitter、Facebook、Google+、はてなブックマーク、Feedly)です。

ソースコードと導入手引き



/* 記事上シェアボタン */
#share {
    padding: 10px;
}

.share {
    overflow: hidden;
}

.share li {
    font-size: 14px;
    float: left;
    text-align: center;
    width: 33%;
    margin-top: -4px;
    list-style: none;
    cursor: pointer;
}

.share a {
    font-weight: 700;
    display: block;
    height: 50px;
    padding-top: 14px;
    text-decoration: none !important;
    color: #fff !important;
}

.share i {
    margin-right: 7px;
    font-size: 1.5em;
}

.share img {
    margin-bottom: -6px;
    padding: 3px;
    margin-top: -8px;
}

.share .btn-text {
    position: relative;
    top: -3px;
}

.share .share-twitter {
    background-color: #55acee;
}
.share .share-twitter:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-facebook {
    background-color: #3b5998;
}
.share .share-facebook:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-google {
    background-color: #dd4b39;
}
.share .share-google:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-hatena {
    background-color: #2c6ebd;
}
.share .share-hatena:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-line {
    background-color: #00c300;
}
.share .share-line:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}


.share .share-feedly {
    background-color: #87c040;
}
.share .share-feedly:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.fa-hatena:before {
    content: "B!";
    font-family: "Verdana";
    font-weight: bold;
}

@media only screen and (max-width: 780px) {
.share li{
width:49%;
}}

 上のCSSを、既存のソーシャルボタンより下に挿入してください。

 ボタンの幅を変更したい場合は、.share liのwidth属性をいじってください。1列にしたいのなら16%に変更すればOKです。


<section id='share'>
  <ul class='share'>
    <li class='share-twitter'><a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;|&quot; + data:blog.title + &quot; &amp;url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-twitter'/><br/>Twitter</a></li>
    <li class='share-facebook'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-facebook'/><br/>Facebook</a></li>
    <li class='share-line'><a expr:href='&quot;line://msg/text/&quot; + data:blog.pageName + &quot; &quot; + data:blog.canonicalUrl' target='_blank'><img alt='LINEで送る' height='26' src='LINE画像のURL' width='26'/><br/>LINE</a></li>
    <li class='share-google'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-google-plus'/><br/>Google+</a></li>
    <li class='share-hatena'><a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-hatena'/><br/>はてブ</a></li>
    <li class='share-feedly'><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fサイト名' target='blank'><i class='fa fa-rss'/><br/>Feedly</a></li>
  </ul>
</section>

 HTMLの編集で、以下の文字列を探してください。

 <data:post.body/>

 見つけたら、その上にコードを挿入してください。

 各自で記入するのは、以下の2点です。

【LINE画像のURL】
 LINEアイコンをアップロードして、そのURLを貼り付けてください。

【サイト名】
 自分のブログのURLを入れてください。

参考サイト



【Blogger】自作ソーシャルボタンを設置して読み込みを高速化する | Black Everyday Company

 この記事で公開したソーシャルボタンは、Black Everyday Companyのダーシノさんが作ったデザインを元に制作しました。

 リンク先のボタンも記事上に適したデザインなのですが、導入してみたところ文字色が白くならなかったり、スマホからだと表示が崩れすぎたりするので、Vaster2で導入する場合は手を加える必要があります。




設置方法|LINEで送るボタン

 LINEアイコンを表示したいなら、自分で画像を用意する必要があります。公式サイトで配布されているのでダウンロードしましょう。自分は30x30の画像を使っています。


 Vaster2にて「404 Page Not Found.」というエラーが表示された場合の、ページの作り方を解説しています。雛形があるのでコピペでOKです。

404ページを舐めるべからず


 404ページを設定していないブログは、絶対に損をしています。

「何を馬鹿な……」という声が聞こえてきそうですが、論より想像。以下の問題について、考えてみてください。

Q.次に自分が何をするかイメージしよう
1,休日、暇なのでネットサーフィンをしていた。
2,とあるブログ記事のリンクを見つけ、タイトルに興味を惹かれる。
3,URLをクリックしてみると、肝心の記事が出てこない。
4,該当の記事が削除されたか、URLが変更されたことに気づく。
5,僕は○○をした。


 さて、皆さんは5番目に何をしますか?

 回答はありませんが、僕なら……、

「さっさと、そのブログを離れる」

 ですね。理由は以下の通りです。

「わざわざ探すのが面倒くさい」
「情報発信系ブログなら、他に似たような記事なんかいくらでもある」

 自分で言うのもなんですが、至極当然の行動かと思います。

 しかし、404ページがあったらどうでしょうか?

 ……って、この記事を来ている人はたぶん、404ページを作りたくて読んでいるんですよね。無粋な話は最後にして、とっとと作り方に移りましょう!

404ページに置く文章を考えよう



 まずは記事作成ページで、404ページに表示させたい文章を作ります。


<!--404ページ-->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='entry-content'>
<div class='date-outer'>
  <h1>404 Page Not Found.</h1>
<!--画像を入れたいなら、ここに挿入-->
<br />
 お探しのページは見つかりませんでした。<br />
<br />
<h2>
目的のページを探すには?</h2>
<br />
 いつも当サイトをご利用いただきありがとうございます。<br />
<br />
 大変申し訳ございませんが、お探しのページは削除されたか、URLが変更されています。お手数ですが、以下の方法で目的のページをお探しください。<br />
<br />
<fieldset>
<div style="line-height: 1.4;">
<br />
・ブログ内検索機能を使う<br />
・カテゴリから探す<br />
・人気記事、関連記事などから探す<br />
・連絡フォームで問題報告をする<br />
<br /></div>
</fieldset>
<br />
 これからもよろしくお願い致します。<br/>
</div></div>
</b:if>
<!--404ページここまで-->


 上のコードは雛形として使ってください。最低限の文章しかありませんので、主に内部リンクを充実させてください。

 完成したらHTMLモードにして、内容を全部コピーします。

タグの解説


 今回divタグで使用しているclassを解説します。

 自分も試行回数を重ねて作っただけなので、間違ってるかもしれませんが、今後のブログカスタマイズの参考になれば幸いです。

【entry-content】
 記事ページの見出しデザイン。

【date-outer】
 おそらく、記事ページのデザイン設定かと思われる。

【main-outer】
 下記で取り扱うclass名。
 おそらく、ボディのメイン領域(左側に表示される)と思われる。

404ページを貼り付ける


「管理画面」 → 「テンプレート」 → 「HTMLの編集」と移動して、以下の文字列を探します。

        <!--コンテンツ部分-->
        <div class='main-outer'>

 見つかったら、その下にコピーした文章を挿入しましょう。

 テンプレートを保存し、実際に何かしらのエラーページに飛んで、表示を確認します。



 思った通りに表示されていたら、完成です。

 ちなみに、エラーページを出す1番簡単な方法は、ブログ内検索ガジェットを使うことです。何も入力せずに検索ボタンを押すと、飛んだ先のURLがエラー扱いになっています。

 検索ガジェットを設置していない場合は、URLに滅茶苦茶テキトーな文字を入力して、エンターキーを押しましょう。

タイトルを「404 Page Not Found.」にする


 せっかくそれっぽいページを作ったのに、ページタイトルが「|ブログ名」と表示されているのが格好悪いですよね。

 というわけで、タイトルもそれっぽくしましょう。


<!--404ページのタイトル-->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>
404 Page Not Found.|<data:blog.title/>
</title>
</b:if>

 上記のコードを、<head>内にある<!--ブログタイトル-->の、一つ上に挿入するだけでOK!

巡回率を上げる404ページを作るコツ


 冒頭で「404ページは大切だ」と書きましたが、ただ「エラーページですよ」と報告しているだけでは意味がありません。

 良い404ページを作るには、以下の要素を満たす必要があります。

・ページが表示されない理由を説明する
・ページを探す方法を教える
・サイトマップへのリンクや、検索ガジェットなどを置いて内部リンク対策をしておく

 特に重要なのは、内部リンクです。ぶっちゃけ目当ての記事を探させるのが目的ではなく、「俺のブログには良い記事がめっちゃあるぞー!」とアピールしまくるのに意味があるんです。

 要は「いかに、別の記事に注目させるか」の工夫が大事、ということですね。


Vaster2を使いやすくするためのカスタマイズを紹介しています。機能追加がメインなので、デザインやバグ修正などは掲載していません。

Bloggerテンプレートは「Vaster2」ほぼ一択


Vaster2|レスポンシブ対応済みのblogger日本語テンプレート

 Googleのブログサービスである「Blogger」は、沢山の利点とともに、様々な欠点があります。そのひとつが「日本人向けテンプレートが少なすぎる」ということです。覚えてもらってナンボのブログ運営において、個性を出しづらいのは非常に辛いところ。

 しかし、地獄に仏とはまさにこのこと。日本人向けのテンプレートが1種類だけ存在します。それがトーマスイッチ様にて無償配布されている「Vaster2」です。見た目は非常にシンプルですが、SEO対策完備でレスポンシブデザイン。カスタマイズ性が高く、好き勝手にいじるだけでオリジナルなデザインが作れます。

 導入したら、早速自分好みのデザインにしよう!

 ……と言いたいところですが、Vaster2のポテンシャルを引き出すには、「デザインのカスタム」よりも「機能のカスタム」が必要になってきます。そもそもBlogger自体が、ブログオタク向けなんだよなぁ。

 この記事では、個人的に追加するべきだと思った機能をまとめています。

ブログカスタマイズの基本


 Vaster2は標準で様々な機能を搭載していますが、カスタマイズを前提に作られたデザインなので足りないものが多いです。当然、こちらで用意せざるを得ないものもあります。

 以下はVaster2の標準装備ではないものの、本気でブログ運営するには必要不可欠な機能です。

”固定トグルメニュー”でスマホ時の利便性を上げる


 Vaster2のグローバルメニューは便利なのですが、スマホで閲覧する時だと少々存在感が薄め。せっかくのレスポンシブデザインなのですから、携帯端末で表示された場合は、画面上に固定されるトグルメニューを設置しておきたいですね。

 上記のリンク先は、はてなブログ用に作られたトグルメニューですが、Bloggerでも利用できます。が、ちょっと記述を修正する必要があります。階層メニューをスマホでも表示するには、display属性を変更したうえで、スマホでhoverを有効にしなくてはいけなかったり、少し面倒。でも、やるだけの価値はあるでしょう。

”404ページ”を入れないと不親切


 404 Not Foundはどこで起きるか分からないもの。特にBloggerでは、何も入力せずに検索ボタンを押すとエラーページに飛んでしまいます。

 404時のテキストがないとユーザーは混乱しますし、せっかく訪問してくれたのに「不親切」ということで帰ってしまう恐れがあります。必ず入れておくようにしましょう。

”ページトップに戻るボタン”を設置


 ブログの上部にはメニューやガジェット(ブログパーツ)など、重要な要素が多く含まれています。記事ページであるのなら尚更、「目次」「公開日」「概要」「ソーシャルボタン」など、数えたらきりがありません。

 特にスマホでページトップに戻ろうとすると、指を何回も動かさないといけないので苦痛です。携帯端末を基準に、使いやすい位置に「トップに戻るボタン」を設置しましょう。

”ページナビ”を高機能に



「自分が今、何ページ目を見ているのか?」、もしくは「このブログはどれほどの記事数があるのか」が直感で理解できると、ユーザーに好感をもたれます。

 Vaster2のページナビは「前へ戻る」と「次に進む」しかありません。サイト内を巡回しやすくするために、高機能にしておきましょう。

記事ページを高性能化


 当然ですが、ブログ集客の肝は「高クオリティな記事を書くこと」です。

 良質な記事を書くには、ただ情報を提供しているだけでは不十分です。様々な機能をつけて、読者に対して親切になるよう工夫を凝らすことで、目に見えて利便性が向上します。

 以下は記事ページにあると、確実に役立つ機能です。

”目次”で記事の構成を分かりやすく


 目次は、記事の構成を分かりやすく伝えるためのものです。途中から読み直したい場合、あるいは興味のある部分だけ読めるようにしておくと便利です。

 長い文章を書いてしまうと、読者に負担をかけてしまいます。全文読んでもらえたらブロガー冥利に尽きますが、部分的にでも読まれる工夫をしておかないと、なかなかファンは増えません。

”最終更新日”で記事の信頼性を保つ


 公開日のほかに最終更新日があると、記事の信頼性が上がります。

 どんな情報であれ、記事というのは生物です。時間とともに「真実」だったものが「嘘」になってしまいます。信頼性を保つためには定期的な情報更新が必要なのですが、更新したことを伝えていなければ意味がありません。公開日が古いと、それだけでユーザーは逃げるので最終更新日は必須です。

”ソーシャルボタン”を記事上にも貼る


 Vaster2ではソーシャルボタンが標準装備されていますが、記事下にしかありません。そのボタンもスマホで見ると、記事上に置くには適していない大きさです。

 これから読もうとしているユーザーの邪魔にならないよう、記事上には小さなソーシャルボタンを置きましょう。

”LINEボタン”は優先度が高い


 TwitterやFacebookほどではないものの、LINEもSNSなので拡散性があります。日本では非常に多くのユーザーがいますし、絶対に入れましょう。余談ですが、Skypeやmixiも考慮に入れていいかもしれません。

 PocketやFeedlyといった拡散性の低いボタンは優先度も低いので、そこら辺と入れ替えるのがベターだと思います。

ブログパーツ


 ブログパーツは「集客」という観点で考えると、ひとつひとつの効力は薄いです。「プロフィール」「サイト内検索」「人気記事」「ラベルのリンク」「ブログアーカイブ」さえあれば、困ることはありません。特にスマホ時代の現在は、サイドバーにまで目を向ける読者は稀です。

 それでは「なぜ導入するのか?」と言いますと、「かゆいところに手が届く」からです。ブログのコンセプトによってピンポイントで欲しい機能があるかと思います。上手いこといけば巡回率アップに繋がります。

 とはいえ多すぎてもサイトデザインが悪く見えてしまうので、そこそこの数にしておきましょう。以下は、比較的汎用性の高いブログパーツを紹介しています。

”最新記事”で直帰率を下げる


 サイドバーに最新記事ガジェットを置いておくことで、記事ページでも「最近はどんな記事が投稿がされたのか」を確認できます。直帰する人へのアプローチにもなるので、巡回率アップを期待できるでしょう。

 ホーム画面では必要ないので、ifタグで記事ページのみ表示されるようにしておくのがベターです。

”ラベルサーチ”で綺麗なカテゴリ整理をする


 Bloggerではカテゴリがなく、代わりにラベルがあります。階層化ができなくて、標準ガジェットでは自由に並べ替えられないので、不満に感じているブロガーが多いです。ラベルを親カテゴリ・小カテゴリの要領で沢山つけると、かえって見づらくなってしまいます。

 要は、Bloggerのラベルシステムは「整理が大変」という問題を抱えているのです。それを解決するのが、自分が制作した「ラベルサーチ」というブログパーツ。記事数が多かったり、データベース系のブログを運営している人にオススメです。

”Twitterフォローボタン”でSNS強化


 集客率を上げるためには、SEOだけではなくSNSにも力を入れる必要があります。特にTwitterは大事で、フォロワーが多ければ多いほど、記事が拡散される機会が増えます。

 フォローボタンは記事下に大きく貼っておくか、プロフィール欄に適したサイズで貼ってきましょう。上記のリンク先は、プロフィール欄に丁度いいです。

”現在ページのQRコード”でスマホユーザーに配慮


 スマホでネットサーフィンする人のほうが多い時代。パソコンから訪問した人にも、スマホで読みたい場合があるかと思われます。実際のところ、どの程度効果があるか分かりませんが、「ないよりはマシ」だと思います。

 大抵の場合はパソコンで利用されるはずなので、サイドバーのなかでもかなり下の方に置いても問題ないでしょう。

ブログカスタマイズの三原則は「親切」「巡回」「拡散」


 様々な機能を紹介しました。しかしブログカスタマイズは、自分自身で足りないと思ったものを追加していくほうが楽しいと思うので、あえて紹介していない機能もあります。

 ブログをカスタマイズする上で重要なのは、以下の3点です。

・親切度の向上
・巡回率の向上
・拡散性の向上

 このブログ集客三原則は、カスタマイズだけではなく「記事作成」や「宣伝活動」にも大事になってきます。常に意識しましょう。

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.