神戸市ホームページリニューアル
トップページデザイン
提案内容
2013.04.26 木木村村絹絹子子
画像サイズに合わせた
フレキシブルなデザイン
800×600 1024×766
※さらに大きいサイズのモニタにも対応します
背景画像をモニタに合わせて拡大縮小することが可能
メインターゲットモニタ1024を基準に背景の構図決定
3_1.ホームページに対するデザインアイデア
(パララックス効果の採用)
 トップページは1つのファイル・5つのパートで構成して
います
 5つのパートをスクロールによって表示させます
 パララックス効果を取り入れることで、それ...
3_2.ホームページに対するデザインアイデア
(レイアウトの工夫)
○フッターには開閉するバナー表示エリア
○画面遷移はスムーズに移行し快適な操作感
現在位置の確認も容易になります
○メニュー選択以外にスクロールでも画面
遷移が可能...
3_3.ホームページに対するデザインアイデア
(コンテンツの充実)
○ツールボタン:
問い合わせやサイトマップ、よくある質問等必要なツー
ルをプルダウン表示するボタン
(モーダルウィンドウ)
○informationウィンドウ:
...
4.アクセシビリティ対策
 案1
 パララックスに使用している背景画像
には重要な情報をのせない
 →サイドバーに神戸市役所の情報掲載
 案2
 背景画像をオートで切り替える
 →パララックス効果によるメリットが
得...
of 6

Prezi補足

2013kobe2
Published on: Mar 4, 2016
Published in: Presentations & Public Speaking      
Source: www.slideshare.net


Transcripts - Prezi補足

  • 1. 神戸市ホームページリニューアル トップページデザイン 提案内容 2013.04.26 木木村村絹絹子子
  • 2. 画像サイズに合わせた フレキシブルなデザイン 800×600 1024×766 ※さらに大きいサイズのモニタにも対応します 背景画像をモニタに合わせて拡大縮小することが可能 メインターゲットモニタ1024を基準に背景の構図決定
  • 3. 3_1.ホームページに対するデザインアイデア (パララックス効果の採用)  トップページは1つのファイル・5つのパートで構成して います  5つのパートをスクロールによって表示させます  パララックス効果を取り入れることで、それぞれのパー ト(画像)を流れるように閲覧できるようになります。  これにより、空間の中にいるようなイメージを表現しま した。  パララックスの動きの面白さと画像が相互に生み出す動 的ビジュアルとで神戸の魅力をさらにアピール。  詳細情報はリンクページに引き継ぎ、トップページでは、 神戸の魅力をプレゼンテーションするイメージです。  市民の方や神戸を訪れた方から写真を公募し、背景画像 に設定。ホームページを構成する今月の一枚とすること で、市民や神戸が好きな方が参加して作り上げるトップ ぺージが作れます。  一日の中で画像を時間とともに変更するのも面白い。  パララックス効果について 複数の背景を異なる速度でスクロールさせて奥行きを表現 すること。画像の相対的な位置がかわり視覚的におもしろ い動きが得られる
  • 4. 3_2.ホームページに対するデザインアイデア (レイアウトの工夫) ○フッターには開閉するバナー表示エリア ○画面遷移はスムーズに移行し快適な操作感 現在位置の確認も容易になります ○メニュー選択以外にスクロールでも画面 遷移が可能。多様な操作に対応します。 ○シンプルなナビゲーションの固定  ナビゲーションは常に固定の位置に表示することでサ イト内で迷子になることがありません  必要最低限なシンプルなメニューで、情報の選択に迷 いません。
  • 5. 3_3.ホームページに対するデザインアイデア (コンテンツの充実) ○ツールボタン: 問い合わせやサイトマップ、よくある質問等必要なツー ルをプルダウン表示するボタン (モーダルウィンドウ) ○informationウィンドウ: 目的の情報や最新情報に容易にアクセス More Infoボタンから表示 ○プルダウンメニュー: トップメニューにマウスオーバーするとプルダウンメ ニューが表示されリンク先の概略がわかる ※左図は一例で、各メニューにプルダウンメニューが表 示されます (モーダルウィンドウ) ○コンテンツスライダー:より多くの情報を提供 More Infoボタンから表示 ○大きな検索窓:右上の検索ボタンをクリックすると表示 目的の情報に容易にたどりつける ○ソーシャルリンク:情報拡散に役立つ
  • 6. 4.アクセシビリティ対策  案1  パララックスに使用している背景画像 には重要な情報をのせない  →サイドバーに神戸市役所の情報掲載  案2  背景画像をオートで切り替える  →パララックス効果によるメリットが 得られない

Related Documents