職業人講話

株式会社マメルリハ

About me

井上 健太郎（いのうえ けんたろう）

所属：株式会社マメルリハ

職業：代表取締役、システムエンジニア

血液型：O型

マイブーム：娘、筋トレ

好きなサービス：Googleフォト

前職：土木現場監督　

About me

明間 ゆり（あけま ゆり）

所属：株式会社マメルリハ

職業：プログラマー

血液型：A型

マイブーム：ハムスター、星のカービィ

好きなサービス：Amazon Kindle

前職：歯科助手、テレアポインター

時間割

１限目：IT業界の仕事

• WEBデザイナーの仕事

• PG（プログラマー）の仕事

• SE（システムエンジニア）の仕事

• IT業界の働き方の種類

WEBデザイナーの仕事

皆さんは、Webデザインを勉強しているので、

Webデザイナーがどんな仕事をしているか

検討がつくと思います。
なので、ここではWeb製作のワークフローに

ついてお話します。

ワークフローというのは作業の順番という意味です。

Web製作のワークフロー

１）お客様と打ち合わせをして、要望を聞く

要望を聞くときは、どんなものが欲しいか聞くよりも、いくつか候補を提案する方がよりスムーズに話が進みます。

例えば、「どんなホームページを作りたいですか？」と聞くより、サンプル等を見せながら「AとBどちらがイメージに近いですか？」と聞くと良いです。

Web製作のワークフロー

２）サイトマップを作成する

サイトマップとサイトに載せるコンテンツを決めます。スマートフォン対応をする場合は階層構造は避けた方が良いです。

1.トップページ
2.ツアー紹介
3.アクセス
4.ギャラリー
5.コンタクト

コンテンツ例

サイトマップ例

Web製作のワークフロー

３）プロトタイプの作成

スマートフォンが普及し、デザインカンプを見ただけでは実物のイメージがわかなかったり、操作しやすいか分からない、という問題がでてきました。

そこで、「Adobe XD（エックスディー）」を使ってプロトタイプを作ります。

次ページに

XD サンプル

があります。

Web製作のワークフロー

Adobe XD サンプルURL

【XD】佐野医院 

https://xd.adobe.com/view/483b57a1-6830-4b1d-a726-7ced3420e204/?fullscreen

【HP】佐野医院
https://www.sanoiin.com/

【XD】株式会社カスタム 

https://xd.adobe.com/view/9a437db9-3af4-4711-7ed3-e3b6d6a7d982-ec72/?fullscreen

【HP】株式会社カスタム
http://ayh.pupu.jp/custom21/

Web製作のワークフロー

４）デザインカンプを作成する

デザインカンプとはPhotoshopのファイルでつくられる「デザインの完成見本図」のことです。

２限目で詳しく解説します。

PC用とスマートフォン用の２つのデザインカンプを作成します。文章、フォント、文字サイズ、カラー、Width、Height などもここで全て決めます。

Web製作のワークフロー

５）デザインカンプを参考にコーディングをする

デザインカンプの見た目をそのまま再現するよう
html、css、php、WordPress等をつかって
コーディングします。フォント、文字サイズ、カラー、Width、Height等は、デザインカンプで定義している値をそのまま使用します。
入力されている文言も、見ながら手打ちをせずに文字をコピー＆ペーストして使用します。

Web製作のワークフロー

６）デバッグを行う（一番重要）

デバッグというのは、動作確認のことです。テストとも言います。htmlでバグが多いのは、リンクです。ヘッダーにリンクボタンが５つある場合は「５つのボタン」×「５画面分」のページ遷移テストを必ず行います。エビデンス（証跡）も残します。
メールアドレスのリンクや、電話番号のリンクも見えている文字と、クリック後に表示されるものが一致しているか必ず確認します。

文末のコピぺ漏れや、文字を選択した状態で「Enter」を押すと文字が消えてしまうので、そういった誤操作で文章が変わっていないかを確認します。

Web製作のワークフロー

７）納品

レンタルサーバーに設置します。これを「リリース」または「デプロイ」と言います。
必要に応じて独自ドメイン等の設定も行います。
私が良く使うWebサーバーは、ロリポップとMixHost（ミックスホスト）です。
配置する前にソースのバックアップを必ずとります。バックアップは、作成したファイルを複製し「ファイル名_リリース日」を入れてサーバー上に設置します。

PG（プログラマー）と

SE（システムエンジニア）の仕事

プログラマーやSEってよく聞くけど

何をしているか分からないですよね。

これからプログラマーやSEが

どんな事をしているか説明します。

PG（プログラマー）の仕事

プログラマーは、Webシステム（Web開発）やスマホアプリ（スマホアプリ開発）を作る仕事です。

Photoshopのソフトを作るプログラマー（パッケージ開発）や、炊飯器の制御を作るプログラマー（組み込み開発）もいます。プログラマーという意味では一緒ですが、必要な技術は異なります。

私が、詳しいのは「Webシステム」を作るプログラマーなのでそちらについて説明します。
「Webシステム」は皆さんが作る「Webサイト」と少し似ています。

https://travel.rakuten.co.jp/

Webシステムの例：楽天トラベル

PG（プログラマー）の仕事

画面に文字を入力して「検索」ボタンを押したら入力した文字と一致するデータをずらーっと画面に表示したりするものを「Webシステム」といいます。

PG（プログラマー）の仕事

「Webシステム」を作るために必要な知識は３つです。
「html」「データベース」「プログラム」です。
「html」は、ご存じの通り、画面に文字を表示します。
「データベース」は、データをいーっぱい蓄積できるソフトのようなものです。

赤枠は検索の「SQL」文です。

データベースからデータを

検索したり、登録、更新、削除を

するのには、「SQL」というものでで命令を書きます。

PG（プログラマー）の仕事

「プログラム」は「html」と「データベース」の橋渡し役です。「html」でテキストを入力して「検索」ボタンを押したら、「プログラム」で「SQL」文を作成してデータベースにデータを探しに行き、検索結果を「プログラム」からhtmlに渡すのが「Webシステム」の基本動作です。

html、css

プログラム

データベース

SE（システムエンジニア）の仕事

主にシステムエンジニアはプログラミングの設計を任される人です。

プログラムを文章で表す「基本設計書」「詳細設計書」や画面を図で表す「画面設計書」と呼ばれるものをExcelを使用して作ります。

ExcelでなくWordの時もありますが、「設計書」と呼ばれるものは経験上Excelで作成することが多いです。

システムエンジニアが作った設計書を見てプログラマー達がシステムを作り上げます。

SE（システムエンジニア）の仕事

SEが行うプログラムの設計では
１．プログラミング言語は何を使うか
２．データベースは何を使うか
３．開発環境は何を使うか
４．推奨ブラウザは何にするか
５．画面のデザインはどうするか
６．ボタンの動作をどうするか
７．エラーの時のメッセージは何を表示するか

上記以外にも、Webシステムに関わる全ての物を決めます。スケジュールや、作るのに必要な日数や人数の計算も行い必要であればSEもプログラミングを行います。

プログラマーが技術を極めてSEになることが多いですが、プログラミングする機会が減るので、プログラマーのままでいる人も多いです。

SE（システムエンジニア）の仕事

画面設計書の例です。Excelで線を引いたり、色を付けています。

SE（システムエンジニア）の仕事

データベースの設計書の例です。こちらもExcelで書かれています。

IT業界の働き方の種類

（SIer、SES、フリーランス）

IT業界は様々な働き方があります。

代表的な3種について説明したいと思います。

IT業界の働き方の種類（SIer エスアイアー）

SIerは、お客様の要求を受け、ITシステムの企画、構築、運用を行います。日本のSIerの場合、1社で全ての作業を行うことはまれで、規模が大きい会社が受注した仕事を、
複数の小〜中規模の会社が協力して遂行します。
SIerと呼ばれる会社は大手の会社が多いです。

大手SIer会社名：

NTTデータ、日立製作所系(日立ソリューションズ、日立システムズ)、NEC系(NECソフト、NECシステムテクノロジー、NECネクサソリューションズ)、日本IBM系(日本ビジネスコンピュータ)等

IT業界の働き方の種類（SES エス・イー・エス）

SESはSystem Engineering Serviceの略です。SESは「ITエンジニア専門の派遣」です。
普通の「派遣」とは違い、「正社員」で雇用され、大手SIer等に配属されます。これが良く言われる「客先常駐」というものです。IT系求人で「未経験歓迎」「社内研修あり」と書かれているものは「SES」形態が多いです。

SES形態の会社は、人を配属してSIer等からお金を貰い、それを社員の給料にします。ということは「人が多いほど会社の売り上げが伸びる」ので未経験でも構わないから、人材が欲しいのです。配属先のことを「現場」と呼びます。

同じ現場で5年働く人もいれば、１～２年で現場を切り替える人もいます。転職しなくても職場を切り替え変えられることはSESの魅力だとも言えます。

IT業界の働き方の種類（フリーランス）

フリーランスとは、会社に所属せずにSESをする人を言います。フリーランスのメリットはSIerからもらうお金をすべて自分の物にできます。設計からプログラミングをこなすエンジニアの相場は１ヶ月65万円くらいです。
この相場のことを「単価」と呼びますが、フリーランスは単価の金額がまるまる自分の給料になります。
その代わり、年金・社会保険・確定申告等の各種手続きは、すべて自身で手続きする必要があります。

フリーランスは会社に所属していないので、現場に入るためには高いスキルが必要です。知り合いのフリーランスの人は、住宅ローンに落ちてしまったので一度SESの会社に勤めてローンの審査を通して、またフリーランスに転向しました。なのでクレジットカードを作ったり、家を借りたり、ローンを組む予定のある人は注意が必要です。

２限目

• デザインカンプとは
• プログラミング言語と開発ツールの種類
• IT業界で良く使われるソフト
• コピペ用メモを残す習慣をつけよう
• 今日から使える小技

知っていて損はないIT技術の知識

デザインカンプとは

これからデザインカンプの実物をお見せします。

URL:G8富士カントリークラブ

http://www.g8fuji-cc.sakura.ne.jp/

デザインカンプは「デザインの完成見本図」です。「カンプ」や「モックアップ」とも呼ばれます。文章、フォント、文字サイズ、カラー、Width、Height等もここで全て決めます。

デザインカンプとは

このデザインカンプでは、レイヤーの構成がヘッダー、メイン、フッダーでフォルダ分けしています。
手間がかかりますが、レイヤーに部品の名前が入っていると他の人が見たときに一目でどの部品か分かるという利点があります。

「フォルダー」マークからフォルダを作成できます。

デザインカンプとは

青い線は「ガイド線」です。最大幅は「1920-0」で「1920px」メインコンテンツの幅は、「1450-450」で
「1000」だと分かります。定規の１マスは「10px」なのでメインコンテンツには「margin: 0 10px 0 10px; 」が必要だということも分かるのです。

デザインカンプとは

「ガイド線」使い方はPhotoshop上部の「表示」から「定規」を表示します。
「定規」部分をクリックしまたまドラッグをすると「ガイド線」を設定できます。

デザインカンプとは

「ガイド線」があると便利なことはもう一つあります。
気に抜きツールの中の「スライスツール」というものがあります。

スライスツールを選択して、オプションバーの「ガイドに沿ってスライス」を
すると、「ガイド線」から「スライス」を作成することができます。

デザインカンプとは

作成したスライスは、上部メニュー「ファイル」＞「書き出し」＞「Web用に保存」ファイル保存の画面でフォーマット「HTMLと画像」に選択します。

デザインカンプとは

生成されたhtmlファイルを選択するとPhotoshopで書いたものが「html」として表示されます。
「Ctrl＋U」でページのソースを見ることができます。
画像の無駄な部分が入ってしまったりするのでそういったところは削ったりリンクは自分で入れたりする必要がありますが、「デザインカンプ」をしっかり作る技術を身に着ければ「html」のコーディングはさらに早くなります。

また人が見て分かりやすいデザインカンプを作る能力や、
デザインカンプを見て再現する能力があると、Webデザイナーとして重宝されると思います。

プログラミング言語と開発ツールの種類（PHP）

プログラミング言語と開発ツールの種類（JAVA）

プログラミング言語と開発ツールの種類（C#）

IT業界で良く使われるソフト

Excel（エクセル）

プログラムの設計書の他、勤務表、経歴書、進捗管理（しんちょくかんり）とにかく色々な物に使われます。

システムの操作マニュアル、会議の議事録などワードで書かれることが多いです。

Word（ワード）

Slack（スラック）

会社内での連絡で使います。chatwork（チャットワーク）や、Skype（スカイプ）を使うこともあります。

IT業界で良く使われるソフト

WinMerge（ウィンマージ）

二つのファイルを比較して差分を見るソフトです。

プログラムの変更前・変更後をチェックしたりできます。

IT業界で良く使われるソフト

sourcetree（ソースツリー）

ソースのバックアップを作成できるソフトです。

使用するにはGitの知識が必要です。

IT業界で良く使われるソフト

サクラエディタ

高性能のメモ帳ソフトです。プログラマはよく使うソフトです。

コピペ用メモを残す習慣をつけよう

コーディングやプログラミングで、一度書いた物を

再度手打ちするのは、非効率だったり

手打ちだとバグの原因になります。

そこでコピペ用のメモを作る事をお勧めします。

線で区切りどんどん下に追加していきます。

ソース以外にもメールを書く前の下書きや気に入ったURL、今日やることをどんどん蓄積します。

今日から使える小技（ユーザー辞書）

よく使うタグ等を辞書登録しておくとコーディングがスムーズになります。

今日から使える小技（切り取り＆スケッチ）

「Shift ＋ Win ＋ S 」を３つ同時に押してみてください

画面キャプチャーモードになります。

今日から使える小技（切り取り＆スケッチ）

切り取った後に通知をクリックすると編集モードが開きます。

トリミングをしたり、ペンで印をつけることができます。

今日から使える小技（矩形選択 くけいせんたく）

「Alt」キーを押しながら下にドラッグすると矩形選択ができます。

活用方法は以下の参考URLを見てみてください

https://www.ameamelog.com/dreamweaver-technic/

３限目

• デザインに役立つ原理・原則
• デザインの基本原則−近接−
• デザインの基本原則−整列−
• デザインの基本原則−反復−
• デザインの基本原則−コントラスト−
• 各種法則について

Webにおけるデザイン性について

デザインに役立つ原理・原則

人間の知覚・認知の特徴に基づいた原理・原則を活用し、分かりやすいWebサイトのデザインをお教えします。
見た目の美しいデザインが使いやすいデザインとは限りません。
美しさと使いやすさを両立させるためには人間の知覚を利用したデザイン設計が必要です。

限られた画面領域や操作時間で効率的に情報を伝えるには、情報を整理して理解しやすい形にします。

次ページで表示する画面で、左の画像と右の画像どちらが見やすいサイトかパッとみて判断してみてください。

デザインに役立つ原理・原則

右の画像の方が方が見やすかったのではないでしょうか？
違いがわかっても、いざ作ろうとすると難しいですよね。
見やすい理由について詳しく説明していきます。

デザインの基本原則　−近接−

人は距離が近い情報を「関係があるもの」と認識する習性があります。例えば、一定の距離を空けて男女が歩いていてもカップルとは思いませんが、寄り添って歩いているだけでカップルに見えます。

情報も同じで距離が違いものが同じまとまりであると直感的に感じます。

つまり、関連している情報は、距離を近づけてグループ化することで情報を整理することができます。関係しない情報は遠ざけます。

このようなレイアウトの原則を「近接」といいます。

デザインの基本原則　−近接−

グループの間隔に余白が無い場合

デザインの基本原則　−近接−

グループの間隔に余白がある場合

デザインの基本原則　−近接−

こちらは、「詳細・予約」ボタンは

上の要素のものか下の要素の物か分かりずらいです。

デザインの基本原則　−近接−

修正前

修正後

「詳細・予約」の位置をレストランの情報に近接させ、ひとつのまとまりにさせます。

そうすると、ボタンの幅も増やすこともできます。

写真やレストランの情報に集中できるようにボタンの主張を控えます。

ユーザーがより欲しい情報を目立たせるようにデザインが変更されました。

デザインの基本原則　−整列−

情報を左揃え、中央揃え、あるいは右揃えというように要素を整列、配置します。このレイアウトの原則を「整列」といいます。ページ全体が整列されていることで、スムーズな視線移動と統一感を生み出し、強調させたい情報がより際立ちます。

デザインの基本原則　−整列−

左揃えです。人の視線は左から右へ移動するため、左揃えは最も多く使われます。複数行にわたる文章やリストに最適な揃え方です。

デザインの基本原則　−整列−

中央寄せです。タイトルなどの印象付けたい文章で用いられることが多いです。左右対称になることで、安定したまとまりのあるレイアウトになります。
複数行の文章に使うと視線が不規則になり、読みづらいので注意が必要です。

デザインの基本原則　−整列−

右揃えです。人の視線は、「左から右」「上から下」へ

移動するため、情報の最終地点で押してほしいボタンを置くようなレイアウトに用いられます。

デザインの基本原則　−反復−

情報の反復を行うことによって全体に一貫性や安定感が生まれます。デザインで一貫性を与え反復するには、同じデザインの要素やグループを繰り返します。太字・線・色・アイコン・間隔・レイアウトなど様々なものを繰り返して使うと、全体に一貫性や安定感が生まれます。反復することによりユーザーはパターンを予期できるため、情報を認識しやすくすることができます。

次ページで表示するネットショップでは「タイトル」「写真」「値段」などの要素を「等間隔」で繰り返しています。要素を反復することによって一貫性や安定感が生まれ、ユーザーは写真や値段の位置を予期しながら商品を探すことができます。

デザインの基本原則　−反復−

自転車の向きも同じ向きで反復しています。

デザインの基本原則　−反復−

写真の構図が違うと統一感が無くなります。

デザインの基本原則　−反復−

Webサイト全体で反復することが大事です。

メニューやボタンなどWebサイト全体を通してデザインや位置を反復します。それによって例えページをまたいでも一貫性が保たれ、ユーザーは共通性を見いだすことができます。2ページ、3ページと繰り返していくとWebサイトのルールがはっきりし、自然に使い方を理解することができます。メニューのデザインや位置が反復されていないと、

「他のページに遷移した」とユーザーに誤解を与えてしまいます。

メニューの中で選択している箇所がどこか分からないとリンクが遷移したかわかりにくくなるため、メニューのアクティブデザインは入れたほうが良いです。

デザインの基本原則　−反復−

ナビゲーションの反復

タイトルの反復

デザインの基本原則　−コントラスト−

情報に強弱をつけるコントラストは、フォント・線の太さ・色・形・サイズ・余白などの要素の視覚的な差のことです。

要素に強弱を付けることによって理解しやすい情報に整理することができます

次ページで「見出し」と「本文」にコントラスト（色のコントラストではなくメリハリという意味でのコントラスト）がない文章とある文章を比べてみます。

デザインの基本原則　−コントラスト−

「見出し」と「本文」の文字サイズが同じ文章です。

デザインの基本原則　−コントラスト−

「見出し」と「本文」の文字サイズを変えた文章です。

デザインの基本原則　−コントラスト−

「見出しを大きく」「本文を小さく」コントラストを付けることで、ユーザーが読む順番を自然と理解できるようにデザインされています。そのため、1枚目よりも２枚目の方が読みやすく感じるのです。

中途半端な強弱では伝わりづらく、違う要素として見えてしまうことがあります。
あまり違いのないフォントのサイズや色などで差をつけるのではなく、明確に大きさ等を変えてコントラストを付けることがポイントです。

各種法則について　-ミラーの法則-

人間が短期記憶できる量には限りがあることを踏まえ、
情報を覚えやすい設計にしましょう。短期的に記憶できる量には限りがある人間は、情報をいくつかの「かたまり（チャンク）」にして記憶しています。

上はスペースで区切っていません。

下はスペースで区切っています。

これだけで見やすさが変わるのです。

各種法則について　-ヒックの法則-

ヒックの法則は、「選択肢の数が多いほど、ユーザーの意思決定に要する時間が長くなる」という法則です。
選択肢や機能を減らすことで、素早く物事を判断することができます。

このように情報が多い場合でも、「料理のカテゴリ」「具体的な食材」の２段階の段階的に選択肢を分けることでユーザーか簡単に意思決定しやすいように工夫しています。

各種法則について　-フィッツの法則-

「対象に移動するために必要な時間」と「対象までの距離や対象の大きさ」の関係を表すのがフィッツの法則です。

面積が大きいボタンや、画面の端にあるボタンはほど素早くクリックできます。

勢いよくマウスを画面の端に向かって動かしても、通り過ぎることなく目的の対象物を素早くクリックすることができます。

4限目

• VRとは
• VRの歴史
• 商品例
• 実用例
• 実演

VR体験

VRとは？

バーチャル・リアリティ（英: virtual reality）とは、現物・実物（オリジナル）ではないが機能としての本質は同じであるような環境を、ユーザの五感を含む感覚を刺激することにより理工学的に作り出す技術およびその体系。略語としてVRとも。

日本語では「人工現実感」あるいは「仮想現実」と訳される（#「仮想現実」という訳語について）。

古くは小説や絵画、演劇やテレビなども、程度の差こそあれVRとしての機能を有している。

概要
バーチャル・リアリティは、コンピュータによって作り出された世界である人工環境・サイバースペースを現実として知覚させる技術である。時空を超える環境技術であり、人類の認知を拡張する。

コンピュータグラフィックスなどを利用してユーザに提示するものと、現実の世界を取得し、これをオフラインで記録するか、オンラインでユーザに提示するものとに大別される。後者は、ユーザが遠隔地にいる場合、空間共有が必要となり、テレイグジスタンス (Telexistence) 、テレプレゼンス (Telepresence)、テレイマージョン (Teleimmersion) と呼ばれる。

ユーザーが直接知覚できる現実世界の対象物に対して、コンピュータがさらに情報を付加・提示するような場合には、拡張現実 (Augmented reality) や複合現実 (Mixed reality) と呼ばれる。

現実と区別できないほど進化した状態を表す概念として、シミュレーテッド・リアリティ(Simulated reality) やアーティフィシャル・リアリティ (Artificial reality) があるが、これはSFや文学などの中で用いられる用語である。（wiki参照）

VRとは？

ゲームだけではないVRの世界

・土木建築

・医療

・教育

・芸術

・製造業

・エンターテインメント

・もう一つの世界

VRの歴史

VRの歴史は30年ほどあります。

▼第一世代VRブーム

1987年 VPLリサーチ社手袋型の入力装置発売

1989年 サンフランシスコ展示会　初めてVRが世間に登場する

1992年　ICAT（世界初のVR世界会議）

1995年　科研費重点領域研究「人工現実感」発足

1996年　東京大学IML　五面大型スクリーン「CABIN」

▼第二世代　VRブーム

2014年　Facebook社がオキュラス社を買収

2015年　PS4　VR発売

2016年　ポケモンGo　サービス開始

2018年　東京大学VRセンター発足

第一世代VRブーム

1987年 VPLリサーチ社手袋型の入力装置発売

1989年 サンフランシスコ展示会　初めてVRが世間に登場する

1992年　ICAT（世界初のVR世界会議）

1995年　科研費重点領域研究「人工現実感」発足

1996年　東京大学IML　五面大型スクリーン「CABIN」

1987年 VPLリサーチ社手袋型の入力装置発売

　　　　データグローブ

1989年 サンフランシスコ展示会

　　　　初めてVRが世間に登場する

　　　　VRの父、EyePhoneとデータグローブ（未来の電話）

1992年　ICAT（世界初のVR世界会議）

　　　　　日本バーチャルリアリティ学会

　　　　　リアリティ、ロボット工学、コンピューターグラフィックス、

　　　　　eスポーツなど、この分野に関心のあるすべての人にオープン。

1995年　科研費　重点領域研究「人工現実感」発足

　　　　重点領域研究というのは新学術領域研究に相当するもので当時としては最大級。

1996年　東京大学IML　五面大型スクリーン「CABIN」

　　　技術的な問題でHMDが劣っていた時代

第二世代　VRブーム

2014年　Facebook社がオキュラス社を買収

2015年　PS4　VR発売

2016年　ポケモンGo　サービス開始

2018年　東京大学VRセンター発足

2014年　Facebook社がオキュラス社を買収

　　　　VRヘッドマウントディスプレイを提供している会社です。

　　　　創業者はパーマー・ラッキー。24歳でOculus社を

　　　　クラウドファンディング（約2億5,000万円）調達、設立。

　　　　現在はFacebookに買収（2280億）、傘下に入っています。

2015年　PS4　VR発売

Facebookの仮想通貨

利用者全世界23億人の大手SNS・Facebookが独自の仮想通貨リブラをリリースすると発表。大企業が集まって金融の世界から国境を失くそうとしている。が、苦戦している様子。今月大手決裁企業はすべて撤退。

PayPal, eBay, Mastercard, Visa,

2016年　ポケモンGo　サービス開始

2018年　東京大学ＶＲ教育研究センター発足

　　　　VRセンターは東京大学の全学組織で、

　　　　VR研究における国際的なイニシアティブを確立するとともに、

　　　　先端技術の普及と、VRを活用した先進的教育システムの導入を推進することを

　　　　目的として活動しています。

ポケGoはゴーグル付けないけどVR？

VR、AR、MR

VR（Virtual Reality＝仮想現実）

　　コンピュータ上で現実に似せた「仮想世界」を作り出す技術

​　　　映像産業が主に利用する。

AR（Augmented Reality＝拡張現実）

現実世界にCGなどで作った仮想現実を反映（拡張）させる技術

　　　現実世界を相手とするほとんどの産業で利用される。

MR（Mixed Reality＝複合現実）

仮想世界（デジタル空間）を主体とし、仮想世界と現実世界を重ね合わせる技術

商品例

実用例

医療

　▼手術トレーニング

　　手術の体験学習ができる「OSSO VR」。

　▼体の構造についての学習

　　　心臓について学ぶための教育用ＶＲ「バーチャルハート」

　▼他視点同時見学

　　　多視点で手術の様子を同時に何人も見学することのできるVR「グルージョブ VR」

自動車業界

　▼自動車整備

　　配線位置など、現実世界と重ね合わせながら作業ができる

建築業界

　▼建設業における設計・工事・検査の効率化

実用例

VRの周辺のお話し

プロテウス効果

　on-lineのコミュニケーションにおける自分を表すキャラクターの見た目などが、

　そのユーザーの行動特性や外向性に影響を与えることをいう。

　→コンプレックスからの解放

AI・人工知能

　VR・AR空間上のデータをAIで自動的に最適化する。

　経路案内や表情読み取りなど、既に生活に浸透している技術。

遠隔ロボ

　無人ロボットの中で操作しているような感覚で、遠隔操作ができる。

　宇宙開発で活躍している。

　月まで片道1.3秒、火星は13分のタイムラグがある為、自律性が求められる。

IoT（Internet of Things）

モノがインターネットに繋がる時代。

高機能なセンサーがネットに繋がりっぱなし。

5G (第5世代移動通信システム)　

「高速・大容量」「低遅延」「多数端末との接続」という特徴を持っています。

これらの特徴により、産業構造が変化すると言われています。

VRだけではなく組み合わせることで無限大の効果

　遠隔の情報を計測する：IoT　

　情報を最適化する：AI

　データを高速にやり取りする：5G

　データを表示する：VR, AR, MR

平均学習定着率

　・視覚的理解（動画、Youtube）

　・実演・実験（CG、多視点同時見学）

　・自ら体験する（VR, AR）

実際VRのデータはどう作るのか

　・実写撮影して作りたい人

　・3Dモデルデザインしたい人

　・3DモデルでVtuberしたい人

　・3Dモデルをキャラクターとして動かしたい人

実写撮影して作りたい人

（全天球カメラでググってみてね　2～10万目安）

3Dモデルデザインしたい人

　Maya（3DCGソフトウェア）

　映画、ゲームの制作を行う。

3DモデルでVtuberしたい人

　モデルが出来たら、それを着るイメージ。

　（上から安価）

　　・スマホ

　　・Webカメラ

　　・Kinect（約3万）

　　・VR（約8万）

　　・モーションキャプチャ（約30万）

3Dモデルをキャラクターとして動かしたい人

Amazon Sumerian（アマゾンシメリアン）

AWSサービスの一つ。

ブラウザベースの 3D、拡張現実 (AR)、仮想現実 (VR) アプリケーションを簡単に作成し実行します。

WEBブラウザ上で開発可能。

Unity（ユニティー）

UnityはVR開発に対応している、ユニティ・テクノロジーズ社が提供するゲームエンジンです。元々は3Dゲーム用として開発されたゲームエンジンであり、VRに加えて2Dゲームや3Dゲームの開発にも対応しています。

軽く触ってみたければ「unity ドットインストール」で検索。

体験してみましょう