インタラクティブの依頼・発注・代行

自社のエンジニアはいるがデザイナーを抱えていない、新鮮なアイデアが欲しい、世界のエンターテイメント業界で通用するデザインをとの理由で、アートデレクション、UX・UIデザインをして欲しいというリクエストをよく頂きます。

ウェブサイト、タッチパネル、アプリ、小さい画面から大きな画面まで機能的、論理的、かつシンプルでエレガントなUIデザインいたします。アニメーションのモックアップとしてアフターエフェクトなどを使ってアニマテックスを作成することも出来ます。
ブランディングに基づいたデザイン、写実的なイメージを多用したスタイル、納期が短い案件も得意です。

作業の流れ：
１）UXからですとフローチャートを含めた白黒画面でのUXの提案をいたします。
２）UX リビュー
３）既存（または私が提案する）UXの画面を元に、UIのlook＆Feelのモックアップをいたします。大体メインの３画面程を作成いたします。
４）UIデザインリビュー
５）基本３画面のデザイン承認後、残りのデザイン
５）デザイン修正（必要に応じてヒヤリング・デスカッション後）
６）納品　

Webカメラだけで人の動きをリアルタイムに認識し、
バーチャルキャラクターやUI制御に活用できるモーショントラッキングシステムを構築いたします。
センサーや特殊機器は一切不要、PCとカメラがあればすぐに使えます。

MediaPipe（Pose／Hands／Holistic／FaceMesh）を使用
UnityやThree.jsでのリアルタイムアバター連携に対応
PythonやJavaScriptベースの軽量プロトタイプも制作可能※オプション対応
使用目的（配信、教育、イベント、展示、エンタメ）に応じた最適化

▼こんな方へオススメ

VTuberやバーチャルキャラを“自分の動き”で操作したい方
教育・展示・イベントで動きに反応するコンテンツを作りたい方
ジェスチャー操作でUIやデバイスを制御したい方
センサーを使わず、安価に動きを取得したい開発者・研究者の方
AIや身体動作に関するデモや検証用システムを開発したい方

▼ご提供内容

Webカメラ入力によるモーショントラッキングシステム構築
Unity／Three.js／Pythonでの可視化・操作UI連携
VRMなどの3Dアバターとの同期処理
簡単に再利用できるソースコードと解説
デモ動画（希望者）・マニュアル付き納品
ご相談に応じた用途別カスタマイズ

▼ご購入後の流れ

ご相談・ヒアリング（Zoom or チャット）
要件整理・機能提案
確認後、制作開始
中間レビュー（必要に応じて）
動作確認用デモ提出
修正・仕上げ
納品・動作マニュアル添付
納品後の軽微な調整対応（プランに応じて）

▼制作可能なジャンル

VTuber配信／動くアバター制作
体験型展示／商業施設イベントシステム
教育向けフィジカル体験ツール
スポーツフォーム分析用可視化
リモートワーク支援ツール（ジェスチャーUI）
シニア向け体操支援アプリ（非接触操作）

▼画像・素材など

アバター／背景／UI素材が必要な場合はご相談ください
素材がない場合、シンプルなデモ用素材をこちらでご用意可能です
ロゴやキャラクターをご提供いただければ別途有償にて組み込み可能です

▼公開・再利用・著作権

ご提供するソースコードは商用利用・改変可能です（プランに応じて）
デモ・成果物の公開許可がある場合、ポートフォリオとして使用させていただくことがあります（事前確認あり）

※ お急ぎ対応・分割納品・プロトタイプ希望など柔軟に対応いたします
お気軽にお問い合わせください

Web制作会社の方、デザイナーの方、個人の方、オーダーメイドのWeb演出が欲しい方の、

• ちょっと賑やかしやオカズがほしい
• このデザインを動かしてほしい
• あのWebサイトみたいな感じにしたい
• もっと他と差別化したい

をWebGL/SVG/Canvas/JSで解決します。

▼サンプルはこちら▼
https://www.lancers.jp/profile/marusoft/portfolio_popup/658919
https://www.lancers.jp/profile/marusoft/portfolio_popup/658920

▼デモはこちら▼
https://akira-hayasaka.github.io/demo_bg_01_noise/
https://akira-hayasaka.github.io/demo_bg_02_scroll/

▼他にもこんなこともできます。ご相談ください▼
https://www.lancers.jp/profile/marusoft/portfolio_popup/658914
https://www.lancers.jp/profile/marusoft/portfolio_popup/658915
https://www.lancers.jp/profile/marusoft/portfolio_popup/658913
https://akira-hayasaka.github.io/demo_loading_opening_01_stroke/
https://akira-hayasaka.github.io/demo_loading_opening_02_pop/
https://akira-hayasaka.github.io/demo_loading_opening_03_rush/

▼納品物の形式について▼
静的サイト・動的サイト・ECパッケージなど、様々なインストール環境を想定しています。ソースコードそのままのお渡しや、トランスパイル・ミニファイ済みの設置するだけのバンドルなど、柔軟に対応いたします。

HTML5やD3.js等を用いて、webモーショングラフィックスを作成します。動きは任意とするだけでなく、クライアント様がご用意されるデータに基づくものとすることも可能です。インタラクティブなコンテンツがご希望の場合は、Javascriptを利用してユーザーの挙動に連動したコンテンツの表示を実現します。

初めましてご連絡させていただきます。
映像制作に関しまして登録をしておりますwharfs flowのKenと申します。

本業は東京の映像制作会社に勤務しておりまして、こちらでは副業で活動しております。
動画の撮影、編集に関して7年程の実績を積んでおりまして、4名で制作チームを構成しています。

撮影機材：camera/FX3、α7S II、α6500、RX0、ドローン（DJI MAVICⅡ）
　　　　　※各種音声・照明機材有り
　　　　　※CMの場合はシネマカメラを使用
編集機材：AdobePremierPro、AfterEfects
　　　　　※CMの場合はポストプロダクションスタジオで仕上げ

今回のご提案について、希望金額を入力させていただきましたが、
もしご予算にそぐわない様であれば、おっしゃって頂ければ調整させていただきます。

以下にて私の実績をお送りさせて頂きます。
■NINJA Acupuncturist
　https://youtu.be/fnBoLm18cF0
■Spread SMILES
　https://youtu.be/May6xEb5MBA
■Concept movie | beauty parlour
　https://youtu.be/6YwZ7lRrdkE
■teaser｜VOLVO
　https://youtu.be/FOId6yrbPuQ
■Kitchen renovation
　https://youtu.be/D_dqAVnvulw
■Tsukki legends
　https://youtu.be/XiPkvkmPc2A
■Architectural design | GMO
　https://youtu.be/a6rdNYDYM2g
■Aquairium in OKINWA-KERAMA
　https://youtu.be/JWhOR2sQ9v8
■Feel the World
　https://youtu.be/6lbpcZQEhoM
■Artist from Ainu
　https://youtu.be/yPhe6oYlCqo
■Over The Line
　https://youtu.be/sbslTVWHCkY
■Dancer | ANJU
　https://youtu.be/5LEE2x7mNC4
■documentary | fishing
　https://youtu.be/gMfpbju8KgQ
■Brand movie | business consultant
　https://youtu.be/Hqu6rzd8XEc

もしご一緒させて頂くことが出来るようであれば、
誠心誠意取り組ませていただきます。

何卒ご検討の程宜しくお願いいたします。

動きがあって訴求力があり「ワクワクできるデザイン」でShopify構築いたします。

スマホでサイトを見た際に、順々に一文字ずつ動きのあるタイトルが表示されたり、
画像が横から差し込まれたり、モダンなウェブは日進月歩で「動きの形」が変わり続けています。
最先端な技術を御社のページ用にご提案させていただけませんか？

アニメーションは適切な箇所に適切な動きのあるアニメーションを設置する必要があります。ピンポイントに意図した箇所へのPRには訴求力が大きく目に留まります。少しでもWebサイト上で「訴求力」を改善したい方はぜひご検討いただきたいです。

過去の経験として、Webアニメーションツールの「AdobeのFlash」を10年程利用していました。「動きのあるWebパーツ」には経験や実績がございます。時代が変わりFlashは廃れ、今はSVGアニメーションやWebGLといった技術を利用した「動き」を切り替えることが、他社と差をつけることができる武器になります。

例えばGoタクシー( https://go.mo-t.com/ )の様なインタラクティブなサイト作成を行います。
こういったアニメーションは「SVG」やJavascriptを連動させて作成されているので、
プログラムとデザインの両方のスキルが必要となりますが、こちらのスキルをご購入いただければ
ワンショップで制作しますので、認識のズレによる遅延なくスムーズにデザインを反映する
ことが可能です。

クライアント様のご意見のヒアリングを大切にして、
お客様によりそった「適切な箇所への適切なアニメーション」を作成します。

ぜひご検討お願いいたします！

ご相談は無料で対応させていただきますので気軽にご連絡ください。

▼こんな方へオススメ

• データ分析の結果を視覚的に表現したい企業や個人
• インタラクティブなダッシュボードでデータを共有・活用したい方
• Streamlitを活用して迅速にダッシュボードを構築したい方

▼ご提供内容

• 生成AIを活用したデータ可視化ダッシュボードの設計・開発
• Streamlitを用いたインタラクティブなユーザーインターフェースの構築
• データソースの統合およびリアルタイムデータ更新機能の実装
• カスタムグラフ・チャートの作成
• ユーザーアクセス管理機能の導入（オプション）

▼ご購入後の流れ

• ご購入後、まずはヒアリングを行い、必要なデータや機能を確認します。
• ダッシュボードの設計図を作成し、ご確認いただきます。
• 開発を開始し、進捗状況を定期的に報告します。
• 完成後、納品前に最終確認を行い、必要に応じて修正を行います。
• 納品後のサポートもオプションで提供可能です。

▼制作可能なジャンル

• ビジネスインテリジェンス
• マーケティング分析
• 財務データ分析
• 営業パフォーマンス管理
• 教育データ分析

▼料金プランやオプション

• ベーシック: 基本的なダッシュボード構築（30,000円）
• スタンダード: 複数データソース統合とインタラクティブ機能追加（60,000円）
• プレミアム: 高度なデータ分析機能とリアルタイム更新（100,000円）
• オプション: リアルタイムデータ更新機能追加（20,000円）、カスタムグラフ作成（15,000円）、ユーザーアクセス管理機能（25,000円）

▼納期

• ベーシック: 7日
• スタンダード: 14日
• プレミアム: 21日