UniRXについて

こんにちは、インターンシップ生の大谷です。
今回はUniRxについて書いていこうと思います。

UniRxとは
・何か処理が起こった時に別の処理をするという処理を作れる
 何かが起こったときとはプログラムにおけるあらゆる処理です。(クリックしたとき、ゲームが始まったときなど
・Updataを色々なところにかける
 数秒後に処理をするなんて処理が簡単に書ける

OnNext、Subscribeについて
Subscribe:メッセージの受け取り時に実行するを関数に登録する
OnNext:sbscribeで登録された関数にメッセージを受け渡して実行

Subscribeとはメッセージの受け取り時の処理を登録する処理
OnNextはメッセージを発行してSubscribeで登録された処理を順に呼び出す処理
です。

IObserverとIObservable
IObserverとはRxにおけるイベントメッセージを発行できるという振る舞いを定義したインターフェースです
IObserverは「OnNext」「OnError」「OnCompleted」のメソッドをもつインターフェースです

OnNext 通常イベントが発行されたときに通知されるメッセージ
OnError 発生したエラーを通知するメッセージを発行するメソッド
OnCompleted メッセージの発行が完了したことを通知するメソッド

数秒後に処理をする

updataの最初の1フレーム目に処理をする

参考サイト
https://qiita.com/toRisouP/items/2f1643e344c741dd94f8
https://qiita.com/Marimoiro/items/2ad8a1b422a3fe98f938

興味を持たれた方はお気軽にお問い合わせください。

第4回webのひみつ(floatについての簡単な仕組み)

皆さんこんにちは。
インターン生の明瀨と申します。

今回はhtmlで私が苦手としていたfloatについてまとめていきたいと思います。

(参考画像)

(参考画像URL)
http://taneppa.net/float/

上記の画像はfloat型のイメージを示しています。
主にfloatは左右に寄せる際に使っていきますが、単に左右に寄せるだけではなくfloatをつけた要素を浮かせるという機能を付けます。
この機能を上手く使うことによって、メニューバーの作成やコンテンツの上にコンテンツを配置するなど様々なことができるようになるため覚えてしまうとすごく便利なものとなっています。
また、これを使用する際によく並行してつかわれるのはclearと呼ばれるプロパティです。
これを使用することで、floatを指定した要素を解除することが可能となっています。
こちらの何が凄いのかというと、浮かせて移動させた後に、そのままでは浮きっぱなしの状態ですので、他のコンテンツなどを入れた時に、この浮かせたコンテンツが邪魔になって上に被るように表示されてしまうため、見えなくなったりする可能性があるという点です。しかし、これをclaerのプロパティを使用することで、移動させて表記させた後に、その位置に設置することが可能となっています。

特にclareに関しては凄く大事な仕組みのため必ず覚えたほうが良いと思っています。

これ以外にも色々な使い方があると思うので、次はfloatを使用したサンプルを取り上げたいと思います。
(参考URL)
http://www.css-designsample.com/beginner/hp/float-base.html

こちらのサイトでは様々なパターンを上げていましたのでこちらからパターンについて述べていきます。
まず、パターン1ではAとBのボックスをleftで指定して回り込ませることによって横並びにさせるという方法となっています。こちらを使用することで、縦並びに以外にも横並びという表現方法を増やすことが出来ます。
次のパターン2に関しては、先ほどfloatをleft,leftで同じ位置にしていましたがこちらは片方をrightもう片方をleftとしているため左右離れた場合の設置方法となっています。

では今回はこの辺で終わりたいと思います。
他にも様々な方法がfloatの表現方法があると思うので是非自分で調べてみて下さい。
次回の予告は、float以外のプロパティについてまた触れていきたいと思うのでまた良ければ見てください。

(参考URL)
http://taneppa.net/float/

興味を持たれた方はお気軽にお問い合わせください。

ゲーム制作ツール・GameMaker Studioとは?

はじめまして、MBAインターン生の鶴田です。
今日から10回に分けて「GameMaker Studio」というゲーム制作ツールについて紹介していきます。
初回のテーマは「そもそもGameMaker Studioって何?」
本題のツールとしての機能に触れる前に、まずはGameMaker Studioというツールそのものの説明からスタートします。

・GameMaker Studioとは?
GameMaker Studio(以下GMS)は、PC上でゲームを作ることを支援してくれるツール(ゲームエンジン)です。イギリスのYoYoGames社から提供されています。

※現在公式ではGameMaker Studio 2と表記されていますが、要するにGMSの最新バージョンなのでここでは省略します。

・GMSでどんなゲームが作れるの?
<https://www.youtube.com/watch?v=NeSfnKQTCWw/>
上記URLの動画でGMSで作られたゲームの一部が紹介されています。
“Undertale”や”Hyper Light Drifter”といった家庭用に進出した名作ゲームも、日本人の学生が制作したことで話題になった”Downwell”も、実はGMSで作られているんです!

・Unityとはどう違うの?
日本で有名なゲームエンジンといえばUnityがありますよね。
GMSはUnityと比べると日本ではあまり有名ではなく、日本語の参考文献もUnityより圧倒的に少ないのが現状です。
ですが、GMSにはUnityにはない大きな強みが2つあります。それは「2Dゲームに特化したゲームエンジンであること」そして「プログラムが書けなくてもゲームを作れること」です!

・2D特化のゲームエンジン
3Dのゲームを手軽に作れることが強みのUnityとは違い、GMSは2Dゲームを作ることに特化した機能が色々とあります。
スプライトのアニメーション補助や当たり判定の設定機能……など、細かい話をするとキリがないのでここでは省きますが、
「ちょっとゲーム作ってみたいけどプログラミングって得意じゃないし、Unityは3Dでなんだか難しそうだし…」な人こそGMSがオススメです。

・コードを書かなくてもゲームが作れる?
GMSでゲームを作る方法はふたつあります。ひとつは自分でプログラムを書いてゲームを作る方法。ゲーム制作と聞いて思い浮かべるのはだいたいこのやり方ですよね。
GMSにはもうひとつ、プログラミング初心者向けに簡単にゲームを作れる「Drag And Drop(ドラッグ&ドロップ)」という機能がついています。
その名の通り、プログラムの命令が書かれたブロックをマウス操作のドラッグ&ドロップで組み合わせるだけでゲームを作れるので、プログラミングが苦手な人でも大丈夫!というわけです。
今回の記事ではドラッグ&ドロップ方式を使ったゲームの作り方を解説していきます。

・GMSを使うには
GMSはYoYoGamesの公式ページから入手することができます。

YoYoGames公式HP(リンク先は英語のみです)
<http://www.yoyogames.com/>

GMSの全機能のうち、ゲームを制作する「エディタ機能」の部分が体験版として無料で配布されています。(簡単な会員登録が必要です)
エディタで作ったゲームを他の端末で遊べるようにする「コンパイル機能」の部分を有料で購入する方式になっていて、
一番安いプランならWindows向け・Mac向けゲームとして、より高度なプランなら更にスマートフォン向けゲームや家庭用ゲーム機で動くゲームとして出力できます。(最近ではニンテンドーSwitch向けに対応するプランも発表されました!)
今初めてGMSを知って「使ってみたい!」と思った人は、まずは体験版でどういう風にゲームを作れるのか色々試してみるのをおすすめします。
「使ってみたいけど英語の説明なんか読めないよ!」という人のために、今後の記事でイチから使い方を説明していく予定です。お楽しみに!

・画像引用元
<https://www.yoyogames.com/blog/437/gamemaker-studio-2-0-7-and-console-exports-out-now/>
<https://www.yoyogames.com/showcase/>

興味を持たれた方はお気軽にお問い合わせください。

プログラミング知識0ではじめられる、UE4で簡単タイトル画面作り!

こんにちは!インターン生の西井遥と申します。

今回は、前回予告していた通り「タイトル画面で[ゲームスタート]ボタンを押すとゲームが始まる」を簡単に作っていこうと思います!

仕上がりイメージはこんな感じです!(SideScrollerプロジェクトですが多分他のも大体同じだと思います。)
ではやっていきましょう!

まず、タイトル画面に表示したいイラストを準備します。

コンテンツブラウザの「インポート」から準備したイラストをインポートします。
(気になる人はインポートフォルダを「新規追加」で作って、そこにいれてください。)

次に、タイトル画面を作っていきます。

コンテンツブラウザの「新規追加」から「ユーザーインターフェイス」→「ウィジェットブループリント」を選択するとブループリントが作成できます。
(ここでは、分かりやすいよう名前は「Gamestart」にしました。)
つくられたブループリントをダブルクリックし、開いたウィンドウが「デザイナー」になっているか確認してください。
階層(ヒエラルキー)タブの「Canvas Panel」に、パレットタブの「一般」から「Image」を先程の「Canvas Panel」にドラッグアンドドロップします。
「Image」が「Canvas Panel」の中に入っているのを確認出来たら、「Image」をクリックし、右の詳細タブに移ります。
詳細タブで、「Brush」を広げ、画像の参照をしましょう。
画像サイズが小さいので、真ん中のデザイナウィンドウで拡大するか、「Image Size」で大きさを調整してください。
調整出来たら、詳細タブの「スロット」の「アンカー」を右下の全体にしてください。
これで、機種による画面サイズの違いがあっても調整してくれます。

その次に、ボタンを作ります。
パレットの「一般」に「Button」があるので、これを「Canvas Panel」にドラッグアンドドロップしましょう。
中に入っているのを確認できたら、先ほどと同じように位置にボタンを移動させてください。
移動出来たら、詳細タブの「パレット」の「SizeToContent」にチェックを入れます。

そして、ボタンに文字を入れたいので、一般から「Text」をボタンの階層の中にドラッグアンドドロップしてください。
「Content」の「Text」でボタンに文字を入れましょう。(ここではGamestartと入れました。)
すると、先程「SizetoContent」にチェックを入れていたので、テキストの文字の大きさに合わせてボタンの大きさも変わるようになります。
文字の色やフォントを変えたい場合は「Apperrance」で変えてください。
そして、ボタンのアンカーの位置
を選びます。(どこが一番近いか、でいいと思います。)

最後に適用させるため「コンバイル」を押して画面作りは終了です。(ウィンドウは出したままで大丈夫です。)

それではいよいよ「ボタンを押すとゲームがスタートする」をブループリントで作っていきましょう。

まず、「レベル」と呼ばれるいわゆるステージを作っておきます。タイトル画面なのにステージ?と思われるかもしれませんが、
「ゲームスタートボタンを押すと、ステージクリアになって、新しいステージ(ゲーム)が始まる。」と言った感じでやってもらえばと思います。(※詳しくは違います)

コンテンツブラウザの「新規追加」から「レベル」を選択、作成します。
一応、コンテンツブラウザのMapフォルダに移動させましょう。そして、「~ExampleMap」があると思うので、このレベルの名前をコピーしておいてください。

先程の続きで、Gamestartウィジェットの画面に戻り、詳細タブの「イベント」の「OnClicked」の横「+」を押してください。
これは、「このボタンを押すとどうなるの?」を決めるためのもので、開いたイベントグラフで今から設定していきます。

既に「OnClicked」のイベントノードが作られているので、「このイベント(クリック)が起きたらレベルを開いてね」という意味がある「OpenLebel」ノードを作ります。
(ノードは右クリック、もしくは接続を伸ばすとノードを検索が出てくるので、それで出してきてください。)
開いてほしいレベルは「~ExampleMap」なので、先ほどコピーした名前をLevelNameに貼り付けます。

コンバイルしてコチラの作業は完了です。ウィンドウは閉じてもらってかまいません。

次に、つくったタイトル画面を新しいレベルにしていきましょう。
先程作った新しいレベルのブループリントを開きます。レベル選択して上のブループリントから「レベルブループリントを開く」を選択してください。

ここにある、BeginPlay(このステージが始まったらどうする?という意味)のイベントノードに、作ったタイトル画面を出してきてね!と指示するために
「CreateWidget」と検索し、ウィジェットを作成ノードを呼び出します。
先程のイベントノードと接続し、呼び出すウィジェットのClassを「Gamestart(作ったウィジェット名)」とします。

そして、右の白い接続を引っ張ってきて「変数に昇格」を選びます。セットノードが出てくればOKです。
(ん?と思うかもしれませんが、私もうまく説明できるほどわかってないので割愛します。)

そしてこのタイトル画面を画面に映すよう指示する「Add to Viewport」に先程のセットノードの右側2つとそれぞれを接続します。

コンバイルし、これですべて完成です!
お疲れ様です!

起動後最初のレベルをタイトル画面にするための設定の変更や、ボタンをイラストに変えたり、タイトル画面でアニメーションを再生する方法は検索するとできるので、応用してもらえればと思います!

ここまで読んでくださり、ありがとうございました。
次回は「UE4上だけでキャラクターモーション」を作っていこうと思います!

では!

【参考】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4
・湊和久、2015、『Unreal Engine 4で極めるゲーム開発』、ボーンデジタル

興味を持たれた方はお気軽にお問い合わせください。

Unity Component

こんにちは、インターンシップ生の大谷です。
今回は他のスクリプトへのアクセスの仕方についでです。
unityで制作して行く上で必ず使うときが来ると思います。

こんなオブジェクトがあったとき

こんな風にGetComponentするとアクセスできますよね。

ですが、GetComponentどちらかというと遅い処理になります。

ので、ちょっとでも早くしようということでキャッシュしよう。という考えです

こんな感じ
一度見つけたらキャッシュとして保存しておけば次からはすぐ見つけられるって感じです。
プロパティ使うとコードもすっきります。

便利そう、早くなるなら毎回キャッシュすればいいのか!
っていうとそれもまた違います。

キャッシュをする=メモリを使うということです。
たくさんキャッシュをするとそれだけメモリを食ってしまうので逆に遅くなってしまうかもしれません。
たくさんアクセスをするならキャッシュをするとよい!という感じだと思います。

キャッシュを残しておいたほうがいいのか。そうでないのかというのは場合によって判断しましょう…

唐突ですが、個人的な便利機能の紹介です。
先ほどの

これ。ソースファイルが2つに分かれています。仮にこれが2つじゃなくて10個だったとき1つ1つスクリプトのアタッチするのめんどくさいと思いませんか?
そんなときはRequireComponentを使うと自動的にスクリプトをアタッチしてくれます

MoveやAttackのソースだけをはずそうとすると警告が出るので間違えてうっかりということもなくなると思います

興味を持たれた方はお気軽にお問い合わせください。

第3回webのひみつ(ホームページ考察01)

皆さんこんにちは。
インターンシップ生の明瀨と申します。

今回は前回、予告していた当社のデザインを取り上げて、見ていきたいと思います。
(当社ホームページ)
https://mba-international.jp/
(参考HPレイアウト)
該当するファイルがありません。

(参考URL)
https://liginc.co.jp/designer/archives/6154

こちらの画像と比較をすると主に基本的なリキッドレイアウトのような構成がメインになっていると私は感じました。
しかし、実際に閲覧してみるとわかりますが、まだレスポンシブルwebデザインにはなっておらずPCサイズの決まった形のみでの閲覧となっているため、こちらを携帯対応させるために表記の記述をリキッドレイアウトのように%での画面表記をしていくことで携帯での見やすい画面表記にしていくことが出来ると思います。
また、メインコンテンツの方にはスライドのアニメーションを入れることによって多くのコンテンツを見やすくしている工夫の部分が良いと思っていました。
このようにレスポンシブルwebデザインになっていなくてもリキッドレイアウトのような表記をしていくことやアニメーションを入れる際のコンテンツの見やすく多くを見せていくことが大事だと感じるレイアウトだと思いました。
こちらのレイアウトだと今後携帯対応にもしやすい形になっているため今後のHPの変化が楽しみに感じています。

次に、可変グリッドの参考となるようなHPを取り上げましたので下記に載せます。
(参考HPのURL)
https://www.booking.com/index.html?aid=865885&label=affnetneverbluers-index-1_pub-20004_site-cagyr5b6a478937e69401646951_pname-307400_clkid-HO__18850__102012a02322f65ef618a9fdb9a706&utm_medium=affnet&utm_source=affnetneverbluers&utm_campaign=row&utm_term=index-1

上記のサイトのレイアウトは可変グリッドレイアウトのような形となっているため後からデータを追加していく際にどんどんと下に追加していける形だと感じました。
また、ここのサイトは宿泊予約サイトなのでこのような、色々と場所などを素早く多くチェックできるサイトを構築する際には可変グリッドレイアウトにしていくことがわかりやすく閲覧者に良いレイアウトだと感じます。
こちらは、買い物サイトなどでも有効ですね。

今回はこの2つを持ちましてHPの参考を終わりにしたいと思います。
次回の予告は、今回は第1回webのHPをしましたので、第二回は良いHPが見つかるまでは保留にし、次回は中身について良く曖昧になりそうな部分をまとめていきたいなと思います。
閲覧ありがとうございました。良ければまた見てください(‘ω’)>

興味を持たれた方はお気軽にお問い合わせください。

プログラミング知識0ではじめられる、UE4で簡単ゲーム作り!

こんにちは!インターン生の西井遥と申します。

突然ですがみなさん、自分のオリジナルゲームを作りたい!と思ったことはありませんか?
さらに言うならば、C言語とか難しそうなの使わずに、マウスクリックと必要な数字入力だけでヒョイヒョイ作りたい!と思ったことはないですか?
もっともっと言えば、もともとゲームの基盤が出来てて、自分のキャラや背景に置き換えるだけで作れるようになりたい!

……って思いますよね!

プログラミングもやったことがなく、C言語とやらを見るたびに頭が爆発して諦めていた私ですが、
視覚的かつ直感的に、イベントや物事をつなげるだけでゲームができちゃう優れもの「UnrealEngine4」を知って、それが可能になりました!

今回は、そのUE4でできる基本的なプロジェクトを紹介します。
それがこちら。UE4を立ち上げると出てくる最初の画面です!

作りたいゲームのジャンルはこの中にありましたか?

これらのプロジェクトを選んで「CreateProject」を押すと、もうすでに人型のモデルと、走る、跳ぶ、撃つなどといった基本的な動作、サンプルのマップが用意されてプロジェクトが立ち上がるのです!これだけで感激!
(下の「Desktop/Console」と書いてあるものを、「Mobile/Tablet」に変えることも可能です!)

ゲームをするには、上にある「プレイ」という再生ボタンを押して、画面をクリックすることでできます!(基本はWASD,矢印キーで移動)
さらに、UE4のマーケットにはモデルやモーション、テクスチャなどが無料でたくさん配布されているので、モデル作れない!絵も描けない!背景無理!という人でも大丈夫です!

自分のオリジナルキャラクターモデルを使いたい方は、UE4に元々入っている、~Personのボーンを使って制作するとインポートするだけで簡単に変更することができますよ!(※下のURLを参考にしてください)
キャラクターのアニメーション(モーション)も、エフェクトもUE4上で大体作ることができるので、Mayaでアニメーションを作れなくても大丈夫です!(後日やり方を記事にする予定です。)

……肝心のプログラミング部分は?

こちら!(ブループリントといいます。)
この四角いグループの繋がりから、
「ジャンプをしたら、今持っているMPから0.25減らしてね」
を視覚的に捉えられるかと思います。

この四角をノードといい、簡単に言うとプログラミング言語に代わるものです。

C言語はお手本通りやってもどこで間違ったか気付きにくそうですが、これなら四角(ノード)の種類と線がどこに繋がっているかを見るだけで間違いを見つけることができます!

いかがでしたか?
難しくてゲーム作りを挫折してしまった方も、知識ないけど今から作りたい!という方も、是非チャレンジしてみてください!

次回は「タイトル画面で[ゲームスタート]ボタンを押すとゲームが始まる」
を簡単に作ってみたいとおもいます!

では!

【参考】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4
・Chara@Mayaライブ!~キャラクターセットアップからUE4への出力~
(URL:https://area.autodesk.jp/movie/cedec-2017/chara-maya-live.html

興味を持たれた方はお気軽にお問い合わせください。

unity初心者へオススメ参考書レビュー

初めまして。インターン学生の大谷祐馬と申します。
ゲーム制作のインターンということでゲーム制作でよく用いられるエンジンの一つであるunityの覚えるべきことをunity初心者の方向けに書いていこうと思います。
何かを勉強する上で参考書買おう!と決めていざ参考書選びとなるとぶっちゃけどれを買ったらいいか迷いませんか??(僕は迷います…)
ので初回は少し題材から外れてしまうかもしれませんがいくつか参考書を紹介したいと思います!! *読んだことのあるもののみになります

Unity5入門 最新開発環境による簡単3D&2Dゲーム制作
ひよこ本ってやつです 入門といえばこの本ってよく聞きます
プログラムを全く触ったことのない人でも割と何とかなってしまう本
インストールから丁寧に説明してくれるのでこの本のとおりに作っていけば動くものは作れます

Unityの教科書 Unity 2018完全対応版 2D&3Dスマートフォンゲーム入門講座
個人的に一番オススメの本
C#についても丁寧に解説がついていて、プログラム初心者でもわかりやすく説明されていると思います
画像もたくさん使われていてわりと躓くことなくすんなりと学んでいけると思います

ゲームの作り方 Unityで覚える遊びのアルゴリズム
初心者向けではないと思います 本の最初にも記述があるのですが、
引用始め
今本を読んでほしい人   
この本が対象としているのはUnityの使い方は覚えた。C#も基礎的なことはわかる。次は自分で考えたゲームを作りたい!
引用終わり
とあるように初心者向けというよりは初心者から中級者のステップアップのための本みたいな位置付けだと思います。
ので、初心者の方にオススメというよりはステップアップしたい人向けという感じです。

unityではじめるゲームづくり
少し古い本になるのかなと思います
初心者向けというよりは中級者向けになると思います
付属のDVDが割りと丁寧に解説してくれているのでDVDは必ず見たほうがいいと思います。

Unity5 3D/2Dゲーム開発実践入門
僕が始めてかった参考書です。
unityを全く触ったことのない初心者の人向けというよりはunityで作ったゲームをもっと面白くするにはどうしたらいいの?って人向けだと思います。
他の本で詳しく解説されていないシェーダーやライティングなどの解説も載っています。
iOS/Androidのゲームをストアに公開する方法なんかも載っているので、ある程度ゲームをつくれるようになった!という人にオススメ

個人的には最初の一冊はUnityの教科書 Unity 2018完全対応版 2D&3Dスマートフォンゲーム入門講座がオススメです!
どの参考書にも共通して言えることは参考書通りに読んで作るだけでは得られない知識はたくさんあるので自分でゲームを作ってみてわからないところはググる
これをしていかないとunityを使えるようにはならないと思うので参考書を読んで作れた!に満足せず自分で色々なゲームを作って色々な知識を吸収していきましょう!

以下画像引用先
Unity5入門 最新開発環境による簡単3D&2Dゲーム制作
https://www.amazon.co.jp/Unity5%E5%85%A5%E9%96%80-%E6%9C%80%E6%96%B0%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AB%E3%82%88%E3%82%8B%E7%B0%A1%E5%8D%983D%EF%BC%862D%E3%82%B2%E3%83%BC%E3%83%A0%E5%88%B6%E4%BD%9C-%E8%8D%92%E5%B7%9D-%E5%B7%A7%E4%B9%9F-ebook/dp/B012VRQX4G

Unityの教科書 Unity 2018完全対応版 2D&3Dスマートフォンゲーム入門講座
https://www.amazon.co.jp/Unity%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-Unity-2018%E5%AE%8C%E5%85%A8%E5%AF%BE%E5%BF%9C%E7%89%88-3D%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B2%E3%83%BC%E3%83%A0%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-Entertainment/dp/4797397659

ゲームの作り方 Unityで覚える遊びのアルゴリズム
https://www.amazon.co.jp/%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E6%94%B9%E8%A8%82%E7%89%88-Unity%E3%81%A7%E8%A6%9A%E3%81%88%E3%82%8B%E9%81%8A%E3%81%B3%E3%81%AE%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0-%E5%8A%A0%E8%97%A4-%E6%94%BF%E6%A8%B9/dp/4797384255

unityではじめるゲームづくり
https://www.amazon.co.jp/Unity%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%A5%E3%81%8F%E3%82%8A-%E3%82%B2%E3%83%BC%E3%83%97%E3%83%AD%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%9F%E3%82%B7%E3%82%A7%E3%83%AB%E3%83%BB%E3%83%A1%E3%83%8A%E3%83%BC%E3%83%89/dp/4797367725

Unity5 3D/2Dゲーム開発実践入門 作りながら覚えるスマートフォンゲーム開発
https://www.amazon.co.jp/Unity5-3D-2D%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%E4%BD%9C%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E8%A6%9A%E3%81%88%E3%82%8B%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA-%E5%90%89%E8%B0%B7-%E5%B9%B9%E4%BA%BA/dp/4883379671/ref=pd_lpo_sbs_14_t_2?_encoding=UTF8&psc=1&refRID=DR56HR0FYE7CF3Q80W1K

興味を持たれた方はお気軽にお問い合わせください。

第2回webのひみつ(フレシキブル、可変グリッドレイアウトについて)

皆さんこんにちは。
インターンシップ生の明瀨と申します。

今回は前回、予告していたフレシキブルレイアウトに関する情報を取り上げてまとめていきたいと思います。
また、可変グリッドレイアウトについても述べていきたいと思います。
(フレシキブルレイアウト参考画像)

(引用元URL)
http://liginc.co.jp/designer/archives/6154

このフレキシキブルレイアウトは、画像に挙げられている、ヘッダーやメインビジュアル、コンテンツなどの要素を可変的に調整することが可能となっています。
また画面の横幅などのバランスも相対的に調整できるものとなっているため中央に揃え見やすくすることができます。
このレイアウトの特徴としては、上記の内容は、リキッドレイアウトと呼ばれるレイアウトと同じ内容です。
しかし、こちらは最大幅や最小幅の指定を行うため、大きな画面サイズのみ余白が出来るものとなっています。
つまり、PCモニターやテレビなどの大きな画面で表記した時、決まった形の画面表記を行うことが出来るものとなっています。
これが、リキッドレイアウトとの主な違いとなっています。

次に可変グリッドレイアウトについて取り上げていきたいと思います。
(可変グリッドレイアウト参考画像)

(引用元URL)
http://liginc.co.jp/designer/archives/6154

こちらの主な特徴は、リキッドレイアウトの可変できる性質を持ちながら、画面サイズによって決められたボックスのサイズや位置に再配置されるというものが主な特徴となっています。
つまり、PCを使用すればPCでのコンテンツのサイズや位置、携帯であれば、携帯でのコンテンツのサイズや位置など様々な画面表示を行うサイズによって、表記方法を変化させることが出来ます。
これは、凄くユーザーにとって見やすいものとなっていますが、もしコンテンツの内容が多い場合だとPCでの表記だととても見やすく、携帯だとサイズが小さくコンテンツの量が多いとすごく見ずらい表記となる可能性があるため、そこは作成者のセンスや能力が問われてきまので、作成者様には頑張っていただきたいです。
以上の内容が可変グリッドレイアウトの内容となっています。

今回は以上の2つの記事を書いたところで終わりにしたいと思います。
次回の予告ですが、次回からは色々なホームページを参考にして実際にレスポンシブルwebデザインとなっている記事を参照していきながらどのようなデザインがあるかを客観的に見ていきたいと思います。
まず記念すべき1回目のホームページデザイン参照のため、当社デザインについても見ていきたいと考えています。
次回もまたお楽しみ下さい。閲覧ありがとうございました。

(参考記事)
<フレシキブルレイアウトについて>
http://liginc.co.jp/designer/archives/6154
<追加参考>
http://e-words.jp/w/

興味を持たれた方はお気軽にお問い合わせください。

第1回webのひみつ(レスポンシブルwebデザインとは?)

初めまして。
インターンシップ生の明瀨と申します。

今の世の中、色々な企業や個人で様々なウェブページのデザインのレイアウトがあります。
今回から私がその色々な方が作ってきたウェブページの中にどのようなレイアウトがあるかをとり上げてそのレイアウトに関することを1個ずつどのような利点などがあるかをまとめていきたいと思っています。

まず第一回として、レスポンシブルwebデザインについてや1個目の枠があれば参考例としてフレキシブル・レイアウト(FlexibleLayout)に関することについて自分なりにまとめていきたいと思います。
(レスポンシブルwebデザインについて)
これは、PCやタブレットなどの複数の異なる画面のサイズをWebサイト表示の判断基準として、ページのレイアウトやデザインを柔軟に調整できるデザインのことを示しています。
これを制作する方法として、スマホやPCなどのデバイス対して、各自にHTMLファイルを作成していく方法が一般的な作成方法として挙げられていました。
このページを作成する上でメリットやデメリットも存在するため、そちらについてもまとめると以下のような内容が主となりました。
(メリット)
<引用始め>
・現在多くの ブラウザによってサポートされている CSS3を使用しているため、汎用的である。より多くの人に見てもらえる。
・カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになる。そのため、サイト上の情報を適切に得ることができる。
・ HTMLを分けるモバイルサイトでは、 デバイスの数だけ HTMLを増やしていかなければならないが、レスポンシブで制作すれば HTMLファイルは同一なので管理がしやすい。修正も1つの HTMLだけでよいので、モバイルサイトは古いままといった事態を防げる。
<引用終わり>
<引用元URL>
https://ferret-plus.com/2633

(デメリット)
<引用始め>
・PC用の HTMLコードや CSSも読み込むため、表示に時間がかかる。 CSSで画面に表示しないようにしても、読み込みは行われるため、 ユーザーが待ちきれなくなる恐れがある。
・画像も同様。PC用の大きい画像では携帯用の3G/4G回線で読み込むのに時間がかかる。
・シンプルな ページであればよいが、レスポンシブサイトの制作は通常より工数がかかる場合が多い。
・PCサイトのテキストや画像が多すぎる場合、スマホ ページでは文字が溢れてしまうなどレスポンシブ化は難しくなる。
<引用終わり>
<引用元URL>
https://ferret-plus.com/2633

これらが主なメリット、デメリットとなっています。
これらを通して私は、デメリットが存在しますが、携帯やPCなど様々な端末で見れる点は多くの人々に見てもらえる可能性があるため、レスポンシブルwebデザインを制作していくことは重要なものだと感じました。

次にこのデザインの一部としての参考例としてフレシキブルレイアウトについて述べたいと思いますが記事の枠が超えるため、参考画像だけを提示しておきます。次回はこれらの説明や他のレイアウトに関して取り上げていきたいと思います。

(フレシキブルレイアウト参考画像)

(引用元URL)http://liginc.co.jp/designer/archives/6154

(参考記事)
<レスポンシブルwebデザインについて>
http://liginc.co.jp/designer/archives/6154

興味を持たれた方はお気軽にお問い合わせください。