PCゲーマーなWEBデザイン100選

Wordpress 向けの記事を多く紹介しているブログです。

• 全体的にかわいい感じ。
• 画像を最大限に活用し、わかりやすく。

WEBのUIや技術系のGOOTPATCH社のブログです。

• ブログのためのナビゲーションがない。
• 各種ボタンは見やすくて、押しやすい。

jQueryについて多く取り上げているブログです。

• JS/jQuery に関しての記事と、その他の記事で大きく二つにカテゴリわけをしているので、サイトの目的がわかりやすい。
• トップバナーは実はナビゲーションになっているが気づきにくい

Webデザインや、WEBスクールを開講している方のブログです。

• アナログな質感をもったページ。
• 新聞のようなレイアウトで、記事一覧も敷き詰めてならべてある。
• それが返って読みづらい。

jQueryなどについて多く記事を扱っているブログです。

• 極力情報量が少なくなるように作ってある。
• 各ブロック要素同士の境目が広め。

Webデザイン系のブログです。

• 左側が色が濃くて、右側にいくとだんだん薄くなる。

Webページの色を解析して見やすく公開しているブログです。

• WEBページの色を見せることに集中しているので、サイト内の説明やカテゴリ、タグクラウド等は隠されている。（右上のボタンをおして表示）
• ページを読み進めると、更新がかかって新しい記事が読み込まれる。
• 色を16進数で示しているのもうれしいところ。

WEBデザイナーのYATのブログです。

• 配色や文字の大きさ、行間がとても読みやすい。
• Windows だと 各種ヘッディングのフォントが若干読みにくい

フリーWEBクリエーターのかたつむりくんのブログです

• プログラム系のブログであるが、かわいいデザイン。
• 各種線は、クレヨンで書いたような線だったり、サインペンで引いた破線だったりして、アナログチックな感じ

WEB制作会社のシーブレインのブログです。

• ごてごてしていないすっきりしたデザイン。
• 左右のサイドバーが、記事を若干圧迫しているように見える。
• たくさんのカテゴリがあるので、たくさんの情報を抱えていることがわかる。

Web制作会社 8bit の公式ブログです。

• すっきりとしたグリッドデザイン。
• ヘッダーバナーだけを見ると、建築関係のブログなのかと見間違える可能性がある。テーマにあっていない気がする。

少女探偵ナンシーのゲーム化を行っている Her intractive のホームページです。

• 他のゲーム会社にくらべて、媚びない感じの普通のレイアウト。
• 赤紫がベースカラーになっている。（女の子向けにしては、あまりポップな色ではない？）

Age of Conan などを手がける、FUNCOM のホームページです。

• トップページが Flashで出来ている。
• 大きい一枚絵の背景。
• 各ゲーム紹介ページに飛ぶと、左側の背景画像がヘッダー画像になってくれている。右側にはブログ記事。

SITIES XL やシャーロックホームズシリーズを手がける、Focus Home Interactive のホームページです。

• ロゴのデザインが面白い。
• 画像を全体的に使いすぎな印象。

ゲームパブリッシャー、Unreal Engine シリーズの EPIC GAMES のホームページです。

• スライダーは自分で動かすタイプ
• ブランドページ以外は、あまりjQuery等のプラグインを使わずに、静的なページになっている。
• 各種ブランドページでは、フルワイドスクリーン対応のページになっている。

英DEEP SILVER社のホームページです。

• ビルボードとしたのゲームタイトルバナーはシンクロしている。
• 背景画像が実は背景画像ではなく、HTML内におかれた画像になっている。（理由は不明）
• 画像が全体的に大きいので、読み込みに時間がかかる。

ゲームパブリッシャーの CI GAMES 公式ページです。

• ビルボードのスライダーメニューが珍しく縦並び。
• リンクの文字もテキストの文字も同じ色なので、マウスポンタを持っていかないと、リンクかどうか分からない。
• 商品詳細ページには、ゲームに関する画像が一切なく、テキストだけになっている。

株式会社カプコンの公式ページです。

• ファーストビューは、ゲームをを中心に閲覧できるようになっている。
• トップページを下のほうへ進むとIR情報が閲覧できる。
• IR情報が充実しているので、会社内の情報（売り上げ当）が透明化されていて信頼性が高い。

ARMAシリーズなどで有名な「Bohemia Interactive」の公式ページです。

• スライダー内の画像が動画になっている。
• 画像等のサイズが大きすぎるため、サイトが重い。
• スッキリした色合いのページになっている。

iOSアプリを中心にゲーム配信を行っている「BIG FISH GAMES」の欧米向け公式ページです。

• 全他的に太いゴシック体で統一してある。
• クリスマスのためか、色は青に統一してある。
• 各ナビゲーションの上にマウスポインタをのせると、いきなり隠れていた要素が出てくるのでフェードがほしいところ。

日本コカ・コーラ株式会社の公式ページです。

• コカコーラだけど赤くない。
• 画像が圧縮されすぎて、ほとんどの画像がゴワゴワしている。
• ナビゲーションが少し見づらい。
• 全世界で共通のスタイル。

ぱくたそ管理人のすしぱくのブログ。

• 背景が若干くらめのテクスチャーで、記事が浮き上がって見える。
• カテゴライズはナビゲーションでまかなっている。
• サブカテゴリー管理なのに、サブカテゴリー一覧がないので、サイトマップがほしい。

ゲームパブリッシャーの Bethsda Softworks の欧米向けページです。

• 画面全面の大きなビルボードスライダー、画面切り替えのスパンは長い。
• メインコンテントにはアルファチャンネルが指定してあり、ビルボードを良く見せる工夫が施されている。その反面、コンテントに目が行きにくい。
• 文字で見せるより映像で見せたいのか、ビルボードの真ん中に再生ボタンがある。ゲームの説明はページしたにちょこっとあるだけ。

ゲームパブリッシャーのUBISOFTの欧米向けページです。

• 全面のビルボードスライダー
• 他の画像へ飛ぶと、実はシームレスにページ移動が行われている。
• リアルなグラフィックを売りにしている会社なので、ゲームの内容よりもグラフィックの良さを見せるようになっている。

プログラミングラーニングサイトのCodeprepです。

• 統一されたフラットなデザイン
• やわらかい色で色が統一されている。
• 学ぶというよりも、"開発"するというコンセプトで作られているため、実際に学んだものは他でも実際に使用できる

ゲームデベロッパーの Blizzard 公式ホームページ

• 全面に見える大きなビルボード
• ナビゲーションについているなぞの空間のせいで見づらい。
• NEWSがjQueryでクリックすることで古い情報を見れるが、あまり目立たないのであまり押されなさそう。

Web系プログラミングラーニングサイトのドットインストールホームページです。

• スマートフォン対応で、いつでも学習できることを提示
• 数字をとおして、たくさんのプログラムを学べることが分かる。
• 実際にプログラミングをしていくのに、実用例も用意してあり、それをやるために必要な学習も提示してある。

ゲームエンジンの「Unity」のホームページです。

• ビルボードの矢印をクリックすると、後ろから別な画像が浮かび上がる。
• このゲームエンジンでできることを分かりやすくカテゴライズされてある。
• Unityで作られたゲームを Showcase でたくさん並べることで、Unityが色々なゲームで使われていることを実績として見せている。

ゲームパブリッシャーの「Activision」北米向けホームページ

• 大きなビルボード。スライダーさせる画像を三つに絞り込むことで、最新作に集中して表示していることがわかる。
• メインコンテンツからよりも、ナビゲーションからタイトルを探したほうが見つかりやすい。
• ビルボードにあるボタン類が小さくて押しにくい。

飲料メーカーの「ダイドードリンコ株式会社」のホームページです。

• 文字の大きさを変更できるボタンがある。
• 商品CMを右サイドバーでこっそり流している。
• 右サイドバーに、ブランドごとのバナーを設置することで、どういう商品を売っているか良く分かる。

英会話教室の「イーオン」公式ホームページです。

• トップは青い色で落ち着いた感じになっている。
• ページを進めていくと背景色がだんだんピンクになっていくので、より青が強調されて見える。
• 石原さとみが右側に写っているので、その後のページへ目線も右よりになっている気がする。

Rollandのブランド商品「BOSS」のホームページです。

• ストンプボックスをイメージしたような、グリッドデザイン。
• 「NEW PRODUCTS」は、特別なページ風になっている。
• 目的別に探すのには少し明示的ではないが、シリーズ別・ジャンル別で索引できる

自転車メーカーの「Giant」日本公式ページです。

• ほとんどのページは、あまりスクロールしなくても大丈夫なよう画面全部にメニューやコンテンツが含まれるようにできている。
• ジャンルページは目的別で索引できる。
• 自転車スペックはタブパネル表示

鹿児島駅前にある、アミュプラザ鹿児島の公式ホームページです。

• 右の２カラムのブロックが交互に並んでいるので、ジグザク読める。
• トップページ以外は真ん中がメインカラムになる。

音楽プロダクション「World Apart」の公式ホームページです。

• アーティストごとにイメージカラーがあり、各アーティストページではその色をベースカラーとして使われている。
• それぞれの主張しすぎない淡い色。
• 最大３カラムのグリッドデザイン

米AMD社の北米向け公式ホームページです。

• ナビゲーションにマウスポインタを載せると、ビルボードを覆い隠すようにメニューが表示されるので、ユーザーはビルボードに目がいかなくなる。
• 同じブランド名の商品紹介ページでは、タブパネルを利用して型番別スペック表示にすることでコンパクトに。
• 自社のロゴにあわせて、各ページのビルボードにも平行四辺形の図形が組み込まれている。

米Valve SoftWareのゲームソフト「Team Fortress 2」のホームページです。

• 70年代風スチームパンクな世界をコンセプトにしているので、オールドスクールでメタリックなデザイン
• アップデートが頻繁にあるゲームなので、ブログ形式のホームページになっている。
• ビルボードのキャラクターは個別プロフィールページへ進む。

台湾のPCパーツ及び周辺機器メーカーASUSの日本公式ページです。

• トップページに主要商品の画像があり、ユーザーが求めているものを探しやすい。
• 上のナビゲーションからも商品を探すことが出来る。

ソープメーカーのLUSHのホームページ及び販売サイト。

• 極力画像を使わずに、アイコンや見出しを作っている。
• 各ソープがどのような素材から出来ているか確認できる。
• ページによってはビルボード裏に実際に商品を使用している映像が流れる。

雑貨ショップのLOFT公式ページ

• グリッドデザイン
• 左側のメニューは固定
• アクセントカラーにピンク

ゲームパブリッシャーの２Kのホームページです。

• ナビゲーションメニューは製品にかかわることだけ。自社の情報等は全てフッターに入れてある。
• ビルボードはEA同様背景においてあるが、フラットデザインなため奥行きは感じない。
• ページをスクロールさせると、背景が動く

ゲームパブリッシャーのEAのホームページです。

• ページのトップにあるビルボードは前に出すのではなく、背景画像にしてある。ビルボード自体もキャラクターの後ろの背景をぼかしているため奥行きを感じる。
• PCゲーマーとコンシューマゲーマーを相手にしているため、モバイルサイトは用意されていない。
• 各バナーの上にマウスを乗せたり話したりすると、バナーがぶれるようになっている。

老舗FPSメーカー「id Software」のグローバルページです。

• Bootstrapを使った1ページサイト
• 画像が少ない。
• 自社商品紹介はシリーズとして連番は多いもののタイトルが少ないので、シリーズのコンセプトだけをシンプルに紹介。

めがね販売チェーンのオンデーズのホームページです。

• 赤青白で統一されたイメージカラー
• トップページは固定レイアウトRWD。
• その他のページは可変レイアウトRWDになっている。

ハンバーガーショップ「A&W沖縄」のホームページです。

• ブロック要素が殆ど丸い。
• ルートビアが売りなので、イメージカラーは茶色。

エンターテイメント配信会社　DLEの会社ホームページです。

• レスポンシブWEBデザイン対応
• タイルデザインであるが、左側のメニュークリックで普通のナビゲーションも完備
• タイルデザインは、売りのコンテンツ意外は目立たないように黒っぽくなっている。

クラスメソッド株式会社が運営するiOS技術者向けブログ

• 記事一覧の記事を選ぶと、サムネイルがぬるっと浮かび上がる。
• ブログナビゲーションはカテゴリー一覧になっていて、見やすくて選びやすい。

シンガーソングライターのつじあやのの公式ページです。

• 全体的に青っぽく、やわらかい感じ。
• ブログの更新も表示されている。
• 重要な項目ほど、補色が使われていて、注目度があがっている。

イギリスのギターメーカー「Burns London」の代理店である島村楽器のホームページです。

• 白いところが多いので、自然とオブジェクトが目立つ
• 余計な説明がない。
• 奇抜的なモデルを利用して、ギターの売り文句を調整している。

ゲームデベロッパーチーム、Gearbox Softwareのホームページです。

• ビルボードの画像が入れ替わるたびに、画像が枠からはみ出て登場する。臨場感がある。
• トップページは簡単なブログ形式。

松竹系の映画館のホームページです。

• 映画館のホームページにしては明るいホームページなんだなと感じた。
• 画像はそれぞれ小さめ
• ナビゲーションはより使用頻度の高い順から並んでいる。

WEBデザインやWEBサービスなどの話題を取り上げているブログです。

• メインカラムが少し左側に寄っているので、自然に目がメインカラムに向く。
• 右側が大体広告で固められている。

 イギリスのベーシスト「Jack Bruce」の公式サイトです。

• ファヴィコンにヘ音記号が使われていて、ベーシストであるという認識がそこからもできる。
• Cream時代から続くサイケチックなイメージを背景画像にしている。
• 公式ページ内はブログ形式になっていて、たくさんの目的別ナビゲーションが設置してある。

スポーツレーシンゲームをはじめとした、イギリスのゲーム製作会社。

• 今売りのゲームを厳選して、大きく画像で見出しにしている。
• 左側のサイドメニューでゲームを選択すると、選んだゲームのページが下から流れてきて、ページ移動がシームレスに感ぜられる。

マスキングテープ「ｍｔ」のホームページ。「mt」はカモ井加工紙株式会社のブランド商品です。

• シリーズやキャンペーンごとにキャプションボタンが用意されている。
• シリーズやキャンペーンごとにロゴを変えてある。
• 女性向けのブランドなので、パソコンで見るよりこともスマートフォン・タブレットで見ることに最適化されている。可変グリッド。

CMSツール「Movable Type」の英語版公式サイト。

• ランディングページのような商品の紹介。
• 途中から始まるスクロールで進むタイプのスライドショーは操作的に少し混乱するが、面白い。

Web制作会社「株式会社LIG」のオフィシャルサイト兼ブログ。

• 会社のページとブログとが喧嘩しあわずに共存している。
• 見出しがはっきりしていて、見たい情報をすぐに拾える。
• 広告がたくさんあるがそれぞれ独立していて（キャプションが見やすい）、惑わされることがない。

FPS・TPSなどのシューターゲームを主に取り扱ったゲームニュースブログ。

• 記事一覧では、記事の題名と概要が全部がリンクになっていて、マウスポインタを上に乗せると3px程度のボーダーが出てきて、更にこれら全体がリンクであると認識しやすく設計されてある。
• ナビゲーションはページを読み進めていくと、後から画面上固定になる。
• ナビゲーションから全てのカテゴリにアクセスできるように、プルダウンメニューになっている。
• アドセンスがとても多い。

デザインやアートを中心とした、ニュースやトピック紹介ブログ。

• 非常にシンプルなデザイン。
• コンテントの幅が狭いので、各キャプションがよく目立つ。
• ナビゲーションがうにうに動く。

３ピースロックバンド『TRICERATOPS』のオフィシャルサイト。

• トップページの大きいビジュアル。枚数も多い。左右の矢印で次の写真へ移動可能。
• 各ナビゲーションの上にマウスポインタをおくと、文字がロールアップして色が変わる。
• トップバナーとヘッダーナビゲーションが大きい上に固定なので、大きい解像度のモニターでなければ見づらい。

Movable Typeのテーマの無料配布・販売を行っているWeb制作会社のホームページ。

• ワンカラムレイアウトだが、ナビゲーションバーを常にトップに置くことで、操作性、閲覧性を欠かない。
• Schemaを利用したコーディングが施されている。

　インディーズゲームデベロッパー『Mojan』が提供する、サンドボックスゲーム「Minecraft」公式ページ

• 2000年代前半を彷彿させるようなシンプルな２カラムとナビゲーション。
• 16ビット風に作られた「Minecraft」のイメージとあわせた背景・画像が使われている。

　WebデザインやPhotoshopの使い方を載せているブログ

• タイトルやページ移動でアニメーションが使われている
• ページペンプレートに殆ど画像が使われていなくて、シンプル。
• スマートフォンで見ても見やすい。

　ロイヤリティフリーの写真素材提供や企画を行っているサイト。

• たくさんのキーワード、タグに対応していて、細かくカテゴライズされている。（右のサイドバーに注目）
• 旬な素材に富んでいる。
• 横幅が大きめのサイトなので、HD FWXGA（1366x768）以下の解像度では見づらい。

　『Half-Life』シリーズや『Source Engine』、PCゲームプラットフォーム『Steam』を運営する米Valve Softwareの社サイト。

• ゲーム会社としては珍しく、ゴテゴテしてないすっきりしたデザイン。
• 自社商品のスチームパンクな印象を出すために、どの商品にも黒と白を基調としていて、プラスイメージカラーがついている。

Webデザインの勉強をかねて、好きなサイトを100点紹介します。