フォーカスしたいもの
株式会社デパートは、基本的にデザインと実装（コーディング）は分業制です。だからこそ、日頃からデザイナーとエンジニアが協力し、スムーズに実装を進めていけるようなデザイン連携の仕組みづくりに取り組んでいます。
また、デザイナーは常にコーディングを考慮したデザイン制作を心がけています。
今回は実装を意識しながらデザインを行う中で、表現をどうデータへ具現化しようか行き詰まってしまった際のエピソードをご紹介します。
デザイナーが実際にエンジニアに実装を相談し、検討、可能にするまでの制作現場の一幕をお楽しみください。
「この背景って実装できるかな？」：デザイナーの疑問
とある子ども園のサイトをデザイン中のこと。 子ども園なので背景にも楽しげな柄を入れたくなり、ドット柄を敷くことにしましたが 「あれ、この背景って実装できるかな？」とふとギモンが。
デザインはこんな感じ
コンテンツの背景にマスクをかけて、さらにドット柄のデザインにしたい。
チャットでエンジニアさんに相談！：実装方法の確認
社内のチャットツールにて、エンジニアさんに向けて相談してみました。
背景処理で質問です！このデザインの実装・・・可能でしょうか？
デザインの詳しい内容を説明
- 背景はウインドウサイズに追従させる
- 楕円topはCSSで丸くしたい
- bodyカラー（水色）はCSSで敷きたい
ポイントは
背景の水色部分を「比率を維持しつつ画面幅に応じて拡大縮小」してもDotは等倍で乗せたい
の部分です。
エンジニア・デザイナーから次々と提案が！：実装方法の検討
エンジニアIの意見
- canvasを使って出来なくはない
- 実装にかなりの時間がかかってしまいそう
- HTMLのマスク機能は、グループに対してのマスクは難しい
- シェイプと同じように丸と四角を重ねる方法が一番楽
なるほど、やはり現実的ではないようです。 実は自分でも少し複雑な実装になってしまうデザインの自覚はありました ^^;
デザイナーMの意見
- 上に白ベタを乗せるのは？
ほほう・・逆マスク…！
この提案からまた回答の間口が広がります。
再び、エンジニアIの意見
- 逆マスクはたまに使う
- 楕円でマスクする場合、カーブをどこまでcssで表現ができるか
- svg使えなくもないが、やはり実装に時間がかかりすぎてしまう
うーん。 ドット無ければ再現できそう。 ここはドット柄を諦めましょうか…。
そこに、さらなるアイデアが！：実装方法の解決の糸口
デザイナーMの意見
- 白ドットなら、マスクせずに普通にのっけても目視ではわからないのではないか
なるほど。 白ドットなので、水色の楕円からはみ出した部分は白い背景色に馴染んでしまいますからね。 ただ、topとbodyで柄ズレが起こる懸念があります。どうしよう…。
エンジニアさんがサンプルを作ってくれました：簡易サンプル作成・検討
エンジニアIの意見
- 高さの融通が効かない、動的に変わる場合はjsで計算が必要
- 文字が入ってるレイヤーはなんとなく枠内に収まる位置、サイズ感にしてるんですが、中身が可変だと難しくなることがある
サンプルを作成してもらい、さらなる検討！
https://codepen.io/itahana-depart/pen/wvyQWNq
おお！ 中身（コンテンツ幅）は固定なので影響無さそうです。 解決の糸口が見えてきました。
ついに、エンジニアYさんが実装を！：実装解決
エンジニアYの意見
- 「逆マスク」のアイディアがおもしろかったので、実装してみた
- 「逆マスク」のアイディアと「ベース背景とドットどちらも白ならドットがはみ出してもはみ出しても目視ではわからない」のアイディアを使ってる
実際の実装画面はこちら
実装URL
コーディング画面
やった！再現できました！
日々デザイナー・エンジニアで試行錯誤を重ねる、デパートの制作現場
思ってもみなかった発想から解決策を見い出せると、視点も広がり学びも多く制作にもハリが出ますね。これが制作者たちの醍醐味でもあるのです。
このように株式会社デパートでは、お客さまからのご要望やご要件を叶えるためのアウトプット作成のため、デザイナーエンジニア間で実現に向け試行錯誤のコミュニケーションをとっています。日々の情報インプットアウトプット、経験の共有など、あらゆるクリエイティブチームでの積み重ねを持って、実践におけるスピードとクオリティの向上に日々努めていいます。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
