Snap Onomichi

尾道市の観光キャンペーンのLPです。尾道で見つけたレトロな一枚をInstagramに投稿してもらう企画で、キャンペーン概要・特典・応募方法・おすすめスポット・Q&A・お問い合わせまでを1ページにまとめています。

まず目に入るのは猫です。足跡やアイコンがページのあちこちに散りばめられていて、猫がこの街の象徴として扱われていると読みました。

もう一つは色です。淡い水色を基調にした配色は、写真に多く写る海や空と馴染むように選ばれています。FVでは空と街と海が一枚に収まっていて、自然の風景と人の営みが調和した場所として尾道を描こうとしているのだと考えました。

画面の外まで街が続いて見えるように、スライダーを組み替える

おすすめスポットのスライダーは、SPでは見出しの下にカードを中央寄せで並べ、PCでは縦書きの見出しを左に置いて、カードの列が画面の左端で途切れるように見せるデザインでした。PCではスライダーの幅を画面の85%にして右端に寄せ、はみ出した左側を隠すことで、カードが画面の外まで続いているように見せています。中央寄せの設定もPCでは外しました。

間違えたときに、直す場所へ案内するフォーム

入力の途中で別の欄に移ることはよくあるため、エラーは入力中には出さず、送信したときにまとめて表示するようにしました。一方で、エラーが出た欄を正しく直すと、その欄から離れた時点でエラーはすぐに消えます。また、送信できなかったときは最初のエラー欄にカーソルを移し、マウスを使わずキーボードだけでも直しに戻れるようにしています。

スクリーンリーダーの読み上げ実装

見直しの中で、お問い合わせフォームのエラー文が入力欄と結びついていないことに気づきました。送信できなかったときは最初のエラー欄へカーソルを移していましたが、スクリーンリーダーでは欄の名前しか読み上げられず、何が間違っているのかが伝わっていませんでした。

そこで、エラー文を入力欄に紐付けて読み上げられるようにし、その欄がエラーの状態であることも伝わるようにしました。キーボードで操作できることと、読み上げで内容が伝わることは、別々に対応が必要だと学びました。