top of page
デスクトップモニターに表示されたウェブサイトのモックアップ。ウェブサイトは「Harmony Succession Partners」のもので、「We Listen. We Care. We Deliver.」というキャッチフレーズが大きく書かれている。サイトデザインは白と緑を基調とし、シンプルで洗練されたレイアウト。画面下部には、水辺の森と木製の橋が写る美しい空撮画像が配置されている。左上には「LITTLE FUJI DESIGN STUDIO」のロゴがあり、右下には「Wix Partner Creator」のバッジが表示されており、このウェブサイトがWixエディターで作成されたことを示している。

Skill

Role

Software

WEBデザイン
WEBサイト開発（Wixエディタ）
グラフィックデザイン

WEBデザイン
Wixエディタサイト制作
図解デザイン
サイト編集ガイド資料の制作

Wixエディタ
Adobe Photoshop
Figma

ガラスのような光沢を持つ青い3D星型アイコン。滑らかなエッジで、透明な背景に配置されている。
青いグラデーションで表現された3Dのレンチアイコン。光沢のある質感で、透明な背景に浮かんでいる。
青いグラデーションで表現された3Dのユーザーアイコン。丸い頭と半円形の胴体が特徴的で、光沢感がある。

Harmony Succession Partners

Web Design for Harmony Succession Partners

Harmony Succession Partners (HSP)は、カナダ・オンタリオ州を拠点とする独立系のM&Aアドバイザリーファームです。LITTLE FUJIはWix Webデザイナーとして、Wix Editorを使用したWEBサイトのリデザインをご依頼いただきました。Wix Editorを活用して、シンプルで機能的かつプロフェッショナルなWEBデザインと、ブランドに合わせたオリジナルの図解デザインを提供しました。

デスクトップモニターに表示されたウェブサイトのモックアップ。ウェブサイトは「Harmony Succession Partners」のもので、「We Listen. We Care. We Deliver.」というキャッチフレーズが大きく書かれている。サイトデザインは白と緑を基調とし、シンプルで洗練されたレイアウト。画面下部には、水辺の森と木製の橋が写る美しい空撮画像が配置されている。左上には「LITTLE FUJI DESIGN STUDIO」のロゴがあり、右下には「Wix Partner Creator」のバッジが表示されており、このウェブサイトがWixエディターで作成されたことを示している。

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

このプロジェクトの目的は、クライアントが簡単に更新でき、オンライン上の名刺として機能するようなシンプルでもプロフェッショナルな企業WEBサイトを作成することでした。ノーコードツールのWixエディタを活用し、Pro Galleryなどのコンポーネントを用いて、効率的な編集と更新を可能にするサイトを設計しました。またアフターケアとして、サイト編集方法を説明するチュートリアル動画とマニュアル資料も提供しました。

FigmaとWixエディタを使ったWebデザイン

WEBサイトのデザインと開発プロセスを効率化するため、まず Figmaでワイヤーフレームを作成し、Wixエディタでサイトを構築する際のリファレンスとして使用しました。サイトで使用されたすべてのアイコンや画像アセットは Figmaで管理し、ブランドのスタイルガイドに合わせてトンマナや配色を調整しました。WEBサイトに最適なサイズで書き出しした後、整理してメディアアセットとしてクライアントに共有しました。これにより、他のプラットフォームでも利用可能なブランドのデザインアセットとして納品しています。

最終的に、Harmony Succession Partnersのブランディングデザインにあわせたモダンかつ洗練されたコーポレートWEBサイトを提供いたしました。納品後も編集やカスタマイズが高頻度で行われると予測されるパーツについては、編集方法を画面録画とドキュメントでまとめて、WEBサイトの更新ガイドブックとしてあわせて納品しました。

最終的に、Harmony Succession Partnersのブランディングデザインにあわせたモダンかつ洗練されたコーポレートWEBサイトを提供いたしました。納品後も編集やカスタマイズが高頻度で行われると予測されるパーツについては、編集方法を画面録画とドキュメントでまとめて、WEBサイトの更新ガイドブックとしてあわせて納品しました。

FINAL OUTPUTS

Web Design for Harmony Succession Partners

緑豊かな植物を背景に、片手でスマートフォンを持ち、Harmony Succession Partnersのウェブサイトが表示されているモバイルデザインのモックアップ。「We Listen. We Care. We Deliver.」というキャッチフレーズが目立つレイアウトで、シンプルかつ洗練されたデザイン。画面下部には空撮の自然風景が配置されている。右上には「LITTLE FUJI DESIGN STUDIO」のロゴと「Harmony Succession Partners Wix Web Design」のテキストが表示され、このウェブサイトがWixでデザインされたことを示している。
Harmony Succession Partnersのウェブサイトデザインを紹介する、ノートパソコンのモックアップ。ノートパソコンの画面には、「We Listen. We Care. We Deliver.」というキャッチフレーズが表示されたウェブサイトのトップページが映し出されている。下部には、空撮の自然風景画像が配置されている。さらに、ウェブページの「What Makes Us Different?（私たちの強み）」セクションとGoogleマップを含む「お問い合わせ」セクションのデザインが、立体的に浮かび上がるような構成で表現されている。右下には「LITTLE FUJI DESIGN STUDIO」のロゴが配置され、左下には「Wix: Web Design Portfolio」と「Website Design for Harmony Succession Partners」と書かれており、このデザインがWixを使用して作成されたことを示している。
ノートパソコンと5つのウェブページセクションのモックアップ。ノートパソコンの画面には、Harmony Succession Partnersのウェブサイトのトップページが表示され、「We Listen. We Care. We Deliver.」というキャッチフレーズが目立つ。ページ下部には、自然風景の空撮画像が配置されている。

Testimonials: Wixスライドショー

Testimonialsセクションは、Wix Editor のスライドショー機能を使用して設計され、クライアントが必要に応じて簡単にお客様の声を追加および更新できるような設計にしました。

ウェブサイトの証言（Testimonials）セクションのアニメーションGIF。上部には「King City Trailers」のロゴがあり、Kevin Joosten（King City Trailersの元オーナー）のレビューが掲載されている。彼はRobertのコミュニケーション能力と、売却プロセスをスムーズに進めるサポートを高く評価している。 下部には「Rouge River Capital」のロゴがあり、Mark MacTavish & Claude Germain（Rouge River Capital）がThomasの売却プロセスのサポートを評価するレビューが記載されている。クライアントのために的確な情報を提供し、スムーズな取引を実現したと述べられている。 中央にスライダーインジケーターがあり、左と右には緑色の矢印が表示され、他のレビューへ切り替えが可能なデザインとなっている。

Wixエディターのアニメーション

WixのアニメーションはWix Studioだけではなく、Wixエディタでも複数のアニメーション設定が可能です。WEBサイト自体はシンプルなデザインだったため、UXを向上させるために、スクロールに連動したパララックスアニメーションと控えめなフェードイン効果を実装しました。これらのアニメーションは、デスクトップとモバイルの両方のデバイスでリッチで魅力的な体験が得られるよう最適化されています。

ウェブサイトの証言（Testimonials）セクションのアニメーションGIF。上部には「King City Trailers」のロゴがあり、Kevin Joosten（King City Trailersの元オーナー）のレビューが掲載されている。彼はRobertのコミュニケーション能力と、売却プロセスをスムーズに進めるサポートを高く評価している。 下部には「Rouge River Capital」のロゴがあり、Mark MacTavish & Claude Germain（Rouge River Capital）がThomasの売却プロセスのサポートを評価するレビューが記載されている。クライアントのために的確な情報を提供し、スムーズな取引を実現したと述べられている。 中央にスライダーインジケーターがあり、左と右には緑色の矢印が表示され、他のレビューへ切り替えが可能なデザインとなっている。

Testimonials: Wixスライドショー

Testimonialsセクションは、Wix Editor のスライドショー機能を使用して設計され、クライアントが必要に応じて簡単にお客様の声を追加および更新できるような設計にしました。

Wixエディターのアニメーション

WixのアニメーションはWix Studioだけではなく、Wixエディタでも複数のアニメーション設定が可能です。WEBサイト自体はシンプルなデザインだったため、UXを向上させるために、スクロールに連動したパララックスアニメーションと控えめなフェードイン効果を実装しました。これらのアニメーションは、デスクトップとモバイルの両方のデバイスでリッチで魅力的な体験が得られるよう最適化されています。

実績のある業界のアイコン一覧: Wixプロギャラリー

Industry Experienceセクションには複数のアイコンが含まれていたため、Wix Pro Galleryを使用して実装しました。モバイル版では、一度に表示されるアイコンの数を制御するために「Read More」ボタンを追加しました。デスクトップ版では、レイアウトがユーザーのモニターサイズに合わせて自動的に調整されます。さらにギャラリーはメディアマネージャーと連携しているため、アイコンを簡単に並べ替えたり追加したりできます。また、各アイコンにはホバーアニメーションを設定しています。

緑豊かな植物を背景に、片手でスマートフォンを持ち、Harmony Succession Partnersのウェブサイトが表示されているモバイルデザインのモックアップ。「We Listen. We Care. We Deliver.」というキャッチフレーズが目立つレイアウトで、シンプルかつ洗練されたデザイン。画面下部には空撮の自然風景が配置されている。右上には「LITTLE FUJI DESIGN STUDIO」のロゴと「Harmony Succession Partners Wix Web Design」のテキストが表示され、このウェブサイトがWixでデザインされたことを示している。

Web Design for Harmony Succession Partners

bottom of page