1 / 16

Web デザインコンテスト向け 作品の制作と出品 －「 Web ページ制作入門」 (2005) ／ “ Fragments”(2006) －

Web デザインコンテスト向け 作品の制作と出品 －「 Web ページ制作入門」 (2005) ／ “ Fragments”(2006) －. 北海道情報大学　情報メディア学部 情報メディア学科　新井山ゼミ 0321003 　芦原　建. 研究・制作概要 研究・制作目的 研究・制作手順 開発成果 評価・考察 今後の課題 参考文献. 発表内容（目次）. 研究・制作概要. 「 Web デザイン」をテーマにした２作品の制作 「 Web ページ制作入門」 制作期間： 2005 年 4 月～ 12 月 WDC にてフリー部門最優秀賞を受賞

dillon
Download Presentation

Web デザインコンテスト向け 作品の制作と出品 －「 Web ページ制作入門」 (2005) ／ “ Fragments”(2006) －

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. Webデザインコンテスト向け作品の制作と出品－「Webページ制作入門」(2005) ／ “Fragments”(2006) － 北海道情報大学　情報メディア学部 情報メディア学科　新井山ゼミ 0321003　芦原　建

  2. 研究・制作概要 研究・制作目的 研究・制作手順 開発成果 評価・考察 今後の課題 参考文献 発表内容（目次）

  3. 研究・制作概要 • 「Webデザイン」をテーマにした２作品の制作 • 「Webページ制作入門」 • 制作期間：2005年4月～12月 • WDCにてフリー部門最優秀賞を受賞 • 参考資料としてゼミ内で活用 • “Fragments” • CG作品展示サイト • 制作期間：2006年5月～12月 • WDCにてフリー部門芸術賞を受賞

  4. 研究・制作目的 • テーマ • 「Webデザイン」の研究 • テーマに則したWebコンテンツ２作品を開発 • 「Webページ制作入門」(“WebLEC”) • Webサイトの制作をわかりやすく学習できるコンテンツ • “Fragments” • CG展示サイト • 「視認性」と「デザイン性」を両立させたWebのデザイン • 目標 • 「Webデザインコンテスト(WDC)」への参加・入賞

  5. 「Webページ制作入門」(“WebLEC”) Webデザインの学習 HTMLの習得は初心者には困難 プログラム言語と混同 課題 HTMLをどこまでわかりやすく学べるか？ 学習コンテンツの開発 研究・制作目的(2) ▼

  6. “Fragments” テーマ 「よいWebデザイン」とは何か？ 自分なりの定義 「視認性とデザイン性を両立させたWebデザイン」 定義に則したCG作品の展示サイトを製作 研究・制作目的(3) ▼

  7. 研究・制作手順 「Webページ制作入門」(“WebLEC”) • 2005年4月～5月 • 構成の決定 • 「制作編」と「運営編」の2部構成 • 「制作編」・・・必要なツールの準備・HTMLファイルの制作から公開直前までを追跡 • 「運営編」・・・FTP転送から実際の運営を解説 • 当時は文章のみ • 2005年6月 • 学習内容を図にまとめた画像を制作・挿入 • 既存のWeb制作解説サイトとの差別化

  8. 研究・制作手順(2) • 2005年7月～8月 • 画像制作の続行 • 夏期休暇の大半を作業に • 2005年9月 • 最終調整 • 文章・デザインの見直し • WDCへの提出完了 • 2005年12月以降 • デザインの大幅改装 • この時点でサイト名を【WebLEC】と改名

  9. 研究・制作手順(3) “Fragments” • 2006年5月～6月 • 仕様の策定 • プログラム系技術を使用しない • <TABLE>タグ・フレーム分割を回避 • 文章を簡潔にまとめる／色調を少なくまとめる • コンテンツ内容 • 「説明」「作品」「日記」「リンク」「メール」「掲示板」 • 制作 • サイトの大部分はこの間に完成 • 「日記」「掲示板」はそれぞれCGIのレンタルサービスを利用

  10. 研究・制作手順(4) • 2006年6月 • Web上のスペルチェッカーによるソース推敲 • 2006年7月～8月 • WDCの提出に向けて「日記」「掲示板」の雛型をHTML・CSSのみで制作 • 既存のサービスのブログ・掲示板を利用して感じた「不満」の解消をテーマに設定 • 2006年9月 • 作品数の大幅な増加 • WDC提出時までに計40作品を制作 • 2006年10月以降 • 各コンテンツ内容の改良

  11. 開発成果 「Webページ制作入門」(“WebLEC”) • WDC • フリー部門最優秀賞を受賞 • ゼミ内での評価 • 「わかりやすい」と好評 • 他のWebページ制作を行うゼミ生が参考資料として活用

  12. 開発成果(2) “Fragments” • WDC • フリー部門にて芸術賞を受賞 • 2006年10月以降の改良点 • 外部サイトへのリンクの増加 • CG・Webの創作から各種素材に関連するサイトを中心に追加 • 他のゼミ生にとっての有用性を考慮

  13. 「Webページ制作入門」評価・考察 • 評価 • コンテンツ全体の充実を達成 • ゼミ生や教員に「わかりやすい」と認められる内容に • 制作を経て学んだ事項 • Web上で内容を簡潔にまとめることの重要性 • 「難しいことを噛み砕いて表現」することの難しさ • 考察 • それまでの個人でのWeb制作において学んだものを極力活用して進めた研究 • 「Webの学習」について得た着想を可能な限り表現

  14. “Fragments”評価・考察 • 評価 • 製作の過程でWebのレイアウト能力が向上 • 自分なりの「よいWebデザイン」の解答に到達 • 「よいWebデザイン」ここまでの結論 • 「視認性とデザイン性の両立」 • 「情報が伝わりやすいレイアウト」「人を魅了する凝ったデザイン」互いに干渉しないよう共存すること • 「情報」と「デザイン」の住み分け • 情報を優先させる領域／デザインを優先させる領域 • 最も近いものの例：ブログのレイアウト • レイアウトは情報優先、しかし多種多様のデザインが適用可能

  15. 今後の課題 • Flash技術のみを用いるWebデザインの研究 • いわゆる「Flashサイト」 • 実際に構築し，管理や運営の手法を学習・研究 • Flashサイトにおいての「閲覧性」を追及 • 効率的な管理・運営方法の模索

  16. 参考文献 • 北海道情報大学Webデザインコンテスト公式ページ(WDCの情報確認) ： • http://wdc.do-johodai.ac.jp/ • とほほのWWW入門(Webページ制作入門において内容の参考資料)： • http://www.tohoho-web.com/www.htm • HTMLクイックリファレンス(Webページ制作入門において内容の参考資料) ： • http://www.htmq.com/index.htm • Sota’s Web Page (Webページ制作入門においてFTP転送“FFFTP”の説明に使用) ： • http://www2.biglobe.ne.jp/~sota/ • JUGEM (ブログサービスをFragmentsの日記部分に使用) ： • http://jugem.jp/ • CGIBoy (掲示板サービスをFragmentsの掲示板部分に使用) ： • http://cgiboy.com/ • Another HTML-lint (Fragmentsのソース推敲に利用) ： • http://openlab.ring.gr.jp/k16/htmllint/

More Related