見出し画像

得点表示の極意(１)　～基本のデザイン・要素の配置～

あざらし

どうも、横浜サイエンスフロンティア高校（SFQC）のあざらしです。

今回より、得点表示の解説に入っていきます。

前回の記事の注意事項をまだ見てない人は、一度読んでいただけると幸いです。
前回：得点表示の極意　～まずは読んでね～

今回はきほんの「き」である、デザインと各要素の配置について解説していきます。
次回以降は、関数や動いている仕組みを紹介する予定です。
乞うご期待！

はじめに

2022/08/30　最終更新したらしい

これなんだと思いますか？


正解は、私が初めて作った（と思われる）表示です。

素晴らしいデザインでしょう。

最初は誰でもこんな感じになるものなので、心配しなくて大丈夫です。
ここから一緒に学んでいきましょう！



0．デザインについて

1．色の設定

クイズの大会は会場を暗くして行われることが多いです。
なので必ず、

背景は黒色　文字や罫線は白色

を基本にしましょう。

理由は以下の通りです。

  • 白背景だと、スクリーンを見る参加者も、PCの画面を見る自分も、明るくてまぶしい（最大の理由はこれ）

  • 長時間作業するPCの消費電力を抑えられる

  • 単純にかっこいい

二番目の理由については、カフェでレポートを書く時など、多くの場面で応用できるので覚えておきましょう。
（Microsoft Office のアプリはデフォルト設定できます。これについてはまたいつか、、）


2．各要素の配置

左上から右下へ順番に、

  1. ラウンドの名前（左端）　ルールの名前（中央）　今何問目？（右端）

  2. 一個前に読まれた問題文とその解答

  3. 参加者の詳細（ペーパー順位、学校名、名前、得点など）

  4. ルールの詳細・問題数の表示

を基本の配置にしています。


作業列は一行、リボンは全く見えないようにしましょう。

※ 作業列とは、私たちが得点を反映させるために打ち込む場所のこと、リボンとは、様々なボタンがある上の部分のことです。

これらは参加者には必要のない要素です。
たくさん見えている大会も数多くありますが、正直言って綺麗ではないです。

ですが、表示を作成しているときは作業しにくいので、見えるようにしてください。
いきがってはダメです。

行列の幅を変更したり、画面を拡大縮小して作業列は一行のみにしましょう。


リボンの消し方は以下の通りです。

  1. 上の「表示」と書かれている場所を押して、リボンを切り替える

  2. チェックをすべて外す

  3. 右上にある四角形に中に矢印が入った場所を押して、「リボンを自動的に非表示にする」を押す

説明１，２
説明３



1．ラウンド名・問題数について

1．ラウンド名

やむを得ない場合（和風コンセプトの大会とか？？）以外は　英語表記にすることをおすすめ　します。

理由は以下の通りです。

  • 黒地の背景とマッチしやすい

  • デザイン性が上がる

  • 表記の長さを短くできる


ラウンドの名前と、グループやコースの番号との間は、（半角スペース）－（半角スペース） にすることをおすすめします。

これが一番見やすく、かつデザイン性に優れているという結論に至りました。


2．問題数の表示


ここもラウンド名と同様に、英語表記にすることをおすすめします。

理由はほぼ同じです。

関数など、動く仕組みについては次回解説する予定です。


3．下の線（参考程度に）


これはデザインの話になるのですが、ラウンド名と問題数の表示の下に色付きの線が入っていることが分かります。

これがあるだけで、一気に見やすく、デザインもよくなります。

私の場合はラウンドごとに色を変えることで、デザインや雰囲気の差別化を図っていました。

このようなひと工夫で、参加者の心の掴み具合が大きく変わってきます。



2．前の問題の表示について

問題文：上下中央揃え・右揃え
解答：上下中央揃え・中央揃え

にすることをおすすめします。

私はVLOOKUP関数を使用しています。


3．参加者の詳細について

1．ペーパー順位


プレートの色に必ず合わせるようにしましょう。

これには条件付き書式を使用します。


2．学校名・名前


学校名は　「〇〇高」といったような短い形式　にするとセルに入りやすいです。

名前は　３文字以下なら苗字と名前との間にスペースを、それ以上ならスペースなし　にすると長さが整い、見やすくなります。

ここもVLOOKUP関数を使用しています。


3．得点・誤答数など


条件付き書式により、順位に応じて色を変えています。

誤答数は、ハートなどの記号を用いて視覚的に表現することをおすすめします。

しかし、

  • 誤答可能数が多く、記号が小さくなるとき

  • 誤答可能数に制限がない時

これらの場合は記号ではなく、「n✕」と表示するようにしましょう。



4．ルール詳細・問題数の表示について

これらを表示する利点は以下の通りです。

  • 参加者がルールの詳細を把握しやすい

    例えば「20Attack Survival」と上に書いたとしましょう。
    これでは、正解時に相手のライフをいくつ減らせるか、誤答でいくつライフを失うか、重要な情報が分かりません。

    このようにならないためにルールの詳細を書いてあげましょう

  • 戦略を立てやすい

    「のこり５問であと一回誤答できるから強気に押そう」といったことができるのは、得点表示に残り問題数が表示されているからです。

  • 得点表示の汎用性が高くなる

    これは次回以降にしっかり解説するのですが、簡単に説明すると、
    得点を計算する数式に数値を直接書くのではなく、数値の参照先をここに設定することで、ここの数値を変化させるだけでルールの詳細を簡単に変えられるようになります。
    こうすることで、大会ごとに得点表示を作り直す必要が無くなり、大幅な時間短縮ができます。

    いまは何言ってるか分からなくていいです。
    今後理解できるようになりますので、ご安心を。



さいごに

いかがでしたか？
今回でなんとなく得点表示のデザインや必要な要素を理解していただけたら幸いです。
次回はこれらが動く仕組み（関数）を解説していきます。

なんだかんだnoteを書くのは初めてなので、拙い構成で醜く見にくいものになってしまい申し訳ありません。

ここまで読んでいただきありがとうございました！

なにか質問などありましたらXアカウントのDMまでお気軽にお問い合わせください。

この記事が気に入ったらサポートをしてみませんか？