架空のドローン空撮サービス「FLYWAYS」をつくりました。無料ホームページ作成サービス「ジンドゥー」にセットアップするだけ！（ほぼ）完成品ウェブサイト爆誕。

こんにちは。スタジオエムハチの大塚です。
和歌山のドローン空撮サービス「FLAYWAYS」のウェブサイトを制作・公開しました。

このウェブサイトは実際にドローン空撮業務を行っていない「ダミーサイト」です。
コンセプトは

そのうち
完成品ウェブサイト
を買う時代へ？

FLYWAYSはドローン空撮事業者を想定した「ほぼ完成品のウェブサイト」です。

デザインはもちろん、事業に必要なコンテンツ、キャッチコピー、原稿をすべてセットとしました。

お客さまの用意したジンドゥーアカウントに、サイトをセットアップする方式です。色や原稿の一部を変更したり、画像を差し替えたりするだけで、すぐにウェブサイト開設が可能です。

テンプレートですら面倒な人が多い

今や「ノーコードのホームページ作成サービス」は自由に選べ、デザインテンプレートも超クールなものばかりです。

信じられないほど安価に・かっこいいサイトを作れる環境があるのに…それを「あえて」持たない小さな企業はたくさんあります。

理由としてよく聞くのが「文章。考えるだけで面倒なんだよな！！」
というもの。

コンテンツ構成と原稿でつまづく方はとても多く、常々私が思っていたことが「もう、はじめから全部入ってればいいのでは？」というものでした。

コンパクトなコンテンツ、（お問合せ）機能、堅実で主張しすぎないデザイン。

起業時におけるサイト構築の手間を一気に解決する（ほぼ）完成品ウェブサイト「FLYWAYS」がここに爆誕しました。

ジンドゥーはいい

「ジンドゥー」は無料ホームページ作成ツールです。 日本では株式会社KDDIコミュニケーションズ社がサービスを提供しています。

ノーコードのサイト作成サービスはたくさんありますが、趣味のプロジェクトでサイトを作るとき、私はジンドゥーを選んでしまいます。

• 無料プランがある
• ブロックエディタ（WPのような）
• テンプレートがシンプル
• CMSがシンプル

今回のFLYWAYSでもジンドゥーを使っています。細々としたことは「購入前のご注意」ページに記載しました。ジンドゥー愛に溢れたページとなっています。

以下がページ説明です。

ヘッダ全画面

動画の見え方を、ドットテクスチャ+黒背景で調整しました。

動画は後で変更ができるようHTML側（クリエイター機能「HTML/ヴィジェット」ブロックを使用）に記載しています。

「サイトの所有感」を上げるためガジェット風味のオタクデザインです。カワサキ、ZX、ガンダム、スジ彫り、ガンプラとかのキーワードをイメージしました。

インフォメーション

最初に読み始めるボックスなので目に留まるようにしました。

ボックス上部の装飾は疑似要素にclip-path。
制作時は「上部バンパー」と「スジ彫り」みたいなものを考えていました。

サービスの特徴

ジンドゥーのテンプレートは、はじめからレスポンシブデザインですが。FLYWAYSではさらに丁寧に調整しました。

「すりガラス」のようなエフェクト「親要素から飛び出すアンダーライン」は以下のようになっています。コリスさんの記事より

.すりガラス{
background-color: rgba(255,255,255,.75);
backdrop-filter: saturate(180%) blur(20px);
}

.親要素から飛び出すアンダーライン{
border-image: linear-gradient(0deg,var(--green) 3px,#0000 0) fill 0//0 100vw 8px 0;
}

料金プラン

料金プランのデザインイメージは、昔、携帯ショップでよく見せられた「階段料金プランの図」です。

参考デザインを調べてたら最近は違うんですね。数字で魅せるものが多かったです。

タブレットより大きなデバイスでは「軸方向」が変わるようになっています。階段グラフはCSSのグラデーションです。

安全への取り組み

安全性に関するコンテンツを書きすぎると、逆に不信感が出るので難しいなと思っています。

直上のブロック（料金プラン）から、そのままスムーズに通り過ぎるような背景にしました。

ご利用ガイド

詳細になるほど制作フローはイメージし易くなります。しかし、詳細にするほど読まれません。

FLYWAYSの事業規模やターゲットを考え、柔軟さ残したご利用ガイドにしました。

お問い合わせ

お問い合わせフォームは独自HTMLブロックではなく、ジンドゥーCMSのフォーム作成ブロックを使い、CSSの上書き装飾を行っています。

赤いときのユニコーンガンダムみたいだなと思って制作しました。

会社概要

ドローン空撮業者でYouTubeチャンネルを持たない、ということはないでしょう。twitterヴィジェットはタイムライン機能をニュース配信用に利用したかったからです。

ということで、ドローン空撮業者のダミーサイト「FLAYWAYS」の説明でした。

ぴえ