1. 神戸市ホームページリニューアル
トップページデザイン
提案内容
2013.04.26 木木村村絹絹子子

2. 画像サイズに合わせた
フレキシブルなデザイン
800×600 1024×766
※さらに大きいサイズのモニタにも対応します
背景画像をモニタに合わせて拡大縮小することが可能
メインターゲットモニタ1024を基準に背景の構図決定

3. ３_1．ホームページに対するデザインアイデア
（パララックス効果の採用）
 トップページは１つのファイル・5つのパートで構成して
います
 5つのパートをスクロールによって表示させます
 パララックス効果を取り入れることで、それぞれのパー
ト（画像）を流れるように閲覧できるようになります。
 これにより、空間の中にいるようなイメージを表現しま
した。
 パララックスの動きの面白さと画像が相互に生み出す動
的ビジュアルとで神戸の魅力をさらにアピール。
 詳細情報はリンクページに引き継ぎ、トップページでは、
神戸の魅力をプレゼンテーションするイメージです。
 市民の方や神戸を訪れた方から写真を公募し、背景画像
に設定。ホームページを構成する今月の一枚とすること
で、市民や神戸が好きな方が参加して作り上げるトップ
ぺージが作れます。
 一日の中で画像を時間とともに変更するのも面白い。
 パララックス効果について
複数の背景を異なる速度でスクロールさせて奥行きを表現
すること。画像の相対的な位置がかわり視覚的におもしろ
い動きが得られる

4. ３_2．ホームページに対するデザインアイデア
（レイアウトの工夫）
○フッターには開閉するバナー表示エリア
○画面遷移はスムーズに移行し快適な操作感
現在位置の確認も容易になります
○メニュー選択以外にスクロールでも画面
遷移が可能。多様な操作に対応します。
○シンプルなナビゲーションの固定
 ナビゲーションは常に固定の位置に表示することでサ
イト内で迷子になることがありません
 必要最低限なシンプルなメニューで、情報の選択に迷
いません。

5. ３_3．ホームページに対するデザインアイデア
（コンテンツの充実）
○ツールボタン：
問い合わせやサイトマップ、よくある質問等必要なツー
ルをプルダウン表示するボタン
（モーダルウィンドウ）
○informationウィンドウ：
目的の情報や最新情報に容易にアクセス
More Infoボタンから表示
○プルダウンメニュー：
トップメニューにマウスオーバーするとプルダウンメ
ニューが表示されリンク先の概略がわかる
※左図は一例で、各メニューにプルダウンメニューが表
示されます
（モーダルウィンドウ）
○コンテンツスライダー：より多くの情報を提供
More Infoボタンから表示
○大きな検索窓：右上の検索ボタンをクリックすると表示
目的の情報に容易にたどりつける
○ソーシャルリンク：情報拡散に役立つ

6. ４．アクセシビリティ対策
 案１
 パララックスに使用している背景画像
には重要な情報をのせない
 →サイドバーに神戸市役所の情報掲載
 案２
 背景画像をオートで切り替える
 →パララックス効果によるメリットが
得られない