ゲーム・エンタメ系サイトのデザイン方法【ポートフォリオ作品例】
ゲーム・エンタメ系サイトのデザイン制作について、ポイントを解説します。
テンプレートのPSDはこちらからダウンロードできます。
ゲーム・エンタメサイトのデザインテンプレート（PSD）
画像やテキストなどを変えて、オリジナルのデザインを作ってみてください♪
Webデザインの経験が浅いうちは、ついついシンプルなサイトを作って自己満足に陥りがちです。色数を限りなく抑えて少ない要素をデザインの原則に基づいて配置するだけで、一見それっぽいデザインが出来上がります。特にAdobeXDが登場してから、要素を整列して並べただけでデザインをした気になってしまいがちです。
本当に難しいデザインは色と要素が多いものです。色と要素が多ければ多いほど調和を生み出す難易度が高くなります。シンプルなデザインに逃げずに、ゲームやエンタメ系など、多色でにぎやかなサイトデザインに挑戦するようにしましょう。
ゲーム・エンタメ系サイトのデザイン制作 ３つのポイント
１. ビビットなトーンを使う
ゲームやエンタメの世界を強くアピールするために、ビビットで彩度の高いトーンを使うと、鮮烈で強い印象を残せます。
もちろん、ゲームの世界観にもよるため、ゲーム内で使用される色を中心に使います。
２. そのゲームやエンタメの世界観を再現する
メインビジュアルの背景やグローバルナビにゲーム素材を使用することで、サイト上にそのゲームの世界観を再現します。
３. 不規則配置でダイナミックに魅せる
規則的に要素を配置するのではなく、キャラクターやテキストをやや不規則に配置することで、躍動感やダイナミックさを出して、魅力的に見せます。
本テンプレートで使用しているフォントや素材について
使用フォント
使用フォントはすべて無料で入手可能です。
ロゴ：Niconne（Google Fonts）
ナビゲーションやキャラクターのセリフ：Rounded Mplus （フリーフォント）
その他：游明朝（Mac/Windows標準）
使用素材
キャラクターのイラストで使用させていただいた『ジュエルセイバー』は、実在したソーシャルゲームです。サービスは終了しましたが、キャラ素材を無料で提供してくれています！無料素材のなかではかなりクオリティが高い方なので、ゲーム系デザインに興味があればぜひ使ってみましょう。
キャラクターイラスト：ジュエルセイバーFREE（公式サイトは無くなってしまいましたが、有川さんという方が再配布をしてくださっています）
背景画像：パブリックドメインQ
グローバルナビの木目：Pixabay
レース：ダ・レース
背景のボーダーは、レイヤースタイルのパターンオーバーレイを使っています。パターンファイルを提供してくれているサイトがあるので、ダウンロードして使ってみましょう。
このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社することを強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』と『Webist』の２つです。
※コロナもほぼ収まりつつありますが、まだワークポートもWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために、ポートフォリオを制作後に登録しておきましょう。
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、50〜60万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』のようなスクールに行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。
他にも、PHPに特化した無料の『無料PHPスクール』もあります。PHPはがっつりプログラミングの言語である一方で、ECサイト構築やWordPressにも使われるWeb系と親和性が高い言語なので、Web系に進みたい人には無料PHPスクールはオススメです。23日間通学でけっこうハードなカリキュラムです。
この２つの学校のどれかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！
ご質問や感想など、お気軽にどうぞ！