← Works へ戻る

CAELIS

2041年、猫が空を移動する時代。

その一言から、存在しないペットモビリティブランド「CAELIS」を作りました。

CAELISのPCでの表示
CAELISのタブレットでの表示
CAELISのスマートフォンでの表示

掲載している画面はモックアップではなく、実際のサイトを3つの画面幅で撮影しています。

なぜ作ったか

実在するサービスを題材にすると、どうしても既存のイメージに引っ張られます。

そこで、製品そのものからブランド、コピー、Webサイトまで、すべてゼロから作ってみることにしました。

テーマは、「2041年の猫用モビリティ」

未来の話ではありますが、SFに振り切るのではなく、「本当に発売されていそう」と感じるところを狙っています。

作ったもの

Webサイトだけでなく、ひとつのブランドとして必要なものをまとめて設計しました。

  • ブランドデザイン・コピー
  • 製品デザイン・仕様
  • FAQ・ストーリー
  • Three.jsを使った3D表現
  • 日本語 / English対応

どう作ったか

実在する製品サイトを参考に、製品紹介、技術、予約、FAQなど、購入を考える人が必要とする情報を組み立てています。

見た目だけ未来っぽくするのではなく、製品の重量や使い方、発売までの流れまで考えました。

HTMLCSSJavaScriptThree.jsCloudflare Pages

詰まったところ

うまくいかなかったものも、そのまま書いています。

架空なのに、辻褄が合わなくなった

制作中に一番困ったのは、デザインではなく設定の矛盾でした。

「予約受付中なのに、なぜ顧客レビューがあるのか」
「本体重量と最大積載量の関係はおかしくないか」

細かく作るほど、こうした矛盾が増えていきました。

レビューは「2040年に実施した12世帯での在宅試験」という設定に変更し、製品仕様も見直しています。

架空だからこそ、辻褄が合わないと一気に嘘っぽくなる。

見た目を作り込む以上に、設定の矛盾をなくすことを意識しました。

読みやすさと、ブランドの色

アクセシビリティの自動チェックでは、一部の文字色と背景色のコントラストが基準に届いていません。

色を濃くすれば改善できますが、今回は静かで淡い配色もブランドデザインの一部として残しました。

自動チェックの点数だけで決めず、デザインとのバランスを考えたうえでの判断です。

世界観から一式で作りたい、といったご相談も受け付けています。

メールで相談する