概要 デザインは対象者の問題・悩みを解決しなければ意味がありません。

何度見ても「いやーこれはやられちゃったな〜」と思ったスマートフォン用のページデザインに出会ってしまったので紹介します。

今回紹介するのは「病院・薬局様のウェブサイト」のモバイルページです。

見たら一目瞭然なのでスマートフォンで表示しているイメージを。

それがこちら。

20150331-スマートフォン向け病院ページの決定版-01


ちょっと分かりづらいですかね…?

普通にスクリーンショットを撮ったものが以下の画像です。

20150331-スマートフォン向け病院ページの決定版-03

First View(=ページを開いて最初に見える部分のこと)はシンプルに青緑系のベタの背景色に、白の文字とロゴのみ。

超シンプルです!

こんなのでいいのか!?




●訪問者のことをよく考えた構成

しかし、これ、アクセスしてくる人の事をよく考えられているなと思いました。


この「動物病院」のサイトにスマートフォンでアクセスしてくる人はどんな人なのでしょうか?

例えば「ペットの体調が悪くなっているので、すぐに見て欲しい人」などが挙げられるのでは。


その人が必要とする情報は何でしょう?

その情報が必要とする順番に掲載されています。

20150331-スマートフォン向け病院ページの決定版-02

まずは「何病院?」という部分で「ロゴ」と「病院名」の情報

    ↓ ↓ ↓ ↓ ↓ ↓

次に「今見てくれるのか?」という「診察時間」の情報

    ↓ ↓ ↓ ↓ ↓ ↓

時間がOKなら「今日は休みじゃないか?」の「休診日」の情報

    ↓ ↓ ↓ ↓ ↓ ↓

「見てもらおう!予約しないと…で、連絡先は?」で「電話番号」の情報

    ↓ ↓ ↓ ↓ ↓ ↓

「いくら掛かるか金額が気になるし…支払いは?」に対しての「クレジットカード利用OK」の情報



また、この病院の場所に関してですが、First Viewには書いていませんが、和歌山市です。

なぜそう言えるのかは、このページのtitleタグに「和歌山市の動物病院」と入っているので、検索結果でも同様に「和歌山市の動物病院」と基本的には表示されます。

このため、訪問者はこの病院が和歌山市にあることを、このサイトに入る前に分かっているのです。



●意味が無い情報を置いていないか?

下にスクロールするとようやく「診察について」や「施設のご案内」「アクセス」が表示されます。

この情報って今まで紹介した「今見てくれるのか?(行ける時間か?)」「休みじゃないか?」「予約したか?」「支払いはできそうか?」という受診前の疑問を解決していないと、そもそも意味が無い情報なのですよね。

20150331-スマートフォン向け病院ページの決定版-04

もし、First Viewの最初から「病院の想い」のコンテンツがあっても「我が子同然のペットがヤバくて急いでいる人」はそんなの読んでいられません。

読むタイミングではないところにコンテンツを置いても意味が無いのです。


このように訪問者の気持ちになって、最初に必要な情報を1画面に収めてデザインしているのは素晴らしいですね。

ページを開いた瞬間にこの病院は「OKだ(条件に合っている)」「ダメだ(条件に合っていない)」と「すぐ」わかるデザインはナイスです。

他の病院・薬局も同じデザインでも良いのではないかと思うほど。



デザインは対象者の問題・悩みを解決することです。

見た目だけではなく、対象者の問題・悩みを把握し、それに適切な順序・提供方法で応えることが重要ですね。


それでは、よいペットライフを。



●参考

スマートフォン向けの優れたウェブデザインページを紹介している「Web Design Clip [S]」でこちらのサイトは紹介されていました。他にも参考になるサイトがたくさん紹介されていますので、ウェブ制作者はチェック!

20150331-スマートフォン向け病院ページの決定版-06



●余談:「callto:」のコントロール

First Viewにある電話番号の付近をタッチするとキチンと電話が掛かる仕組みがありますが、書かれている電話番号とiPhoneが掛けようとしている電話番号の区切り方が微妙に違うのはなんとかならないのですかね?

(サイトの電話番号は「073-488-5280」でiPhoneの電話番号は「0734-88-5280」と違っている)

20150331-スマートフォン向け病院ページの決定版-05

コントロールできる方法があれば教えてください。



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索