電子商取引 (EC)サイト制作指導書はじめに Apple の imac を始めとして各社から簡単に使えるパソコンが発売されるようになりようやく各家庭にパソコンが普及するようになりましたさらにハードウェアの低価格化定額性

(1)

制作：アドビシステムズ株式会社

(2)

はじめに

Apple の iMac を始めとして、各社から「簡単に使えるパソコン」が発売されるようになり、ようやく各家庭にパソコンが普及するようになりました。さらにハードウェアの低価格化、定額性の携帯電話回線や省電力 CPU、公衆無線 LAN などの環境が整ってきたことから、タブレット型の「簡単に使える端末」が普及しはじめています。特に Android OS は、Microsoft Windows 95 の登場と同じくらいのインパクトがありました。そしてすでに、スマートフォンやタブレット型の端末は、パソコンを上回る出荷台数になっています。インターネットを活用した情報伝達の手段や技術も、情報技術の進展とともに大きく変化しています。Web ページも情報を発信する一方通行なものから、個人のニーズに合わせた情報を提供する双方向なものに変わりつつあります。しかし、Web デザインの本質が情報の整理であることに変わりはありません。適切に整理整頓された情報にこそ価値があります。みなさんは、インターネットがなくなった世界を想像出来ますか ? 実は 30 年前にはインターネットは存在していなかったのです。しかし今日ではインターネットがない世界は想像することも難しいほど生活に密接に関係しています。多くの場面で使われている分、その使われ方の数だけ、インターネットに関わる制作をする場面があります。インターネットコンテンツ・Web サイト制作は日進月歩以上の速度で変化しています。本書がその理解への一助となれば幸いです。

(3)

この本の見方

本書ではテキスト「電子商取引（EC）サイト制作」に予備知識と周辺情報を、コラムや注釈として書き加えてあります。ポイントになりそうな箇所には赤線あ赤枠が入れてあります。注釈の例参考になりそうなインターネット上の情報や、ソフトウェアやサービスの URL の例 URL 部分は PDF 上ではリンクしていますので、1 クリックで該当する Web ページを開くことができます。 Adobe 製品は CS6 を基準に書いてありますのが、CS4 以降ならほぼ同様の機能が実装されています。操作方法やメニュー構成が違う部分が多々ありますが、適宜読み替えてください。 Google Chrome http://www.google.co.jp/intl/ja/chrome/browser/ Firefox http://www.mozilla.jp/firefox/

(4)

電子商取引（EC）サイト制作

制作：アドビシステムズ株式会社監修：東京都立第四商業高等学校校長大林誠先生 ---インターネットの歴史 3 ---パーソナルコンピューターの構成 5 ---スマートデバイス 6 ---WWWの仕組み 7 ---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 -前半は講義の資料として、11 ページ以降は実習での使用を想定したテキストになっています。

(5)

ソフトウェア環境

本冊子で使用しているソフトウェア環境は以下の通りです・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 Creative Suite 6とWindows 7の組み合わせを使っています。これ以外の環境では画面の表示や操作方法に違いがありますが、学習には問題ありません免責事項本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた運用は、必ずお客様自身の責任と判断によって行ってください。これらの情報の運用の結果について、アドビシステムズ株式会社および監修者はいかなる責任も負いません本書記載の情報及びソフトウェアに関する記述は、2013 年1 月現在のものを掲載していますので、ご利用時には、変更されている場合もあります商標及び登録商標

本文に(TM)マーク、(R)マークは明記しておりませんが、Adobe Creative Suite及び各製品は、Adobe Systems Incorporated（アドビシステムズ社）の米国ならびに他の国における商標または登録商標であり、その他の本文中に記載されている会社名、団体名、製品名などは、それぞれの会社・団体の商標、登録商標、商品名です。 2 -Adobe 製品は CS6 を基準に書いてありますのが、CS4 以降ならほぼ同様の機能が実装されています。操作方法やメニュー構成が違う部分が多々ありますが、適宜読み替えてください。 Google Chrome http://www.google.co.jp/intl/ja/chrome/browser/ Firefox http://www.mozilla.jp/firefox/

(6)

■インターネットの歴史 コンピューターは第2次大戦中のミサイル弾道計算の為に急速に発展しました。同様にコンピューターネットワークも、どこか一台のコンピューターが破壊されても、他のコンピューター同士の通信は維持されるように設計されました。これが今のインターネットの原型であるアーパネットです。その後、研究所や大学、国の機関を中心にそれらを相互に接続し広まっていき、一般の商用利用が開始され、現在のインターネットが形成ましたインターネットの今インターネットの存在はすでにメディアではなくインフラ（infrastructure・電気やガス、水道といった、生活になくてはならないライフライン）となっています。中でもWebサイトを中心としたコミュニケーションは「ホームページを見る」から「Webサービスを利用する」へと大きく変化しました Webサイトはユーザ側に依存したメディアです。どんな方法でそのWebサイトにアクセスされるかは制作側には解りません。ハードウェアの低価格化、定額の携帯電話回線や公衆無線LANなどにより、スマートフォンやタブレットなど「普通の人にとって操作が簡単な端末」が加速度的に普及しています。それにともないWebサイトに求められるものも変わってきましたが、Webデザインの本質が情報の整理であることに変わりはありませんインターネットへの接続方法

インターネットは一般的にISP（Internet Service Provider：インターネットサービスプロバイダ）と呼ばれるインターネット網への接続業者と契約して利用します。ISPへはADSLなどの電話回線、光ファイバー、携帯電話回線などを使用して接続しますインターネットの普及率インターネットは世界中に広がっています。2012年現在で世界人口の4割近くが、何らかの方法でインターネットに接続しています。日本では携帯電話が広く普及しているおかげで、人口の9割以上がインターネットに接続可能な状況となっています 3 -無線 LAN 家やオフィスの中でノートパソコンを持ち歩いても、インターネットに繋がったままになります。これはそれぞれのパソコンが無線 LAN 子機を内蔵しているためです。最近では街中でも無線 LAN を使えるようになってきました。

IEEE 802.11a/b/g/n（通称名 Wi-Fi：わいふぁい）など速度や性能の違う規格がいくつかあります。どの企画でもおおむね数十 MBps の速度が出るため、一般的な使用においてはまったく支障がありません。しかし無線接続である以上、盗聴の危険性があるため、導入する際には暗号化や不可視化などの漏洩対策を怠らないようにする必要があります。

携帯電話接続

LTE（Long Term Evolution：ロング・ターム・エボリューション）や WiMAX（ワイマッ総務省　情報通信白書

(7)

社会の出来事コンピューターインターネット 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 サッカーＷ杯日韓共催第3世代デジタル携帯電話 Firefox 2003 64ビット化 Safari 2004 Facebook 2005 インターネット利用者10億人 2006 ネットブック Twitter 2007 iPhone 2008 北京オリンピック Android Chrome 2009 Windows 7 2010 上海万博 iPad インターネット利用者20億人 2011 LTE/第4世代携帯電話 2012 スカイツリー完成 Windows 8 2013 インターネット利用者30億人 2014 4 -　

{

情報技術の進展は約四半世紀で大きく変化し、その後も急速に技術革新が進んで進んでいます。 Wikipedia　インターネット http://ja.wikipedia.org/wiki/ インターネット http://en.wikipedia.org/wiki/History_of_the_Internet

World Wide Web とは

(8)

■パーソナルコンピューターの構成 入力装置出力装置演算装置記憶装置普段よく目にするコンピューターはパソコン（Personal Computer、パーソナルコンピューター）です。キーボードやマウスといった入力装置と、ディスプレイやプリンタなどの出力装置があって、中には CPU（Central Processing Unit：シーピーユー）やGPU（Graphics Processing Unit：グラフィックスプロセッシングユニット）という演算装置と、メモリやSSD（Solid State Drive）、ハードディスクといった記憶装置が入っていますデジタルコンピューターの中では全てを1か0、アルかナイか、YesかNoかで考えています。これを2進法と言います。たとえば1+1は2ですが、これをコンピューターがやると1+1は10となり、イチゼロと読みます。2進法自体は覚える必要はありません。重要なことはコンピューターは最終的には1か0で判断しているという点です。膨大な量の1と0の組み合わせで、全てのコンピューターは動いています。逆に「ちょっと少なめ」とか「もう気持ち赤く」とかあいまいなことはニガテです 11010010100001110111000 = 6898616 = 105,67,184 = 6943B8 2進数 10進数 8桁ずつ分けた10進数 16進数 5 -この色を表す文字列 = RGB(105,67,184) = #6943B8 1 キロメートルは 1000 メートルですが、1 キロバイトは 1024 バイトです。これは内部的には 2 進数なので、1000 は 10 の 3 乗ではなく、2 の 10 乗で計算しているためです。1 キロバイトは 1000 バイトではなくて、1000 バイトと少しだと覚えておきましょう。同様に 1MB は 1KB の 1000 倍と少し、1G は 1M の、1T は 1G の、1PB( ペタバイト) は 1TB の 1000 倍と少しです。

Solid State Drive

http://ja.wikipedia.org/wiki/Flash_SSD http://e-words.jp/w/SSD.html GPU http://ja.wikipedia.org/wiki/Graphics_Processing_Unit http://www.nvidia.co.jp/object/what-is-gpu-computing-jp.html 最近のハードウェアアーキテクチャでは、HDD に代わって SSD が使われ、CPU の処理を一部 GPU で肩代わりするなど、両者ともに重要な存在に存在になっています。

(9)

■スマートデバイス iPhone、Androidに代表されるスマートフォンや、iPadやkindleなどのタブレットなど、従来のパソコンではない端末が普及しました。これらの端末は画面を触る、端末を傾ける、回すというような直感的（人間的な動き）で簡単な操作方法が多く、キーボードとマウスで操作する従来のパソコンより、操作に専門知識を必要としませんタッチパネル主体となる入力デバイスは「タッチパネル」です。マウスカーソルでは細かな操作が可能でしたが、指先での操作は、触っている下は見えないため大きなボタンを作るなどの考慮が必要ですマウス操作 • クリックした場所は見える • 操作する部分（マウス）と見る部分（ディスプレイ）は離れている • ドラッグ&ドロップなどの複雑な操作もユーザに要求できるタッチパネル • 指の真下は見えない • 操作する部分と見る部分（ディスプレイ）が同じ • 複数指での拡大縮小、回転など、新しい操作方法がある 6 -タッチパネル位置情報（GPS）加速度センサマイクカメラスピーカー無線LAN iPad https://www.apple.com/ipad/ nexus http://www.google.com/intl/ALL_jp/nexus/ kindle http://www.amazon.com/gp/product/B0083PWAPW/ ・iPad どんなスペックかではなく、どんな事ができるか、どのように生活が変わるかを魅力的にアピールしてきまことで、爆発的に販売数を伸ばしています。iPad をパソコンと定義した場合、世界で一番パソコンを売っている会社はアップル社になります。・Android タブレットスマートフォンと同様に Android OS にもスマートフォン向けに設計されたバージョンが存在しています。世界中の会社で開発されており、今後ます手に持って使うスマートフォンやタブレット型の端末に共通することは、持ち運ぶデバイスだということです。人とともに移動し、常に稼働しているからこそ、その良さが活かされる Web サイト（アプリケーション）を考えていく必要があります。

(10)

■WWWの仕組み

インターネット上の文章ファイルの一部分に、別の文章ファイルへ遷移を埋め込む方法が考案されました。ハイパーリンク（Hyperlink）といい、このハイパーリンクが含まれたファイルをハイパーテキストといいます。ハイパーリンクの概念自体は以前から存在しましたが、インターネット上の情報との親和性が高かったため、広く普及するに至りました。よく耳にするHTMLファイルとはハイパーテキストマークアップランゲージ（HyperText Markup Language）の略称です

Webブラウザハイパーテキストを解釈し、リンクをクリックしてファイル遷移することを可能にしたのが、Webブラウザです。 Windowsに入っているInternet Explorerをはじめ、Google ChromeやFirefox、Safariなどが代表的なWebブラウザです。用途や好み応じて使われています Webサーバファイルが自分のパソコンに入っていたら自分しか見ることができません。せっかく作ったファイルをみんなで共有するためのソフトウェアも作られました。これが、Webサーバです

WebサーバにあるファイルをWebブラウザで見る。WWW（World Wide Web：ワールドワイドウェブ）の世界が始まったのは1990年代の始めです。世界中でWebサイトが作られ、さまざまな端末にWebブラウザが搭載され、商業利用もますます盛んになり、今日も爆発的な勢いで世界中に広まっています

7

-Nintendo WiiU（左）などのゲーム機、 Amazon kindle Fire HD（右）といった電子書籍端末にもWebブラウザが搭載されている。 WWW（World Wide Web）

Web ページはどうやって表示しているの ?

Web ブラウザはユーザからのリクエストに応じて、Web サーバに情報をリクエストします。ユーザはページ指定するために URI を Web ブラウザに伝えます。

Web ブラウザから Web サーバへリクエストを送る（Get） ↓ HTML ファイルをダウンロードする ↓ その HTML ファイルを解釈する ↓ 画像ファイルや CSS ファイルなど、関連するファイルをダウンロード ↓

The World Wide Web Consortium (W3C) http://www.w3.org

ハイパーリンクの概念自体は WWW より前からあります。Mac 用のアプリケーションで HyperCard などが有名です。 http://ja.wikipedia.org/wiki/ ハイパーリンク

(11)

データのバケツリレー

地球の裏側、ブラジルの情報が知りたい時は、WebブラウザにブラジルのURI（Uniform Resource Identiﬁer・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 アドレス

IPv4（Internet Protocol Version 4：アイピーブイ4）の IP アドレスはパソコン約 43 億台分あります。すごく多いような気がしますが、すでに IP アドレスの総元締め機関である IANA（Internet Assigned Numbers Authority）では番号の在庫がなくなっています。IP アドレスをもっといっぱい使えるようにした IPv6（Internet Protocol Version 6：アイピーブイ6）という新しいバージョンがあるのですが、IPv4 とはパラレルワールド（共存出来ない世界）になってしまうため、簡単には移行できません。ドメイン名 IP アドレスは数字の羅列なので、人間が覚えるのは困難です。そこで、その IP アドレスを人間に解りやすい文字列に置き換えたのがドメイン名です。adobe.com や yahoo.co.jp などのドメイン名はそれぞれの企業や個人が登録して使用しています。パケットサイズ 1 パケットの大きさは、端末や規格によって上限（MTU）が決まっています。日本の 3G 携帯電話では 128 バイト、イーサネットで 1500 バイトです。

(12)

■Webサイト制作で使用するソフトウェア

9 -Word / Excel

イラストや地図

Adobe Photoshop Adobe Illustrator Adobe Premiere

Adobe Bridge Adobe Dreamweaver 文章や表など表示や動作の確認素材の管理・確認 HTML/CSSの作成 Webサーバー Webサイトの公開素材の編集写真などの画像ファイル映像や音声情報を構成する要素情報の基本は文字で、Web サイトの基本は文章と画像の組み合わせです。しかし、文字だけでは伝わりにくい情報が多いことも事実です。テレビに代表される音声や映像のメディアは圧倒的に情報量が多く、人間の感情に直接的に影響を与えることができます。情報量が多い分ファイルも大きく、文字情報とは比べものにならないファイルサイズになります。インターネットの帯域が広がり、端末の性能が上がったので、音楽や声といった音声ファイル、映画やアニメーションといった映像ファイルを自由に扱えるようになりました。時間軸文字や画像の情報と、音声や映像の情報、これらが決定的に違うのは時間をもっていることです。文字や画像は見る側（読む側）がその情報に触れて、解釈する時間を決めますが、音声や映像は時間軸をもっているため、その主導権がコンテンツ側にあります。音楽や映画などのは時間の流れの上に成り立つ物なので、見る側にはそれを受け入れるか否かの選択しかできません。この点が、音声や映像を扱う上でもっとも重要です。 Web サーバ

クライアントである Web ブラウザは、Web ページを表示するために URI を頼りに、データが格納された Web サーバにアクセスを試みます。無事に Web サーバを見つけ出しアクセスすることができたら「index.html を送ってください」というリクエストを送ります。Web サーバ側では、クライアントのリクエストに対して「index.html をどうぞ」とファイルを送り返してくれます。このように Web ブラウザのリクエストに答えるのが Web サーバソフトウェアの役割です。 Apache Apache（アパッチ）は世界的にもっとも多く使われている Web サーバソフトウェアで、オープンソースで公開されています。様々な OS をサポートしていることや、Yahoo! などの大規模サイトでも使われていることから信頼性も知名度も非常 Apache HTTP Server http://httpd.apache.org

(13)

■商品を撮影する 商品を美しく、美味しそうに撮影する最大のポイントは明るいところで撮影することです近くにある光で、いちばんよいのは太陽光です。窓際の日陰など、直射日光が入らない範囲で、なるべく明るい場所をみつけ、被写体が陰にならないようにして撮影します写真を上手く撮る方法はたった1つ。たくさん撮影することです。デジタルカメラはフィルムなどの消耗品が不要なので、撮影にかかるコストは非常に低くなっていますから、なるべく多くシャッターをきってみましょう被写界深度ピントが合っている範囲を被写界深度といいます。一眼レフカメラなどを使うと、比較的簡単に被写界深度の調整ができるので、背景がボケた写真を撮影できますシャッタースピードシャッタースピードを遅くすると、動いているものを撮るときに、残像を意図的に作ることができます。逆にシャッタースピードを早くすると、不自然なぐらいに時間を止めることも可能になります 10 -数字が大きいほど明るく写りますが、画像が荒れるので、なるべく小さい数字を選択します。晴れた日の野外なら 100 か 200 で充分に写ります。また、最近のデジタルカメラでは、6400 や 12800 といった値を持つものもあり、ほぼ真っ暗な状況でも撮影できます。 F は光の入ってくる穴の大きさで、値が小さいほど明るくなります。使用するレンズによって F 値のとれる範囲が決まります。シャッターが開いている時間を秒で表しています。分数

(14)

コラム　一般ユーザの視点を大切に

Web サイト制作者が常に気をつけておきたいことは「誰のためにどんなコンテンツを作るのか」ということです。その Web サイトが見て欲しいと思っている人達、パソコンで Web サイトを見ている人達ですか ? 極論を言うと、普通の人は日常的にパソコンを使っていません。彼らの多くは携帯電話（スマートフォンではない携帯）を使っています。大手ショッピングサイトで買い物するユーザの半数以上は携帯電話からです。 CD は買わないけど、着うたで音楽を買って携帯電話にヘッドフォンをして聞いています。また、2011 年以降 iPhone などのスマートフォン、iPad などのタブレット端末が爆発的に普及しています。旧来の定義の「パソコン」はどんどんなくなっていく運命にあります。一方、地上波のテレビ番組で「○○を毎日食べるとやせます」と放送されると、次の日にはスーパーの棚から商品がなくなります。それくらいテレビの影響力は、まだ大きいのです。そして、シニア向けの商品はインターネットではなく、新聞に広告を載せるべきかもしれません。シニア向け広告企画の核を Web サイトにしようとしていたら、そもそも企画が失敗しています。

なお、数ある Web サイトの中でも多くの人にとっては、Yahoo! Japan のトップページのように情報を検索できる Web ページがインターネットそのものなのです。

(15)

コラム　マナーとルールと標準化

インターネット上においても実社会と同様のマナー、モラルが求められます。少なくとも Web 制作に関わるものとしては、一般ユーザよりも高い意識を持ちたいものです。巨大掲示板に誰かが悪口を書いたことで、掲示板の管理人が訴訟の対象になった時期がありました。問題だったのは匿名（実際にはほぼ書き込み者を特定できる）で悪口を書き込める点でした。それが事実かどうかは別として、井戸端会議を世界中から見られる状態は良くも悪くも情報社会の一側面です。誰もが実社会と同様のモラルを持っていれば問題ないのですが、酒に酔ったら強気になるの同じで、インターネットに接続していると横柄な態度をとってしまう人がいます。たとえば「友人に CD を貸してあげる。借りた友人は MD にダビングする」これは合法ですよね。では「ネットで知り合った、会ったことのない複数の友人に、CD を取り込んだ MP3 ファイル送信する」これは合法でしょうか ?　どこまでが私的利用の範囲なのか、インターネットを始めとする情報機器の進化の速さに対して、各国の法律やその解釈は遅れています。日本はチャイルドポルノ天国という悪名がありました。Web ブラウザのキャッシュに小さい子供の裸の写真が入っているだけで有罪になる国もあります。日本では単純所持はいまだに合法です。日本ではパチンコですら違法賭博です。ところがカジノが合法化されている国のオンラインカジノへアクセスして、クレジットカード決済で仮に儲かったとしたら ? タックスヘイブンや船籍など、国境を越えると昔からいろんな問題がおきています。特にインターネットでは状況の変化が早すぎるのと、国境を越えるのが簡単すぎる（本人は国境を越えている意識がないことも）ため、仮に不法行為があったとしても、どの国の、どの法律にしたがって対処すればよいのか解りにくくなっています。

(16)

主な決済方法一覧

EC ではさまざま決済方法が使われています。それぞれ特徴があり、商品や業態、対象年齢などによって使い分ける必要があります。多くの場合は代行業者に頼むことになります。手数料は 1 〜 10% 程度で、方法や金額によって異なります。 ●代金引換宅配業者が集金を代行してくれる ●クレジットカードクレジットカードを利用した事実上の後払い VISA デビットなどの前払い方式もある ● Flexible Payments 広く世界中で利用されてる Paypal に代表される電子送金サービス。日本にもイーバンクのメルマネなど類似のサービスがある。 ●銀行振込実店舗やインターネットバンキングを利用した前払い ●電子マネー（非接触型決済） NFC や FeliCa といった方式で、今後普及する可能性があるが、現時点では EC への支払い方法としての使用はハードウェア的に難しい ●コンビニ決済電子収納サービスを利用した前払いや後払いが利用可能 ●ショッピングクレジット／ローン信販会社と提携することで、分割払いが可能 VISA http://www.visa-asia.com/ap/jp/ MasterCard http://www.mastercard.com/jp/ American Express http://www.americanexpress.com/japan/ PayPal https://www.paypal.com/ Edy http://www.edy.jp/ Suica http://www.jreast.co.jp/suica/ Pay-easy http://www.pay-easy.jp/

(17)

EC サイトの立ち上げコスト

EC サイトを立ち上げるには、さまざまな金額のサービスがありますが、大きくは次の 2 つのどちらかになります。・自前でサーバなどの環境を用意する場合・EC サービスを借りる場合前者は EC サイトの自由度も高く、やろうと思えば高機能なショップが作れますが、立ち上げや運用のコストが高く、専門知識も必要となるので、多くの場合は EC サービスを借りて利用します。 ●自前でやる場合立ち上げコスト数千円〜数千万円自分でやればレンタルサーバ代金だけで出来るが、専門知識が必要なため、一般的には制作会社に依頼する。制作料は EC サイトの規模によるが数十万円〜数千万円までさまざま。運用コスト毎月の運用にも人件費などのコストが発生する。 ● EC サービスを借りる場合どの程度自分でやるのか、独自にお店をやるのか、デパート的な所に出店するのか、商店街に出店するのかなどによって、かかってくる費用は大きく異なる初期費用と運用コストをよく検討し出店理由や規模、商品内容によって出店先を考えた方がよい 0 円〜 BASE https://thebase.in 数千円〜カラーミーショップ http://shop-pro.jp 数万円〜 Amazon 委託販売 Yahoo! ショッピング　10 万円程度〜楽天　20 万円程度〜

(18)

■Adobe Bridgeで写真を選別 Adobe Bridgeの画面構成 Adobe Bridgeを使用すると、JPEGなどの一般的な画像ファイルはもちろん、Illustrator形式の画像も中身を確認することが可能になります写真の選別ランク付け画像を確認しながら、ランキングを付け、使用する画像を決めていきます。撮影時にはなるべく多く撮っておくと、最終的に使える画像も多くなりますデジカメなどの写真をパソコンに取り込みます 1) ディレクトリを指定し、画像を選択します 2) 使えそうな画像に★をつけていきます 3) ★の数で優劣をつけていき、最終的に使用する画像を決めます 4) フィルターパネルで★の数が多い物だけを表示することもできます 5) 各画像はダブルクリックでPhotoshopやIllustratorなど、対応したアプリケーションが起動します。★ の数などは自動的に記憶してくれるので、いつでも選択作業にもどれます 11 -ディレクトリ表示フォルダ内の画像が確認できる。撮影日など、その画像の属性を表示詳細なプレビュー表示

Bridge は Photoshop や Illustrator をインストールすると同時にインストールされています。また、Bridge 単体では販売されていません。 Bridge が用意できない場合は、フォルダーをアイコン表示にするだけでも充分です。アイコン表示で確認し、その後 Photoshop で開けば画 Illustrator ファイルを確認するには、 JPEG などと違い専用のソフトウェア環境が必要です。ランク付けした後は、必要なファイルを移動やコピーをしたり、逆に不要なファイルを削除するなどします。

(19)

■画面の大きさと画像の解像度 解像度

1990年頃のディスプレイは、解像度が72dpi（dots per inch：ディーピーアイ）でした。これは1インチ（約2.54cm）四方の中に72×72個のピクセル（ドット）がある状態を表しています。現在のディスプレイの多くは72dpiより遙かに高精細な表示をしています

• 昔のパソコン 72dpi

• 一般的な紙の印刷物 300～350dpi

• iPod Touch 5 326dpi（縦1136ピクセル、横640ピクセル）

dpiが大きくなると、文字を同じサイズで表示しても、実際の見た目は小さくなります。また、一般的な画像ファイルは今でも72dpiで作ります画面サイズディスプレイにはいろいろなサイズがあります。自分が制作しているWebサイトを人が見たとき、どれくらいのサイズで見えているのかを、物理的な大きさと、解像度の両方を考慮する必要があります。本来的にはそれぞれのモニターの特性にあわせたデザイン、表現を考えるべきなのですが実際には不可能です。どのくらいの画面サイズを基準に制作すればよいか、もしなにも判断材料がないならXGA（横1024ピクセル、縦768ピクセル）にしてみましょう。これは2010年頃に市販された最低スペックのノートパソコンの画面サイズです。この画面サイズでWebブラウザを画面いっぱいに表示すると、Webページの横幅が940 ピクセル程度になります。これくらいで作っておくとiPhoneやiPadなどでも問題なく表示できます人の目は横に2つついているため、大型のモニターは横長がものが見やすく、手で持つ端末は片手で持ったり、立ったままでの操作のしやすから縦長が多くなります。どんな画面サイズでも重要なのは意匠、雰囲気が見る側に伝わるようにすることです 12 -1024ピクセル 960ピクセル程度参考 DPI iPad3 9.7 インチ 2,048 × 1,536ドット解像度 264 dpi Nexus 10 10 インチ 2560 × 1600 ドット解像度 300 dpi DPI と PPI は同じ単位と考えて問題ありません。 Web ブラウザは右にスクロールバー、上部にツールバー、下部ステータス領域などがあるので、ディスプレイのサイズより少し小さい領域で作っておいた方が、多くのユーザーにとって快適な表示になります。

(20)

■Adobe Photoshopで画像加工 Adobe Photoshopの画面構成デジタルカメラで撮影した画像は、そのままではWebサイトで使用するには大きすぎるため、Photoshop で使用したいサイズに加工します。写真の一部分を切り抜いたり、色を調整することも可能です他のAdobe製品と同様に、パネルの位置や大きさなどは自由に調整できます 13 -ドキュメントウィンドウレイヤーパネルツールパネル Photoshop CS6 から画面が黒くなっています。以前のバージョンのように白っぽくしたい場合は、環境設定＞インターフェイスで変更出来ます。画面のレイアウトを初期化する場合は、このメニューから「〜〜をリセット」を選ぶ。 Photoshop の起動に時間がかかる場合は、次の対策が有効です。・再起動する・Photoshop 以外のアプリケーションを終了する・HDD（SSD）の空き容量を増やす・メモリーを増設するまた、一度の多くのドキュメントを開くと、処理が遅くなる場合があります。

(21)

ファイルを開く Adobe Bridgeから選別した画像を開くかます。Photoshopから直接開きますファイルメニュー　＞開く 14 -ダイアログの見た目は各 OS の設定によって異なります。また、前述の Bridge から右クリックで「Photoshop で開く」を選択すること可能です。

(22)

写真の色補正さまざまな方法で画像を調整します。撮影時に少し暗かった画像や、明るすぎた画像、赤みがかった画像なども、Photoshopで最適な状態に調整することができますレイヤーパネル下部から、調整レイヤーを追加しますレベル補正を選択すると属性パネルが開きますまずは自動補正ボタンを押してみましょう。Photoshopが最適な明るさに自動調整してくれます明るすぎたり、暗すぎたりする場合は、グラフの下にある三角を左右にドラッグして調整します。 15 -Photoshop ヘルプ / ヘルプとチュートリアル http://helpx.adobe.com/jp/photoshop/topics.html ADOBE PHOTOSHOP MAGAZINE

http://www.adobe.com/jp/joc/photoshop/photoshop/ Photoshop での写真加工は Web、書籍など参考文献が豊富にあります。本書巻末のお勧め書籍や Adobe の Web サイトなどをご覧ください。 Photoshop を触ると、いきなりフィルターメニューを使いたくなるのですが、撮影した画像はまずレベル調整などの下準備が必要です。

(23)

同様に、他の調整レイヤーも使ってみましょうトーンカーブ色相彩度これらは調整レイヤーは、レイヤーパネルの目玉マークをクリックすることで、表示非表示を切り替えられます。いつでも元に戻すことが出来るので、いろいろと試してみましょう 16 -通常は調整レイヤーを使う事で、非破壊編集をします。イメージメニュー＞色調補正＞レベル　でも同じ事が出来ますが、この場合は画像自体に変更を加えてしまうので、失敗した場合に元に戻れません。商品写真をより美味しそうに見せる仕事をレタッチと言います。レタッチはフォトグラファーがやることもあれば、専門のレタッチャーがいる会社に依頼することもあります。 Photoshop 超基本のテクニック 7 http://www.mdn.co.jp/di/articles/553/

(24)

トリミング画像の中から必要な部分を切り抜きますツールパレットから切り抜きツールを選択ドラッグで範囲を指定して ○をクリックすると切り抜きが実行されます。（画像の上でダブルクリックでも同じ操作になります。） 17 -トリミングツールは Photoshop のバージョンによって、若干見た目が異なります。 CS6 では遠近法に基づいた切り抜きも出来るようになっています。切り抜きを失敗した場合は、すぐに編集メニューの一番上で「切り抜きの取り消し」を選択します。この操作は全てに置いて共通で「UNDO（アンドゥ）」といいます。キーボードのショートカットは「ctl+z」です。非常によく使います。

(25)

保存出来上がった画像はPhotoshop形式で保存します。このファイルは後でもう一度画像を変更する時に必要になる重要なファイルですファイルメニューから保存を選択します解りやすい名前をつけてファイル形式はPhotoshopを選択保存しますここでは調整レイヤーを使っていますが、イメージメニューからレベル補正を選択しても同じ操作が可能です。ただし、直接画像を加工してしまうので、試行錯誤の自由度が下がります 18 -保存したら画面を閉じます。または画面を閉じようとすると、保存するかの選択になるので、そこから保存を選んでも同じです。 PSD 形式はレイヤーやガイドなど Photoshop 内で使用する情報を含んだ、Photoshop 専用のファイル形式です。仕様が一部公開されているので、他のソフトでも読み込むことが可能な場合があります。また、上下の互換性が高く、Photoshop CS5 で保存したファイルを CS4 や CS6 で開くことが可能です。（サポートされていない機能は無視されます）チェックボックスはこのままで

(26)

■Adobe Illustratorでロゴ作成 Adobe Illustratorの画面構成 Illustratorを使って、ロゴマークを作ってみましょう。PhotoshopもIllustratorも画像を作ったり、編集したりするソフトウェアですが、扱っている画像の考え方が大きく異なっています Photoshopは色の点々が集まったビットマップ画像を扱っています。デジカメの画像やアイコンファイルなど、ほとんどの画像ファイルがこのビットマップ画像です Illustratorはベクター画像というファイルを扱います。このファイルの中には、絵の描き方を指示する式が書かれていて、大きく表示しても小さく表示しても、画像が荒れない特性があります音楽でいうと楽譜（ベクター画像）とCD（ビットマップ画像）のようなものです 19 -ツールパネルドキュメントウィンドウさまざまなパネルがアイコン状態で並んでいる Illustrator 使い方 http://www.adobe.com/jp/support/illustrator/gettingstarted/index.html ADOBE TV http://tv.adobe.com/jp/product/illustrator/ ベクター画像パソコンや携帯端末のディスプレイ上で見えているのは、全てビットマップ画像です。ベクター画像は Illustrator などに代表される、線や塗りの情報の集合体です。ベクター画像内の情報は、画面表示時や印刷時に最適なビットマップ画像に解釈されて表示されいます。その場で計算して表示するので、綺麗な反面表示に負荷がかかります。

・SVG（Scalable Vector Graphics）

SVG ファイル自体はテキストファイルで、フォーマットは XMLです。これをブラウザがその場で解釈して表示します。拡大縮小しても美しく、Illustrator などで作成できます。

固定の画像というよりは、その場で生成される図などの可変表現に向いています。・CSS3（Cascading Style Sheets）

画像フォーマットではないのですが、CSS3 では好きなフォントを表示したり、文章を角丸の四角で囲んだり、奥行きのある形に変形させたりが可能です。

(27)

新規ドキュメント作成ファイルメニュー　＞新規新規ドキュメントを作成します。プロファイルはWebを選択し、単位がピクセルになっていることを確認しましょうサイズは初期設定から変更しても大丈夫です。ディスプレイにあわせて使いやすいサイズを指定します 20 -ここでは Illustrator をロゴマークの制作に使っていますが、最近では Web サイトのデザイン全体を Illustrator のようにベクター画像を扱えるソフトウェアで作る機会が増えています。解像度に依存しないグラフィックスとして、小さなディスプレイから印刷物まで幅広く使われています。印刷物を作るときは「ミリメートル」などを選択します。 Illustrator Help / 図解で覚える基本操作一覧 http://helpx.adobe.com/jp/illustrator/kb/225251.html

(28)

文字入力とアウトライン化なにもない状態からいきなりロゴマークを作るのは難しいので、文字を元にして作ってみましょうツールパネルから文字ツールを選択ドキュメント上のどこかでクリックし、ロゴマークの元にしたい文字列を入力文字が選択されている状態で、フォントや文字サイズが変更できます文字が決まったら、ツールパネルで選択ツール（左上の普通の矢印。何か操作をした後、このツールに戻しておくようにします）を選択し書式メニューからアウトラインを作成を選択します。これで文字が絵に変わりました。 21 -Illustrator では図形はすべてパスで描画しています。文字をアウトライン化することで、文字を図形に変換しています。アウトライン化する前の文字は何度でも打ち替えられます文字の間隔、フォント、大きさなども自由に変更できます。この文字に対する加工も Illustrator の得意分野です。

(29)

パスの加工文字は全体で1つのグループになっています。一文字ずつ色を変えたい場合などはグループを解除し、1文字ずつ変更できるようにしますオブジェクトメニュー　＞グループ解除この状態になれば、1文字ずつ色や形を変えていくことが可能です四角い点はアンカーポイントといい、Illustratorではこのアンカーポイントを増やしていきながら、間の線を描き、色を付けて絵を作っていきます 22 -青い点をアンカーポイントといいます。アンカーポイントとアンカーポイントを結ぶ線全体をパス、 3 点以上の点で閉じたパスをクローズパスといいます。 Illustrator の内部では図形をアンカーポイントの座標とその間をつなぐ線の角度で保持しています。オブジェクトの周りにあるのがバウンディングボックスです。上下左右の四角を動かすことで、拡大縮小や回転が可能です。バウンディングボックス自体を表示させなくするには、表示メニュー＞バウンディングボックスを隠す、を選びます。ペンツールや長方形ツールなどで、何か図形を書くと、パスが生成されます。パスが描かれるときに、アンカーポイントは意識することなく増えていきます。また、意図的にパス上にアンカーポイントを増やす場合はペンツールを使って、パス上をクリックします。 Learn Illustrator CS5 製品エキスパートによる Illustrator CS5 の基本操作と新機能を学ぶためのチュートリアルです。 http://tv.adobe.com/jp/show/learn-illustrator-cs5/

(30)

着色それぞれの文字に、好きな色を指定してみましょうツールパネル下部の塗りをダブルクリックカラーピッカーが表示されるので、色をクリックし選択します OKボタンをクリックすると色が塗られます色の選択方法は他にもいろいろあります。ウィンドーメニューからカラーパネルやグラデーションパネルなどを出して、塗り替えてみましょう。 23 -色には「線の色」と「塗りの色」の 2 種類があります。選択しているオブジェクト単位で色が変わります。複数のオブジェクトを選択しておけば、一気に変更することができます。単色と同様にパターンやグラデーションも利用できます。

(31)

保存出来上がったファイルを保存します。適切な名前を付けて保存しましょうファイルメニュー　＞保存保存ボタンを押した後に、オプション画面が表示されます。通常はそのままで大丈夫なので、もう一度OK を押します。 24 -ペンツールや、多角形ツールなど、直感的に図形を描画できるツールがあるので、それらを使って絵を描いてみましょう。アウトライン化した図形は、アンカーポイントを編集することで変形させられます。ファイルを古いバージョンの Illustrator で開く必要がある場合は、このプルダウンからバージョンを選択します。Photoshop と違い上位互換性しかありません。

(32)

参考資料　サイトマップの例

サイトマップや画面構成、ワイアーフレームを描く方法は PowerPoint や Illustrator、手書きなどいろいろあります。チームで制作する際には、完成のイメージを共有できるように、相手に伝わる資料であることが重要です。

(33)

参考資料　ワイアーフレームの例

うみそら雑貨店

ホーム　＞　T シャツ　＞　オーガニックコットン T シャツ (■) カート　　(?) お問い合わせ

オーガニックコットン T シャツ

販売価格 6,700 円 ( 税込 )

photo

photo photo photo

商品の仕様型番：***-*** ここの商品の使用に関する記述を入れる。あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 商品説明文が入る。あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 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 コメントタイトル　yyyy/mm/dd ★★★ By ID さん商品に対するお客さんからのコメント。あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 あいうえ 05 かきくけ 10 色　　赤数　　99 　カートに入れる・特定商取引法に基づく表記・支払方法について・配送方法・送料について・プライバシーポリシー Illustrator や Fireworks、InDesign など、複数の画面サイズに対応したソフトウェアを使用する場合とレイアウトを検討するときに便利です。

(34)

■Adobe Photoshopでデザインカンプを作る 新規ドキュメント作成ワイアーフレームをもとにWebページのできあがりを想定して、Photoshopのドキュメント上でレイアウトを作ります 25 -幅と高さはもっと大きくても問題ありません。使用している PC の環境によって適宜変更してください。解像度は 72、カラーモードは RGB を選んでください。カラーモードの CMYK は印刷会社に印刷依頼する場合に使用します。学校で使用する場合はすべて RGB で問題ありません。

(35)

画像の配置写真やIllustratorで作ったロゴなどを「配置」します。配置すると「スマートオブジェクト」になり何度でも大きさや位置を変更することが可能になります Illustratorの画像を指定すると、ダイアログが表示され「OK」をクリックします位置や大きさを決めたら、右上の「○」確定ボタンをクリックします同様に写真や、他の画像も配置します 26 -1 つの Photoshopファイルに複数の素材を統合する方法は他にも色々ありますが、ここでは配置を選んでいます。これは、配置することで、確実にスマートオブジェクトが作れるためです。スマートオブジェクトにすることで、拡大縮小や回転しても画像が荒れなくなるので、レイアウトの試行錯誤に向いています。スマートオブジェクトを使用すると、元の大きな画像を内部的に保持しているので、保存するときのファイルサイズが大きくなります。配置は元のファイルにリンクするのではなく、Photoshopファイルの中に取り込んでいます。スマートオブジェクトでは Illustrator のファイルも同様に扱えます。 Photoshop 内に取り込まれた Illustrator ファイルはスマートオブジェクトになるので、レイヤーパネルで右クリックし「コンテンツの編集」を選択することで、Illustrator が起動し再度編集することができます。

(36)

テキストの配置ツールパネルからテキストツールを選択し、ドキュメント上で左上から右下に向かってドラッグしますテキストボックスが作成されるので、文字を入力するか、メモ帳などから文字列をペーストします Photoshop上の文字を、HTML化する際に画像として扱うか、テキストとして扱うかを考えながら作業します。慣習としてテキストとして扱いたい部分はメイリオを指定しておきます 27 -もちろんロゴマークなども Photoshop で作ることが出来ますが、文字や図形以外の扱いはビットマップなので、拡大縮小や回転時に画像が劣化します。「メイリオ」フォントは Windows の標準フォントです。 Internet Explorer で Web サイトを表示する際に使用されています。

(37)

ワイアーフレームの要素をドキュメントに配置していきます。実際にWebブラウザで表示された際に、どのような見え方をするのか、目立たせたい部分はどう扱うべきかなどを考えながら、レイアウトや色使いを考えていきましょう 28 -sample.psd では html/final/ の見た目を作ってあります。レイアウトはいくらでも簡略化できます。

(38)

レイヤー構造 Photoshopは高度なレイヤー構造を持っています。階層化したり、調整レイヤーやマスク処理などを多用することで、さまざまな画像加工が可能になります 29 -グループレイヤー効果テキストレイヤー背景レイヤー新規レイヤー作成新規グループ作成スマートオブジェクトレイヤーの概念は他のソフトウェアでも頻繁に登場します。画面の奥から手前に重ねていく感覚をつかんでください。画面奥画面手前

(39)

スライス指定レイアウトしたPhotoshopファイルから、画像として必要な部分を切り出しますツールパネルからスライスツールで、使用する部分を指定しますレイヤーパネルで「背景」を非表示にしておくと、透明を表すチェック柄が表示されます Web用に保存ファイルメニュー　＞Web用に保存右上のプリセットから「PNG 24」を選択しますスライス指定した部分が複数ある場合は、この指定を繰り返します 2アップ表示にしていると、元の画像と見比べながら作業ができます 30 -背景は特殊なレイヤーです。非表示にすると、チェックボードが現れます。このチェックボードは実際には存在せず、透明な状態を表しています。いろいろな圧縮形式を試してみましょう。画質を調整し、なるべくファイル容量が小さくなるようにします。

(40)

保存場所を指定し、名前をつけて保存すると、画像がWebページで使用できる状態で保存されました Webサイトでよく使われる画像形式 Windowsでよく使われるBMP形式や、PhotoshopのPSD形式などは、Webサイトでの表示には不向きです。さまざまな環境から閲覧される可能性のあるWebサイトでは、以下のような画像形式（ビットマップ）を使用しますアイコン拡張子用途特徴 .png 写真、アイコン、図ふわっと透過できる（アルファチャネル対応） .jpg / .jpeg 写真多くの場合、一番ファイルが小さくなる。透過できない .gif アイコン、図 256色までしか扱えない。簡単にアニメーションできる。透過できる 31

-・JPEG（Joint Photographic Experts Group：ジェイペグ）非可逆圧縮、フルカラー対応、透過処理は不可

・GIF（Graphics Interchange Format：グラフィックス・インターチェンジ・フォーマット）可逆圧縮、アニメーション対応、最大 256 色、透過可能

・PNG（Portable Network Graphics：ポータブル・ネットワーク・グラフィックス）可逆圧縮、フルカラー対応、アルファチャネル透過対応 PNG 形式は影や半透明などの表現も可能な万能選手で、画像はだいたい PNG にしちゃえば大丈夫です。ただし、古いブラウザでうまく表示できない場合や、JPEG に比べてファイルサイズが大きくなる場合もありこれ以降、ファイル名は半角小文字の英数字でつけてください。半角スペースも含め、記号はハイフン「-」とアンダースコア「_」以外は使用しないようにします。 OS や環境によってはそれ以外の文字、日本語も使えますが、一般的には上記条件でファイル名を付けておくのが無難です。 Wiki　ファイル名 http://ja.wikipedia.org/wiki/ ファイル名

(41)

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 サイト制作というのは特別な事ではなく、これからの時代は当たり前の知識としてとらえておくべきでしょう。

(42)

■Adobe DreamweaverでWebページ作成 Adobe Dreamweaverの画面構成加工した写真画像やロゴを組み合わせて、 ECサイトの詳細画面をつくってみましょう HTMLファイルを作る文章ファイルをコンピューターが意味を理解できるようにしたものがHTMLです。見出しや箇条書きにあたる部分、強調したい部分などをタグで囲っていきます。このタグをつけていく作業をマークアップといいます。写真など、意味のある画像もタグで入れていきます。画面外の要素としては<title>タグなども重要です。そのページに何が書かれているのか、端的に表した題名を書いておきます。 32 -ドキュメントウィンドウプロパティパネルコードビューデザインビュー Dreamweaver デベロッパーセンター http://www.adobe.com/jp/devnet/dreamweaver.html

Dreamweaver は Web サイトや HTML の IDE（統合開発環境）です。素材を配置すると、自動的に HTML や CSS を書いてくれるわけではありません（一部自動的に生成される機能もあります）。あくまで、それらの言語を理解している人に対しての作業効率化、支援ソフトウェアです。

HTML や CSS などはテキストファイルなので、メモ帳などのテキストエディタでも作成、編集は可能です。

(43)

新規ドキュメント作成ファイルメニュー　＞新規　＞空白ページレイアウトは＜なし＞、ドキュメントタイプはHTML5を選択し、作成をクリックしますコードビューに上記のように書かれていれば、HTMLを記述する準備が出来た状態です 33 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 HTML には大きく分けて、4 世代あります。HTML3、4 が主流だった頃は、HTML を拡大解釈し文章の構造だけでなく、ビジュアルデザインも HTMLで作っていました。HTML4 の頃から CSS( カスケーディングスタイルシート、後述 ) が使われ始め、文章構造とビジュアルデザインを分離するようになりました。そして XHTMLでは、HTML は意味づけ、CSS はビジュアルデザインという棲み分けで制作しています。ところが XHTML は HTML より厳密なマークアップを制作者に求めたり、XHTML の後に XML(eXtensible Markup Language) への移行を目的としていたために、かなり窮屈な言語になってしまいました。そこで、もう一度原点に立ち返り、Web の表層のための言語して HTML を次期バーこの Dreamweaver のテンプレート機能を使うと、さまざまなレイアウトを容易に作ることが可能です。 1 行目はこの書類が html であることの宣言文。 2 〜 10 行目が html 本体。 3〜 6 行目が head 領域。Webブラウザ上では表示されないが、さまざまな情報が書かれている。 8 〜 9 行目が body 領域。Web ブラウザで画面に表示される部分。

(44)

それぞれの部品を入れる枠組みを作ります。上図の赤い枠とオレンジの枠ですあわせて、このページ自体の題名を<title>にいれておきましょう。 34 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 この赤やオレンジの枠で考えていくことをボックスモデルといい、後述する CSS の重要な考え方の 1 つです。HTMLではこのボックスを <div> や <header> などのタグで指定します。これらのタグは入れ子構造で表現されます。 <header> と <footer> は HTML5 のタグです。なんらかの事情で XHTML など下位バージョンで表記する必要がある場合は、すべて<div> で書き換えてください。

(45)

Wordやメモ帳などから原稿をコピーし、デザインビューで、目印に書いておいた「b」を選択し、テキストをペースとしますコードビュー側では、このように<p>タグがついた状態になっています。 35 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 <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 MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1 デザインビュー側にペーストすると、改行情報などもタグに置き換わります。 <br> がその場で改行です。このタグには閉じタグがありません。 <p>で囲まれた場所は段落表現です。デザインビューとコードビューは同期しています。同じファイルを表示しているので、どちら側で編集しても同じです。 Adobe Dreamweaver デベロッパーセンター

(46)

箇条書きとして表現したい場所を選択し、プロパティパネルからリストを選択同様に金額の部分を選択して、強調を選択します 36 -デザインビューとコードビュー、お互いの編集結果を反映するには「F5」キーを押すか、ファイルを保存します。太字や斜体など、ワンクリックで反映されます。

(47)

HTMLファイルの保存ここで一度保存します。フォルダを作って、その中に保存しておきましょう。 37 -フォルダは予め作ってあっても問題ありません。フォルダ名も半角英数字でつけましょう。ファイル名は　index.html が一般的ですが、特に決まりはありません。 index.html は特殊なファイル名でフォルダの中に複数の HTML ファイルがある際に、優先的に表示されます。

(48)

画像の挿入前に作った商品写真やロゴなどの画像を同じディレクトリに移動しますその画像をDreamweaverのデザインビューの、「a」と書いてある部分を目標にドラッグアンドドロップしますダイアログが出たらOKをクリックしデザインビューに画像が入ったら、プロパティパネルの幅を320と入力します。 38 -HTML ファイルと画像ファイルが違うフォルダに入っていると、パス（階層構造）を考慮する必要があります。ここでは説明を簡単にするために、あえて HTML と同じフォルダに画像を入れます。この操作が難しい場合は、挿入メニューからイメージを選択し、ファイル指定ダイアログで該当する画像ファイルを選択します。アクセシビリティダイアログは、そのまま OK を押してスキップしても問題ありません。もし画像を表示できない場合に、代わりに表示する文字を書いておく項目で、必要であれば後