初めまして、Webデザイナーのtakikawaともうします。
老舗乳腺クリニックのWEBトップページデザインの
ご提案をさせていただきます。
【４案制作いたしましたので、１案ずつご提出いたします】
=== 提案：１ ===
―――――――――――――――――
◆構成について
―――――――――――――――――
◎レスポンシブ対応デザインです。
・レスポンシブに対応可能にするため、
文字はほぼデバイス文字（画像文字ではない文字）に
設定しています。
・参考サイト（
http://sanyotan.co.jp/）と同様
ブラウザを縮めていくと途中でスマホデザインに
切り替わるデザインです。
・縦長ページですので、下へ下へと読み進めやすいよう
背景画像を斜めにして導線を確保しています。
・右上のナビは固定で常に同じ場所に表示されます。
―――――――――――――――――
◆デザインテイストについて
―――――――――――――――――
地元で長く愛され「乳腺クリニック」という事は
ユーザー様にはよく理解されているという事ですので
希望テイストのスタイリッシュをメインに
下記の通りデザインいたしました。
◎シンプルでスタイリッシュ
・最低限のあしらいとデザインにし
背景の切り替えでスタイリッシュさを表現しています。
・若干女性向けのデザインにしておりますが
男女共に好かれるテイストにしています。
◎高級感と信頼感
・「病院には見えないサイト」という事でしたので
メインビジュアルには、このサイトを訪れて
「どこかほっとする信頼感」を表現できる画像を選定しています。
・ダイレクトに「病院」というデザインをさけ
メインビジュアルの画像で「あたたかみ」を表現し
前向きな印象を与えるデザインにしております。
―――――――――――――――――
◆カラーについて
―――――――――――――――――
落ち着いたブルーをメインカラーにし
爽やか且つ高級なイメージを出しています。
―――――――――――――――――
◆フォントについて
―――――――――――――――――
「いかにもクリニック系」を避け、
シンプルで読みやすいゴシック体をメインに使用しております。
―――――――――――――――――
◆メインビジュアルの質感について
―――――――――――――――――
拡大した画像もアップしておりますので
合わせてご確認お願いいたします。
→01_zoom.jpg
―――――――――――――――――
◆スマートフォン対応
―――――――――――――――――
・実機で表示の際に快適な可読性を保っている
文字サイズ、余白にしています。
・実機で表示の際にスマホ画面いっぱいに
メインビジュアルが表示される設定です。
（高級感とスタイリッシュさを表現するため）
・「院長あいさつ」の全文は長いので
アコーディオンで開閉式にしています。
※デフォルトは閉じています。
・お問い合わせ電話番号は、番号タップで発信できるよう
十分な余白をつけています。
・また、お電話でのお問い合わせが多いとの事ですので
すぐに電話番号が分かるよう、スマホ画面をスクロールした時に
画面トップに張り付きの追従メニューで電話番号を設置。
参考画像もアップしておりますので
合わせてご確認お願いいたします。
→SP01_追従メニュー.jpg
―――――――――――――――――
修正や調整など迅速にご対応させていただきますので
何かございましたらお気軽にお申し付けください。
それでは、ご検討のほどよろしくお願いいたします。
takikawa
