Desirable Futures ウェブサイト

概要

Desirable Futuresは、組織開発の経験豊富なアジャイルコンサルタント3名が創業した、オーストラリアの先進的なコンサルティング会社です。ロゴの制作に続いて、事業の立ち上げに向けたウェブサイトの設計と構築をMokujiroが担当しました。

要件

目的は、ロゴ制作の過程で確立したブランドアイデンティティと一貫性のあるウェブサイトを設計し、公開することでした。

この記事では、Desirable Futuresのブランディングの第二段階にあたる、ウェブサイトのデザインを紹介します。

ミッション

ミッションは、全体のプロセスを効率よく運営し、最高水準のウェブサイトを届けることでした。ブランドアイデンティティを高め、対象とする読者にサービスを示し、コンテンツ、ビジュアル、アクセシビリティのバランスを保ちながら、最新のデザイン手法で制作の流れを整えることです。

主な課題

• 3Dアニメーション

• コンテンツ制作

• アクセシビリティ

ユーザー体験の定義

対象とする読者、ユーザーの導線、情報設計、そしてグローバルナビゲーションを含むモックアップを定義しました。

主なペルソナ：ペルソナ1、ペルソナ2、ペルソナ3

点をつなぐ：入口となる導線と、Desirable Futuresの目標、各ペルソナの目標をつなぎ、一貫したユーザー体験を組み立てました。

情報設計：文章はDesirable Futuresが用意し、Mokujiroが情報の階層を定義してページ同士をつなぎました。

Framerの機能を活かす

Framerは強力なツールです。キャンバス上で直接デザインしながら改善を重ねられるので、デザインの工程が大きく速くなりました。

特によく使ったFramerの機能：レイアウト（スタック）、アセットタブ、アクセシビリティ

3Dアニメーション

ブランドアイデンティティの一部として、ヒーローセクションにSpline 3Dで3Dアニメーションを作りました。Splineは.fbxなどさまざまな形式の2D・3Dファイルを読み込んで編集できます。アニメーションはSplineから書き出し、サイトのパフォーマンスに配慮しながらFramerの埋め込みセクションに取り込みました。

アクセシビリティ

AIの革命とIndustry 5.0への移行にともない、インクルーシブなデザインは不可欠になっています。アクセシビリティの要素は、Framerのアクセシビリティ機能（タグ、タブインデックス、ARIAラベル、代替テキスト）を使って実装しました。

スクリーンリーダーが正しく機能することを確かめるため、Chromeのアクセシビリティ検査拡張機能「Lighthouse」と「Wave」を使いました。

学んだこと

Spline 3D、Framer、Midjourney、Notionといった最新のプラットフォームを活用し、成果の質を高めながら作業を効率化しました。最先端のツールと手法を使って、ブランドに一貫し、アクセシブルで、視覚的にも魅力のあるウェブサイトをDesirable Futuresに届けられた、得がたい経験でした。