「ナナメ上」をデザインで走らせる、体験型ランディング。
こんにちは、マツザワです。今日は西武鉄道の特設サイト「想像の、ナナメ上へ。」をゆっくり眺めました。
池袋・西武新宿から“ナナメ上＝西北西”にのびる西武線。その沿線に眠る驚きを、ただ紹介するのではなく、サイトそのものを“ナナメ”に設計して体験させる——そんな企画とUIがうまく噛み合ったサイトでした。
キービジュアル：斜めのカットラインで“ナナメ上”を即伝達
ファーストビューから写真のエッジが斜めに切り落とされ、タイポもそれに沿うレイアウト。コピーの余白と角度が整っていて、コンセプトが視覚的に一瞬で伝わります。言葉で説明する前に、形で納得させるやり口がスマート。
コピーと構成：短いセンテンスで“発見の歩幅”をそろえる
メインコピーはリズムの良い短文で段組み。スクロールに合わせて「想像のナナメ上をいく、知られざる世界を探検しよう」と読者の歩幅を決めてくれます。記事ブロックも「#秩父のナナメ上」「#花小金井駅のナナメ上」など、ハッシュタグ風の見出しで並列化。街の固有名詞がタグとして機能し、キャンペーンの広がりを想像させます。
ビジュアル編集：“斜めの切り抜き × 大胆トリミング”で一続きの世界観
各スポットの写真は、斜めのトリミングと大きめの被写体配置で印象を濃く。連続して見ても単調にならないのは、角度と余白の取り方が丁寧だから。とくに、星空・銭湯・商店街・ミュージアムといった“質感の違う被写体”を同じルールで束ねているのが巧みです。
情報設計：キャンペーン→回遊の動線が素直
特設内の各セクション末尾には、関連ニュースや外部コンテンツへの導線（イベント告知や沿線ガイド）を添えて、キャンペーンを“一度きりの読み物”で終わらせない設計。読み手の熱量が高いうちに「参加できること」「もっと知れるもの」へ自然につなぎます。
トーン＆マナー：公共交通の“らしさ”を崩さず、遊ぶ
コピーは親しみがありつつ、過度にカジュアルではありません。ビジュアルの大胆さと文章の落ち着きのバランスで、鉄道会社の信頼感は保ちながら“ナナメ上”の遊び心を立てています。ブランドトーンのコントロールが好印象。
タイポグラフィ：余白と行間で“旅の間”を演出
見出しは視認性の高い太さ、本文は読みやすい行送り。とくにセンテンス間の呼吸の取り方がうまく、次の写真へ視線が流れます。装飾は最小限で、角度と余白が主役。アクセントは斜めのラインとタグだけに絞って、情報の焦点がぶれません。
モジュール設計：5つの“ナナメ上スポット”で学べること
- カードの均一化：各スポットのレイアウトとコピー構成を揃え、比較しやすい。
- 写真1発の説得力：縦横の画角を混ぜず、記憶に残すための大胆トリミング。
- タグ導線：駅名・地名をハッシュタグ化し、SNSでの拡張も想起させる。
- 末尾リンク：読む→行く（イベント／記事）に繋げる“次の一歩”を必ず用意。
ブランド一貫性：オフライン施策との連動を感じる見せ方
特設で使うコピーとビジュアルは、ポスターやニュースルームのトーンとも揃っており、オンライン・オフラインの境目を感じさせません。街で見かけた表現がそのままWebに延長される安心感。交通系の広報でとても大切なポイントです。
レスポンシブ＆アクセシビリティの所感
- レスポンシブ：セクションごとのまとまりが明快で、縦スクロールで読み切れる。
- テキスト量：スマホでも読み切れる短尺コピー。写真優位の構成で負担が軽い。
- リンクの明度差：回遊リンクの視認性が確保され、タップ先が想像しやすい。
このサイトから持ち帰りたい“デザインの型”
- コンセプトを形にする角度：コピーに書かれた“ナナメ上”を、斜めカットとレイアウトで反復。
- タグ化で整理：地名・駅名をタグにして、並列で比較・拡張できる情報設計。
- 一枚に“次の行動”を仕込む：読み物の終わりにイベントや記事への導線を必ず置く。
まとめ
“斜め”という一手で、沿線の魅力を一段と立体的に見せる特設でした。写真とコピー、そしてレイアウトのルールがずれなく噛み合っているから、スクロールが気持ちいい。企画とUIが同じ方向を向くと、ここまで伝わるのかと、ちょっと唸りました。西武線、次はどの“ナナメ上”で来るのか、楽しみです。