ゲーム・エンタメ系サイトのデザイン方法【ポートフォリオ作品例】

ゲーム・エンタメ系サイトのデザイン制作について、ポイントを解説します。

テンプレートのPSDはこちらからダウンロードできます。
ゲーム・エンタメサイトのデザインテンプレート（PSD）
画像やテキストなどを変えて、オリジナルのデザインを作ってみてください♪

Webデザインの経験が浅いうちは、ついついシンプルなサイトを作って自己満足に陥りがちです。色数を限りなく抑えて少ない要素をデザインの原則に基づいて配置するだけで、一見それっぽいデザインが出来上がります。特にAdobeXDが登場してから、要素を整列して並べただけでデザインをした気になってしまいがちです。

本当に難しいデザインは色と要素が多いものです。色と要素が多ければ多いほど調和を生み出す難易度が高くなります。シンプルなデザインに逃げずに、ゲームやエンタメ系など、多色でにぎやかなサイトデザインに挑戦するようにしましょう。

ゲーム・エンタメ系サイトのデザイン制作　３つのポイント

１. ビビットなトーンを使う

ゲームやエンタメの世界を強くアピールするために、ビビットで彩度の高いトーンを使うと、鮮烈で強い印象を残せます。
もちろん、ゲームの世界観にもよるため、ゲーム内で使用される色を中心に使います。

２. そのゲームやエンタメの世界観を再現する

メインビジュアルの背景やグローバルナビにゲーム素材を使用することで、サイト上にそのゲームの世界観を再現します。

３. 不規則配置でダイナミックに魅せる

規則的に要素を配置するのではなく、キャラクターやテキストをやや不規則に配置することで、躍動感やダイナミックさを出して、魅力的に見せます。

本テンプレートで使用しているフォントや素材について

使用フォント

使用フォントはすべて無料で入手可能です。

ロゴ：Niconne（Google Fonts）
ナビゲーションやキャラクターのセリフ：Rounded Mplus （フリーフォント）
その他：游明朝（Mac/Windows標準）

使用素材

キャラクターのイラストで使用させていただいた『ジュエルセイバー』は、実在したソーシャルゲームです。サービスは終了しましたが、キャラ素材を無料で提供してくれています！無料素材のなかではかなりクオリティが高い方なので、ゲーム系デザインに興味があればぜひ使ってみましょう。

キャラクターイラスト：ジュエルセイバーFREE（公式サイトは無くなってしまいましたが、有川さんという方が再配布をしてくださっています）
背景画像：パブリックドメインQ
グローバルナビの木目：Pixabay
レース：ダ・レース

背景のボーダーは、レイヤースタイルのパターンオーバーレイを使っています。パターンファイルを提供してくれているサイトがあるので、ダウンロードして使ってみましょう。