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