コンテンツエディタ

目的別レイアウトによるウェブサイト・デザイン
A Layout-based Website Design Assisting System
システムURL：http://cv.okd-lab.net/lsa/start.html
0232010 安藤宏行
□システムイメージ□
□研究背景□
インターネットの普及につれて、ホームページを作成するユーザが増加している。しかし、
初心者が作成するページはレイアウトに関しての知識が乏しく、「閲覧しにくい、分かりづ
らい」ページの増加、ユーザビリティの欠如が見られる。
補足説明機能
コンテンツエディタ
CGI
□研究内容□
ホームページ作成未経験者が企業、団体、個人などのページを作成する際に、目的別レ
イアウトの観点を用いた本システムを利用することにより、タグの入力・アップロードなど
の特別な技能を必要とせず目的に応じたページ作成支援をするシステムを実現する。
□目的の選択□
内容目的
リンクを多く配置したい
売り込む(営業する/アピールする)
画像を広く配置したい
見せる(公開する/展覧する)
コンテンツ構成を把握させたい
集める(コミュニティ/ポータル)
カテゴリを多く配置したい
売る(販売する)
コンテンツを多く配置したい
レイアウトの選択
調査結果に基づき、
サイト目的選択、フォームの記述
を経て、ウェブページが作成される
システムを構築した。
このシステムを利用するには伝達目的と内容目的の選択を行う。
伝達目的
伝える(知らせる/報道する)
サイト目的の選択
フォームの記述
サンプル表示
画像のアップ
プレビュー
CSS
□実験結果□
【被験者】サイト作成未経験者。
から伝えたいコト、内容を選択するコトにより、
レイアウト構成要素を目的に沿った配置にする機能を提供する。
□一般的なレイアウト構成要素□
①ヘッダ
…サイトロゴ・サイト主旨の表示
②メニュー
…自身の別のコンテンツへの移動
③リンク
…他(自身も可)のコンテンツへの移動
④コンテンツ
…現在のページの内容
⑤フッタ
…サイト情報(著作権など)の表示
目的・内容に沿った組み合わせが必要になる。
フォームの記述例
□サイト収集調査結果□
一般的に採用されているレイアウトの割合
キーワード：伝える(知らせる/報道する)の場合
左袖メニュー型
ベーシック ４
ヘッダー付き ６
イメージ強調 ４
応用 ３
上部メニュー型
ベーシック １３
トピック中央集約 ３５
上部デザイン重視 ８
ルーフ ６
作成されたページ例
□考察□
逆L字メニュー型
ベーシック １３
イメージ同化 １
右袖重視 ７
(表示は％)
特別な知識を必要としない本システムは、サイト作成未経験者がページを作成するツール
として役立つと考えている。今後は、ユーザビリティをより考慮し、レイアウト構成要素の幅
を広げることにより、システム全体の精度を上げ、誰でも簡単に目的に沿ったサイトを作
成し、運営できるようなオンラインウェブエディタとしての機能を実現していきたいと考えて
いる。