【Webサイト制作｜グループワーク】SeSETOaナビ

実装サイトはこちら⇩

□ 制作年月　：２０２１年９月

□ 制作期間 　： １０日間（１日８時間）

□ページ数　：６ページ

□チーム構成　： ３名

□担当箇所　　：全ページ⇨デザインカンプ・写真選定・キャッチコピー

　　　　　　　　Food、Nature⇨コーディング＆ライティング

□使用ツール　：VScode / jQery / photoshop / Illustrater

[ 企画概要 ]

• 団体名　｜　NPO法人　地方活性推進協会
• 所在地　｜　東京都新宿区
• 規模　｜　３名
• Webサイトを立ち上げる目的　｜　瀬戸内海(島々メイン)の魅力再発信。コロナ禍で内外の観光が困難なため、瀬戸内海に海外のような絶景があることをアピール。地方を応援、再活性化したい。地方から日本を元気にして、経済を回していく。
• ペルソナ　｜　F２層の女性（経済的余裕・決裁権有する女性、家族・友人・恋人との旅行、海外旅行の代替）
• タイトル　｜　ＳｅＳＥＴＯａナビ（瀬戸をシー（See見る、Sea海、e（＝エキサイティング）を探しに来て）で挟んだ造語）
• デザイン要望　｜　全体通して島のイメージ。きれい、かわいい、ナチュラル、ほどよい丸み。メインカラーは青多め、海の色。さわやかワンポイントに、オレンジ、黄緑、レモン色などの補色、暖色。

[ ロゴ ]

アイコン　＋　ＳｅＳＥＴＯａの文字

瀬戸内レモンと放射状に広がっていくアイコンと、ポップすぎないきれいめなフォントで構成。

[ カラー ]

ベースカラー　｜　青、海の写真

ワンポイント　｜　上記と補色関係のレモンイエロー

[ フォント ]

游明朝　｜　ヘッダ・見出し

⇒女性をターゲットに合わせてきれいめなイメージ

丸ゴシックPro　｜　＠説明文・フッタ

⇒閲覧者が旅行情報を収集する際の可読性を重視

[ レスポンシブ対応 ]

 瀬戸内名物さわらハンバーガーボタン　｜　まるで海外のような風景があることを表現。 ハワイを想起させるビビット系の色を使用。 女性向けに丸くやさしいフォルム ・尾っぽのハートで地方の“情”を表現

[ Topページ ]

メイン・ビジュアル　｜　瀬戸内海にある下灘駅。海に直に面した不思議なビジュアルで、瀬戸内海が日本でありながら異国感があることを表現しています。また、駅ということで旅立ちのイメージでもあります。

Zの法則　｜　画像が多いページはZの視線の動きをすると言われています。 そのため、重要あるいはキャッチーな情報を左上・中心・右下に配置しています。

ナビゲーション　｜　バックカラーは半透明にして、文字の読みやすさと、写真が 表現する開放感を両立します。また、瀬戸内で海外旅行のような気分が味わえることがわかるよう、エメラルドグリーンの海の写真を配置 。

旅行手配の動線　｜　解説だけではなく、マップや リンクを全ページに貼っています。  

猫　｜　Totopボタン。飛びます。瀬戸内海の猫島にあやかりました。

[ 下層ページ ]

コーディング　｜

・innerにコンテンツを収め、headerのnavとfooterの背景は画面に合わせて100％に設定。画面が大きくなってもビジュアルに空きがある印象にならないよう工夫しました。

・画像はCSSで写真フレームを付けることにより、安定したフレーム幅で作成することができました。

・flexの扱いがとにかく難しく、悪戦苦闘でした。何度も検証画面と教本を行き来し、構造が掴めました。

[ 制作を終えて ]

一番気を遣ったこと　｜　共同作業ということで、勝手にID、クラス名、構造の変更などしないよう気をつけた。複数人でWeb制作する時の気遣いを学びました。

作成のために特に勉強したこと　｜　photoshop。デザインカンプ担当でしたのでとても勉強になりました。ネットで必要な情報に辿り着くのが早くなりました。

楽しかったこと　｜　ミーティングによる更なるブラッシュアップ。それとおやつ交換（良い人たちに恵まれた）。

総論　｜　お互いの得意なことや大切にしたいことを尊重しあいながら制作を進めることができました。一人の力では辿り着けないものが作ることができ、Web制作における協力の大切さを学びました。