こんにちは。技術部平山です。 今回は、ゲームにおけるA/Bテスト について論じます。 「論じます」で始めたことで察しがつくかとも思いますが、今回はブログではありません。 媒体はブログですが、ブログの容量ではない代物になっております。3.5万字(115KB)超えです。 ゲームにおけるA/Bテストについて、実施の方法や問題点、 倫理的側面に至るまで幅広く書き連ねてみました。 読んで欲しいのはどちらかと言えば同僚なのですが、 そういう時にはまず社外に出してしまった方が良いものですので、 ブログにしてしまいます。 比較的同業の方が読むことを想定しているため、 図表を用いてわかりやすくすることはしておりません。 これを書いた人間は何者か 技術的な問題の前に ゲームにおいても構図は全く同じ A/Bテストが可能である条件 A/Bテストの手続きを概観する 振り分け アプリ内振り分けの場合 Firebase

はじめに2013年にスタートアップに参加したことをきっかけに、今までいくつかのデジタルプロダクトのUIデザインに携わってきました。2020年にTakramに参加してからは、さらに多様な事業のプロダクトに関わらせていただいています。この約10年間のあいだに世の中のUIデザインのノウハウは確立されてきており、既存のコンポーネントなどを組み合わせれば、きれいなUIが誰でも簡単に作れる時代になりました。そんな中で個人的に大切にしてきた価値観として、「ユーザーの気持ちを考えて、その気持ちに寄り添った情緒的なUIをデザインする」ということがあります。今回、この記事を書いているのは、その意味や意図を言語化して再利用可能なものにしたいと思ったことがきっかけです。考えながら書いているため、何度かのシリーズになるかもしれません。また、このテーマについて様々な方と対話ができたらいいなとも思っていますので、興味を

デザナビ👀デザインを図解で解説 @wkwdesigner フォローするとデザインのヒントやキッカケが見つかる💡 初心者向けデザインテクニック・Tips／デザインのポイントを図解付きで解説💡 ツイートだけではわかりづらい部分はブログで詳しく解説✏️ https://t.co/X9FzimhN9e

ピクセルフォントが大好物な人に朗報です！ ピクセルフォントを多数リリースしているx0y0pxFreeFontから新作フォント「マルモニカ」がリリースされました。 可読性に優れたピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されています。さらに、ライセンスも太っ腹で、商用無料、ゲームやスマホアプリへの埋め込みもOKです。 マルモニカ マルモニカの特徴 マルモニカのダウンロード x0y0pxFreeFontの他のフォント マルモニカの特徴 マルモニカは、ピクセルフォントを多数リリースしているx0y0pxFreeFontの新作フォントです。 ピクセルが形作る曲線美を追求した丸ゴシック体のピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されていま

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS

9年間（！）ほぼ毎日更新を続けたという「いらすとや」。今後は不定期更新になる フリー素材集サイト「いらすとや」が、毎日更新の終了を発表した。今後は不定期更新になるというだけで2万5千点もの既存のライブラリーは引き続き利用できるのだが、時事ネタの反映の速さが見られなくなることを、残念がっている人もいるだろう。 その一方、いらすとやの絵柄があまりにも有名になりすぎたことで、別のテイストを求める声はチラホラと耳にする。「いらすとや」のボリュームに比肩しうるフリー素材サイトはそうあるわけではないが、テイストの統一感という点にフォーカスすれば、魅力的なサイトはほかにも多数存在している。 今回は、いらすとやと同様にサイト単位でテイストが統一されており、かつ人物を中心に一定数のイラストがストックされていることを条件に、5つの無料イラスト配布サイトをピックアップした。いずれも商用含めフリーで利用できること

この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト

日本のUSMハラー事例86選 システムファニチャーのトップブランド「USM」社が誇る製品「USMハラー」は、チューブとボールを連結し自由な形を作れる画期的なシステム収納として世界中で愛され続け、今年50周年を迎えました。 「MoMA(ニューヨーク近代美術館)の永久コレクションに加えられている」など、その素晴らしさを表現する方法はいくつもありますが、誕生から50年間、そのデザインを変えず、今なおモダンで、ベストセラーであり続けている事実。それこそがUSMハラーが20世紀を代表する革新的プロダクトであることを最も的確に示していると言えるかもしれません。 そしてそれはUSMハラーの生まれ故郷スイスから遠く離れたここ日本も例外ではありません。 数十年前の上陸以降、日本でも導入事例を次々と増やし続けています。50周年にちなみ、今回は日本で使用されている86の事例を集めました。オーナーの声とともに、日

過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。 コーディングとはどこまでを指すか 「コーディング」といっても、人によって指しているものが違うと思います。 ここでは4つの段階に分けてみます。 ごく基礎的なHTMLやCSSを書くことができるコーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができるHTMLやCSSに加え基礎的なJavaScriptを書くこともできるHTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っ

カトウヒカル@バナーデザインのきほん著者 @design_hikaru ［デザインが苦手なあなたへ］ デザインの四大原則で、あなたの制作物はもっ〜と良くなる。 ➀近接 → 仲間ごとにグルーピング ➁整列 → 透明な線に揃える ➂強弱 → メリハリを付ける ➃反復 → 見やすい統一感 デザインで迷子になったら四大原則を思い出して、基本に立ち戻ろう！！ pic.twitter.com/VMQbAVdeiT

🐕️ @54jpd09 今まで作った表紙だが… 一枚目：絵に文字を重ねて後は揃えとけ 二枚目：正方形で揃えとけ 三枚目：タイトル斜め、写真はぼかしてりして効果的にしとけ #それっぽくなる表紙 pic.twitter.com/SOOvvkYgFH

UI/UXという言葉を聞いて久しいですが、みなさんは基本的な考え方をきちんと理解できているでしょうか？様々なアプリを触り、「このアプリのUI/UXいいよね」と言う人は多くいますが、UI/UXを何となく知っている感じになっていると思います。 そこで今回はUI/UXの基礎が学べる資料をSlideshareから30�個集めました。デザイナーの方は必見です！

パワーポイント等で資料を作ることがあるのですが、自分でも「もうちょっといけてる感じにならないかな」と思うことがあります。 そんなときに頼りになるのがアイコン素材集サイト。今回はその中でも、本当は誰にも教えたくないイケてるサイトをご紹介します。 FLAT ICON DESIGN FLAT ICON DESIGNのなにがイケてるかって、 アイコンのデザインの質が高いアイコンの数・種類が多いタグで探せるサイズや拡張子を選択できる背景有無など1つのアイコンに複数のバリエーションがあるアイコンにしっかりした説明文が書いてある商用利用無料という感じ。すごいです。 ここのアイコンを資料に少し入れるだけで、それっぽくすることができます。 最近ちょこちょこ使うアイコンをご紹介します。 imac風のデスクトップPCimac風のデスクトップPCのイラストアイコン素材です。最近ではWEBページはレスポンシブルデザ

セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。

ゴールデンボンバーさえ現れなければファイナルファンタジー１５をいつまでも永遠に「カ、カ、カッコイイ（そして失神）」と言い続けられたはずだ さていつまでたっても続報が聞えてこなかった「FF13ヴェルサス」だったが、遂にE3にて「ファイナルファンタジー１５」と正式にナンバリングし直されることとなったのだが、今この段階でトレーラーをみたらそれはもうなんというか、古臭いと判断してしまい次になぜか笑ってしまった。 それはもうRPGの段階がスカイリムやバイオウェア作品と言ったレベルにまで底上げされたせいだからか。それともバイオショック・インフィニットのようにナラティブや表現のレベルが底上げされたものを見たせいか。AAAタイトルにて革新的な作品が提出され続けたせいでいつまでも開発しているFFヴェルサスの発表が遅れたおかげで古びて見えるのだろうか。いや違う。 正直笑ってしまった理由はおそらく紅白にも出場し

鎧兜は主に、戦闘の際に装着者の身体を矢や剣などの武器による攻撃から防護する為に作られたものだ。防御性能はもちろんのこと、その形にこだわった面白奇妙な兜も存在するようだ。ここでは、騎士の時代から20世紀までの多種多様な兜を見ていくことにしよう。日本で使用されていたとされる、すごい形の兜も登場するぞ。 1.カエルの口のような兜 この画像を大きなサイズで見る 4世紀から17世紀に馬上試合をする騎士によって使われた。 この画像を大きなサイズで見る この画像を大きなサイズで見る 2.バシネット（軽い鉄兜）　14～15世紀 この画像を大きなサイズで見る この画像を大きなサイズで見る この画像を大きなサイズで見る 3.獅子の頭をかたどったサレット（軽い鉄兜）1475年～1480年頃 この画像を大きなサイズで見る ルネサンス時代の古風な兜。外側はエンボス加工され、銅をかぶせてある。 4.油彩が描かれたサレ

LINEでダントツの人気をほこるスタンプは「クマのブラウン」とLINEブログに記載があった。 私もブラウン好きなLINEユーザーの一人。夫とのlineの会話の半分を、ブラウンで埋め尽くすくらいにブラウンが好きだ。ブラウンスペシャルのスタンプも、発売当日に買った。溺愛である。 溺愛の理由は「かわいいから」の一言につきるのだけど、今回はその奥にある、「ブラウン」ダントツ人気の理由を勝手に考察して述べてみようと思った。ポイントは「無表情」という点にあると思う。 特に、LINEのスタンプ機能開始当初からのオリジナルキャラクターであるクマの「ブラウン」は、お使いいただいている皆さんからもダントツ人気！ぬいぐるみを限定発売した際には、ブラウンのみオープン15分で売り切れるほどでした。 LINEブログ ブラウン人気存在を考えるきっかけは、pasonaとNHNが開催したUXについてのセミナー「UXデザイン

私はフォトショップが好きです。webデザインも、バナー作成、ドットワーク、イラストワークもほとんどフォトショップです。 ですがこいつは人気者なので永遠の片想いが続いています。まあ一つのツールにばかりは構ってられないわけですが、せっかくですのでこのブログでときどきこいつのことを探っていきたいと思っています。 レイヤースタイルについてです 今回はこれについてちょっと考えてみました。 凄く便利な機能です。パターン等とも併用でき、一度しっかり作っておけばボタンや文字等のエレメントにつけた装飾がいくらでも再利用できます。フィルタといい、マスクといい、出会ったときの衝撃はそのままに、フォトショップはいつまでもドキドキさせてくれるヤツですね。 レイヤースタイルの構成 一応レイヤースタイルの各項目について軽く説明しましょう(別に知ってるよと言う人は次の節まで読み飛ばしてください)。 ドロップシャドウ その

元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ