Webページ 制 作 課 題 -HTML5 実 装 の 可 視 化 評 価 ツール 株 式 会 社 イマジカデジタルスケープ 0.. 版
Webページ 制 作 課 題 ( 実 装 )の 概 要 説 明 はじめに この 課 題 は あるクライアントからの 依 頼 を 想 定 し 単 独 でシング ルページを 制 作 する 実 践 トレーニングです 制 作 環 境 はご 自 身 で 用 意 することが 前 提 となります 実 務 と 同 じように ) 企 画 背 景 を 踏 まえ ) 制 作 仕 様 を 守 り ) 制 作 開 始 時 には 必 ず 納 期 と 目 標 時 間 を 設 定 の 上 ) 制 作 時 は 実 際 の 作 業 時 間 を 測 定 して 5) 納 期 までに 成 果 物 を 仕 上 げてください 課 題 の 想 定 あなたはフリーランスのWebデザイナーです この 度 知 のWeb ディレクターからWeb 制 作 案 件 を 請 け 負 いました クライアントは 渋 谷 にある リストランテ ディ デジタルス ケープ 店 舗 リニューアルにあわせて Webサイトを 作 り 直 した いそうです すでに Webディレクターがクライアントの 要 望 をもとに 企 画 仕 様 を 固 め デザイナーが 作 ったデザインカンプまでは 先 方 の 合 意 を 取 りつけています 制 作 業 務 を 一 任 されたあなたは Webディレクターから 提 供 された 資 料 素 材 をもとに Webサイトを 制 作 することになりました 提 供 資 料 素 材 オリエンシート(Readme.pdf) 要 件 定 義 / 企 画 設 計 / 仕 様 / 画 面 構 成 デザインカンプ [PC 向 け](rdds_comp_desktop.psd) [スマートデバイス 向 け](rdds_comp_smart.psd) 実 施 にあたっての 注 意 事 項 Webディレクターがまとめた 次 頁 以 降 の 規 定 に 沿 って 制 作 してください 規 定 に 沿 えない 事 情 が 発 生 した 場 合 は クライアントが 納 得 する 変 更 意 図 を 説 明 文 書 にまとめてください 当 課 題 の 運 用 上 クライアントや Webディレクターへの 質 問 は 受 け 付 けられません 制 作 過 程 で 確 認 調 整 事 項 が 発 生 した 場 合 は 制 作 を 完 遂 し た 上 で 提 出 時 に 追 加 の 提 案 相 談 を 持 ちかけられるよう 説 明 文 書 や 代 替 案 を 別 途 ご 用 意 ください 提 供 される 素 材 以 外 は 必 要 に 応 じ てご 自 身 で 用 意 してください なお 素 材 を 調 達 する 際 他 人 の 著 作 権 を 侵 害 する 為 は 厳 禁 です 分 にご 注 意 ください クライアントからの 提 供 素 材 や 制 作 過 程 のファイルは 保 存 しておき 後 々 修 正 依 頼 が 入 ったときにも 迅 速 に 対 応 できるようにしておきましょう 問 い 合 わせ 先 株 式 会 社 イマジカデジタルスケープ キャリアデザイン 部 トレーニンググループ 林 TEL:0-55-0 E-mail:train@dsp.co.jp テキスト 原 稿 提 供 素 材 フォルダ 内 (テキスト 原 稿.txt) 画 像 素 材 後 述 の 画 面 構 成 ( 注 釈 ) 内 の 指 示 に 従 って 提 供 素 材 フォルダ 内 の 画 像 を 必 要 に 応 じて 加 工 してお 使 いください 目 安 時 間 時 間 自 己 評 価 のすすめ 同 梱 の 自 己 評 価 シート.pdf にチェックポイントをまとめていま す 完 成 したら このシートを 使 って 仕 上 がりを 確 認 しましょう 振 り 返 りを うと 作 品 のアピールポイントも 整 理 できます 0.. Copyright 0 IMAGICA DIGITALSCAPE Co., Ltd. All rights reserved.
要 件 定 義 プロジェクト 趣 旨 株 式 会 社 イマジカデジタルスケープが 運 営 する リストランテ ディ デジタルスケープ のサイトリニューアル サイト 運 営 主 体 5 年 前 から 渋 谷 に 店 を 構 えるイタリアンレストラン 賑 やかなメ インストリートから 歩 裏 通 りに った の 隠 れ 家 レストラン メインの 客 層 は 都 内 で 働 く0 50 代 の 男 会 社 帰 りに 友 同 僚 デートで 人 あたりの 平 均 単 価 は,000 円 程 度 オーナーはこの 道 0 年 のシニアソムリエ シェフは 都 内 のレスト ラン(イタリアン フレンチ)で0 年 修 を 積 み この 度 メイン シェフとして 参 加 イタリアンを 主 軸 としつつも 枠 にとらわれず 多 国 籍 の 創 作 料 理 やお 酒 を 提 供 していきたい この 度 の 店 舗 リニューアルで スペースながらスタンディング テーブル テラス 席 を 用 意 さまざまなシチュエーションで 楽 し んでほしい サイトリニューアルに 期 待 すること この 度 シェフが 変 わり 店 舗 もリニューアル これにあわせて Webサイトも 一 新 したい 今 後 オーナーとシェフで メニューや 内 装 を 詰 めていく それに 応 じて 都 度 Webコンテンツはオーナーが 差 し 替 えていくため 掲 載 情 報 や 機 能 は 現 サイトの 使 い 回 しでOK 当 リニューアルで は シンプル&ハイセンスで 更 新 しやすい 枠 組 みを 作 ってほしい (オーナーは 簡 単 なHTML 修 正 画 像 編 集 に 対 応 可 能 ) べログ や ぐるなび もあるため 当 サイトは 簡 易 なシン グルページでまとめたい 実 際 左 記 サイトのほうが られてい るため 当 サイトは 補 完 的 な 役 割 当 サイトまで 来 てくれた 人 が に 紹 介 したり 店 に きたくなる 雰 囲 気 の 良 いものがいい 現 サイトはスマートデバイス(スマホ タブレット)で づら い PCよりスマートデバイスでこそ やすくしてほしい できるだけ 早 く 今 すぐにでもリニューアルしたい スタッフは 常 時 募 集 興 味 ある 人 は 電 話 orメールで 受 け 付 けたい 0.. Copyright 0 IMAGICA DIGITALSCAPE Co., Ltd. All rights reserved.
企 画 設 計 企 画 コンセプト 来 店 前 の 最 後 の 一 押 し をサポートする シンプル&シングルWeb ー 都 内 で 働 く0 50 代 の 男 会 社 帰 りに 友 同 僚 恋 と 当 サイトの 位 置 づけ 役 割 食 べログ や ぐるなび の 補 完 的 な 役 割 来 訪 者 が 人 に 紹 介 したくなる 店 に きたくなる 最 後 の 一 押 し をサポート 情 報 量 は 必 要 最 低 限 に 留 め 運 者 も 来 訪 者 もシンプルに 使 える 作 りに 設 計 ポイント 都 会 のハイセンスな 大 人 たちが 人 に 紹 介 & 誘 いたくなるデザイン 余 白 を 十 二 分 に 活 かした 真 っ 白 い 背 景 を 強 調 コンテンツに 合 わ せて 目 をひく 大 判 の 写 真 をページ 上 部 に 枚 中 ほどに 枚 配 置 更 新 しやすさ テキスト 入 替 えや 画 像 差 替 えがしやすい シンプルなシングル ページで 構 成 ファイル 構 造 や 命 名 規 則 ソースも 分 かりやすく スマートデバイス 対 応 スマホ タブレットからのアクセスにストレスがないように 画 面 を 構 成 GoogleMapを 使 った 道 案 内 で 来 店 ナビもスムーズに コンテンツ 機 能 リスト 現 サイトを 踏 襲 RdDSのコンセプト 店 舗 情 報 名 称 / 所 在 地 /TEL/メール 季 節 のメニュー シェフのおすすめ( 種 )/ 前 菜 ( 種 )/サラダ( 種 ) RdDSからのお 知 らせ 店 舗 リニューアル/ 新 入 荷 のお 知 らせ/スタッフ 募 集 地 図 (GoogleMapで) 店 舗 からの 不 定 期 メール 配 信 の 案 内 受 付 フォーム 0.. Copyright 0 IMAGICA DIGITALSCAPE Co., Ltd. All rights reserved.
仕 様 ソースコード 文 字 コード:UTF- ディレクトリ 構 成 拡 張 性 に 配 慮 し ファイル 種 別 ごとに 管 理 マークアップ 言 語 :HTML5 スタイルシート:CSS.を 基 本 仕 様 とし も 利 用 可 (Level の 非 対 応 ブラウザでも 表 示 操 作 に 支 障 がないよう 配 慮 ) home index.html レイアウト 装 飾 シングルページ 構 成 要 素 をもれなく 配 置 し 次 ページの 画 面 構 成 にそって 制 作 のこと フォントサイズや 種 類 字 背 景 や 余 白 の 取 り 方 については 提 供 されるデザイン カンプを 再 現 すること s css js 画 像 ファイルを 保 存 CSSファイルを 保 存 JavaScriptファイルを 保 存 ページ 幅 7pxにブレイクポイントを 設 け PC とスマートデバイス 用 を 分 けて CSSファイル ファイルにまとめること の 利 規 定 配 慮 する 点 公 開 後 も 他 の 作 業 者 が 内 容 を 理 解 し コンテンツ の 差 し 替 えや 修 正 をしやすいソース 記 述 (コメン トをつける インデントを 入 れるなど) 分 かり やすいファイル 構 造 命 名 規 則 で 制 作 のこと サイズ: 幅 00px 以 上 を 必 ず 確 保 アイソレーション:の 横 幅 に 対 して 上 下 左 右 に0% 以 上 の 余 スペースを 必 ず 設 ける( 例 : 幅 が50px 上 下 左 右 に5px 以 上 の 余 白 ) 対 象 ブラウザ PC: Internet Explorer 以 降 Chrome/Firefox/Safari/Opera 最 新 バージョン スマートデバイス(スマホ タブレット): Android.0 以 上 /ios 以 上 の 標 準 ブラウザ 以 上 の 環 境 で 問 題 なく 表 示 動 作 すること 0.. Copyright 0 IMAGICA DIGITALSCAPE Co., Ltd. All rights reserved. 5
画 面 構 成 PC 向 け スマートデバイス 向 け 0 0 ナビ header header メインビジュアル ナビ main メインビジュアル リード 文 main 店 舗 情 報 main お 知 らせ 文 リード 文 5 シェフのおすす め 店 舗 情 報 前 菜 サラダ 5 シェフのおすすめ お 知 らせ 文 7 サブビジュアル 前 菜 main サラダ お 知 らせ 文 お 知 ら せ 文 お 知 ら せ 文 お 知 ら せ 文 7 サブビジュアル 0 map 0 map GoogleMap GoogleMap メール 配 信 案 内 文 フォーム コピーライト 登 録 ボタン subscribe footer メール 配 信 案 内 文 フォーム 登 録 ボタン コピーライト subscribe footer 0.. Copyright 0 IMAGICA DIGITALSCAPE Co., Ltd. All rights reserved.
画 面 構 成 ( 注 釈 ) 0 セクショニング header/footer/section/article/nav 要 素 から 適 切 な 要 素 を 使 い 分 けて ソースを やすく 記 述 する 提 供 素 材 は rdds.ai 0*50 alt 属 性 は リストランテ ディ デジタルスケープ ページ 左 上 のは http://www.dsp.co.jp/ にリンク ナビ 以 下 点 を 各 セクションにリンク ホーム/RdDSについて/メニュー/アクセス ナビ の 配 置 ナビ 点 を PC 向 けは 横 並 び スマートデバイス 向 け は 縦 並 びで 表 示 メインビジュアル 提 供 素 材 は -.jpg 横 幅 00% 高 さ0px 中 央 揃 え +リード 文 の 配 置 とリード 文 を PC 向 けは 横 並 び スマートデバ イス 向 けは 縦 並 びで 表 示 リード 文 + 店 舗 情 報 リード 文 は 全 角 0 文 字 以 内 5 シェフのおすすめ 料 理 名 ( 全 角 0 字 以 内 )+リード 文 ( 全 角 0 文 字 以 内 ) 品 目 前 菜 +サラダ の 配 置 前 菜 とサラダを PC 向 けは 横 並 び スマートデバイ ス 向 けは 縦 並 びで 表 示 前 菜 +サラダ 料 理 名 ( 全 角 0 文 字 以 内 )+リード 文 ( 全 角 0 文 字 以 内 ) 品 目 7 サブビジュアル 提 供 素 材 は -.jpg 横 幅 00% 高 さ0px 中 央 揃 え サムネイル 画 像 +お 知 らせ 文 の 配 置 サムネイル 画 像 +お 知 らせ 文 をセットとして 縦 並 びに 配 置 PC 向 けはセットごと 横 並 びに 配 置 してカラムで 表 示 スマートデバイス 向 けは 縦 並 びで 表 示 サムネイル 画 像 提 供 素 材 は column-x.psd で 画 像 ファイル 名 のx 部 分 は の 連 番 で 点 画 像 提 供 あり 左 から 順 に 使 用 直 径 :00px お 知 らせ 文 全 角 70 文 字 以 内 お 知 らせ 文 は 基 本 スタッフ 募 集 とする 0 GoogleMap GoogleMapを 使 った 店 の 地 図 表 示 ( 東 京 都 渋 谷 区 道 玄 坂 -0- 渋 谷 道 玄 坂 東 急 ビル 階 ) 横 幅 0% 高 さ0px 実 装 手 法 は 問 わない Subscribe 内 のフォーム&ボタン フォームのmethod 属 性 は POST フォームのプレースホルダ 属 性 は eg. account@example.com フォームの 幅 0px* 高 さpx 登 録 する ボタンは 幅 00* グラデーションと px 角 丸 はCSSで 実 装 Subscribe 内 の 配 置 Subscribe 内 の 要 素 は PC 向 けは 横 並 び スマート デバイス 向 けは 縦 並 びで 表 示 Footer デザインカンプ 内 のテキスト 原 稿 にのっとって コピーラ イト 表 記 0.. Copyright 0 IMAGICA DIGITALSCAPE Co., Ltd. All rights reserved. 7