【1日1サイトレビュー】#53 Do it Theater

■Do it Theater https://www.ditjapan.com/

シアターイベントのプロデュースを手掛けるDo it Theaterのサイト。

・1カラムの構成でナビゲーションは上部固定。ファーストビューは画面をいっぱいに使ったムービーの上に白地で映画のチケット風ロゴタイトルが描かれている。ロゴタイトル、ナビゲーション、NEWSなどパーツ全ての背景が透明なので映像の切り替わりで違った雰囲気になる。

・画面右手のタブを開くとイベント情報が縦に並ぶリンクが開く。この時、中央のチケット風のロゴタイトルは右端が切り取られる効果がついていて仕掛けが凝っていると感じた。このリンク部分も背景の透明度が高く後ろの映像が透ける。見出しのワンポイントやタブの形などチケット風の形が可愛い。

・他にも罫線やテキストボックス、リンクボタンなど色数が少ないのに線や図形の組み合わせの工夫でとても綺麗にまとまっている。特にラインの使い方がお洒落だと感じた。

・各ページ下部のコンタクトへのリンクは横幅を大きく取ってあり、ホバーで映画の映像が流れるような(?)効果がついている。華奢な装飾が多い中で目立っていた。お問い合わせのリンクもナビゲーション部分に看板のように固定されていてわかりやすい。

・フォント：Noto Sans JP、PT Sans Narrow、PT Sans Narrow、Prata
・カラー：背景白#FFFFFF、 ロゴ黒#2F2E2E 、フッターグレー#2F2E2E、文字赤#C90037