ＣＧ作品展示サイ ト”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の提出締め切りまでに全て実行
© Copyright 2024 ExpyDoc
