1 / 21

ＣＧ作品展示サイト” Fragments” ～ 『 閲覧しやすさ 』 と 『 デザイン性 』 を両立させた Web デザイン ～

ＣＧ作品展示サイト” Fragments” ～ 『 閲覧しやすさ 』 と 『 デザイン性 』 を両立させた Web デザイン ～. 北海道情報大学　情報メディア学部 情報メディア学科　新井山ゼミ 0321003 　芦原 建. http://www01.do-johodai.ac.jp/~niiyama/log/0321003-20060831.lzh. 資料ファイル　＞. これまでの成果. Fragments のデザイン完成・推敲完了 HTML チェッカーを利用して推敲

octavio-tyson
Download Presentation

ＣＧ作品展示サイト” Fragments” ～ 『 閲覧しやすさ 』 と 『 デザイン性 』 を両立させた Web デザイン ～

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ＣＧ作品展示サイト”Fragments”～ 『閲覧しやすさ』と『デザイン性』を両立させたWebデザイン～ 北海道情報大学　情報メディア学部 情報メディア学科　新井山ゼミ 0321003　芦原 建 http://www01.do-johodai.ac.jp/~niiyama/log/0321003-20060831.lzh 資料ファイル　＞

  2. これまでの成果 • Fragmentsのデザイン完成・推敲完了 • HTMLチェッカーを利用して推敲 • http://openlab.ring.gr.jp/k16/htmllint/htmllint.html • データの追加・修正に集中 • 張りぼて版のブログ・掲示板の制作に移行 • WDC提出用 • 制作方針 • ブログ・掲示板の”自分が更新しやすいデザイン”を見た目上で再現

  3. 今回までの進捗状況 • 張りぼて版ブログの完成 • 一般表示と管理モードの両方を制作 • 後は修正・改良のみ

  4. 研究手順 • ラフ画の制作 • 紙の上で大まかにレイアウト • コーディング • ラフ画から更に修正を加えながら制作 • 管理モード画面制作 • 頭の中でレイアウトしてコーディング • 修正・推敲 ※コーディング・・・ラフ画や設計図・仕様書通りに パソコン上で形にしていくこと。(HTML・プログラム)

  5. 張りぼて版ブログ完成版

  6. 制作テーマ • “自分が使いやすい”ブログ • 単体のブログとしてよりも、個人サイトの日記として使用するという点に特化させたデザイン • “管理画面からブログを操作する”ではなく、“ブログに直接手を下して書き換える”感覚を追求

  7. カレンダー・過去ログのコンパクト化 ２段組レイアウトで領域を消費しがち カレンダー 日付を横並びにしてスペースを広々と利用 過去ログ プルダウン選択にしてスペースを節約 いずれもブログのトップ部分に配置 工夫点の解説　①

  8. 工夫点の解説② • ←通常のブログ • カレンダーや過去ログ系統のコンテンツが他のスペースを圧迫 • 参考 • ↑張りぼて版ブログ • カレンダー・過去ログをコンパクトにまとめて、リンク集・フリースペースを上に移動

  9. 工夫点の解説③ • リンク集を上に持ってくる理由 • 個人サイトのリンク集 • 管理人の個人的なブックマークとしても機能 • 利用にスクロールが必要なのは、閲覧者にとっても管理人にとっても面倒

  10. 管理者モード 管理画面ではない ブログの内容を直接編集するように操作 工夫点の解説④

  11. 工夫点の解説⑤-管理者モードの特徴１- ログインしてすぐに 新規投稿が可能

  12. 過去ログの編集・削除もログインしてすぐに可能過去ログの編集・削除もログインしてすぐに可能 工夫点の解説⑥-管理者モードの特徴２-

  13. リンク集の編集 追加・削除・並び替えもその場で編集 工夫点の解説⑦-管理者モードの特徴３- • フリースペース • 削除・内容編集も同様にログイン後すぐに可能

  14. 記事ごとのコメント・トラックバック リンク集と同様の形式で編集可能 管理機能をブログ自体に組み込む ブログを見ながらにして内容の編集・削除が即座に可能 工夫点の解説⑧-管理者モードの特徴４-

  15. その他 • 記事のタイトル • 基本のタイトルは日付 • サブタイトルは任意入力 • 毎日日記に題名をつけるのは人によっては苦痛 • ファイルのアップロード • ブログ自体にその機能は無い • FTPクライアントソフトを利用してアップロード • ブログ初心者向けではないデザイン • ある程度Webの管理・運営になれた人間向けのデザイン

  16. 一般表示モードと管理者モードのデザインの比較一般表示モードと管理者モードのデザインの比較 • 編集する部分が管理者モードではそのままフォーム化

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

  18. 評価 • テーマに即したデザインを最後まで貫徹 • “ブログの管理画面ではなく”“ブログを管理するモード”　という発想

  19. 考察 • ブログを使用していて感じた不満点 • 管理者画面に対する不満 • ログインが面倒 • 全く違うデザインのページから操作する事に違和感 • もっとブログ自体と向き合いながら更新できれば… • “デザインする立場”からの提案的な内容 • “個人サイトの日記”として使用する場合 • ブログの更新が、サイト自体の更新の１つに感覚的に組み込まれていくデザイン

  20. 今後の課題 • 張りぼて版ブログ • 必要に応じて修正・改良 • 作品の追加 • 数多く描く　⇒　粗品乱造の危険性 • 一つ一つ、より納得の行く作品の制作を目標 • そのほかのコンテンツも改良 • より見やすさ、利用しやすさを追及

  21. 次回までの成果誓約 • 張りぼて版掲示板の制作 • ブログと同じようなプロセスで制作 • 作品の追加 • 全体的な改良・修正 • WDCの提出締め切りまでに全て実行

More Related