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

北海道情報大学　情報メディア学部情報メディア学科　新井山ゼミ

0321003 　芦原　建

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

研究・制作概要• 「 Web デザイン」をテーマにした２作品の制作

– 「 Web ページ制作入門」• 制作期間： 2005 年 4 月～ 12 月• WDC にてフリー部門最優秀賞を受賞• 参考資料としてゼミ内で活用

– “Fragments”• CG 作品展示サイト• 制作期間： 2006 年 5 月～ 12 月• WDC にてフリー部門芸術賞を受賞

研究・制作目的• テーマ

– 「 Web デザイン」の研究• テーマに則した Web コンテンツ２作品を開発

– 「 Web ページ制作入門」 (“WebLEC”)» Web サイトの制作をわかりやすく学習できるコンテンツ

– “Fragments”» CG 展示サイト» 「視認性」と「デザイン性」を両立させた Web のデザイン

• 目標– 「 Web デザインコンテスト (WDC) 」への参加・入賞

研究・制作目的 (2)「 Web ページ制作入門」 (“WebLEC”)• Web デザインの学習

– HTML の習得は初心者には困難• プログラム言語と混同

• 課題– HTML をどこまでわかりやすく学べるか？

• 学習コンテンツの開発▼

研究・制作目的 (3)“Fragments”• テーマ

– 「よい Web デザイン」とは何か？• 自分なりの定義

– 「視認性とデザイン性を両立させたWeb デザイン」

• 定義に則した CG 作品の展示サイトを製作 ▼

研究・制作手順「 Web ページ制作入門」 (“WebLEC”)• 2005 年 4 月～ 5 月

– 構成の決定• 「制作編」と「運営編」の 2 部構成

– 「制作編」・・・必要なツールの準備・ HTML ファイルの制作から公開直前までを追跡– 「運営編」・・・ FTP 転送から実際の運営を解説

• 当時は文章のみ• 2005 年 6 月

– 学習内容を図にまとめた画像を制作・挿入• 既存の Web 制作解説サイトとの差別化

研究・制作手順 (2)• 2005 年 7 月～ 8 月

– 画像制作の続行• 夏期休暇の大半を作業に

• 2005 年 9 月– 最終調整

• 文章・デザインの見直し– WDC への提出完了

• 2005 年 12 月以降– デザインの大幅改装

• この時点でサイト名を【 WebLEC 】と改名

研究・制作手順 (3)“Fragments”• 2006 年 5 月～ 6 月

– 仕様の策定• プログラム系技術を使用しない• <TABLE> タグ・フレーム分割を回避• 文章を簡潔にまとめる／色調を少なくまとめる

– コンテンツ内容• 「説明」「作品」「日記」「リンク」「メール」「掲示板」

– 制作• サイトの大部分はこの間に完成• 「日記」「掲示板」はそれぞれ CGI のレンタルサービスを利用

研究・制作手順 (4)• 2006 年 6 月

– Web 上のスペルチェッカーによるソース推敲• 2006 年 7 月～ 8 月

– WDC の提出に向けて「日記」「掲示板」の雛型をHTML ・ CSS のみで制作

• 既存のサービスのブログ・掲示板を利用して感じた「不満」の解消をテーマに設定• 2006 年 9 月

– 作品数の大幅な増加• WDC 提出時までに計 40 作品を制作

• 2006 年 10 月以降– 各コンテンツ内容の改良

開発成果「 Web ページ制作入門」 (“WebLEC”)• WDC

– フリー部門最優秀賞を受賞• ゼミ内での評価

– 「わかりやすい」と好評– 他の Web ページ制作を行うゼミ生が参考資料として活用

開発成果 (2)“Fragments”• WDC

– フリー部門にて芸術賞を受賞• 2006 年 10 月以降の改良点

– 外部サイトへのリンクの増加• CG ・ Web の創作から各種素材に関連するサイトを中心に追加

– 他のゼミ生にとっての有用性を考慮

「 Web ページ制作入門」評価・考察• 評価

– コンテンツ全体の充実を達成• ゼミ生や教員に「わかりやすい」と認められる内容に

– 制作を経て学んだ事項• Web 上で内容を簡潔にまとめることの重要性• 「難しいことを噛み砕いて表現」することの難しさ

• 考察– それまでの個人での Web 制作において学んだものを極力活用して進めた研究– 「 Web の学習」について得た着想を可能な限り表現

“Fragments” 評価・考察• 評価

– 製作の過程で Web のレイアウト能力が向上– 自分なりの「よい Web デザイン」の解答に到達

• 「よい Web デザイン」ここまでの結論– 「視認性とデザイン性の両立」

• 「情報が伝わりやすいレイアウト」「人を魅了する凝ったデザイン」互いに干渉しないよう共存すること– 「情報」と「デザイン」の住み分け

• 情報を優先させる領域／デザインを優先させる領域• 最も近いものの例：ブログのレイアウト

– レイアウトは情報優先、しかし多種多様のデザインが適用可能

今後の課題• Flash 技術のみを用いる Web デザインの研究

– いわゆる「 Flash サイト」• 実際に構築し，管理や運営の手法を学習・研究• Flash サイトにおいての「閲覧性」を追及•効率的な管理・運営方法の模索

参考文献• 北海道情報大学 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/