ディーゼロの楽しさを伝える、 こだわりいっぱいの年賀サイト
今年も新入社員を中心に制作しました！
四季折々の写真がたっぷり、レトロで可愛い世界観を作り上げるまでには、思うようにいかず何度もトライしたという部分も。
そんなサイトづくりの裏側、こだわりポイントなどをデザインを担当した三隅さん、コーディングを担当した小牧さんにお話してもらいました。
今年の年賀サイトは、どんな風に制作を進めていったのですか？
三隅
今年のサイト全体の大きなテーマが「ディーゼロ内のユニット体制の紹介」。実装は、社内でも前例の少ないSTUDIOとなっていたので、そこからビジュアルやできることのイメージを膨らませていきました。
小林さんや田中さんに入ってもらい、見せ方を決めていきました。去年がイラスト中心のビジュアルだったので、違った方向性で見せていきたいとなって、写真をたくさん使ってディーゼロの楽しさを伝えていこうと。
写真が印象的なサイトを参考に探したり、ラフを作って意見を出しあったりして「昇り龍のイメージが良い」となり、メインビジュアルが決まりました。
小牧
私も含めSTUDIOが未経験な人がほとんどだったので、何ができてできないのかを調べていくことからはじまりました。STUDIO経験者の八幡さんに話を聞いたりもしました。
それから、デザインと同時並行でFigma to STUDIOを使って、写真をちりばめた見せ方ができるのかという検証をしていました。
三隅
初めてのFigma to STUDIOが難なく触れたのは小牧さんがグラフィック系の学校に行っていたからだと思ったんだけどどうかな？
小牧
確かに、デザインツールに近かったですし、視覚的にデザインがある状態で進めていったので、進捗が分かりやすいし、編集もしやすいし進めやすかったですね。
逆にコーディング面ではサッとできないことが多くて、細かい設定が必要な部分などがあり、そこに慣れるのに時間がかかりました。
レスポンシブ対応もあったので、大きい画面幅からスマホ幅にする際のタブレットぐらいの挙動をどうするかというのは苦戦しました。
三隅
STUDIOをさわってみて、今までコーダーさんにお願いしていた軽微な画像の反映など、自分でぱっとできるのは便利な反面、こんな実装にしたいけどSTUDIOでできるかなと確認しなければいけないことが多くあって、小牧さんに調べていただいて心強かったです。できるかなと相談して、デザインに進む流れで同時に進めていった感じ。
小牧
逆にSTUDIO上で難しい表現があって、こんな風にしてはどうかと提案してOKをもらって反映したのもありましたね。
「あけましておめでとうございます」の下の雲の部分、幅を広げると位置が変わって見え方のバランスが変わってしまう部分があって、そこをカバーしつつ表現は損なわないという風にもっていくために、雲を2つ増やしたいという提案をし採用してもらいました。雲がたくさんあるので随所細かい箇所も調整していきました。
三隅
にぎやかにしたいこだわりの部分だったので、工夫してもらって助かりました！
小牧
デザインが素敵なのでできればこのまま実装したいという思いでした。上手くいかない所があってもどうやったら上手くいくかなとずっと検証していました。
各々のこだわりポイントを教えてください
メンバーを主役にした遊び心たっぷりのデザイン
三隅
ユニットに焦点を当てたサイトだったので、メンバーを主役に。スラックにある写真を集めながら、新しく撮影もしました。
写真の使い方にもこだわっていて、実績の一番上の部分に熊澤さんがいるんですよね。
最初に熊澤さんの写真があって、それを切り抜いて、雲の上に置いたらしっくりきて、こんな感じも可愛いなあと。そこで他のディーゼロメンバーも雲の上にちりばめていって、楽しい雰囲気になったと思います。
小牧
古田さんが飛んでる感じの切り抜き好きです！
三隅
ありがとうございます！メインのコンテンツより写真が目立つとよくないので、オレンジや緑でカラー調整しながら目立ち過ぎないようにするのも工夫した点ですね。レトロでアジアな雰囲気にしたくて、ザラっとしたテクスチャ―を入れていて、フィルムのような感じにしてます。
小牧
最後インパクトあるのは今村さんですよね！
三隅
ですね！ゆる写真部の（ディーゼロのSlackチャンネル名）写真を忍ばせたり面白要素を入れていくのが作っている方も楽しかったですよね。
絶対実装したい！と思ったスライダー
小牧
こだわったのはスライダー部分です。当初、写真が入る枠だけ先に表示され、写真が後から読み込まれる形で、ちょっと無粋な感じだったんですよね。解決できなかったらスライダーごと削除にした方がいいよねってなるぐらい。これを解決するために色んな検証をしました。
それでたどり着いたのが今のフェードインになります。
スライダーの仕様上、画面上に映っている写真しか読み込まれないようになっていたため、フェードインまでの時間を持たせて、スマホは写真の見切れを作る。これがないと上手くいかなかったです。
三隅
クオリティ的に「うーん」な感じを和らげてくれていて、この工夫に気づけたことがマジで天才と思いました！
小牧
せっかく1月から12月まで写真があるのに無くなるのは辛い！となって、絶対実装してやる！って意気込みで検証していました。必死でした。
細かいところになるのですが、竜の画像やメンバーの写真でくっきり表示させたい所は、個別にディーゼロのサーバーに画像をおいてそれを読み込ませるようにもしています。
STUDIOがアップロードした画像を圧縮してしまうので、大きな画像はどうしても粗が出てしまうんです。三隅さんがレトロな雰囲気にしていた、日の出のザラっとした質感も無くなってしまうので、今回細かいところまでこだわろうと！もう平尾さんにもバンバン突っ込んで貰って、改善をしていった感じですね。印象に最後まで気を遣って実装できたかなあと。
最後に感想をお願いします。
三隅
1つのサイトを通してメインデザイナーをやるのは“人生で”初だったので、大変なこともありつつ、普段の案件じゃできないこともあって楽しく勉強になったなあという印象です。
他案件の仕事、体調を崩した時期もあり作業が滞ってしまうことがあって、「とにかく早く確認に回すことが大切」と勉強になりました。クオリティアップもできると思うので、アタリの状態でも、不安に感じたら早めにフィードバックをもらうようにしようと心がけるようになりました。あとはFigmaに慣れました！
小牧
STUDIOという新しいツールを扱うことができて嬉しかったです！
社内でSTUDIOの経験者が少なく、自分主導で調べながら進めていくしかない状況ではありましたが、裏を返せば自分の好きなようにできる。そう思うと勉強しながら試行錯誤する時間が楽しかったですね。
元々、エラーをコツコツ対処していくのに夢中になれるタイプなので、今回トライ＆エラーをしながらの作業、本当に自分の好きなことをしながらサイトを1本作れました。
もう1つ印象に残っていることがあって、メインビジュアルの下の雲の提案を受け入れて、反映してもらったこと。コーダーもレイアウトの提案をして良いんだと改めて思いました。
受け入れてもらえて、良いものを一緒に作っていけるんだという実感を得られたのは発見でした。
三隅
あとは、デザイン・コーディングに注力できたのは他の広報メンバーのおかげです。本当に感謝しています。そして、同期が小牧さんで良かった！お互い支えあっていたと思います。
小牧
お互い同期で良かったと話しましたね！
本当に他の広報メンバーにありがとうございました。と伝えたいです。
ディレクションメンバーからひとこと
平尾
毎年新卒メンバーの年賀サイト制作を見ていますが、今年も例に漏れず「挑戦する姿眩しいぃ〜〜〜」ってなりました。先輩たちもやったことがない手法やツールを取り入れているので誰も教えてくれない、自分で手探りにやっていかないといけないところを経験しています。そこが既にディーゼロの誰よりもリードできる人になってくれたってところは嬉しいですよね。
田中
主にデザイン面の監修を担当させていただきました。修正はあまりなくずっと「いいね！」「天才！」と言い続けていた気がします（笑）。新卒２人のコンビネーションが素晴らしかったと思います。
小林
タイトなスケジュールでの制作でしたが、三隅さん・小牧さんが連携して進めてくれたおかげでディーゼロの雰囲気が伝わるとても良い年賀サイトになったと思います。表現を諦めないといけないかなと思ったところも、次のMTGの時には解決策まで考えてくれていたので、とても頼もしかったです。
D-ZERO年賀サイト2024
https://d-zero2024.studio.site/
Written by たていし
エディトリアルディレクター。
お風呂場でシャンプーや入浴剤の裏面を読むのが好き。