朝のTRPG語り [2011/09/29] : サイトデザインの注意点

ゆうやん @adlibdice

同人システムで、個人的に一番「やっぱやめとこう」となる要因なのは、レイアウトの見づらさ。オンラインのルルブはただでさえ参照性が紙媒体と比べて劣る上に、見づらさまで加わると、一気に冷めてしまいまする。

ゆうやん @adlibdice

そのネット配布同人システムの見づらさで特にきついのが、背景や文字色とかの、配色による目の疲労。これがあると、まずルール把握どころじゃない。

青葉楓 @aobakaede

@adlibdice 画面サイズとかは個人差があるからなんとも言えませんが、背景・配色についてはまだデザイナーの努力でどうにでもなる部分ですのう。

ゆうやん @adlibdice

次に、デザインに凝り過ぎて、何処に何があるかわからないようなレイアウト。配色をクリアしても何処にどのルールがあるかわからないと、やはりルール把握どころではないです。

ゆうやん @adlibdice

@aobakaede うい。私がネット配布同人で「あぁ、だめだぁ」ってなるのは、配色のキツさと、何処にあるかわからないレイアウトが７～８割くらいです。

青葉楓 @aobakaede

とりあえず、自分がTRPGサイトのデザインをする場合、背景白系、基本的な文字色は黒系、背景画像は極力使わないか文字を書く枠の外、という形にしてあります。背景薄い色、文字濃い色という形が一番一般的だと思うので。

ゆうやん @adlibdice

といっても、じゃあ自分はどうなんだろうと思うと、やっぱり見づらいだろうなぁと思います。特に狼の灯火。デカダンはちょっとマシだけど、黒めだから、果たして見やすいかどうか……。一応、何処にどのルールがあるかは、目次をフレームで生やしてはいるんですが。

ゆうやん @adlibdice

後は純粋に「わかりにくい説明」とかかなぁ。「ルールとして未完成部分が多すぎる」は論外。

ゆうやん @adlibdice

未完成で、デバッグをお願いするのは、テストプレイヤーだけに留めておいたほうがいいな、と。一般で遊んでくれる人をデバッガー扱いするのは、システムから遊んでくれる人を遠ざけてしまうだけと思います。

埼玉県加須市で迷子犬「なる」探しています/ACA @ACAcriss

みんな偉いなぁ。正直、サイトのデザインなんてサッパリわからなくて適当。DTPならなんとかなんだけどなぁ…。

ゆうやん @adlibdice

あと、テストプレイで修正箇所が見つかったら、その度に即修正！というのは、テストプレイヤーを困惑させてしまうので、焦り過ぎないように、と実体験。テストキャンペとかしてるなら特に。まずは不備があるならあるなりに、一応最後までやり遂げて、その後修正を。不備から生まれる得もあるやも？

ゆうやん @adlibdice

あと、テストプレイで修正箇所が見つかったら、その度に即修正！というのは、テストプレイヤーを困惑させてしまうので、焦り過ぎないように、と実体験。テストキャンペとかしてるなら特に。まずは不備があるならあるなりに、一応最後までやり遂げて、その後修正を。不備から生まれる得もあるやも？

ゆうやん @adlibdice

以下はほぼ自戒でやんす。むぎょあわああぁああ！

ゆうやん @adlibdice

@aobakaede 原色使ってるシステムが意外と多くて、目が痛かったです。いや、原色というより、背景と文字の色の組み合わせが目が痛くなるコンボになってるとかで。ﾐ´ｘωｘ｀ﾐ

埼玉県加須市で迷子犬「なる」探しています/ACA @ACAcriss

web公開のルールも、気になるやつはテキスト抜き出して、簡単に組み換えてプリントしてから読むから、あんまり画面のまま見るのは意識してなかったなぁ…。反省。

青葉楓 @aobakaede

@adlibdice 自分の場合原色は、使うとしても注目して欲しい文字色を変更するとかそのくらいですなあ。

ゆうやん @adlibdice

ルールブックのレイアウトは「読んでいて快適かどうか」が全てと思いまする。雰囲気は決してそれを犠牲にしていいものではないと思います。ぐあああああ！さっきから針のむしろに包まれているようだ！

ゆうやん @adlibdice

挿絵は読んでいて快適かどうかに大きく作用する、有効な手段であると思います。もちろん、挿絵がごちゃごちゃしてると逆効果。あればいいってものでもないですなぁ。私の自作、挿絵ないけど。

青葉楓 @aobakaede

とりあえず４つほど、TRPGをウェブ公開する上で最低限気をつけていただきたいことを。「舞台が宇宙だからって星空画像は目に優しくない」、「アニメGIFは使うな」、「原色バリバリはアカン」、「だからといって読みにくいレベルのパステルカラーは本末転倒」

ゆうやん @adlibdice

「自分の発言はすべて自分に還る」とは、まさに至言……ぐふ。

青葉楓 @aobakaede

特に一番最初！ 落とし穴かもしれないですが、星空画像の上に文字は、マジで読みにくいんです！ 星矢サイトめぐりとかで経験した俺が言うんだ、間違いない！

R.F.D.♨温泉ねずみ @R_F_D

@aobakaede 小宇宙もビックリな説得力ｗ

青葉楓 @aobakaede

@R_F_D 好きカプ小説サイトでやられると死ぬ。心が。

たぐっちゃん @taguchan

@aobakaede 視認性がいいのは大前提ですよね。参考になりました。ありがとうございます。

埼玉県加須市で迷子犬「なる」探しています/ACA @ACAcriss

@aobakaede 勉強させていただきます！