皆さま、改めましてあけましておめでとうございます！
プロデューサーの薄田です。
本年も何卒よろしくお願い申し上げます！
今回の記事は、第4回目となる年賀サイトの紹介BLOGになります。
まだ遊んでいない方は下記より年賀サイト2024をご覧ください！

毎年干支や世情を鑑みて、アイデアを決めていますが、その制作背景はどうなっているのか、今回はメイン制作を担当したスタッフに話を聞いてみたのでその内容をご紹介します。

さまざまな案を経て、今年の年賀サイトが決定

まずは案決めの作業になります。
過去作った年賀サイトの流用や、直近で制作したものを流用、新規アイデアなど様々な案が出てきます。
その中からやはり新年の挨拶なので「斬新さ」という点と、案件と並行して進めるので「作業負荷が高すぎない」といった基準等をベースに出てきた案を絞っていきます。
そして今年は龍の髭をなでるとかなり怒られるといったことわざから着想を得たOXゲームに決まりました。
ゲームの内容としては、寝ている龍を起こさないように髭を3回なでるというゲームです。起こさずに３回触れた人は、今年のスタートダッシュをうまく切れる、というコンセプトになっています。
それではここからデザイン制作の背景についてご紹介します。

新年から楽しめるデザインを意識して制作

年賀サイトのデザインを担当しましたデザイナーのMです！
龍というと、観光地で見かける剣のキーホルダーに巻き付いた龍や、遊戯王のブルーアイズホワイトドラゴンしかり『龍＝厳つい、強そう』というイメージはないでしょうか？
そんな厳つい生き物を新年早々に起こすのは心苦しいですし、何より遊ぶ側も目覚めが悪いです。初夢が「滅びのバーストストリーム」だなんて幸先が悪いので、楽しく何度でも遊んでもらえるように可愛い龍のイラストと明るい色味で親しみやすさを持ってもらえるように仕上げました。

龍のイラストは寝ている時だけでなく、失敗したときの怒った顔も可愛く描けてお気に入りなので、失敗した際のイラストにも注目してもらえると嬉しいです。
イラストデータは、コーディング担当者の方に「解像度が足りないじゃないか！！」と怒られるのが怖かったのでIllustratorでベクター形式で作成しました。出来上がったサイトを見たとき龍の顔など一部のイラストがSVGになっていたので製作時の自分を褒めてあげました。

イラストに負けないフォント選び

イラストを使用したデザインの際、文字のインパクトがイラストに負けてしまう場合があるので、フォント選びには気をつけました。お正月という事で和のテイストをベースにしつつも可愛いさを出すために、今回はAdobe Fontの「VDL メガ丸」をメインで使用しています。
視覚デザイン研究所さんのフォントは個性がありつつも文字の可読性が高く、文字組としての見栄えが良いので愛用させていただいています。
地の分には「解星特ミン」というフォントを使用しました。
こちらは、うろこ（三角形の山の部分）に丸みのある可愛いフォントなので、明朝体よりも軽いテイストで使え、今回の和風のイメージを持ちつつ可愛さも欲しいというイメージに最適だったので使用させていただきました。

▼各フォントへのリンク
VDL メガ丸
VDL メガ丸の開発会社：視覚デザイン研究所
解星特ミン

薄田：こんな感じで案件と並行して進めていますが、手を抜くのではなく、しっかり作り込んでいるので、細かいところまで楽しんでいただけると幸いです！ そしてお次は、裏側の仕組みのお話です。

サイト制作者向け：怒る？怒らない？の仕組みはこうなっていた…!?

年賀サイトのコーディングを担当しましたデザイナーのKです！
髭を触ると「起きて怒ってしまう場合」と「起こさず眠ったままで結果につながる」2パターンの分岐をするため、今回はJavascriptを使って確率を設定し、ランダムに分岐するように作成しました。
そこで使用しているのがMathオブジェクトのrandom()、floor()というメソッドです。

Math.floor()関数：与えられた数値以下の最大の整数を生成する(例：4.5678…→ 4)
Math.random()関数：0以上1未満 (0は含むが、1は含まない) の範囲で小数による乱数を生成する（0〜0.999･･･）

random関数で乱数を生成することはできますが、少数という扱いづらい数値になってしまう……そこでfloor関数を使って扱いやすい整数にします。
今回はこのように設定しました。

▼コードから一部抜粋したもの

$(".left_hige").on(clickEventType, function() { 

　var min = 1 ; 
　var max = 10 ; 

　var r = Math.floor( Math.random() * (max + 1 - min) ) + min ; 

　if(r > ◯){ 
　　　// ◯より大きい場合にやりたいこと 
　} else { 
　　　// それ以外（1〜 ◯）がでた場合にやりたいこと 
　}  
});

まず最小値として1を、最大値として10を代入して1~10の範囲で作ることにしました。

var min = 1 ; 
var max = 10 ;

設定した数値を代入してみると、

var r = Math.floor( Math.random() * (10 + 1 - 1) ) + 1 ;

random関数で生成された数字に ”(10 + 1 – 1)”で計算された”10”を掛けることで「0.1が1」に、
「0.2が2」になります。ただそれだけですと、random関数で生成されたものは”1.6749548…”のように少数点以下が残ってしまいます。
そこで小数点以下を切り取るのがfloor関数の役目です。
また、そのままでは0〜9の範囲になってしまうため、最後に＋min(+1)をすることでやっと１〜10の範囲になります。

あとは、ランダムで変数ｒに代入された整数が1〜◯の場合はどうする、◯〜10の場合はどうするなどを決め、それぞれの状態を該当の箇所に記述していきます。

薄田：ちなみに実は３回目だけにこの仕様が入っているので、2回目まではどちらを選んでも起きない仕様になっていました（笑）

まとめ

ご紹介は以上になります。今年の年賀サイトはいかがでしたか？
制作の裏側にも触れて、第３回目の記事より、さらに良さが伝わったのではないでしょうか？
年賀サイトの他にもコアフレームでは、コーポレートサイトやLP、神社のデジタルおみくじなども制作させていただいた実績もあります。来年の年明けに年賀サイトを試してみたいという方や、何かユニークなWEBサイトを作りたい！という方、
何も決まっていない状態のご相談からでも受け付けておりますので、ぜひご用命ください！

関連記事

あけましておめでタイガー！年賀サイト2022！！
かわいさA５ランク! 2021年賀サイト
WEB制作の現場から！コアフレームでホームページができるまで

サイト制作のお問い合わせはこちら

Tweet