ASURA WORKS. 作品一覧へ

ウェブサイト / 空撮・ドローンショー

ソラツヅリ

空を飛ぶ仕事を、
映像から伝えるサイト。

福岡の架空の会社を題材にした、空撮映像とドローンショーのウェブサイトです。飛行の映像を入口に、二つの事業の内容と料金の目安、安全管理の体制、事例の絞り込みまでをまとめました。

作品を開く

架空の事業者を題材にした自主制作です。

何ができる会社かを、
最初の一画面で。

ドローンで何ができるか分からない段階の相談を想定しました。冒頭はスクロールに合わせて飛行の映像が進み、社名より先に仕事の中身が伝わるようにしています。

続けて二つの事業、選ばれる理由、実績を並べました。事業ページでは料金の目安と制作の流れを示し、安全管理のページで手続きと運航体制まで確かめられる順序です。

画面いっぱいの写真を、
一枚ずつ重ねていく。

淡い青白の地に濃紺の文字を置き、操作の色だけ青緑にしています。ヘッダーはロゴとMENUだけにし、開くと夜明け前の空と星の全画面に大きなナビ文字が並び、PCでは指した項目の写真がファインダー枠の中に映ります。

本文は節ごとに画面いっぱいのパネルにし、読み進めると次のパネルが角丸の上端から前のパネルに覆いかぶさります。パネルは写真一面に濃紺の板を重ねる表紙、写真と本文を左右に置く見開き、上下にフィルムの穴を並べて3コマを収めるフィルムなどを節ごとに使い分けました。ドローンショーの節では、光の点が夜空に集まってロゴや機体の形を作り、また散ります。

事例を絞り込み、
相談内容をまとめる。

実績のページでは、言葉を入れるたびに事例が絞り込まれ、該当件数の表示が変わります。「すべて表示」を押せば元の一覧へ戻ります。

問い合わせは相談の種類・氏名・連絡先・内容を入力し、確認画面で見直してから相談内容をコピーする流れです。送信はせず、実際の相談や見積りは行わないデモです。

縦の画面いっぱいに、
空を広げる。

スマートフォンでは冒頭の映像を画面いっぱいに敷き、左右を見切って人物を中央に残しました。コピーは下寄りの濃紺の板に載せ、下から濃紺に暗くなるグラデーションを重ねて読みやすくしています。ヘッダーはロゴとMENUだけで、メニューを開くと写真を背景に薄く敷いた大きな文字が縦に並びます。

制作情報

種別
自主制作・架空サイト
制作範囲
構成・文章・デザイン・実装
使用技術
HTML / CSS / JavaScript
Vite / GSAP
対応画面
PC・タブレット・スマートフォン