ＣＧ作品展示サイト” Fragments”

～ 『閲覧しやすさ』と『デザイン性』を両立させた

Web デザイン～

北海道情報大学　情報メディア学部

情報メディア学科　新井山ゼミ0321003 　芦原 建

http://www01.do-johodai.ac.jp/~niiyama/log/0321003-20060831.lzh資料ファイル　＞

これまでの成果• Fragments のデザイン完成・推敲完了

– HTML チェッカーを利用して推敲• http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

– データの追加・修正に集中• 張りぼて版のブログ・掲示板の制作に移行

– WDC 提出用– 制作方針

• ブログ・掲示板の”自分が更新しやすいデザイン”を見た目上で再現

今回までの進捗状況• 張りぼて版ブログの完成

– 一般表示と管理モードの両方を制作– 後は修正・改良のみ

研究手順1. ラフ画の制作

– 紙の上で大まかにレイアウト2. コーディング

– ラフ画から更に修正を加えながら制作3. 管理モード画面制作

– 頭の中でレイアウトしてコーディング4. 修正・推敲

※ コーディング・・・ラフ画や設計図・仕様書通りにパソコン上で形にしていくこと。 (HTML ・プログラム )

張りぼて版ブログ完成版

制作テーマ• “ 自分が使いやすい”ブログ

– 単体のブログとしてよりも、個人サイトの日記として使用するという点に特化させたデザイン

–“管理画面からブログを操作する”ではなく、“ブログに直接手を下して書き換える”感覚を追求

• カレンダー・過去ログのコンパクト化– ２段組レイアウトで

領域を消費しがち– カレンダー

• 日付を横並びにしてスペースを広々と利用

– 過去ログ• プルダウン選択にして

スペースを節約– いずれもブログの

トップ部分に配置

工夫点の解説　①

工夫点の解説②• 参考

← 通常のブログ•カレンダーや過去ログ系統のコンテンツが他のスペースを圧迫

↑ 張りぼて版ブログ•カレンダー・過去ログをコンパクトにまとめて、リンク集・フリースペースを上に移動

工夫点の解説③• リンク集を上に持ってくる理由

– 個人サイトのリンク集• 管理人の個人的なブックマークとしても機能• 利用にスクロールが必要なのは、

閲覧者にとっても管理人にとっても面倒

工夫点の解説④• 管理者モード

– 管理画面ではない– ブログの内容を

直接編集するように操作

工夫点の解説⑤- 管理者モードの特徴１ -

ログインしてすぐに新規投稿が可能

工夫点の解説⑥- 管理者モードの特徴２ -

• 過去ログの編集・削除もログインしてすぐに可能

工夫点の解説⑦- 管理者モードの特徴３ -

• リンク集の編集– 追加・削除・並び替え

もその場で編集

• フリースペース– 削除・内容編集も同様にログイン後すぐに可能

工夫点の解説⑧- 管理者モードの特徴４ -

• 記事ごとのコメント・トラックバック– リンク集と同様の形式で

編集可能

• 管理機能をブログ自体に組み込む– ブログを見ながらにして

内容の編集・削除が即座に可能

その他• 記事のタイトル

–基本のタイトルは日付– サブタイトルは任意入力

• 毎日日記に題名をつけるのは人によっては苦痛• ファイルのアップロード

– ブログ自体にその機能は無い– FTP クライアントソフトを利用してアップロ

ード• ブログ初心者向けではないデザイン

–ある程度Web の管理・運営になれた人間向けのデザイン

一般表示モードと管理者モードのデザインの比較• 編集する部分が

管理者モードではそのままフォーム化

開発成果• 張りぼて版ブログの完成• “ 自身の最も扱いやすいスタイル”をほ

ぼ実現

評価• テーマに即したデザインを最後まで貫徹

–“ブログの管理画面ではなく”“ブログを管理するモード”　という発想

考察• ブログを使用していて感じた不満点

– 管理者画面に対する不満• ログインが面倒• 全く違うデザインのページから操作する事に違和感• もっとブログ自体と向き合いながら更新できれば…

• “ デザインする立場”からの提案的な内容– “ 個人サイトの日記”として使用する場合– ブログの更新が、サイト自体の更新の１つに

感覚的に組み込まれていくデザイン

今後の課題• 張りぼて版ブログ

– 必要に応じて修正・改良• 作品の追加

–数多く描く　⇒　粗品乱造の危険性– 一つ一つ、より納得の行く作品の制作を目標

• そのほかのコンテンツも改良– より見やすさ、利用しやすさを追及

次回までの成果誓約• 張りぼて版掲示板の制作

– ブログと同じようなプロセスで制作• 作品の追加• 全体的な改良・修正

• WDC の提出締め切りまでに全て実行