Webデザインの基礎01

(1)

Webデザインと広告・広報

電子商取引＆ビジネス情報管理

１．Ｗｅｂ社会を知る

●ウェブで私達の生活はどう変わったのか？ • インターンネットの「検索」機能を活用した情報収集。 • ソーシャルネットワークによるユーザ同士の情報共有。 →価格ドットコム，食べログ ※社会全体の情報の流れが，個から個へ，個から多へと交差している

●Webデザインをするにあたり，意識

をすること

情報発信者として意識することは？

Webページ作成の基本言語

• 文章構造 → ＨＴＭＬ • 視覚表現 → スタイルシート（ＣＳＳなど） • 機能拡張 → スクリプト（JavaScriptなど）スタイルシート文書の見栄えに関する情報（字体や文字の大きさ、色、行間の幅、修飾など）をひとまとめにしたデータやファイルなどのこと。スクリプトソースコードを記述したら即座に実行できるようなプログラムのこと。

ＨＴＭＬ

• Hyper Text Markup Language

• タグというマーク（命令）を使って、文書

の構造を指定

• 文字の大きさや色の変化、画像を表

示等ができる。

(2)

• ＜タグ名＞の記号で囲まれた

半角

の英数字

のことで、このタグを使っ

てWebページは作られている。

○<HTML>～</HTML> HTML文書の始めに<HTML>タグを記入し、HTML文書の終わりに</HTML> タグを記入して、HTML文書全体をこのタグで囲みます。ブラウザに把握させるために、必ず記入します。 ○<HEAD>～</HEAD> <HEAD>～</HEAD>を記入して、この中にヘッダー情報を記入します。ここには、Webページを作成すための準備をする場。基本的には<TITLE>タグ以外の情報はブラウザ上には表示されません。 ○<TITLE>～</TITLE> <HEAD>～<⁄HEAD>の中に記入してタイトルをつけます。ここで付けたタイトルは、ブラウザのタイトルバーに表示されるほか履歴に残ったり、お気に入りに登録するときのタイトルとなります。 ○<BODY>～<⁄BODY> このタグの範囲内に記入された内容が、ブラウザ（画面上に）に表示されます。この中にいろいろなタグを使いながら本文を記入していきます。画像を表示する<IMG>タグや、リンクを貼る<A>タグなどをこの中に記入し、表示させたい内容を作っていきます。 ○ <b> ～ </b> → 「文字を太字にするタグ」 ○ <i> ～ </i> → 「文字を斜体にするタグ」 ○ <s> ～ </s> → 「文字に取り消し線を引くタグ」 ○ <u> ～ </u> → 「文字に下線を引くタグ」 ○ <br> → 「改行を行なうタグ」 ○ <hr> → 「水平線を引く」例：<hr size="10" color="#0000ff" noshade>

ＨＴＭＬ練習その１

<html> <head> <title> HTML 練習</title> </head> <body> <h1>釧路の観光</h1> <h2>釧路という異国を旅する</h2> </body> </html>

保存方法

ファイル名に注意する！

拡張子を「.html」にする

(3)

<h1>釧路の観光</h1> <h2>釧路という異国を旅する</h2> <p>北海道の東南部に位置する釧路には広大な釧路湿原があります。その湿原により独特の風土、文化が培われてきたように感じます。どこか遠くの国を連想させてくれる釧路は、日本の中の「異国」かもしれません。</p> <p>釧路は、夏は涼しく、空気も水も海産物、農産物も安全安心です。 </p> <br /> <h2>釧路食べる観る遊ぶ</h2> <p>釧路には，４大グルメがあります。</p> </body> </html>

色について

ディスプレイで見ている色と，実

際に印刷した際の色が若干違

うことがある。それはなぜか？

• ディスプレイは，光の三原色を用いる。 • 印刷は色の三原色を用いる。 • 光と色の基準となる三原色がことなるため，ディスプレイと印刷したものが異なることがある。光の三原色を混ぜると → 白色の三原色を混ぜると → 黒プリンタには、ＣＭＹのほかに、黒があるのはなぜか。ＣＭＹだけでは、純粋な黒ができないため、別に黒を用意している。

全体の配色の決定

<body bgcolor="" text="" link="" alink="" vlink=""> </body>

(4)

ＨＴＭＬの色について

色の数値は，「１６進数」を用いる 10 11 12 13 14 15 「０，１，２，３，４，５，６，７，８，９，Ａ，Ｂ，Ｃ，Ｄ，Ｅ，Ｆ」

＃００

００

００ Ｒ

Ｇ

Ｂ

#000000=黒， #FFFFFF=白， #FF0000=赤・ #00FF00=緑， #0000FF=青 ○ <font > ～ </font> → 「書式を設定するタグ」例：<font size=“5"> ～ </font>

<font color="#000000"> ～ </font> size="サイズ" ※サイズのところに１～７を入れて指定します。 color="#000000" 色は，6桁の16進数で指定します。

ソーシャルメディアとは

誰もが参加できるスケーラブルな情

報発信技術を用いて，社会的インタ

ラクションを通じて広がっていくよう

に設計されたメディア

２．ソーシャルメディアを知る

スケーラブルリソースの量に比例して全体の処理能力が増す

ＳＮＳの目的

ソーシャル・ネットワーキング・サービスの主目的は，人と人とのコミュニケーションにある。友人・知人間のコミュニケーションを促進する手段や場，あるいは趣味や嗜好，居住地域，出身校，「友人の友人」といった自身と直接関係のない他人との繋がりを通じて新たな人間関係を構築する場を提供している。 ※ＳＮＳ上では，企業とユーザは対等の立場にある

代表的なソーシャルメディア

• Facebook・・・ • Google＋・・・ • ＬＩＮＥ・・・ • Instagram・・・ • Vine・・・ • Twitter・・・ • Pinterest・・・ • Snapchat・・・

(5)

ＳＮＳによるビジネスの広がり

• ＳＮＳを活用して、個人やグループの好みに合わせた広告配信など、関連ビジネスが広がっている。例：FacebookをCRM施策に展開するソーシャルリスニングツール「eMSocial」

Webの標準化技術

①Webページの作成で使われる技術

Webの標準化技術は，

「Ｗ３Ｃ（ウエ

ブ技術の標準化を推進する組織）

」

によって決められている。

「HTML」

HyperText Markup Languageは，ウェブページを作成するために開発された言語。W3Cによって標準化が行われており，大半のWebブラウザは標準で

HTML文書の解釈・表示が行える。

「CSS」

Cascading Style Sheet(カスケーディングスタイルシート)の略で，スタイルシート言語の1つ。Web ページのデザインやレイアウトを定義するもの

「Java」

プログラミング言語およびコンピューティングプラットフォーム。ユーティリティ，ゲーム，ビジネスアプリケーションなど，最先端のプログラムの基礎となっている。

「PHP」

Hypertext Preprocessorは，Webページを記述することに特化したサーバーサイドスクリプト言語。Web上で動く掲示板やチャットなどを作成するのに便利なプログラム言語。

「Perl」

Common Gateway Interface の略で，WWW サーバの中で外部プログラムを実行するための仕組み

「Flash」

声や動画，ベクターグラフィックスのアニメーションを組み合わせてWebコンテンツを作成するソフト。また，それによって作成されたコンテンツ。

＜箇条書きを設定するタグ＞

<ul> ～ </ul> 番号の無いリストを作るためのタグ <li> ～ </li> リストの項目それぞれの頭につけるタグ。これが無いと次の記号がつきません。例：<ul> <li>私は･･･</li> <li>あなたは････</li> </ul>

(6)

<ol> ～ </ol>

番号つきのリストを作るためのタグ。

<li> ～ </li>

リストの項目それぞれの頭につけるタグです。これが無いと次の数字がつきません。例：<ol> <li>私は･･･</li> <li>あなたは････</li> </ol> <h2>釧路食べる観る遊ぶ</h2> <p> 釧路には，４大グルメがあります。</p> <ul> <li>釧路ラーメン</li> <li>釧路の蕎麦</li> <li>炉端焼き</li> <li>寿司・さんま</li> </ul> <p>釧路人気ランキング</p> <ol> <li>勝手丼</li> <li>ザンギ</li> <li>地酒</li> </ol> <br />

<MARQUEE direction=“left” behavior=“scroll”> 美味しい釧路味三昧 </MARQUEE>

</body> </html>

画像の挿入

• 画像名は，拡張子まで入力する • ファイル名は，半角英数字にする • ファイルサイズを小さくおさえる →リサイズするソフトウエア等があるので活用する

Webページで使用できる画像ファイル

•jpg

•gif

•png

画像の挿入のタグ

<img src="img/kushiro01.jpg“

width="320"

height="240"

alt="kushiro01">

画像の場所幅高さ表示されない場合の文字列 <div align="center">センターに表示します</div> →「位置を指定する」 ※align=" " は水平方向アライン valign=" " は垂直方向の指定を行う。ブイアライン

(7)

背景に画像！

＜background ＝

”表示したい画像の名前.拡張子”＞ → 「背景に画像を表示する」

<br />

<HR size="3" color="red" width="80%" align="center"> <MARQUEE direction="left" behavior="scroll"> 美味しい釧路味三昧 </MARQUEE>

<br />

表作成

• <table> タグを使用する

<td> → Table Data

<tr> → Table Row

列を増やす

行

列

行を増やす

列と行

(8)

ＣＳＳの基本

CSS （Cascading Style Sheets、カスケー

ディング・スタイル・シート）

ウェブページのスタイルを指定するための言語。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートという。

ＣＳＳ基本書式

セレクタ

｛

プロパティ

：

値

；｝

どこのどこのどうする

例：

ｈ１

｛

ｃｏｌｏｒ

：＃

FF００００

；｝

CSSで，<h1>のフォントカラーを

#FF00FFにするには，どのように記

述するのか答えなさい。

＜解答群＞｛｝ｃｏｌｏｒｈ１ #FF00FF ：；

ＣＳＳによる色表現書式

＃ＦＦ００００

＃Ｆ００

ｒｇｂ（２５５，０，０）

ｒｇｂ（１００％，０％，０％）

「赤」を表している

(9)

外部CSSのファイルへリンク

＜解答群＞

media rel href type

フェイクアウト

• ＣＳＳ作成のボックスの最大幅と最小幅を指定するもの

ＳＩＭについて

SIMとは

• 電話会社の通信回線を使い、通話やデータ通信を行うのに必要なICカードのこと

ＳＩＭロック・ＳＩＭフリー端末

• SIMロック端末 – NTTドコモ、ソフトバンク、au の特定のSIMカードのみ使える端末 • SIMロックフリー端末 – SIMロックがかかっておらず、どこの携帯電話会社のSIM カードでも利用できる端末

(10)

格安ＳＩＭとは？

• MVNO（仮想移動体通信事業者、Mobile Virtual Network Operator）という事業者が大手通信キャリアに比べて低価格で提供しているSIMカード

MVNOとは

• 携帯電話回線などの無線通信基盤を他の通信事業者から借り受け、独自のサービスをくわえて提供する企業 • 回線をまとめ借りし、その範囲内でどれだけのユーザーにどの程度の容量と速度で通信させるかを調整することで成り立っている

なぜ格安SIMは安いのか？

（１）回線をまとめて借りている（２）販売にかかわる様々なコストを削減（３）データ通信量や通信速度を制限している

格安SIMのメリット

• 月額料金が安くなる • プランを柔軟に選べる • 2年縛りがない 初期費用（SIMカード代） 3,000円（税込3,240円） 110MB/日コース 1,600円（税込1,728円） 170MB/日コース 2,080円（税込2,246.4円） 3GB/月コース 1,800円（税込1,944円） 5GB/月コース 2,150円（税込2,322円）・ナンバーポータビリティが可能 ・速度は，150mbps ・通信容量使用後は，200kbps http://service.ocn.ne.jp/mobile/one/?link_id=in_mobileone_navi_0001

格安SIMのデメリット

• キャリア関連サービスができない（キャリアメール・キャリア決済） • キャリアによる端末価格の割引を受けられない • テザリングを利用できないケースあり • データ通信の制限が厳しい • 話料は20円（税抜）/30秒で、基本的に無料通話分はない通信キャリアから提供されていたキャリアメールができなくなる。（@docomo.ne.jp，@ezweb.ne.jp，@softbank.ne.jpなど）

キャリアメールとＷｅｂメール

• キャリアメール • 「・・・@docomo.ne.jp」「・・・@softbank.ne.jp」といったアドレスで使用する、携帯電話キャリアが提供するメールサービスのこと • Ｗｅｂメール • Googleが提供するGmail、Yahooが提供するYahoo!メール、 MicroSoftが提供するOutlook.comなど。インターネットに接続してWebメールサイトやアプリからアドレスとパスワードを設定すれば誰でも簡単に利用することができる。

(11)

• ＳＩＭフリー端末を用いて，格安ＳＩＭを使用する際のメリットやディメリットを述べ，どのように活用するべきか，格安ＳＩＭを提供する会社の営業担当になったつもりで述べなさい。