LR

開発日誌

―リトル・リコレクターのメンバーが、それぞれの目線で開発の様子をお届けします―

ストライプ

はじめまして!

Webデザイナーとして参加している富澤です。
今回、Webサイトのリニューアルを担当しました!
本職は3Dデザイナーですが、多少知識があるということで清水さんから引き継ぐ形で参加しました!

3Dデザイナーがなぜにそんな知識があるのかというと、大学時代は情報系を専攻していたからなんですね。
Python、C++、JavaScript、HTMLなどなど…
主要なプログラミング言語は一通り学びました。

そんな経験から、今回このような役回りを任せていただきました!

正直、やります!と返事したものの、かなりブランクもあって知識もほぼ抜け落ちていましたね。
自分の楽観的というか、何とかなるだろう精神が恐ろしいです。(実際何とかなった)

前回の Webページ作成の時と同じように、今回も作業を分担しています。
御園さんにデザインを担当していただいて、私がそれをCSSやらPHPやらJavaScriptに落とし込んでWebページに反映させるのを担当しました!

引継ぎは難しい

今回の作業で特に難しいというか、時間を取られた作業は、どういう構造で作っているのかを把握することでした。
引継ぎということで、どのデザインがどのCSSとリンクしているのかとか、どういったPHPでこれは動作しているのかとか、CSSにないと思ったらPHPで指定していたりとか、そういったことを把握するのにかなり時間を使いましたね。 CSSの勉強しつつでちょっとずつの改装でした!

画像を差し替えればうまくいきそうかなと思って、差し替えてみたら全く違う見た目になったり、使わないなーと思ったコードを消したらレイアウト変わったりと、理解が進むまではかなり苦戦していました…

リニューアル

そんなこんなで新Webサイトが完成したのですが、どうでしょうか?
なかなかかっこよくもかわいくもできていると思います。

今回のリニューアルでは、「トップページ」と「公式4コマ」は大幅に改装されて、新たに「ギャラリー」が追加されました!

トップページ

トップページ

公式4コマ

公式4コマ

ギャラリー

ギャラリー(掲載内容はテスト画像)

作ってみて思ったのは頂いたデザイン通りに作るのは簡単だが、ユーザビリティを考えるとそう簡単にはいかないなということです。
見やすさや操作性のために数ピクセル単位での修正が必要になることもありました。

デザインの通りできても、ボタンの大きさや、見出しの位置、画像の大きさなど、Webサイトを使う側からすると使いにくい分かりにくいと感じそうな部分を微調整する作業が必要になってきます。

そういった部分を修正し、先輩方にフィードバックを頂いたりして、今回新しいWebサイトを形にすることができました!
皆さんぜひ見てみてください!

今回は、Webサイトをリニューアルしたよ~というお話でした。
また機会があればお会いしましょう!

はじめまして、デザイナーの太田です。
4コマ漫画『とりたんっ!』作画担当その2です。

今週は第2話が更新されました~!
内容はこちら

今回は『とりたんっ!』がどのような流れで作られているのかお話しします。
第2話のネタバレが含まれるので、まだ読んでない方は上のリンクからぜひご覧ください!!


『とりたんっ!』の制作は大きく4つの段階に分けられます。

  • 案出し
  • ネーム
  • ラフ
  • 清書

です。
1個ずつ解説していきます!

案出し

各話のあらすじを決めます。
この段階では絵は無く、短い文章で簡単に書かれています。
担当職種に関わらず、プロジェクトに関わる色んな人が案を出しています!

ネーム

あらすじを4コマの形にします。
我々デザイナーが担当することもありますが、
「リトル・リコレクター」の世界観に深く関わるお話は企画の人が描いてくれます。

今回の第2話は企画でありディレクターでもある笹口くんが描いてくれました!
それがこちらです!

ネーム 設定に関わるところは一部伏せています。

4コマ目のトリスタンの顔が可愛いです。

ラフ

ここからは私が担当しました。
描いてもらったネームを元に、絵の構図や文章を決定していきます!
4コマとして読みやすいよう、ネームの内容を調整して…
こうなりました。

ラフ

特に3コマ目の文章については悩みました。
文字を詰めすぎず、必要な情報は伝えたい…!
笹口くんやアートディレクターの清水さんと話し合いを重ねて、こちらの形になりました。
4コマの内容は、この段階でほとんど確定します。

清書

ラフを清書して、色をつけます。
小野田さんが作ってくれた立ち絵(先々週の日誌で見れます!)を見つつ、キャラクターのイメージが壊れないよう作画しました。 こうしてついに、完成です!

清書

4コマはデザイナーだけでなく、多くの人が関わって作られています。
これからもアニーとトリスタンの可愛いお話をお届けするので、
次回もぜひ見てくださいね~!

こんにちは、デザイナーの神田です。
今回は、ゲーム画面の味付けについて、ご紹介したいと思います。

🎨描き込みだけじゃ、もったいない

「リトル・リコレクター」は、2Dのグラフィックをかなり描き込んでいるタイトルです。
背景や小物など、せっかく丁寧に作り込まれているので、“絵を貼りっぱなし”の状態から一歩進んで
ちょっとした演出を加え、より没入感のある世界に仕上げてみたいと思います。

空気感の演出

待機モーションがかわいい。

こちらはこのゲームの塔の背景です。
絵は描き込まれていますが、静止画なので背景の素材そのままという印象が強いかもしれません。
そこで、ほこりのような、霧のような、やわらかい動きを加えてみます。

塔内部の空気感、感じられるでしょうか…?
実際にゲームとして動かしたとき、こうした演出が加わることで
この世界、この場所の雰囲気をより感じられるようになります。
細かな演出ですが、視覚的な印象がグッと変わるので、かなり大事な要素です。

🛠️味付けはまだまだ続く

今後は、インタラクト可能なオブジェクト以外にも、
装飾の小物や光を感じられる飾りを配置していければと考えています。
もっと深く世界観を感じられるような画面を目指して、飾り付けを進めていきます。

そして、長らく(それこそ私が前回ブログを担当した3月から)温めている
このゲームの“1大ギミック”の表現についても、
近日中にご紹介できるかもしれません……!

どうぞお楽しみに!!✨

みなさん、初めまして!
「リトル・リコレクター」内では4コマ漫画『とりたんっ!』を担当しております小野田と申します。
ついに今週から4コマ漫画も始動し、記念すべき第1話が更新されました!

第1話はこちら

みなさんはご覧いただけましたでしょうか?
既にご覧いただいた方も、まだという方も楽しめるよう、本記事では「4コマ漫画のキャラクターイメージ」についてお話ししたいと思います。


漫画ではゲームでも一つの要素である「キャラクターの可愛らしさ」を守りつつ、また違ったポップな雰囲気となっています。
そんな方針で、絵柄を決める際に最終的に2択まで絞ったラフイメージがこちらです。

4コマ漫画用のキャラクターデザイン

こうして並べて見ると、頭身が違うだけでもかなり雰囲気が違って見えますね!👀
そんな中で、作画担当が複数人になっても雰囲気を守りやすく、そして何よりも可愛らしく、よりオーバーめに……と相談した結果1案目のもっちりとした可愛らしい絵柄に決定しました。

このような感じで、今後は「リトル・リコレクター」と一緒に『とりたんっ!』の方の連載も進んでいきます!
アニー&トリスタンの様子や世界観のお話などなど……「リトル・リコレクター」のことがもっと楽しめること間違いなしなお話が続いていくので、是非4コマ漫画『とりたんっ!』もよろしくお願いいたします!🕊️

それではまた、次回の更新もお楽しみに!

む、難しい~~~っっ!!!!!

「作曲」と書かれた紙を頭に抱え悶えている様

元ネタ:#8「Webデザインに再挑戦!」


こんにちは。寺沼です。

ToReturnには、企画・デザイン・プログラムそれぞれにディレクターがいます。
しかし、ゲームにはもう一つ大事な要素があります。
そう、BGMやSEなどのサウンドです。

まず前提として、ウニコにはサウンド専門の社員は存在しません。
これまでの弊社オリジナルタイトルでは、外部のプロの方にお願いしたり、フリーのBGMを使用するといった手段を用いています。
しかし今回は、趣味で作曲をしている私の方でBGMを作ってみることにしました。


さて、まずは全体的な雰囲気を探ろうということで、以下のような曲を作ってみました。

「浮島に吹く風」をテーマとして、探索中のBGMをイメージして作ってみた曲です。
イメージのすり合わせのため、笹口さんにフィードバックをお願いしたところ、
「テンポが緩やか」「長閑な雰囲気」といった指摘を受けました。

どうやら、探索中の曲にしては、広がりがあり、屋外っぽい雰囲気なのが問題のようでした。

「もうちょっとテンポを上げるか?」とか「ドラムパターンを変えてみるか?」とか考えていたのですが、
そんな時、清水くんがシリアスっぽくアレンジを作ってくれました。

めっちゃいい!探索っぽい!
ということで、このゲームのサウンド周りは私と清水くんの二人三脚でやることになりました。
二人で協力しながら、よりよいサウンドを作って行ければと思いますので、よろしくお願いします。

それでは。

1 2 3 4  > 

page top