大江橋クリニックのWEBサイトについて

このウェブサイトは2011年6月に大きく変わりました

新しくデザインし直しました 2011年6月

今回は初の試みとして、クリニックの患者さんでもある → プロのデザイナーさん にページデザインを依頼しました。

内容や文章は以前のまま、外観を大きく変えていただきました。
以前のサイトに多用されていた「イメージ写真」をほとんど削除し、中身の文章自体をじっくりと読んでいただこというコンセプトです。

→ 古いデザイン(2011年6月25日までで表示していたもの) は別サイトにそのまま保存してあるので、興味のある方は比較してみてください。
改築作業中、約2ヶ月間は更新を控えていましたので、ご迷惑をおかけしました。
今後は、このデザインを基準にまた進化していく予定です。

更なる進化を試みています 2011年7月

新情報を加え、リンクや内容の見直しを行なっています。

書き直しや追加は、以前通り院長が行ない、構造上の不具合などはデザイナーさんに手直ししてもらっています。

増築を重ねてわかりにくくなってきていた全体像を、プロの手を借りてシステマティックに構造化していただいたおかげで、不統一な部分が見えるようになりました。

ナビゲーションをグループ化して不必要な重複を省き、移動したときにどこにいるのかが分かりやすくしようと思っています。
現在は、診療内容情報そのものでなく、メタ情報(アクセスやコンセプト、料金など)のレベルの整備を行っています。

IE9にも対応しました 2011年8月

Windows 7のInternet Explorer 9で、トップページの各診療科へのリンクをクリックするとリンクの文字が消えてしまい、皮膚科などのページにジャンプできないという不具合が出ていたのですが、原因がわかり対処しました。

このサイトは、HTML 5に準拠したモダンブラウザでご覧いただくようにデザインされています。

インターネット・エクスプローラーはWindows環境の下で独自の発展を続けているため、標準的な書き方ではうまく表示されない事が多々あります。

今後もできるだけ対応はしますが、制作環境がMacintoshですので、不具合の発見や対応はどうしても遅れてしまいます。
できましたら、FirefoxやSafari、Google Chromeなど標準的な書式に対応したブラウザをご使用ください。

初めての方用のボタンを配置しました 2011年9月

診療時間や予約方法などが8月に大幅に改訂されましたが、外部の医療機関検索サイトなど、当クリニックと無関係のサイトには情報を配信していません。

分かりやすいように、トップページにボタンを配置してみました。

会員制ブログにも重要情報を書き込むことがあるため、現時点ではどなたにもお読みいただけるようにしています。パスワードなどがわかりにくかったので、デザイン状問題はありますが、明示的に配置してみました。

見た目には分かりにくいのですが、文字色の微調整(→ この色から→ この色に変更)や標準文字サイズの変更(→ このサイズから→ このサイズに変更)。などを密かに行なっています。誰も気づかないと思うけど‥。

おすすめボタンを付けてみました 2012年1月

主に写真やボタンデザインを見直し、明るく柔らかい感じを出してみました。

おすすめボタンをつけ、リンクを少し明示的にすることによって、読みたいページが見つけやすいように工夫しています。

相変わらず文字の多い「読ませる」タイプのサイトデザインは継続していますが、レイアウトを少しずつ変えて、「ぎっしり文字の詰まった読みにくい感じ」は解消に向いつつあります。

文字色や標準文字サイズの変更なども頻繁に行なっています。少しでも多くの方に読んでいただきたいという願いを込めて。

サイトの見え方についてのご注意 2011年9月更新

Internet Explorerをお使いの方に

Internet ExplorerはWindows標準のブラウザなので、他のブラウザに乗り換えるのに抵抗があるという方もいらっしゃると思います。実際に、当サイトを訪れている方の62%弱はWindows/Internet Explorerを使用されています。
その場合は、できる限り新しいバージョン(IE 8または9)をご用意ください。Windows XPに標準でついているIE 6では表示が乱れ、快適にご覧いただけません。(現時点で当サイト訪問者の11.5%の方がIE 6を使用されています。)
XPでも、IE 8までは簡単にインストールでき、問題なくご使用いただけます。

ブラウザはSafariがお勧めです。Windows版もあります

院長も副院長も、普段はMacintoshを使っています。今回の更新をお願いしたデザイナーさんにも、Macintoshを用いて制作していただきました。
サイトの構築に当たっては、Macのテキストエディタ(mi)を使って1文字ずつhtmlファイルにテキストを打ち込んでいます。

一応Windowsでの見え方もチェックしてはいますが、実際は、細かな設定のしかたなどがよくわかりません。

うまく行かない場合の修正は、Macintoshの標準ブラウザであるSafariでの見え方を基準にして行なっています。

SafariにはWindows版もあり、→ Appleのサイト から無料でダウンロードできます。現在は約29%の訪問者がSafariをお使いです。

Safari 5.1無料ダウンロード

Firefoxもいいかもしれません。Mac版もWindows版もあります

Firefoxはブラウザの世界では伝統あるMozillaの、正統派ブラウザです。表示も早く安定しています。現在は訪問者の4%強がお使いですが、今後はもっと増えて行くと思われます。

ダウンロードボタンを用意しましたので、試してみてください。

Firefox ブラウザ無料ダウンロード

古いNetscapeやInternet Explorer 6以前のバージョン等には対応できません

Netscape 0.6/4.0 や IE 2.0/5.0 などをお使いの方もいらっしゃるようですが、多分OSを初めとして一般的でない環境でのご使用と考え、対応はあきらめています。

この他、Opera、Chrome、Icab、Camino、OmniWeb、シイラ、I-mode携帯、PDAなどをご使用の方もサイトを訪問されているようです。個別の対応はできかねますので、できる限り最新版のブラウザでご覧下さい。

2011年9月23日現在のブラウザ使用状況(当サイトのアクセス解析結果より転載)

大江橋クリニック公式サイトの歩み 2011年9月

このサイトはご覧の通り、院長の手作りです

当院の姿勢や方針を伝えたいという思いから、こつこつとホームページを作成してきました。

一応、html 4.01 Transitionalに準拠しながら、時にCSS2やjavascriptなども勉強しつつ作ってきましたので、技術的には単純で低レベルの作りです。
現在はhtml5に合わせて少しずつソースを書き直しています。したがって、時に表示がずれる事がありますが、特に大きな不具合が出る事はない筈です。

テンプレートを使わず1ページずつ順に書き直しているため、改訂作業の間は各ページのデザインがことなり、リンクなどに飛べないものができたりします。
しろうと作りですので許してください。

 

開院当時のサイトデザイン

最初の表紙  開院当時の表紙

2006.12.1

上の左の図は、最初に公開したサイトの表紙です。(図をクリックすると→ 実物大のイメージ がご覧になれます。)開院当初の2006年12月1日に公開されています。ロゴを除けばほとんど文字のみで、場所と電話番号とスタッフ募集くらいしか書いていない、シンプルなものでした。技術的な問題もありましたが、当時はそれでいいと思っていたのです。

※ 実はこの間まで、うっかり削除してしまい残っていないと思っていたのですが、開院3日後の12月3日にサイトから保存用にダウンロードしたファイルがハードディスクの片隅に残っていました。
厳密に言うと、背景のラインや文字のウェイトなどを微調整したあとのものだと思います。

2007.1.4

右の図は、翌年1月に保険診療を開始し、いよいよ本格的に活動を開始した頃のものです。これもご覧の通り非常にシンプルなものです。美容を扱うクリニックらしく、と柔らかい感じを前面に出したのは、最初のものがあまりにも無骨な感じがしたからです。

形成外科・皮膚科の診察は、患部をみるところから始まる。
実際に患者さんを診察しないで、何を言っても始まらない。
そんな思いから、当時は、ホームページには、できるだけ何も書かない方がいいと考えていました。

それから約1年半後のサイトデザイン

2008年の表紙 2008年の表紙2

2008.7.22

左はサイトのトップページ、右は美容外科のページです。

それから幾多の変遷をへて、翌年の夏にはずいぶんと盛りだくさんな、文字の多いサイトに変貌して行きました。

それは、診療を続けていくうちに、患者さんに私たちの言いたいことがどれほど伝わっているのだろう?と不安になってきたからでもあります。
私の言いたいことを書いて少しでも伝わればという思いから、ホームページの作り方を勉強し、少しずつページを作り足してきました。

2009年の革新的?サイトデザイン

平成21年1月

2009.1.4

上のものは2009年1月のホームページの表紙です。大型モニタの普及に合わせて背景の画像を思い切って大きくしてみました。開業から2年あまり経ち、見た目だけでなく内容もずいぶん変わってきました。。

2009.4.16

平成21年4月

2009.4.26

平成21年4月

バックグラウンドの写真を、文字が読みやすいように徐々にイラスト風に変えて行きました。

「まだまだ勉強しながら制作していくつもりですので、徐々に見やすくするつもりです。 少しお待ち下さい。」
「1週間ぐらい勉強できる時間がもらえたら、私だってフラッシュぐらい作れるんですけどね。」
と、患者さんやスタッフにいいわけしながら、せっせと作っていました。

手作り時代の最終進化形

平成21年11月  平成22年7月

2009.11.16 & 2010.7.4

ようやく2011年のものに近づいてきました。しかし、細かく見るといろいろと違いがあります。個人的には、デザインとしてはかなり完成形に近づいてきたと思っていますが、今後も思い切って変更する可能性は常にあります。‥と、その当時は書いていました。

試作品 & 新年特別版

平成22年10月  平成23年1月

2010.10.11 & 2011.1.1

左は実現しませんでしたが、iPadに合わせてボタンを配置したサイトの試作品です。

右はお正月限定デザイン。実はその直前にはクリスマスバージョンもあったのですが、ご覧になった方はあるでしょうか。

2011年の大改訂

平成23年6月  平成23年6月

2011.6.19 & 2011.6.25

左は院長手作り時代の最終バージョンで、改訂する直前まで掲載されていた表紙です。

右は6月25日にデザイナーさんに依頼していた改訂版をアップロードした時のものです。現在のものとは写真が違っていますが、デザインはこの時のものを発展させています。

2011年9月現在

平成23年9月  平成23年9月

2011.9.23

左は表紙です。写真が変わったのと、ボタンを配置し少しデザインをいじったことで、上のものとはかなり印象が違って見えます。

右はトップページからとんだ「大江橋クリニックの治療の紹介」ページの表紙です。空から海へ、ダイナミックに変化しながら、コンセプトカラーの紺色を際立たせて、しっとりと落ち着きのあるページにしていきたいと思っています。

2012年1月現在

平成24年1月  平成24年1月

2012.1.11

左は表紙です。更に写真を変更し、ボタンのデザインをいじったので、最初のものとはかなり印象が違ってきました。

右は皮膚科のトップページです。コンセプトカラーの紺色を基調にしながら、おだやかな暖かみのあるページにしていきたいと思っています。