こんにちは
インターンも後1日!Oigamiです
ようやく課題であった
図書館サイト!!
完成しましたー!!
レスポンシブに悩み、メインビジュアルに悩み、ブロック要素とインライン要素の違いに戸惑い、
なんとか出来上がりましたよ。
いやー奥が深いですねWebデザイン。
せっかく作ったので、ここで公開したいと思います。
ペルソナデザイン
前にブログでも書かせて頂いた、ペルソナである清水 美穂さんをターゲットにサイトを作成していきます。
以下、おさらい
名前:清水 美穂
性別:女性
年齢:32歳
収入:専業主婦(世帯年収450万)
住んでいる地域:大阪市内(社宅)
家族構成:夫と息子(1歳)での3人暮らし
教育レベル:短大卒業後、事務として働く。
結婚、妊娠を機に退社
プライベートでの課題や悩み
ママ友を増やしたい
子供の教育に興味がある
やりたい事
ママ友との情報の共有
趣味
カフェ巡り
インテリア雑貨収集
好みのWEBコンテンツ
Amazon
Zozotown
クックパット
フライングタイガー
TIMELESSCOMFORT
ペルソナストーリー
清水 美穂さん(32歳)は短大卒業後、中小不動産業で事務職に付く。結婚、妊娠を機に退 社し、夫の広告代理店の社宅にて生活を始める。
近隣の住民は夫の会社の関係者ばかりで、仲良くはしたいが、同じ年頃のママ友と呼ばれる人は少ない。
そんな中、部長の妻に図書館で、産前、産後の方向けのキャンペーンを行っていると聞き、子供の教育にも興味があったので、HPを閲覧してみた。
まとめると
ママ友が欲しい
子供の早期教育には興味があるが、お金はかけたくない
良く閲覧しているサイトは雑貨系
とのこと。
コンセプト
雑貨屋のような落ち着く、ハイセンスな場所
自分で言うてて恥ずかしいですが、このようなコンセプトで作りました。
ロゴデザイン
以前にもupしていますこちらを使います
トップページ
トップページのデザインはこのような形にしました。
メインビジュアルのイメージは、コンセプト通り雑貨屋。図書館のイメージの画像と
イベントをアピールする画像がスライダーで差し変わる仕様にしています。
タブレット、スマートフォン仕様の画面では、それぞれに対応した画像が表示されます
以下、もう一枚の画像がスライドしたトップページになります。
グローバルナビゲーション
ここは結構悩みました。
雑貨屋イメージで日本語は微妙だな~。
けど、分かり易いのは日本語だな~。
悩んだ結果、、、
読み込まれた時点では英語表記でロールオーバーした時に日本語にしよう!
でした。
しかしここでも問題が・・・
レスポンシブって事は、タブレットやスマホではマウスでロールオーバーはしないですよね。
と言う事で、タブレットとスマホ用に対応したグローバルナビを別で作っております。
コンテンツ
Place(館内地図)
館内の地図を分かりやすく表示し、印刷用のPDFも設置しています
Picturebook(絵本)
絵本の検索ページで蔵書検索が安易に出来ます
Contact(お問い合せ)
お問い合せフォームから、個室予約や本のリクエストが出来ます
Access(アクセス)
GoogleMAPを設置。架空のサイトですので、ピンは立てていません。
という感じで、完成したサイトがこちら
ポートフォリオサイトも更新しておりますので、興味のある方は見てみてくださいー!
Oigamiのポートフォリオはこちら
ここまで読んでくださってありがとうございます
by Oigami