スキル
担当範囲
使用ツール
ブランディングデザイン
クリエイティブディレクション
WEBデザイン
WEBサイト開発（Wix Studio）
ブランディングデザイン
ドメイン接続
レスポンシブWEBデザイン
Wixウェブサイト実装
他言語設定（英語/日本語）
Wix Studio
Adobe Photoshop
Adobe XD
Milestone international
Web Design for Milestone
Milestone合同会社は、組織開発やリーダーシップマネジメントをはじめとした企業向けトレーニングを提供する企業です。LITTLE FUJIは、Milestoneが提供する法人向けカスタマイズ研修のプロフェッショナルなサービスをより魅力的に表現し伝えていくために、Wix StudioでのWEBサイトデザインと構築・ブランディングデザインを提案させていただきました。
プロジェクトの概要と目的
Milestoneは、クライアントのニーズに合わせてカスタムメイドの組織開発プログラムを提供する、コンシェルジュスタイルのコンサルタント企業です。LITTLE FUJIは、組織開発スペシャリストのDylanと、プレゼンテーションデザイナーのBrunoと協力し、Milestoneのブランディングデザインの刷新とWEBサイトのリニューアルデザイン・ドメイン接続までをトータルでサポートしました。
Milestoneのプロフェッショナルなコーチングサービスと信念を体現する、ラグジュアリーなWEBデザイン
Milestone合同会社のウェブサイトを設計するにあたって、「Total Commitment to Our Clients」という信念と世界中のロケーションで提供されるプロフェッショナルなコーチングサービス・オーダーメイドのプログラムを伝えるため、ミニマルでありながらラグジュアリーなブランディングデザインを提案しました。
シックな黒をベースの背景に設定し、上品なゴールドをアクセントとして加えることで、ラグジュアリーな印象を演出しています。フォントはクリーンで洗練されたHelveticaのフォントと、ラグジュアリーなセリフ体フォントを組み合わせ、現代的なミニマリズムと高級感を表現しました。
ユーザー体験を向上させるため、Wix Studioのアニメーション機能を使用して、WEBサイト全体に適度にアニメーションを取り入れました。これにはスムーズなスクロールアニメーション、動的なテキストの出現、マウスホバー時のエフェクトなどが含まれており、リッチで魅力的な体験をユーザーに提供しています。
ユーザー体験を向上させるため、Wix Studioのアニメーション機能を使用して、WEBサイト全体に適度にアニメーションを取り入れました。これにはスムーズなスクロールアニメーション、動的なテキストの出現、マウスホバー時のエフェクトなどが含まれており、リッチで魅力的な体験をユーザーに提供しています。
FINAL OUTPUTS
Web Design for Milestone
Wix Studioで作成されたリッチなマウスホバーアニメーション
Milestoneの基本とする3つのアプローチを紹介するセクションでは、マウスホバーアニメーションを取り入れました。ユーザーが各プロセスにカーソルを合わせると、背景がプレミアムゴールドでハイライトされます。このマイクロインタラクションにより、Milestoneの大切にする独自のプロフェッショナルなアプローチを強調し、より印象的になるようデザインしています。
Wix Studio Proギャラリーを使ったループアニメーション
トップのセクションには、Milestoneのクライアントを紹介するロゴのループアニメーションを追加しました。このアニメーションはWix Studio Pro Galleryを使用して実装し、各ロゴはAdobe XDを使用して細部まで丁寧にトリミングすることで、美しいレイアウトになるよう調整されています。
Wix Studioで作成されたリッチなマウスホバーアニメーション
Milestoneの基本とする3つのアプローチを紹介するセクションでは、マウスホバーアニメーションを取り入れました。ユーザーが各プロセスにカーソルを合わせると、背景がプレミアムゴールドでハイライトされます。このマイクロインタラクションにより、Milestoneの大切にする独自のプロフェッショナルなアプローチを強調し、より印象的になるようデザインしています。
Wix Studio Proギャラリーを使ったループアニメーション
トップのセクションには、Milestoneのクライアントを紹介するロゴのループアニメーションを追加しました。このアニメーションはWix Studio Pro Galleryを使用して実装し、各ロゴはAdobe XDを使用して細部まで丁寧にトリミングすることで、美しいレイアウトになるよう調整されています。
マウスホバーによる3Dチルトアニメーション
WEBサイトのアセットの一つとして、パフォーマンスレポートの画像を実装しました。このグラフィックは、プレゼンテーションデザイナーのBrunoによって作成されました。LITTLE FUJIは彼と密に連携し、Milestoneのブランディングデザインが様々なクリエイティブアセットを跨いでも一貫性を保つよう調整しました。デスクトップデバイスでは、マウスホバーによる3Dチルトアニメーションが設定されており、リッチなユーザー体験を提供しています。
Web Design for Milestone
