今回はシロアリ駆除についてのランディングページの紹介です。
こちらはテキスト広告をしたときにクリックすると表示されるページ、いわゆる「ランディングページ」になっています。
このサイトの作り方は、スマホでもPCでも平等に読めるページを目指して作っています。
スマホでもPCでもタブレットでも、音声ブラウザでも誰もが平等に読めるページ、これを「レスポンシブ・ウェブデザイン」といいます。
レスポンシブ・ウェブデザインについて簡単におさらいすると、こういうことです。
ウェブサイトのスマホ対応、スマホ最適化にはいくつか方法があって、それぞれメリットデメリットあるのですが、大きく分けると二つです。
- PCサイトと、スマートフォン専用ページと別々に作る
- PCでもスマホでも問題なく見られるようなサイトを作る
今回は２番、「PCでもスマホでも問題なく見られるようなサイトを作る」で制作しています。
どちらが良いかは制作費のことや、メリットデメリットがあるので一概に言えませんが、２番を選んだ場合のメリットとして、今後更新があった場合１つのページを修正するだけで良いということがあります。
そして、もうひとつ、この２番の作り方は、Googleさんが推奨している方法だから・・ということもあります。
Googleが推奨するレスポンシブ・ウェブデザイン
「PCでもスマホでも問題なく見られる」作り方のことを「レスポンシブ・ウェブデザイン」と言います。
ここでは、Googleがウェブマスター向けに公開しているノウハウページ
スマートフォンに最適化されたサイト構築の推奨方法
これにのっとって制作してみました。
ここにきちんと書いてあります。
「レスポンシブ・ウェブデザインを使用しているサイト、こちらがGoogleの推奨する設定方法となります」
レスポンシブ・ウェブデザインの作り方はこちらに書いてあります。
シロアリ相談web（事例）の紹介
ランバーテックさんは、本社が、関東でシロアリ防除施工で40年の歴史と実績がナンバーワンの「
シロアリ駆除.com」を運営している関東白蟻防除株式会社さんです。
社名は違いますが、関東白蟻防除株式会社の実績とノウハウをそのまま受け継いでいるので、膨大な量の経験・ノウハウ・実績がある会社です。
この告知ページを作るのに一番知っていただきたいのが、この「信頼感」でした。
住宅の修理やリフォーム、害虫駆除業関連で一番心配なのが、怪しい業者の言葉にのせられて、騙されているのではないか？
床下などの見えないところなので本当にこれだけの費用がかかっているのか、本当に必要な工事をしてもらえるのか、最悪の場合、施工したように見せかけて逃げてしまう詐欺の場合もあります。
シロアリ担当の倉谷さんと一緒に、どうすれば長野県のユーザーさんに信頼を持っていただけるかを何度も話し合って一緒に原稿を考えました。
そのあたりを、こんな文章で表現してみました。
リキッドデザイン
スマホは回転できる端末なので、リキッドでデザインする必要があります。
なので、タテにした場合と、横にした場合にどう表示されるのかを考えないといけません。
このように小さい写真やアイコンが横並びになる場合は、フロートで、画面のはしにきたら自動的に折り返される形が良いでしょう。
横幅いっぱいに置く画像の場合は、タグにwidthを100％にして、heightを削除すれば、このように伸縮してくれます。
ただし、かなり解像度の高い大きなモニターで見たときに、リキッドデザインだからといって、幅を指定しないでいると、情報が横に広がりすぎるのはNGです。
（リキッドデザインですが、最大幅を指定している例）
タップで電話、タップでメーラーが立ち上がる
スマホの基本、タップで電話がかけられる・・・・これはボタンを押しやすいように、大きなボタンにしておくことが大事です。
あとは、問い合わせフォームですが、予算的に可能ならスマホでも入力しやすい問い合わせフォームを作るのも一案ですが、今回はタップでメールが立ち上がるようにしました。
（電話がかけられるタグと、メールが立ち上がるタグ）
問い合わせフォームの場合は、できるだけ文章を入力しないで、プルダウン選んだり、チェックボックスからチェックを入れるだけで、最低限の情報を入れて送信するように計画すると良いと思います。
スマホでのフォームメールの取り扱いが面倒だからです。
その点メーラーなら敷居が低くなります。（サイト上にメールアドレスを置いておくことでスパムメールが増えるというデメリットはありますが、このアドレスはすでに何年もサイト上へ）
メリット、デメリットよく考えた上でどんな方法で、ユーザーを最終目的地へ誘導するか考えてみましょう。
デバイスの幅によって、スタイルシートを切り替える方法
これは、CSS3のMedia Queries（メディアクエリ）という方法で切り替えます。
例えば、横幅サイズが600pxより小さい場合は、背景画像はこれ・・・
900pxより大きい場合は、背景画像はこれ・・・というように、スタイルシートに記述することで切り替えることができます
その他デザインする上で考えることをランダムに・・・・
- スマホ用のレイアウトを作るときは画像は横幅640pxで作っておく（実際の表示イメージは半分の320pxになります）
- 画像やボタンのサイズは偶数pxサイズの方が１／２に縮小された時にきれい。
- フォントサイズも偶数値の大きさの方がきれい。大きさは12ピクセル以上にする
- ボタンなど指でタップすることを考慮する場合、幅を44ピクセル以上にする（アップルのガイドラインより）
- デバイスフォント（スマホなどに元から入っているフォント）は、Androidは機種毎にちがいますが、iPhoneがヒラギノ角ゴなので、ヒラギノでデザインすればOK
- テキストはできるだけデバイスフォントで組む
- 枠の角丸処理や、背景色のグラデーションなどはcss3で表現したほうが、画像で作るよりも表示速度が速いのでGood
- スマホサイトはあまり深い階層にしない。ページが長い分には上下にスライドで読めるので良いのですが、タップしつつ多くのページを移動していくのはスマホの場合は大変です。
思いつくまま書いていったので、ランダムですみませんが・・・また思いついたら付け足しておきます。
実はこのページはまだ一次工事の段階で、このデザインを元にいずれはPCサイトを作るので今後変更していく予定がありますが・・・・・現段階では、PCでもスマホでもストレスなく読めるページの作成方法として事例で取り上げさせていただきました。
事例でとりあげたランバーテックさんの紹介
長野県での住宅関連工事では縁の下の力持ちの会社として有名な「ランバーテック様」を紹介します。
松本市にある施工業者さんなのですが、木についての技術、木を活かす技術としては日本で右に出るものはいないという知る人ぞ知る会社です。
普段わたしたちは家を建てるときや、家のリフォームするときは、☆☆ホームさんとか◎◎工務店さんなどに依頼するので、このような業者さんが縁の下の力持ちとして、工事の技術を支えていることに気がつかないかもしれません。
実は長野県では大変多くの工務店や住宅メーカーさんとの取引があり、
「腐らない木材」を加工して納入していることで有名な会社です。
元（東京の本社）はシロアリ駆除やシロアリ防除のプロ、そしてシロアリ防除から培った技術を土台にして、腐らない木材の開発と、断熱壁の技術で、建物の省エネや、健康診断を得意としている会社なのです。
木を愛する人々、木の家にこだわる皆さんにとって「お家のお医者さん」のような存在です。
そんなランバーテックさんの信頼ある技術で、
「家を末永く持たせたい」と思われる方は、家の健康診断を依頼してみてはいかがでしょうか？
