2014年4月15日 | ホームページ制作

レスポンシブデザインにする時に、注意すべきこと3つ

対象:弁護士、税理士、司法書士、行政書士、社会保険労務士、その他全士業

ここでは、「レスポンシブデザインにする時に、注意すべきこと3つ」というテーマでお話します。

これを実践することで、タブレットやスマートフォンからも効率よくお問い合わせを獲得できるようになります。

簡単に実践できるものもありますので、ぜひご活用ください。

レスポンシブデザインにする時に、注意すべきこと3つ

  • (1)ウェブフォントを使おう
  • (2)表の作成に注意!
  • (3)電話はタップだけで電話できるようにしよう

(1)ウェブフォントを使おう

レスポンシブデザインにすると、

  • パソコンで見た場合
  • タブレットで見た場合
  • スマートフォンで見た場合

で、画像の大きさや解像度が違ってきます。

画像は、大きさや解像度によっては、綺麗に表示されない場合があるので要注意です。

そんな時に役立つのが、「ウェブフォント」です。

弊社の下記のHPでも、ウェブフォントが使えるようにしていますので、参考までにご覧ください。

>> サンプルサイト(ウェブフォントをご覧いただけます)

ウェブフォントは、画像ではないので、画面の大きさなどが変わっても、綺麗に表示されます

(2)表の作成に注意!

士業のホームページだと、例えば「料金表」のページなどに”表”を入れることが多いと思います。

この”表”、パソコンで見た時は綺麗に表示されていても、スマートフォンで見ると画面からはみ出してしまったりします

こうなると、非常に見づらいですよね。

スマートフォンでも綺麗に表が見えるように工夫しましょう。

下記のサイトがとても参考になると思いますので、紹介させていただきます。

>> レスポンシブWebデザインでテーブルを使う時の小技

(3)電話はタップだけで電話できるようにしよう

特にスマートフォンは、「電話」ですので、メールでのお問い合せよりも、電話でのお問い合せの方が多くなります

そのため、「電話は、番号をタップするだけで電話できるようにする」ことが、とても重要なのです。

もしタップしても電話できないと、お客様はいちいちメモをとってから電話しなければならない等、とても不便です。

タップだけで電話できるようにする方法は、とても簡単です。

例えば、先生の事務所の電話番号が「00-0000-0000」なら、HTML上では、以下のように記述すればOKです。

<a href=”tel:00-0000-0000″>00-0000-0000</a>
※サンプルの電話番号ですので、設置するときは必ず先生の番号に変えましょう。
※「<~~~>」は、「<~~~>」のように、小文字に変えましょう。

まとめ

レスポンシブデザインが流行ってきていますが、ただ単純に「レスポンシブ化すればいい」訳ではなく、上記のようにいろいろなポイントがあります。

先生も、これらを参考に、ご自身のホームページを改善してみてくださいね。

関連記事

運営情報はこちら

最新の記事一覧

ページ上部に