top of page

Milestone international

Web Design for Milestone

Milestone合同会社は、組織開発やリーダーシップマネジメントをはじめとした企業向けトレーニングを提供する企業です。LITTLE FUJIは、Milestoneが提供する法人向けカスタマイズ研修のプロフェッショナルなサービスをより魅力的に表現し伝えていくために、Wix StudioでのWEBサイトデザインと構築・ブランディングデザインを提案させていただきました。

「Total Commitment to Our Clients」（顧客に対する全面的なコミットメント）と書かれた文字が特徴的だ。シーンは屋内に設定され、さまざまな電子部品がノートPCと一緒に配置されている。
ガラスのような光沢を持つ青い3D星型アイコン。滑らかなエッジで、透明な背景に配置されている。

スキル

ブランディングデザイン
クリエイティブディレクション
WEBデザイン
WEBサイト開発（Wix Studio）

青いグラデーションで表現された3Dのユーザーアイコン。丸い頭と半円形の胴体が特徴的で、光沢感がある。

担当範囲

ブランディングデザイン
ドメイン接続
レスポンシブWEBデザイン
Wixウェブサイト実装
他言語設定（英語/日本語）

青いグラデーションで表現された3Dのレンチアイコン。光沢のある質感で、透明な背景に浮かんでいる。

使用ツール

Wix Studio
Adobe Photoshop
Adobe XD

「Total Commitment to Our Clients」（顧客に対する全面的なコミットメント）と書かれた文字が特徴的だ。シーンは屋内に設定され、さまざまな電子部品がノートPCと一緒に配置されている。

プロジェクトの概要と目的

Milestoneは、クライアントのニーズに合わせてカスタムメイドの組織開発プログラムを提供する、コンシェルジュスタイルのコンサルタント企業です。LITTLE FUJIは、組織開発スペシャリストのDylanと、プレゼンテーションデザイナーのBrunoと協力し、Milestoneのブランディングデザインの刷新とWEBサイトのリニューアルデザイン・ドメイン接続までをトータルでサポートしました。

Milestoneのプロフェッショナルなコーチングサービスと信念を体現する、ラグジュアリーなWEBデザイン

Milestone合同会社のウェブサイトを設計するにあたって、「Total Commitment to Our Clients」という信念と世界中のロケーションで提供されるプロフェッショナルなコーチングサービス・オーダーメイドのプログラムを伝えるため、ミニマルでありながらラグジュアリーなブランディングデザインを提案しました。

シックな黒をベースの背景に設定し、上品なゴールドをアクセントとして加えることで、ラグジュアリーな印象を演出しています。フォントはクリーンで洗練されたHelveticaのフォントと、ラグジュアリーなセリフ体フォントを組み合わせ、現代的なミニマリズムと高級感を表現しました。

FINAL OUTPUTS

ユーザー体験を向上させるため、Wix Studioのアニメーション機能を使用して、WEBサイト全体に適度にアニメーションを取り入れました。これにはスムーズなスクロールアニメーション、動的なテキストの出現、マウスホバー時のエフェクトなどが含まれており、リッチで魅力的な体験をユーザーに提供しています。

ユーザー体験を向上させるため、Wix Studioのアニメーション機能を使用して、WEBサイト全体に適度にアニメーションを取り入れました。これにはスムーズなスクロールアニメーション、動的なテキストの出現、マウスホバー時のエフェクトなどが含まれており、リッチで魅力的な体験をユーザーに提供しています。

Web Design for Milestone

Wix Studioで作成されたリッチなマウスホバーアニメーション

Milestoneの基本とする3つのアプローチを紹介するセクションでは、マウスホバーアニメーションを取り入れました。ユーザーが各プロセスにカーソルを合わせると、背景がプレミアムゴールドでハイライトされます。このマイクロインタラクションにより、Milestoneの大切にする独自のプロフェッショナルなアプローチを強調し、より印象的になるようデザインしています。

ビジネスコンセプトを紹介する3つのパネル： 人がメモを書く 「偵察」、共同作業を行う 「ハンズオン・インタラクティブ」、ノートパソコンでデータグラフを表示する 「ROIレポート」。

Wix Studio Proギャラリーを使ったループアニメーション

トップのセクションには、Milestoneのクライアントを紹介するロゴのループアニメーションを追加しました。このアニメーションはWix Studio Pro Galleryを使用して実装し、各ロゴはAdobe XDを使用して細部まで丁寧にトリミングすることで、美しいレイアウトになるよう調整されています。

黒い背景に 「Our Success in Action 」というタイトルのテキストが書かれたウェブページが表示され、黒い革張りの椅子の上に置かれたオープンノートPC。
タブレットに表示された世界地図とデータ、そして 「Global On-Site Expertise, Tailored for Every Location 」というテキスト。サービスのインパクトを強調する統計。
スタイラスペンと別のスマートフォンと一緒に展示され、milestoneのwebデザインをアピールするサムスンのギャラクシーS20+端末のモックアップ画像。

Wix Studioで作成されたリッチなマウスホバーアニメーション

Milestoneの基本とする3つのアプローチを紹介するセクションでは、マウスホバーアニメーションを取り入れました。ユーザーが各プロセスにカーソルを合わせると、背景がプレミアムゴールドでハイライトされます。このマイクロインタラクションにより、Milestoneの大切にする独自のプロフェッショナルなアプローチを強調し、より印象的になるようデザインしています。

ビジネスコンセプトを紹介する3つのパネル： 人がメモを書く 「偵察」、共同作業を行う 「ハンズオン・インタラクティブ」、ノートパソコンでデータグラフを表示する 「ROIレポート」。

Wix Studio Proギャラリーを使ったループアニメーション

トップのセクションには、Milestoneのクライアントを紹介するロゴのループアニメーションを追加しました。このアニメーションはWix Studio Pro Galleryを使用して実装し、各ロゴはAdobe XDを使用して細部まで丁寧にトリミングすることで、美しいレイアウトになるよう調整されています。

2024年のパフォーマンス・レポートのパンフレットが、リーダーシップ・トレーニングに関するグラフやデータを視覚化したオープン・レポートとともに紹介されている

マウスホバーによる3Dチルトアニメーション

WEBサイトのアセットの一つとして、パフォーマンスレポートの画像を実装しました。このグラフィックは、プレゼンテーションデザイナーのBrunoによって作成されました。LITTLE FUJIは彼と密に連携し、Milestoneのブランディングデザインが様々なクリエイティブアセットを跨いでも一貫性を保つよう調整しました。デスクトップデバイスでは、マウスホバーによる3Dチルトアニメーションが設定されており、リッチなユーザー体験を提供しています。  

Web Design for Milestone

bottom of page