この Module ではマンション販売 のウェブサイトのフロントエンド部を構築する。
必要なページは以下の通り。
• トップページ
• 家具シミュレーションページ
また近年ではPCのブラウザよりもモバイルデバイスのアクセスの方が増えてきていることもあり、スマートフォンでも閲覧でき るようにすることが求められる。
また、ウェブサイト構築における技術的な仕様は以下のとおりである。
• HTML/CSS
W3Cの勧告する XHTML1.1 もしくは HTML5 W3Cの勧告する CSS2(.1) もしくは CSS3
• アクセシビリティと操作性の基準 img要素における alt 属性
• HTML5の場合必須ではないが、このサイトでは必須とする
6.10 トップページ
以下の項目が含まれていなければならない。
• マンション販促用アニメーション
• プラグインなしでも動作するもの
• スライドアニメーションなど視覚効果を使ったものが望ましい
• 関連企業のロゴ
6.11 家具シミュレーションページ
間取り画像があり、その上に家具の画像を配置することができるページ。 家具画像の一覧があり、そこからデータを選び ドラ
ッグ & ドロップで間取り画像上の任意の場所に配置することができる。家具情報については、家具データAPIより取得する。
また，この機能はPC版のブラウザに対応するだけでよい。
家具データはAPIサーバより取得する。URIは Module 1 の RESTful APIの api を gorinapi に置き換えたものを使う。
このモジュールでは各選手が作る必要はない。
RESTfulなURI
メソッド URI
一覧表取得 GET http://user0XX.skilljapan.info/gorinapi/furnitures/category_id/1 特定のデータ取得 GET http://user0XX.skilljapan.info/gorinapi/furnitures/3
カテゴリIDを1、特定のデータデータは id = 3 とする。
間取りおよび家具データはSVGになっており、縦幅および横幅のデータもあるのでスケーリングして表示すること。また、家具 データは90度ずつ回転してできるようにすること。
6.12 グローバルメニュー
必要な情報として以下のものがある。
• 全体計画
• コンセプト
• モデルルーム
• 設備・仕様
• 間取り
• オプション
• アクセス
• 周辺環境
• 構造
• 物件概要
今回の競技では トップページと家具シミュレーションページを作成することが課題であるため、全てのページを 作成する必要はない。ただし、これらの情報にたどり着けることがわかるようにすること。
＜留 意 事 項＞
下記の項目について留意し、課題を作成すること。
1. プランニングとデザイン
・ウェブサイトは要求仕様に応じて制作され、適切に計画されているか
・課題制作にあたって適切な作業計画がなされているか
・モジュールが目的に応じた要求を満たし、情報を漏れなく含み、完成された状態になっているか
・モジュールに求められるサイトの構成が適切であり、タイトルやページ名称は適切か
・サーバにアップロードされブラウザで閲覧できる状態になっているか
2. 画像作成・修正・最適化
・画質、階調、圧縮技術等のWeb用画像ファイルについての知識があり最適化が行われているか
・モジュールの目的やコンテンツに見合ったデザイン処理が行われているか
3. レイアウト・ナビゲーション・ユーザインタフェースデザイン・ユーザビリティ・アクセシビリティ
・必要な情報が正しく伝達されるためのデザインがなされ、文章・画像についてその構成が適切にレイアウ トされているか
・ページは、読みやすく見やすくデザインされているか
・適切なナビゲーションがデザインされているか
・各モジュールにおいて利用されている色彩は適切で一貫しているか
・配色、ボタンなど各要素のサイズなどが適切か
・使いやすさに配慮したGUI(グラフィカルユーザインタフェース)の設計がなされ、フィードバックは適切か
・ユーザビリティに配慮してデザインされているか
・アクセシビリティに配慮された制作、デザインがなされているか
・JIS X8341-3、WCAGのガイドラインを特に意識したデザインがなされているか
4. サーバサイドプログラミング
・PHPを用いたダイナミックなウェブサイトが構築 されているか
・PHPからのDB操作が行なえるか
・Ajax用APIが構築されているか
5. クライアントサイドの実装
・JIS、ISO、W3Cなどの標準規格に準拠し適切な構造化(structured markup/semantic markup)が行 われているか
・CSS2.1以降を外部スタイルシートで使用し、スタイルシートを有効に利用しているか
・指定されたWebブラウザに準拠してデザインされているか
・ECMAScript(Java Script)等のWebプログラミングが適切に利用されているか
・最新の業界動向、さまざまな端末等に応じたウェブコンテンツの実装ができるか
6. マルチメディア表現とクリエイティビティ
・モジュール全体のデザイン、また使用されている画像等の表現方法が適切で、かつ独創性・創造性・審美 性があるか
・モジュール・コンテンツを特徴づける為の努力がされ、魅力に富んだサイトになっているか
・情報伝達やサイトの目的を達成するために留意され、訴求力のある制作が行われているか
・モジュールの目的やデザインに合わせたアニメーションが作成されており、魅力的か
7. プレゼンテーション
・プレゼンテーションが適切に行われ、作業および制作課題作品の要旨が明確に伝達されたか
8. 評価について
本競技では、3.留意事項の項目について評価を行う。また、配点については表1.配点のとおりである。
表1. 配点
項 目 内 容 配点
1 プランニングとデザイン 5
2 画像作成・修正・最適化 5