従来のインフォボックスをポータブルインフォボックスに切り替えるのはコミュニティ全体のデザインを見直すのに良い機会でもあります。 難しく聞こえるかもしれませんが、様々なメリットもあります。 ページの重要な要素であるインフォボックスは、ユーザーの注目を集めやすい箇所です - つまり、コミュニティのデザインの中核はインフォボックスなのです。
注目すべきは真ん中のSです。
忘れがちなことですがCSSの真ん中のSはstyleのSです。 我々は様々な場所で色々な目的に応じて色やスタイルを選択します。 しかし、インフォボックスに総合的なデザインのシステムを作り込めば、あなたの今後の作業効率を大幅に改善できます。 結局のところ、ブラシと塗料に関する知識は貴方を賢くしますが、それがあなたをアーティスたらしめる訳ではないのです。
ひとつひとつのインフォボックスにそれぞれの色を設定したり、種類別にに「カラーコード」を設定するのは楽しい作業です。 ただし、コミュニティが成長するにつれて、初期に設定したカラーコードが機能しなくなることもしばし起こります。 色の種類は無限に存在しますが、人間の目が本当に区別できる色の種類は実はそこまで多くはないのです。
何かしらの色分けを行う時は大まかな範囲で区別を行うことが重要です。 色の割り当ては細かい区分ではなく、大きいトピックで設定します。 例えば、お肉や野菜、デザートといった細かい区分に個別の色を設定するのではなく、食品という大きな区分でひとつの色を設定しましょう。
Wookieepediaでは六つのインフォボックスにastroテーマを使用しています:
/* Constellation, Galaxy, Nebula, Sector, System, Trade_route */
.pi-theme-astro .pi-title { background-color: #004466; }
.pi-theme-astro .pi-navigation { background-color: #004466; }
.pi-theme-astro .pi-navigation a { color: white; }
.pi-theme-astro .pi-header { background-color: #BBCCDD; }
"全て"の大規模な宇宙のオブジェクトにastroに割り当てることにより、彼らは
004466とBBCCDDを使用しています。
全てのインフォボックスに同じスタイルを設定することで、ポータブルインフォボックスの管理は更に簡易になります - ナビゲーションバーと親和性の高い色彩が良いでしょう。 ひとつの「完璧な」インフォボックスタイルを作ることで、そのメンテナンスにかかる時間を大幅に節約が出来るのです。
Make sure that you choose colors everyone can see.
インフォボックスは利用者が読むことが出来なければいけません。 テキストの色と背景色のコントラストが僅かな場合は難しくなります。 色彩とコントラストの説明はこちらをご覧ください。. 読みやすい文字色の選び方に関しては カラー・コントラスト アナライザー が大変参考になるでしょう。
もしデザインのシンスピレーションや具体的なコードのアイデアを得たいのであれば、ポータブルインフォボックス既にを採用しているコミュニティを参考にしましょう。 まずはCSSをの内容を確認してください。 そして採用したいCSSコードをテストWikiで試してみましょう。CSSでのポータブルインフォボックス関連の編集に慣れてから、実際のコミュニティで実装することで、リスクを減らすことが出来ます。
オーダーメイドのテーマ[]
Fandomでははそれぞれ。二つのコミュニティがテーマに関する異なる経験を持つケースがありました。 ひとつのケースの目的はポータブルインフォボックスを既存のそれになるべく近づけることでした。そして、もうひとつのケースでは、特にタイトルバー周りを中心に読みやすさを優先させるために、以前に確立されていたテーマから大幅に変更を加えました。
現存のものを再現する[]
The Walking Dead Wiki ではポータブルインフォボックスをよりオリジナルのインフォボックスのスタイルに近づけるため、オーダーメイドでテーマの作成が必要でした。コミュニティ内の一部のテンプレートは外部サイトからインポートされており、スタイルが一致しない箇所が多くあったのです。しかし、CSSを使い新しいテーマを設定することで、インラインコードを使用せずに全てのインフォボックスのスタイルの統一が可能となったのです 。
変更を加える[]
一方で、Borderlands Wiki では初期設定で選べるインフォボックスのデザインテーマの一つであるEuropaを採用しました。EuropaはCSSにコードを書き込まなくとも、コミュニティに使われている色に合わせたデザインを自動で選択してくれます。さらに、デスクトップPCやタブレットに合わせたユーザビリティに最適化してくれます。
当然ですが、EuropaはCSSに対応しています。Borderland WikiではデフォルトのEuropaを少し調整したものを使用していますが、彼らが加えたは変化はEuropaテーマの持つネイティブリスポンスを考慮してカスタマイズされています。
結論[]
ひとつひとつのインフォボックスに個別のスタイルを設定する事も可能ですが、限られたリソースは賢く使うべきでしょう。できる限りインフォボックスのデザインを普遍的なものにすることで、そのデザインを多くのインフォボックスで使用が可能となります。もし、そうしない場合は複雑なCSSが必要となり、結果としてwikiのメンテンナンスも複雑化してしまうのです。これが複雑化してしまったデザインテーマの一例です。 - なんとコードが2000行以上もあります!
この様になってしまったのは必然と言えます。このコミュニティは時間をかけてインフォボックスを増やしてきたのです。もちろん、2009年にコミュニティを作ったチームは今とはまったく違うスタイルのアイデアを持っていたのです。近代都市が古代都市の上に建てられる様に、深く過去をたどれば、まったく異なるデザイン性が見えきます。よって、ポターブルインフォボックスを採用するのは古いスタイルを新しく新鮮なスタイルに変更する良い機会とも言えるでしょう。しかし、もし対策を取らない場合は多くの人が様々なスタイルのインフォボックスを作り続け、そのメンテナンス追われる日々が待っています。
スタッフブログが更新された際の通知の受信をご希望の方は、 こちらをクリックしてブログをフォローすると、通知を受信していただけます。