かながわ印
神奈川県の名産品を紹介するサイト（架空）
- 制作範囲：
- 企画・ワイヤーフレーム制作 / ライティング 制作/ロゴマーク制作/アイコン制作/ デザイン制作 /コーディング
- 制作期間：
- 2021年8月～9月制作（2カ月）
- 使用ツール：
- Adobe Photoshop / Adobe Illustrator / XD/Visual Studio Coder
概要
アビリンピック大会ホームページ部門の対策をするために制作したWebサイトです。 議題テーマは自分が住んでいる都道府県の特産品・名産品を紹介するWebサイト制作することです。私は神奈川県在住のため、神奈川県の特産品・名産品を紹介するWebサイト制作をコーディングまで行いました。
ターゲット層
10代後半～60代男女
目的
ユーザーが、観光先やお取り寄せ品を探す人が閲覧することを想定し、「タブレット、スマートフォンでも出来るWebサイトにして欲しい」「写真などを多用して特産品・名産品の魅力を紹介したい」等の要件に沿ったWebサイトを制作すること
情報設計の工夫
神奈川県内の旅行やインターネットでお取り寄せ品を探す方に、写真を多用して特産品・名産品の魅力を伝えつつ、詳細ページでは成り立ちから現在に至るまでの概要や特徴を紹介しています。工夫した点は、重要なポイントごとに見出しをつけたことです。メリットとしては、ユーザーが文章の構造を理解しやく点です。文章の構造がハッキリとし、ユーザーがページの内容をストレスなく理解できるように意識して制作しました。また、視覚障害者等が読み上げソフトで閲覧する際、マウスで写真に触れた時も読み上げてもらえるように、htmlファイルで代替テキストを記述するなど気を配りました。
デザインの工夫
パソコンだけではなくタブレットやスマートフォンで閲覧した際、ユーザーが困惑しないように「一貫性」のあるデザインを行いました。私が行った一貫性のあるデザインは下記の通りです。
- 使用する用語は、知的障害者や学習障害者・発達障害者・高齢者にも理解しやすい用語に統一
- サイト内容で使用するボタン（特産品一覧、ランキング、詳しくはこちら等）を統一。通常時は紺色でマウス等で触れた際は黄色に変更される、手が病気や怪我・障害などにより操作しにくい人向けにTabキーで操作しやすいに実装
- 配色は、神奈川県（みなとみらい・江の島、湘南等）はイメージが強いため、メインカラーは「白」、メインカラー「紺」、アクセントカラー「黄色」の3色を使用。この3つを使用した理由としては、色の見え方に障害がある色覚障害者や老眼等で色が見えづらい方が閲覧しやすいようにメリハリのある「白」「紺」「黄色」にしました
サイト全体
- ▼パソコン版
-
- ▼スマートフォン版
-
