日記です 
週に1回気になったWEBサイトやコーディングの情報をまとめています。
今週は2つお届け！
スノウブレイク：禁域降臨
PCのローディング画面。100%になるとホワイトアウトしてページが表示される
PCのFV。画面左側にロゴとメニュー、上部は言語切替とSNS、下部にダウンロードリンクがある。
メニューは見やすいように背景に白のフェードが入っている。
ニュース。セクションごとにスクロールが制御されていてぴったり画面に内容が収まる。
またFVから離れるとダウンロードリンクは画面右側に移動して追従するようになる。
キャラクター紹介。キャラを切り替えると左から右にフェードインして表示される。
ゲーム紹介。立体的なスライダーで中央の一枚以外は暗くなっている。
立体的なスライダーは中国のトレンド？よく見かける気がする。
SPのFV。ダウンロードリンクは2つに絞ってMVを大きく表示している。(下に行ってもグーグルプレイのリンクがなかったのはなんでだろう…？)
メニュー。全画面でなくあえて半分ページをみせるデザイン。閉じるボタンもこだわりを感じる。
キャラクター紹介。SPになると見出しはなくなる。非アクティブのキャラをよくみると細かいドットが重ねられていて作り込まれている。
世界観紹介。次へを押しても白背景の高さは一緒なのでレイアウトが統一されていて見やすい。
3D近未来シューティングRPG「スノウブレイク」の公式サイトです。
ツイッターの広告に流れてきて、先々週に似た雰囲気のNIKKEのページを見たので比較になればと思い見てみました。
スノウブレイクはスクロール位置やカーソルマウスにこだわっていたり、ファーストビューにMVとリンクの優先順位も考えつつ収めていたり、フォントサイズも小さくしすぎないなどUI・UXも考えられたWEBページだと感じました。(でも個人的に完成度が高いのはやはりNIKKEだと思います)
レスレリアーナのアトリエ ~忘れられた錬金術と極夜の解放者~
PCのFV。動画の上にロゴとキャッチと「事前登録受付中」のバナーが重ねられている。
バナーをクリックするとダウンロードリンクのセクションにスクロールされる。
ヘッダーは画面右に縦長で追従する形。
ローディング画面。ゆっくり点滅しながら外側の円が時計回りに動く。
メニューをひらくと後ろにbackdrop-filter: blur(5px);でぼかしがかかる。
ナビの左のダイヤアイコンは今いるセクションに付く。
MVの下にお知らせバーとバナーがある。お知らせバーにはトピックス一覧のいちばん最新の1県が表示される。
イントロダクション。文字はすべて画像でなくHTML。
キャラクター一覧。メインキャラとサブキャラと悪役でわかれている？
ホバーすると黄色の光彩がかかる。新しく追加されたキャラクターには左上に黄色の点滅する丸が付く。
キャラクター詳細。一覧から別ページに移動する。
ストーリー。こちらも文字はすべてHTML。円の外の魔法陣はゆっくり回っている。
システム。下のシステム一覧はスワイプできる。
SPのFV。右上に大きめのメニューアイコンがある。
メニュー。PCの横幅をそのまま縮めた感じ。
PCで横に並んでいたキャラはSPでは縦に互い違いに並ぶ。
キャラクター一覧。中央4人以外はfilter: drop-shadowで暗くなっている。
コメントアウトが丁寧。
コーエーテクモゲームス×アカツキゲームスが贈る「アトリエ」シリーズ最新作「レスレリアーナのアトリエ」の公式サイトです。
アトリエシリーズはプレイはしたことがないものの、デザインが好きで最新作が出るたびにサイトやゲームのスクショを覗いています。今回のもとても良さそう！！
どれもトンマナがはっきりしているのが好きです。今回だったらダイヤや魔法陣がモチーフで、落ち着いた青色がメインカラーでアクセントに上品な金色なところ。
さいごに
今週は
- スノウブレイクの公式サイト
- レスレリアーナのアトリエの公式サイト
の2点でした。
三連休を楽しむため今週は少なめ。明日は図書館に一日中いようかな～WEBから離れて旅行雑誌とかホラーな絵本とか読みたい気分。早起きするぞ！