Unity

パーティクルシステムを使う！Unityでエフェクトの作り方【初心者向け】

この記事では自作のエフェクトの作り方を解説しています。Unityでの表現をワンランクアップさせるためにも、是非チェックしてみてください。実際の操作方法を画像を使って説明しながら動きをGIFで確認していきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

Unityではパーティクル、イメージ、ポストプロセスなどエフェクトに使用できる機能がたくさん用意されています。
今回はそれらを組み合わせたエフェクトのサンプルを紹介していきます。

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

今回はUnityで自作のエフェクトを作ってみようか！

田島メンター！！　エフェクトって自分で作れるものなんですかー？

Unityには色々な表現方法があるから、組み合わせれば自分でエフェクトを作っていくことができるよ。早速例を見ていこう。

演出のサンプル1、パーティクルで火のエフェクト

Unityでのエフェクトの基本として、まずはパーティクルから作成してみよう

パーティクル？　ってなんですか？

細かい粒子を放出してすることで流体などを表現する演出方法だよ！

なんだか難しそうです・・・

設定にはコツがいるけれど、結果を見ながら調整していくのは楽しいと思うよ。早速やってみよう

パーティクルシステムを以下のように設定します。

火のエフェクトが完成しました。

パーティクルの基本は以上だよ。

値を設定したときの反映の仕方が面白かったです！

そうだね。いろんな値を変更して変化を見てみると楽しいと思うよ！

[PR] Unityコース

演出のサンプル2、パーティクルで花火のエフェクト

もう一つエフェクトのサンプルを作成してみよう。

今度は何を作るんですか？

そうだね　先程粒子を放出し続けるタイプを作ったから、今回は一瞬だけ粒子を放出するタイプの、花火を作ってみよう！

パーティクルシステムを以下のように設定します。

花火のエフェクトが完成しました。

エフェクトのサンプルをいくつか紹介してみたよ。

Unityではいろんな表現ができるんですね！

応用すればどんな表現でもできるし、アセットストアでも多くのエフェクトが公開されているよ。

他の人が作ったエフェクトも使えるんですね！　いろいろと見てみます！

（アセットストアの使い方）

TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。

現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

【現役エンジニアが書籍レビュー】ゲームの作り方 Unityで覚える遊びのアルゴリズム

この記事では、「ゲームの作り方　Unityで覚える遊びのアルゴリズム」の書籍を現役エンジニアがレビューしています。書籍の全体的な概要を説明し、どんな人に...

Unity

動的配列を覚える！UnityでListを使う方法【初心者向け】

ほとんどのプログラミング言語には配列という、同じデータ型の変数をまとめる機能が備わっています。 Unityで使用されているC#では、その配列のほかにLis...

Unity

Unityでキャラクターをジャンプさせる方法【初心者向け】現役エンジニアが解説

今回は、Unityでキャラクターをジャンプさせる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

Unity

Unityで作成したゲームをAndroidアプリ向けにビルドする方法【初心者向け】

Unityで作成したゲームは、AndroidアプリやiPhoneアプリとして公開できます。今回は、Androidアプリ向けにビルドする方法をご紹介します...

Unity

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

現在ゲームを作るためのゲームエンジンはたくさんの種類があります。その中でも世界で一番使われているのがUnityです。ただUnityの勉強を始めたいと思っ...

Unity

Unityで動画を分割することはできますか？【メンターが回答】

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました大石ゆかり田島メンター！iPhoneで撮影した動画を4x4...

Unity

あわせてよく読まれている記事

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

現在ゲームを作るためのゲームエンジンはたくさんの種類があります。その中でも世界で一番使われているのがUnityです。ただUnityの勉強を始めたいと思っても何から始めれば良いのかわからない方もいらっしゃるかと思います。今回はそんな方のために、Unityの勉強を始める際にオススメの入門サイトを紹介していきたいと思います。なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。 Udemy 学習タイプ：動画初心者から上級者まで様々なレベルの人が使えるUnity学習サービスです。もちろんUnity以外にもありますが、実践的に学習が行えるので、本格的なゲームを作りながらUnityの知識を身につけることが可能です。スマホでもPCからでも自分のペースで学習することができるはずです。 Udemyの特徴としては、最新技術をいち早く有料コースとして学習することが可能です。 Udemyのコースは、Udemyが提供しているコースだけでなく、Udemyという学習教材をオンラインで公開するサービスに、専門家が各自で作成した教材を公開しています。そのため、ある技術に関する講座として様々な角度から様々な価格と言語で学習をすることができます。また、その多くが動画テキストを採用しているため、文字を読むのが苦痛な受講生にも人気です。スマホからも学習可能ということで、いつどこでも自分の好きなときにアカウントにログインして、簡単にコースにアクセスできます。この機能のおかげで学習の機会が無限に開かれています。そして、一度コースを購入すれば、アカウントが有効で、かつUdemyがコースのライセンスを所有し続ける限り、いつまでもコースへのアクセスが可能です。 Udemy ドットインストール(Unity入門) 学習タイプ：動画プログラミング初学者の味方「ドットインストール」です。 Unityのバージョンが少し古い物になっていますが、基礎操作や基礎知識を覚えるのには最適なサイトであると言えます。ここからUnity学習の第一歩を踏み出しましょう。 2017年現在はUnity4.2のみサポートしています。また、このレッスンはサポート終了しています。ドットインストール(Unity入門) また、ドットインストールの体験記事もございます。プログラミング学習の超定番！「ドットインストール」をやってみた [PR] Unityコース OpenBook(Unity入門) 学習タイプ：テキスト OpenBookは誰でもオンライン上で本を作成できるサービスです。そのサービス上で公開されているUnity入門です。基礎的な物理演算や摩擦、アプリの書き出しなど様々な技術を覚えることができます。東京大学出身の著者を中心とした教材ですので、東京大学というキーワードに興味がある方には、心くすぐられる教材です。 OpenBook(Unity入門) はじめてのUnity 学習タイプ：テキストはじめてのUnityとなっていますが、前述の二つのサイトと比べるとレベルは少し高めとなっています。特に2Dシューティングのチュートリアルは骨のある内容となっており、これを完了すればUnityの基礎は理解したと言っても過言ではないでしょう。 Unity公式ページで解説されているテキストですので、公式ページとして安心して受講することが可能です。はじめてのUnity Unity3Dゲームの作り方講座学習タイプ：テキスト今までのサイトとは少し違い、パーティクルシステムや時間管理などについて解説してあります。少し踏み込んだ内容となるので、基礎を理解している方におすすめのサイトです。初級講座の部分を割りと省いているので、中級者以上のユーザーにとっては、無駄な部分を飛ばす事が可能な点がメリットです。 Unity3Dゲームの作り方講座【入門編】世界よ、これが本当の Unity 講座だ（１）学習タイプ：テキストこちらはあのMobage(モバゲー)の技術者ブログです。Unityでゲームを作成していくというより、Unityやその他のゲームエンジンに関する知識や、Unity内のプログラムなどより深い部分について解説しています。少し難しい内容と成っていますが一度目を通しておくと、今後のゲーム制作に役立つことは間違いないです。【入門編】世界よ、これが本当の Unity 講座だ（１） Unity公式(Unity入門) 学習タイプ：テキスト Unityの公式の入門ですが入門としては少し難しめの文章となっています。今までにあげたサイトを勉強した後にまとめとしてみる事をおすすめします。ただ一つ一つの知識について詳しく解説してあるので、今までもやっとしていた知識や概念を理解するのに役に立つでしょう。 Unity入門となっていますが、対象は中級者まで対応していると言っても過言ではありません。また、日々進歩する技術に対してもUnity公式として内容を更新している点が安心です。 Unity公式(Unity入門) おもちゃラボ(Unity入門) 学習タイプ：動画/テキストポップなシューティングゲームを作成する事ができるサイトです。可愛いクオリティの高いゲームを作る事ができます。 UI(ユーザーインターフェイス)がしっかりとしたゲームを作る事ができるので、ゲームの魅せ方なども学ぶ事ができます。可愛い名前ですが、現在の最新の内容は既に入門の域を超えています。そのため、最初から順番に学習することでかなりのレベル迄学習可能です。チュートリアルもあるため安心です。おもちゃラボ(Unity入門) テラシュールブログ学習タイプ；テキスト Unityのより深い知識について解説しているブログです。今後ゲーム制作を作成していくにあたって間違いなくお世話になるブログです。 Unityに役立つ情報がたくさんあるので、定期的にチェックすることをおすすめします。現在も頻繁に更新されており、記事数が非常に多い点が上級者にも必要な情報を提供しているといえます。テラシュールブログ Unity公式(チュートリアル) 学習タイプ：動画英語版になっていますが、とてもおすすめのサイトです。 Unity公式とだけあって、クオリティがとても高いものになっています。またAudio(オーディオ)やPhysics(フィジックス)などカテゴリ分けされたチュートリアルもあり、自分のわからないところをピンポイントで学ぶことができます。 Unity社員が講演をする場合も、こちらのチュートリアルを使用して現地で一緒に学習するという素晴らしいチュートリアルです。 Unity公式(チュートリアル) 3D Platformer Tutorial 学習タイプ：テキスト(PDF) チュートリアルとしては珍しく超ハイクオリティの3Dゲームを作ることができます。現場でも通用するようなテクニックが満載でエンジニアリング以外の知識もたくさん載っています。ただし、 Unity 2.0 の内容である点を注意する必要があります。 3D Platformer Tutorial Libro〜ビギナーのためのUnity超入門〜学習タイプ：テキスト知ってる人は知っているご存知掌田津耶乃氏のサイトのunityの解説です。毎回同氏の解説は初心者には分かりやすく、とてもありがたいです。全7回に分けて説明していただいています。 Unity4.6の内容になる点を注意する必要があります。 Libro atmarkIT 学習タイプ：テキスト 3ページにわたってUnityがなんであるかを解説してくれています。概要をつかむのには持ってこいのサイトでしょう。 Unityの学習というより、Unityが如何に素晴らしいかを他の人に説明する時に使用すると良いでしょう。 atmarkIT ThinkIT 学習タイプ：テキスト Unityを使っていきなり初心者がいきなりゲームを作ってみるという大胆な企画です。楽しみながら飽きずに学習することができます。いきなりはハードル高めですが、虎穴に入らずば虎子を得ず。挑戦してみましょう。実際にこれをみながら制作するより、見ることで制作していく実感を得ることができるという点が良いです。ゲーム実況をみて、ゲームをした気分になる感じと似ています。結果的にUnity開発へのスタートハードルを下げることができます。 ThinkIT SONICMOOV LAV 学習タイプ：テキストこちらは最短コース系なんと一時間でUnityを使ってゲームを作ろうとする大胆なものです。ただ1時間で自分のゲームができると思うとワクワクしませんか？そのワクワクが学習へのエネルギーとなるのです！ SONICMOOV LAV Developers.IO 学習タイプ：テキストこちらは環境のインストールから親切に教えてくれます。まずどうにも動かない、という方はこちらから始められることをおすすめします。 Developers.IO UINYAN.COM〜素人が7日間クソゲーを作り続けてわかったこと〜学習タイプ：テキストこちらはゲームムログラミングをしたことがない筆者がUnityを使って7日間でゲームを作ってみたときの記録です。それゆえの苦労や発見がみてとれると思うので是非学習に具体的にとりかかる前にチェックしてみるのもいいかもしれません。 UINYAN.COM MUO 学習タイプ：テキスト英語サイトですがUnityに関する基本がしっかりと体系立てて解説されています。英語が読める方にはとてもいいサイトだと思います。 MUO Unity STUDENT 学習タイプ：テキストこちらも英語サイトです。Unityに関する記事がひとつひとつキャッチアップ画面つきのリストになっていてやりたいことが視覚的に探せるので便利です。 Unity STUDENT PLURALSIGHT 学習タイプ：動画言語は英語ですが、動画でUnityを学べます。しかも無料で見ることができます。 PLURALSIGHT SlideShare〜Unityを使ったゲームデザイン超入門〜学習タイプ：スライド東工大の学生のために作ったスライドですが我々全くの初心者にも最適です。まるで授業を受けているみたいでいいですね。 SlideShare 以上、Unityを独学から始められる学習サイトを紹介しました。 2Dや3Dゲームなど自分の作りたいものに合わせて学習サイトを選んでみると良いでしょう。自分がやりたいゲームを自分で作れるようになればより一層楽しく感じるはずです。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。

Unity

今さら聞けない！ゲーム開発で人気のUnityとは【初心者向け】

ゲーム開発でよく利用されているUnity（ユニティ）について初心者向けに解説した記事です。 Unityではどんなゲームが開発できるのか、Unityを使うメリットはどんなことがあるのか Unityを使う上で必要なものを紹介しています。 Unityとは聞いたことはあるけど、何だかよく分からないという方はぜひご覧ください。目次 Unityとは Unityでできること Unityを使うメリット Unityを使う上で必要なもの Unityの学習方法 Unityとは Unityとは、ユニティ・テクノロジーズが開発しているゲームエンジンのことです。ゲームエンジンとは、ゲームを開発するためによく使用する機能を1つのツールにまとめたものです。ゲームエンジンの中でもUnityは一番使用されており、全世界で100万人以上の開発者が使用しています。最近では「ポケモンGO」に使用されたことでも有名になりました。ゲームを作りたいけど方法がわからないという方は、まずUnityについて知りましょう。田島悠介 Unityは無料から利用できるゲーム開発環境だよ。WindowsとMacの両方に対応しているんだ。大石ゆかりゲームを作るっていうのは、かなり技術が要りそうですが…… 田島悠介もちろんある程度のプログラミング知識が必要になるところもあるけれど、視覚的な操作でもかなりのことができるんだ。実際にどのような特徴があるか見てみよう。 [PR] UnityコースUnityでできること Unityで主にできることを3つピックアップして解説します。 1. 様々なプラットフォームで動くゲームを開発できる！従来のゲーム開発は、iOSで動かすためにはiOS向けの開発環境、Androidで動かすためにはAndroid向けの開発環境…といったようにそれぞれの準備が必要でした。 Unityはプラットフォームごとに必要だった開発環境を包括しています。 Unityで1つゲームを完成させれば、どのプラットフォームでもある程度の動作を約束してくれます。我々にとって身近な iOS, Android, Mac, Windows にも対応しています。また、Nintendo Switch、PlayStation、Xbox といった家庭用ゲーム機向けの開発も行えます。使用する言語はC#と呼ばれる言語で、プラットフォームごとに変わることはありません。 2. 2Dゲーム, 3Dゲームどちらも作ることができる！ Unityは当初、主に3Dゲーム開発用のゲームエンジンでした。現在は2Dゲームにも対応しており、スマートフォンに多くみられるカジュアルなゲーム開発も行うことができます。 3. 直感的にゲームを作ることができる！従来のゲーム開発においては、何をするにもプログラミングを記述することが必須でした。例えばゲーム画面に3Dモデルを表示するためには、以下の処理が必要です。プログラミングで3Dモデルをゲームに読み込むプログラミングで3Dモデルを画面に描画するそのため、デザイナーなどのプログラマーではない人間が、ゲーム画面上の何かを変更したいと思っても、プログラマーに依頼する必要がありました。しかしUnityは、ゲーム画面に3Dモデルを表示するために、ゲーム画面上に3Dモデルをドラッグ＆ドロップする、という操作で済みます。マウス操作で直感的に3Dモデルを配置することができるのです。もちろん配置した3Dモデルを動かす、となるとプログラミング能力が必要です。ですが、従来のゲーム開発に比べると大変直感的な操作で結果を得られます。大石ゆかり操作も直感的で、初心者に優しそうですね。私でもできるかな。田島悠介それでもゲームを作るためにはイラスト、モデル、音楽といったいろいろな素材が必要なんだ。UnityにはAssetStore（アセットストア）といって、素材を購入する場所も提供されているよ。 Unityを使うメリットゲーム開発に欠かせないAssetStore Unityがゲーム開発をしやすくしてくれることは間違いないですが、人によっては3Dモデルを作ることができないことがあります。また、3Dモデルは作ることができても音楽が作れない、といったこともありますし、その逆もあります。全部できても、全部自分で作っていては時間がかかりすぎる、といった問題もあります。しかし、Unityにはそういった3Dモデルなどのゲームデータを購入できる場所が提供されています。それが AssetStore（アセットストア）です。 3Dモデル（人型、ロボット、クリーチャー）やキャラクターのイラスト、アイコン画像、他にも音楽やエフェクト、さらにはプログラム処理までAssetStoreには存在します。有料販売だけでなく、無料配布されているものも多数存在します。 Unityでゲーム開発を行うなら、ぜひ有効活用していきたいです。 Unityは無料で開始できるこれほど便利なUnityだと料金が心配になりますが、個人ならUnityを無料で使用できます。（ただし過去 12 か月の収益や調達した資金が 10 万米ドルを下回る方が対象）無料のUnityプランはPersonalと名付けられています。その他に有料のPlus, Pro, Enterpriseが存在しますが、初心者の方がゲーム開発を始めるにあたってはPersonalプランで十分です。 Unityを使う上で必要なもの Unityを使う上で必要な物は基本的にパソコンのみです。 Mac、Windowsどちらでも対応していますが、iOSのゲームを作る際は、Mac専用の機能と連携する必要があるのでMacを使用します。同様にAndroidのゲームを作る際は、Windowsを使用します。あまりに古いパソコンだと対応していない可能性もあるので Unityのホームページを確認するようにしましょう。 Unityの学習方法 Unityをより深く学びたい人向けに、Unityの学習サイトと書籍をいくつか紹介していきます。学習スタイルは、人それぞれ好みがあると思うので、自分の生活に合わせて選んでみてください。学習サイト紹介ドットインストール 3分程度の動画を流し見するだけでUnityに詳しくなれる無料の学習サイトです。ドットインストールを使ってみたをご覧になってください。コガネブログコガネブログ【Unity 入門】【チュートリアル】玉転がしゲームを作る Unityで玉転がしゲームを作る英語のチュートリアルがあるのですが、それを日本語に翻訳してくれているサイトです。チュートリアル以外にもUnityについて便利な記事がいくつかあります。参考にしてみてください。書籍紹介 UnityではじめるC#基礎編いたのくまんぼう、というUnityで個人ゲーム制作をされている方が監修された本です。簡単な脱出ゲームとパズルゲームを作ることができます。 Unityの寺子屋　定番スマホゲーム開発入門こちらも同じく、いたのくまんぼう氏が監修された本です。先ほどのものよりもいくらか高度な内容ですが、定番の「放置ゲーム」や「横スクロールアクション」などを制作できます。 Unityではじめる2Dゲーム作り Unityで使える豊富なソースコードが載っている2Dゲーム制作のバイブルです。対応バージョンが以前のものであるのでいくらか修正して読んでいく必要があります。まとめ今回はUnityについての基礎知識を紹介しました。 Unityは現在でも非常に高性能のゲームエンジンですが、今後もどんどん成長していくゲームエンジンです。ゲーム開発の際はUnityの使用を検討してみてはいかがでしょうか。執筆してくれたメンター mentor-s 専門学校卒業後、4年間ゲーム開発会社でプログラマーを担当。現在は講師兼個人ゲーム開発者。ゲーム開発ではプログラミングだけでなく、画像・音楽・モデリングなどすべて行う。田島悠介 Unityは専用のアカウントを作成すれば、誰でもすぐ利用することができるよ。大石ゆかり見た感じかなりたくさんの機能があって、覚えるのも大変そうですね。田島悠介詳細までしっかりと解説されたマニュアルが公式で公開されているので、分からないところがあったらそこで調べることができるよ。また、最新バージョンの情報なども更新されるのでこまめにチェックしておこう。大石ゆかりなるほど、分かりました。ありがとうございます！ [お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。

Unity

ゲームが簡単に作れる！Unityのインストール方法（AssetStoreの説明つき）

ソーシャルゲームなどの開発にもよく使われている「Unity」という統合開発環境を知っていますでしょうか？無料でもインストールできるので、これから使ってみたいという方も多いと思います。そこで今回は、初心者の方向けにUnityのインストール方法、ゲーム素材が共有・販売されている「AssetStore」から素材をダウンロードする方法を紹介します。目次演出のサンプル1、パーティクルで火のエフェクト演出のサンプル2、パーティクルで花火のエフェクトそもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回はUnityのインストール手順を見てみよう。大石ゆかり田島メンター！！Unityのインストールには何を用意したらいいんですか～？田島悠介あらかじめ用意しておくソフトなどはないけれど、Unityのアカウントを持っていない場合は新規登録する必要があるので使用するメールアドレスとパスワードを決めておくといいかな。大石ゆかり分かりました！ Unityとは Unityとは、Unity Technologies社が開発した統合開発環境です。3Dエンジンとビジュアルベースのエディタがあり、直感的な開発が可能な統合開発環境です。ユーザー数は全世界で100万人以上と言われており、多くの人に使われています。 iOSアプリ、Androidアプリなどのスマートフォンアプリから、Xbox、プレイステーションなどにも対応したマルチプラットフォームでもあります。日本でもソーシャルゲームをはじめ、多くのゲーム開発に使われています。 Unityが使われたゲームはゲームリストのページから確認することもできます。 UnityのBasic版は無料でインストール可能ですが、Pro版は1ライセンスにつき267,960円（2022年11月現在）かかります。 Unity Hubのインストール Unityをインストールするために「UnityHub」というソフトを使用します。 UnityHubを使用してUnityをインストールすることで、複数のUnityのバージョンを使い分けることができます。今後Unityのアップデートが必要になったとき有用なので、最初にインストールしておきましょう。 Unityダウンロードページから、UnityHubをダウンロードします。（UnityHub Version3.3.0/2022年11月現在）ダウンロードしたUnityHubのインストーラを起動しましょう。ダウンロードフォルダに入っている「UnityHubSetup」をダブルクリックして起動してください。 Unity Hubセットアップウィンドウが開きます。「同意する」をクリックしてください（Unity Hubのライセンスへ同意したことになります）。 UnityHubのインストール先を選択して「インストール」をクリックします。とくに指定がなければデフォルトのまま「インストール」をクリックしてください（デフォルトの場所は環境によって異なる場合があります）。インストールが始まります。インストールが完了すると下図のようになります。「Unity Hubを実行」にチェックを入れたまま「完了」をクリックしてください。 UnityHubが起動すればインストールは完了です。 [PR] UnityコースUnityHubを利用したUnityのインストールライセンスの設定 UnityHubが起動したら、サインインとライセンスの設定をしましょう。左上のアバターアイコンをクリックし、サインインをクリックしてください。 Unity Hub Sign Inウィンドウが開くので、「IDを作成」をクリックしてください。すでにUnityのアカウントをお持ちの方は、お持ちの既存アカウントをそのままお使いください。 Unity IDアカウントを作成の画面になるので、必要事項をすべて記入し、「Unity IDを作成」をクリックしてください。アカウントを作成後、UnityHub左上のアバターアイコンにユーザー名が表示されていればサインインは完了です。表示されていない場合は再度サインインを押してメールアドレスとパスワードを入力してサインインしてください。次にライセンス登録を行います。環境設定画面が開いていることを確認して「ライセンスを加える」をクリックしてください。（環境設定画面が開いていない場合、左上の歯車マークをクリックし、左のメニューからライセンス管理を選択してください）新規ライセンスの認証画面が開きます。「無料の Personal ライセンスを取得」をクリックします同意を求められますので「同意して Personal のライセンスを取得」をクリックします Personalのライセンスが表示されれば完了です。次に、Unityのインストール先を設定しておきましょう。左のメニューより「一般」をクリックし、Unityエディターフォルダーの「…」をクリックしてインストール先を指定してください。インストール先を指定したら「保存」をクリックしてください。以上でUnityHubの設定は終了です。 Unityをインストール左のメニューにある「インストール」をクリックしてください。 UnityHubのプロジェクト一覧画面になりますので、右のメニューより「エディターをインストール」をクリックしてください。 Unityバージョンを選択する画面になります。最新正式リリースにある「Unity2021.3.x」のチェックを入れて「次へ」をクリックしてください。以下の説明ではUnityのバージョン2021.3.x（長期サポート版）を用いて説明しています。 ※下図では2021.3.13f1を選択しています。（2022年11月現在）モジュールの選択画面になります。以下のようにチェックを入れて「次へ」をクリックしてください。 – Microsoft Visual Studio Community 2019 – Android Build Support（Androidをお持ちの場合） – Android SDK & NDK Tools – iOS Build Support（iOSデバイスをお持ちの場合） – WebGL Build Support Unityのインストールが始まります。インストールが終了するまでお待ちください。下図のようになればインストールは完了です。特に難しい操作はないので簡単ですね。田島悠介パスワードには数字と大文字を最低ひとつ入れなければいけなかったり、全体で8文字以上でないといけなかったりといくつかの決まりがあるよ。大石ゆかりそれに当てはまらないと設定できないんですね。田島悠介アカウントは次に説明するアセットストアや公式のフォーラムの利用の際に必要になるので、しっかりと控えをとっておこう。大石ゆかりはい！ AssetStoreから素材をダウンロード Unityには、Unityで使用できる画像や3Dモデルの素材やプラグインなどが購入できる「AssetStore」というものがあります。有料のものが多いですが、無料で使える素材もあるので、ダウンロード方法を説明します。まずは、https://assetstore.unity.com/ にアクセスします。 Categoriesには、３Dモデル、効果音やBGMに使える「Audio」、スクリプトの開発効率を上げるプラグインの「Scripting」などがあります。今回は「Unity ちゃん」をダウンロードします。以下の URL にアクセスします。 https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705 以下のようなページに遷移しますので「マイアセットに追加する」をクリックします。マイアセットに追加をすると、ポップアップウィンドウが表示されるので「Unity で開く」をクリックします。以下のようなダイアログが出るので「Unity Editor を開く」をクリックします。 Package Mangaer が開きますので右下にある「Download」をクリックします。ダウンロードが完了すると右下に「Import」というボタンが現れるのでクリックします。以下のようなポップアップウィンドウが表示されるので「Import」をクリックします。インポートが完了すると、Assetsに表示され、使うことができるようになりました。今回はかなり初歩的な内容ですが、うまくできましたでしょうか？まとめ本記事ではUnityのインストール方法などを解説しました。 Unityとは Unity Hubのインストール Unityのインストール AssetStoreから素材をダウンロードする方法 Unityの機能や使い方を理解することで、より拡張性の高いゲーム開発を実現できます。ぜひUnityをさらに使いこなしてみてください。田島悠介最後にアセットストアの紹介をしたよ。非常に多くの素材があるので是非活用しよう。大石ゆかり無料のものだけでもたくさんありますね！田島悠介 Unity本体もアセットもそれなりの容量が必要になるので、ハードディスクの空きには注意しておこう。大石ゆかりダウンロードの時間にも余裕を持っておいた方がよさそうですね。ありがとうございました！ Unityを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい Unityを学習していて、このように思ったことはありませんか？テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、はじめてでもUnityでオリジナルゲームの制作ができるようになります。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

Unity

Premiere Proでフェードアウトを適用する方法【動画付き】

Premiere Proでキーフレームとエフェクトを使用したフェードアウトの適用方法を紹介しています。フェードアウトとは、徐々に映像が消えていく効果になります。それぞれ具体的な手順を説明しているので、参考にしながら実際にフェードアウトをさせてみましょう。なお本メディアを運営するテックアカデミーの系列の動画専門スクール『ムークリ（MOOCRES）』では、副業・フリーランスで稼げる動画クリエイターを一緒に目指す受講生を募集中です。 ▼動画でもフェードアウトを適用する操作方法を紹介しているので、ぜひご覧ください。田島悠介今回は、Premiere Proに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介フェードアウトを適用する方法について詳しく説明していくね！大石ゆかりお願いします！キーフレームとエフェクトを使用したフェードアウトの適用方法をそれぞれ紹介しています。 A. キーフレームを使ってフェードアウトを適用する 1. フェードアウトを適用させるクリップをタイムラインに挿入します。 2. ”ファイル”→”新規”→”カラーマット”を選択します。 3. 挿入するタイムラインと同じになるよう、カラーマットの設定を行い”OK”を選択します。 4. フェードアウトしたい背景色を選択します。 5. 追加するカラーマットの名前を入力します。 6. フェードアウトを適用したいクリップのタイムラインの下に作成したカラーマットを追加し、クリップの終わりが同じになるよう調整します。 7. タイムライン表示設定（工具のマーク）からビデオのキーフレームを表示にチェックを入れてください。 8. フェードアウトを適用したいクリップのタイムラインを拡張すると、ラインが現れるので、 Ctrl（Macの場合はcommand）を押しながらクリックし、キーフレームを2つ追加してください。 9. 片方のキーフレームを一番下まで下げるとフェードアウトが適用されます。 B. エフェクトを使用してフェードアウトを適用する “エフェクト”→”ビデオトランジション”→”ディゾルブ”→”暗転”や”ホワイトアウト”などのエフェクトを選択し、目的のクリップにドラッグアンドドロップすることで、フェードアウトが適用されます。以上、フェードアウトの適用方法を説明しました。映像だけでなく音声も同様にフェードアウトさせることができるので、やり方を覚えておくと非常に便利でしょう。キーフレームでの適用方法を覚えておけばより細かくフェードアウトを適用できるはずです。 [PR] Unityコース監修してくれたメンター松隆祐也（まつたかゆうや）映像ディレクター新郎新婦が主演するドラマ仕立てのウェディングムービー制作を中心に、企業PRムービーの制作なども行う。また、仕事での映像制作と並行して、短編映画の監督脚本なども意欲的に行う。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！以上、フェードアウトの適用方法を説明しました。テックアカデミーの系列スクール『ムークリ（MOOCRES）』では、稼げるスキルであるAfter Effectsを中心に学習し、副業・フリーランスとして稼げる動画クリエイターを目指せます。受講生の90%が動画編集をしたことがない未経験の方なので、動画編集の経験が浅くても安心です。【ムークリの特徴】超実践：After Effectsをプロレベルで習得、高単価のクリエイターを目指せる超密着：プロの講師が親身に指導、ゼロからプロへの道を、楽しく超支援：受講中から案件に挑戦でき、卒業後も半永久的にサポート少しでも気になる方や、話を聞いてみたい方は、まずはお気軽に個別相談会へお越しください。

動画編集

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Dmitry Fadeyev氏によって投稿されました。近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。近年、同様のことがデザインの世界でも起きています。ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。目次モダンデザインの誕生デジタルの装飾本物のデザインミニマリズムではない本物のデザインが重要である理由モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。 [PR] Unityコースデジタルの装飾モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。 Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。本物のデザインモダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。しかし、正確には何がデザインを「本物」にするのでしょうか？本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」デジタルデザインにおいては、デザインは大きく次のように集約できます。デジタルな外観を保持すること金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。スキューモーフィズムを排すること電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。コンテンツを中心にしたスタイルにすることスタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。ミニマリズムではない機能性に美しさがあるデザインは、ミニマリズムのデザインとは同じではありません。前者は、使いやすく、効率性の高い、利用性が最大限に高められた製品を生産するために、デザイナーが余剰を排除して生まれるデザインです。一方、後者はミニマリズムの美学を追求することにより生まれるデザインであり、オブジェクトにシンプルさと美しさをもたらします。一方はデザインの基本原則であり、もう一方はスタイリングの選択肢なのです。インターフェースをよりシンプルで「本物」らしくするために、ミニマリズムのデザインを、スタイルとしてインターフェースのデザインに厳格に適用することは、間違いです。例えば、シャドウ、色、背景の多様なスタイルなどを見境なく排除する場合、必ずしもインターフェースが使いやすくなるとは限りません。ジョン・マエダは著書の『シンプリシティの法則』の中で、「シンプルさを達成する最も簡単な方法は、思慮深い削除です。不確かな場合は、削除してください。しかし削除するものには注意してください。」と述べています。要素を削除することがシンプルさにつながるのは、ユーザーが処理するアイテムが少なくなるからです。しかし、ユーザーがインターフェースの操作を理解するための視覚的な手がかりまで削除することは、――アイテムをまとめ、要素を目立たせるためにボタンやラベルを区別化するのが、グラフィカル要素の役割であるため――かえってユーザーの負担が増えて逆効果です。そのため、ユーザーへのガイドは、スタイルによってというよりも、デザインの原則によって実現するべきです。本物のデザインが重要である理由 Riseというアプリは、本物のデジタルデザインの完璧な例の1つです。目覚まし時計はすでにアプリとして開発されていましたが、このアプリを開発した会社Simplebotsは、純粋なデジタルキャンバスのコンテキストにおけるインターフェイスを再考することで、概念にゼロから取り組んだのです。 Riseのインターフェイスにはフルスクリーンのスライダがあり、時間設定した時の空の色に合わせて背景色が変化します。現実世界の時計、スライダー、テクスチャなどは模倣していません。その代わりに、Riseのデザイナーたちは、モバイル端末のタッチキャンバス機能に対応するデザインを生み出し、端末を最大限に活用できるようなユーザー経験を創造しています。革新的なデザインは、優れたユーザー体験を実現するだけではなく、アプリ市場で目立つことができます。 Riseのようなインターフェースは、現実の世界にソリューションを求めるというよりも、デジタルなコンテキストの中で、完全に設計上の問題に取り組む場合にのみ実現可能です。コンピュータの画面上では、抽象的なフォーム、アニメーション、明るい色、均一なシェイドを表現することが可能です。カラーパレットを抑制したり、静的表現に限定する必要はありませんが、スキューモーフィズムに縛られてもいけません。ピクセル単位のグリッドを使用して、コンテンツを表現する最良の方法を理解することによって、より良いシンプルなソリューション、使い心地が良い画面を備えた革新的なインターフェースを実現することが可能となり、より良いユーザー体験を提供し、その他大勢から目立つようなアプリのデザインを実現できます。まとめ近年人気の高い「フラット」なデザインは、1つのトレンドかもしれませんが、余剰な装飾を排除してコンテンツに集中することへの欲求の現れでもあるのです。19世紀に機械化された大量生産によって過度な装飾を生み出したように、またディスプレイやスタイリングの技術が初期のWeb・ソフトウェアデザインにおいて同様に過剰なデザインを生み出したように、技術の進歩は過剰につながることがあります。しかし、機能性に美しさを求めたモダニズムの先駆者たちによって、過剰な装飾が時間をかけて排除されたように、今日のソフトウェアにおける過剰も、やがて真のデザインへの欲求によって排除されることになるでしょう。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後Webデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

無料で使える！GitHub Pagesを使ってWebページを公開する方法

ソフトウェア開発プロジェクトのためのソースコード管理サービスのGitHub。開発者を中心に使っている人も多いことでしょう。このGitHubに、無料でWebページを公開できるGitHub Pagesというサービスがあることをご存知でしょうか？今回は、GitHub Pagesの使い方、Webページを公開する方法を紹介します。GitHubをまだ使ったことがなくても、簡単に公開できるのでぜひ試してみてください。本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。大石ゆかり田島メンター！！GitHubにGitHub Pagesってあるんですけど、これってなんですか〜？田島悠介 GitHub Pagesっていうのはね、ウェブページをGitを使って簡単に作成できるサービスなんだ。 GitHub Pagesとは GitHub Pagesは、GitHubが提供するホスティングサービスで、ウェブページをインターネット上に公開することができます。自分自身や所属する組織、あるいはプロジェクトのウェブページをGit/GitHubのリポジトリを用いて、簡単な手順で公開することが可能です。ウェブページのアップロードはGitおよびGitHubのインターフェイスを用いるので、別途FTPクライアントソフトなどは必要なく、変更のあったファイルだけを簡単に更新することができます。またGitHub Pagesは、基本的に静的なウェブページをホスティングするサービスです。データベースを用いるような動的なウェブページは公開できません。また、プライベートリポジトリであっても、GitHub Pagesはインターネット上で公開されるので、注意しましょう。公開するウェブページは自分で一から作成することもできますし、GitHubがあらかじめ用意してあるテンプレートを用いることもできます。 GitHub Pagesを使ってWebページを公開ここからは具体的な使い方について解説します。下記の流れでWebページを公開していきます。 GitHub Pages用のリポジトリの作成ウェブページの作成 GitHubへプッシュ GitHub Pagesへアクセスして確認 1.GitHub Pages用のリポジトリの作成 GitHub Pagesには大きく分けて2つの種類があります。ユーザのウェブページを公開するユーザサイト（User site）と、プロジェクトのウェブページを公開するプロジェクトサイト（Project site）です。組織サイト（Organization site）もありますが、これは主体がユーザか組織かというだけで、基本的にはユーザサイトと同じものであると言えます。ユーザサイトとプロジェクトサイトではリポジトリの作成方法が少し異なりますので、それぞれ紹介します。ユーザサイト用リポジトリの作成 GitHubへアクセスし「username.github.io」という名前のリポジトリを作成していきます。まずはGitHubにアクセスし、ログインしますしてください。ページ右上の「+」アイコンをクリックし、「New repository」をクリックします。次に「Repository name」欄に、「username.github.io」（「username」の部分は自分のGitHubユーザ名）と入力し、「Create repository」ボタンをクリックします。続いて、ローカルのターミナルで、下記のように実行してください（usernameは自分のGitHubユーザ名に変更しましょう）。 $ git clone https://github.com/username/username.github.io これでローカル環境にレポジトリがクローンされました。この際、カレントディレクトリに「username.github.io」というディレクトリができているので、そのディレクトリに入ります。 $ cd username.github.io これでユーザサイト用のリポジトリが作成できました。プロジェクトサイト用リポジトリの作成プロジェクトサイト用リポジトリを作成する方法を紹介します。ウェブページを作成したいプロジェクトのリポジトリに「gh-pages」という名前のブランチを作成し、チェックアウトします（「/path/to/local-repository」はローカルにあるリポジトリのパス）。 $ cd /path/to/local-repository $ git branch gh-pages $ git checkout gh-pages 既存リポジトリの場合、すでに存在しているプロジェクトのファイル群はウェブページには基本的に必要ないので削除します（「.git」ディレクトリはGitが用いるので残します）。これでプロジェクトサイト用のリポジトリが作成できました。 2.ウェブページの作成 GitHub Pagesに反映させるためのページをローカルのリポジトリで作成します。 HTML、CSS、画像はもちろん、JavaScriptを用いることもできます。ここでは簡単に「Hello world」と文字列を表示するページを作成してみます。自分で試すときは、しっかりHTMLファイルを作成しても構いません。 $ echo "Hello world" > index.html HTMLファイルが完成したので、リポジトリにコミットします。 $ git add --all $ git commit -m "Initial commit" これで事前準備は完了です。 3.GitHubへプッシュ GitHub Pagesで表示させるために、ローカルでコミットした変更をGitHubへプッシュします。今回は、originという名前でGitHubのリポジトリを作成した例ですので、別の名前をつけた場合は置き換えてください。ここでもユーザサイトとプロジェクトサイトでやり方が異なるので注意しましょう。ユーザサイトの場合は「master」ブランチをプッシュします。 $ git push -u origin master プロジェクトサイトの場合は「gh-pages」ブランチをプッシュします。 $ git

Git

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

パーティクルシステムを使う！Unityでエフェクトの作り方【初心者向け】

目次

演出のサンプル1、パーティクルで火のエフェクト

演出のサンプル2、パーティクルで花火のエフェクト

関連するキーワード

あわせてよく読まれている記事

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

今さら聞けない！ゲーム開発で人気のUnityとは【初心者向け】

ゲームが簡単に作れる！Unityのインストール方法（AssetStoreの説明つき）

Premiere Proでフェードアウトを適用する方法【動画付き】

1900年代のデザインの歴史から学ぶ！デザインの基本とは

無料で使える！GitHub Pagesを使ってWebページを公開する方法

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

演出のサンプル1、パーティクルで火のエフェクト

演出のサンプル2、パーティクルで花火のエフェクト

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ