![見出し画像](https://assets.st-note.com/production/uploads/images/144082522/rectangle_large_type_2_6805c14a02b365e8af54c91bdf5661b8.png?width=1200)
webサイト分析05|道の駅ふたみ-ふたみシーサイド公園
まとめ
メリハリのある構成で、写真がたくさん使用されているがスライドなのでごちゃごちゃ感も少ない。
せっかくならもっと「今、行きたい」と思えるポップアップになればいいと思った。
※今回の分析はいつもより長くなりました。
カテゴリー
商業施設
道の駅
概要
道の駅ふたみ
海のそばで飲食や特産品の販売、イベントを楽しめる。
コンセプト
まいにちが「海の日」。
ターゲット
愛媛県へ観光を考えている人
道の駅に立ち寄る予定がある人
目的
施設の利用
コンバージョンまでの動線
最新情報のポップアップ、INFORMATIONのおしらせ情報
写真が多く、過ごすイメージが湧く
アクセスで、どれくらい時間がかかるかパッと見で分かりやすい。すぐ行こうと思えそう。
メインビジュアル
食べ物の写真も海の写真も、全部で3枚ずつ。
約3秒ごとにスライド式で切り替わる。
まいにちが「海の日」。のコンセプトの文字が最も大きく、
文字間の余白から、ゆったりした印象。
右側に「今日のふたみ」のポップアップがあるが、1ヶ月前のイベント。
今後のイベント予定が無いのか、更新していないのか・・?
「ふたみにいく」をクリックすると、下部のマップのページに移動しました。
![](https://assets.st-note.com/img/1718409431807-VopR8RIek4.png?width=1200)
グローバルナビ
全部ひらがな!かっちりしすぎない、親しみやすい印象。
ナビはスクロールしても特についてきませんでした。
![](https://assets.st-note.com/img/1718409799776-P8IIF5xCKt.png?width=1200)
「ふたみいいく」以外、ホバーすると英語タイトルになりました。
![](https://assets.st-note.com/img/1718410161703-qyEshoOqKN.png)
コンテンツ
CONCEPT
INFORMATION#なうふたみ
SNS#ふたみにいく
MAP
SHOP LIST#かう、たべる
ACCESS#ふたみにいく #ふたみからいく
CONTACT#といあわせる
・CONCEPT
![](https://assets.st-note.com/img/1718410405596-uHM3VkgqDm.png?width=1200)
縦の斜め線は、波打つようなアニメーション。
海の波を連想でき、視線も下コンテンツへ誘導できて良いなと思った。
MVでも書かれていたコンセプト"まいちにが「海の日」。"が再度登場。
タイトルと、本文にも使われている。これでもかと使われている。
ペットの連れ込み禁止が早い段階で書かれているのは、道の駅にペットを連れる人も多いからかと思った(高速道路のSAはドッグランあったりするし、道の駅にも連れてくるかも?)。
左上に「あさ・ひる・ゆうがた」のアイコンがあり、「ひる」を示していた。
右下は「ひるのすごしかた」として「海をみながらのんびりランチ」が書かれていた。サイトを見る時間によっては「あさ」「ゆうがた」バージョンも見れるのかな?(現在午前9時。あさじゃないのか・・?)
また試してみます。
6.17追記 現在20時30分。「ひる」のままでした。特に変わる仕掛けはない模様。
・INFORMATION #なうふたみ
![](https://assets.st-note.com/img/1718410783490-jRkPNfu3ju.png?width=1200)
「イベント」「旬の商品」などカテゴライズされており、情報が検索しやすい。MV右側に表示されてた「今日のふたみ」はここから抜粋されてそう。
6/29にもイベントがあるみたいだけど、これをMVに表示した方がいいのでは・・?
・SNS #ふたいみにく
![](https://assets.st-note.com/img/1718411131810-NQnmKtJTwM.png?width=1200)
グローバルナビでは「#みんなのふたみ」が「SNS」として使われていたけど、「#ふたみにいく」になってる・・?(そして「#ふたみにいく」はグローバルナビでは「アクセス」に使われていた。)
さらに個人的な感覚ですが、INFORMATIONよりもSNSが「#なうふたみ」の方が、しっくりくるような?
コンテンツ名の整合性が微妙と思ってしまいました。
・MAP
![](https://assets.st-note.com/img/1718411250695-zgV5TPXntt.png?width=1200)
上下の波線はアニメーションになっていた。マップはイラスト。色は背景がグレーで文字が青、2色でシンプルで見やすかった。
MAPの前まで赤がメインの配色だったが、ここを境に青系に変わります。
でもいきなり感は全然無い。
・SHOP LIST
![](https://assets.st-note.com/img/1718411411974-llqGALxl47.png?width=1200)
3枚の写真は上方向に、真ん中の大きな写真も一定間隔で切り替わった。
食べ物と一緒に、内観や景色などの写真が見れて、わくわくする。
突然ポップアップに現れたおしらせは、4ヶ月前の情報・・・。
店舗名でカテゴライズされたNEWSが表示されてると思うが、4ヶ月もイベントがないという印象になりそうで、そもそもポップアップ必要なのか?と思った。
ここから6店舗ほど紹介されていて、小さい店舗は写真が表示される枠が1つに。ただ店舗紹介の説明だけでなく、「〜〜どうしてこんなに美味しいの!」とコメントが見出しになってて、ユーザーを引きつけられると思った。
![](https://assets.st-note.com/img/1718411917304-7AvPJhESjx.png?width=1200)
・CONTACT
![](https://assets.st-note.com/img/1718412104092-WKfVtgdAec.png?width=1200)
突然テイストが変わりました。
でも、フッターの青色と反対の色で目をひく。
フッターも余白がゆったりしている。
レスポンシブ
767px以下からスマホデザインに。
![](https://assets.st-note.com/img/1718412394645-HaPKwOBHUl.png?width=1200)
2021.5.28 OPENと、PCにはなかった表現が登場!
あれだけPCで推してた”まいにちが「海の日」。”が見当たりません。
当初はPCも新しさを推していて、今はコンセプトを大事にしている?
(スマホは更新できていない・・?)
ユーザー目線で気になったこと。
480pxからSNSが縦並びになり、写真サイズも大きいのでスクロールが増えてしまった。実際にスマホでも見ましたが、ちょっと大変。
![](https://assets.st-note.com/img/1718412635977-y7zNIdCrAW.png)
配色
![](https://assets.st-note.com/img/1718412936656-EcaGAaRxl4.png)
フォント
noto-sans-cjk-jp
iroha-26tubaki-stdn あしらい文字(#の後)、店舗名
brandon-grotesque 英語
白黒トレース
![](https://assets.st-note.com/img/1718413058556-ro8AkOddne.png?width=1200)
![](https://assets.st-note.com/img/1718413459442-2C17WtBjw1.png?width=1200)
発見と感想
・サイト全体の構成はメリハリが効いてていい!
コンテンツの切り替わりは、写真や帯を横に広く使用し区別している項目が多い。MAPやCONTACTはそのコンテンツ自体横長なので、これがあることで全体がひきしまって見える。
・ロゴの丸みのあるオブジェクトを随所で活用しており、四角形も角とれててゆったりした印象がある。加えて文字間隔もしっかり取っているのでゆったり過ごせるイメージがわく。
・ポップアップに終わった情報が出ているのが勿体無い。
・スマホとPCでMVの文言が違うのは、意図的なのか・・?
この記事が気に入ったらサポートをしてみませんか?