人気ピクセル作家とコラボしたコーポレートサイト制作事例

ピクセルアーティストの豊井祐太とコラボレーション。小規模なWEBサイトでもクリエイティブでインパクトを出した事例です。X(旧Twitter)では15万のインプレッションを獲得。私たちは企画と制作を担当しました。

クライアント:  株式会社クラシック
公開日:  2022年12月
提供サービス: デジタルコンテンツ制作

WEBデザイン

猫とピクセルアートでWEBサイトを構成。スクロール位置に応じて猫がサイト内を駆け回ります。

ピクセルアート

時間で違う表情を

メインビジュアルは2パターン。アクセスする時間帯に合わせて朝と夜が切り替わります。

昼のアニメーション

夜のアニメーション

ピクセルにリスペクトする実装

昨今のWEB制作では多くの画面解像度に対応できるよう異なる大きさの画像が必要です。１つの画像に対して2倍や3倍の大きさを用意しデバイスごとに切り替えます。しかし、ドット絵によるピクセルアートでは輪郭がぼけてしまう問題がありました。各解像度ごとにドットを打ち直すのでは工数が増えてしまいます。
私たちは画像の輪郭を制御するCSSのプロパティで解決しました。

image-rendering: pixelated;

画像が拡大されてもエッジの効いた輪郭線を維持できます。一つの画像でどんなデバイスでもピクセルが、ぼけないピクセルアートにできるのです。

プランニング

新しい会社だが古い事柄も大切にしたい。緩く謎な雰囲気にしたい。私たちは代表の想いをもとにアイディアを出しました。最終的には広い世代に親しみのあるスーパーファミコンの世界観を再現します。

リラックスシーンのスライドショー

アクセス毎に宝箱からアイテムを獲得

マインスリーパーでサイトが爆発する

可愛い動物のドット絵で癒される

チーム

Pixel Art: Yuta Toyoi
Creative Direction & WEB Design: Shiiho Furukawa
Font-End Develop: Bushitsu Inc.
Special Thanks: Hisayoshi Hayashi, Hayanari Sasaki

関連リンク

ローンチサイト

株式会社クラシック

豊井祐太ピクセルアート作品集「水と手と目」に掲載

グラフィック社

ピクセルアーティスト豊井祐太の公式サイト

1041uuu展示室

反響

ちゃんと宣伝しようしようと思って何もできなかった　年末にこんな仕事をしました https://t.co/Zm8skqlqTy

— 豊井 (@1041uuu) May 12, 2023

内容より猫に目がいっちゃう https://t.co/SppKRo3Kdt

— 森本タカヒロ (@1MoNo2Prod) May 12, 2023

かわいすぎる...そして、1番下までいってからの、TOPに戻る際の感動がすごい... https://t.co/5ErQaOB1UH

— Kurimoto Miki(Kuri Studio) (@umaimesitaberu) May 13, 2023

---

Creative by Raywarp

私たちはデジタル領域に強いポップカルチャーのデザイン会社です。アニメ、ゲーム、漫画のコンテンツをWEBやアプリで制作するのが得意です。
ファンの期待を超えるクリエイティブを大切にしています。

Raywarp ポップカルチャーのWEB・アプリ開発・デザイン

メールに届くニュースレターやってます。
ポップカルチャーとデザインをテーマに記事をお届け。(一方的な営業メールは送らないので、ご安心を)

レイワープ通信 | 古川しーほ | Substack