MENU タップでメニューを表示

美容形成外科クリニックのホームページをレスポンシブデザインに

【投稿日】 

美容形成外科のクリニックのホームページをレスポンシブデザインでリニューアルしました。

こちらのクリニックは開院11年で開院当初からホームページは当オフィスで制作させていただいています。これまでのサイトもWordpressで運用しており、表示はパソコンと携帯(ガラケー)に振り分けていました。

スマートフォンでアクセスした場合は携帯サイトが表示されるので閲覧は可能でしたが、携帯サイトをスマホで見ると「ちょっとさみしい」感じがします。美容外科のようなサイトへのアクセスは圧倒的にスマホが多くなります。そこで今回スマホで快適に閲覧できるようレスポンシブデザインでリニューアルしました。

レスポンシブデザインでスマホやタブレットでも快適に…

レスポンシブデザインパソコン表示レスポンシブデザインタブレット表示レスポンシブデザインスマホ表示

スマホでのメニュー(サイドバー)表示

左上の「メニュー」をタップ
ページ数の多いサイトですのでサイドバーのメニューはスライドで表示させるようにしました。左上の「メニュー」をタップすると…

メニューが表示される
左側からメニュー(サイドバー)が表示されます。

マンガが面白いのでこれはもうぜひ読んでもらいたい

マンガが面白い
人気のコンテンツに「美容外科にまつわる話マンガ」があります。「46回」まであり、読みごたえがあるのですが、もともとのサイズがA4サイズに印刷されたものでしたのでそのままスマホ画面で見てもまずわかりません。そこで、スマホ用にはコマ割りした画像を別ページで閲覧できるようにしています。(ガラケーサイトの時も同様にしていました)

コマ割りしたマンガ

タブレット端末でのメニュー(サイドバー)表示

左上の「メニュー」をタップ
タブレット端末でも同様に左上の「メニュー」をタップすると…

左側からメニュー
左側からメニュー(サイドバー)が表示されます。タブレットの場合、パソコンと同様にメニュー(サイドバー)を表示させてもよいかもしれませんが、コンテンツの表示領域は少しでも多いほうがいいので、メニューをスライドさせる形をとりました。

タブレットならマンガもそのまま読める

タブレットならマンガもそのまま読める
上の写真はiPadでの表示ですが、ある程度の画面サイズのタブレット端末ならマンガはそのまま楽しめます。しかし、少し小さいサイズのタブレットの場合はやはりコマ割りのマンガのほうが読みやすいかもしれません。

何がすごいって「院長日記」スゴイ!!

こちらのクリニックの先生は毎日ブログを投稿されています。1年や2年ではありません。もう9年以上にわたって毎日欠かさずブログを投稿されています。「毎日欠かさずブログを9年間…」という人は日本中探しても数えるほどしかいないと思います。

札幌美容形成外科のホームページはこちら

このページのトップへ

ホームページ制作事例カテゴリの最新記事

日本語サイトのパソコン表示

2017年1月17日
WordPressで多言語サイトを制作

海外にも情報発信するなら英語サイトは必須。そんなときもWordpressが活躍します。

続きを読む

レスポンシブデザインパソコン表示

2016年10月20日
ブライダルプロデュースのサイトをプチリニューアル

リニューアルして1年なのであまりコストをかけることもなくという難題ですが、ここがWordpressの便利なところ。

続きを読む

レスポンシブデザインPC表示

2016年10月3日
建築設計事務所のホームページをリニューアル制作

Jimdo(ジンドゥー)&アメブロで運営してきたホームページをWordpressでリニューアル。もちろんレスポンシブデザインです。

続きを読む

レスポンシブデザインPC表示

2016年8月9日
税理士事務所のホームページをレスポンシブデザインで制作

新たに税理士事務所を立ち上げるということで、スマホやタブレットでも快適にアクセスできるようレスポンシブデザインで制作しました。

続きを読む

レスポンシブデザインPC表示

2016年8月9日
こだわりのスタジオのホームページをWordPressで制作

写真スタジオ~こだわりのお店のホームページを制作しました。こだわりがあるからこそ大切なのがウェブサイトからの情報発信です。

続きを読む

レスポンシブデザインPC表示

2016年6月9日
学会ウェブサイトをWordPressで制作

学会のホームページをWordpressでリニューアルしました。多くの学生がスマホを常に活用していることから当然レスポンシブデザインで制作しています。

続きを読む

レスポンシブデザインPC表示

2016年6月3日
遺品整理ガイドのウェブサイトリニューアル

今回のリニューアルにおいては、「信頼感のある情報を提供しているホームページである」ことをアピールできるサイトを目標としました。

続きを読む