「うらわ水族館(架空)」新規Webサイトこだわりポイント
Logo

「うらわ水族館(架空)」Webサイト

Favorite
Credit
Webデザイン
「うらわ水族館(架空)」Webサイト-1
Share
Behind The Scenes
「うらわ水族館(架空)」新規Webサイトこだわりポイント

【概要】
架空の水族館「うらわ水族館」の新規サイト作成。まずはトップページのみ制作。
うらわ水族館とは…来月オープン予定の埼玉県さいたま市浦和区にある水族館。水族館の特徴は、大水槽、水槽のトンネル、月に 2 回の夜間営業。

【目的】
水族館の情報を知ってもらう。水族館の公式サイトなので、水族館についての情報を網羅的に掲載したい。

【ターゲット】
カップルでの訪問客を狙う。
付近に大学が複数あることから、若い女性のペルソナとした。具体的には以下の通り。
・名前 前田愛美
・年齢 21歳
・性別 女性
・職業 学生、埼玉大学教養学部3年
・収入 ファーストフード店バイト月2万円
・世帯 家族3人(父、母)
・居住地 さいたま市の実家
・趣味 美容系ユーチューバーの動画を見ること、旅行、カフェ巡り
・ネット スマホでSNSのチェックを欠かさない。
・生活 目下の悩みは就活。付き合って3ヶ月になる恋人と過ごす時間が何よりも楽しみ。
・ニーズ 次のデート先を考えている。大学終わりの夕方~夜。おしゃれな場所を希望。
・検索ワード 水族館 デート おしゃれ 夜 埼玉

【デバイス】
レスポンシブ対応。ターゲット層である20代の個人のインターネット利用機器は、スマホが87.9%、パソコンが66.0%、タブレットが26.3%(出典:総務省「令和元年通信利用動向調査」)であり、9 割弱がスマホを利用。利用率が最も多いスマホ対応が必須であるため。

【デザインコンセプト】
「デートで訪れたくなるような、洗練されたきらめく空間」
(イメージワード:透明感、奥行き、輝き、光のゆらぎ)

【カラー】
白(#ffffff)と、シアン寄りの暗め青(#002C81)。
背景にはグラデーションのある海の写真を使用。

【フォント】
見出しとロゴには、なめらかで美しく、ゆらめく水のイメージとも合う上品なうつくし明朝体を使用。
本文には、MacとWindowsに標準搭載されており、すっきりと柔らかい印象の游ゴシックを使用。

【情報設計】
基本的には、配布ワイヤーフレームaquarium (mogablog.work)の指示に従って作成した。
以下は個人的なこだわりポイント。
・訪問を検討しているユーザーが最も知りたいであろう情報である、本日の営業時間とプログラム、チケット購入情報をファーストビューに載せた。
・スマホ版のファーストビューでは、「当日券を購入する」ボタンをクリックしやすいように大きく配置した。右利き左利きどちらのユーザーでも親指でクリックしやすい真ん中の下部に置いた。
・ファーストビューの「本日の営業時間」は「本日のプログラム」に比べて重要な情報だと考えられるため、時間の文字サイズを大きくした。
・メインビジュアルに、うらわ水族館のアピールポイントである大水槽を想起させる、スケール感のある水槽の写真を使用し、ユーザーの興味を引くことを狙った。
・おすすめ情報の記事に、同じくうらわ水族館のアピールポイントである水槽のトンネルと、ナイトアクアリウムの写真を配置し、ユーザーが訪れるきっかけとなるようにした。

【デザイン】
・海のイメージと、洗練された落ち着きのある印象を与えるために、同一色相配色とした。
・無彩色の白と合わせることで、より青の印象を際立たせた。
・同じ色相で明度や彩度を微妙に変化させると、空間や奥行きを感じさせることから、背景には海のグラデーションの写真を配置し、水族館特有の透明感や、光や水のきらめき・ゆらめきを演出した。
・単調になりすぎないように、アクセントとして、波をイメージした曲線を背景に取り入れた。
・近接、整列、反復、コントラストといった基本原則を意識してユーザーにとって分かりやすいデザインを心がけた。

Share
「うらわ水族館(架空)」Webサイト-1
「うらわ水族館(架空)」新規Webサイトこだわりポイント

【概要】
架空の水族館「うらわ水族館」の新規サイト作成。まずはトップページのみ制作。
うらわ水族館とは…来月オープン予定の埼玉県さいたま市浦和区にある水族館。水族館の特徴は、大水槽、水槽のトンネル、月に 2 回の夜間営業。

【目的】
水族館の情報を知ってもらう。水族館の公式サイトなので、水族館についての情報を網羅的に掲載したい。

【ターゲット】
カップルでの訪問客を狙う。
付近に大学が複数あることから、若い女性のペルソナとした。具体的には以下の通り。
・名前 前田愛美
・年齢 21歳
・性別 女性
・職業 学生、埼玉大学教養学部3年
・収入 ファーストフード店バイト月2万円
・世帯 家族3人(父、母)
・居住地 さいたま市の実家
・趣味 美容系ユーチューバーの動画を見ること、旅行、カフェ巡り
・ネット スマホでSNSのチェックを欠かさない。
・生活 目下の悩みは就活。付き合って3ヶ月になる恋人と過ごす時間が何よりも楽しみ。
・ニーズ 次のデート先を考えている。大学終わりの夕方~夜。おしゃれな場所を希望。
・検索ワード 水族館 デート おしゃれ 夜 埼玉

【デバイス】
レスポンシブ対応。ターゲット層である20代の個人のインターネット利用機器は、スマホが87.9%、パソコンが66.0%、タブレットが26.3%(出典:総務省「令和元年通信利用動向調査」)であり、9 割弱がスマホを利用。利用率が最も多いスマホ対応が必須であるため。

【デザインコンセプト】
「デートで訪れたくなるような、洗練されたきらめく空間」
(イメージワード:透明感、奥行き、輝き、光のゆらぎ)

【カラー】
白(#ffffff)と、シアン寄りの暗め青(#002C81)。
背景にはグラデーションのある海の写真を使用。

【フォント】
見出しとロゴには、なめらかで美しく、ゆらめく水のイメージとも合う上品なうつくし明朝体を使用。
本文には、MacとWindowsに標準搭載されており、すっきりと柔らかい印象の游ゴシックを使用。

【情報設計】
基本的には、配布ワイヤーフレームaquarium (mogablog.work)の指示に従って作成した。
以下は個人的なこだわりポイント。
・訪問を検討しているユーザーが最も知りたいであろう情報である、本日の営業時間とプログラム、チケット購入情報をファーストビューに載せた。
・スマホ版のファーストビューでは、「当日券を購入する」ボタンをクリックしやすいように大きく配置した。右利き左利きどちらのユーザーでも親指でクリックしやすい真ん中の下部に置いた。
・ファーストビューの「本日の営業時間」は「本日のプログラム」に比べて重要な情報だと考えられるため、時間の文字サイズを大きくした。
・メインビジュアルに、うらわ水族館のアピールポイントである大水槽を想起させる、スケール感のある水槽の写真を使用し、ユーザーの興味を引くことを狙った。
・おすすめ情報の記事に、同じくうらわ水族館のアピールポイントである水槽のトンネルと、ナイトアクアリウムの写真を配置し、ユーザーが訪れるきっかけとなるようにした。

【デザイン】
・海のイメージと、洗練された落ち着きのある印象を与えるために、同一色相配色とした。
・無彩色の白と合わせることで、より青の印象を際立たせた。
・同じ色相で明度や彩度を微妙に変化させると、空間や奥行きを感じさせることから、背景には海のグラデーションの写真を配置し、水族館特有の透明感や、光や水のきらめき・ゆらめきを演出した。
・単調になりすぎないように、アクセントとして、波をイメージした曲線を背景に取り入れた。
・近接、整列、反復、コントラストといった基本原則を意識してユーザーにとって分かりやすいデザインを心がけた。

Share