楽しさを伝える世界観の設計

ベアブリックのオリジナルのクマには、それぞれにストーリーがあります。シリーズの代表であるBASICのクマのストーリーを読み、BASICの特徴である「スピード」や「レーシングマシン」というキーワードからアイデアをふくらませました。

さらにシリーズ29では音楽関連のベアブリックが複数存在するため、音楽に関する要素も取り入れたいと考えました。

「スピード感」と「音楽」をコンセプトの軸として、ターンテーブルのイラストを含めた全てのUI（ユーザーインターフェイス）やレコード盤面をデザインし、ベアブリックが切り替わるアニメーションサンプルを制作しました。

※ 各ベアブリックのキャラクターイラストや写真はご提供いただいた素材です。

楽しさとわかりやすさの両立

楽しさを優先してデザインしていますが、わかりやすさも重要です。

わかりやすくするための工夫として、例えばボタンのデザインでは配色を「蛍光シアンと黒」に統一しており、押せるボタンとして認識しやすいように全体を設計しました。

レコード盤面のデザイン

それぞれのベアブリックに合わせたレコード盤面をデザインしました。ベアブリックごとの特徴やバックグラウンドストーリーを調べ、世界観に合う表現を目指しました。

リサーチ

情報収集やリサーチを経てデザインの方向性が定まったのち、デザインに取りかかる前にターンテーブルがどういうものかを知る必要がありました。

実際に4軒のレコードショップに行き、ジャケットデザインを手に取って見てみたり、音楽機材やレコードが再生されているターンテーブルを観察しました。実際のレコードの回転速度を確かめるためにレコードが再生されている様子を撮影し、アニメーション制作の参考にしています。

Webサイト上でのアニメーション調整時、まずは実物のレコードと同等の速度でレコード盤面を回転させてみました。そうすると、思ったよりもスピードが速く、レコード盤面のイラストや文字情報が見えにくくなってしまうことに気付きました。

そのため実物のレコード回転速度を忠実に再現するのではなく、Webサイトで表示したときに見やすくてレコードらしさが感じられる回転速度になるように、フロントエンドエンジニアに協力をいただいて調整を重ねています。

※ 動画は許可をいただいたうえで撮影しています。

アニメーションサンプル

アニメーションが重要なサイトデザインのため、依頼主へリニューアル提案をするにあたり、静止画のデザイン案に加えて「動画のアニメーションサンプル」も制作しました。

※ アニメーションサンプルの制作ツールはAdobe After Effectsを使用しています。

コーディングの精度を高める取り組み

コーディング（実装）の精度は、サイトの完成度に大きく影響する重要なプロセスだと考えています。

本案件ではビジュアルデザインやアニメーション設計を私が担当し、実装を別のエンジニアに担当していただきました。

コーディングにおいて元のデザインの再現度を高めるために、デザインデータの各要素の配置座標やフォント指定などを記載したコーディング指示書を作成しました。

指示書をエンジニアに共有して実装時の調査負担をなるべく減らすことで、実装を進めていただきやすい環境づくりに努めました。次の画像はコーディング指示書の一例です。