六甲アイランドに建つマンション型の女性専用学生寮「神戸女子学生会館」のサイトリニューアルを制作させていただきました。
制作に向けた３つのこと
サイトリニューアルは3年おきにさせていただいており今回で4回目となりました。今回は主に3つを軸に実施しました。
- レスポンシブデザインでの制作
- ターゲット層の変更
- CSSの固い罫線はできるだけ使用しない
1.レスポンシブデザインでの制作
サイトの制作方法もFlash+テーブルレイアウトから始まり、HTML+CSS3での制作を経て今では当たり前ですがレスポンシブデザインで制作をしました。
レスポンシブデザインとはGoogleのサイトより説明文がありました。
ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてレンダリング方法を変更します。Google では、実装と維持が最も簡単なデザイン パターンとしてレスポンシブ ウェブ デザインをおすすめしています。
共通のHTML+CSSファイルで制作をしているので、パソコンでは通常に表示されているのにスマートフォンでは表示しない、という事を避けることができます。また、スマートフォンファーストという言葉が出始めていました。
2.ターゲット層の変更
今まではサイトを見て資料請求や入居を決めているのが父親であったのが、近年では母親と入居をする学生本人で決めていることが多くなってきているということで、今回は父親目線ではなく、入居をされる女子学生目線のデザインを考えることにしました。
3.CSSの罫線はできるだけ使用しない
タイトルや見出し部分はきっちりせずに水彩画調に、罫線も直線にしたほうがCSSのコードで簡単なのですが画像で毛糸のようにして無機質にならないように表現をしました。
写真の外枠線も同様に毛糸のようにしています。
同様にイラストは水彩画調の塗りで幼くなりすぎないようにバランスよく要所でのみ使用しました。
レスポンシブデザインでの効果あり
サイトのゴールは資料請求（フォームページもしくはお電話）から入居の契約までとしています。まずは入居を考えている学生さんがスマートフォンでサイトを見た後、すぐに資料請求（のお電話）や仮申し込みをされていることが増えており、レスポンシブデザインで構築をした効果がでております。
現在ではパソコンとスマートフォンでの閲覧率は3：7となっています。
ホームページの女性モデルは実際に入居されていた学生さん（現在は退館されています）です。
現在もSEOの見直しなどや本文の更新を続けており、もっと魅力が伝わり契約に結びつく構築を続けようと思っています。
著作権や肖像権に関して問題がありましたら御連絡をお願いします。
著作権所有者様からの警告及び修正・撤去のご連絡があった場合には、迅速に対処または削除致します。
