集客できるトップページの デザインとコーディングの手法


新潟ホームページ制作 RutuboTOP » 集客できるトップページの デザインとコーディングの手法

集客できるトップページの デザインとコーディングの手法

こんばんは、Rutuboの小池です。 


ゴールデンウィークが明けましたね。 
皆様は何処かに行かれましたでしょうか? 


私は近場の博物館に藤の花を見に行ったくらいです。 
あまり休日と仕事の日の堺が無いので、普段通りに過ごしました(^^) 



さて、本日は、集客できるホームページ作成講座の3回目のお話です。 
今回は、トップページのデザインとコーディングの手法に関して 
ご説明しました。ブログと一緒にご覧下さい。 
http://www.webmarketing-rutubo.com/toppage-design-coding/ 


まずデザインですが、 
前回解説したワイヤーフレームを元に、 
adobe社が提供しているPhotoshopFireworksを 
利用してデザインします。 
デザインデータが出来上がったら、 
コーディングしてホームページ用のデータにする 
とお伝えしました。 
クリエイターで無い経営者の方も、 
上記の作業の流れは抑えておいて損は無いと思います。
 


次に、スマートフォン・タブレット端末に対応した 
レスポンシブデザインについてご説明しました。 
2014年時点で日本国内のスマートフォンユーザーは4,000万人を超えて、 
国内メーカーは2017年にガラケーの販売を終了するようです。 
更に、Googleが2015年4月21日に検索エンジンのアルゴリズムを 
変更して、モバイル対応しているサイトの検索評価を上げるようにしました。 
今後は、スマートフォン・タブレット端末に対応することは 
必須とお考え頂くと良いかと思います。
 
http://www.webmarketing-rutubo.com/toppage-design-coding/ 


また、ヘッダーエリアのコーディングは、 
特にSEO対策の重要な部分を占めるので、 
慎重に設定するようにとお伝えしました。 
特にタイトルタグ、ディスクリプションタグ、h1タグの設定は大切です。 
また、Facebookで拡散されやすいようにOGPの設定も忘れないようにして頂ければと思います。 


後、電話番号を記載した画像やテキストは、 
直接、スマートフォンから電話出来るようにする 
「call to click」の機能を付けるようにとお伝えしました。 
ユーザーはスマートフォンを見て興味があれば、 
そのまま電話番号をクリックして電話するという行動を取ります。 
その時に、「call to click」の機能が無いと、 
折角興味を持って頂いた見込み顧客からの 
問い合わせを獲得する貴重な機会を逃してしまうのです。 


なので、レスポンシブデザインにする際には、 
「call to click」の機能は忘れずに実装して下さいね(^^) 


メインビジュアルのデザインは、 
3秒で何の商品やサービスを提供していのかが分かり、かつ、 

経営者の顔が見えて、多くのお客様に支持されていることが 
分かるようにすると良いとお伝えしています。 
メインビジュアルはトップページのデザイン要素の中で 
最も大切なので、是非、参考にして下さい。 
http://www.webmarketing-rutubo.com/toppage-design-coding/ 


次に、メインエリアのデザインとコーディングについてお伝えしました。 
メインエリアには、なるべく内部リンクを作らないようにすると 
良いとご説明しました。
 


基本的には、まず、 
見込みのお客様を惹きつけて、 
サービスや商品のメリットをお伝えして、 
お客様の声や実績等を見せて信用を得て、 
それから問い合わせを促すという順序です。 
その時に、内部リンクがメインエリアに複数あると、 
こちらが意図した流れと違って、 
他のページにユーザーが移ってしまい、 
伝えたいことを伝えきれいないという問題が起きてしまうのです。 


ホームページに限らず、 
セールスをする際には、 
伝える順序が大切と覚えて下さいね(^^) 


また、メインエリアに限らない話ですが、 
テキストだけですとメリハリが無いので、 
イラストや写真を効果的に使用すると良いとお伝えしています。 


後、お客様の声を記載する際には、 
証言広告等も効果的とご説明しました。 


最後に、サイドエリア、フッターエリアには、基本的に 
全ページへの内部リンクを作るようにすると良い
とお伝えしました。 
また、ヘッダー、サイド、フッター等はトップページに限らず、 
全ページで共通の部品になるので、 
外部ファイル化して、 
各ページでインクルードするようにすると 
運用・保守性が高まるとご説明しました。 


トップページはサイト閲覧者が最初に目にする最も大切なページですので、 
是非、参考にして、成約率の高いトップページ作りを目指して下さい。
 
http://www.webmarketing-rutubo.com/toppage-design-coding/ 



次回は、下層ページのデザイン&コーディング作業について 
お伝えします。楽しみにして下さいね! 



追伸1 
Facebookの友達申請大歓迎です! 
メッセージと共に、リクエストして下さい(^^) 
https://www.facebook.com/hidekikoike2 


追伸2 
Facebookでも最新の情報をお届けしております。 
お役に立つ情報をお送り致しますので、 
是非、シェアして頂けましたら幸いです(^^) 
https://www.facebook.com/rutubowe 

無料相談はこちら

ページトップへ