小学背景デザインのご紹介と実装上の工夫 - スタディサプリ Product Team Blog

こんにちは。iOS エンジニアの @_nkmrh です。今回は『スタディサプリ小学講座』の背景画面のデザインについてご紹介します。 1 月から 12 月までの季節感やイベントを踏まえた複数バリエーションの背景をいかに効率よく実装したか、デザイナーとのコミュニケーションコストをどのように最適化したかをまとめました。

1. 小学背景とは？

「小学背景」は、小学生向けの学習アプリ用にデザインされた、子どもたちが親しみやすい雰囲気を意識した背景デザインです。

1〜12 月の季節感を反映している
シンプルかつかわいらしいイラストやモチーフを採用している

私たちは、月ごとのバリエーションを用意することで、アプリを利用する子どもたちに「毎月新鮮な気持ちになって、学んでいただきたい」という思いでデザインを作成しました。

2. 月ごとのバリエーション

1 年を通して、背景に以下のような違いを持たせています。

1 月：お正月をイメージする和風モチーフや初春を感じるテクスチャ
2 月：雪遊びをモチーフにした冬らしい演出
3 月：アプリの基本デザインをベースに、春先を意識
4 月：桜吹雪など春らしさを強調
5 月：こどもの日や色とりどりの風船で楽しい雰囲気
6 月：梅雨の雨や紫陽花など、しっとりとしたイメージ
7 月：海水浴や夏休みを連想させる要素
8 月：花火や夏祭りなど、最盛期の夏を表現
9 月：十五夜のお月見など、秋の始まりを感じさせる
10 月：ハロウィンのモチーフで盛り上がる
11 月：紅葉や落ち葉など、晩秋の雰囲気
12 月：クリスマスの飾りやモチーフを取り入れた華やかさ


1月	2月	3月	4月
5月	6月	7月	8月
9月	10月	11月	12月

このように、各月ごとに異なるカラーリングやモチーフを取り入れ、季節感を出しています。

3. デザイナーとのコミュニケーションコスト

3-1. バリエーションが増えるほどコストも増大

背景を月ごとに変えるとなると、当然ながら12 種類のデザインが必要になります。デザイナーとのやりとりが増えれば増えるほど、意図しないデザインのズレや修正の往復が発生しやすく、時間とコストの無駄が生じる可能性があります。

3-2. 仕様策定でコミュニケーションを最適化

そこで、小学背景の仕様策定を行い、以下のような取り決めをしました。

背景のレイヤー構造を決定する
- 必要な要素をあらかじめ洗い出し、どのようなレイヤーを持つか事前に合意
- 例：ベースカラー、背景イラスト、飾りパーツ、動的エフェクトの位置など
上記構造に沿ってデザイン要素を追加してもらう
- レイヤーの命名規則や配置を統一する
- デザイナー側でも修正や差し替えがしやすい環境を整備
実装側のプログラムは、レイヤーを入れ替える形で対応
- 月単位で差し替える部分を明確にし、デザインが更新されたら差し替えるだけで OK
- 動的エフェクト（桜吹雪など）を別レイヤーで扱うことで柔軟にカスタマイズ可能

「このレイヤーには常に季節のモチーフが配置される」「このレイヤーに動的エフェクトが配置される」といったガイドラインを作ることで、デザイン側と実装側のやり取りを最小限に抑えることができます。「実現したいデザイン」と「実装の現実性」の両方を踏まえたガイドラインを整備することで、開発コストやスケジュールに配慮しつつ、ユーザーにとって魅力的なデザインを実現できるようにしました。

4. コミュニケーションの精度を高めるための工夫

4-1. Figma での共有

今回の背景デザインは、Figmaで進めました。仕様策定も Figma 上で行い、そこで定義したレイヤー構造をデザインに反映させています。

Figma を活用することで、デザイン修正やアセットの受け渡しがスムーズになりました。特に、画面上のコメント機能やバージョン管理機能を使うと、変更点が一目で把握できるため、デザイナー・エンジニア間のやり取りを効率化できます。

5. 実装のポイント

実装面では、レイヤーを入れ替えるだけで多様な背景を表示できる仕組みを作りました。

月ごとの背景データを用意
- 例：background_jan.png、background_feb.png など
- 新しいデザインは、同じルール・命名規則で差し替えれば OK
プログラムで月に応じて読み込むファイルを切り替える
- getCurrentMonth() などで現在の月を判定し、自動的に背景を切り替える
- デザイナーが新しい背景を渡したら、適宜ファイルを入れ替えるだけで反映