スタイル集。ブログサービスやWordPressなどのテーマと同じもの。
管理側が用意したものと、利用者がネット上の別の場所に用意したもの。いずれも自分がWikiを使うときに有効になるもの。

  1. 2択ナビゲーション
  2. Metro + 紙の質感
  3. 黒背景にグロウ効果のボタン
  4. HAKUSHI
  5. いろいろなスタイルテーマ/STAT
  6. ごちゃごちゃ高密度
  7. ダッシュボード
  8. ナビゲーションなし
  9. ハイコントラスト
  10. ピクトグラム
  11. ヘビーユーザー向けの
  12. 二段組みレイアウト
  13. 反転角丸
  14. 密室
  15. 小さいの
  16. 手描きの不規則さを取り入れたデザイン
  17. 方向矢印
  18. 朝昼晩
  19. 横に並ぶ記事
  20. 白黒
  21. 紙とインク
  22. 縦つながり
  23. 縦書き

2択ナビゲーション † Edit

前後や上下でなく2択で読み進む。
どれとどれを選択肢にするかは決まっていて読ませる側が決めやすいように。

二分木構造で同じ記事が何度出てきてもいい。ただしループはしない。再帰にはならない。

イラストを載せるサイトなど、画像で選ばせるために。

Metro + 紙の質感 † Edit

黒背景にグロウ効果のボタン † Edit

HAKUSHI † Edit

白紙の組み合わせ。デフォルトのスタイルテーマ。
ここからカスタマイズを。

いろいろなスタイルテーマ/STAT † Edit

背景がデータビジュアライゼーションでサイトの状態を表示。

ごちゃごちゃ高密度 † Edit

とにかく文字で画面を埋め尽くす。
自然の中の風景のように、ごちゃごちゃで一様・ごちゃごちゃで何もない印象に。

ダッシュボード † Edit

管理者だけが閲覧できるページに適用するためのもの。
ページ内容に:i/レイアウト要素を配置して。

ナビゲーションなし † Edit

ナビゲーションやヘッダーはコンテンツ内のアイキャッチ後に。
横幅いっぱいフチなし印刷のアイキャッチをヘッダー領域に当たる位置に。
その下からサイトバー開始。Foldingなタイムライン縦型。閉じているとただの月別記事数リスト。開くと投稿間隔を反映したタイムライン。

本文領域にサイト名、日付、記事タイトル、本文。サイト名と日付は淡色表示で。文字サイズは一種類だけ。

ページを開いた時の数秒間だけアイキャッチに重ねて日付と記事タイトルを見せてもいい。表示位置は記事ごとに四隅のいずれかか中央か、記事ごとにフォントと文字サイズを調整。

フッターは豪華でいい。

ハイコントラスト † Edit

ブルーライトフィルターが普及して、利用者は誰もが色覚異常者。
暗い部屋で画面を暗くして使うなら、白地に黒文字が一番見やすいかも知れない。

配色を複数に。それぞれの陰/陽バージョンを両方用意。

  • 白地に…
    • 黒
    • その他
  • 黒地に…
    • 白
    • 黄色
    • 緑
    • 青
    • その他
      白地・黒地は一般的なので文字色は豊富に。それか自由に。
  • 青地に…
    • 白
    • 黄色
  • 黄色の上に…
    • 黒

特に黒地に白、黒地に黄色を。

ピクトグラム † Edit

ヘビーユーザー向けの † Edit

ダッシュボードの一部にページ表示。主従逆。サイドバーのほうが広い。
サイドバーには最近の更新やら自分のクリップやら検索のランディングページやらを詰め込めるだけ詰め込んで引き出しにしまって置く。
明暗二色選べるように。

二段組みレイアウト † Edit

横長の画面向け。Adobe Readerの見開きのように。文字を詰め込める。
次のページは下。

同様に三段組みも。スクロール嫌いのためのレイアウト。

読むときは画面に合わせて段組数を変えられたほうがいい？強制したほうがUXを与えやすいのでは。

反転角丸 † Edit

角だけの角丸+半透明板
枠を強調、領域がよく見える

重ね合わせが複雑な模様を作る

密室 † Edit

スタイルテーマ。
左右端で関連情報その他をごちゃごちゃリスト化して、奥行きのある感じにskew.
奥まったところに本文。

両サイドバーがごちゃごちゃしていても3次元的に傾いているせいで模様にしか見えない。
情報の密度と簡潔さを両立。

小さいの † Edit

大きめ文字で1ページ一言しか書けないテーマ
ごついフレームの中に表示
フレームには簡素なナビゲーション

ブラウザーが枠なしウィンドウを作るようになったら、デスクトップガジェット風に表示できる。

手描きの不規則さを取り入れたデザイン † Edit

手描きの不規則さを取り入れたデザイン。
wiki自体に手描き機能があればその場編集で落書きのようにしてスタイル編集も。
スタイルテーマに使っている画像の差し替えや配置換えも出来たら、スタイルテーマ作成がウィキウィキに。

方向矢印 † Edit

矢印を多用
左端を揃える線に使ったり、背景に使ったり

進捗表示に方位磁針のようにふらふらする矢印を

朝昼晩 † Edit

スライダーや並べたアイコンで一日の時刻を選択。時間帯別のテーマになる。朝昼夕晩、日蝕、月蝕。星空。雪。

…を実現するために、DOM要素のclass属性に日時や天気を含めておく。

横に並ぶ記事 † Edit

左右フリックで前後記事。前後の記事はプリロード。フリック前から前後の記事がそれぞれ左右の余白に見えていること。アフォーダンス。

白黒 † Edit

白黒タイトロープのトップ・ボトム・区切り線、黒背景に角丸白ボックス内側ボックスシャドウ
黒がフレームに見えるように。

紙とインク † Edit

紙とブルーブラックのにじんだインク文字。
端が雨で濡れた紙。透けている感じ。

アクセントに付箋紙。スタンプ。端を飾り切り。

時刻によって明るさ変化。

縦つながり † Edit

Wikipedia:WikiProject Breakfast - Wikipedia
https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Breakfast

縦レーン2列か3列。横は揃えないほうがいい。
所どころ横幅いっぱいの枠。
どの列を使うかはページ/型次第。同じ型なら同じ列に配置。

枠は描かず全てのページがつながっているように見えるように。

Smallest Federated Wikiもこの系統？

参考に。
Gingko
†:Google Keep

幅変更。
幅は1列ごとに変更。
全列を一度に帰るなら「見えている範囲に何列収めるか」で指定するのが簡単でいい。

縦書き † Edit

縦書きスタイル。
それに合うWebフォントも。和柄の背景で。テキストブロックは少し透けさせて。