もくじ
- ゲームサイトのデザインいろいろ
- ゲームサイトに特化したギャラリーサイト
- 「ゲーム」タグがあるギャラリーサイト
- ゲームのデザインをまとめた記事
- ゲーム関連のアイコン
- ゲーム関連デザインのためのチュートリアル
ゲームサイトのデザインいろいろ
まずゲームサイトのデザインとはどんなものがあるのでしょうか？本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します！
ジョジョの奇妙な冒険 オールスターバトル
バァーンッ！！まずはFlashバリバリ！のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です！なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト！ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。
トゥームレイダー
黒を背景にしていてシリアスな雰囲気や「ララ・クロフト」の不安が伝わってきます。可変グリッドレイアウトで、ウィンドウを伸縮するとそれに応じてボックスが動きます。たとえ隙間が生まれたとしても、固定背景にララが敷いてあるのであまり違和感がありませんね。更新もしやすそうな印象です。
モンスタードラゴン【MONSTER×DRAGON】
遠近感がよく出ていてすごいなあと思ったサイト。こちらは横スクロールのパララックスを用いています。下にちっちゃいドラゴンがいっぱい羽ばたいているのがゲームっぽいです。横にずーっと続いて行くことで、「たくさんのドラゴンがいるんだよ！！」ということがよく伝わります。
いますぐお兄ちゃんに妹だっていいたい！
配色がイラストととてもマッチしていて可愛らしいサイト。こちらは縦スクロールのパララックスを用いています。スクロールする度に女の子の私物？のような小物が飛び出してきてキャラクターの魅力が伝わってくるように感じます。
ゲームサイトに特化したギャラリーサイト
ここからはゲーム関連のデザイン制作に参考になるサイトをご紹介していきます！上記で紹介したようなサイトがたくさん見れますよ！
積ゲーム
こちらには本当にお世話になっています！「ゲーム」のデザインに特化したギャラリーサイトって、あまりないので発見した時は小躍りしましたwサムネイルも大きくて見やすいです。
ゲームの他にも「アニメ」「映画」などのカテゴリーがあります。たしかに、「アニメ」や「映画」といったエンターテイメント系のサイトはゲームサイトと同じくらいに賑やかで凝ったデザインが多いですよね。
ゲームクリップ
実はこちらのサイトはつい最近知りました。「ゲーム」の中でもさらに「TVゲーム」「PCゲーム」など、ジャンル分けされているのが嬉しいです！色でも絞り込めたりして、多機能だなあと思います。こちらにもぜひ頑張ってほしいです！
「ゲーム」タグがあるギャラリーサイト
上で紹介したサイトに加え、とにかく「ゲーム」というタグがあるギャラリーサイトを片っ端から見ます！
S5-Style
Web Design Clip 【Webデザインクリップ】
Tau Magazine
YSIG
他にも様々なギャラリーサイトに「ゲーム」タグがついています！
ゲームのデザインをまとめた記事
40+ Gaming Website Designs Inspiration | Logolitic
こちらは海外のゲームサイトのデザインをまとめた記事です。見ていると公式ページ、というわけではなく、「ゲームサイトっぽいデザイン」を集めたという印象です。でもどれもすごい…。少し前の記事なのでリンク切れもありますが、ご参考までに。
45 Japanese Animation & Video Game Website Layouts – DesignM.ag
こちらは日本のゲームサイトをまとめた記事です。なにやら、「アメリカと日本のWebデザインのトレンドはずいぶん違います」という書き出だしにドキリ。どうやら、「日本のゲームサイトはデザインは綺麗だけどアイコンやバナーにFlashを多用している傾向がある」ということを言っているようです。
たしかにゲームサイトのデザインというのは独特なのかもしれませんね。「まずはインパクト！」というか。私は「サイトを通じてゲームのワクワク感を伝えたい！」という気持ちが伝わってくる気がして好きなのですが。とはいえ「Flashが重すぎてサイトが見れない！」なんてことにはならないようにしないとですね。
紹介されているサイトがどれも綺麗なので私はこの記事に関してはただただデザインを眺めて参考にしています。
ゲーム関連のアイコン
ゲーム関連のアイコンは、商用可能のものはあまりありません。お仕事では使えないにしても、参考で眺めたりしています。
Game-icons.net
ゲーム関連のアイコンを1,000種類以上も取り揃えたサイト。CC3.0ライセンスで提供されています。ダウンロード形式がSVGとPNGで選べるのが嬉しいところ。
ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」 – GIGAZINE
手描き感がとてもかわいいファンタジーRPGのアイコンセット。CCライセンスで個人利用のみフリーとのことです。いつか使ってみたい。
かわゆすぎるゲーム機のドット絵アイコンたち : Kotaku JAPAN
こちらはドット絵アイコンのまとめ記事です。たくさんの種類のハードごとにアイコンを作るなんて本当にすごい。
Vector Icon Pack
個人利用のみフリーの3つのアイコンパック。可愛らしかったのでメモ。
30 Really Cool Free Icons to Download | UnderWorld Magazines
アイコンまとめ記事の真ん中あたりで紹介されている「Gaming Icons」と「Nes Icons Pack」です。
【おまけ】フラットなゲームボーイのアイコン
素材ではありませんが、「dribbble」にありましたのでメモ。ゲームのアイコンでフラットなのは初めて目にしました。
ゲーム関連のデザインとフラットデザインは縁遠い存在なのかな、なんて勝手に考えていましたが、そうでもないのかもしれませんね。こういった作品を目にすると「使う機会ないし…」とフラットデザインに苦手意識を抱いていましたが、やっぱり勉強しなきゃなあと切に思います。
ゲーム関連デザインのためのチュートリアル
どちらも少し古い記事ですが、チュートリアルって珍しいなあと思ったので備忘録として。レトロゲームのデザインなんかにも参考になりそう。
サンプルPSDあり、ゲーム好きのためのフォトショップチュートリアル30個まとめPhotoshopVIP | PhotoshopVIP
ゲーム機をゼロからPhotoshopで作るって考えただけで気が遠くなりそうですが、Photoshopの勉強になりそうだったのでメモ。
Photoshopでゲーム関連のサイトをデザインする方法 / ウェブデザインライブラリー
こちらはどちらかというと「ゲームを紹介するサイト」をデザインするチュートリアルといった印象ですが、「そんなのあるんだ！」と興味深かったのでメモ。
さいごに
いかがでしたでしょうか？自分用も兼ねてまとめてみましたが、もしゲーム関連のデザインやそれに似たド派手なデザインにチャレンジする時に参考になれればなあと思います。
多くのゲームサイトなどを参考にしていると、本当にゲームの世界観を実にうまく表現していて、毎度舌を巻いています。
かくいう私はというと、打ち合わせでデザインのイメージを尋ねると「荒廃した街」とか「シダ植物がはびこるような…」という答えが返ってきてその度に目を白黒させてる状態ですが、これからも頑張って表現力を磨いていきたいと思います。
以上、彩がお送りしました！
コメント