図書館サイト完成しました!!!

こんにちは

インターンも後1日!Oigamiです

ようやく課題であった

図書館サイト!!

完成しましたー!!

レスポンシブに悩み、メインビジュアルに悩み、ブロック要素とインライン要素の違いに戸惑い、

なんとか出来上がりましたよ。

いやー奥が深いですねWebデザイン。

せっかく作ったので、ここで公開したいと思います。


ペルソナデザイン

前にブログでも書かせて頂いた、ペルソナである清水 美穂さんをターゲットにサイトを作成していきます。

以下、おさらい

名前:清水 美穂
性別:女性
年齢:32歳
収入:専業主婦(世帯年収450万)
住んでいる地域:大阪市内(社宅)
家族構成:夫と息子(1歳)での3人暮らし
教育レベル:短大卒業後、事務として働く。
結婚、妊娠を機に退社

プライベートでの課題や悩み
ママ友を増やしたい
子供の教育に興味がある
やりたい事
ママ友との情報の共有
趣味
カフェ巡り
インテリア雑貨収集

好みのWEBコンテンツ
Amazon
Zozotown
クックパット
フライングタイガー
TIMELESSCOMFORT

ペルソナストーリー
清水 美穂さん(32歳)は短大卒業後、中小不動産業で事務職に付く。結婚、妊娠を機に退 社し、夫の広告代理店の社宅にて生活を始める。
近隣の住民は夫の会社の関係者ばかりで、仲良くはしたいが、同じ年頃のママ友と呼ばれる人は少ない。
そんな中、部長の妻に図書館で、産前、産後の方向けのキャンペーンを行っていると聞き、子供の教育にも興味があったので、HPを閲覧してみた。

まとめると

ママ友が欲しい

子供の早期教育には興味があるが、お金はかけたくない

良く閲覧しているサイトは雑貨系

とのこと。


コンセプト

雑貨屋のような落ち着く、ハイセンスな場所

自分で言うてて恥ずかしいですが、このようなコンセプトで作りました。


ロゴデザイン

logo

以前にもupしていますこちらを使います


 

トップページ%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8

トップページのデザインはこのような形にしました。

メインビジュアルのイメージは、コンセプト通り雑貨屋。図書館のイメージの画像と

イベントをアピールする画像がスライダーで差し変わる仕様にしています。

タブレット、スマートフォン仕様の画面では、それぞれに対応した画像が表示されます

以下、もう一枚の画像がスライドしたトップページになります。

 

%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b82

グローバルナビゲーション

ここは結構悩みました。

雑貨屋イメージで日本語は微妙だな~。

けど、分かり易いのは日本語だな~。

悩んだ結果、、、

読み込まれた時点では英語表記でロールオーバーした時に日本語にしよう!

でした。

しかしここでも問題が・・・

レスポンシブって事は、タブレットやスマホではマウスでロールオーバーはしないですよね。

と言う事で、タブレットとスマホ用に対応したグローバルナビを別で作っております。


コンテンツ

Place(館内地図)

館内の地図を分かりやすく表示し、印刷用のPDFも設置しています

Picturebook(絵本)

絵本の検索ページで蔵書検索が安易に出来ます

Contact(お問い合せ)

お問い合せフォームから、個室予約や本のリクエストが出来ます

Access(アクセス)

GoogleMAPを設置。架空のサイトですので、ピンは立てていません。


という感じで、完成したサイトがこちら

ポートフォリオサイトも更新しておりますので、興味のある方は見てみてくださいー!

Oigamiのポートフォリオはこちら

 

ここまで読んでくださってありがとうございます

by Oigami

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です