ページの構成と特徴について

全体の特徴

このページは、スマホ用とパソコン用のページが同一ページで動作しております。

制作側としては管理が楽になることがメリットですが、作成ページが減るため、費用が安くなる恐れもあります。

ユーザー側は、スマホページとPCページが同じなため、検索などのランクが上がりやすいというメリットがあります。

上部メニューについて

文字で実現しているため、メニューの追加が容易です。ただ一方で閲覧環境によって文字の見栄えが違うため、バランスを取るのが難しいです。

画像に置き換えることも可能ですが、統一した見栄えが得られる一方、ユーザー側としては大きさの調整が難しい、視覚障害者等のブラウザに優しくない等の問題があります。
病院等幅広い人を対象としている場合は見栄えよりもそのようなお客様を重視しているイメージにするため、文字のほうが良いのではないかと考えております

左部メニューについて

こちらには、常時表示しておきたい特設ページ等を配置するイメージで考えております。今回は、インフルエンザという季節の告知と、常時募集しているが全員に関係するわけではない(よって上部メニューに入れないほうが適切と思われる)看護師募集のバナーを設置してあります。

こちらにかんしては、配置を変えて丈夫に設置し、各ページの小分類を入れるという使い方も可能だと考えております。診療案内のページで、各科の名前がここに並ぶというような活用方法です。

また、病院にあるかはわかりませんが、宣伝のようなものもこちらに起きやすいと考えております

各ページについて

今回は中規模病院のイメージで作成しております。規模によってメニューを調整すれば、小規模な病院でも大規模な病院でも対応できると考えております。ものすごく大きい病院の場合は、トップメニューの階層化を実現する必要があると思われます。

トップページ

画像が次々とかわって表示されるページとなっております。これはスクロール型に変更することも可能です(診療科目でつかっているような形です)

上部のメニューではイメージが湧きにくいお客様のために、画像のボタンで各ページへのリンクを作成しております。
こちらに関しては、ページ数の関係もありますが、技術でもとして２個メニューが表示されるパターンと３個表示されるパターンを用意しました。スマホ用ページでも今現在は表示数が維持されますが、横幅によって３段を２段、２段を１段と調整することも可能です。アマゾン等大手では２段までは使っている感じですし、最近のスマホの画面は広いので２個や３個メニューを横並びにしても良いとは思いますが、これはクライアント様と相談して調整する部分だと考えております。

お知らせに関しては、外部プログラムで内容を作成し、差し込むシステムとなっております。納品後ユーザー側で変更ができる部分となります

当院について

コンテンツ数が少ない場合は、このページを分離することでページ数を稼ぐことが可能です。ページの表示としてはスタンダードな形で、このページが通常のページの基本レイアウトになると思われます。

診療科目

スクロールの画像を入れてあります。トップページで利用することも可能ですが、このように途中のページの選択画面に利用することも可能と考えております。今回は文字しか入っていませんが、各科の先生やスタッフの集合写真みたいなものが並ぶイメージで考えております。

アクセス

案内については、google mapsと拡大した地図を作成したものを用意します。

病院のページを確認したところ、多くのページで拡大した地図を用意していました。同時にgoogle maps等のオンライン地図も表示しているのですが、利用者層を考えると、拡大した地図を用意するのが定番のようでした。今回は仮の画像ですが、よのようなものが来るイメージでページを作成しております

特設ページ

左のメニューから、インフルエンザの予防接種について飛べるように作成してります。ページの構成は標準的な作りですが、このように遷移するというイメージのために用意してあります。

ユーザー側で変更できる部分について

各ページに表示されているカレンダーと、トップページのお知らせはユーザー側で変更できるよう作成されています。
サンプルで管理ページのリンクを用意しておきます。ご確認ください。ユーザ名はwakame パスワードはmasaru　です

管理ページログイン

なお、今回は使用しておりませんが、お知らせ以外に休診の案内などを通知できるように、ユーザーが利用できるお知らせはスクリプト上は２つ設定されています。数を増やすことも可能です

タグ・画像表示サンプル

当ページのCSSは以下の通り設定されています。

h1タグ

h2タグ

h3タグ

h4タグ

h5タグ

h6タグ

強調（em） より強い強調（strong） 追加（ins） ~~削除（del）~~ テキストアンカー

引用タブ(blockquote)で囲まれている空間はこのような表示になります。
改行(brタグ)で改行した状況です。このような感じでテキストは改行されます。また折り返しもこのように行われます。

定義リスト1: 定義した用語の説明
定義リスト2: 定義した用語の説明
定義リスト3: 定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1	見出し2	見出し3	見出し4	見出し5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5

見出し1	セル1	セル2	セル3	セル4	セル5
見出し2	セル1	セル2	セル3	セル4	セル5
見出し3	セル1	セル2	セル3	セル4	セル5
見出し4	セル1	セル2	セル3	セル4	セル5
見出し5	セル1	セル2	セル3	セル4	セル5

画像

画像はタグが指定してあり、枠をつけることも可能としています。

左寄せ(文字回り込み)

文字が回り込むように設定されています

左寄せ

通常は文字は回り込みません

右寄せ

文字が回り込むように設定されています

写真風枠

文字の回り込みは通常されませんが、回り込む設定も可能です。

このように文字を回り込ませることも可能です。通常の写真を入れるとこのようにアナログ写真風になるのですが、人物画像に設定すると遺影みたいになるので注意です。

テスト病院