砂場/top

• 砂場/top/1
• 砂場/top/2
• 砂場/top/4
• 砂場/top/6
• 砂場/top/7

topページのデザインについて

• そもそも3カラム(4カラム)のデザイン自体、今日日あまり流行ではないというのはあるといえばある
• 現状はなんとかなっているため、将来的にキャラ一覧が伸び、余分な空白が煩わしくなったタイミングで検討するのでも十分

キャラ一覧の位置に関して

• 現状のデザインでは、キャラクターが増えた際に、余分な空白が生まれる（図左端を参照）
• モバイルで「アイキャッチ→概要→画像→バナー」の順になってほしい
• 以上2つの条件をクリアに解決する案をざっくり4つ
  • 慣れと好みの領域か
• サンプル
  • A
    アイコンに流し込む: 砂場/top/1
    このとき横のカラム数は2～3に設定することができる
    2カラムであればshadowheader3で区切るスタイルも実現できるか
  • B
    shadowheader3で区切る: 砂場/top/6
    アイコンに流し込む: 砂場/top/2
    シンプルな表組みの: 砂場/top/4
  • C
    Aの亜種
    イベントバナーの頻度と量次第
  • D
    Bの亜種
    バナー用の面積が広め

キャラクターリンクのカテゴリに関して

• ［属性別、運命別、所属惑星別］の3軸が想定できる
• 属性
  ストーリー上のバックボーンがない
  アイコンの色が揃いきれい
• 運命別
  属性よりは納得感のある分類
  包含関係を覚えておくのが難しく、検索性が低い
• 所属惑星別
  ストーリーで散々触れ合うため探しやすい
  日常使いにはあまり役に立たない
• 属性と運命での検索は、別に早見表を追加しそちらで需要を満たす方法もある

キャラクターリンクのデザイン

• アイコンサイズは45px前後が下限、それより小さくなると見にくくなる。実はもっと大きい方が適切かもしれない。
• アイコンは属性・運命・所属のどれでも正方形で用意し入れ替えができる
• 所属惑星のアイコンはGoogleNotoFontの明朝体で作成した
• スマホとPCで見比べてみると、強い面と弱い面がはっきりする

正方形アイコンに流し込むデザイン（PCで横）

正方形アイコンに流し込むデザイン（PCでも縦）

キャラ画像がアイコン画像の方に流れ込まないデザイン

shadowheader3で区切る

星穹列車

宇宙ステーション「ヘルタ」

ヤリーロ-VI

仙舟「羅浮」

中間にヘッダがある表組み

星穹列車

宇宙ステーション「ヘルタ」

ヤリーロ-VI

仙舟「羅浮」

表組みを見出しのところだけ利用

星穹列車

宇宙ステーション「ヘルタ」

ヤリーロ-VI

仙舟「羅浮」

ベーシックな表組み（現行のもの）

壊滅
巡狩
知恵
調和
虚無
存護
豊穣

縦に流し込むデザイン