トリッカル・もちもちほっぺ大作戦

編集会議 / 167

206 コメント
views
167
名前なし 2026/03/01 (日) 23:51:40 d3b99@9e197 >> 162

いくつか編集案を追記しました。
https://wikiwiki.jp/thetrickal/下書き#Innocence3
ソートはMenuBar順を中心に、キャラ画像が目立つようにしました。
レイアウトと編集の手間のバランスを考えると、個人的には表版3~6が良いかな…?と思います。

表版
・スマホでもレイアウトが安定する。
X 編集がしづらい(新キャラを最後尾に追加する形式ならある程度楽になる)。

立ち絵版
・見た目がシンプル。
・スマホでもレイアウトが安定する。
・編集が楽。
X ソートでしか情報量を増やせない。シンプルさとのトレードオフ。

flexbox版
・見た目がスマート。
・編集が比較的楽。
X スマホとPCの両立が難しい。

通報 ...
  • 168
    名前なし 2026/03/02 (月) 05:34:48 f352b@4c5d3 >> 167

    個人的にはflexbox+表版1がかなり理想に近くて良いなと思います。
    やはり使徒名があった方が良いと考えているのと、レアリティの解決を背景や枠線でできているのがスマートです。

  • 174
    名前なし 2026/03/03 (火) 20:36:29 eeb90@cfcea >> 167

    ダークモードだと見づらいので背景色は変えたほうがいいと思います。
    画像1

  • 177
    名前なし 2026/03/04 (水) 05:13:57 f352b@4c5d3 >> 167

    輝度は白背景で見ている私にもちょっと高すぎる気がしていましたが、特に理由が無ければゲーム内からスポイトしてきた値をベースにすればよいかな、と考えていました。
    下書きの色サンプルに追記してそのカラーコードを置きました。

    …ダークモードの存在を初めて知ったのですが、ブラウザ側の拡張でなく、このwikiに機能としてあるものなのですか?

  • 187
    名前なし 2026/03/05 (木) 22:08:25 d3b99@9e197 >> 167

    ダークモードへの対応については、仕様を把握できていませんが、文字色を Black や #000001 などに指定すれば解決できるのではないでしょうか。
    ダークモード背景とパステルカラーのコントラストについても、FrontPageは黄緑色の背景色があるので大きな問題にならないと思っているのですがいかがでしょうか(ダークモードとしては機能しないということになってしまいますが……)。

    私は、配色は現行のサンプルのままでも問題ないと考えています。
    FrontPageへの掲載が前提であれば、彩度の高いパステルカラーでも黄緑色のセクション背景に馴染みますし、黒文字との組み合わせもWebデザインとして悪くないと思います。
    ただ、#000000の黒文字はモダンではないので、flexbox+表版1の文字色を#222222にしてみました。

    今回、ゲーム内枠線色をリストの背景色として採用したのは、可読性を重視したためです。
    ゲーム内背景色をそのままリストの背景色に使うと、黒文字とのコントラストが低く読みづらくなってしまいます(その場合のサンプルを「flexbox+表版1」に追記しました)。
    白文字を使うことで文字を目立たせることも出来ますが、「活発」の黄色背景色などでは白文字が見えづらいため性格間の統一性が取れなくなります。
    ちなみに、ゲーム内では名前欄の背景を白くすることでこれを解決しています。
    また、本案では枠線にレアリティ表示の意味を持たせているため、背景は薄く、枠は濃くしないと判別が難しくなるという事情も一応あります。

    ゲーム内カラーの採用について、私自身スクショからスポイトで抽出しており、ご提示いただいた数値との差は環境による誤差の範囲で、どちらも「正しい色」ではあるかと思います。
    目視でもほとんど差はないはずです。

    「純粋」の属性色が少し眩しく感じるのは、ゲームUIのベースである緑色と差別化するために明度・彩度が高く設定されているからだと思われます。
    他の性格の色であれば、それほど違和感はないのではないでしょうか。
    「純粋」の色のみ明度・彩度を落とす案もありますが、FrontPageのデザインも基本的にはスポイトで取ったゲーム内の色を使ってるので、コンセプトが少しブレるかもしれません。

    追加で、よりゲーム内デザインに近い「flexbox+表版3」も作成しました。
    こちらの利点はゲーム内デザインの再現性と可読性を両立できること、枠線を使わないのでキャラ画像が少し大きくなること、欠点は縦幅が増えることです。

  • 188
    名前なし 2026/03/06 (金) 07:50:51 f352b@4c5d3 >> 167

    ダークモードはwiki、ブラウザ、OSの標準機能で反映されないならば考えなくてよいのではと思います。
    (手元だとどのデバイスでもOSやブラウザのダークモードは反映されていません。)

    Webデザインとしての良し悪しは門外漢なのでわかりません。
    なのでゲーム内の配色含んだデザインを引用すれば喧嘩が少なくなるかな、とその程度に考えていました。
    それで最終的に行きつくのは構成品のスクリーンショット切り抜きだと思います。

    手元である程度時間をかけて揉んでみましたが、ご提示いただいたもの以上は出せないかなと思いました。
    あとはいくつかに絞って投票…と行きたいですが、おそらく票自体が集まらない気がするので、他の方がよければ木主さんに決定を一任でもいい気がします。
    基本的にどれも要件は満たしていると思っています。私は最新のflexbox+表版3の角丸枠線ありの方が好きです。

  • 191
    名前なし 2026/03/06 (金) 19:23:42 799ef@ef85e >> 167

    私もflexbox+表版3の角丸枠線ありがいいかなと思います。枠線なしも悪くないんですが、エルダイン使徒の名前背景色のピンク(使徒一覧の色だと思います)にちょっと違和感があったので不死者のラベルのgreen,whiteを試してみたかったんですが、リンク文字の色が変えられませんでした…

  • 192
    名前なし 2026/03/07 (土) 03:13:42 f352b@4c5d3 >> 167

    リンク文字の色が変えられませんでした…

    どういう感じかちょっとピンと来ていませんが、これに関してはリンク構文の内側に&colorを入れればいいはずです。Sample wiki

    [[&color(white,green){''ヴィヴィ''};>ヴィヴィ]]