ウェブデザイナーがビデオゲームから学べること

ゲームはウェブページのようになり、ウェブページはますますゲームのようになっています。 Habrを見てください：人々はカルマと評価が課されるトピックを書きます。 成功の心理学とゲームの仕組みに従って機能し、相互作用を促進します。 これは、Webデザイナーがゲームやビデオゲームから何を学ぶことができるのかという疑問を投げかけます。



優れたゲームインターフェイスは、ユーザーフレンドリーで直感的で、できるだけ少ないクリックで多くの反復アクションを実行できるものでなければなりません。 それは魅力的でキャッチーでなければなりません。 それは楽しい光景でなければなりません。 優れたインターフェースはゲームの楽しみを高めます。人々は想像力のゲームを破壊しない方法でコンテンツを取得する必要があります。 インターフェースとの不協和は、​​ゲームの失敗を引き起こす可能性があり、それは他のすべての点で美しいです。







プリンスオブペルシャなどの古いゲームでも、限られた能力のシステムにより、デザイナーは創造的で革新的なデザインパターンを思い付く必要がありました。 現在、機会が増えており、現代のビデオゲームでは、より高度な設計手法を見つけることができます。



同様に、サイトユーザーは、コンテンツをシンプルで直感的な方法で表示することを望んでおり、魅力的であり、マウスの動きをあまり必要としません。 Webデザイナーは、ビデオゲームのインターフェイスから多くを学ぶことができます。 ゲームインターフェースの通常の手段を使用するサイトは、ユーザーの作業をスピードアップすると同時に、個性を加えることができます。 これにより、より多くのトラフィックとより多くのリピートアクセスが発生する可能性があります。

したがって、カルーセル、ライトボックス、ドロップダウンメニュー、およびますます洗練されたナビゲーションモデルの流入を目にするのは驚くことではありません。CSSおよびJavaScriptライブラリにより、ブラウザーはそのようなツールを使用できます。 良くも悪くも、このトピックは別の記事についてのものですが、この記事ではさまざまな手法に焦点を当てます。



Webデザイナーがビデオゲームから学べることは、ユーザーインターフェイスに限定されません。 したがって、インターフェイスのいくつかの基本的なアイデアとモデルを見ると、他のトップレベルの概念も役立ち、探索する価値があります。

全体像を忘れないでください

ゲームインターフェースを検討する場合、Webデザイナーはプロジェクトのコンテキストとクライアントの目標を鋭く認識する必要があります。 言うまでもなく、サイトの目標は、常にではありませんが、多くの場合、ゲームの目標とは大きく異なります。 多くのサイトでは、エンターテイメント側よりも効率が優先されます。 クールなフィッシュアイスタイルのインターフェイスは、迅速な税務情報を提供するサイトやeコマースサイトにとって最も実用的なアイデアではありません。 ただし、インタラクティブメディアチャンネルは、リーダーボードまたは何らかの達成システムの使用からのみ恩恵を受けることができます。 プロジェクトに合うようにインターフェースのコンポーネントを選択します。



全体像を見て、インターフェイスコンポーネントだけでなく、構造と方法を考慮してください。 たとえば、メニュー構造を見て、そのような選択が行われた理由を考えてください。 多くのゲームは、「ハブアンドスポーク」アーキテクチャを使用しており、さまざまなメニューにさまざまなツールセットがあります。 「武器」を選択すると、次の画面で武器のすべてのオプションが表示されます。 「マップ」を選択するには、最初の画面に戻る必要があります。 このような構造は、一度に1つの選択に焦点を合わせるため、そうでなければ混乱を招く可能性があるオプションのセットを単純化します。



このタイプのアーキテクチャが、訪問者に豊富な情報を提供するサイトにどのように役立つかおわかりですか？ 訪問者が大規模なオンラインタスクの一部に集中できるようにすることで、クライアントのコンバージョン率を高める可能性があります。 次の例は、サイトの情報アーキテクチャに簡単に適用できる単純なゲームメニューの構造を示しています。







認定監査会社のWebサイトを作成している場合、訪問者のタイプに応じてメニューの情報を分割する必要がある場合があります。 上位の人は、中小企業とはまったく異なるものを必要としますが、どちらも1つの会社を雇うことに興味があるかもしれません。 最上位レベルから開始できます。2つのエントリポイントがあります。1つは個人用、もう1つは組織用です。







また、伝える代わりにビデオゲームが表示される場所に注意し、その理由を理解してください。 成功するゲームは、特にトレーニング中に表示するのが得意です。 主人公は、最も単純な部屋またはレベルを通過する必要があり、そこでは魅力的で適切なプロット形式で基本的なタスクを実行するように教えられます。 冒険者は剣を手に取り、それを振り、ラットを殺し、宝物を集める方法を学びます。 プレイヤーは、プレゼンスの効果を伴うトレーニングを通じて、インターフェイスの使用方法を学習します。





The Elder Scrolls IV：Oblivionでは、刑務所でゲームを開始し、ゲーム内のコントロールの基本原理を学習するために、地下の洞窟に逃げ、ネズミや珍しいゴブリンと戦わなければなりません。



なぜこれが重要なのですか？ 複雑なインターフェース用の完全なインタラクティブチュートリアルをコンパイルする必要はないかもしれませんが、クライアントのコンテンツがグラフや表を使用して理解しやすくなる場合があります。 大きなコンセプトを取り入れて、小さなコンセプトに分解できます。 問題の潜在的な原因を検索し、ヒントと例を使用してそれらを明確にすることができます（ただし、長い説明はありません）。 説明の代わりにゲームがどのように表示されるかを理解することで、プレゼンテーションの難しい問題に突破口を開くことができます。

関与は邪魔にならない

ゲームデザインウィザードのJesse Schell氏は次のように述べています。「ゲームは成功の機会、好奇心を満たす機会を提供します。 これは問題を解決し、選択を試みる機会です。」 最も一般的なサイトでさえ、「人々はゲームのどの要素を最も楽しいと思うか」という質問をすることで、もっと楽しくすることができます。



多くの場合、プレイヤーが選択を入力すると、ゲームはフィードバックを提供します。 これらの要素は、カルーセルメニューまたはドロップダウンメニューだけでなく、インターフェイスに含めることができます。 「これについてもっと知りたいですか？」などの質問をすることで、ドキュメントの送信を確認する前に、サイトでのユーザーの対話を大幅に改善できます。



一部のWebデザイナーは、これらのインターフェイスコンポーネントの一部を既に単純なレベルで使用しています。 もちろん、ドロップダウンメニューとヒントは新しいものではありません。 ゲームでのそれらの使用は、インターフェースでより面白くて創造的なアプリケーションを示唆するかもしれません。



次のプロジェクトを盛り上げることができるいくつかのユーザーインターフェイス要素を見てみましょう。 例を見てから、いくつかのリソースを見てみましょう。このリソースについて詳しく知ることができます。

画像のダウンロードを伴うAJAXメッセージ

ゲームのFallout：New Vegas（上記）およびFallout 3（以下）からのこれらのダウンロード画面は、有用な情報とヒントを提供し、背景にはゲームのテーマに一致する背景画像が表示されます。 移動するダウンロードのイメージの代わりに、ユーザーにはルーレットホイールまたは緑色のターゲットが表示され、退屈な待機がゲームプレイの一部になります。



Webデザイナーはここから何を得ることができますか：



独自のグラフィックを作成します。 これを使用して、プレーヤーを画面上に作成した「世界」にドラッグします。 企業のWebサイトで作業している場合でも、ヒントや役立つ情報を追加できます。 スポーツ用品を販売するウェブサイトを作成していますか？ スライドショーで読み込み中の画像として回転するバスケットボールを使用する価値があるかもしれません。 どこから始めたらいいか分からない？ 画像をプリロードする方法については、このチュートリアルをご覧ください。



フルページの背景画像は、起動画面に対して重すぎて遅いかもしれませんが、起動パネルのdivで背景を色で塗りつぶし、JavaScriptプラグインを使用してランダムなヒントと情報を読み込んでスペースを埋めることができます。 最良の結果を得るには、ブートファイルのサイズを30 KBより大きくしないでください。小さいほど良いです。 単純なAJAXリクエストでは、一定の秒数に1回ヒントを変更したり、ダウンロードごとに1つのヒントを追加したりできます。 選択は、ダウンロードする必要があるコンテンツの量と、自由に使用できる時間によって異なります。 このようなダウンロードの例は、 Website Graderにあります。 結果を待っている間に表示されるダウンロードを見てください。

カスタムカーソル

Fable 3では、プレーヤーの選択したスポットに、カスタムカーソルとして機能する虫眼鏡アイコンが付いています。



The Elder Scrolls IV：Oblivionでは、シンプルな手の形のカーソルは、プレイヤーがこのオブジェクトを拾うことができることを示します。 赤いカーソルは、アイテムを盗むことができるだけであり、兵士が追跡を開始できることを示します。



Webデザイナーはここから何を得ることができますか：



おそらく、最も認識可能なカーソルは、Googleマップの「握る手」でしょう。 ただし、ユーザーカーソルは新しいものではなく、Webアプリケーションでは一般的です。 それらを使用する機能は、ほとんどのブラウザに組み込まれています。



これらのカーソルを賢く使用することが重要です：ヘルプを提供する、クリックできるコンテンツを示す、重要な情報を強調する。 これを使用して注目を集め、重要なポイントを強調する方法がわかります。 JavaScriptで作成された魔法の杖が子供向けサイトでできることを想像してみてください！ ただし、このようなソリューションが企業サイトに適していないことは明らかです。

アイコン、アイコン、アイコン

ビデオゲームとサイトの唯一の大きな違いは、ゲームメニューのアイコンがはるかに複雑であることです。 通常、ユーザーはウェブサイトよりもゲームに多くの時間を費やします。 しかし、アイコンはサイトでますます頻繁に使用されるため、サイトとWebアプリケーションの間の線は消去されます。



それでは、ゲームナビゲーションでアイコンをどのように効果的に使用できますか？ 読みやすく、コンテキストに応じたものでなければなりません。 たとえば、Halo Reachゲームでは、プレイヤーは武器を操作して選択するときにアイコンに依存しますが、メニューは視線インジケーターに似ています（現実世界では、これらは車両で見ることができます）。 Webサイトのアイコンも理解しやすいものにする必要があります。 最適な使いやすさのために、テキストラベルを追加します。



アイコンを注意深く一貫して選択すると、複雑なメニューを使用してナビゲーションを大幅に高速化できます。 明確な色、鮮やかなコントラスト、シンプルで見やすいアウトラインを使用します。

ゲームは、Halo ReachやCall of Dutyシリーズなどで見られるような非常に複雑な形状から、以下のような鮮明な形状の大きな詳細な画像へと移動します。 詳細に気付かなくても、手、円、顔の輪郭を認識できます。 1つの色を使用すると、視覚的に複雑さを軽減し、区別しやすくなります。 使用するアイコンが多いほど、より簡単で明確になります。







また、アイコンを使用して重要なトピックに焦点を合わせることができます。 コンテンツボックスや繰り返しセクションのクイックヒントとして、ボタンの代わりにヘッダー画像を使用します。 複雑な画像を大きくし、一貫性を保ちます。 アイコンはリストに興味をそそり、コンテンツをより消化しやすい部分に分割できます。 Treemoが巧みに行うように、彼らの助けを借りて、テキストの重要なセクションに注意を引くことができます。

適切なアイコンを使用して、トピックごとにナビゲートおよびグループ化することを検討してください。 テキストの見出しまたはフレームと同じ形式を使用して、コンテンツの異なる部分の相互関係を示すことができます。 アイコンを使用すると、興味深い場所に注目してコンテンツを簡単に閲覧でき、ユーザーが必要な情報を見つけやすくなります。



アイコンは静的な図であってはなりません。 パターンタップのスクリーンショットは従来の画像のサムネイルとして機能しますが、その特殊な形状はアイコンとしても機能し、関心を高め、ブランドの地位を強化します。



しかし、クライアント製品をアイコンとして使用するとどうなりますか？ 以下に示すスマートDonQサブメニューでは、製品をアイコンとして使用して、目的のオブジェクトにすばやく簡単に誘導します。 さらに賢く、サブメニューが表示されると、コンテンツの残りの部分が暗くなり、必要なオプションが強調表示されるように見えます。

全ページカルーセル

ドラゴンエイジ、オリジンズのこのようなゆっくりとフェードインするブックマークされた画面は、長い間使用されてきました。



Carnage Report」（Halo Reach）では、このアイデアは新しいレベルに達しました。 画面は水平にスクロールし、各ページにはいくつかのタブがあります。 ゲーマーはこのインターフェイスに慣れていますが、サイトでそれを適用すると、人々は驚くでしょう。



Jax Vineyardsは、タブのない同様のレイアウトタイプを使用します。



各カルーセル画面にタブを追加すると、サイトは次のレベルに進みます。

Magentoは、この考え方について異なる見方を提供しています。



現在、携帯電話やタブレットで、この種のインターフェイスが多くの背景画像とともに表示されています。 また、あらゆる種類のゲームで使用されます。 タブ付きタブや単純な水平スクロール以上のものです。複数のモニターを搭載したiPadを想像してください。 Think for a Livingは、右上隅にマップ（ゲームに非常によく似ています）を提供して、ユーザーがこの珍しいカルーセルをナビゲートできるようにします。



Webデザイナーはここから何を得ることができますか：



たくさんのコンテンツがある場合、そのような大胆な決定はユーザーにアピールし、サイトのトラフィックを増やします。 画面はスライドし、タッチスクリーンで簡単に制御できます。この要素の重要性は高まるばかりです。

画面サイズが異なるため、このタイプのレイアウトは慎重に計画する必要があり、コンテンツを異なる画面サイズに確実にロードするにはCSS3メディアクエリが必要になる場合があります。 レイアウトをインタラクションに対応させる必要があります。 フルページのdivでフルスクリーンカルーセルを埋め込み、hiddenの値でオーバーフローさせて、固定長の順序なしリストにフレームを配置できます。

タブレットの普及に伴い、ユーザーはこのタイプのインターフェイスにますます慣れています。 さらに簡素化された水平スクロールを使用すると、クライアントを群衆から際立たせることができます。

スライドメニュー

最近リリースされたFable 3ゲームのメニューシステムは、Fable 2で使用されているものとはまったく異なります（上の図）。 しかし、Fable 2には非常に優れたスライドメニューがあり、リストに含める必要がありました。



スライダーをスクロールするとボタンにアクセスでき、コンテンツは画面の右側に表示されます。 ボタンにはドロップダウンメニューもあります。 非アクティブなコンテンツはフェードします。 上の写真は、カテゴリ「衣類」を示しています。 次に、コンテンツから「ジャケット」を選択できます。そこから、服の特定の詳細まで。 これは、eコマースサイトを思い出させますか？



Webデザイナーはここから何を得ることができますか：



ページ全体に巨大なフライアウトメニューがあるサイトに行ったことはありますか？ コンテンツのリストを調べている間、サブメニュー、時には4レベルに展開されるものはどれですか？ そのような洗練されたメニューはやや恐ろしく見え、訪問者を去らせる可能性があります。 肥大化したメニューやイライラするユーザーを避ける良い方法は、小さなメニューを作成することです。



各divコンテナに特別なスクロールパネルを提供する「スライド」スクリプトがいくつかあります。 そこにもボタンを入れてみませんか？ スケーラビリティのため、この種類のメニューは、通常のドロップダウンメニューよりも、場合によっては（たとえば、エンターテイメントサイトやファッションサイトなど）より適しているように見えます。 クリック時に表示されるAJAXローダーを追加すると、ユーザーがインターフェイスを理解しやすくなります。 ここでのタスクは、ユーザーを1つの画面に保ち、メニューをスケーラブルに保つことです。 各メニューには事実上任意の数のアイテムを追加でき、それらはかさばることはありません。

ピボット画面

Halo Reachでピボットスクリーンを初めて見たとき、私は心を沈めました。 メインメニューに移動すると、テキストが斜めになります。 Halo Reachは、ゲーム全体を通して遠近法を使用して、メニューの右端を指します。 これは視覚的なキューです。 コントローラーを右に動かすとどうなりますか？ 画面が水平にスクロールして曇り、次のフレームが表示されます。ここでは、遠近法も使用されます。今回はテキストと画像を左端に押します。 タブの下に、ほとんど動いておらず、生きている人にひどく似ているヒーローを見ることができます。 ブラボー 私は座って、長い間ピボット画面で遊んでいました。 もちろん、私の最初の反応はこうでした：私はこれをやりたいです！



Webデザイナーはここから何を得ることができますか：



Photoshopから少し助けを借りて、このメニューをシミュレートできます。 CSS3のテキストのタイポグラフィマークアップが傾斜した2画面幅の大きなパノラマ背景画像と、JavaScriptの高速水平スクロールを使用すると、このゲームのメニュースロープに似たものを得ることができます。 これを小さなパネルに適用し、バナーまたはボタンで使用すると、（クライアントのように）驚くでしょう。 サイトでこの方法を使用する人は誰も知りませんが、これを実践したい場合の出発点となるように、小さなデモを作成しました。



Halo Reachが通常のメニュー画面をゲームの世界に統合し、背景の風景を巧みに錯覚させていることに注意してください。 それは本当に美しいです。 着陸前に飛行機から地面を見ているように、奥行きと近接感を与えます。 それはあなたを興奮させ、先へ進み、行動し、プロットの一部になるように誘惑します。 このタイプの統合は、すべてのWebサイトに適しているわけではありませんが、適切であれば、これは非常に価値のあるソリューションです。 賞賛の力を過小評価しないでください！

コンテキストメニュー

ビデオゲームのコンテキストメニューは、Webサイトのサブメニューの「遠い相対」です。 Assassin's Creed：Brotherhoodゲームのようなコンテキストメニューは、ゲーム内の場所とアクションの選択に応じて、ユーザーに特定のオプションを提供します。 呪文を唱えることを選択した場合、サブメニューには火の玉または稲妻の選択肢が表示されます。 動きを選択すると、走ったり、登ったり、隠したりできます。これが放射状メニューにあります。 アイコン付きの放射状メニューは非常に人気がありますが、コンテキストメニューは単語の短い垂直リストである可能性があります。



Webデザイナーはここから何を得ることができますか：



ユーザーをアクションに招待する場合、コンテキストメニューが便利な場合があります。 リンクのリストの代わりに、特別なアクションの興味深いリストを提供できます。 これは、ソーシャルネットワーク用のWebアプリケーションおよび小さなウィジェットで使用されます。



コンテキストメニューを作成するときは、少なくとも放射状にすることを検討する必要があります。 放射状メニューでは、ユーザーに3〜8個のオプションを提供し、インターフェイスはそれらを視覚的に興味深いものにする必要があります。 メニューはできるだけシンプルでわかりやすいものにしてください。 決定時にユーザーに適切な選択肢を提供し、コンバージョンのレベルを上げる必要があります。 さらに、それらは押しやすく、視覚的に軽くなければなりません。



ラジアルコンテキストメニューの良い例として、TuneGlueのミュージックマップを見てみましょう。



マップはFlashで作成されているため、JavaScriptを使用して単純な放射状メニューを作成できます。 または、次のようなネストされた放射状メニューでタスクを複雑にすることができます。



放射状メニューはコンテキストメニューに限定されません。 アクション時のドロップダウンパネルメニューも同様に効果的であり、その開発に必要な時間とテストはより少ない場合があります。

あなたの番

優れたインターフェイスのその他の多くの例は、ビデオゲームから収集できます。 ゲームはデザインのインスピレーションとなり、インターフェイスをより直感的で楽しいものにすることができます。



募金キャンペーンを計画している非営利組織のウェブサイトを作成していますか？ 黒板を使用して寄付を追跡することを検討してください。 また、それらを使用して読者のトップ10を知ることもできるため、コメントするインセンティブを与えることができます。



アイコンを操作し、それらを使用する方法について考え、サイトをより楽しく使いやすくする方法を学びます。 興味深いヒントを作成し、ダウンロード可能なコンテンツを報酬またはインセンティブとして追加することを検討してください。 上記を観察して適用することで、サイトをより刺激的で使いやすくすることができます。 そして、研究が楽しいことを忘れないでください！