トナカイと白ひげのおじいさんに学ぶUVアニメーション

この記事は Tech KAYAC Advent Calendar 2021 の24日目の記事です。

こんにちは!
意匠部のおばらです。

今日はUVアニメーションのお話です。

f:id:tsmallfield:20211224082820p:plain

目次

UVとは?

3Dの世界でUVといえばUV座標のことです。
UV座標は頂点の3次元座標がテクスチャ上のどの位置に対応するかを表す2次元座標。
きれいなUVだね〜とか、UVがずれてるじゃんとか、UV展開しといて〜、とかそんな感じで使います。

ところでUVってどういう意味なのでしょう?
なにかの頭文字でしょうか?

なぜ`U`と`V`なのか

むかしむかしあるところに、3次元の座標をアルファベットの最後の3文字 X, Y, Z で表らわそうと決めた働き者のトナカイがいました。
彼は職業柄、自分の位置を3次元空間上で把握する必要があったのです。

🦌「よ〜し、3次元の座標を X, Y, Z で表すぞ〜!」
🎅🏻「( ˘ω˘ )zzZ」 f:id:tsmallfield:20211223094706p:plain

ところがしばらくすると3次元ではなく4次元の計算もしたくなりました。
位置情報だけではなく自分がどこを向いてるのかという回転情報も把握する必要があったのです。
オイラー角なら3次元で事足りますがジンバルロックに遭遇して道(空?)に迷ったら一大事。
ですから4次元のクォータニオンで回転情報を表す必要がありました。
しかしXYZの次にまだアルファベットがあればよかったものの、御存知の通り Z までしかありません。
そこでトナカイは近くにいた白ひげのおじいさんに相談しました。

🦌「恐れながら申し上げます、、、」
🎅🏻「うむ。遠慮なく申してみろ」
🦌「4次元座標を表すためにXYZに加えてもう一つアルファベットが欲しいのでございます。。」
🎅🏻「えっ、、、w」
🎅🏻「おぬしはちと見通しが甘いのではないかな」
🦌「も、申し訳ございません。。」
🎅🏻「まぁよい」
🎅🏻「X, Y, Z の次は、、」
🦌「a?」
🎅🏻「Xの前のWを使うのじゃw」
🦌「XYZWだと順番があべこべでございますが。。」
🎅🏻「・・・そ、そんな細かいことを気にするでない」
🦌「ww」
f:id:tsmallfield:20211223094729p:plain

さらにその後、地図(テクスチャ)上の2次元座標を表す2つのアルファベットが欲しくなりました。
3次元空間の座標と区別したいので X, Y 以外の別のアルファベットが必要になったのです。
トナカイはまた白ひげのおじいさんに相談しました。

🦌「2次元のテクスチャ座標を表すアルファベットが欲しいのですが。。」
🎅🏻「XYがあるじゃろ」
🦌「それが、、3次元空間のX, Yと区別したいのでございます。。」
🎅🏻「うむ、それは一理あるのぉ。。」
🎅🏻「Wの次は、、 UV の出番じゃな」
🦌「なるほど〜 u(^ ^ )v」

f:id:tsmallfield:20211223094750p:plain

はい、以上がテクスチャ座標がUV座標と呼ばれる理由です。たぶん。
ちなみに2次元座標を S, T で表す場合もあります。。

🦌「XY でも UV でもないアルファベットで2次元座標を表したいのですが。。」
🎅🏻「な、なるほど、、今度はそうきおったか。。」
🎅🏻「え〜とU, V の次だから、、 ST を使うのじゃ」
🦌「はいぃ〜 (T T)」

f:id:tsmallfield:20211223094810p:plain

そういえば色は R(Red), G(Green), B(Blue), A(Alpha) で表しますね。
単語の頭文字をとったほうがわかりやすいと気づいたのでしょうか?

🦌「XYZW以外のアルファベットで表したい4次元の情報があるですが。。」
🎅🏻「ふむ。それは何じゃ?」
🦌「色を ①赤、②緑、③青、④透明度 の4つの値で表したいのでございます。。」
🎅🏻「う〜む、きりがないのぉ」
🎅🏻「じゃあ、S, T, の次だから、R, Q, P, O 。。
🎅🏻「(いやまてよ、ここでしれっと軌道修正しておこうかのぉ、、)」
🎅🏻「頭文字で R(Red), G(Green), B(Blue), A(Alpha) とするのはどうじゃ?」
🦌「わかりやすいし覚えやすいです〜!o(> <)b」
🎅🏻「わしゃ天才じゃな!」
f:id:tsmallfield:20211223094849p:plain

そしてなんと、4次元座標を XYZW でも RGBA でもなく S, T, に P, Q を加えて STPQ で表す場合も。。。

🦌「さらに別のアルファベットでも4次元座標を表したいのでございますが。。」
🎅🏻「・・・」
🎅🏻「もう知らん!じゃあ、Rはもう色で使っちゃったから新たにP, Q を使えぃ!」
🎅🏻「STPQ をくっつけて STPQ じゃ!」
🦌「・・・」
🎅🏻「なにか不満でもあるのかな?」
🦌「い、いえ、、とんでもございません!」
f:id:tsmallfield:20211223094953p:plain

だんだん頭がこんがらがってきました。
ここまでの流れをわかりやく GIF にしてみます。
f:id:tsmallfield:20211223095048g:plain

実際にこういった経緯だった定かではございませんし、一部、いやだいぶ想像のお話ですが
こう考えると覚えやすいですよね!

ちなみにシェーダ(GLSL)でこんなベクトルがあった時

vec4 hoge = vec4(1, 2, 3, 4);

それぞれの4つの要素には
x, y, z, w
でも
r, g, b, a
でも
s, t, p, q
でもどれでもアクセスできちゃいます。便利。
(※ でも u, v はなぜか使えません。。)
(※ ベクトルのコンストラクタは自動で型変換をしてくれるのでintを渡してもOKです)

本題

調子に乗って昔話が長くなりました。
ごめんなさい。
話を本題に戻します。

UVアニメーションとは頂点座標(XYZ)ではなくテクスチャ上の座標を動かすテクニックです。
例えば、以下のような乗り物を考えます。

f:id:tsmallfield:20211224035702j:plain

ちょうどこの時期たくさんの荷物を世界中に配送する例の乗り物です。
でもこれは足まわりがカスタマイズされていますね。
🦌トナカイが引っ張るかわりに🐛履帯(キャタピラ)がついています。
トナカイはおじいさんとソリが合わなかったのでしょうか。
(※このような駆動装置は一般にキャタピラ(Caterpiller)と呼ばれますが、 当記事ではあえて「履帯(りたい)」と呼ぶことにします。

ja.wikipedia.org
さて、この履帯をJavaScriptでアニメーションさせるにはどうすればよいでしょう?
3Dのモデリングソフトでアニメーションを付けてJavaScriptで再生するのは大変そうですね。

タイヤはただくるくる回せば良いけど履帯は。。。

丸いタイヤだったらただメッシュをくるくる回せば良いです。
試しに Three.js でタイヤに見立てた8角柱のメッシュを回してみました。

See the Pen Untitled by Tohl SMALLFIELD (@tsmallfield) on CodePen.

しかし履帯の場合はそう簡単にはいきません。
そこで登場するのがUVアニメーションです。

UVアニメーション

UVアニメーションはどちらかと言うとプログラムよりもモデルデータとテクスチャに工夫が必要です。

さっそくこちらをご覧ください。 f:id:tsmallfield:20211223194418p:plain

UVはこちら。このUVがポイントです。 f:id:tsmallfield:20211223194948p:plain

そしてテクスチャ。つい趣味で作り込んでしまいます。
(※ テクスチャのサイズに関して: 条件によっては横幅と縦幅がそれぞれ2のN乗である必要がありますが正方形である必要はありません) f:id:tsmallfield:20211223195244j:plain

テクスチャをモデルにはめるとこうなります。

f:id:tsmallfield:20211223195807j:plain

ポリゴンのラインを表示させるとこんな感じ。

f:id:tsmallfield:20211223195836j:plain

実はこの履帯は社内のWebGL勉強会用に作ったミニタンクのパーツです笑

f:id:tsmallfield:20211224100945j:plain

UVアニメーションの仕組み

Blender上でUV座標を動かしてみました。
(マウスで)横方向に動かしているだけです。
頂点は動いていないのに、まるで履帯が動いているように見えますね。
これがUVアニメーションです。

f:id:tsmallfield:20211223192658g:plain

Three.js でUVアニメーション

Three.js を使いUVアニメーションで履帯を動かして動いてる風に見せてみました。
「ワイヤフレーム表示」ボタンをクリックするとワイヤフレーム表示に切り替わります。
頂点座標はアニメーションしていないことがわかると思います。

See the Pen crawler.sample.01.preview by Tohl SMALLFIELD (@tsmallfield) on CodePen.

次にUVアニメーションのロジックを説明します。

JavaScript

UV座標の移動量を入れる2次元のベクトルuvOffsetを用意します。
今回は横方向にのみUV座標を動かすため2次元である必要はありませんが、一応こうしておきます。

const uvOffset = new THREE.Vector2;

頂点シェーダでuvOffsetの情報を受け取れるようマテリアルに渡します。
説明のためシェーダは0から書きたいのでマテリアルは THREE.RawShaderMaterial を使用しています。

テクスチャはリピートされるようにしておきましょう。

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

はい、ここでSTが出てきましたね。
S は横方向、Tは縦方向を意味します。
(※サンプルでは横方向にしか動かさないため、 wrapTTHREE.RepeatWrapping に設定する必要は本当はありません)

const material = new THREE.RawShaderMaterial({
    uniforms: {
        texture: { value: texture },
        uvOffset: { value: uvOffset },
    },
    vertexShader,
    fragmentShader,
});

10秒で履帯がひと回りするよう毎フレームで値を更新します。

requestAnimationFrame(function render(time) {
    const DURATION = 10000;
    const x = (time % DURATION) / DURATION;
    
    uvOffset.x = x;
    ...
    requestAnimationFrame(render);
});

こうするとtは0以上1未満を10秒ごとに繰り返します。
JavaScript の説明は以上です。シンプル!

頂点シェーダ

See the Pen crawler.sample01.vertexShader.glsl.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen.

ポイントはここ!JavaScriptから渡された uvOffsetuv に足しています。

vUv = uv + uvOffset;

あとはいつもどおりです。

フラグメントシェーダ

See the Pen crawler.sample01.fragmentShader.glsl.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen.

特に変わったことはしていません。
頂点シェーダから(補間された上で)渡されたUV座標をもとにテクスチャから色を取得しています。
(※デモ用にワイヤフレーム表示かどうかで処理を変えてます)
シェーダもシンプル!

さて、無事UVアニメーションで履帯が動いている風にできましたが、やっぱり頂点をちゃんと動かしたい気も。。
特に履帯はゴツゴツとしたメカメカしい部品が動くのが格好いいのです。

そこでUVアニメーションの概念を応用してみましょう。

UVアニメーションの応用

作り直したモデルです。ディテールが増していますね。
f:id:tsmallfield:20211224015924p:plain

UV
f:id:tsmallfield:20211224023208p:plain

テクスチャ
f:id:tsmallfield:20211224023116j:plain

テクスチャをはめるとこんな感じです。
f:id:tsmallfield:20211224023139p:plain


f:id:tsmallfield:20211224023155p:plain

まずは動かしてみる

サンプルを用意しました。
履帯が動いてる風ではなく、ちゃんと個々のパーツが動いてますね!
ワイヤフレーム表示にすると、頂点がアニメーションしていることがわかると思います。

See the Pen crawler.sample02.preview by Tohl SMALLFIELD (@tsmallfield) on CodePen.

JavaScript

新たに2つのテクスチャを読み込んでいます。

f:id:tsmallfield:20211224080253p:plain

f:id:tsmallfield:20211224080304p:plain

それぞれ
・X座標の時間経過が格納されたテクスチャ
・Y座標の時間経過が格納されたテクスチャ
です。

頂点座標の時間経過をテクスチャに格納しておき、
毎フレームUV座標をちょっとずつずらしつつ頂点座標をテクスチャから取得しようという作戦です。

頂点シェーダ

See the Pen crawler.sample02.vertexShader.glsl.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen.

後ほど触れますが、テクスチャのR,G,Bチャンネルに8ビットずつ、合計24ビットの領域に数値が埋め込まれています。
それを抜き出す関数がこちらです。

float unpackFloat24FromRGB(vec3 rgb) {
    vec3 v = vec3(
        1.0,
        1.0 / 255.0,
        1.0 / 65025.0
    );
    
    return dot(rgb, v);
}

UV座標にJavaScriptから渡されたuvOffsetを足し、 その座標を元にそれぞれのテクスチャからx, y 座標を抜き出します。

float x = unpackFloat24FromRGB(
    texture2D(texPositionX, uv + uvOffset).rgb
);
    
float y = unpackFloat24FromRGB(
    texture2D(texPositionY, uv + uvOffset).rgb
);

抜き出した値は0.0〜1.0に正規化されているのでそれを元の範囲に戻します。

vec4 pos = vec4(
    position.x,
    y * POS_Y_RNG + POS_Y_MIN,
    x * POS_X_RNG + POS_X_MIN,
    1
);

(※諸事情によりX座標とZ座標を入れ替えてます)

あとはいつもどおり行列をかけて座標変換するだけです。

gl_Position = projectionMatrix * modelViewMatrix * pos;

(※お気付きかもしれませんがモデルデータのZ座標、Y座標は全く使っていません笑)

フラグメントシェーダ

See the Pen crawler.sample02.fragmentShader.glsl.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen.

こちらは全く変更なしです。

次にテクスチャに頂点座標の時間経過を格納する方法を説明します。

頂点座標の時間経過をテクスチャに格納する

まずテクスチャに頂点座標を格納する専用のモデルを別に作成します。
UVが切れ目なく敷き詰められている必要があるからです。
履帯が動いたときの通り道の形状を作るイメージです。 f:id:tsmallfield:20211224070235p:plain

このモデルを使いX座標とY座標の時間経過をテクスチャに格納するサンプルコードが以下です。

See the Pen crawler.positionBaker by Tohl SMALLFIELD (@tsmallfield) on CodePen.

(※ 生成するテクスチャのサイズは実際よりも小さめにしています)

頂点シェーダ(X座標用)

See the Pen crawler.positionBaker.x.vs.glsl.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen.

まず、各頂点のX座標を0.0〜1.0に正規化します。
(※ 正規化するための定数はBlenderでモデルの座標を見ながら手入力しています)

正規化された値をR,G,Bチャンネルに8ビットずつ、24ビットの精度でvec4に埋め込みます。
(※ XYZでもSTPでもなくRGBと書いてるのは、後に色情報として使われることになるからです)
(※ 24ビットにするのは8ビットでは精度が足りないためです)
(※ Aチャンネルを使わないのは劣化を避けるためです)

f:id:tsmallfield:20211224074508p:plain

24ビットの精度でX座標が埋め込まれたvec4varying変数で(色情報として)頂点シェーダに渡します。

フラグメントシェーダ(X座標用)

See the Pen crawler.positionBaker.x.fs.glsl.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen.

頂点シェーダから渡された(そして複数の頂点間で補間された)データを色情報として gl_FragColor に代入します。
この補間機能のおかげで、生成したテクスチャはなめらかなグラデーションとなり、結果頂点をシームレスに動かせます。

まとめ

さていかがだったでしょうか?
本当はソリも動かそうと思ったのですがここで力尽きたのでまたの機会に。。

f:id:tsmallfield:20211224090148j:plain

(※ちなみにこのソリは同僚に作らせ作ってもらいました!)

代わりにミニタンクのGIFアニでご容赦ください。。

f:id:tsmallfield:20211224101413g:plain

さて明日12月25日は意匠部デザイナー、べるの記事です!
お楽しみに!!


カヤックではデザインもしたい!JavaScriptもGLSLも書きたい!3Dモデリングもしたい! そんなアートディレクター/デザイナーを大募集中です!

www.kayac.com

突撃!隣のリモートワーク環境 2021

この記事は Tech KAYAC Advent Calendar 2021 の23日目の記事です。

技術部2年目サーバサイドエンジニアのkolukuです。
2年経っても未だにコロナ下にある昨今、去年から引き続きリモートワークを行っている会社も多いのではないでしょうか?自分自身も入社直後からリモートワークで人と接点が無く、時々他の社員はどんなふうに仕事をしているのか思いふけることがあります。

リモートワークといえば、昨年はリモートワークでこう仕事しています!という紹介記事がたくさんありました。それを思い出した自分は社内で「2年かけて熟成されたリモートワーク環境のデスクを見てみたいので、なるべくありのままの状態を見てみたい」という要望で募集したところ、なんと14名も本企画に参加いただけました!

エンジニア編

エンジニアのデスクと聞くと「とにかくモニターがいっぱいに並んでいそう」「ガジェットでごちゃごちゃしていそう」などそんなイメージを一度は持ったことはないでしょうか。リモートワークは職場とは違い、各々の自宅で作業されるため個性豊かな環境で仕事をしていそうなものですが、実際にどのように働いているのか見せてもらいました。

ゲーム事業部/サーバーサイドエンジニア/koluku

f:id:koluku:20211222161420j:plain

トップバッターは本企画の言い出しっぺ、筆者です! 本企画で唯一のスタンディングデスク導入しており、自然あふれるスタイルになっています。

気に入っているところ・こだわりポイント

オンラインミーティングだと音質が悪いと相手に悪いので1万円のマイクを奮発して買いました。特に声がか細いのでなるべく集音性が良いコンデンサーマイクで音を拾ってゲインとノイズキャンセリングを噛ませてミーティングに挑んでいます。

机は以前はBauhutteの横幅120cmデスクを使っていたのですが、ゲームと仕事で公私を分けたいと思って新たにスタンディングデスクを導入しました。天板を自分で用意しないといけなかったので暗めの色の硬い木材で、とにかく幅広くしたかったのでKANADEMONOで買った天板を選びました。めちゃくちゃテンションがあります。

こういうのがあったら便利・欲しいと思った物

ある程度立ちながら仕事するとだんだん足が辛くなるのですが、緩衝マットを入れると椅子を入れづらくなって相性が悪いのでリカバリーサンダルみたいなスリッパに近い形のものを導入が良さそうです。

ゲーム事業部/クライアントエンジニア/@p_chin

f:id:koluku:20211222161430j:plain

お子様の笑顔が眩しいデスクトップです。大量のガムに目が行く一方で、個人的には商品の化粧箱を台にしてモニターを設置する工夫が見えるのがおちゃめポイントだと思いました。

気に入っているところ・こだわりポイント

座高が高い影響でなかなか良い高さの机がなかったので、ニトリで買った昇降式の机を使ってるところですね。
あとは今までMacBookのキーボードを使ってたのですが、夏の在宅勤務でPCの熱が熱くて手汗やばかったので外付けのキーボード買いました。今は冬なので、逆に寒くなっちゃって...手から離れてしまったPC熱が恋しいですね(笑
あとはボトルガムです。歯も健康になるし、仕事しながら顎を鍛えられる気がして便利だと思います。
最後に、今はPCのデスクトップ背景を息子にしてるのですが目に入ると癒されて捗ります。

こういうのがあったら便利・欲しいと思った物

パジャマでベットに寝てる時が一番リラックスできて捗るので、寝ながらPCのキーボードやマウスをシミュレーションしてくれる何かがあると嬉しいです。

ゲーム事業部/Unityエンジニア/oga

f:id:koluku:20211222161443j:plain

Macbookを含めるとなんと本企画の中で最大の5画面!その中でも中央はワイドモニターです。モニターを2つ並べると中央にモニターのベゼルが来てしまうので、それを解決できるワイドモニターは筆者も注目の道具です。

気に入っているところ・こだわりポイント

リモート2年間の末出来上がった汚デスクです。
リモート前はモニタ3枚だったのですが仕事用のmacを繋げるついでに増やしたら4枚になりました。
左のモニタはゲーム機にも繋がってるので仕事が終わったらシームレスにゲームが遊べます。

こういうのがあったら便利・欲しいと思った物

仕事用のmacが一枚しかモニタに繋げてないので他のモニタにも繋げるようにしたいです。 定期的にゴミ出ししてくれる人が欲しいです。

ゲーム事業部/にーの

f:id:koluku:20211222161406j:plain f:id:koluku:20211222161355j:plain

シンプルとおしゃれさを保ちつつゲームへのアクセスが良い機能性を備えており、綺麗を超えて完璧ではと思わせてくれるデスクです。間接照明を入れると程よい光をいれつつおしゃれな雰囲気を出すことができるのでおすすめです。

気に入っているところ・こだわりポイント

リモートワークというよりもゲームに比重を置いたデスクです。全体的に好きなものに囲まれて目の保養をしつつ、各アイテムへアクセスしやすくてスッキリと見えるようなデスクを目指してます。
こだわりポイント3つ↓

  • 配線系を左側の1箇所に流れをまとめつつ、ブックスタンドを使ってに入らないように隠しているところ
  • コントローラーを3つ置けるスタンドの1番上のフックを逆さまにして高さを出してヘッドホンを掛けられるようにしたところ
  • USBポートやキャプチャーボードなどの位置がずれやすいものは裏に両面テープを貼って固定してるところ

気に入っているところ↓

  • 気分によって右上のピクセルアートを差し替えてテンション上げられるところ
  • ゾイドかっこいい

こういうのがあったら便利・欲しいと思った物

机が大きくないので今はシングルディスプレイですが、できればデュアルディスプレイにしてみたいです。

ゲーム事業部/サーバーサイドエンジニア/commojun

f:id:koluku:20211222161454j:plain

CPUとメモリはよく作業者と机の関係で説明されますが、紙を使う作業はとにかく場所を取るので実際に机を広げることで能率を上げているみたいです。電子機器を増やすたびにケーブルコントロールに苦しむのはもはや世界共通の様式美です。

気に入っているところ・こだわりポイント

作業スペースはとにかくたくさんあったほうが良いと思って事務用の長机を使っています。頻繁に手書きでメモをするので、キーボードの手前にB5ノートを広げられるスペースを必ず確保しています。昔デュアルディスプレイをしていたとき首が痛くなったので、基本的に右のディスプレイしか使いません。右の本棚にもよく使う文房具やPC周辺機器を収納できるスペースを確保しています。
PCのスペックが不足気味なので、オンラインミーティングの通話はiPadでやるようにしています。

こういうのがあったら便利・欲しいと思った物

何か機材を追加する度、ケーブルのとりまとめが大変です。

クライアントワーク事業部/フロントエンドエンジニア/miyabin

f:id:koluku:20211222161425j:plain

なんとMacとWindowsの両刀遣いです。2台もあればデバイススイッチングが大変なのでは?と聞いたところ、そのために両方のマウス(トラックパッド)とキーボードを並べていますとお答えいただけました。それもそうですね!

気に入っているところ・こだわりポイント

仕事用のmacと自宅用のwindows、どちらもデュアルディスプレイで使えるようにしてあるところ

こういうのがあったら便利・欲しいと思った物

椅子の下に弾くマットがボロボロなのでいいものがあったら買い換えたい

人事部/エンジニア/tamiflu

f:id:koluku:20211222161433j:plain

本企画の最初のエントリー者です。本当にありがとうございます。この方のようにサブモニターを縦にするとターミナルのログやSlack、Twitterを長いタイムラインで垂れ流すことができて便利なのでモニターを増やしたいけど使い方に悩むという方におすすめです。

気に入っているところ・こだわりポイント

なるべく手元のスペースが開くようにiMac以外のモニタはアームにぶら下げてます。真ん中のモニタはHDMIセレクタで仕事用のMacbook、iMac、Nintendo Switchを切り替えられるようになっている

こういうのがあったら便利・欲しいと思った物

いっそのことウルトラワイドモニタを置くと全体的にすっきりするのではと思ってます。配線が難しい

CorporateITチーム/やましん

f:id:koluku:20211222161450j:plain

作業場所が狭くなることで失われてしまう物の置き場所を壁に移すことでその問題をクリアしているようです。ワイヤーネットやフックは100円ショップでも買えるのでコスパのいい対策です。

気に入っているところ・こだわりポイント

  • 部屋の隅っこ0.5畳に構える唯一のマイスペースです
  • 狭いスペースを生かして壁面にワイヤーネットを設置することで必要なものが置けて散らかりにくいです
  • 仕事に集中できるよう、余計なものは極力置かないようにしています
  • 椅子はしっかりしたものにしたかったのでアーロンチェアを使用しています

こういうのがあったら便利・欲しいと思った物

  • スペースが限られているのでマイクアームなどが増設しにくい
  • 薄型ディスプレイにしたらWebカメラの設置場所がなくなってしまった

というのが最近の悩みです。

備考欄

「見栄を張りましたがアーロンチェアは会社からの借り物です!!!!!!!」

ゲームコミュニティ事業部/macopy

f:id:koluku:20211222161415j:plain

この方は社内でも随一の自作キーボードを作ることで有名です。よく見るとデスクの右端にはんだごてが写っているのですぐに作業に取りかかれるようになっているので、自作キーボードへの隠しきれぬ熱意を感じます。

気に入っているところ・こだわりポイント

ここ1年はキーボードにkeyboardio atreusを使っていたのですが、リモートワークの日と出社の日が最近は半分ずつになったため、atreusっぽいキーボードを自分で作ってみました。
キーボードの高さはスライド式のキーボードトレイで調節しています。

こういうのがあったら便利・欲しいと思った物

「昔使っていたキーボード」が増えていくので、コレクション用の棚が欲しいなと思っています。今日はこのキーボード、みたいな感じで気分で変えられる生活を送りたい。

匿名希望

f:id:koluku:20211222161410j:plain

なんと40インチ超えのモニターをドン!目の前です!27インチを超えるだけでも迫力があるのに43インチはもはや未知の領域です。筆者も一度気になって家電量販店で見に行った際には「えっテレビ…?えっ普通にウィンドウ開いても残り3隅だだあまりじゃん…」と困惑するほどです。それだけに使いこなせるのはすごいです。

気に入っているところ・こだわりポイント

  • ディスプレイは勢いで買った43インチの4Kです。ウィンドウをBetterTouchToolで分割配置しつつマルチディスプレイ感覚で使っています。
  • キーボードはREALFORCE SA for Macです。打鍵の軽さがお気に入りです。
  • スタンドに載せたAndroidタブレットには、24時間365日でGoogleカレンダーを表示しています。これを導入してから予定を忘れることが大幅に減りました。

こういうのがあったら便利・欲しいと思った物

  • 43インチ、13kgを支えられるモニターアーム
  • 仕事とプライベートの空間を分ける、2つ目の部屋

匿名希望

f:id:koluku:20211222161517j:plain

自分のデスク、と見せかけて実はお子さんの机です。
子供が多い家庭は親の居場所を奪われがちで、作業中でも子供が来たら対応しないといけなくなります。筆者が参加するミーティングでは子供が部屋に突撃してしまい、ミュートになる光景がしばしば見られます。

気に入っているところ・こだわりポイント

地図のデスクマット。子供の机を間借りしているので、下校後は場所がなくなります。

こういうのがあったら便利・欲しいと思った物

お部屋がもう一つ欲しいです

非エンジニア編

本企画は当初Tech blogに属する内容のためエンジニアが所属するチャンネルで募集をかけたのですが、弊社に所属する社員はなにもエンジニアだけではないので途中からエンジニア以外の方にも質問してみたところ、3名からお答えいただけました!

ゲーム事業部/たいが

f:id:koluku:20211222163752j:plain f:id:koluku:20211223095707j:plain

本人からの備考によると実は1枚目の写真に写っている机は奥様が使っていて、本人は2枚目の写真の地べたに座ってちゃぶ台で作業しているとのことです。せ、世知辛い…。

気に入っているところ・こだわりポイント

3人いるので大丈夫ですねヨシ!

こういうのがあったら便利・欲しいと思った物

ゲーミングチェアとPCデスクもう一つずつ欲しいですね

企画部/飯村智也

f:id:koluku:20211222162606j:plain

Simple is Best。パソコンさえあればどこでも働けるというノマドワーカーのような粋を感じます。本人も語っていますが、4:3のモニターは今どきすごく珍しいので筆者はこの写真を見たときに小学校のパソコンルームが脳裏をよぎりました。

気に入っているところ・こだわりポイント

モニターが4:3!
わざわざ探した。

こういうのがあったら便利・欲しいと思った物

モニターをちょっと高めの位置に置きたい(週刊少年ジャンプを噛ませればいいのかもしれない)

ゲームコミュニティ事業部/きゃんてぃ

f:id:koluku:20211222161359j:plain f:id:koluku:20211222161439j:plain

文鳥がかわいいですね!ペットが寂しがり屋で目の届く位置に置いているというのはよく聞くので場所に困りそうですが、この方はモニターと同じ台に置くことで場所を確保しているみたいです。

気に入っているところ・こだわりポイント

ペットの文鳥が寂しがるのでデスクのすぐ横に配置しています、仕事中はずっと凝視されています。机は10年位使っている無印良品のパイン材テーブル、奥行きが狭いので買い替えたいです。

こういうのがあったら便利・欲しいと思った物

3000円の椅子を使っていますが腰が痛くなりやすいので、やはりアーロンチェアは偉大。

終わりに

最後に外部モニターの導入数とMacbookのクラムシェルモードの使用割合が気になったことがあったので数をまとめてみました。

外部モニターの数 人数(割合)
0枚 1名(7%)
1枚 9名(65%)
2枚 2名(14%)
3枚 1名(7%)
4枚 1名(7%)

モニターの大きさも影響はありますが、台数は場所の確保と操作感が1台増えるごとに大きく違うので見てみましたが、やはり1台での運用の方が多いみたいです。

Macbookをどう使っているか 人数(割合)
クラムシェルモード 6名(50%)
開放 6名(50%)

クラムシェルモードについては排熱のための表面積が小さくなるためCPU性能に影響が出る場合があり、それでも利便性で畳んで使用しているのかが気になりました。見てみると半々に分かれて面白い結果になりました。


他にも個性あふれるデスクがあったのですが、様々な理由から自主規制でお蔵入りとなってしまい見せることができずに残念です。 仕事だけに最適化しました!という机だけではないというのが弊社のエンジニアらしさがあるのではないでしょうか。

以上のリモートワーク環境がみなさまのデスク整備の参考になればと思います。

明日24日のクリスマスイブはobaraさんです!