レトロだけじゃない！WEBサイトにおけるピクセルアートの表現

こんにちは。デザイナーの鈴木です。
今回のテーマは、デザイントレンドとしても注目される「ピクセルアート」です。日本だと「ドット絵」と呼ばれることの方が多いかもしれません。元々はテレビゲームで使われたグラフィック表現でしたが、近年は新しい表現と融合して、デザインシーンに登場しています。そんなピクセルアートをWEBサイトでの事例とともに紹介します！

ピクセルアートとは

「ピクセルアート」は、コンピューターの機能的な制約のもと生まれ、現在でも表現技法のひとつとして愛されています。本来、ピクセルアートの一般的な定義は、「画像を構成する最小要素としてのドット（ピクセル）が視認できる程度の解像度で描かれた作品」または、「升目に色彩を配置し構成される画像」とされています。

そして現在では、ゲームやアプリの画面の中の表現にとどまらず、イラストから刺繍、アクセサリーに至るまで幅広く展開されており、今や、表現技法としての「ドット絵」から、「ピクセルアート」という視覚的解釈へと変化しています。

参考：https://pixel-art.jp/02/about/

WEBデザインでの活用例

実際にWEBサイトの事例を見ながら、ピクセルアートがどのようにWEB表現に取り入れられているのかを紹介していこうと思います！

1.サイト全体をピクセルアートで表現して、独自の世界観を作り出す

Yamauchi No.10 Family Office

任天堂株式会社の創業家・山内家一族が立ち上げたファミリーオフィス「Yamauchi No.10 Family Office」のコーポレートサイト。
トップページで「Enter」のボタンを押すと、ゲーム画面の中を覗いているようなポップで遊び心満載なピクセルアートの世界観に入り込みます。3Dで表現された世界は、本来ピクセルアートが持つレトロ感ではなく、独創性や革新性を感じさせます。また、投資部門のページでは平面的な表現に変化しますが、立体的なピクセルオブジェクトとパララックスを組み合わせることで、同じような世界観を体験をすることができます。

株式会社Gaudiy

「ファンと共に、時代を進める。」をミッションに掲げるWeb3スタートアップの株式会社Gaudiyのコーポレートサイト。
2023年10月にコーポレート・アイデンティティの刷新をしており、サイトもリニューアル。文字化けをしているようなロゴは「社会のバグに挑むバグ」というコンセプトを表現したものだそうです。そのバグの世界をピクセルアート、ビビッドでカラフルな配色、コラージュ、カオスな動画を用いて表現しています。インターネット時代の黎明期のような世界観は、独創性、創造性をイメージさせます。また、トレンドのレイアウトやアニメーションを取り入れることで、先進性も感じさせます。
CI刷新のプロセスが書かれた記事が興味深かったので、ぜひ読んでみてください！

2.ロゴやキーとなるビジュアルに取り入れて、クリエイティブな印象にする

株式会社ノイズ

建築設計を核に最新のデジタル技術を駆使し、次世代のデザインと社会価値を探究する建築設計事務所NOIZのコーポレートサイト。
トップページ表示時の演出、ロゴのデザインとモーション、画像のレンガ状の配置と表示アニメーションなど、ポイントでピクセル表現が使用されています。ドットのサイズやモーションとの組み合わせによってはノイズのように使うこともでき、最新デジタルや建築のようなテイストにもマッチします。

Tokyo Creative Salon 2024

東京を世界一のクリエイティブシティにすることをビジョンに掲げる国内最大級のファッション＆デザインの祭典「Tokyo Creative Salon 2024」のWEBサイト。
まず最初に目に入るのが、「T」「C」「S」「24」が遊びのあるピクセルのラインで星座のように連結するビジュアルシステムです。このピクセルのラインが背景やボタンの装飾にアクセントとしても使用されています。デザインやファッションのサイトで一癖出したい時にも、ピクセルアートはとても有効だと思われます。
ちなみにこのサイトはファビコンが動いています。遊び心を感じて素敵です。

3.テキストの一部をピクセルにして、アクセントにする

ノーミーツ／NOMEETS

ストーリーレーベル「ノーミーツ」のWEBサイト。
可愛いロゴや動くイラスト、赤と青のインパクトのある配色が印象的なサイトですが、見出しの部分にピクセルで表現されたフォント（使用フォント：PixelMplus 12）が使用されてます。ピクセルアートが持つワクワク感や楽しさを取り入れています。

MN(エムエヌ）

D2Cセルフメイクアップブランド「MN（エムエヌ）」のブランドサイト。
こちらのサイトでは、PP NeueBitというフォントでピクセル表現をアクセントとして使用しています。トレンドであるY2K・Y3Kを感じさせるメイクを施したモデル写真やブランドの世界観にとてもマッチしていると思います。

4.アニメーションで先進的なイメージにする

Digital Mosaik

AR、VRなどの開発を行うイタリアの企業のコーポレートサイト。
ページ全体や画像表示時の演出にピクセル表現が使われています。一つ一つのドットを大きくして、グラデーションを組み合わせるとデジタル感と先進性がより表現できそうです。

株式会社ノイズ

上の「ロゴやキーとなるビジュアルに取り入れて、クリエイティブな印象にする」でも上げたサイトですが、ピクセルのアニメーションが独創性を演出しています。
アニメーションではありませんが、Aboutページのスライダー、Projectページのサムネイル配置もピクセルを想起させます。

おわりに

いかがだったでしょうか。本来ノスタルジックな雰囲気を持つピクセルアートも、使用方法や他のデザインとの組み合わせによっては、創造性、独創性、先進性のようなブランドイメージを構築するツールにもなることがわかりました。ピクセルを用いたデザインをする際に参考にしていただければと思います。
最後まで読んでいただきありがとうございました！