- 追加された行はこの色です。
- 削除された行はこの色です。
RIGHT:[[:t/スタイル]]
**スタイルテーマ/ [#h3edf622]
#ls
スタイル集。ブログサービスやWordPressなどのテーマと同じもの。
管理側が用意したものと、利用者がネット上の別の場所に用意したもの。いずれも自分がWikiを使うときに有効になるもの。
----
#contents
*** 2択ナビゲーション [#d21bffe7]
前後や上下でなく2択で読み進む。
どれとどれを選択肢にするかは決まっていて読ませる側が決めやすいように。
二分木構造で同じ記事が何度出てきてもいい。ただしループはしない。再帰にはならない。
イラストを載せるサイトなど、画像で選ばせるために。
RIGHT:[[:t/スタイル]] [[:t/UI]] [[:t/レイアウト]]
*** Metro + 紙の質感 [#lf374883]
*** 黒背景にグロウ効果のボタン [#m7cf5002]
*** HAKUSHI [#ce341d41]
白紙の組み合わせ。デフォルトのスタイルテーマ。
ここからカスタマイズを。
*** いろいろなスタイルテーマ/STAT [#b9b04bbd]
RIGHT:[[:t/スタイル]] [[:t/管理]] [[:t/視覚化]]
背景がデータビジュアライゼーションでサイトの状態を表示。
*** ごちゃごちゃ高密度 [#q50a5895]
RIGHT:[[:t/スタイル]]
とにかく文字で画面を埋め尽くす。
自然の中の風景のように、ごちゃごちゃで一様・ごちゃごちゃで何もない印象に。
*** ダッシュボード [#b06db602]
RIGHT:[[:t/ダッシュボード]]
管理者だけが閲覧できるページに適用するためのもの。
ページ内容に[[:i/レイアウト要素]]を配置して。
*** ナビゲーションなし [#h81a84de]
RIGHT:[[:t/スタイル]]
ナビゲーションやヘッダーはコンテンツ内のアイキャッチ後に。
横幅いっぱいフチなし印刷のアイキャッチをヘッダー領域に当たる位置に。
その下からサイトバー開始。Foldingなタイムライン縦型。閉じているとただの月別記事数リスト。開くと投稿間隔を反映したタイムライン。
本文領域にサイト名、日付、記事タイトル、本文。サイト名と日付は淡色表示で。文字サイズは一種類だけ。
ページを開いた時の数秒間だけアイキャッチに重ねて日付と記事タイトルを見せてもいい。表示位置は記事ごとに四隅のいずれかか中央か、記事ごとにフォントと文字サイズを調整。
フッターは豪華でいい。
*** ハイコントラスト [#y6d85d35]
RIGHT:[[:t/スタイル]]
ブルーライトフィルターが普及して、利用者は誰もが色覚異常者。
暗い部屋で画面を暗くして使うなら、白地に黒文字が一番見やすいかも知れない。
----
配色を複数に。それぞれの陰/陽バージョンを両方用意。
- 白地に…
-- 黒
-- その他
- 黒地に…
-- 白
-- 黄色
-- 緑
-- 青
-- その他
白地・黒地は一般的なので文字色は豊富に。それか自由に。
- 青地に…
-- 白
-- 黄色
- 黄色の上に…
-- 黒
特に黒地に白、黒地に黄色を。
*** ピクトグラム [#cc8f6fb6]
RIGHT:[[:t/スタイル]]
*** ヘビーユーザー向けの [#geb1562d]
RIGHT:[[:t/スタイル]] [[:t/UI]]
ダッシュボードの一部にページ表示。主従逆。サイドバーのほうが広い。
サイドバーには最近の更新やら自分のクリップやら検索のランディングページやらを詰め込めるだけ詰め込んで引き出しにしまって置く。
明暗二色選べるように。
*** 二段組みレイアウト [#k6286090]
RIGHT:[[:t/レイアウト]] [[:t/スタイル]]
横長の画面向け。Adobe Readerの見開きのように。文字を詰め込める。
次のページは下。
同様に三段組みも。スクロール嫌いのためのレイアウト。
読むときは画面に合わせて段組数を変えられたほうがいい?強制したほうがUXを与えやすいのでは。
*** 反転角丸 [#re5246a4]
RIGHT:[[:t/スタイル]] [[:t/UI]]
角だけの角丸+半透明板
枠を強調、領域がよく見える
重ね合わせが複雑な模様を作る
*** 密室 [#g0b81611]
RIGHT:[[:t/スタイル]]
スタイルテーマ。
左右端で関連情報その他をごちゃごちゃリスト化して、奥行きのある感じにskew.
奥まったところに本文。
両サイドバーがごちゃごちゃしていても3次元的に傾いているせいで模様にしか見えない。
情報の密度と簡潔さを両立。
*** 小さいの [#r9360e50]
RIGHT:[[:t/スタイル]]
大きめ文字で1ページ一言しか書けないテーマ
ごついフレームの中に表示
フレームには簡素なナビゲーション
ブラウザーが枠なしウィンドウを作るようになったら、デスクトップガジェット風に表示できる。
*** 手描きの不規則さを取り入れたデザイン [#x824797c]
RIGHT:[[:t/スタイル]] [[:t/テーマ]] [[:t/手書き]]
手描きの不規則さを取り入れたデザイン。
wiki自体に手描き機能があればその場編集で落書きのようにしてスタイル編集も。
スタイルテーマに使っている画像の差し替えや配置換えも出来たら、スタイルテーマ作成がウィキウィキに。
*** 方向矢印 [#wd801ece]
矢印を多用
左端を揃える線に使ったり、背景に使ったり
進捗表示に方位磁針のようにふらふらする矢印を
RIGHT:[[:t/スタイル]] [[:t/UI]]
*** 朝昼晩 [#jd1fcc22]
RIGHT:[[:t/スタイル]]
スライダーや並べたアイコンで一日の時刻を選択。時間帯別のテーマになる。朝昼夕晩、日蝕、月蝕。星空。雪。
…を実現するために、DOM要素のclass属性に日時や天気を含めておく。
*** 横に並ぶ記事 [#k8c4f602]
RIGHT:[[:t/スタイル]] [[:t/UI]]
左右フリックで前後記事。前後の記事はプリロード。フリック前から前後の記事がそれぞれ左右の余白に見えていること。アフォーダンス。
*** 白黒 [#ubdfc308]
白黒タイトロープのトップ・ボトム・区切り線、黒背景に角丸白ボックス内側ボックスシャドウ
黒がフレームに見えるように。
RIGHT:[[:t/スタイル]]
*** 紙とインク [#c5079e2d]
RIGHT:[[:t/スタイル]] [[:t/テーマ]]
紙とブルーブラックのにじんだインク文字。
端が雨で濡れた紙。透けている感じ。
アクセントに付箋紙。スタンプ。端を飾り切り。
時刻によって明るさ変化。
*** 縦つながり [#f70a7293]
:Wikipedia:WikiProject Breakfast - Wikipedia|
[[https://en.wikipedia.org/wiki/Wikipedia%3AWikiProject_Breakfast]]
縦レーン2列か3列。横は揃えないほうがいい。
所どころ横幅いっぱいの枠。
どの列を使うかはページ/型次第。同じ型なら同じ列に配置。
枠は描かず全てのページがつながっているように見えるように。
Smallest Federated Wikiもこの系統?
参考に。
[[Gingko>https://gingkoapp.com/]]
[[†:Google Keep]]
幅変更。
幅は1列ごとに変更。
全列を一度に帰るなら「見えている範囲に何列収めるか」で指定するのが簡単でいい。
*** 縦書き [#p25a6170]
RIGHT:[[:t/スタイル]]
縦書きスタイル。
それに合うWebフォントも。和柄の背景で。テキストブロックは少し透けさせて。