「デザイン・構成に関して」の編集履歴(バックアップ)一覧に戻る

デザイン・構成に関して - (2007/06/04 (月) 19:55:34) のソース

*おしゃれ泥棒(@WIKI)のデザイン・構成に関して
- 現在サイト構成設定進行中
- 2007/06/04 デザイン調整、ページ編集。
-- 基本デザインを白基調に変更。
-- 各ページ書式統一のため編集調整。
-- メニュー編集。
- 2007/06/03 デザイン調整、ページ編集。
-- 基本デザインをシンプルに変更。
-- プラグイン calendar 追加。
-- プラグインのCSS調整。
- 2007/06/02 デザイン調整、ページ編集。
-- トップページ追加編集。
-- プラグインのCSS調整。
-- 各ページ書式統一のため編集調整。
- 2007/06/01 デザイン調整、カラーテスト。
-- CSSの調整。
-- メニュー、見出しの一部にバックグランドイメージ追加。
-- デザインに関しては微調整をしながら、しばらく利用してもらい、意見がたまるまで現状維持予定。
-- 全体の構成について、他サイトを参照しながら考察中。
- 2007/05/31 デザイン調整、カラーテスト。
-- CSSの調整。
-- イメージバナー追加。
-- サンプルとして各色のサンプルイメージをアップ。
- 2007/05/30 テンプレートを「[[pukiwiki風(3カラム)>http://www1.atwiki.jp/_mng/design.php]]」に試験的変更。
-- テンプレートはロゴマークが使える3カラムのデザインで選定。
-- テンプレートCSSと排出されてるHTMLソースからCSSの一部を解析(@WIKIのヘルプにはCSSの構成について殆ど解説はありません)。
-- CSS変更からベース的デザイン(ロゴマーク、ヘッダタイトル、各カラムなど)を試験的に変更。
-- 既成ページへの影響確認中。

**基本的指針
- ウィキ(Wiki)はブログとちがい(ウィキ自体は単機能のブログとしても利用でき、[[ウィキペディア>http://ja.wikipedia.org/]]のようなウェブ百科事典まで作れる汎用性があります)、多数の人が多くの目的のために作ることができるので、ギルドとして個性がありながら汎用性のあるデザインで、見出しと内容で構成された基本的構造でなければならないと思われます。
- 自由にページを作れるため、サイトの構成がが乱雑になりやすい側面を持っているので、できるだけ基本的なカテゴリの枠組みを作る必要があります。

#right(){参照 : [[@WIKIテンプレートデザイン一覧>http://www1.atwiki.jp/_mng/design.php]]}

**デザインなどに関するサンプル
***色設定サンプル
&ref(pink1.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=pink1.jpg)_&ref(pink2.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=pink2.jpg)

&ref(red.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=red.jpg)_&ref(sky.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=sky.jpg)

&ref(blue.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=blue.jpg)_&ref(green.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=green.jpg)

&ref(gray.jpg,,x=180,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=gray.jpg)

***バナーサンプル
エンブレム(80x80)
&ref(http://www13.atwiki.jp/feisyasu/pub/images/OD.gif,,height=80,width=80)
200x40バナー
&ref(banner200x40.png,,height=40,width=200)
マイクロ(88x31)バナー
&ref(banner88x31_1.png,,height=31,width=88)_&ref(banner88x31_2.png,,height=31,width=88)_&ref(banner88x31_3.png,,height=31,width=88)


**デザインに関するアンケート
***カラム(列)数について 結果 2007/05/30 ~ 06/04
//#vote(2カラム(2列)左メニューがいい[1],2カラム(2列)右メニューがいい[0],3カラム(3列*現在の構成)がいい[3])
-2カラム(2列)左メニューがいい[1]
-2カラム(2列)右メニューがいい[0]
-3カラム(3列*現在の構成)がいい[3]
***配色について 結果 2007/05/30 ~ 06/04
//#vote(ピンク系がいい(*現在の配色)[0],赤系がいい[0],青系がいい[0],緑系がいい[0],黒系がいい[0],その他[4])
-ピンク系がいい(*現在の配色)[0]
-赤系がいい[0]
-青系がいい[0]
-緑系がいい[0]
-黒系がいい[0]
-その他[4]
***配色について 第2回 ~ 2007/06/10 予定
以下のサンプルを見てお答えください。(クリックすると拡大表示されます)
-シンプルなベースだけで&bold(){配色無し}&br()&ref(custom_simple.jpg,,x=360,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=custom_simple.jpg)
-基本となった&bold(){白を基調とした配色}&br()&ref(custom_white.jpg,,x=360,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=custom_white.jpg)
-マビノギ公式風の&bold(){青を基調とした配色}&br()&ref(custom_mabi.jpg,,x=360,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=custom_mabi.jpg)
-エンブレム背景の&bold(){ピンクを基調とした配色}&br()&ref(custom_pink.jpg,,x=360,http://www13.atwiki.jp/feisyasu/?cmd=upload&act=open&page=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E6%A7%8B%E6%88%90%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6&file=custom_pink.jpg)

以上を見て基本的な配色パターンを選んでください。
&color(gray){その他を選ぶ場合は下のコメントで、具体的サイト名(URL)をあげて投稿してください。}
#vote(配色無しがいい[0],白を基調とした配色がいい[1],青を基調とした配色がいい[0],ピンクを基調とした配色がいい[0],その他(コメントに投稿してください)[0])

**デザイン・構成に関して意見・要望など
&color(gray){※ 基本的指針とするので、積極的にお願いします。(レンタルのWikiなので限界があるのはご了承ください。)}
- とりあえず、3カラム構成のデザインを継承してテンプレートを変えてみました。色などは暫定的に設定したものです(原型が殆ど残ってません)。基本的デザイン(特に色など)の意見がまとまれば順次細部のスタイルーシートを変更します。  -- ミドルトン  (2007-05-30 17:38:51)
- 配色は何回か変更してみてから人気投票とかしてみても面白いかも…。私はピンクのままでも全然…はっいやいや  -- くれしゅ  (2007-05-30 22:31:53)
- 配色は赤系(ピンク含む)でないとエンブレムが浮いてしまうようです。  -- ミドルトン  (2007-06-01 15:45:26)
-  シンプルに白がいいかなー。  -- 緋緒  (2007-06-03 10:23:42)
- スタイル変更で絶望的に変化する自分のコーナー。&br()ま、いいけどさ。 停滞してるしね。  -- セフィン  (2007-06-03 17:20:53)
- ↑ 基本的に幅1000ピクセルで絶対指定してるので、横スクロールが出てしまうのは、1年前から変わってませんが、アドセンスの画像がかぶってしまうのは、今年に入ってからだと思います。たぶん、@WIKI側で設定変更した影響を受けたのでしょう。(プラグインの挙動が毎日のように変わってます。)現在解決策を調査中。  -- ミドルトン  (2007-06-03 17:47:00)
- ↑ HTML内で<DIV>タグで指定されているスタイルシートで余分と思われる「HEIGHT: 100px;」を削除しました。&br()アドセンスの重なりは無くなったと思います。  -- ミドルトン  (2007-06-03 20:10:25)
- 知らない間に色々頑張ってるみたいでお疲れ。&br()そこまでー停滞してる自分のコーナー意識しなくてもいいっすよ。&br()停滞してるし、そろそろ消滅予定…かも?  -- セフィン  (2007-06-03 21:45:02)
- この白の配色がいいです&br()  -- 神楽  (2007-06-04 00:03:49)
- ごくろうさまです 白基調の配色がすっきりして好きですね&br()あと1024×768だとスクロールバーが・・・って上で書いてました  -- ふぇね  (2007-06-04 12:32:38)
- 白基調のが真っ白より見やすいかなーと思います。  -- くれしゅ  (2007-06-04 19:25:56)
- でも、うっすらピンクも好きだなあ(今サンプル画像みました  -- くれしゅ  (2007-06-04 19:26:54)
#comment(vsize=5,nsize=20,size=40)
----