電 子 商 取 引 (EC)サイト 制 作 指 導 書 制 作 :アドビ システムズ 株 式 会 社 監 修 : 東 京 都 立 第 四 商 業 高 等 学 校 校 長 大 林 誠 先 生
電 子 商 取 引 (EC)サイト 制 作 指 導 書 はじめに Apple の imac を 始 めとして 各 社 から 簡 単 に 使 えるパソコン が 発 売 されるようになり ようやく 各 家 庭 にパソコンが 普 及 するようになりました さらにハードウェアの 低 価 格 化 定 額 性 の 携 帯 電 話 回 線 や 省 電 力 CPU 公 衆 無 線 LAN などの 環 境 が 整 ってきたことから タブレット 型 の 簡 単 に 使 える 端 末 が 普 及 しはじ めています 特 に Android OS は Microsoft Windows 95 の 登 場 と 同 じくらいのインパクトがありました そ してすでに スマートフォンやタブレット 型 の 端 末 は パソコンを 上 回 る 出 荷 台 数 になっています インターネットを 活 用 した 情 報 伝 達 の 手 段 や 技 術 も 情 報 技 術 の 進 展 とともに 大 きく 変 化 しています Webペー ジも 情 報 を 発 信 する 一 方 通 行 なものから 個 人 のニーズに 合 わせた 情 報 を 提 供 する 双 方 向 なものに 変 わりつ つあります しかし Web デザインの 本 質 が 情 報 の 整 理 であることに 変 わりはありません 適 切 に 整 理 整 頓 された 情 報 にこそ 価 値 があります みなさんは インターネットがなくなった 世 界 を 想 像 出 来 ますか? 実 は 30 年 前 にはインターネットは 存 在 していなかったのです しかし 今 日 ではインターネットがない 世 界 は 想 像 することも 難 しいほど 生 活 に 密 接 に 関 係 しています 多 くの 場 面 で 使 われている 分 その 使 われ 方 の 数 だけ インターネットに 関 わる 制 作 をする 場 面 があります インターネットコンテンツ Web サイト 制 作 は 日 進 月 歩 以 上 の 速 度 で 変 化 しています 本 書 がその 理 解 への 一 助 となれば 幸 いです - 2 -
www.adobe-education.com/jp/ この 本 の 見 方 本 書 ではテキスト 電 子 商 取 引 (EC)サイト 制 作 に 予 備 知 識 と 周 辺 情 報 を コラムや 注 釈 として 書 き 加 えて あります ポイントになりそうな 箇 所 には 赤 線 あ 赤 枠 が 入 れてあります 注 釈 の 例 Adobe 製 品 は CS6 を 基 準 に 書 いてあります のが CS4 以 降 ならほぼ 同 様 の 機 能 が 実 装 されています 操 作 方 法 やメニュー 構 成 が 違 う 部 分 が 多 々ありますが 適 宜 読 み 替 えてく ださい 参 考 になりそうなインターネット 上 の 情 報 や ソフトウェアやサービスの URL の 例 Google Chrome http://www.google.co.jp/intl/ja/chrome/browser/ Firefox http://www.mozilla.jp/firefox/ URL 部 分 は PDF 上 ではリンクしていますので 1 クリックで 該 当 する Web ページを 開 くことができます - 3 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 電 子 商 取 引 (EC)サイト 制 作 制 作 :アドビ システムズ 株 式 会 社 監 修 : 東 京 都 立 第 四 商 業 高 等 学 校 校 長 大 林 誠 先 生 インターネットの 歴 史 -------------------------------------------------------------3 パーソナルコンピューターの 構 成 ----------------------------------------------5 スマートデバイス -------------------------------------------------------------------6 WWWの 仕 組 み ----------------------------------------------------------------------7 前 半 は 講 義 の 資 料 として 11 ペー ジ 以 降 は 実 習 での 使 用 を 想 定 した テキストになっています Webサイト 制 作 で 使 用 するソフトウェア -------------------------------------9 商 品 を 撮 影 する --------------------------------------------------------------------10 Adobe Bridgeで 写 真 を 選 別 -----------------------------------------------------11 画 面 の 大 きさと 画 像 の 解 像 度 --------------------------------------------------12 Adobe Photoshopで 画 像 加 工 --------------------------------------------------13 Adobe Illustratorでロゴ 作 成 ----------------------------------------------------19 Adobe Photoshopでデザインカンプを 作 る --------------------------------25 Adobe DreamweaverでWebページ 作 成 -------------------------------------32 CSSによるスマートデバイス 対 応 ---------------------------------------------56 CSSボタンの 作 成 ------------------------------------------------------------------57 JavaScriptでプログラミング ----------------------------------------------------58 Webページのファイル 構 成 -----------------------------------------------------59-1 - - 4 -
www.adobe-education.com/jp/ ソフトウェア 環 境 本 冊 子 で 使 用 しているソフトウェア 環 境 は 以 下 の 通 りです Adobe Creative Suite 6 Adobe Bridge CS6 Adobe Illustrator CS6 Adobe Dreamweaver CS6 Adobe Photoshop CS6 Extended Google Chrome ver.24 Microsoft Windows 7 Adobe 製 品 は CS6 を 基 準 に 書 い てありますのが CS4 以 降 ならほ ぼ 同 様 の 機 能 が 実 装 されていま す 操 作 方 法 やメニュー 構 成 が 違 う 部 分 が 多 々ありますが 適 宜 読 み 替 えてください 本 文 に 使 用 している 画 像 はAdobe Creative Suite 6とWindows 7の 組 み 合 わせを 使 っています これ 以 外 の 環 境 では 画 面 の 表 示 や 操 作 方 法 に 違 いがありますが 学 習 には 問 題 ありません 免 責 事 項 本 書 に 記 載 された 内 容 は 情 報 の 提 供 のみを 目 的 としています したがって 本 書 を 用 いた 運 用 は 必 ず お 客 様 自 身 の 責 任 と 判 断 によって 行 ってください これらの 情 報 の 運 用 の 結 果 について アドビ システム ズ 株 式 会 社 および 監 修 者 はいかなる 責 任 も 負 いません 本 書 記 載 の 情 報 及 びソフトウェアに 関 する 記 述 は 2013 年 1 月 現 在 のものを 掲 載 していますので ご 利 用 時 には 変 更 されている 場 合 もあります 商 標 及 び 登 録 商 標 本 文 に(TM)マーク (R)マークは 明 記 しておりませんが Adobe Creative Suite 及 び 各 製 品 は Adobe Systems Incorporated(アドビシステムズ 社 )の 米 国 ならびに 他 の 国 における 商 標 または 登 録 商 標 であ り その 他 の 本 文 中 に 記 載 されている 会 社 名 団 体 名 製 品 名 などは それぞれの 会 社 団 体 の 商 標 登 録 商 標 商 品 名 です Google Chrome http://www.google.co.jp/intl/ja/chrome/browser/ Firefox http://www.mozilla.jp/firefox/ - 2 - - 5 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 無 線 LAN 家 やオフィスの 中 でノートパソコンを 持 ち 歩 いても インターネットに 繋 がったままになります これはそれぞ れのパソコンが 無 線 LAN 子 機 を 内 蔵 しているためです 最 近 では 街 中 でも 無 線 LAN を 使 えるようになって きました IEEE 802.11a/b/g/n( 通 称 名 Wi-Fi:わいふぁい)など 速 度 や 性 能 の 違 う 規 格 がいくつかあります どの 企 画 でもおおむね 数 十 MBps の 速 度 が 出 るため 一 般 的 な 使 用 においてはまったく 支 障 がありません しかし 無 線 接 続 である 以 上 インターネットの 盗 聴 の 危 険 性 歴 があるため 史 導 入 する 際 には 暗 号 化 や 不 可 視 化 などの 漏 洩 対 策 を 怠 ら ないようにする 必 要 があります コンピューターは 第 2 次 大 戦 中 のミサイル 弾 道 計 算 の 為 に 急 速 に 発 展 しました 同 様 にコンピューター ネットワークも どこか 一 台 のコンピューターが 破 壊 されても 他 のコンピューター 同 士 の 通 信 は 維 持 さ れるように 設 計 されました これが 今 のインターネットの 原 型 であるアーパネットです その 後 研 究 所 や 大 学 国 の 機 関 を 中 心 にそれらを 相 互 に 接 続 し 広 まっていき 一 般 の 商 用 利 用 が 開 始 され 現 在 のイン ターネットが 形 成 ました インターネットの 今 インターネットの 存 在 はすでにメディアではなくインフラ(infrastructure 電 気 やガス 水 道 といった 生 活 になくてはならないライフライン)となってい ます 中 でもWebサイトを 中 心 としたコミュニケーションは ホームページを 見 る から Webサービスを 利 用 する へと 大 きく 変 化 しました Webサイトはユーザ 側 に 依 存 したメディアです どんな 方 法 でそのWebサイト にアクセスされるかは 制 作 側 には 解 りません ハードウェアの 低 価 格 化 定 額 の 携 帯 電 話 回 線 や 公 衆 無 線 LANなどにより スマートフォンやタブレットなど 普 通 の 人 にとって 操 作 が 簡 単 な 端 末 が 加 速 度 的 に 普 及 しています それにともないWebサイトに 求 め られるものも 変 わってきましたが Webデザインの 本 質 が 情 報 の 整 理 であることに 変 わりはありません インターネットへの 接 続 方 法 インターネットは 一 般 的 にISP(Internet Service Provider:インターネット サービスプロバイダ)と 呼 ばれるインターネット 網 への 接 続 業 者 と 契 約 して 利 用 します ISPへはADSLなどの 電 話 回 線 光 ファイバー 携 帯 電 話 回 線 など を 使 用 して 接 続 します インターネットの 普 及 率 インターネットは 世 界 中 に 広 がっています 2012 年 現 在 で 世 界 人 口 の4 割 近 くが 何 らかの 方 法 でイン ターネットに 接 続 しています 日 本 では 携 帯 電 話 が 広 く 普 及 しているおかげで 人 口 の9 割 以 上 がイン ターネットに 接 続 可 能 な 状 況 となっています 総 務 省 情 報 通 信 白 書 http://www.soumu.go.jp/johotsusintokei/whitepaper/index.html 携 帯 電 話 接 続 - 3 - LTE(Long Term Evolution:ロング ターム エボリューション)や WiMAX(ワイマッ クス)など 3G(W-CDMA や CDMA2000: 第 3 世 代 移 動 通 信 )の 携 帯 電 話 を 上 回 る 速 度 の 携 帯 回 線 が 月 額 費 用 定 額 で 使 えるようになってきました すでに 数 MBps から 数 十 MBps の 速 度 が 出 ているますが さらなる 価 格 の 低 下 と 速 度 の 向 上 は 必 至 です 携 帯 電 話 が 普 及 し 固 定 電 話 がなくなっていったように 今 後 はこれからの 接 続 方 法 の 主 流 になる 可 能 性 があります - 6 -
www.adobe-education.com/jp/ Wikipedia インターネット http://ja.wikipedia.org/wiki/ インターネット http://en.wikipedia.org/wiki/history_of_the_internet 社 会 の 出 来 事 コンピューター インターネット 1974 パソコン 誕 生 1975 ベトナム 戦 争 終 結 1976 Apple 1977 1978 サンシャイン60 1979 自 動 車 電 話 1980 1981 IBM PC Microsoft 1982 CDプレーヤー 発 売 1983 東 京 ディズニーランド 開 業 TCP/IP 1984 Macintosh RIM 1985 Microsoft Windows 1986 { 1987 1988 アナログ 携 帯 電 話 インターネット 1989 冷 戦 終 結 ノートパソコン インターネット 商 業 利 用 開 始 1990 1991 Linux World Wide Web 1992 1993 第 2 世 代 デジタル 携 帯 電 話 NCSA Mosaic 1994 プレイステーション 発 売 PHS Netscape Navigator 1995 Windows 95 Internet Explorer 1996 1997 インターネット 利 用 者 1 億 人 1998 長 野 オリンピック Google 1999 2000 年 問 題 i-mode 2000 カメラ 付 き 携 帯 2001 Mac OS X 2002 サッカーW 杯 日 韓 共 催 第 3 世 代 デジタル 携 帯 電 話 Firefox 2003 64ビット 化 Safari 2004 Facebook 2005 インターネット 利 用 者 10 億 人 2006 ネットブック Twitter 2007 iphone 2008 北 京 オリンピック Android Chrome World Wide Web とは http://e-words.jp/w/www.html 2009 Windows 7 2010 上 海 万 博 ipad インターネット 利 用 者 20 億 人 2011 LTE/ 第 4 世 代 携 帯 電 話 2012 スカイツリー 完 成 Windows 8 2013 インターネット 利 用 者 30 億 人 2014 情 報 技 術 の 進 展 は 約 四 半 世 紀 で 大 きく 変 化 し その 後 も 急 速 に 技 術 革 新 が 進 んで 進 んでいます - 4 - - 7 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 最 近 のハードウェアアーキテクチャでは HDD に 代 わって SSD が 使 われ CPU の 処 理 を 一 部 GPU で 肩 代 わりするなど 両 者 ともに 重 要 な 存 在 に 存 在 になっています GPU http://ja.wikipedia.org/wiki/graphics_processing_unit http://www.nvidia.co.jp/object/what-is-gpu-computing-jp.html パーソナルコンピューターの 構 成 入 力 装 置 Solid State Drive http://ja.wikipedia.org/wiki/flash_ssd http://e-words.jp/w/ssd.html 出 力 装 置 演 算 装 置 記 憶 装 置 普 段 よく 目 にするコンピューターはパソコン(Personal Computer パー ソナルコンピューター)です キーボードやマウスといった 入 力 装 置 と ディスプレイやプリンタなどの 出 力 装 置 があって 中 には CPU(Central Processing Unit:シーピーユー)やGPU(Graphics 1 キロメートルは 1000 メートルですが 1 キロバイトは 1024 バ Processing Unit:グラフィックス プロセッシング ユニット)という 演 算 装 置 と メモリやSSD(Solid State Drive) ハードディスクといった 記 イトです これは 内 部 的 には 2 進 数 なので 1000 は 10 の 3 乗 憶 装 置 が 入 っています ではなく 2 の 10 乗 で 計 算 しているためです 1 キロバイトは デジタル 1000 バイトではなくて 1000 バイトと 少 しだと 覚 えておきましょ コンピューターの 中 では 全 てを1か0 アルかナイか YesかNoかで 考 えています これを2 進 法 と 言 いま う 同 様 に 1MB は 1KB の 1000 倍 と 少 し 1G は 1M の 1T す たとえば1+1は2ですが これをコンピューターがやると1+1は10となり イチゼロと 読 みます 2 進 は 1G の 1PB( ペタバイト) は 1TB の 1000 倍 と 少 しです 法 自 体 は 覚 える 必 要 はありません 重 要 なことはコンピューターは 最 終 的 には1か0で 判 断 しているという 点 です 膨 大 な 量 の1と0の 組 み 合 わせで 全 てのコンピューターは 動 いています 逆 に ちょっと 少 な め とか もう 気 持 ち 赤 く とかあいまいなことはニガテです 11010010100001110111000 = 6898616 = 105,67,184 = 6943B8 2 進 数 10 進 数 8 桁 ずつ 分 けた10 進 数 16 進 数 この 色 を 表 す 文 字 列 = RGB(105,67,184) = #6943B8-5 - - 8 -
www.adobe-education.com/jp/ ipad https://www.apple.com/ipad/ nexus http://www.google.com/intl/all_jp/nexus/ kindle http://www.amazon.com/gp/product/b0083pwapw/ スマートデバイス スピーカー 加速度センサ カメラ タッチパネル 位置情報 GPS マイク 無線LAN iphone Androidに代表されるスマートフォンや ipadやkindleなどのタブレットなど 従来のパソコン ではない端末が普及しました これらの端末は画面を触る 端末を傾ける 回すというような直感的 人 間的な動き で簡単な操作方法が多く キーボードとマウスで操作する従来のパソコンより 操作に専門 知識を必要としません タッチパネル 主体となる入力デバイスは タッチパネル です マウスカーソルでは細かな操作が可能でしたが 指先 での操作は 触っている下は見えないため大きなボタンを作るなどの考慮が必要です 手に持って使う マウス操作 クリックした場所は見える スマートフォンやタブレット型の端末に共通することは 持ち運ぶデ バイスだということです 人とともに移動し 常に稼働しているから 操作する部分 マウス と見る部分 ディスプレイ は離れている こそ その良さが活かされる Web ドラッグ&ドロップなどの複雑な操作もユーザに要求できる タッチパネル えていく必要があります 指の真下は見えない 操作する部分と見る部分 ディスプレイ が同じ 複数指での拡大縮小 回転など 新しい操作方法がある ipad どんなスペックかではなく どんな事ができるか どのように生活が変わ るかを魅力的にアピールしてきまことで 爆発的に販売数を伸ばしていま -6 - す ipad をパソコンと定義した場合 世界で一番パソコンを売っている 会社はアップル社になります Android タブレット スマートフォンと同様に Android OS にもスマートフォン向けに設計された バージョンが存在しています 世界中の会社で開発されており 今後ます ます多種多様な端末が増えてくると思われます -9- サイト アプリケーション を考
電 子 商 取 引 (EC)サイト 制 作 指 導 書 ハイパーリンクの 概 念 自 体 は WWW より 前 からあります Mac 用 のアプリケーションで HyperCard などが 有 名 です http://ja.wikipedia.org/wiki/ ハイパーリンク WWWの 仕 組 み The World Wide Web Consortium (W3C) http://www.w3.org WWW(World Wide Web) インターネット 上 の 文 章 ファイルの 一 部 分 に 別 の 文 章 ファイルへ 遷 移 を 埋 め 込 む 方 法 が 考 案 されまし た ハイパーリンク(Hyperlink)といい このハイパーリンクが 含 まれたファイルをハイパーテキストと いいます ハイパーリンクの 概 念 自 体 は 以 前 から 存 在 しましたが インターネット 上 の 情 報 との 親 和 性 が 高 かったため 広 く 普 及 するに 至 りました よく 耳 にするHTMLファイルとはハイパーテキスト マーク アップ ランゲージ(HyperText Markup Language)の 略 称 です Web ページはどうやって 表 示 しているの? Webブラウザ ハイパーテキストを 解 釈 し リンクをクリックしてファイル 遷 移 することを 可 能 にしたのが Webブラウザです Windowsに 入 っているInternet Explorerをはじめ Google ChromeやFirefox Safariなどが 代 表 的 なWebブラウザです 用 途 や 好 み 応 じて 使 われています Webサーバ ファイルが 自 分 のパソコンに 入 っていたら 自 分 しか 見 ること ができません せっかく 作 ったファイルをみんなで 共 有 する ためのソフトウェアも 作 られました これが Webサーバです WebサーバにあるファイルをWebブラウザで 見 る WWW(World Wide Web:ワールドワイドウェブ) の 世 界 が 始 まったのは1990 年 代 の 始 めです 世 界 中 でWebサイトが 作 られ さまざまな 端 末 にWebブラ ウザが 搭 載 され 商 業 利 用 もますます 盛 んになり 今 日 も 爆 発 的 な 勢 いで 世 界 中 に 広 まっています Web ブラウザはユーザからのリクエストに 応 じて Web サーバに 情 報 をリ クエストします ユーザはページ 指 定 するために URI を Web ブラウザに 伝 えます Web ブラウザから Web サーバへリクエストを 送 る(Get) HTML ファイルをダウンロードする その HTML ファイルを 解 釈 する 画 像 ファイルや CSS ファイルなど 関 連 するファイルをダウンロード HTML 内 のテキストや 画 像 を 組 み 合 わせて 表 示 画 面 を 生 成 する ユーザからクリックなどの 操 作 を 受 け 付 ける 始 めに 戻 る - 7 - Nintendo WiiU( 左 )などのゲーム 機 Amazon kindle Fire HD( 右 )といった 電 子 書 籍 端 末 にもWebブラウザが 搭 載 されている - 10 -
www.adobe-education.com/jp/ IP アドレス IPv4(Internet Protocol Version 4:アイピーブイ4)の IP アドレスはパソコン 約 43 億 台 分 あります すご く 多 いような 気 がしますが すでに IP アドレスの 総 元 締 め 機 関 である IANA(Internet Assigned Numbers Authority)では 番 号 の 在 庫 がなくなっています IP アドレスをもっといっぱい 使 えるようにした IPv6(Internet Protocol Version 6:アイピーブイ6)という 新 しいバージョンがあるのですが IPv4 とはパラレルワールド( 共 存 出 来 ない 世 界 )になってしまうため 簡 単 には 移 行 できません パケットサイズ 1 パケットの 大 きさは 端 末 や 規 格 によって 上 限 (MTU)が 決 まっています 日 本 の 3G 携 帯 電 話 では 128 バイト イーサネットで 150 0 バイトです データのバケツリレー 地 球 の 裏 側 ブラジルの 情 報 が 知 りたい 時 は WebブラウザにブラジルのURI(Uniform Resource Identifier URL:Uniform Resource LocatorもURIの 一 つ)を 入 力 すると きちんとブラジルの 情 報 が 表 示 されます この 仕 組 みを 支 えているのがTCP/IP(Transmission Control Protocol/Internet Protocol:ティー シーピーアイピー)です TCPとIPなど コンピューター 同 士 の 世 界 共 通 言 語 (Protocol:プロトコル)に よって ブラジルのファイルはバケツリレーで 日 本 まで 運 ばれて 来 るのです このバケツのことをパケッ トといいます IP(インターネット プロトコル) インターネットにはさまざまな 規 格 サービスが 存 在 します Webサイト メール IP 電 話 や 動 画 配 信 な ど それぞれに 適 したプロトコルを 使 用 しています このIPは 名 前 からも 解 るようにインターネットの 仕 組 みの 根 幹 を 支 える 重 要 なプロトコルです インターネット 上 の 住 所 であるIPアドレスを 管 理 し 適 切 な 順 序 でパケットを 受 け 渡 します TCP(トランスミッション コントロール プロトコル) Webサイトやメールなど インターネット 上 の 多 くサービスがこの TCPを 使 っています パケットにはTCPによって 宅 配 便 の 伝 票 のよう な 荷 札 が 付 けられ 確 実 に 正 確 に 届 けられます パケットを 一 つ 届 け 損 ねたら もう 一 度 同 じパケットを 送 りなおしてくれるため どんな に 長 いメールでも 文 字 が 抜 け 落 ちることなく 相 手 に 届 くのです - 8 - ドメイン 名 IP アドレスは 数 字 の 羅 列 なので 人 間 が 覚 えるのは 困 難 です そこで その IP アドレスを 人 間 に 解 りやすい 文 字 列 に 置 き 換 えたのがドメイン 名 です adobe.com や yahoo.co.jp などのドメイン 名 はそれぞれの 企 業 や 個 人 が 登 録 して 使 用 しています - 11 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 情 報 を 構 成 する 要 素 情 報 の 基 本 は 文 字 で Web サイトの 基 本 は 文 章 と 画 像 の 組 み 合 わせです しかし 文 字 だけでは 伝 わりにくい 情 報 が 多 いことも 事 実 です テレビに 代 表 される 音 声 や 映 像 のメディアは 圧 倒 的 に 情 報 量 が 多 く 人 間 の 感 情 に 直 接 的 に 影 響 を 与 えることができます 情 報 量 が 多 い 分 ファイルも 大 きく 文 字 情 報 とは 比 べものにならないファイルサイズになります イ ン タ ー ネット の 帯 域 が 広 が り 端 末 の 性 能 が 上 が っ た の で 音 楽 や 声 と い っ た 音 声 フ ァ イル 映 画 や ア ニ メ ー シ ョンと い っ た 映 像 ファイルを 自 由 に 扱 えるようになりました 時 間 軸 Webサイト 制 作 で 使 用 するソフトウェア 文 字 や 画 像 の 情 報 と 音 声 や 映 像 の 情 報 これらが 決 定 的 に 違 うのは 時 間 をもっていることです 文 字 や 画 像 は 見 る 側 ( 読 む 側 )がその 情 報 に 触 れて 解 釈 する 時 間 を 決 めますが 音 声 や 映 像 は 時 間 軸 をもっているため その 主 導 権 がコンテ ンツ 側 にあります 音 楽 や 映 画 などのは 時 間 の 流 れの 上 に 成 り 立 つ 物 なので 見 る 側 にはそれを 受 け 入 れるか 否 かの 選 択 しかできません 写 真 などの 画 像 ファイル この 点 が 音 声 や 映 像 を 扱 う 上 でもっとも 重 要 です イラストや 地 図 映 像 や 音 声 素 材 の 編 集 Adobe Photoshop Adobe Illustrator Adobe Premiere 素 材 の 管 理 確 認 文 章 や 表 など Adobe Bridge Word / Excel HTML/CSSの 作 成 Adobe Dreamweaver 表 示 や 動 作 の 確 認 Apache HTTP Server http://httpd.apache.org Webサイトの 公 開 Web サーバ クライアントである Web ブラウザは Web ページを 表 示 するために URI を 頼 りに データが 格 納 された Web サーバに Webサーバー アクセスを 試 みます 無 事 に Web サーバを 見 つけ 出 しアクセスすることができたら index.html を 送 ってください とい うリクエストを 送 ります Web サーバ 側 では クライアントのリクエストに 対 して index.html をどうぞ とファイルを 送 り 返 してくれます このように Web ブラウザのリクエストに 答 えるのが Web サーバソフトウェアの 役 割 です Apache - 9 - Apache(アパッチ)は 世 界 的 にもっとも 多 く 使 われている Web サーバソフトウェアで オープンソースで 公 開 されていま す 様 々な OS をサポートしていることや Yahoo! などの 大 規 模 サイトでも 使 われていることから 信 頼 性 も 知 名 度 も 非 常 に 高 いソフトウェアです Apache のバージョンは 現 在 1.3 系 2.0 系 2.2 系 があり 新 しい 機 能 が 安 定 して 使 える 2.0 系 がよく 使 われています 全 Web サーバソフトウェアの 半 数 以 上 を Apache が 占 めていますが Windows 系 サーバの IIS(Internet Information Services)が 使 われることも 少 なからずあります 近 年 では 通 常 の Web サーバとしてではなく サーバ 側 でプログラムを 実 行 するためのアプリケーションサーバとして 使 われることが 多 いです - 12 -
www.adobe-education.com/jp/ 数 字 が 大 きいほど 明 るく 写 りますが 画 像 が 荒 れるの で なるべく 小 さい 数 字 を 選 択 します 晴 れた 日 の 野 外 なら 100 か 200 で 充 分 に 写 ります また 最 近 のデジタルカメラでは 6400 や 12800 と いった 値 を 持 つものもあり ほぼ 真 っ 暗 な 状 況 でも 撮 影 できます 商 品 を 撮 影 する 商 品 を 美 しく 美 味 しそうに 撮 影 する 最 大 のポイントは 明 るいところで 撮 影 することです 近 くにある 光 で いちばんよいのは 太 陽 光 です 窓 際 の 日 陰 など 直 射 日 光 が 入 らない 範 囲 で なるべく 明 るい 場 所 をみつけ 被 写 体 が 陰 にならないようにして 撮 影 します 写 真 を 上 手 く 撮 る 方 法 はたった1つ たくさん 撮 影 することです デジタルカメラはフィルムなどの 消 耗 品 が 不 要 なので 撮 影 にかかるコストは 非 常 に 低 くなっていますから なるべく 多 くシャッターをきって みましょう 被 写 界 深 度 ピントが 合 っている 範 囲 を 被 写 界 深 度 といいます 一 眼 レフカメラなどを 使 うと 比 較 的 簡 単 に 被 写 界 深 度 の 調 整 ができるので 背 景 がボケた 写 真 を 撮 影 できます シャッタースピード シャッタースピードを 遅 くすると 動 いているものを 撮 るときに 残 像 を 意 図 的 に 作 ることができます 逆 にシャッタースピードを 早 くすると 不 自 然 なぐらいに 時 間 を 止 めることも 可 能 になります F は 光 の 入 ってくる 穴 の 大 きさで 値 が 小 さい ほど 明 るくなります 使 用 するレンズによって F 値 のとれる 範 囲 が 決 まります - 10 - シャッターが 開 いている 時 間 を 秒 で 表 しています 分 数 表 記 なので 分 母 が 大 きいほど 時 間 は 短 いといえます - 13 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 コラム 一 般 ユーザの 視 点 を 大 切 に Web サイト 制 作 者 が 常 に 気 をつけておきたいことは 誰 のためにどんなコンテンツを 作 るのか ということです その Web サイトが 見 て 欲 しいと 思 っている 人 達 パソコンで Web サイトを 見 ている 人 達 ですか? 極 論 を 言 うと 普 通 の 人 は 日 常 的 にパソコンを 使 っていません 彼 らの 多 くは 携 帯 電 話 (スマートフォンでは ない 携 帯 )を 使 っています 大 手 ショッピングサイトで 買 い 物 するユーザの 半 数 以 上 は 携 帯 電 話 からです CD は 買 わないけど 着 うたで 音 楽 を 買 って 携 帯 電 話 にヘッドフォンをして 聞 いています また 2011 年 以 降 iphone などのスマートフォン ipad などのタブレット 端 末 が 爆 発 的 に 普 及 しています 旧 来 の 定 義 の パソコン はどんどんなくなっていく 運 命 にあります 一 方 地 上 波 のテレビ 番 組 で を 毎 日 食 べるとやせます と 放 送 されると 次 の 日 にはスーパーの 棚 から 商 品 がなくなります それくらいテレビの 影 響 力 は まだ 大 きいのです そして シニア 向 けの 商 品 はインターネットではなく 新 聞 に 広 告 を 載 せるべきかもしれません シニア 向 け 広 告 企 画 の 核 を Web サイトにしようとしていたら そもそも 企 画 が 失 敗 しています なお 数 ある Web サイトの 中 でも 多 くの 人 にとっては Yahoo! Japan のトップページのように 情 報 を 検 索 でき る Web ページがインターネットそのものなのです - 14 -
www.adobe-education.com/jp/ コラム マナーとルールと 標 準 化 インターネット 上 においても 実 社 会 と 同 様 のマナー モラルが 求 められます 少 なくとも Web 制 作 に 関 わる ものとしては 一 般 ユーザよりも 高 い 意 識 を 持 ちたいものです 巨 大 掲 示 板 に 誰 かが 悪 口 を 書 いたことで 掲 示 板 の 管 理 人 が 訴 訟 の 対 象 になった 時 期 がありました 問 題 だったのは 匿 名 ( 実 際 にはほぼ 書 き 込 み 者 を 特 定 できる)で 悪 口 を 書 き 込 める 点 でした それが 事 実 かどうかは 別 として 井 戸 端 会 議 を 世 界 中 から 見 られる 状 態 は 良 くも 悪 くも 情 報 社 会 の 一 側 面 です 誰 もが 実 社 会 と 同 様 のモラルを 持 っていれば 問 題 ないのですが 酒 に 酔 ったら 強 気 になるの 同 じで インターネットに 接 続 していると 横 柄 な 態 度 をとってしまう 人 がいます たとえば 友 人 に CD を 貸 してあげる 借 りた 友 人 は MD にダビングする これは 合 法 ですよね では ネッ トで 知 り 合 った 会 ったことのない 複 数 の 友 人 に CD を 取 り 込 んだ MP3 ファイル 送 信 する これは 合 法 でしょ うか? どこまでが 私 的 利 用 の 範 囲 なのか インターネットを 始 めとする 情 報 機 器 の 進 化 の 速 さに 対 して 各 国 の 法 律 やその 解 釈 は 遅 れています 日 本 はチャイルドポルノ 天 国 という 悪 名 がありました Web ブラウザのキャッシュに 小 さい 子 供 の 裸 の 写 真 が 入 っているだけで 有 罪 になる 国 もあります 日 本 では 単 純 所 持 はいまだに 合 法 です 日 本 ではパチンコですら 違 法 賭 博 です ところがカジノが 合 法 化 されている 国 のオンラインカジノへアクセスし て クレジットカード 決 済 で 仮 に 儲 かったとしたら? タックスヘイブンや 船 籍 など 国 境 を 越 えると 昔 からいろんな 問 題 がおきています 特 にインターネットでは 状 況 の 変 化 が 早 すぎるのと 国 境 を 越 えるのが 簡 単 すぎる( 本 人 は 国 境 を 越 えている 意 識 がないことも)ため 仮 に 不 法 行 為 があったとしても どの 国 の どの 法 律 にしたがって 対 処 すればよいのか 解 りにくくなっています - 15 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 主 な 決 済 方 法 一 覧 EC ではさまざま 決 済 方 法 が 使 われています それぞれ 特 徴 があり 商 品 や 業 態 対 象 年 齢 などによって 使 い 分 ける 必 要 があります 多 くの 場 合 は 代 行 業 者 に 頼 むことになります 手 数 料 は 1 10% 程 度 で 方 法 や 金 額 によって 異 なります VISA 代 金 引 換 http://www.visa-asia.com/ap/jp/ 宅 配 業 者 が 集 金 を 代 行 してくれる MasterCard クレジットカード http://www.mastercard.com/jp/ クレジットカードを 利 用 した 事 実 上 の 後 払 い VI SA デビットなどの 前 払 い 方 式 もある American Express http://www.americanexpress.com/japan/ Flexible Payments 広 く 世 界 中 で 利 用 されてる Paypal に 代 表 される 電 子 送 金 サービス 日 本 にもイーバンクのメルマネなど 類 似 のサービスがある PayPal https://www.paypal.com/ 銀 行 振 込 実 店 舗 やインターネットバンキングを 利 用 した 前 払 い 電 子 マネー( 非 接 触 型 決 済 ) NFC や FeliCa といった 方 式 で 今 後 普 及 する 可 能 性 があるが 現 時 点 では EC への 支 払 い 方 法 としての 使 用 はハードウェア 的 に 難 しい コンビニ 決 済 電 子 収 納 サービスを 利 用 した 前 払 いや 後 払 いが 利 用 可 能 Edy http://www.edy.jp/ Suica http://www.jreast.co.jp/suica/ ショッピングクレジット/ローン 信 販 会 社 と 提 携 することで 分 割 払 いが 可 能 Pay-easy http://www.pay-easy.jp/ - 16 -
www.adobe-education.com/jp/ EC サイトの 立 ち 上 げコスト EC サイトを 立 ち 上 げるには さまざまな 金 額 のサービスがありますが 大 きくは 次 の 2 つのどちらかになります 自 前 でサーバなどの 環 境 を 用 意 する 場 合 EC サービスを 借 りる 場 合 前 者 は EC サイトの 自 由 度 も 高 く やろうと 思 えば 高 機 能 なショップが 作 れますが 立 ち 上 げや 運 用 のコスト が 高 く 専 門 知 識 も 必 要 となるので 多 くの 場 合 は EC サービスを 借 りて 利 用 します 自 前 でやる 場 合 立 ち 上 げコスト 数 千 円 数 千 万 円 自 分 でやれ ばレンタルサーバ 代 金 だけで 出 来 るが 専 門 知 識 が 必 要 なため 一 般 的 には 制 作 会 社 に 依 頼 する 制 作 料 は EC サイトの 規 模 によるが 数 十 万 円 数 千 万 円 までさまざま 運 用 コスト 毎 月 の 運 用 にも 人 件 費 などのコストが 発 生 する EC サービスを 借 りる 場 合 どの 程 度 自 分 でやるのか 独 自 にお 店 をやるのか デパート 的 な 所 に 出 店 するのか 商 店 街 に 出 店 するのか などによって かかってくる 費 用 は 大 きく 異 なる 初 期 費 用 と 運 用 コストをよく 検 討 し 出 店 理 由 や 規 模 商 品 内 容 によって 出 店 先 を 考 えた 方 がよい 0 円 BASE https://thebase.in 数 千 円 カラーミーショップ http://shop-pro.jp 数 万 円 Amazon 委 託 販 売 Yahoo! ショッピング 10 万 円 程 度 楽 天 20 万 円 程 度 - 17 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Adobe Bridgeで 写 真 を 選 別 Illustrator ファ イル を 確 認 する に は JPEG などと 違 い 専 用 のソフトウェア 環 境 が 必 要 です Adobe Bridgeの 画 面 構 成 Adobe Bridgeを 使 用 すると JPEGなどの 一 般 的 な 画 像 ファイルはもちろん Illustrator 形 式 の 画 像 も 中 身 を 確 認 することが 可 能 になります 詳 細 なプレビュー 表 示 ディレクトリ 表 示 フォルダ 内 の 画 像 が 確 認 できる 撮 影 日 など その 画 像 の 属 性 を 表 示 写 真 の 選 別 ランク 付 け 画 像 を 確 認 しながら ランキングを 付 け 使 用 する 画 像 を 決 めていきます 撮 影 時 にはなるべく 多 く 撮 っておくと 最 終 的 に 使 える 画 像 も 多 くなります ランク 付 けした 後 は 必 要 なファイルを 移 動 やコピーをしたり 逆 に 不 要 なファ イルを 削 除 するなどします デジカメなどの 写 真 をパソコンに 取 り 込 みます 1) ディレクトリを 指 定 し 画 像 を 選 択 します 2) 使 えそうな 画 像 に をつけていきます 3) の 数 で 優 劣 をつけていき 最 終 的 に 使 用 する 画 像 を 決 めます 4) フィルターパネルで の 数 が 多 い 物 だけを 表 示 す ることもできます 5) 各 画 像 はダブルクリックでPhotoshopやIllustratorなど 対 応 したアプリケーションが 起 動 します の 数 などは 自 動 的 に 記 憶 してくれるので いつでも 選 択 作 業 にもどれます - 11 - Bridge は Photoshop や Illustrator をインストールする と 同 時 にインストールされています また Bridge 単 体 では 販 売 されていません Bridge が 用 意 できない 場 合 は フォルダーをアイコン 表 示 にするだけでも 充 分 です アイコン 表 示 で 確 認 し その 後 Photoshop で 開 けば 画 像 を 確 認 できます - 18 -
www.adobe-education.com/jp/ 参 考 DPI ipad3 9.7 インチ 2,048 1,536 ドット 解 像 度 264 dpi Nexus 10 画 面 の 大 きさと 画 像 の 解 像 度 10 インチ 解 像 度 2560 1600 ドット 1990 年 頃 のディスプレイは 解 像 度 が72dpi(dots per inch:ディーピーアイ)でした これは1インチ 解 像 度 300 dpi ( 約 2.54cm) 四 方 の 中 に72 72 個 のピクセル(ドット)がある 状 態 を 表 しています 現 在 のディスプレ イの 多 くは72dpiより 遙 かに 高 精 細 な 表 示 をしています DPI と PPI は 同 じ 単 位 と 考 えて 問 題 ありません 昔 のパソコン 72dpi 一 般 的 な 紙 の 印 刷 物 300~350dpi ipod Touch 5 326dpi( 縦 1136ピクセル 横 640ピクセル) dpiが 大 きくなると 文 字 を 同 じサイズで 表 示 しても 実 際 の 見 た 目 は 小 さくなります また 一 般 的 な 画 像 ファイルは 今 でも72dpiで 作 ります 画 面 サイズ ディスプレイにはいろいろなサイズがあります 自 分 が 制 作 しているWebサイトを 人 が 見 たとき どれく らいのサイズで 見 えているのかを 物 理 的 な 大 きさと 解 像 度 の 両 方 を 考 慮 する 必 要 があります 本 来 的 にはそれぞれのモニターの 特 性 にあわせたデザイン 表 現 を 考 えるべきなのですが 実 際 には 不 可 能 です どのくらいの 画 面 サイズを 基 準 に 制 作 すればよいか もしなにも 判 断 材 料 がないならXGA( 横 1024ピクセ ル 縦 768ピクセル)にしてみましょう これは2010 年 頃 に 市 販 された 最 低 スペックのノートパソコンの 画 面 サイズです この 画 面 サイズでWebブラウザを 画 面 いっぱいに 表 示 すると Webページの 横 幅 が940 ピクセル 程 度 になります これくらいで 作 っておくとiPhoneやiPadなどでも 問 題 なく 表 示 できます 1024ピクセル 960ピクセル 程 度 人 の 目 は 横 に2つついているため 大 型 のモニターは 横 長 がものが 見 やすく 手 で 持 つ 端 末 は 片 手 で 持 っ たり 立 ったままでの 操 作 のしやすから 縦 長 が 多 くなります どんな 画 面 サイズでも 重 要 なのは 意 匠 雰 囲 気 が 見 る 側 に 伝 わるようにすることです - 12 - Web ブラウザは 右 にスクロールバー 上 部 にツール バー 下 部 ステータス 領 域 などがあるので ディスプレ イのサイズより 少 し 小 さい 領 域 で 作 っておいた 方 が 多 くのユーザーにとって 快 適 な 表 示 になります - 19 -
電子商取引 EC サイト制作 指導書 画面のレイアウトを初期化する場合 は このメニューから をリセッ Adobe Photoshopで画像加工 ト を選ぶ Adobe Photoshopの画面構成 ツールパネル ドキュメントウィンドウ レイヤーパネル デジタルカメラで撮影した画像は そのままではWebサイトで使用するには大きすぎるため Photoshop で使用したいサイズに加工します 写真の一部分を切り抜いたり 色を調整することも可能です 他のAdobe製品と同様に パネルの位置や大きさなどは自由に調整できます Photoshop CS6 から画面が黒く なっています 以前のバージョン のように白っぽくしたい場合は Photoshop の起動に時間がかかる場合は 次の対策が有効です 再起動する Photoshop 以外のアプリケーションを終了する HDD SSD の空き容量を増やす メモリーを増設する また 一度の多くのドキュメントを開くと 処理が遅くなる場合が あります - 13 - - 20 - 環境設定 インターフェイスで 変更出来ます
www.adobe-education.com/jp/ ファイルを 開 く Adobe Bridgeから 選 別 した 画 像 を 開 くかます Photoshopから 直 接 開 きます ファイルメニュー > 開 く ダイアログの 見 た 目 は 各 OS の 設 定 によって 異 なります また 前 述 の Bridge か ら 右 ク リ ッ ク で Photoshop で 開 く を 選 択 するこ と 可 能 です - 14 - - 21 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Photoshop ヘルプ / ヘルプとチュートリアル http://helpx.adobe.com/jp/photoshop/topics.html Photoshop での 写 真 加 工 は Web 書 籍 など 参 考 文 献 が 豊 富 にあります 本 書 巻 末 のお 勧 め 書 籍 や Adobe の Web サイトなどをご 覧 ください ADOBE PHOTOSHOP MAGAZINE http://www.adobe.com/jp/joc/photoshop/photoshop/ 写 真 の 色 補 正 さまざまな 方 法 で 画 像 を 調 整 します 撮 影 時 に 少 し 暗 かった 画 像 や 明 るすぎた 画 像 赤 みがかった 画 像 なども Photoshopで 最 適 な 状 態 に 調 整 することができます レイヤーパネル 下 部 から 調 整 レイヤーを 追 加 します レベル 補 正 を 選 択 すると Photoshop を 触 ると いきなりフィ ルターメニューを 使 いたくなるのです が 撮 影 した 画 像 はまずレベル 調 整 などの 下 準 備 が 必 要 です 属 性 パネルが 開 きます まずは 自 動 補 正 ボタンを 押 してみましょう Photoshopが 最 適 な 明 るさに 自 動 調 整 してくれます 明 るすぎたり 暗 すぎたりする 場 合 は グラフの 下 にある 三 角 を 左 右 にドラッグして 調 整 します - 15 - - 22 -
www.adobe-education.com/jp/ 商 品 写 真 をより 美 味 しそうに 見 せる 仕 事 をレ タッチと 言 います レタッチはフォトグラファー がやることもあれば 専 門 のレタッチャーがい る 会 社 に 依 頼 することもあります 同 様 に 他 の 調 整 レイヤーも 使 ってみましょう トーンカーブ 色 相 彩 度 これらは 調 整 レイヤーは レイヤーパネルの 目 玉 マークをクリックすることで 表 示 非 表 示 を 切 り 替 えら れます いつでも 元 に 戻 すことが 出 来 るので いろいろと 試 してみましょう 通 常 は 調 整 レイヤーを 使 う 事 で 非 破 壊 編 集 をしま す イメージメニュー> 色 調 補 正 >レベル でも 同 じ 事 が 出 来 ますが この 場 合 は 画 像 自 体 に 変 更 を 加 えてしまうので 失 敗 した 場 合 に 元 に 戻 れません - 16 - Photoshop 超 基 本 のテクニック 7 http://www.mdn.co.jp/di/articles/553/ - 23 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 トリミング 画 像 の 中 から 必 要 な 部 分 を 切 り 抜 きます ツールパレットから 切 り 抜 きツールを 選 択 トリミングツールは Photoshop のバージョンによっ て 若 干 見 た 目 が 異 なります CS6 では 遠 近 法 に 基 づいた 切 り 抜 きも 出 来 るよう になっています ドラッグで 範 囲 を 指 定 して をクリックすると 切 り 抜 きが 実 行 されます ( 画 像 の 上 でダブルクリックでも 同 じ 操 作 になります ) - 17 - 切 り 抜 きを 失 敗 した 場 合 は すぐに 編 集 メニュー の 一 番 上 で 切 り 抜 きの 取 り 消 し を 選 択 します この 操 作 は 全 てに 置 いて 共 通 で UNDO(アンドゥ) といいます キ ーボードのショートカットは c t l +z です 非 常 によく 使 います - 24 -
www.adobe-education.com/jp/ 保 存 したら 画 面 を 閉 じます または 画 面 を 閉 じようとすると 保 存 するかの 選 択 になるので そこから 保 存 を 選 んでも 同 じです 保 存 出 来 上 がった 画 像 はPhotoshop 形 式 で 保 存 します このファイルは 後 でもう 一 度 画 像 を 変 更 する 時 に 必 要 になる 重 要 なファイルです ファイルメニューから 保 存 を 選 択 します チェックボックスはこのままで 解 りやすい 名 前 をつけて ファイル 形 式 はPhotoshopを 選 択 保 存 します ここでは 調 整 レイヤーを 使 っていますが イメージメニューからレベル 補 正 を 選 択 しても 同 じ 操 作 が 可 能 です ただし 直 接 画 像 を 加 工 してしまうので 試 行 錯 誤 の 自 由 度 が 下 がります - 18 - PSD 形 式 はレイヤーやガイドなど Photoshop 内 で 使 用 する 情 報 を 含 んだ Photoshop 専 用 のファイル 形 式 です 仕 様 が 一 部 公 開 されているので 他 のソフトで も 読 み 込 むことが 可 能 な 場 合 があります また 上 下 の 互 換 性 が 高 く Photoshop CS5 で 保 存 し たファイルを CS4 や CS6 で 開 くことが 可 能 です (サ ポートされていない 機 能 は 無 視 されます) - 25 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Illustrator 使 い 方 http://www.adobe.com/jp/support/illustrator/gettingstarted/index.html ADOBE TV http://tv.adobe.com/jp/product/illustrator/ Adobe Illustratorでロゴ 作 成 Adobe Illustratorの 画 面 構 成 ツールパネル さまざまなパネルがアイ コン 状 態 で 並 んでいる ドキュメントウィンドウ Illustratorを 使 って ロゴマークを 作 ってみましょう PhotoshopもIllustratorも 画 像 を 作 ったり 編 集 し たりするソフトウェアですが 扱 っている 画 像 の 考 え 方 が 大 きく 異 なっています ベクター 画 像 Photoshopは 色 の 点 々が 集 まったビットマップ 画 像 を 扱 っています デジカメの 画 像 やアイコンファイル など ほとんどの 画 像 ファイルがこのビットマップ 画 像 です パソコンや 携 帯 端 末 のディスプレイ 上 で 見 えているのは 全 てビットマップ 画 像 です ベクター 画 像 は Illustrator などに Illustratorはベクター 画 像 というファイルを 扱 います このファイルの 中 には 絵 の 描 き 方 を 指 示 する 式 が 代 表 される 線 や 塗 りの 情 報 の 集 合 体 です ベクター 画 像 内 の 情 報 は 画 面 表 示 時 や 印 刷 時 に 最 適 なビットマップ 画 像 書 かれていて 大 きく 表 示 しても 小 さく 表 示 しても 画 像 が 荒 れない 特 性 があります に 解 釈 されて 表 示 されいます その 音 楽 でいうと 楽 譜 場 (ベクター で 計 算 画 して 像 )とCD(ビットマップ 表 示 するので 画 像 綺 )のようなものです 麗 な 反 面 表 示 に 負 荷 がかかります SVG(Scalable Vector Graphics) SVG ファイル 自 体 はテキストファイルで フォーマットは XML です これをブラウザがその 場 で 解 釈 して 表 示 します 拡 大 縮 小 しても 美 しく Illustrator などで 作 成 できます 固 定 の 画 像 というよりは その 場 で 生 成 される 図 などの 可 変 表 現 に 向 いています CSS3(Cascading Style Sheets) 画 像 フォーマットではないのですが CSS3 では 好 きなフォントを 表 示 したり 文 章 を 角 丸 の 四 角 で 囲 んだり 奥 行 きの ある 形 に 変 形 させたりが 可 能 です - 19 - 多 くの Web ブラウザでは Web ページ 自 体 を 拡 大 縮 小 して 表 示 することが 可 能 です 小 さい 文 字 が 読 みにくい 時 に 文 字 サイズを 大 きくして 表 示 したいという 需 要 は 今 後 も 減 ることはないでしょう 様 々なディスプレイのサイズ 解 像 度 が 増 えてくる 中 で なるべく 多 くの 人 に 制 作 者 の 意 図 通 りの 文 字 と 画 像 のバランスを 提 供 したいものです スケーラブル( 可 変 長 )な Web サイトを 制 作 するには ビットマップ 画 像 ではなく CSS での 処 理 やベクター 形 式 の 画 像 を 多 用 するのも 一 つの 方 法 です - 26 -
www.adobe-education.com/jp/ ここでは Illustrator をロゴマークの 制 作 に 使 っていますが 最 近 では Web サイトのデザイン 全 体 を Illustrator のようにベクター 画 像 を 扱 えるソフトウェアで 作 る 機 会 が 増 えています 解 像 度 に 依 存 しないグラフィックスとして 小 さなディスプレイから 印 刷 物 まで 幅 広 く 使 われています 新 規 ドキュメント 作 成 ファイルメニュー > 新 規 新 規 ドキュメントを 作 成 します プロファイルはWebを 選 択 し 単 位 がピクセルになっていることを 確 認 しましょう サイズは 初 期 設 定 から 変 更 しても 大 丈 夫 です ディスプレイにあわせて 使 いやすいサイズを 指 定 します 印 刷 物 を 作 るときは ミリメートル などを 選 択 します Illustrator Help / 図 解 で 覚 える 基 本 操 作 一 覧 http://helpx.adobe.com/jp/illustrator/kb/225251.html - 20 - - 27 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 文 字 入 力 とアウトライン 化 なにもない 状 態 からいきなりロゴマークを 作 るのは 難 しいので 文 字 を 元 にして 作 ってみましょう ツールパネルから 文 字 ツールを 選 択 アウトライン 化 する 前 の 文 字 は 何 度 でも 打 ち 替 えられます 文 字 の 間 隔 フォント 大 きさなども 自 由 に 変 更 できます この 文 字 に 対 する 加 工 も Illustrator の 得 意 分 野 です ドキュメント 上 のどこかでクリックし ロゴマークの 元 にしたい 文 字 列 を 入 力 文 字 が 選 択 されている 状 態 で フォントや 文 字 サイズが 変 更 できます 文 字 が 決 まったら ツールパネルで 選 択 ツール( 左 上 の 普 通 の 矢 印 何 か 操 作 をした 後 このツールに 戻 しておくようにします)を 選 択 し 書 式 メニューからアウトラインを 作 成 を 選 択 します これで 文 字 が 絵 に 変 わりました - 21 - Illustrator では 図 形 はすべてパスで 描 画 しています 文 字 をアウトライン 化 することで 文 字 を 図 形 に 変 換 しています - 28 -
www.adobe-education.com/jp/ オブジェクトの 周 りにあるのがバウンディングボックスです 上 下 左 右 の 四 角 を 動 かすことで 拡 大 縮 小 や 回 転 が 可 能 です バウンディングボックス 自 体 を 表 示 させなくするには 表 示 メ ニュー>バウンディングボックスを 隠 す を 選 びます パスの 加 工 文 字 は 全 体 で1つのグループになっています 一 文 字 ずつ 色 を 変 えたい 場 合 などはグループを 解 除 し 1 文 字 ずつ 変 更 できるようにします オブジェクトメニュー >グループ 解 除 この 状 態 になれば 1 文 字 ずつ 色 や 形 を 変 えていくことが 可 能 です ペンツールや 長 方 形 ツールなどで 何 か 図 形 を 書 くと 四 角 い 点 はアンカーポイントといい Illustratorではこのアンカーポイントを 増 やしていきながら 間 の 線 を 描 き 色 を 付 けて 絵 を 作 っていきます パスが 生 成 されます パスが 描 かれるときに アンカー ポイントは 意 識 することなく 増 えていきます また 意 図 的 にパス 上 にアンカーポイントを 増 やす 場 合 はペンツールを 使 って パス 上 をクリックします 青 い 点 をアンカーポイントといいます アンカーポイントとアンカーポイントを 結 ぶ 線 全 体 をパス 3 点 以 上 の 点 で 閉 じたパスをクローズパスといいます Illustrator の 内 部 では 図 形 をアンカーポイントの 座 標 とその 間 をつなぐ 線 の 角 度 で 保 持 しています - 22 - Learn Illustrator CS5 製 品 エキスパートによる Illustrator CS5 の 基 本 操 作 と 新 機 能 を 学 ぶためのチュートリアルです http://tv.adobe.com/jp/show/learn-illustrator-cs5/ - 29 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 色 には 線 の 色 と 塗 りの 着 色 色 の 2 種 類 があります それぞれの 文 字 に 好 きな 色 を 指 定 してみましょう ツールパネル 下 部 の 塗 りをダブルクリック カラーピッカーが 表 示 されるので 色 をクリックし 選 択 します OKボタンをクリックすると 色 が 塗 られます 色 の 選 択 方 法 は 他 にもいろいろあります ウィンドーメニューからカラーパネルやグラデーションパネル などを 出 して 塗 り 替 えてみましょう 選 択 しているオブジェクト 単 位 で 色 が 変 わります 複 数 のオブジェクトを 選 択 しておけば 一 気 に 変 更 することができます 単 色 と 同 様 にパターンやグラデーションも 利 用 できます - 23 - - 30 -
www.adobe-education.com/jp/ ペンツールや 多 角 形 ツールなど 直 感 的 に 図 形 を 描 画 できるツー ルがあるので それらを 使 って 絵 を 描 いてみましょう 保 存 出 来 上 がったファイルを 保 存 します 適 切 な 名 前 を 付 けて 保 存 しましょう アウトライン 化 した 図 形 は アンカーポイントを 編 集 す ることで 変 形 させられます ファイルメニュー > 保 存 ファイルを 古 いバージョンの Illustrator で 開 く 必 要 がある 場 合 は このプルダウンからバージョンを 選 択 します Photoshop と 違 い 上 位 互 換 性 しかありません 保 存 ボタンを 押 した 後 に オプション 画 面 が 表 示 されます 通 常 はそのままで 大 丈 夫 なので もう 一 度 OK を 押 します - 24 - - 31 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 参 考 資 料 サイトマップの 例 サイトマップ や 画 面 構 成 ワイアーフレ ームを 描 く 方 法 は PowerPoint や Illustrator 手 書 きなどいろいろあります チームで 制 作 する 際 には 完 成 のイメー ジを 共 有 できるように 相 手 に 伝 わる 資 料 であることが 重 要 です - 32 -
www.adobe-education.com/jp/ 参 考 資 料 ワイアーフレームの 例 うみそら 雑 貨 店 ( ) カート (?) お 問 い 合 わせ ホーム > T シャツ > オーガニックコットン T シャツ オーガニックコットン T シャツ photo 商 品 説 明 文 が 入 る あいうえ 05 かき くけ 10 あいうえ 05 かきくけ 10 あい うえ 05 かきくけ 10 あいうえ 05 かき くけ 10 あいうえ 05 かきくけ 10 あい うえ 05 かきくけ 10 あいうえ 05 かき くけ 10 あいうえ 05 かきくけ 10 あい うえ 05 かきくけ 10 販 売 価 格 6,700 円 ( 税 込 ) 色 赤 数 99 カートに 入 れる 商 品 の 仕 様 型 番 :***-*** ここの 商 品 の 使 用 に 関 する 記 述 を 入 れる あいうえ 05 かきくけ 10 あいう え 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あい うえ 05 かきくけ 10 photo photo photo お 客 様 の 声 コメントタイトル yyyy/mm/dd By ID さん 商 品 に 対 するお 客 さんからのコメント あいうえ 05 かきく け 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あ いうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 コメントタイトル yyyy/mm/dd By ID さん 商 品 に 対 するお 客 さんからのコメント あいうえ 05 かきく け 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あ いうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 特 定 商 取 引 法 に 基 づく 表 記 支 払 方 法 について 配 送 方 法 送 料 について プライバシーポリシー Illustrator や Fireworks InDesign など 複 数 の 画 面 サイズに 対 応 したソ フトウェアを 使 用 する 場 合 とレイアウトを 検 討 するときに 便 利 です copyright うみそら 雑 貨 店 - 33 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Adobe Photoshopでデザインカンプを 作 る 新 規 ドキュメント 作 成 ワイアーフレームをもとにWebページのできあがりを 想 定 して Photoshopのドキュメント 上 でレイアウ トを 作 ります 幅 と 高 さはもっと 大 きくても 問 題 ありません 使 用 している PC の 環 境 によって 適 宜 変 更 してください 解 像 度 は 72 カラーモードは RGB を 選 んでください カラーモードの CMYK は 印 刷 会 社 に 印 刷 依 頼 する 場 合 に 使 用 します 学 校 で 使 用 する 場 合 はすべて RGB で 問 題 ありません - 25 - - 34 -
www.adobe-education.com/jp/ 画 像 の 配 置 配 置 は 元 のファイルにリンクするのではな く Photoshopファイルの 中 に 取 り 込 んで います 写 真 やIllustratorで 作 ったロゴなどを 配 置 します 配 置 すると スマートオブジェクト になり 何 度 で も 大 きさや 位 置 を 変 更 することが 可 能 になります Illustratorの 画 像 を 指 定 すると ダイアログが 表 示 され OK をクリックします 位 置 や 大 きさを 決 めたら 右 上 の 確 定 ボタンをクリックします 同 様 に 写 真 や 他 の 画 像 も 配 置 します スマートオブジェクトでは Illustrator のファイルも 同 様 に 扱 えます Photoshop 内 に 取 り 込 まれた Illustrator ファイルはスマートオブ ジェクトになるので レイヤーパネルで 右 クリックし コンテンツの 編 集 を 選 択 することで Illustrator が 起 動 し 再 度 編 集 すること ができます 1 つの Photoshop ファイルに 複 数 の 素 材 を 統 合 する 方 法 は 他 にも 色 々ありますが ここでは - 26 - 配 置 を 選 んでいます これは 配 置 する ことで 確 実 にスマートオブジェクトが 作 れるためです スマートオ ブジェクトにすることで 拡 大 縮 小 や 回 転 しても 画 像 が 荒 れなくな るので レイアウトの 試 行 錯 誤 に 向 いています スマートオブジェクトを 使 用 すると 元 の 大 きな 画 像 を 内 部 的 に 保 持 しているので 保 存 するときのファイルサイズが 大 きくなります - 35 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 ドラッグせずにクリックすると 段 落 ではなく 普 通 の 1 行 テキストになります テキストの 配 置 ツールパネルからテキストツールを 選 択 し ドキュメント 上 で 左 上 から 右 下 に 向 かってドラッグします テキストボックスが 作 成 されるので 文 字 を 入 力 するか メモ 帳 などから 文 字 列 をペーストします メイリオ フォントは Windows の 標 準 フォントです Internet Explorer で Web サイトを 表 示 する 際 に 使 用 さ れています Photoshop 上 の 文 字 を HTML 化 する 際 に 画 像 として 扱 うか テキストとして 扱 うかを 考 えながら 作 業 し ます 慣 習 としてテキストとして 扱 いたい 部 分 はメイリオを 指 定 しておきます もちろんロゴマークなども Photoshop で 作 ることが 出 来 ま すが 文 字 や 図 形 以 外 の 扱 いはビットマップなので 拡 大 縮 小 や 回 転 時 に 画 像 が 劣 化 します - 27 - - 36 -
www.adobe-education.com/jp/ ワイアーフレームの 要 素 をドキュメントに 配 置 していきます 実 際 にWebブラウザで 表 示 された 際 に ど のような 見 え 方 をするのか 目 立 たせたい 部 分 はどう 扱 うべきかなどを 考 えながら レイアウトや 色 使 い を 考 えていきましょう sample.psd では html/final/ の 見 た 目 を 作 ってあります レイアウトはいくらでも 簡 略 化 できます - 28 - - 37 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 レイヤーの 概 念 は 他 のソフトウェアでも 頻 繁 に 登 場 します 画 面 の 奥 から 手 前 に 重 ねていく 感 覚 をつかんでください レイヤー 構 造 Photoshopは 高 度 なレイヤー 構 造 を 持 っています 階 層 化 したり 調 整 レイヤーやマスク 処 理 などを 多 用 することで さまざまな 画 像 加 工 が 可 能 になります グループ 画 面 手 前 レイヤー 効 果 スマートオブジェクト テキストレイヤー 背 景 レイヤー 画 面 奥 新 規 グループ 作 成 新 規 レイヤー 作 成 - 29 - - 38 -
www.adobe-education.com/jp/ 背 景 は 特 殊 なレイヤーです 非 表 示 にすると チェックボー ドが 現 れます このチェックボードは 実 際 には 存 在 せず 透 明 な 状 態 を 表 しています スライス 指 定 レイアウトしたPhotoshopファイルから 画 像 として 必 要 な 部 分 を 切 り 出 します ツールパネルからスライスツールで 使 用 する 部 分 を 指 定 します レイヤーパネルで 背 景 を 非 表 示 にしておくと 透 明 を 表 すチェック 柄 が 表 示 されます Web 用 に 保 存 ファイルメニュー >Web 用 に 保 存 右 上 のプリセットから PNG 24 を 選 択 します スライス 指 定 した 部 分 が 複 数 ある 場 合 は この 指 定 を 繰 り 返 します 2アップ 表 示 にしていると 元 の 画 像 と 見 比 べながら 作 業 ができます いろいろな 圧 縮 形 式 を 試 してみましょう 画 質 を 調 整 し なるべくファイル 容 量 が 小 さくなるようにし ます - 30 - - 39 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Wiki ファイル 名 http://ja.wikipedia.org/wiki/ ファイル 名 これ 以 降 ファイル 名 は 半 角 小 文 字 の 英 数 字 でつけてください 半 角 スペースも 含 め 記 号 はハイフン - とアンダースコア _ 以 外 は 使 用 しないようにします OS や 環 境 によってはそれ 以 外 の 文 字 日 本 語 も 使 えますが 一 般 的 には 上 記 条 件 でファイル 名 を 付 けておくのが 無 難 です 保 存 場 所 を 指 定 し 名 前 をつけて 保 存 すると 画 像 がWebページで 使 用 できる 状 態 で 保 存 されました Webサイトでよく 使 われる 画 像 形 式 Windowsでよく 使 われるBMP 形 式 や PhotoshopのPSD 形 式 などは Webサイトでの 表 示 には 不 向 きで す さまざまな 環 境 から 閲 覧 される 可 能 性 のあるWebサイトでは 以 下 のような 画 像 形 式 (ビットマッ プ)を 使 用 します アイコン 拡 張 子 用 途 特 徴.png 写 真 アイ コン 図 ふわっと 透 過 できる(アルファチャネル 対 応 ).jpg /.jpeg 写 真 多 くの 場 合 一 番 ファイルが 小 さくなる 透 過 できない.gif アイコン 図 256 色 までしか 扱 えない 簡 単 にアニメー ションできる 透 過 できる JPEG(Joint Photographic Experts Group:ジェイペグ) 非 可 逆 圧 縮 フルカラー 対 応 透 過 処 理 は 不 可 GIF(Graphics Interchange Format:グラフィックス インターチェンジ フォーマット) 可 逆 圧 縮 アニメーション 対 応 最 大 256 色 透 過 可 能 PNG(Portable Network Graphics:ポータブル ネットワーク グラフィックス) 可 逆 圧 縮 フルカラー 対 応 アルファチャネル 透 過 対 応 - 31 - PNG 形 式 は 影 や 半 透 明 などの 表 現 も 可 能 な 万 能 選 手 で 画 像 はだいたい PNG にしちゃえば 大 丈 夫 です ただし 古 いブラウザでうまく 表 示 できない 場 合 や JPEG に 比 べてファイルサイズが 大 きくなる 場 合 もあり ます とりあえず 四 角 い 写 真 は JPEG で それ 以 外 は PNG でと 覚 えておくとよいでしょう - 40 -
www.adobe-education.com/jp/ Web 標 準 という 概 念 Web 標 準 に 準 拠 するという 言 い 方 をしますが インターネットの 技 術 を 標 準 化 する 団 体 が 勧 告 しているルール に お 互 いに 従 いましょうという 意 味 です W3C(World Wide Web Consortium ワールド ワイド ウェブ コンソーシアム)という 団 体 があります ここが WWW に 関 連 するさまざな 規 格 を 勧 告 (Recommendation) しています 勧 告 であって 決 定 では ないところがポイントです 同 様 の 団 体 に IETF(The Internet Engineering Task Force:インターネット 技 術 タ スクフォース)や WHATWG(Web Hypertext Application Technology Working Group:ウェブ ハイパーテ キスト アプリケーション テクノロジー ワーキング グループ)などがあり お 互 いに 協 力 関 係 にあります そもそも HTML や CSS をはじめとする Web の 様 々な 規 格 は どこかの 会 社 が 決 めているのではなく みん なで 意 見 をだしあって W3C というところで 集 約 して お 知 らせするという 手 順 で 進 んでいきます W3C から の W3C recommendation や IETF からの RFC(Request for Comments)という 形 で 事 実 上 の 仕 様 として 勧 告 されます ただし W3C や IETF が 行 うのはあくまでも 規 格 の 策 定 と 発 表 であり Web ブラウザ 制 作 会 社 や Web サーバ 制 作 会 社 Web サイト 制 作 者 など インターネットに 関 わる 全 ての 人 に 対 してなにも 拘 束 力 はありません しかし ソフトウェアメーカー ハードウェアメーカー クリエイターなど インターネットに 関 わる 全 員 がこの 勧 告 に 添 う 事 によって 各 種 言 語 の 解 釈 に 共 通 性 が 生 まれ インターネットという 大 きな 枠 組 みの 秩 序 が 成 立 しています 過 去 に マイクロソフトなどの Web ブラウザメーカーが 自 社 の Web ブラウザでしか 解 釈 できない 独 自 のタ グを 実 装 したり Web クリエイターがテーブルタグで 無 理 矢 理 なデザインを 組 んだりし 秩 序 を 乱 してしまっ た 時 期 がありました そこで みんなでもっと Web 標 準 を 大 切 にしていこうという 流 れがおこり Web 制 作 者 の 意 識 も 変 化 し マイクロソフトなども Web ブラウザの 開 発 方 針 を 見 直 してきました Web 標 準 に 準 拠 することで 年 配 者 や 障 害 者 へ 配 慮 した Web サイトの 制 作 が 自 然 と 可 能 になります 逆 の 言 い 方 をすると 文 字 を 拡 大 縮 小 できる Web ブラウザや 音 声 Web ブラウザや 点 字 ディスプレイなどの 障 害 者 向 け 機 器 も Web 標 準 への 準 拠 を 計 っているため なるべく 正 しく 作 れば なるべく 多 くの 人 に 情 報 を 提 供 できるという 好 循 環 が 生 まれます 特 に 公 共 機 関 の Web サイトなど で は WCAG 2.0(Web Content Accessibility Guidelines 2.0) や JIS X 8341-3 といった Web アクセビリティーに 関 するルールに 準 拠 することが 求 められています すでに 日 本 人 は 2 人 に 1 人 が 近 視 4 人 に 1 人 が 高 齢 者 6 人 に 1 人 が 色 弱 です アクセシビリティーに 配 慮 した Web サイト 制 作 というのは 特 別 な 事 ではなく これからの 時 代 は 当 たり 前 の 知 識 としてとらえておくべ きでしょう - 41 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Dreamweaver デベロッパーセンター http://www.adobe.com/jp/devnet/dreamweaver.html Adobe DreamweaverでWebページ 作 成 Adobe Dreamweaverの 画 面 構 成 ドキュメントウィンドウ コードビュー デザインビュー プロパティパネル 加 工 した 写 真 画 像 やロゴを 組 み 合 わせて ECサイトの 詳 細 画 面 をつくってみましょう HTMLファイルを 作 る 文 章 ファイルをコンピューターが 意 味 を 理 解 できるようにしたものがHTMLです 見 出 しや 箇 条 書 きにあ たる 部 分 強 調 したい 部 分 などをタグで 囲 っていきます このタグをつけていく 作 業 をマークアップとい います 写 真 など 意 味 のある 画 像 もタグで 入 れていきます 画 面 外 の 要 素 としては<title>タグなども 重 要 です そのページに 何 が 書 かれているのか 端 的 に 表 した 題 名 を 書 いておきます Dreamweaver は Web サイトや HTML の IDE( 統 合 開 発 環 境 )です 素 材 を 配 置 すると 自 動 的 に HTML や CSS を 書 いてくれるわけではありま せん( 一 部 自 動 的 に 生 成 される 機 能 もあります) あくまで それらの 言 語 を 理 解 している 人 に 対 しての 作 業 効 率 化 支 援 ソフトウェアです HTML や CSS などはテキストファイルなので メモ 帳 などのテキストエディタ でも 作 成 編 集 は 可 能 です - 32 - Adobe Muse http://www.adobe.com/jp/products/muse.html ホームページビルダーのように HTML などのコードを 書 くことなく Web サイトを 制 作 できる Adobe Muse な どのツールもあります - 42 -
www.adobe-education.com/jp/ この Dreamweaver のテンプレート 機 能 を 使 うと さまざまなレイア ウトを 容 易 に 作 ることが 可 能 です 新 規 ドキュメント 作 成 ファイルメニュー > 新 規 > 空 白 ページ レイアウトは<なし> ドキュメントタイプはHTML5を 選 択 し 作 成 をクリックします 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 無 題 ドキュメント</title> 6 </head> 7 8 <body> 9 </body> 10 </html> 11 1 行 目 はこの 書 類 が html であることの 宣 言 文 2 10 行 目 が html 本 体 3 6 行 目 が head 領 域 Webブラウザ 上 では 表 示 されないが さまざまな 情 報 が 書 かれている 8 9 行 目 が body 領 域 Web ブラウザで 画 面 に 表 示 される 部 分 コードビューに 上 記 のように 書 かれていれば HTMLを 記 述 する 準 備 が 出 来 た 状 態 です HTML には 大 きく 分 けて 4 世 代 あります HTML3 4 が 主 流 だった 頃 は HTML を 拡 大 解 釈 し 文 章 の 構 造 だけでなく ビジュアルデザインも HTMLで 作 っていまし た HTML4 の 頃 から CSS( カスケーディングスタイルシート 後 述 ) が 使 われ 始 め 文 章 構 造 とビジュアルデザインを - 33 - 分 離 するようになりました そして XHTMLでは HTML は 意 味 づけ CSS はビジュアルデザインという 棲 み 分 けで 制 作 しています ところが XHTML は HTML より 厳 密 なマークアップを 制 作 者 に 求 めたり XHTML の 後 に XML(eXtensible Markup Language) への 移 行 を 目 的 としていたために かなり 窮 屈 な 言 語 になってしまいました そこで もう 一 度 原 点 に 立 ち 返 り Web の 表 層 のための 言 語 して HTML を 次 期 バー ジョンへ 育 てることになりました これが 現 在 使 われている HTML5 です 本 テキス トも HTML5 で 書 かれています 保 存 されていないドキュメント: 1/1-43 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 この 赤 やオレンジの 枠 で 考 えていくことをボックスモデルといい 後 述 す る CSS の 重 要 な 考 え 方 の 1 つです HTMLではこのボックスを <div> や <header> などのタグで 指 定 します これらのタグは 入 れ 子 構 造 で 表 現 されます それぞれの 部 品 を 入 れる 枠 組 みを 作 ります 上 図 の 赤 い 枠 とオレンジの 枠 です あわせて このページ 自 体 の 題 名 を<title>にいれておきましょう 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>オーガニックコットンtシャツ うみそら 雑 貨 店 </title> 6 </head> 7 <body> 8 <header> 9 10 </header> 11 12 <div class="mod-multicolumn"> 13 <div class="cola"> 14 a 15 </div> 16 <div class="colb"> 17 b 18 </div> 19 </div> 20 <footer> 21 22 </footer> 23 </body> 24 </html> 25-34 - <header> と <footer> は HTML5 のタグ です な んらかの 事 情 で XHTML など 下 位 バージョンで 表 記 する 必 要 がある 場 合 は すべて<div> で 書 き 換 えてください - 44 -
www.adobe-education.com/jp/ デザインビューとコードビューは 同 期 しています 同 じファイルを 表 示 しているので どちら 側 で 編 集 しても 同 じです 1 <!doctype html> 2 <html> 3 Wordやメモ 帳 などから 原 稿 をコピーし <head> 4 デザインビューで <meta charset="utf-8"> 目 印 に 書 いておいた b を 選 択 し テキストをペースとします 5 <title>オーガニックコットンtシャツ うみそら 雑 貨 店 </title> 6 </head> 7 <body> 8 <header> 9 10 </header> 11 12 <div class="mod-multicolumn"> 13 <div class="cola"> 14 a 15 </div> 16 <div class="colb"> 17 <p> 地 球 と 肌 に 優 しい オーガニックコットンを 使 ったTシャツです 柔 らかい 着 心 地 を ホワイト チョコレート モスグリーンの3 色 からお 選 びください 日 本 サイズでXSとSの2サイズ をご 用 意 しました <br> 18 海 外 の 有 機 農 家 の 手 で 大 切 に 育 てられた 原 綿 を 輸 入 し 日 本 国 内 で 環 境 にやさしい 方 法 で 紡 いでいます オーガニックコットンの 持 つナチュラル 感 に 合 わせて 少 し 細 身 でシルエット もスタイリッシュに 仕 上 げてあります </p> 19 <p>s( 肩 幅 : 約 42cm 着 丈 : 約 64cm)<br> 20 XS( 肩 幅 : 約 36cm 着 丈 : 約 61cm)<br> 21 製 品 は 米 国 サイズを 基 準 に 作 られておりますので XS Sサイズのみで 販 売 いたしてお ります ( 普 段 よりワンサイズ 小 さめをおすすめいたします)</p> 22 <p> 製 品 の 性 質 上 お 洗 濯 時 に 若 干 の 縮 みや 色 落 ちが 発 生 します </p> 23 <p> 販 売 価 格 6,700 円 ( 税 込 )</p> 24 </div> 25 </div> 26 <footer> 27 28 </footer> 29 </body> 30 </html> 31 コードビュー 側 では このように<p>タグがついた 状 態 になっています デザインビュー 側 にペーストすると 改 行 情 報 などもタグに 置 き 換 わります <br> がその 場 で 改 行 です このタグには 閉 じタグがありません <p> で 囲 まれた 場 所 は 段 落 表 現 です MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1-35 - Adobe Dreamweaver デベロッパーセンター 第 2 回 文 字 原 稿 の 追 加 はデザインビューを 使 えば 効 率 アップ http://www.adobe.com/jp/devnet/dreamweaver/articles/dw_getting_started_02.html - 45 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 箇 条 書 きとして 表 現 したい 場 所 を 選 択 し プロパティパネルからリストを 選 択 同 様 に 金 額 の 部 分 を 選 択 して 強 調 を 選 択 します デザインビューとコードビュー お 互 い の 編 集 結 果 を 反 映 するには F5 キー を 押 すか ファイルを 保 存 します 太 字 や 斜 体 など ワンクリックで 反 映 されます - 36 - - 46 -
www.adobe-education.com/jp/ HTMLファイルの 保 存 フォルダは 予 め 作 ってあっても 問 題 ありません フォルダ 名 も 半 角 英 数 字 でつけましょう ここで 一 度 保 存 します フォルダを 作 って その 中 に 保 存 しておきましょう ファイル 名 は index.html が 一 般 的 ですが 特 に 決 まりはありません index.html は 特 殊 なファイル 名 でフォルダの 中 に 複 数 の HTML ファイルがある 際 に 優 先 的 に 表 示 されます - 37 - - 47 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 HTML ファイルと 画 像 ファイルが 違 うフォルダに 入 っていると パス( 階 層 構 造 )を 考 慮 する 必 要 があります ここでは 説 明 を 簡 単 にするために あえて HTML と 同 じフォルダに 画 像 を 入 れます 画 像 の 挿 入 前 に 作 った 商 品 写 真 やロゴなどの 画 像 を 同 じディレクトリに 移 動 します その 画 像 をDreamweaverのデザインビューの a と 書 いてある 部 分 を 目 標 にドラッグアンドドロップ します この 操 作 が 難 しい 場 合 は 挿 入 メニューからイメージ を 選 択 し ファイル 指 定 ダイアログで 該 当 する 画 像 ファ イルを 選 択 します ダイアログが 出 たらOKをクリックし デザインビューに 画 像 が 入 ったら プロパティパネルの 幅 を320と 入 力 します アクセシビリティダイアログは そのまま OK を 押 してスキッ - 38 - プしても 問 題 ありません もし 画 像 を 表 示 できない 場 合 に 代 わりに 表 示 する 文 字 を 書 いておく 項 目 で 必 要 であれば 後 から 別 途 記 述 することができます Adobe Dreamweaver デベロッパーセンター 第 4 回 画 像 挿 入 は Dreamweaver にまるっとおまかせ http://www.adobe.com/jp/devnet/dreamweaver/articles/dw_getting_started_04.html - 48 -
www.adobe-education.com/jp/ 目 印 の a や b は 後 からロゴマークなどの 画 像 を 挿 入 しやすいように 目 に 見 える 目 標 物 として 入 れてあります ロゴマークなど 他 の 画 像 もドラッグアンドドロップによる 操 作 が 難 し い 場 合 は 挿 入 メニューから 選 択 してください 同 様 にロゴ 画 像 もドラッグアンドドロップします 目 印 に 入 れておいた a や b などは 削 除 します 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>オーガニックコットンtシャツ うみそら 雑 貨 店 </title> 6 </head> 7 <body> 8 <header> 9 <img src="logo.png" width="320" height="98"> 10 </header> 11 12 <div class="mod-multicolumn"> 13 <div class="cola"> 14 <img src="img_p1.jpg" width="320" height="200"></div> 15 <div class="colb"> 16 <p> 地 球 と 肌 に 優 しい オーガニックコットンを 使 ったTシャツです 柔 らかい 着 心 地 を ホワイト チョコレート モスグリーンの3 色 からお 選 びください 日 本 サイズでXSとSの2サイズ をご 用 意 しました <br> 17 海 外 の 有 機 農 家 の 手 で 大 切 に 育 てられた 原 綿 を 輸 入 し 日 本 国 内 で 環 境 にやさしい 方 法 で 紡 いでいます オーガニックコットンの 持 つナチュラル 感 に 合 わせて 少 し 細 身 でシルエットも スタイリッシュに 仕 上 げてあります </p> 18 <ul> 19 <li>s( 肩 幅 : 約 42cm 着 丈 : 約 64cm)</li> 20 <li>xs( 肩 幅 : 約 36cm 着 丈 : 約 61cm)</li> 21 </ul> 22 <p> 製 品 は 米 国 サイズを 基 準 に 作 られておりますので XS Sサイズのみで 販 売 いたして おります ( 普 段 よりワンサイズ 小 さめをおすすめいたします)</p> 23 <p> 製 品 の 性 質 上 お 洗 濯 時 に 若 干 の 縮 みや 色 落 ちが 発 生 します </p> 24 <p><strong> 販 売 価 格 6,700 円 ( 税 込 )</strong></p> 25 </div> 26 </div> 27 <footer> 28 29 </footer> 30 </body> 31 </html> 32 ここまでで このようなコードになりました - 39 - MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1-49 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 フォームとは アンケートやログイン 住 所 の 入 力 など Web ページを 見 ている 人 からの 情 報 を 取 得 するとても 大 切 な 仕 組 みです EC サイトのみならず Web ページを 介 して 双 方 向 (お 店 とお 客 さんなど) で 情 報 をやりとりをする 重 要 な 技 術 です フォーム 要 素 の 追 加 WebページからWebサーバに 向 けて 白 色 を2 枚 買 いたい などの 情 報 を 伝 えることで ショッピング カートなどのシステムはなりなっています 挿 入 メニュー >フォーム > 選 択 (リスト/メニュー) このダイアログでは <input> など 本 来 は <form> タグの 内 側 にしか 存 在 しないタグを 追 加 する 場 合 に その 外 側 に <form> タグを 自 動 的 に 追 加 してくれます ダイアログが 表 示 されたら それぞれ OK や はい をクリックすると フォーム 部 品 が 挿 入 されます デザインビューで 選 択 し プロパティパネルの リスト 値 をクリック プルダウンメニューの 作 り 方 です 見 えて い る 方 が 項 目 ラ ベ ル 内 部 の デ ー タ が 値 です 値 はユーザには 見 えません + を 押 すと 項 目 数 が 増 えます ラベルや 値 を 上 記 のように 入 力 し OK をクリックします - 40 - - 50 -
www.adobe-education.com/jp/ ショッピングカートに 入 れるボタンの 作 成 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 挿 <title>オーガニックコットンtシャツ 入 メニュー >フォーム >ボタン うみそら 雑 貨 店 </title> 6 </head> 7 <body> 8 <header> 9 <img src="logo.png" width="320" height="98"> 10 </header> 11 12 <div class="mod-multicolumn"> 13 <div class="cola"> 14 <img src="img_p1.jpg" width="320" height="200"></div> 15 <div class="colb"> 16 送 信 ボタンが 追 加 されます <p> 地 球 と 肌 に 優 しい オーガニックコットンを 使 ったTシャツです 柔 らかい 着 心 地 を ボタンを ホワイト チョコレート モスグリーンの3 選 択 し プロパティパネルの 値 に ショッピングカートに 色 からお 選 びください 入 れる と 日 本 入 サイズでXSとSの2サイズ 力 します をご 用 意 しました <br> 17 ここまでで このようなコードになりました 海 外 の 有 機 農 家 の 手 で 大 切 に 育 てられた 原 綿 を 輸 入 し 日 本 国 内 で 環 境 にやさしい 方 法 で 紡 いでいます オーガニックコットンの 持 つナチュラル 感 に 合 わせて 少 し 細 身 でシルエットも スタイリッシュに 仕 上 げてあります </p> 18 <ul> 19 <li>s( 肩 幅 : 約 42cm 着 丈 : 約 64cm)</li> 20 <li>xs( 肩 幅 : 約 36cm 着 丈 : 約 61cm)</li> 21 </ul> 22 <p> 製 品 は 米 国 サイズを 基 準 に 作 られておりますので XS Sサイズのみで 販 売 いたして おります ( 普 段 よりワンサイズ 小 さめをおすすめいたします)</p> 23 <p> 製 品 の 性 質 上 お 洗 濯 時 に 若 干 の 縮 みや 色 落 ちが 発 生 します </p> 24 <p><strong> 販 売 価 格 6,700 円 ( 税 込 )</strong></p> 25 <form method="post" action=""> 26 <select> 27 <option value="" selected="selected"> 色 を 選 択 してください</option> 28 <option value="ホワイト">ホワイト</option> 29 <option value="ブラウン">ブラウン</option> 30 <option value="グリーン">グリーン</option> 31 </select> 32 を 記 入 します <input type="submit" value="ショッピングカートに 入 れる"> 33 </form> 34 </div> 35 </div> 36 <footer> 37 38 </footer> 39 </body> 40 </html> 41 最 終 的 にはフォームの action 部 分 に ショッピングカー トや アンケートフォームなどのシステムを 呼 び 出 す URL method には post か get が 入 ります - 41 - MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1-51 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 ここでは 画 像 に 対 してリンク 設 定 をしています 同 様 に 文 字 に 対 しても 設 定 できます 学 校 のサイトや Yahoo! Google など どこかにテキストリンクを 作 ってみましょう リンクさせたいテキストを 選 択 し プロパティパネルのリンク 部 分 に URL を 記 入 します リンクの 設 定 画 像 をクリックしたら 拡 大 出 来 るように 画 像 自 体 にリンクを 設 定 します 画 像 を 選 択 して プロパティパネルのリンクからファイルの 参 照 をクリック ここでは 画 像 ファイルを 指 定 します 最 後 にページの 一 番 下 にコピーライトの1 行 を 追 加 します 半 角 スペース < < 小 なり > > 大 なり & & アンド 記 号 " " 二 重 クオート 挿 入 >HTML > 特 殊 文 字 > 著 作 権 と 書 かれているものが Webブラウザでは と 表 示 されます - 42 - などは 文 字 参 照 とよばれています 大 なり 小 なり 記 号 など HTML 自 体 で 意 味 のある 文 字 を 表 現 す る 場 合 や マークなど 入 力 や 表 示 が 難 しい 文 字 を 指 定 する 場 合 に 使 います wiki 文 字 参 照 http://ja.wikipedia.org/wiki/ 文 字 参 照 - 52 -
www.adobe-education.com/jp/ ここまででHTMLファイルが 出 来 上 がりました 1 <!doctype html> HTMLファイルである 2 <html> 3 <head> 4 <meta charset="utf-8"> 見 えないが 重 要 なhead 領 域 5 <title>オーガニックコットンtシャツ うみそら 雑 貨 店 </title> 6 </head> 7 <body> 8 <header> 9 <img src="logo.png" alt="うみそら 雑 貨 店 "> 10 </header> 11 <h1>オーガニックコットンtシャツ</h1> 12 <div class="multicolumn"> Webブラウザに 表 示 されるbody 領 域 13 <div class="cola"> 14 <a href="img_p1.jpg"><img src="img_p1.jpg" width="320" ></a> 15 </div> 16 <div class="colb"> 17 <p> 地 球 と 肌 に 優 しい オーガニックコットンを 使 ったTシャツです 柔 らかい 着 心 地 を ホワイト チョコレート モスグリーンの3 色 からお 選 びください 日 本 サイズでXSとSの2サイズ をご 用 意 しました <br> 18 海 外 の 有 機 農 家 の 手 で 大 切 に 育 てられた 原 綿 を 輸 入 し 日 本 国 内 で 環 境 にやさしい 方 法 で 紡 いでいます オーガニックコットンの 持 つナチュラル 感 に 合 わせて 少 し 細 身 でシルエット もスタイリッシュに 仕 上 げてあります </p> 19 <ul> 20 <li>s( 肩 幅 : 約 42cm 着 丈 : 約 64cm)</li> 21 <li>xs( 肩 幅 : 約 36cm 着 丈 : 約 61cm)</li> 22 </ul> 23 <p> 製 品 は 米 国 サイズを 基 準 に 作 られておりますので XS Sサイズのみで 販 売 いたして おります ( 普 段 よりワンサイズ 小 さめをおすすめいたします)</p> 24 <p> 製 品 の 性 質 上 お 洗 濯 時 に 若 干 の 縮 みや 色 落 ちが 発 生 します </p> 25 <p><strong> 販 売 価 格 6,700 円 ( 税 込 )</strong></p> 26 <form method="post" action="/"> 27 <select> 28 <option value="" selected="selected"> 色 を 選 択 してください</option> 29 <option value="ホワイト">ホワイト</option> 30 <option value="ブラウン">ブラウン</option> 31 <option value="グリーン">グリーン</option> 32 </select> 33 <input type="submit" value="ショッピングカートに 入 れる"> 34 </form> 35 </div> 36 </div> 37 <footer> 38 2013 うみそら 雑 貨 店 39 </footer> 40 </body> 41 </html> 42 本 書 では HTML などのコード 表 示 に Adobe のオープンソース MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ 企 画 :サンプル:step1:sample.html: 1/1 フォント Source Code Pro を 使 用 しています こういったコード 記 述 用 のフォントを 使 用 することで 紛 らわし - 43 - い 文 字 の 視 認 性 識 別 性 が 高 くなり 書 き 間 違 いや 見 間 違 いに よる 無 駄 が 少 なくなります Source Code Pro http://sourceforge.net/projects/sourcecodepro.adobe/ - 53 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Webデザインは 情 報 設 計 Webページの 画 面 デザインとは 情 報 を 見 やすく 整 理 することであり 関 連 する 情 報 へ 正 しく 導 くユーザ インターフェースを 設 計 することです 絵 やイラストを 描 くのとはまた 違 う 観 点 で 考 える 必 要 がありま す 伝 えたい 情 報 には 優 先 度 があるはずです そのWebページで 必 ず 伝 えたいことはなにか 興 味 を 持 っ てもらって 欲 しいことはなにかなど Webサイト 全 体 それぞれのWebページの 情 報 に 優 劣 をつけて 考 え ます 迷 いのないインターフェイス 多 くの 人 が 迷 わない 操 作 方 法 を 提 供 し どこをクリックしたらいいのか 解 らないようなユーザインター フェースはやめましょう 誤 解 のない 表 現 で 多 くの 人 が 認 識 できるように どこが 本 文 で どこがボタンなのか いろいろな 端 末 や 視 覚 条 件 で 判 定 できるようにしましょう はっきり 読 める 文 字 で 情 報 を 提 供 する コントラストの 低 い 文 字 は 読 みにくいものです また 不 必 要 な 画 像 も 情 報 提 供 の 妨 げになります Web ページの 最 終 的 な 見 た 目 は 見 る 側 の 環 境 に 依 存 する Web サイトは Web ブラウザ OS ハードウェアごとに 見 え 方 が 違 います 画 面 サイズはハードウェアごとに 違 い HTML の 解 釈 表 現 方 法 は Web ブラウザごとに 違 います つまり そもそも 作 ったときと 同 じように 表 示 される 訳 が ないのです 情 報 と 表 現 をなるべく 分 離 しておく Web サイトで 重 要 なことは ユーザに 文 字 画 像 映 像 などの 情 報 を 確 実 に 伝 えるということです 特 定 の Web ブ ラウザによって 見 られない 状 況 を 避 け ユーザそれぞの 閲 覧 する 環 境 によって Web サイトの 見 え 方 がことなる ことを 前 提 にデザインを 進 めていきます これほどまでに 技 術 と 芸 術 が 隣 接 した 最 終 的 な 表 示 状 態 をユーザにゆだ ねるメディアは 過 去 に 例 がありません - 44 - - 54 -
www.adobe-education.com/jp/ 基 本 的 なHTMLタグ HTMLファイルは 大 きくはheaderとbodyの2パートに 分 かれています さまざまなタグがありますが 全 てを 覚 える 必 要 はありません Dreamweaverのコード 補 完 機 能 をつかえば 途 中 まで 入 力 したタグの 続 きを 書 いてくれます タグは 開 始 と 終 了 があり その 間 の 要 素 に 作 用 します またそれぞれに 属 性 を 持 っています <タグ 属 性 = 値 > 文 字 等 の 要 素 </タグ> 例 <a href= http://www.adobe.com >adobe</a> <head> 画 面 には 表 示 されないHTMLファイルのヘッダ 情 報 を 記 述 します <title>オーガニックコットンtシャツ うみそら 雑 貨 店 </title> このファイル 全 体 の 題 名 <body> HTML 文 書 の 本 体 部 分 を 指 定 する 要 素 画 面 に 実 際 に 表 示 されている 内 容 です <p> paragraph(パラグラフ)もっとも 基 本 的 な 文 章 の1 段 落 です <h1> このHTMLの 中 でももっとも 言 いたいこと 大 見 出 しです <h2>が 中 見 出 し <h3>は 小 見 出 しです <a> ハイパーリンクを 指 定 します <img> 画 像 ファイルを 表 示 します HTML タグはそれほど 種 類 が 多 いわけではありません 基 本 的 な 部 分 あは Dreamweaver のヘルプや Web サイトで 習 得 できます また Dreamweaver では 入 力 時 に HTML を 自 動 補 完 してくれ るので 完 全 に 覚 えている 必 要 はありません - 45 - Adobe Dreamweaver デベロッパーセンター 第 3 回 デザインビューで 効 率 的 に HTMLマークアップしよう http://www.adobe.com/jp/devnet/dreamweaver/articles/dw_getting_started_03.html - 55 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 CSS は HTML ファイル 内 にも 記 述 することが 可 能 です HTML の header 内 や タグ 自 身 に 直 接 style を 追 記 できます しかし この 記 述 方 法 は 推 奨 されていません CSS の 特 性 や 利 便 性 を 考 え ると HTML ファイルとは 別 に CSS ファイルを 用 意 しましょう また CSS を 複 数 のファイルに 分 割 しておくこともあります これは Web サイト 全 体 で 共 通 で 使 う 部 分 その Web ページでのみ 使 う 部 分 印 刷 時 に 使 う 部 分 などを 複 数 のファイルに 分 割 しておくこ とで 管 理 や 流 用 を 簡 単 にしています その 反 面 読 み 込 みや 表 示 の 速 度 が 遅 くなるため 実 際 には 1 つのファイルに 統 合 (compress) CSSファイルの 作 成 した CSS ファイルを 使 用 することが 多 いようです HTMLが 文 章 への 意 味 付 けだとすると CSSは 文 章 の 体 裁 を 見 やすくする 修 飾 です CSSファイルはHTML ファイルを 装 飾 するものであり そのファイル 自 体 は 情 報 としての 意 味 を 持 ちません 1つのWebページ をHTMLとCSSに 分 けることによって 情 報 と 表 現 を 明 確 に 分 割 しています ブロック 要 素 画 像 をクリックした 後 コードビュー 下 部 にある タグセレクタを 使 って<div.multiColumn>を 選 択 しま す ここではあえて CSS ファイルを 新 規 で 作 成 する 手 順 を 説 明 しています CSSパネルで 新 規 CSSルールをクリック ルール 定 義 で( 新 規 スタイルシートファイル)を 選 択 し OKをクリック - 46 - Adobe Dreamweaver デベロッパーセンター 第 5 回 CSS 関 連 の 便 利 機 能 を 使 いこなそう http://www.adobe.com/jp/devnet/dreamweaver/articles/dw_getting_started_05.html - 56 -
www.adobe-education.com/jp/ ファイル 名 をつけて 保 存 します ルール 定 義 の 画 面 が 開 いたら ブロックのMarginですべて 同 一 のチェックを 外 し Bottomに2 プルダウンでemを 選 択 します 位 置 でOverflowをhiddenにしたら OKをクリックします - 47 - 定 義 ごとにパラメータと 単 位 を 選 びます ただ し 見 ての 通 り 各 項 目 の 意 味 が 解 らないと 正 しい 入 力 が 出 来 ません - 57 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 このようなCSSが 生 成 されました 1 @charset "utf-8"; 2.multiColumn { 3 margin-bottom: 2em; 4 overflow: hidden; 5 } 6 ここからは CSSファイルとHTMLファイルの 両 方 を 編 集 することになるので 保 存 する 際 には 複 数 のファイル を 扱 う 場 合 必 ず すべて 保 存 を 選 択 してください ファイルを 保 存 し 忘 れて いる 事 が 原 因 で Web ブラウザでの 確 認 中 に 変 更 内 容 が 反 映 されない 事 があります すべてを 保 存 を 選 択 するようにしましょう 先 ほどと 同 様 に 画 像 を 選 択 した 状 態 で 今 度 はタグセレクタから<div.colA>を 選 択 します CSSパネルで 新 規 CSSルールをクリックし ルール 定 義 はstyle.cssを 選 択 します 保 存 されていないドキュメント: 1/1-48 - HTML の <link> タグで 定 義 された 既 存 の CSS ファイルを 選 択 する 場 合 も 同 様 の 操 作 になります - 58 -
www.adobe-education.com/jp/ ボックスのflortをleftに PaddingのRightを80pxにしたらOKをクリックします 同 様 に 説 明 文 のどこかをクリックし タグセレクタから<div.colB>を 選 択 します colaの 時 と 同 様 に 位 置 でOverflowをAutoにしたら OKをクリックします ここまで 出 来 たらすべてを 保 存 を 選 択 し ファイルを 保 存 しておきましょう いきなり 難 しい 印 象 になっていますが テキスト 34 ページのオレン ジの 線 のように 縦 方 向 に 複 数 のブロックを 作 る いわゆる 段 組 を 実 現 しているのがこれらの C S S になります - 49 - - 59 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 環 境 設 定 で 任 意 の Web ブラウザを 登 録 削 除 できます またライブボタンを 押 すことで Dreamweaver のデザインビュー 内 で Web ブラウザを 動 作 させる 事 もでき 簡 単 に 表 示 を 確 認 できます Webブラウザで 表 示 確 認 コードビュー 上 部 のブラウザでプレビューを 選 択 します ファイルが 実 際 にWebブラウザで 表 示 されるこ とを 確 認 します Webブラウザは 使 っている 環 境 にあわせて 表 示 が 変 わります 複 数 のWebブラウザが 入 っている 場 合 は 両 方 で 開 いて 見 比 べてみましょう Google Chromeでプレビューした 場 合 このように 写 真 と 文 章 が2 段 に 表 示 されて 入 れんば ここまでの 手 順 は 上 手 くいっています <div>を 箱 に みたてて 大 きさや 箱 と 箱 の 間 の 距 離 重 なり 方 などに 対 して 指 示 を 出 していく 手 法 はCSSでは 大 切 な 考 え 方 の1つです Chrome や Firefox などはモダンブラウザと 呼 ばれています モ ダンブラウザとは 現 在 の HTML や CSS を 的 確 に 表 現 出 来 る Web ブラウザの 総 称 です Internet Explorer も ver10 以 降 はモ ダンブラウザと 言 えるでしょう - 50 - - 60 -
www.adobe-education.com/jp/ インライン 要 素 次 は 文 字 に 対 してスタイルを 設 定 する 方 法 です 説 明 文 の 販 売 価 格 の 部 分 をクリックし タグセレクタから<strong>を 選 択 します CSSパネルで 新 規 CSSルールをクリックし セレクタータイプはタグを 選 択 します Font-sizeを114%として OKをクリックします 大 きさの 指 定 には ピクセルなどの 絶 対 的 な 値 ではなく % や em などの 相 対 的 な 値 を 使 う 方 が 柔 軟 性 があります - 51 - - 61 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 これで 価 格 部 分 が 他 の 文 字 より 一 回 り 大 きくなりました ここまでで このようなCSSが 生 成 されました 1 @charset "utf-8"; 2.multiColumn { 3 margin-bottom: 2em; 4 overflow: hidden; 5 } 6.multiColumn.colA { 7 float: left; 8 padding-right: 80px; 9 } 10.multiColumn.colB { 11 overflow: auto; 12 } 13 strong { 14 font-size: 114%; 15 } 16 半 角 スペースでつなげることで.multiColumn の.colA という 意 味 になります 手 順 は 複 雑 でしたが 出 来 上 がった CSS はこれだけです 逆 にこれ だけのコードで 段 組 や 文 字 サイズの 変 更 が 可 能 です.multiColumn や.colA は 制 作 者 が 任 意 につけた 名 称 です 無 理 に 短 くする 必 要 はないので 人 間 に 解 りやすい 英 単 語 などでつけるとよい でしょう 先 頭 の. ドットは それがクラスに 対 する 定 義 であるという 意 味 が あります また 行 末 には ; セミコロンが 必 ず 必 要 です - 52 - 保 存 されていないドキュメント: 1/1-62 -
www.adobe-education.com/jp/ CSSはこれまでの 手 順 のように CSSパネルから 入 力 することも 出 来 ますが CSSファイルに 直 接 コードを 記 述 することも 可 能 です style.cssを 選 択 すると CSSファイルそのものになるので 足 りない 部 分 を 次 のページを 見 ながら 入 力 して みましょう /*で 始 まる 行 はコメント(メモ 書 き)なので 自 分 が 解 りやすいように 記 述 すれば 問 題 ありません 閉 じかっこ } の 位 置 も 行 頭 でも 前 の 行 の 行 末 でもどちらでも 問 題 ありません 上 手 くいかないときはO(オー)と0(ゼロ)などを 間 違 えていないかも 見 直 しましょう セミコロンや 空 白 ( 半 角 スペース)にも 意 味 があるので 注 意 しましょう Dreamweaver の 環 境 設 定 で 前 述 の Source Code Pro などを 表 示 フォ ントに 指 定 しておくと 見 間 違 いを 防 げます - 53 - - 63 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 印 刷 スペースの 都 合 上 ; セミコロンの 次 に } 弓 カッコ 閉 じがきていますが セミコロン で 改 行 し 次 の 行 に 弓 カッコがきてもまったく 同 じ 意 味 になります 弓 カッコで 囲 まれた 範 囲 が 1 つのブロックです コメント 行 や 空 白 スペースは 削 除 しても 逆 にいっぱいあっても 問 題 ありません 行 頭 の 空 白 (これをインデントといいます)もなくても 多 く 入 っていても 問 題 ありません ただし 全 角 スペース( 日 本 語 入 力 中 のスペース)は 使 用 してはいけません これで 要 素 は 最 小 限 ですが 2カラムのCSSレイアウトのWebページができました 1 @charset "UTF-8"; 2 body { 3 margin: 0 auto; 4 width: 960px; 5 padding: 0 24px; 6 font-size: 14px; 7 line-height: 1.5em;} 8 h1 { 9 font-size: 114%; 既 存 のタグに 対 して 見 た 目 を 指 定 する 方 法 10 margin-bottom: 1em;} 11 p { 12 margin: 0 0 1.5em 0;} 13 ul { 大 きさを 指 定 する 場 合 emや%など 相 対 的 な 指 定 方 法 がよく 使 われる 14 list-style: none; 15 margin: 0 0 1em 0; 16 padding: 0;} 17 strong { 18 font-size: 114%;} 19 img { 20 border: none;} 21 input, select { 22 margin: 0; 23 font-size: 100%; 24 line-height: 1.5; 25 vertical-align: middle;} 26 27 /*----------header footer----------*/ 28 header { 29 border-bottom: 1px solid gray; 半 角 スペースをあけて パラメータを 順 に 指 定 30 margin-bottom: 2em; 31 padding: 2em 0 2em;} 32 footer { 33 font-size: 86%; 34 border-top: 1px solid gray; 行 末 には 必 ずセミコロン;が 必 要 35 padding: 1em 0;} 36 37 /*----------multi column modules----------*/ 38.multiColumn { 39 overflow: hidden; 40 margin-bottom: 2em;} 41 42.multiColumn.colA{ 43 float: left; 44 margin-right: 80px;} 45 46.multiColumn.colB { 47 overflow:auto;} 48 MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ 企 画 :サンプル:step1:-style.css: 1/1-54 - - 64 -
www.adobe-education.com/jp/ 完 成 したWebページをInternet Explorerで 表 示 すると このように 表 示 されます ここまでの 状 態 がstet1フォルダです フォルダーの 中 には4つのファイルが 入 っています さらに 他 の 画 像 やテキスト 要 素 を 追 加 したパソコン 版 の 完 成 形 が stet2フォルダになります FTP は 使 わない ファイルを Web サーバへ SFTP(SSH File Transfer Protocol)か FTPS(File Transfer Protocol over SSL/TLS)などの 方 法 でアップロードします それぞれ FTP(File Transfer Protocol)のセキュリティを 強 化 したプロトコルです FTP はファイルを 送 受 信 するためのプロトコルなのですが 大 昔 の 規 格 でパス - 55 - ワードが 暗 号 化 されずに 送 受 信 されているため 非 常 に 危 険 です 多 くの FTP クライアントソフトウェアから FTP アカウントがもれ 被 害 の 拡 大 や 信 用 損 失 につながった Gumblar ウィルス 事 件 を 教 訓 に FTP パスワードを FTP クラ イアントに 保 存 しない FTP ではなくSFTP や FTPS など FTP 以 外 の 方 法 で 接 続 するといった 基 本 を 確 実 に 実 践 しましょう - 65 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 Web ページの 公 開 方 法 生 徒 の 作 品 をお 互 いに 閲 覧 するためには Web サーバへの 設 置 が 必 要 です 授 業 で 使 う 程 度 であれば 教 室 内 でお 互 いに 閲 覧 できればよいので 難 しく 考 える 必 要 はありません 事 前 の 準 備 各 生 徒 の 作 品 をフォルダ 単 位 (ディレクトリ)でまとめておき そのフォルダ 名 を 次 のように 定 義 します 3 年 B 組 の 出 席 番 号 1 番 の 浅 井 雪 乃 さんの 場 合 は 3b01asai もしくは 3b01 ファイルサーバを 使 う 方 法 Windows かなにか 教 室 内 で 共 通 で 閲 覧 できる ファイルサーバ や 共 有 ディレクトリ と 呼 ばれている 場 所 に 全 員 のフォルダを 設 置 します 厳 密 には Web サーバを 使 わない 方 法 なので Web ブラウザの 挙 動 が 違 う(http: ではなく file: でのアクセス) のですが 今 回 のサンプル 程 度 であれば 影 響 はありません XAMMP を 使 う 方 法 XAMMP 上 記 ファイルサーバなどがない 場 合 で 先 生 の PC http://www.apachefriends.org/jp/xampp-windows.html を 含 め 生 徒 全 員 が 同 じ LAN の 中 にいる 場 合 は Web サーバの 実 験 用 ソフトである X AMMP が 使 えます XAMMPは 先 生 用 のPCにインストールし 使 用 を 開 始 することで 生 徒 のPCからは 次 のようなURLでアク セス 出 来 るようになります (xx 部 分 は 各 LAN ごとに 違 います) http://192.168.xx.xx:80/3b01asai/index.html LAN の 中 の 他 の PC へのアクセスが 許 可 されていない 場 合 は ルーターや PC の 設 定 変 更 が 必 要 です レンタルサーバを 使 う 方 法 普 通 にレンタルサーバを 契 約 する 方 法 です ロリポップ 価 格 的 には 最 安 値 のサービスで 充 分 で 各 社 から 1 年 で 3000 円 ぐらいで 利 用 http://lolipop.jp/ できるプランが 出 ています この 場 合 非 常 に 実 践 的 なファイルの 取 り 扱 いが 可 能 ですが アップロードと 同 時 に 全 世 界 に 公 開 されてしま うので 注 意 が 必 要 です 生 徒 のファイルを Google などの 検 索 エンジンから 探 せないようにする 方 法 次 の 2 行 をテキストファイルに 記 述 User-agent: * Disallow: / robot.txt というファイル 名 で 保 存 し 契 約 したサーバのルートに 設 置 します - 66 -
www.adobe-education.com/jp/ ここでは 画 面 サイズの 違 いを 簡 単 に 反 映 するため に CSS3 の Media Queries(メディアクエリ)を 使 っ ています 多 くの Web サイトでは Media Queries 以 外 も 併 用 しています Media Queries http://www.w3.org/tr/css3-mediaqueries/ CSSによるスマートデバイス 対 応 パソコン 用 のWebページを スマートフィンやタブレットでの 表 示 に 対 応 させてみましょう step2フォルダをスマートフォンなどで 表 示 すると 文 字 が 小 さく 見 にくい 印 象 になります そこで スマートフォンなどの 横 幅 の 小 さい 画 面 で 表 示 された 際 に レイアウトを 切 り 替 えたのがstep3 フォルダです HTMLにViewport CSSにMediaQueryなどが 追 加 さ れています パソコンのWebブラウザでも 画 面 を 横 方 向 に 細 くすることで 変 化 を 確 認 できます 1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>オーガニックコットンtシャツ うみそら 雑 貨 店 </title> 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="viewport" content="width=device-width"> 9 <link rel="stylesheet" media="all" href="shared/css/import.css"> 10 </head> 11 <body> 12 <div class="mod-pagewrapper"> 13 追 記 されたHTMLファイルのhead <header class="mod-pageheader"> 部 分 14 <h1 class="mod-pageheader-logo"><a href="#" class="hoveropacity"><img 1 src="shared/images/logo.png" alt="うみそら 雑 貨 店 "></a></h1> 15 /*--------------------structure setting---------------------*/ 2 <ul class="mod-pageheader-menu"> 16 /*----------mod-pagewrapper----------*/ 3 <li><a href="#" class="cart hoveropacity">カート</a></li> 17.mod-pageWrapper { 4 <li><a href="#" class="help hoveropacity">お 問 い 合 わせ</a></li> 18 text-align: left; 5 </ul> 19 margin: 0 auto; 6 </header> 20 padding: 0 24px; 7 <!--/mod-pageheader--> 21 max-width: 960px; 8 <div class="mod-pagecontent"> 22 } 9 23 10 <div class="mod-topicpath"> 24 @media screen and (max-width: 687px) { 11 <ul> 25.mod-pageWrapper { <li><a href="#">ホーム</a></li> 12 26 padding: 0 12px; <li><a href="#">tシャツ</a></li> 13 27 min-width: 320px; <li class="current">オーガニックコットンtシャツ</li> 14 28 } </ul> 15 29 } </div> 16 30 /*----------mod-pageheader----------*/ <!--/mod-topicpath--> 17 CSSファイルの.mod-pageHeader 各 要 素 に 画 { 面 サイズによる 振 り 分 けを 追 記 31 18 32 border-bottom: 2px solid silver; <div class="mod-pagecontent-main"> 19 33 margin-bottom: 2em; <h1 class="mod-heading">オーガニックコットンtシャツ</h1> 20 34 padding: 2em 0 2em; 21 35 } <div class="mod-multicolumn"> - 56-22 36.mod-pageHeader.mod-pageHeader-logo { <div class="mod-multicolumn-cola"> 23 37 float: left; <div class="mod-figure"><img src="shared/images/img_p1.jpg" alt=" 24 } " width="640" height="400"></div> 25 38.mod-pageHeader.mod-pageHeader-menu { </div> 26 39 float: right; <div class="mod-multicolumn-colb"> 27 40 margin-bottom: 0; 28 41 padding: 0.857em 0 0; <div class="mod-multicolumn2"> 29 42 } <div class="mod-multicolumn2-cola"> 30 43.mod-pageHeader.mod-pageHeader-menu li { <div class="mod-multicolumn2-cola-inner"> 31 float: left; Adobe & HTML 44 <p> 地 球 と 肌 に 優 しい オーガニックコットンを 使 ったTシャツです 柔 らか 32 margin: 0 0 0 3.286em; い 着 心 地 をホワイト チョコレート モスグリーンの3 色 からお 選 びください 日 本 サイズでXSと 33 } Sの2サイズをご 用 意 しました <br> 34 45.mod-pageHeader.mod-pageHeader-menu li a { 海 外 の 有 機 農 家 の 手 で 大 切 に 育 てられた 原 綿 を 輸 入 し 日 本 国 内 で 環 境 35 color: #000; 36 MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ line-height: 24px; 企 画 :サンプル:html:step3:sample.html: 1/4 37 text-decoration: none; 38 display: block; - 67-39 padding-left: 33px; 40 } 41.mod-pageHeader.mod-pageHeader-menu li a.cart { 42 background: url(../images/icon_cart.png) 0 50% no-repeat; Adobe HTML5 特 設 サイト http://adobe-html5.jp/tips/ http://html.adobe.com/edge/
電 子 商 取 引 (EC)サイト 制 作 指 導 書 CSS Button Generator http://css-button-generator.com CSS Button Generator http://www.dextronet.com/css-buttons-generator/ 197 } 198 #scaling_imgs.inactive { 199 display: block; 200 } 201 CSSボタンの 作 成 #scaling_imgs img { 202 step4では ショッピングカートに cursor: pointer; 入 れる ボタンをCSSで 描 いています さまざまなディスプレイのサイ 203 } 204 ズ 解 像 度 が 増 えてくる 中 で スケーラブル( 可 変 長 )なWebサイトを 制 作 するには ビットマップ 画 像 205 ではなく CSSでの /*clearfix*/ 処 理 やベクター 形 式 の 画 像 を 使 用 するのも 一 つの 方 法 です 206.clearfix,.mod-multiColumn,.mod-multiColumn2,.mod-thumbBlock { 207 CSSでは _overflow: 好 きなフォントを visible; 表 示 したり 文 章 を 角 丸 の 四 角 で 囲 んだり 奥 行 きのある 形 に 変 形 させたりが 208 可 能 です これを _height: 利 1px; 用 してボタンを 作 っています 209 zoom: 1; 210 setp3までの } 画 像 ボタンと 比 較 すると Webブラウザで 拡 大 表 示 したときや iphone5( 高 解 像 度 ディスプ 211 レイ)で.clearfix:after, 見 たときに ボタンを.mod-multiColumn:after, 美 しく 表 現 することが 可 能 です.mod-multiColumn2:after,.modthumbBlock:after { 212 content: "."; 213 display: block; 214 visibility: hidden; 215 clear: both; 216 step3までで 使 用 していた PNG 画 像 で 作 成 した ショッピングカートに 入 れる ボタン height: 0px; 217 font-size: 0px; 218 } 219 220 /*cart CSS3 btn*/ 221.add2cart { 222 color:#66523d; 223 cursor:pointer; 224 225 border-radius:6px; 226 -moz-border-radius:6px; 227 -webkit-border-radius:6px; 228 229 border:1px outset #e8e8e8; 230 padding:12px 8px 10px 46px; 231 232 background: url(../images/cart.png) 10px 50% no-repeat #f4f4f5; 233 background: url(../images/cart.png) 10px 50% no-repeat,-webkitgradient( linear, left top, left bottom, color-stop(37%, #ffffff), colorstop(68%, #f4f4f5) ); 234 background: url(../images/cart.png) 10px 50% no-repeat,-moz-lineargradient( center top, #ffffff 37%, #f4f4f5 68% ); 235 background: url(../images/cart.png) 10px 50% no-repeat,-ms-lineargradient( top, #ffffff 37%, #f4f4f5 68% ); 236 } step4ではボタンをcssで 表 現 しています 現 時 点 では グラデーション 表 現 に 対 する 記 述 がWebブラウザ ごとに 違 うため 少 し 複 雑 になっています MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ 企 画 :サンプル:html:step4:shared:css:modules.css: 5/5-57 - - 68 -
www.adobe-education.com/jp/ 言 語 としてはソースコードをその 場 で 解 釈 しながら 実 行 するインタ プリタです ECMA スクリプト(ECMAScript:エクマスクリプト) という 規 格 に 準 拠 しているので 比 較 的 習 得 しやすくいろいろな 他 言 語 への 応 用 が 可 能 です ちなみに Java と JavaScript は たまたま 同 じ 名 字 の 他 人 です 開 発 当 時 の 会 社 同 士 が 業 務 提 携 していたため 同 じ 名 字 になりま したが 全 く 別 の 言 語 です JavaScriptでプログラミング jquery http://jquery.com jquery Mobile http://jquerymobile.com JavaScript(ジャバスクリプト)はHTML CSSとならんでWebブラウザで 動 く 技 術 として 非 常 に 重 要 で す HTMLが 文 章 の 構 造 定 義 CSSがその 装 飾 JavaScriptはそのファイルやWebサイト 自 身 をWebブラウ ザ 側 で 動 かすプログラミング 言 語 です 多 くのWebサイトが Webサーバ 側 のプログラミング 言 語 と JavaScriptによるWebブラウザ 側 のプログラミングを 使 い 分 け 併 用 することによって 動 いています finalとstep4の 違 いは 写 真 をクリックしたときの 挙 動 です finalでは 画 像 ファイルに 遷 移 することなく そ の 場 で 画 像 が 拡 大 表 示 されます jquery よく 使 われている 機 能 をまとめて 使 いやすくひとまとめにしたものを JavaScriptライブラリとよんでいます もっとも 広 く 使 われているJavaScriptライブ ラリーがjQuery(ジェイクエリー)です finalのjavascriptでもこのjqueryを 使 用 し HTMLファイルをそ の 場 で 書 き 換 えて 拡 大 画 像 を 画 面 に 表 示 しています 1 $(function(){ 2 reset($('#scaling_imgs p')); 3 4 $('#scaling_imgs p').click(function(){ 5 var activeimg = $(this).html(); 6 7 //reset 8 reset($('#scaling_imgs p')); 9 $('.scaling_imgs_display').remove(); 10 11 $(this).removeclass('inactive').addclass('active'); 12 $('#scaling_imgs').prepend('<div class="scaling_imgs_display">'+acti veimg+'</div>').addclass('show'); 13 14 $('.scaling_imgs_display').click(function(){ 15 reset($('#scaling_imgs p')); 16 $(this).remove(); 17 $('#scaling_imgs').removeclass('show'); 18 19 return false; 20 }); 21 22 return false; 23 }); 24 25 26 function reset(t){ 27 t.each(function(){ 28 $(this).removeclass('active').addclass('inactive'); 29 }); 30 } 31 32 }); - 58 - MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ - 69 - 企 画 :sample:htdocs:shared:js:main.js: 1/1
電 子 商 取 引 (EC)サイト 制 作 指 導 書 サンプルでも step2 以 降 はファイ ルをフォルダに 分 けています Webページのファイル 構 成 CSSファイルや 画 像 ファイルが 複 数 になってきたときは フォルダに 分 けて 整 理 しましょう step2 以 降 では sharedフォルダにまとめ その 中 で 画 像 やCSSなどをそれぞれフォルダにまとめています それぞれのパーツごとにフォルダ 分 け CSSファイルは 再 利 用 や 使 い 分 けの 観 点 から 複 数 ファイルで 構 成 することが 多 くなります HTMLファイル 1 @charset "utf-8"; 2 3 @import "basic.css"; 4 @import "structure.css"; 5 @import "modules.css"; からは1つのCSSファイルにリンクしておき そのCSSファイルの 中 に@importを 使 用 しそれぞれのCSS ファイルを 読 み 込 みます @import を 使 う 方 法 は 多 用 すると 表 示 速 度 が 低 下 しますが 意 味 を 分 けておくという 点 ではわかりやすい 方 法 です - 59 - - 70 -
www.adobe-education.com/jp/ サンプルは step1 から Final まで 5 段 階 で 用 意 しています テキスト 55 ページまでで step1 を 作 ります 56 ページからのサンプル step2 以 降 を 扱 った 内 容 は Web 技 術 系 の 予 備 知 識 のないと 理 解 が 難 しいので ポイン トと 概 念 のみの 説 明 にしています step1 までの 内 容 が 早 く 修 了 した 場 合 は step2 以 降 のファイルを 開 いて HTML や CSS のソースコードを 前 の step と 比 較 しながら 見 てみましょう アドビシステムズ 株 式 会 社 141-0032 東 京 都 品 川 区 大 崎 1-11-2 ゲートシティ 大 崎 イーストタワー www.adobe.com/jp/ Adobe Systems Incorporated 345 Park Avenue, San Jose, CA 95110-2704 USA www.adobe.com アドビカスタマーサービス 窓 口 0570-067337(ナビダイヤル)または 03-5350-0407 受 付 時 間 / 平 日 9:30-20:00( 土 曜 日 曜 祝 日 弊 社 指 定 休 日 を 除 く) Adobe, the Adobe logo, Adobe Illustrator, Adobe Photoshop, Flash, ActionScript and Adobe Creative Suite are either registered trademarks or trademarks of Adobe Systems Incorporated, in the United States and/or other countries. - 60-2013 Adobe Systems Incorporated. All rights reserved. ASJST - 71 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 コラム 個 人 情 報 の 価 値 Web サービス 各 社 は 個 人 の 趣 味 趣 向 出 身 地 や 出 身 校 などに 興 味 津 々です SNS では 個 人 情 報 をお 互 いに 公 開 して 他 人 同 士 が 繋 がっていくことを 目 的 としています それはリアル 社 会 において 新 しく 友 人 ができるこ とと 似 ています 場 を 提 供 している Web サイト 側 は 多 くの 個 人 情 報 をスポンサー 企 業 に 売 ることで 場 を 無 料 提 供 しています 個 人 情 報 をネット 上 へ 公 開 することによって 得 られるものと 図 らずも 得 てしまう 危 険 性 をよく 理 解 することが 大 切 です 一 人 暮 らしの 女 性 が 顔 写 真 や 部 屋 の 間 取 り 近 所 の 写 真 を 公 開 し 今 から 買 い 物 行 ってきます とつぶやく この 状 況 の 危 険 性 は 理 解 しやすいと 思 います しかし 逆 の 見 方 もあります 例 えば 日 記 やアドレス 帳 など 人 に 見 られたくない 情 報 があります その 情 報 が 入 ったノートパソコンを 電 車 に 置 き 忘 れる 情 報 が 置 いてあるクラウドストレージがクラックされる どちらの 可 能 性 が 高 いでしょうか? 便 利 さは 危 険 性 と 引 き 替 えですが 飛 行 機 と 同 様 に 意 外 と 安 全 なものかもしれません いずれにせよ 各 サービスに 対 する 正 しい 理 解 と 情 報 に 対 する 管 理 能 力 が 必 要 です - 72 -
www.adobe-education.com/jp/ コラム クラウド クラウド はバズワード(buzzword) 扱 いされているところがありますが 実 際 にはすでの 多 くの 情 報 がク ラウド 上 に 蓄 積 されていきます パソコンや 携 帯 電 話 などで 扱 うメールや 写 真 などの 情 報 は 内 蔵 HDD や SD カードなどに 保 存 していました ところが 端 末 が 小 型 化 し 個 人 がパソコンとスマートフォンなど 複 数 の 端 末 を 所 有 するようになると データをそれぞれの 端 末 内 に 持 っておくことが 不 便 になってきました データはク ラウド 上 に 1 つだけあり それを 各 端 末 から 参 照 する 方 が 便 利 です ファイルをクラウドに 置 くことは 理 解 しやすいですが アプリケーションソフトがクラウドにあるというのは 概 念 的 に 理 解 しにくいかもしれません SaaS(Software as a Service:サース)と 呼 ばれている 仕 組 みで 旧 来 のパソコンにインストールして 使 用 する Outlook などのメーラーに 対 して Web ブラウザ 上 で 動 作 する Gmail がそれにあたります - 73 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 コラム Web 制 作 の 心 構 え Web サイト 制 作 はかなり 特 殊 なクリエイティビティーが 要 求 される 世 界 です これほどまでに 技 術 革 新 と 一 体 になっている 媒 体 は 過 去 にありません 大 げさかもしれませんが 今 のインターネットを 取 り 巻 く 環 境 は 100 年 後 の 歴 史 の 教 科 書 に 蒸 気 の 産 業 革 命 と 並 んで 歴 史 的 転 換 点 として 書 かれていると 思 います 家 具 職 人 が 作 るイスは 50 年 前 も 現 在 も 足 があって 座 面 があって 背 もたれがあります では 50 年 後 の Web 制 作 者 が 作 る Web サイトは 今 の Web サイトと 同 じでしょうか? そう たぶん 現 在 の Web サイトの 姿 は Web サイトの 最 終 形 ではないのです 家 にお 風 呂 が 普 及 したので 銭 湯 は 激 減 しました 紙 に 印 刷 された 新 聞 を 早 朝 に 宅 配 してもらう 新 聞 紙 は 近 いうちに 高 級 な 趣 向 品 になるかもしれません Web サイト 制 作 は 技 術 革 新 によって Web サイト そのもの 定 義 が 根 底 から 変 化 する 可 能 性 があるメディアだと 思 っておきましょう 同 様 に グラフィックデザインとしての 普 遍 的 な 部 分 もあります ラジオが 普 及 しても 新 聞 はなくならず テレ ビが 普 及 してもラジオはなくなりません 色 や 形 ユーザビリティー 言 い 回 しや 構 図 など 今 まで 培 ってきた クリエイティビティーを Web 制 作 でどのように 発 揮 するかが 重 要 です - 74 -
www.adobe-education.com/jp/ コラム インターネットのこれから 自 分 の 携 帯 電 話 を 紛 失 する 確 立 と ある 日 Google が 倒 産 して 自 分 の Gmail にアクセス 出 来 なくなる 確 立 どちらが 高 いでしょうか? インターネットによって 国 境 がなくなり 様 々な 情 報 に 透 明 性 が 出 てくることで 世 界 の 政 治 や 国 のありかた そのものの 定 義 が 変 化 しています Google や Facebook などに 直 接 的 な 政 治 思 想 はないかもしれませんが 透 明 な 情 報 が 既 存 の 世 界 を 変 えている 事 は 事 実 です インターネットによって 世 界 が 一 つになるというのは 言 い 過 ぎかもしれませんが 言 い 過 ぎではないのかもし れません Web サイト 制 作 を 通 して 世 界 が 平 和 になることに 少 しでも 貢 献 出 来 れば こんなに 面 白 いことはあ りません 人 が 他 人 とは 違 うということを 理 解 し 合 い 認 め 合 うことで 世 界 は 成 立 しています しかし 今 日 現 在 も 様 々 な 違 いをきっかけに 人 と 人 は 争 っています しかし このインターネットという 仕 組 みが 上 手 く 機 能 しているうちは 地 球 の 世 界 もまだまだ 捨 てたものであ りません なぜなら 戦 争 をしている 国 同 士 もインターネットで 繋 がっている インターネットの 恩 恵 を 受 けるた めには 既 存 のインターネットの 参 加 者 と 協 調 する 以 外 に 方 法 がありません インターネットは 本 質 的 に 善 意 のコンピューターネットワークです これこそが 本 当 のインターネットの 価 値 なのかもしれません - 75 -
電 子 商 取 引 (EC)サイト 制 作 指 導 書 各 言 語 ソフトウェアの 学 習 方 法 本 書 やテキストに 登 場 する 言 語 や ソフトウェアを 本 格 的 に 習 得 するには それなりの 学 習 時 間 が 必 要 です 本 書 二 重 線 で 囲 った URL を 参 照 する 基 本 から 補 足 事 項 まで 参 考 になりそうな Web サイトを 掲 載 しておきました 参 考 書 籍 を 読 む 次 ページにあげた 参 考 書 籍 は どれも 初 心 者 用 に 易 しく 書 かれています 勉 強 会 に 参 加 する 東 京 を 中 心 に 全 国 で 有 料 無 料 のセミナーが 開 催 されています メーカー 主 催 の 大 規 模 なものから ユーザー グループが 中 心 になった 少 人 数 のものまでさまざまです Web デザインの 学 校 ロクナナワークショップ http://67.org/ws/ Adobe 認 定 トレーニングスクールとして Web 制 作 全 般 に 関 する 講 座 を 運 営 学 校 法 人 や 地 方 自 治 体 向 けの 出 張 講 習 や 貸 し 切 り 開 講 も 随 時 対 応 している CSSnite http://cssnite.jp 有 料 セミナーを 中 心 に 全 国 で 開 催 中 デジタルハリウッド http://school.dhw.co.jp 本 格 的 なデジタル 技 術 の 通 学 スクール - 76 -
www.adobe-education.com/jp/ 参 考 書 籍 デザインの 学 校 これからはじめる Web デザインの 本 2011 年 9 月 9 日 発 売 ロクナナワークショップ 著 A4 変 形 判 / 160 ページ 定 価 1,974 円 ( 本 体 1,880 円 ) ISBN 978-4-7741-4791-8 デザインの 学 校 これからはじめる HTML & CSS の 本 2012 年 5 月 2 日 発 売 千 貫 りこ 著,ロクナナワークショップ 監 修 A4 変 形 判 / 192 ページ/ CD1 枚 定 価 2, 0 7 9 円 ( 本 体 1, 9 8 0 円 ) ISBN 978-4-7741-4906-6 デザインの 学 校 これからはじめる Illustrator の 本 [CS6 対 応 版 ] 2012 年 11 月 10 日 発 売 佐 々 木 京 子 著,ロクナナワークショップ 監 修 A4 変 形 判 / 16 0 ページ/ DVD1 枚 定 価 1,974 円 ( 本 体 1,880 円 ) ISBN 978-4-7741-5367-4 デザインの 学 校 これからはじめる Photoshop の 本 [CS6 対 応 版 ] 2012 年 11 月 10 日 発 売 I&D 宮 川 千 春 木 俣 カイ 著,ロクナナワークショップ 監 修 A4 変 形 判 / 16 0 ページ/ DVD1 枚 定 価 1,974 円 ( 本 体 1,880 円 ) ISBN 978-4-7741-5368-1 デザインの 学 校 これからはじめる Dreamweaver の 本 [CS6/CS5.5 対 応 版 ] 2012 年 8 月 10 日 発 売 #fc0 山 本 和 泉 著,ロクナナワークショップ 監 修 A4 変 形 判 / 16 0 ページ/ DVD1 枚 定 価 1,974 円 ( 本 体 1,880 円 ) ISBN 978-4-7741-5220-2 お 問 い 合 わせ 先 技 術 評 論 社 の 書 籍 は 大 学 や 専 門 学 校, 高 校 をはじめ,さまざまなところで 幅 広 く 使 用 いただいております 一 括 でのご 購 入 の 相 談 や 採 用 見 本 等 については 下 記 までご 連 絡 ください 株 式 会 社 技 術 評 論 社 販 売 促 進 部 法 人 営 業 担 当 160-0846 東 京 都 新 宿 区 市 谷 左 内 町 21-13 TEL:03-3513-6158 FAX:03-3513-6151 Mail:houjin@gihyo.co.jp 土 日 祝 日 年 末 年 始 は 休 業 させていただきます - 77 -