見出し画像

着せかえのテストはこんなふう

こんにちは、クリエイティブ室テーマパートのK.Aです。テーマパートでは以前”ALPACA"という自動化ツールを部内開発したnoteを投稿しました。

ALPACAは今でも絶賛活躍中ですが、その工程はテーマ制作全体の1/3くらいまで。今回はALPACA作業後の確認(テスト)工程について、実際にどのようなことを行っているかを一部紹介したいと思います。

着せかえテストをするとき考えること

どのようなテストでもそうですが、まずテスト対象の特性や要件を理解することが大切ですね。LINEスタンプに比べて、着せかえ制作には様々な制約があり、それらを踏まえた上で制作物に問題が起こらないかチェックする必要があります。たとえばLINE着せかえをテストする場合、こんなことが考えられます。

・ユーザーが使用するスマートフォンはどんな画面サイズだろう
・横画面で表示したときは、どう見えるかな。タブレットでもちゃんと表示されるのかな
・AndroidのLINE着せかえは下位バージョンでも販売しているから、下位バージョンでもちゃんと見えるようにしないと...
・登録アカウント国によって表示されるコンテンツが違うから、そのテストも忘れずに
・もしかしたらユーザーはフォントなどをカスタマイズしているかも

と、軽く上げるだけでこんなにも思うことがあります。これらを考慮した上で、テスト項目を網羅していく必要があります。

着せかえ制作ツールによる確認

LINE着せかえのパッケージファイルは、社内ツールで制作しています。制作ツールにはインスペクターと呼ばれる、仮想的にUIを確認できる画面があります。(エディタなどに搭載されているプレビュー機能のようなものです)
たとえばカラーコードを変更したとき、その仮想画面で瞬時にカラーが反映されて、変更された箇所や色を直感的に理解することができます。
ブラウン&コニー 冬のウキウキデートの着せかえなら、こんな感じに。

画像1

この画面の要素はHTMLとLESS(CSSの拡張言語)で記述されていて、テーマパートメンバーで画面構成を考えてマークアップしています。このように制作ツール上でまず、デザインデータと相違がないかを確認しています。
また、環境によって表示されないコンテンツ要素もあるので、実機では確認しづらい箇所をインスペクターで確認して工数削減に繋げています。

検証機によるテスト

さて、ツールによる確認でデザインデータとの比較チェックはできました。が、ツール画面はあくまでも仮想的なものです。実際に検証機に入れてみないと分からない部分があります。例えば…

・ツールでは再現できない、複雑な適用箇所
・キャラクターやイラスト要素など、繊細に色彩調整が必要なもの
・画面遷移やタップ時の挙動など、動的な変化がある要素
・使用OSやLINEバージョンによって不具合が発生することも…

画像2

特にチャットルーム背景は、画面サイズや解像度によって表示される範囲が異なります。タブレット表示のとき不自然に見える、など問題がある場合はデザインチームにデザイン改善依頼を行います。着せかえデザインチームによる制作過程はこちらを参考にどうぞ。

また、バージョンや使用環境によって不具合の発生が変わるため、様々な検証機を貸し出しできる体制になっています。

それでも問題が発生してしまった時は…

何らかの問題が発生したとき、それが着せかえパッケージの問題なのか、デザインによる問題なのか、またはLINE開発サイドによる要因なのかを特定しなければいけません。
テーマパートは、デザインチーム、LINE開発チームや企画チームと連携して着せかえパッケージ制作をしています。問題内容によって対応フローも変わり、影響範囲や優先度を考慮して積極的に修正を行う体制にしています。
また、ユーザーからのお問い合わせによって、我々も気づいていないようなご指摘を頂くこともあります。本当にありがたいことです!

最後に

ということで、今回は確認工程の一部を紹介しました。今回紹介したテストの他にも、デザイナーによるチェック、第三者による最終確認やデザインデータで未然に防ぐ工夫などを行い問題削減に取り組んでいます。
また、テーマパートは着せかえパッケージ制作という独特な業務ゆえに、独自にツールを制作したりtipsを共有する機会をつくり、知恵を蓄えています。リリースされた公式着せかえは600を超えましたが、今後も継続的に着せかえを楽しんで頂けるようにしたいと思います。
みなさん、好きな着せかえを見つけて楽しんでくださいね〜。ではっ。

LINE Fukuokaでは福岡で働きたい方へ向けたキャリア採用の募集を行っております。社員とカジュアルに話せるブースや仕事内容を聞く事ができる「LINE Fukuoka採用の日」を東京と大阪で開催致します。様々なコンテンツをご用意しておりますので、ぜひご参加下さいませ。


Twitterで更新情報をお伝えしています

これからもよろしく✨
24
LINE株式会社のUI/UX、スペースデザイン、ブランドデザイン、イラスト、映像制作をデザインする「クリエイティブセンター」の公式noteです。https://twitter.com/linecreative_jp

こちらでもピックアップされています

#UI 記事まとめ
#UI 記事まとめ
  • 41本

UIデザインについての記事をまとめたマガジンです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。