新規ページレビュー - 障害児(障がい児)のための音楽療法とピアノレッスン

2013年03月31日

新規ページレビュー

ども、ピアノ教室管理人です。

ふと思うところあって、自サイトの中で新規に作成したページについてのレビュー記事を書いていこうかなと。



自サイトというのはもちろん本業のピアノ教室のホームページのこと。


新規レッスンメニューなどの立ち上げにあわせて特設ページなどを作るわけですが、その制作上のポイントや特筆すべきことなどをまとめてレビューしてみたいと思います。


もちろん、このブログから新規ページへリンクすることでのSEO効果も期待してのことです。^^
(微々たるものかもしれませんが...。)


まず第1回目となる今回はこちらのページのレビューです。




「障害児(障がい児)のための音楽療法とピアノレッスン」のページ


うちのピアノ教室で以前から取り組んできている、障がいをもった子どもたちへのピアノレッスンと音楽療法をリファインして、レッスンメニューとして今回明確に打ち出しました。

そのための特設ページとなっています。


【ページキャプチャー画像】
20130331-02.jpg
▲クリックすると拡大表示(400px*5284px,370KB)



ページ全体の様式


ページ自体は典型的な縦に長〜いランディングページの様式になっています。


縦長のページにすることのメリット・デメリットはいろいろあるんですが、今回のレッスンメニューに関連する情報や文章、語句、キーワードが、サイト内の他のページには圧倒的に不足しているために、このページにギュっと凝縮させたいという思惑がありました。


そのため一般的な縦長ランディングページに比べると画像による情報が少なく、文字情報をたっぷりと書き込んで関連語句や共起語などを盛り込んでいます。


つまり、ページ単体でのSEO効果も狙ってるというわけですね。



ページのライティングとその構成について


情報量の多い縦長のランディングページではライティングが重要になります。


何をどういう順番で記述していくのか?
それで読者の心理はどう動いていくのか?

といったような、いわゆるライティングスキルが必要になるんですよね。


これに関しては今回、ある「型」に当てはめながら書いています。


雛形というかテンプレートみたいなライティングの型があって、ある程度その流れに沿って構成・記述していきながら、ところどころで今回のレッスン内容に合わせて改変しています。


この辺は詳しく書き出すととても紹介しきれないので、大まかなライティング構成というか順番だけちょっと書いておきますね。

  1. キャッチコピー
  2. レッスン名
  3. 問題回帰
  4. 自己紹介
  5. 共感
  6. レッスン概要
  7. レッスン詳細
    • ベネフィット(B)
    • エビデンス(E)
    • アドバンテージ(A)
    • フィーチャー(F)
  8. お問い合わせ先
  9. Q&A
  10. ご挨拶と御礼

という順番・構成になっています。


1.キャッチコピー(煽り文句)については今回のレッスンメニュー内容を鑑みて使っていません。
7.レッスン詳細の中は「BEAFの法則」が入れ子状になっています。



Webデザイン上の取り組み - レスポンシブWebデザイン


今回のページ作成では、はじめてレスポンシブWebデザインにチャレンジしてみました。


レスポンシブWebデザインとは、ひとつのHTMLでパソコン、スマホ、タブレットでの閲覧を可能にするWebデザイン上の考え方と手法です。


ホームページは元々、典型的な手書きのHTMLサイトなのでPCでの閲覧しか考慮してませんでした。
(なんせ2006年に作って、増改築を繰り返していますからね。)


しかし時代の流れは早く、スマホ、タブレット端末がこんなに普及している昨今、やっぱりその対応を考えておかないと集客チャンスを逃して機会損失してしまいますよね。


というわけで、レスポンシブWebデザインに挑戦したというわけなんです。




しかしWordPressなどのCMS(コンテンツマネージメントシステム)とはちがって、サイト全ページを一括でレスポンシブなデザインにはできませんので、今回はこのページだけのレスポンシブ対応となりました。


・・・にしても、これがかなり大変で、^^;
一応それなりにレスポンシブ対応になっていますが、今後にいろんな課題を残す結果となりました。
トホホ...。



もちろんガラケーも!


さてレスポンシブWebデザインでパソコン、スマホ、タブレットに対応しましたが、忘れちゃいけない携帯電話、つまりフューチャーフォンというかガラケー(^^;)にも対応。

携帯サイトも別途、ちゃ〜んと作ってあります。


掲載できる情報量はおのずと少なくなってしまいますが、ターゲット層を考えると、まだまだ携帯サイトの需要というか必要性は高いのかなと思います。


携帯サイトでネックになるのは問い合わせフォームからのフロー(流れ)。
特に問い合わせ直後の自動返信メールの不達は頭のイタイ問題です。


その原因は(本人も忘れてしまってる)携帯電話側の迷惑メール防止機能関連か、携帯メールアドレスの不備(RFC違反)に起因するケースがほとんどだと思います。


この対処に「問い合わせ完了画面」をしっかり作り込んで注意を促すとともに、キャリア別のドメイン指定受信変更先へのリンクボタンを用意したりとか、それなりに気を配ってアレコレ準備はしています。


【携帯サイト問い合わせ完了画面キャプチャー画像】
20130331-04.jpg
▲クリックすると拡大表示(400px*1734px,309KB)




パソコン、スマホ、タブレット用ページと携帯用のページとの振り分けは、アクセス元の情報(USER_AGENT)を読み取って、「.htaccess」への記述で対応したページへ自動で振り分けています。

って、全部サーバー側で簡単に設定できちゃうのでこれは楽チンでした。




今回のレビューまとめとか



  • 縦長のランディングページで文字情報を豊富にしてSEO効果を狙う

  • 読者の心理を考慮したライティングと構成での記述

  • レスポンシブWebデザインでPC、スマホ、タブレットにも対応

  • 携帯サイトも別途準備(問い合わせフローの作り込み)


といったところが今回のレビューのポイントです。


今回ページレビューで取り上げた「障害児(障がい児)のための音楽療法とピアノレッスン」はコチラになります。

もしよかったら覗いてみてくださいませ。



こうやって振り返ってみることで思い出すこともあったり課題なんかもハッキリして、個人的にはなかなか有意義だったんじゃないかと感じたので、今後も新規ページ公開の際には、こういったページレビューを書いてみたいと思います。

(誰かの役に立つことがあればいいんですけどね。^^;)


それではまた。
(´∀`*)ノシ バイバイ



ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。