懐かしくも新しい空気を、北九州から
こんにちは、マツザワです。今日は「ニュー北九州シティ」の公式サイトを見ていきます。まず強烈に目に飛び込んでくるのは、やっぱりヒーローイメージ。ローラースケートの女の子にラジカセ、空には惑星や魚が漂い、街と未来が混ざり合うシティポップ的なイラストです。このワンシーンだけで「ここはただの都市サイトじゃない」と伝わってきます。
ヒーローイメージが入口をつくる
ファーストビューのイラストは、街を“カルチャーシティ”として見せるための強い入口になっています。「古くて、新しい。」というコピーと重なり合い、北九州の街に対するイメージをやわらかく塗り替えてくれるんです。ここで期待感を高めて、スクロールへの動線を自然につなげています。
セクションを整理するUIの役割
サイトを進んでいくと、コンテンツはProject / Contents / Film の3つに整理されています。カード型のUIでサムネイルとタイトルが並び、カテゴリを示すハッシュタグが添えられているので、ざっと見渡すだけで「今どんなことが起きているのか」がわかります。情報が散らからず、読みたいテーマにすぐアクセスできるのが良いところです。
カードUIの“軽さ”と回遊性
カードは写真を中心にすっきり配置されていて、本文量は短くまとめられています。そのおかげで、スマホでもテンポよくスクロールして回遊できるんです。重厚な読み物サイトではなく、カルチャーを“つまんで味わう”メディアとして最適化されている感じがしました。
Filmセクションの映像体験
「Film」では動画コンテンツを中心に紹介。YouTubeを埋め込んだシンプルな構成ですが、その前に短いテキストで「どういう映像なのか」を端的に紹介してくれるので、クリックする前から期待値が持てます。動画を見るという行為を少し軽やかにしてくれる工夫が効いていますね。
タイポグラフィと余白のバランス
見出しには骨太なサンセリフ体を使い、本文は読みやすさを重視したシンプルな書体。大きな文字サイズと余白をしっかりとったレイアウトは、情報を“詰め込みすぎない”印象を与え、写真やイラストを邪魔せず引き立てています。カルチャーサイトらしい、呼吸できる画面構成です。
SNSとの接続とハッシュタグ
各記事にはハッシュタグが添えられていて、ジャンルをまたいで関連性を感じられる仕組みになっています。またフッターにはTwitterやLINEなどへのシェアボタンが配置され、街のカルチャーを自然に広げていける設計です。SNSと相性のいいコンパクトさを持たせたUIは、運用の面でも現実的ですね。
まとめ
ニュー北九州シティのサイトは、ヒーローイメージの鮮やかなイラストで“街の顔”をつくり、その後のセクションではカードUIや動画セクションを通じて実際のカルチャーを伝えています。デザイン全体が、街をただ紹介するのではなく「ひとつの雑誌をめくるように読む体験」に寄せているのが魅力だと感じました。