無料でブラウザ上から本格的な3Dモデリングや書き出しが可能な「VECTARY」を使ってみた！

どうも、まさとらん（@0310lan）です！

今回は、ブラウザだけで誰でも簡単に本格的な3Dモデリングができるサービスをご紹介します！

ゼロから自分の好きな造形物をマウスだけで簡単に作成できるように工夫されており、アクセサリーやキャラクターなどさまざまな用途に合わせたモデリングが可能なスグレモノです。

Webサイトに挿入する3Dコンテンツなどにも利用できるので、ご興味ある方はぜひ参考にしてみてください！

【 VECTARY 】

■「VECTARY」の使い方

それでは、最初に「VECTARY」をどのように使うのかを見ていきましょう！

サイトにアクセスしたら、画面右上にある「Sign up」ボタンをクリックして無料のユーザー登録をします。

「メールアドレス」と「パスワード」だけですぐに登録が完了します。


（※Google、Facebookアカウントでも登録可能です）

すると、自分専用の「ダッシュボード」画面が表示されます！

この画面から新規に3Dモデリングを始めたり、テンプレートから3Dモックアップを作成できます。

また、チュートリアルなどの学習用リソースも充実しているので、ゼロから3Dモデリングを始める人でも扱いやすいでしょう。

■簡単な3Dモデリングに挑戦してみよう！

それでは、早速ですが「VECTARY」の基本的な機能を使いながら3Dモデリングをやってみましょう！

サンプル例として、ここでは簡単な「湯のみ茶碗」のような3Dオブジェクトを作ってみたいと思います。

そこで、まずは「ダッシュボード」から新規作成を選びます。

すると、何も無い空っぽの「3D空間」がエディタに表示されます。

画面左側にある「①オブジェクト」アイコンをクリックして、「②新規オブジェクト」を選択します。

すると「モデリングモード」になるので、基本となるいくつかのオブジェクトを選択しながら作業を進めていきます。

今回は「シリンダー」の形状を使ってみたいと思います！

画面内の好きな箇所にオブジェクトを配置できます。

1度目のクリックでサイズを決定し、2度目のクリックで高さを決めましょう。

今回は、「湯呑み」のような形状にしたいので、天面を選択したあとに「BEVEL」アイコンをクリックして「フチ」を作ります。

さらに、「EXTRUDE」アイコンをクリックして下方向にドラッグすることでコップのような形状を作れます。

GIFにするとこんな感じです！

これで湯呑みのようなオブジェクトが作れましたね！

ただし、このままだとあまりにもデコボコしているので「スムージング機能」をONにしてみましょう！

すると、瞬時にキレイな造形物に変換されます！

簡単ですね！

この「スムージング機能」のおかげで少ない作業数でもリアルな3Dオブジェクトが作れるので、誰でも楽しみながら挑戦できるはずです。

■手描きの3Dモデリングに挑戦してみよう！

今度は、手描きで好きな形状を直接デザインすることができる機能を使ってみましょう！

先ほどは「シリンダー」など、あらかじめ用意されている形状を利用しましたが、そのすぐ隣にあるのが「手描きモード」になります。

フリーハンドで描くこともできますが、上のようなグリッドに沿って描く「LINES」を使ったほうが最初は簡単でしょう。

サンプル例として、「ハート」型の形状を作ってみましょう！

だいたいの形状が作れたら問題ありません。

表面を選択しておいて、「EXTRUDE」機能で上方向にドラッグすることで立体的な造形になります。

あとは、先ほども利用した「スムージング」をONにしてみましょう！

キレイな「ハート型」のオブジェクトが完成！

さらに、粘土細工のようにオブジェクトを伸ばしたり縮めたり、切ったり、曲げたり、別のオブジェクトをくっつけたり…などのような基本的な機能も搭載されています。

まさに、ゼロから自分の好きなオブジェクトを簡単に作れてしまうわけです！

■3Dオブジェクトをカスタマイズしよう！

完成したオブジェクトは、エディターの設定メニューからさまざまなカスタマイズが可能です。

カラーの変更や、質感、透明度、テクスチャの変更など、細かい調整ができるので便利です！

また、画面下の「Materials」を選択すると膨大な数のマテリアルが用意されているのが分かります。

これはクリックするだけで、あらかじめさまざまな用途に合わせた調整済みの設定へすぐに反映させることができます。

例えば、以下のように「木目調」にしてみたり材質を「大理石」に変更したりなども簡単です！

他にも、ライティングの設定や3D空間内の環境設定などもクリックするだけで変更可能です。

■3Dモックアップを作ってみよう！

「VECTARY」には、あらかじめ作り込まれたテンプレートも用意されており、ゼロからモデリングすること無くさまざまなモックアップ画像を簡単に作成できるのでご紹介しておきます！

まず、ダッシュボード上部に表示されているテンプレートの中から、自分の気に入ったモノをクリックします。

すると、テンプレートの編集用エディタが表示されます！

すでにいくつかの3Dオブジェクトが作り込まれているのが分かると思います。

例えば、表示されているオブジェクトを「①クリック」して、「②画像変更」ボタンを選ぶと自分が用意した画像に差し替えることができます。

スマホのスクショなどに差し替えて、アプリ紹介用のWebサイトに使う画像コンテンツとしても利用できるでしょう。

もちろん、すべての3Dオブジェクトは選択・移動・サイズ・回転・変更などが可能で、自分で新しくオブジェクトを作成して組み合わせることも可能です。

また、画面下にある「3D Assets」は、キーワードを入力するだけですぐに利用可能な3Dオブジェクトの候補が大量に表示されます。

気に入ったオブジェクトをクリックするだけで、すぐにエディタ内に配置できるので好きなようにカスタマイズしながら使うことができます。

さらに、「Export」ボタンをクリックすれば、JPG / PNGの画像として書き出すことも可能です！

3Dのメリットを活かして、自分の好きな構図になるように配置を変更しながら画像に書き出せば効率よく活用できるでしょう。

もちろん、3Dファイルとしても書き出すことも可能で「STL / GLB / glTF」などに変換してダウンロードできます。（そのまま3Dプリントも可能）
テンプレートだけでなく、ゼロから自分で作成したオブジェクトも当然ながら同じように書き出すことができるので、3Dゲームのキャラクターなどを作成する用途で利用しても面白いでしょう！

■動画でプログラミングが学べるpaizaラーニングにPython×AI・機械学習入門編が登場！

動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

そしてこのたび、新たに「Python×AI・機械学習入門編」が追加されました。

人気声優の上坂すみれさんによる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。

Python×AI・機械学習入門編は全編無料でごらんいただけます。詳しくはこちら

■まとめ

今回は、ブラウザから3Dモデリングができる「VECTARY」を駆け足でご紹介しました！

シンプルに誰でも扱えるよう設計されていながら、非常に多機能なモデリングツールとしても利用できるサービスです。

公式サイトには初心者に最適なチュートリアルが用意されており、他のユーザーが作成した3Dオブジェクトも公開されているので参考になるでしょう。
https://www.vectary.com/3d-modeling/
https://www.vectary.com/3d-designs/featured/

ぜひ、みなさんも気軽にブラウザから3Dモデリングに挑戦してみてください！

＜参考＞
・「VECTARY」公式サイト

---

　

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

アニメ大好きな新卒エンジニアが選ぶ上坂すみれ（すみぺ）出演作品ベスト10

Photo by Alan Hochberg
喜多です。今年新卒で入社して、paizaラーニングの動画制作などをしています。

先日paizaラーニングに「Python×AI・機械学習入門編」が追加されました。動画講座のナビゲーター・スヴェータ役は、声優の上坂すみれさんに担当していただいています。ヤッター！！

というわけで、今日は僕が上坂さんの出演作品で好きな作品たちを独断と偏見で紹介します。

本当は全作品紹介したいしゲーム作品も紹介したいのですが、仕事放り出して永遠に書いてしまうので無理して10本に絞りました。あくまでも個人の好みによる自分の中のベスト10です（でも「あの作品がないぞ」という人は教えてください！）

king-cr.jp

■戦国コレクション

戦国コレクション Vol.01 [Blu-ray]

史実とは別の戦国世界から現代の世界へと現れた、名前以外は経歴も性別も異なる戦国武将たち。彼女たちにとっての異世界である現代で、一体どうやって生きていくのか？…みたいな、結構異色の異世界系作品です。もとはソシャゲですがアニメ化しています。

戦国コレクションは個人的に超面白いので一番最初に挙げました。

上坂さんは最上義光役です。15話は最上回なので絶対に見てください。

■俺、ツインテールになります

俺、ツインテールになります。Tail:1 [Blu-ray]

ツインテールをこよなく愛する主人公の高校生・観束総二がツインテールの「テイルレッド」に変身して、地球の平和を守るために戦う物語です。

原作のライトノベルは現在15巻まで刊行されていて（すごい）、「第6回小学館ライトノベル大賞審査員特別賞」「ツインテールアワード2015特別賞」と、そうそうたる賞を受賞されています。

上坂さんは主人公・観束総二の変身後の姿、テイルレッド役なので絶対に見てください。

■SHOW BY ROCK!!

SHOW BY ROCK!!# 1(イベントチケット優先販売申込券付き) [Blu-ray]

『SHOW BY ROCK!!』は、サンリオによるバンドがテーマのキャラクタープロジェクトで、アニメ化もしています。サンリオ総選挙では9位でしたね！皆さん投票しましたか？僕はしました！！

「プラズマジカ」というバンド名は聞いたことがある人も多いんじゃないかと思うんですが、上坂さんはプラズマジカのギター＆ボーカル・チュチュ役です。

■波打ち際のむろみさん

波打際のむろみさん1(Blu-ray)

むろみさんはマガジンで読んだことある人も多いと思います。アニメ化もしています。博多弁の人魚が主人公のテンション高いギャグアニメですが面白いので絶対に見てください。

上坂さんは主人公むろみさんのお友達・隅田さん役です。

■ポプテピピック

ポプテピピック vol.1(Blu-ray)

ポプテピは説明が難しいですねぇ…男子高校生の大地くんが女子高生アイドルのマネージャをすることになって…という王道アイドルラブコメです。

上坂さんは、天然でマイペースな先輩・夕陽ころな役です。主人公のそそぐちゃんと大地くんを奪い合う…かもしれません。

ポプテピのクリエイティブチーム・AC部は、上坂すみれさんの楽曲PVも制作されているそうです。
www.youtube.com

■ガールズ＆パンツァー

ガールズ&パンツァー TV&OVA 5.1ch Blu-ray Disc BOX (特装限定版)

女子高生が戦車に乗り、「戦車道」として学校対抗の全国大会で戦うアニメです。映画はこれから5本も公開予定だし、年末にTV&OVA編のBOXは出るし楽しみですね。

戦車と聞くとアクションかなと思うかもしれませんが、キャラの成長・ヒューマンストーリーが軸になっていて、もちろんメカも格好いいので万人にお勧めできる作品です。ガルパンはいいぞ。

上坂さんは、アリクイさんチームのぴよたんとプラウダ高校のノンナ役を担当されています。アリクイさんチームは弱いですが映画版でがんばっています。ノンナは作中でロシア語を喋ったりロシア民謡を歌ったりもします。すごい。上坂さんと言えばロシア（旧ソ連）と戦車ですものね。

■てさぐれ！部活もの すぴんおふ プルプルんシャルムと遊ぼう

てさぐれ！部活もの すぴんおふ プルプルんシャルムと遊ぼう Vol.1【イベントチケット優先販売申込券付】 [Blu-ray]

「新しい部活動のあり方を考えるための部活」てさぐり部の部員たちが、部活ごとのあるあるネタを語り合ったあとで大喜利をする3DCGアニメです。てさプルは第3期になります。

大喜利パートは台本がないため、声優さんの素が露骨に出ている危険で味わい深い作品です。

上坂さんは小此木友美役で出演されていますが、収録スケジュールが合わなくて出演できないことも度々あり、作中でそのことをいじられてます。小此木さんの登場時の挨拶は「Здравствуйте!（ズドラーストヴィチェ！）」です……………これは……………シンパシーを感じますね……………

■中二病でも恋がしたい！

中二病でも恋がしたい! (1) [Blu-ray]

中二病を患っている女子高生と元中二病の男子高校生のラブコメアニメです。ギャグ色強いのかなと思って見始めたけど、ラブのパートもしっかりあってすごく面白いです。

上坂さんは凸守早苗役として出演されています。凸守といえば語尾の「デス！」デスね……………オッ……………これは……………どっかでも聞いたことあるデスね……………

■アイドルマスター シンデレラガールズ

アイドルマスター シンデレラガールズ 1【通常版】 [DVD]

アイマスは超有名アイドル育成シミュレーションゲーム（とそのメディアミックス作品）なのでもう説明する必要ないと思うんですけど、その中でもシンデレラガールズというシリーズで、上坂さんはロシア人の父と日本人の母を持つアナスタシア役を……………これは……………どっかでも聞いたことある設定デスね……………

■paizaラーニングの「Python×AI・機械学習入門編」

動画でプログラミングが学べるpaizaラーニングでは、新たに「Python×AI・機械学習入門編」が追加されました！

上坂すみれさん演じる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています！！

Python×AI・機械学習入門編は全編無料でごらんいただけます。

■おまけ

上坂さんといえばこれが面白すぎて大好きです。
nuwton.com

【Amazon.co.jp限定】ノ―フューチャーバカンス 【初回限定盤Ａ】(オリジナルA4クリアファイル付)

---

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

Web上でJavaScript版Jupyterのような高機能ノートブックを作成できる「Observable」を使ってみた！

どうも、まさとらん（@0310lan）です！

今回は、話題のJupyter Notebookみたいな使い方ができるノートブックを面倒な環境設定不要で、手軽にブラウザ上から無料で作成できるサービスのご紹介です。

マークダウンで文章を書いたりJavaScriptによるコードを実行することが可能で、HTMLを使ったUI部品の挿入やデータの可視化・マッピングなども自由に作成できるのが特徴です。

誰でも簡単に使えるように工夫されており、学習用途や教材作り…ブログのような使い方もできる万能型のノートブックと言えるでしょう。

【 Observable 】

■「Observable」の使い方

それでは、実際に「Observable」を使いながらどのようなサービスなのかを見ていきましょう！

サイトのトップページにアクセスしたら「Try the scratchpad」と書かれたボタンがあります。

このボタンをクリックすれば、ユーザー登録なしですぐにでもノートブックを作成していくことができます。

ただし、このままだと保存ができないので今回は無料のユーザー登録をしてから利用するようにしましょう！

そこで、「Sign up for free」と書かれたボタンをクリックします！

GitHubアカウントと連携するだけで簡単にユーザー登録可能です。

すると自分専用の「ダッシュボード」が表示されます。

あとは、この画面から新規にノートブックを作成したり、チュートリアルなどのリソースを閲覧することができるようになります。

■基本的なノートブックの作り方

早速ですが、「Observable」で簡単なノートブックを作ってみましょう！

ダッシュボード画面の右上に「+ New」ボタンがあるのでクリックします。

すると、空っぽのノートブックが開きます！

基本的な文章の入力方法としては、「md」と記述して「`」と「`」の間にマークダウンで書いていきます。

書いた文章はそのすぐ上に実行結果としてプレビューが表示されます。

また、同じように「html」と記述すれば「HTMLタグ」を使った記述方法も使えます。

普通にHTMLファイルを作成する感覚で記述可能で、スタイルなども同時に編集できるのでカスタマイズも自由自在です。

編集エディタの部分は閉じることも可能で、プレビューだけを表示したノートブックにもなります。（※エディタをピン留めして常に表示させることも可能）

コンテンツは「＋」アイコンをクリックすることで、どんどん下方向へ追加していくことができます。

例えば、一般的なプログラミングでよく使う「変数」を登録してみましょう！

文字列で色情報を「color」という変数名に格納するには次のように記述します。

変数を登録すると左側のスペースに「変数名」が表示されるようになります。

この変数は、ノートブック内のどこからでも利用することが可能です！

「${ }」の中に変数名を記述すれば、マークダウン内やHTMLの属性などにも再利用できるわけです。

同じように「関数」も登録しておけます！

いつでも呼び出せるので、便利な関数をいくつか作って保存しておくといいですね。

もちろん、一般的なJavaScriptコードを記述することも可能です！

さらに、キャンバスを活用すれば大量のデータを使ったグラフやチャートを描画することもできます。

マークダウンと組み合わせれば、ちょっとした資料作りにも応用できるでしょう。

ユニークな点として、JavaScriptのライブラリやNode.jsのモジュールなどを簡単に読み込めるという特徴があります！

例えば、日付操作を簡単にする「moment」モジュールを読み込むには「require()」を使って記述するだけです。

バージョンの指定も可能で、例えばver.2の「moment」を読み込むのであれば「moment@2」と記述すればOKです。

また、以下のようにURLで指定することも可能です！

require('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js')

多種多様に存在するライブラリを利用することで、マッピングや可視化なども簡単にノートブックへ挿入できるのは魅力的です。

アイデア次第で学習用の教材を作成したり、自分用のプログラミングノートを作るのも楽しいし、勉強会などで利用するのも面白いと思います。

このようなマークダウンやHTML・JavaScriptコードが相互に混在したインタラクティブなノートブックを手軽に作れるのが「Observable」の大きな特徴と言えるでしょう。

■ノートブックの読み込み機能を活用しよう！

先ほどは、「Observable」で登録した変数や関数はどこからでも利用できると解説しました。

しかし、実を言うと他のユーザーが作成した「変数・関数」なども利用できる仕組みが用意されているのでご紹介しておきます！

例えば、フォームのUI部品などで使われる「スライダー」を普通にノートブックへ挿入してみます。

おそらく、「HTML」でinputタグを記述するかノートブックで用意されている「DOM」オブジェクトを利用することになります。

これでもいいのですが、他のユーザーが「スライダー」を拡張して多機能なオプションが設定できる関数を以下のノートブックで作成しています。

【 Input部品のノートブック｜@jashkenas/inputs 】

そこで、上記のノートブックに登録されているスライダーの関数を自分のノートブックでも利用できるようにしてみましょう！

方法は簡単で「import」を使って読み込むだけです。

import文に注目してください！

「@jashkenas/inputs」というノートブックの中に登録されている「slider」という関数を読み込むという意味になっています。

この1文を記述するだけで、自分のノートブック内で「slider()」という関数が利用できるようになるわけです。

用意されているオプション設定も自由に利用することができます！

この仕組みを活用すれば、高度な可視化も手軽にノートブックへ挿入して自分なりにカスタマイズするだけで簡単に実現可能です！

このように「Observable」では、独自関数や可視化などさまざまな用途に向けたノートブックが多数公開されているので、これらの資産を上手く組み合わせるだけでも面白いノートブックが作成できます。

また、PCだけでなくスマホのブラウザにも最適化されているので、デバイスを問わずいつでもノートブックを手軽に作って公開できるのは大きなメリットになるでしょう。

■ノートブックを公開してみよう！

ノートブックがある程度完成したら、ネット上へ公開してみましょう！

方法はとてもシンプルで、画面上の「Publish」ボタンをクリックするだけで完了です。

あとは、表示されているURLをシェアすれば友人・知人に見てもらうこともできます。

また、オプションとしてJSONファイルに書き出したり、HTMLとして圧縮ファイルにエクスポートすることも可能です。

「フォーク」も可能なので、既存のノートブックを再利用して新しくカスタマイズするのも簡単です。（他ユーザーのノートブックもフォークできます）

ちなみに、作成したノートブックは自分の「ダッシュボード」から一覧で確認することができ、削除や再編集もこの画面からできます。

■動画でプログラミングが学べるpaizaラーニングにPython×AI・機械学習入門編が登場！

動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

そしてこのたび、新たに「Python×AI・機械学習入門編」が追加されました。

人気声優の上坂すみれさんによる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。

Python×AI・機械学習入門編は全編無料でごらんいただけます。詳しくはこちら

■まとめ

今回は、手軽にブラウザからJupyter風のノートブックを作成できる「Observable」をご紹介しました。

まだベータ版なのですが、紹介しきれないくらいに多機能なノートブックが作れるのが特徴で非常に可能性を感じるサービスだと思います。

データビジュアライゼーションだけでなく、学習や教材などへの活用やブログ的な使い方もできる万能なノートブックです。現在は、すべて無料で使えるのでご興味ある方はぜひ活用してみてください！

＜参考＞

• 「Observable」公式サイト

---

　

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら