Day21です!昨日は「GASでGoogleフォームの投稿をSlackに通知する方法(前編)」についての記事でした。GASでGoogleフォームの投稿をSlackに通知する方法(前編)bageleeの母体eishisでは、WebARサービスを自社で作っています!今回この記事ではそう行った自社のWebARサービスを作るときにデザインや実装で困ったことや気をつけていること、また今後の展望について紹介します!今回の記事でご紹介する、自社のWebARサービスはこちらです。MonsterパートナーのARモンスターでバトルをして、勝ちながら他のモンスターを集めていくゲームです。2019年1月に公開予定です。WebARコマースショッピング中に実際にARを使って、興味がある家具を部屋に配置することができるWebARです。サービス自体のデモや詳しい内容はこちらから体験していただけます。Monster(ウェブモン)」のトップ画面です。カメラ背景の場合、場所によって変わるので明るい場所や暗い場所でもUIが埋没しないような工夫をしています。ウェブモンのUIデザインは主に数々のアプリゲームを参考していますが、個人的に一番困ったのは少し世界観を参考にさせてもらっているデ◯タルモンスターとUIの系統が被らないかというところでした。オリジナリティと良いデザインを真似する比率(中間点)は、どのデザインにおいても難しいと感じています。以下の画像は、家具を配置できるWebARコマースのサンプルサイトです。手軽に家具の配置から決済まで行うことができる実用向けのサービスとなっています。アイコンの色を白に統一して配置も揃えることで、「実際にAR家具と部屋のマッチ度合いをみたい!」というユーザーさんの邪魔にならないようにデザインを気をつけています。Place」、「シマホAR」などの家具を配置できる競合コンテンツです。AR,VR操作に慣れてない層が多いので、アイコンだけだと伝わりづらい。様々なARアプリを試してみた際に困ったのは操作性です。ARコンテンツの普段使いや世間への浸透はまだ薄い分野だと感じているので、出来るだけシンプルに、ユーザーが迷わないデザインをするのが良いかなと考えています。3DCG面で悩んだことWebARで使える3DCGや注意点に関してはこちらの記事でも紹介しているので、詳しいことを知りたい方はこちらをご覧ください。これから始める!3Dモデル制作gltfファイルをブラウザで表示させた時に、Nodeを使ったモデルが表示されないようなので、リアルな質感や表現が出しづらい。ポリゴンがきちんと3角形や4角形に統一されてないとブラウザで映らない。(アニメーションでポリゴンが崩れるような動きがあるとNG)炎などのエフェクトがブラウザで綺麗に表示できない。別々に書き出すことによって、一つのモデルを用意するだけで複数のモーションを読み込むことができそう。→フォルダ容量も軽くすることができ、何より1つのモーションを使い回せるので効率化できます。他のファイル形式で試してみることで、リアルな質感を持ちながらブラウザで表示できるかどうかの調査も進めていきたいです。WebAR自体で悩んだことARアプリと違い、Webカメラでは床認識や壁認識をさせることが難しい。ARマーカーの形が決まっているため独自性を出しづらく、Web上で複雑な画像認識をさせるのが難しい。(ARを出現させるために黒い四角枠が必要なため)ブラウザコンテンツなので、できるだけ容量を小さくする必要がある。→ページの表示速度が遅いとユーザーは見てくれない。これからの展望WebARでの画像認識エイシスでは現在javascriptを使用した画像認識の研究を進めています。顔認識や体の認識ができるようになれば、WebARがARアプリの代わりになれる可能性も感じています。まとめWebARコンテンツを作る上で困ったこと、気づいたこと、そして今後「これが実現できればもっと面白いものが作れるな!」と感じた展望を述べてきました。一個人のデザイナー目線での気づきですので、「もっとこうしたら良いのでは?」「こんな解決方法があるよ!」という方はぜひ教えていただけると助かります。最後に弊社エイシスでこれまで作った制作物のリンクをご紹介します。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。関連記事アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。