自分で作れるホームページ作成法

自分で作れるホームページ作成法

本業が忙しい人でもビジネス用のホームページを自作する方法をやさしくお伝えします。

Amebaでブログを始めよう!

Aさん

アメブロで吹き出しってできるんですかね?

田中

できるか実験してみましょう(笑)

Aさん

おぉできたみたいですよ!

田中

本当だできたみたいです。実験成功ですね!

という茶番はおいておきまして




田中

この会話風の記事を作るには、先にcssを保存しておいて、記事をhtmlで作るとできます。

こちらの記事「cssファイルの開き方と編集方法」でサンプルcss配布してますんでどうぞよろしく!

追記
PC版のアメブロ記事では正常に見えていたのですが、スマホ版で確認したら表示がくずれてました^^; 以下の方法で外部ファイル化したCSSをアメブロで読み込むとできるみたいですね

朗報!アメブロのスマホ版CSSをカスタマイズする目からウロコな方法を試してみたョ!

ブログヘッダー画像を作成する前にライバル調査を徹底して行おう


こんにちは、ホームページ作成アドバイザーの田中孝一です。
本日もよろしくお願いします。


今日はブログヘッダー画像を作るまえのライバル調査についてお伝えします。

今回の記事は下記のようなお悩みをお持ちの方向けです。

・業者に依頼しても思った画像が作れなかった。。。
・ビジネス用のブログのヘッダー画像ってどうやって作るの?
・クラウドワークスの様な外注サイトでブログヘッダー画像を依頼したいが、ある程度自分でコンセプトを固めないと依頼すらできない。


これは、私がお客さんのバナーを作る時にいつも取っている手法です。
始めてライバル調査をされる方にもやさしく、理想に近いやり方を書かせていただきました。



【目次】
1、ブログヘッダー画像とは?(簡単なおさらい)
2、まずは成功している他社のブログヘッダー画像を探す
3、なぜライバル調査が必要なのか?
4、これだけは外せないライバル調査の際にチェック項目3点
5、ライバル調査の手順



1、ブログヘッダー画像とは?(簡単なおさらい)
ブログヘッダー画像はまさにブログのヘッダー(ブログの上のほう)におく画像の事です。
ブログヘッダー画像

↑たまたま見つけた沖田スポーツ整体さんのブログヘッダー画像
明るい部分全てがブログヘッダー画像

ビジネス用のブログ、いわゆるブログから集客をしようとしているブログには、このヘッダー画像の良しあしでかなり集客が左右されます。

今回は、このブログヘッダー画像の作る際に気を付ける点や、すでに成功しているライバルのブログヘッダーの調査方法など、私が行っている方法についてお伝えします。

2、まずは成功している他社のブログヘッダー画像を探す
成功しているであろうブログをみつけ、そのブログヘッダー画像を30ほど集める事を行っていきます。やり方は後述します。

成功しているブログの定義は、人気ブログランキングで上位になって事とします。
しかし、この定義でも確実ではありませんが、やみくもに探すよりは効率よく探せますので、人気ブログランキングを軸に探していきます。


3、なぜライバル調査が必要なのか?
HPを作成するには必ずライバル調査が必要です。
ブログヘッダー画像についても、やはり先に成功しているライバルがどのようなヘッダー画像を作っているのかを調査して集める事がとても重要です。

ライバル調査をして得られるポイントは3つあります。

(1)自分で思いつかない気付きを得られる。
→数を集める事である程度どのような画像を作ればいいのか方向性が見える。

(2)成功しているブログヘッダーをまねる事で成功率が高まる。
→成功ブログ=人気ブログランキングで自分と同じジャンルのブログを見つけ、その中から自分のフィーリングに合うものだけを抽出する事ができる

(3)ブログヘッダー画像を作る時の発想の種になる
→多数の画像を保存しておく事で外注に頼むときにかなり役立つ


4、これだけは外せないライバル調査の際にチェック項目3点

ライバルの大前提としてまずブログから集客しようとしているか?
という事です。
趣味のブログや体験談など明らかに個人が運営していそうなブログは省きます。
あくまでブログのみで集客をしようと頑張っている感が伝わるブログに限定していきます。

そしてライバル調査でチョイスする条件としては下記の3つ全てに当てはまるかをチェックしてください。

(1)ぱっと見で訪問者にいいイメージを与える「デザイン」を確保しているか?
(2)3秒で何のブログか理解できる「内容」になっているか?
(3)訪問者の記憶に残すための「独自性」があるか?

詳しくは、以前の記事ブログヘッダー画像を作成する前に押さえておきたい3つの事をご覧ください。



5、ライバル調査の手順
(1)ブログランキングにアクセスします
http://blog.with2.net/

(2)自分のビジネスに合うジャンルのブログランキングを見ます。

(3)ランキングの上から順番にサイトをチェックして、チェック項目に合致するブログを選びます。

(4)選んだブログはURLとヘッダー画像を保存しておきましょう
これは、外注のデザイナーなどに依頼する時にとても役立ちます。

またエバーノートを利用すると、URL、サイトのキャプチャ、感想などを一度に保存出来てかなり便利ですので下記の記事を参考にやってみてください。

ライバルブログの調査はevernoteを活用しよう




今回の記事を気に入っていただけた方は読者登録へ!
ブログヘッダー画像を作成する前に押さえておきたい3つの事

ブログヘッダー画像作成前のチェック3


こんにちは、ホームページ作成アドバイザーの田中孝一です。
本日もよろしくお願いします。



先日、ダメなブログヘッダー画像の共通点についてまとめました。

この記事を書くために300程のブログヘッダー画像をチェックしました。

すると大半のブログヘッダー画像が目的から外れていたり、よくわからないまま作ってしまったものが多いのが現状だという事が解りました。

ブログのヘッダー画像はブログにとってかなり重要な要素なのに、作り方が解らず、かえって逆効果になっているブログが多いのが現状です。

今回の記事では、ビジネスブログ向けのブログヘッダー画像はどうやって作ればいいのか?という考え方についてお伝えします。


ブログヘッダー画像と検索すると「無料で作れる」という作り方情報が多数出てきます。
しかし、そこには作り方などのテクニックの紹介ページがほとんどで、作る作業以前にやるべき、どんなブログヘッダー画像にするかの「設計方法」を教えてくれるところはほとんどありません。


作り方の前に、何のためにブログヘッダー画像が存在するのか?

ブログヘッダー画像の重要な役割について3つほどお伝えします。

この3つのポイントをはずさないように設計する事が重要です。


この3つのポイントは、私が現場で使っているチェック項目です。

このチェック項目をクリアーしていれば、まずは合格なブログヘッダー画像という事になります。



もし、すでに作成済みの場合にはチェックリストとして活用できると思います。

■ブログヘッダー画像の3つの役割とチェックポイント
1、ぱっと見で訪問者にいいイメージを与える「デザイン」を確保しているか?
2、3秒で何のブログか理解できる「内容」になっているか?
3、訪問者の記憶に残すための「独自性」があるか?



それぞれ、詳しく見ていきましょう

1、ぱっと見で訪問者にいいイメージを与える「デザイン」
ブログヘッダー画像の見た目の美しさですね。
パッと見で「きれいだな」「かっこいいな」「素敵だな」「よさそう」と感じるブログヘッダー画像はは訪問者の心をとらえます。

恋愛の本には、人は初めて会う人の「第一印象」でほとんど決めてしまうという事が書かれています。

・あなたを恋愛対象とするか、しないか
・あなたが仕事がデキルひとか、デキナイ人か
・あなたを採用するか、しないか
・あなたが良い人か、悪い人か
・あなたと今後うまくやれそうか

今後、長く付き合うかもしれない人をこの一瞬で判断されてしまうのです。
ここを突破しないと、その先の展開がありません。

ブログヘッダー画像の第一印象もこれと同じでとても重要な要素です。

良いイメージと言うと難しく考えてしまうと思いますが、これは普段から他人のブログなどを見ている最中に「あ、このブログの雰囲気が好きだ」というブログをストックしておくとよいでしょう。

あくまでもあなたの視点やフィーリングを大切にしてください。

他人に任せて選んだおしゃれな服よりも、あなたの目で見て、肌で感じた、自分で選んだ服をずっと気に入って着るように、ヘッダー画像も気に入ったものは長い付き合いになります。

当然、そのフィーリングを気に入ってくれる、ブログ訪問者の中に必ずいます。

そのようなフィーリングの合う人をお客さんとして迎える方がそのあとの展開が楽になります。

なので、ここは妥協せずに普段から良いブログを見つけたらストックしておくようにしてください。



2、3秒で何のブログか理解できる「内容」
ブログ訪問者はとにかく忙しいです。
ビジネスブログの訪問者はたいていの場合、自分の悩みを解決してくれるブログ記事を探しています。(本当はそのようなブログを狙って書かないといけないのですが)

自分の探している記事が無いとすぐに検索結果に戻ってしまいます。

そんな忙しいお客さんを引き止めて、その下の記事を読ませるには

3秒で何のブログなのか理解してもらう必要があります。

これを解決するには、簡単なキャッチコピーを置くのが効果的です。

・どんなジャンルのブログなのか?
・どんな専門家がかいているのか?
・ブログを読むと読者にどんなメリットがあるのか?
・本当にこのブログ記事は読む価値があるの?

このような視点で、ブログのキャッチコピーを書いてヘッダー画像に入れてみましょう。

でも、間違っても売り売りのキャッチコピーは避けましょう。


良いブログはリピーターが多いです。
リピーターを増やさなければ失敗ブログともいえます。

デザインの派手なヘッダー画像や引きの強いキャッチコピーは新規訪問者には効きますが何度も訪問するリピーターには煙たいだけです。


究極的にはロゴだけでOKですが…
ネットで有名なブログをチェックしてみるとヘッダー画像って、ほとんどロゴだけのシンプルなやつです。一度チェック見ると良いでしょう。

アルファブロガー・リスト


これは、アルファブロガーのようにブランディングが出来上がったブログの場合です。


かけだしのブログはやはり少しデザインやイメージを盛った感じにしてもいいかと思います。


3、訪問者の記憶に残すための「独自性」
1つ目のポイントで、ぱっと見で訪問者にいいイメージを与える「デザイン」が重要と書きましたが、それに加えて「独自性」が必要です。

独自性は他にない売りともいえます。

簡単な例でいくと「自分の写真」です。
写真を掲載する事で、どんな人物が書いているのか?
ぱっと見てすぐわかりますし、その下に「●●アドバイザー」という肩書でも書いてあれば、一発で独自性が生まれます。

もし、自分の写真がいやな場合には似顔絵を作ってもらうのも手です。

手持ちの写真から似顔絵を作ってくれる「マイピク ビジネス」




いかがでしたでしょうか?

今回はブログヘッダー画像を作る時の「考え方」についてお伝えしました。

是非、このポイントにあっているか照らし合わせしてから作るようにしてみてください。



今回の記事を気に入っていただけた方は読者登録へ!

アメブロのスマホ版をPC上で確認する方法


こんにちは、ホームページ作成アドバイザーの田中孝一です。
本日もよろしくお願いします。


アメブロのスマホ版をPC上で確認する方法について以前、PC上でスマホサイトを見る方法 Google Chrome編を紹介しましたが、今回は別の方法を紹介します。


この方法ですと、アメブロだけではなくスマホの表示を確認したいサイトを自由にブラウザで開く事ができます。

インストールから閲覧まで1分もかからない手軽な方法です。

早速ですが図解で説明します。


【手順】
1、Google Chromeを起動

2、User-Agent変更ツール「cTouch」プラグインをインストール

 2-1下記URLにアクセス
 https://chrome.google.com/webstore/search/cTouch

 2-2cTouch r4 (filesystem)をクリック


 2-3ポップアップするので「+無料」をクリック


 2-4確認ポップアップで追加をクリック


 2-5アイコンが表示されインストール完了



3、cTouchを使う
 3-1Chromeの右上にあるcTouchアイコンをクリック
 3-2リストの中の下から2番目「Android Firefox Mobile 30.0」をクリック



4、自由にWEBページを見る
cTouch設定中の場合、アメブロのPC用のブログアドレスにアクセスすると、自動でスマホ用のアドレスに転送されます。



http://ameblo.jp/belink/ ←PC用

http://s.ameblo.jp/belink/ ←スマホ用

cTouchの設定を解除すると、スマホ用のアドレスにアクセスしても、自動でPC用アドレスに転送されてしまいます。
http://s.ameblo.jp/belink/ ←スマホ用


http://ameblo.jp/belink/ ←PC用


5、cTouchの設定を戻す
 5-1 Chromeの右上にあるcTouchアイコンをクリック
 5-2 リストの一番上「Don't modify (original)」をクリック




今回の記事を気に入っていただけた方は読者登録へ!