【自主制作】SITE DESIGN

OVERVIEW

新規オープンする架空の水族館のトップページを制作しました。 [制作期間:2週間 / 使用ツール:Figma、Photoshop]

YEAR 2023

<担当範囲>
mogaBlogで

配布されているワイヤーフレームを使用して、デザインカンプの制作を行いました。スマホサイズのレスポンシブ対応もしています。
(要件定義書に基づき制作。素材はフリー素材サイトから取得しています。)
コーディングとサーバーアップは現在作業中です。



【webサイト制作の目的】

  • 新規オープンする水族館のトップページ制作
  • 水族館についての情報を網羅的に掲載し、水族館を知ってもらいたい



【ターゲット】

  • ファミリー層、カップル(どちらか一案を採用。今回はファミリー層をターゲットに設定しています。)



【デザインの方向性】

 ★子供向け(ファミリー向け)。コーポレートカラーなどは無し。配色も自身で設定。

ターゲットのファミリー層を意識して、イラストを多く取り入れたデザインにしました。
フォントはRounded Mplus 1Cを使用。太さは太め、フォントサイズも少し大きめに設定することで、親しみやすい印象を与えられるようにしました。


【メインビジュアル】
水族館に訪れた際のわくわく感、ターゲットのファミリー層がお子様連れでも楽しめるような安心感・親しみやすさを感じてもらえるように意識してデザインしました。イラストによる楽しい印象だけでなく、水族館の雰囲気もしっかり伝わるように、三箇所で写真が切り替わるデザインを設計しました。
チケット購入やアクセスなど、知りたいユーザーが多いと考えられる情報は、わかりやすい位置に掲載。ほかの情報と差別化するための配色も意識しました。


【モデルコース】
ユーザーが水族館に訪れる姿を具体的に想像してもらえるように設計されたセクションのため、ほかのセクションと比べてより一層わくわく感を感じてもらえるようなデザインを意識して制作しました。「家族で」「カップルで」「友だちと」の部分のあしらいは、あえて枠からはみ出し不規則性を持たせることで、ユーザーの高揚感をかき立てるようなデザインにしました。