今回は昨今の事情により、急に利用することが多くなったWeb会議について説明するとともに、実際のツールの使い方について解説していきます。

 

Web会議とは

インターネットを利用することで、その場にいなくてもビデオや音声のやり取りで、資料の共有などをし、会議を行うことを広くWeb会議と呼びます。

Web会議は世界中どこででもスマホやパソコンが有ればどれだけ離れていてもインターネットを通じてコミュニケーションを取り合うことが出来ます。本来であれば移動費など、コストがかかる遠方の顧客との会議などで利用することで、コストカットをすることが出来ますが、やはり直接会って会議をするよりかは意思の疎通に何があるため、難しいテーマの会議の場合には対面での会議をおすすめします。また、機密情報などが深く関わる会議などの場合後述のZOOMはセキュリティーの脆弱性が指摘されているため利用をおすすめできません。

 

Web会議の注意点

音声・映像を扱うため、Webカメラ、マイクが搭載されているデバイス、または別付けのWebカメラやマイクを接続する必要があります。事前に用意できているか確認しておきましょう。

 

Web会議のツール

では実際にWeb会議を行う場合利用できるツールには何があるのか、どう使えば良いのか、今回は、SkypeとZOOMを紹介します。※いずれも基本無料

 

Skype(スカイプ)

マイクロソフト社の子会社でインターネットを利用した電話、チャット、ビデオ通話が可能です。

 

使い方

１.スカイプ公式サイトからソフトをインストールする。

(スマホ・タブレットの場合はアプリストアでスカイプを検索しインストール)

 

２.　スカイプアカウントを作成する。

３.　会議をしたい人に先程作成したアカウントを伝える。

４.　会議を開催する。通話・チャット・ビデオ会議)

 

最大１０人まで開催可能。

 

 

ZOOM(ズーム)

無料で最大１００人まで参加可能なWeb会議を開催できます。有料プランに契約した場合１０００人まで増えるので、大規模な会議に適しています。また、主催側がアカウントを持っていれば会議の参加者がアカウント登録を新規でする必要がないため、開催が容易なのが人気なツールです。

 

使い方

• ズーム公式サイトからソフトをインストールする。
• スカイプアカウントを作成する。
• 会議を開催し、リンクを参加者に共有する。

 

このように手順が非常に簡単で使い勝手が良いので利用者が世界で２億人を突破するほどなのですが、リンクを知っていれば誰でも会議に参加できるため、参加していないはずの何者かが妨害する、などのトラブルも発生しているため、利用には注意が必要になります。

今回は企業のプロモーションや、手早くネットで広告を出すときによく利用される、リスティング広告について説明したいと思います。

 

リスティング広告とは

リスティング広告とは、顧客が検索エンジン(GoogleやYahoo)などで検索した際、画面の一番上や下に広告を掲載できる機能のことで、一月何円という料金形態ではなく、主に広告をクリックした際に1クリック〇〇円というように料金が発生していくWeb広告のことを主にリスティング広告と呼称します。

 

企業で広告を出す際、今までのチラシや看板などの場合は、一月〇〇円、担当者と打ち合わせをして掲載する。というわかりやすい形態だったものがWebの世界だと料金形態が複雑になってしまいます。今回は主に利用されるGoogleのリスティング広告の掲載方法を紹介するとともに、リスティング広告でのターゲットの設定方法を紹介していきます。

1.Googleアカウントを作成する。

広告は全てインターネットでの手続きで完了可能です。まずは広告運用のアカウントを作成しましょう。普段利用しているアカウントでも広告の運用は可能ですが、なれない間は情報がごちゃまぜになってしまい、混乱する可能性が高いので、広告用に別途アカウントを作成しましょう。

 

 

2.Google広告にアクセスし、情報を入力する。

所属している国などを記入する欄が表示されるので設定してください。

その際に最初のキャンペーン（広告）の作成画面が出てくるので、すでに決まっている場合は入力する。まだ考えたい人はざっくりとどんな広告を打ち出したいのかを入力してください。その後に料金の支払方法や住所などの入力画面が出て来るので、全て入力をしてください。→アカウントの作成完了

 

 

3.キャンペーン（広告）を作成する

広告の作成ボタンがあるのでクリックし、作成します。細かく広告は設定することができて、

・顧客が検索したワード

・顧客の利用している場所

・表示させたい内容

などを設定することが可能で、

いずれの項目も絞れば絞るほど価格を抑えることができて広げるほど価格が高騰するため、予算を考えながら広告の設定をしていきます。

広告を打ち出したい製品・サービスに合わせてエリアやワードを絞り、費用対効果を最大化させましょう。

広告の予算は上限を設定することで、顧客のクリック数が一定数を超えた際に自動で広告がストップする設定があるため、気づいたら法外な金額が請求されたということもないので安心して利用することが可能です。

 

 

4.広告を分析して運用する

ある程度広告を運用しているとワードごとや、地域ごとの費用対効果がデータとして出てくるため、そのデータを活用してより広告を効率化することが可能になります。

 

広告を掲載する事自体は誰でもできる簡単な作業ではありますが、運用をして効果を上げていくのは専門的な知識が少し必要になります。そのため広告運用代行業者に依頼をするのも方法として有効です。

今回はSEO対策や、自社サイト構築の際に散見する「オウンドメディア」について解説するとともに、実際に企業で活用する場合のコツと注意点について紹介していきたいと思います。

 

オウンドメディアとは

オウンドメディアとは、企業が自社内で構築したブログやウェブサイトから消費者に向けて情報を発信するもののことを指します。潜在顧客の段階から、情報を発信し続けることで、消費者の購入意欲を促進することが主な目標であり、オウンドメディア単体で収益を上げるという考え方ではなく、消費者のオウンドメディアから商品の購買への流れを作り出すことが主な役割となっています。

 

オウンドメディア作成のコツ

では、実際にオウンドメディアを自社内で行った場合、どのように構築をすると、より効果的な運用が可能になるのでしょうか。

 

• ペルソナをしっかりと設定する。

オウンドメディアの目的は潜在顧客の獲得であるため、ターゲットを定めなくては属性が曖昧になってしまい、商品の購入への誘導が難しくなってしまいます。ターゲット・ペルソナをしっかりと定めた上でメディアを構築していきましょう。

 

• 販売したい商品に関連させる

オウンドメディアはただブログ記事を作成すればよいという話ではありません。最終的なゴールは商品の購入である以上、その商品に関連する情報を掲載していくことを意識していきましょう。例えば、データサイエンス関連の業務の受注件数を増やすためにオウンドメディアを構築する場合は、データサイエンスに関連する事柄、例えば「ランダムフォレストのやり方」や、「機械学習とAIの違い」など、データサイエンスと関わりのあるコンテンツを用いてメディアを構築していく必要があります。

 

 

オウンドメディアの注意点

オウンドメディアは情報を掲載する手間以外にはそれほど金銭的コストも掛からず、始めやすい集客の手段です。しかし、情報の量が集まるまでは思ったような効果を出しにくく、途中でやめてしまうケースが多々あります。

オウンドメディアを始めたい場合はある程度、半年から１年くらいは全く効果がないと思って根気強く情報の量を貯めていく必要があるため、オウンドメディアのみを集客の手段として利用するのではなく、オウンドメディアを長期的な集客の軸としつつ、短期的に集客をしていく場合は前回の記事で紹介した、SNS運用など、別の方法を用いて集客をしていくことをおすすめします。

 

前回の記事のリンク

今回は個人・企業でSNS運用をしていく上で必須なハッシュタグについて説明をしていきます。

 

ハッシュタグとは、SNS投稿の文章の中で「#」が前についていてタグのようになっているキーワードのことを指します。Twitter・Instagramではそのハッシュタグをクリックすることができるようになっており、クリックすると同じハッシュタグをつけた自分や他人の投稿をチェックすることができるため、最近ではユーザーがハッシュタグから気になるワードを検索して、効率的に自分の望んだ投稿を探し出すことが一般的になりつつあります。

 

そのため、企業がSNS運用をする際はこのハッシュタグをより効果的に活用していく必要があります。

 

では、ハッシュタグを使うメリットを踏まえた上で、より効果的なハッシュタグの付け方についてご紹介していきます。

 

• 不特定多数のユーザーの目に触れる機会を得ることができる。

SNSは基本的にユーザーとユーザーのつながりから広がるネットワークであることから、企業の活用には向いていないとされてきていました。しかし、前述の通り、ハッシュタグから検索をかけるユーザーが多い昨今のSNS事情においては、企業も１ユーザーとして、発信することができるため、活用次第ではより企業のコアなファンを作ることができる有用なツールとなっています。しかしそのためにはハッシュタグの効果的な運用が求められるため、既存のネットマーケティングの手法が当てはまりにくいというデメリットも存在しています。

 

• ハッシュタグによってはユーザーが自主的に拡散してくれる

ハッシュタグを利用したキャンペーンや、プレゼント企画を用意することで、企画に参加したいユーザーが自主的に他のユーザーに拡散してくれるため、広告費を抑えることができます。場合によっては費用を全くかけずに集客ができることから、SNSは「無料集客のツール」と呼ばれることもあります。

 

以上を踏まえた上で実際にハッシュタグを投稿につけていく際にどのようにハッシュタグをつけたらいいのかを説明します。

 

 

１　オリジナルのキャンペーンなどの被らないワード

あえてワードを絞ることで、よりコアな潜在顧客の獲得につなげていきます。

オリジナルのキャンペーンを打ち出す場合などは特に、被らないことを意識することが重要です、被ってしまうとキャンペーンでリーチした顧客の数を正確に測ることができなくなり、効果の測定が難しくなってしまいます。

 

２　人気なワード

まず、SNSを始めた場合は、人気のワードを積極的に利用していくことが重要になります。

人気のワードはそれだけ関わっているユーザーも多いためSNSを始めたての場合は必須です。

 

３　20代を意識した内容

基本的にこのようなSNSを活用しているのは20代が主なため、発信していく内容も20代に馴染みやすいハッシュタグ、投稿を意識してください。もし、SNS運用を任せる事ができる社員がいる場合は、できるだけ若い年齢の人に任せたほうがより、ユーザーに刺さりやすい投稿・ハッシュタグを選ぶことが比較的得意なのでおすすめです。

インターネットブログや動画が普及して、その中身だけではなく、潜在顧客にクリックしてもらうためのサムネイルは非常に重要なものになってきています。

今回はそのサムネイルの概要と作成のコツを説明していきます。

 

サムネイルとは

サムネイルとは英語の直訳では「親指の爪」となってしまいますが、そのままの意味ではなく親指の爪のように小さい画像でも簡潔に中身を伝える事のできる記事や動画の表紙画像のことをサムネイルと言います。

 

例えば

「美味しい肉じゃがの作り方」

の記事や動画を作成するときに文字だけだとどの様な肉じゃがを作るのか、オーソドックスな肉じゃがなのか、それとも普通の作り方ではない作り方ではない肉じゃがなのかが、これから見ようとしているユーザーに上手く伝えることができずに、記事を開く前にユーザーの大半が離脱してしまいます。

 

しかし、離脱を防ぐためにサムネイルを用意することでタイトル文だけでは伝えることのできなかった情報をユーザーに的確に伝えることができ、離脱するユーザーを限りなく減らすことができ、ある程度の概要をサムネイルから読み解くことができるため、記事を開いたユーザーの満足度も高くなるため、サムネイルの設定は今のブログや動画においては必須です。

 

サムネイルを作成するポイント

サムネイルを作成する際、画像を切り抜いたり、文字を書き込んで凝ったサムネイルを作ることも当然可能ですが、その技術がない場合でも、少しのポイントを抑えておけば十分に効果的なサムネイルを設定することが可能です。

 

1.記事に則した画像を設定する

当たり前のことではありますが、記事と関係のない画像にすることは、意味がありません。ユーザーの満足度も下がり、SEOも下がるため必ず記事に則した画像を設定するようにしてください。

 

2.できるだけ目立つ画像にする

正直サムネイルは目立っていれば良いというところもあります。ユーザーの目を引くような画像が大切です。

3.少し結論を見せる

画像の中に結論を入れることができる場合は結論をサムネイルに入れてください。ユーザーが一番最初に知りたいことは結論で、その後に過程となるため結論を最初に結論を理解できるようにすることで、ユーザーの興味を引き、満足度を向上させることができます。但し、結論を最後まで取っておきたい記事の場合はこの限りではありません。

 

4.テイストを統一する

ブログや動画のサムネイルの場合、複数記事が同時に見られることになり、その差異テイストがバラバラだった場合には全体がごちゃついた印象になってしまうため、テイストを統一することで総合的なユーザーの満足度の向上につなげられます。

今回はSNSや動画を自社サイト内に実際に貼り付けようと思った際にどのように貼り付ければ良いのかを説明していきます。

皆さんも普段企業のHPを見たときにYouTubeの動画やTwitterやInstagramなどのSNSがサイト内に表示されているということを目にしたことがあると思います。傍から見るとすごく貼り付けるのは難しいのだろうとお考えになるかもしれませんが、実は動画やSNSを提供しているYouTube社やFacebook社が簡単に自社サイト内に貼り付けられるようなサービスを作ってくれています。今回はそのサービスの利用方法をよく企業HPで利用されるYouTube、Facebook、Instagramに絞り紹介させていただきます。

※動画・SNSは著作物です、自社のもの以外を使用する場合は注意してください。

Ⅰ　まずは、サイトに埋め込みたいYouTube動画をYouTubeにアップロードするもしくは貼り付けたい動画までYouTube内で移動する

Ⅱ　動画タイトルが表示されている場所の右下の方に「共有」と書いてあるボタンがあるのでクリックする

Ⅲ　クリックして表示された項目の中の「埋め込む」と書かれているボタンをクリックする

Ⅳ　<iframe>から始まるコードをコピーして自分のサイトの貼り付けたい場所にペーストする(この際コードに記載されているWidth『横幅』Height『縦幅』の数値を変更することでサイトに貼り付ける際のサイズ変更も可能です。)

Ⅰ　表示させたいFacebookページを用意して、Facebookページソーシャルプラグインにアクセスする

(https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP)

Ⅱ　表示させたいFacebookページのリンクをコピーしてプラグイン内の「FacebookページのURL」に貼り付け、「幅」「高さ」を指定し、「コードを取得」と書かれているボタンをクリックし、表示されたコードをコピーし自社のサイトの貼り付けたい場所にペーストする。

Ⅰ　自社サイトに埋め込みたい投稿に移動し、右下にある「…」と書かれている場所をクリックする

Ⅱ　「埋め込み」をクリックし表示されたコードをコピーし自社のサイトの埋め込みたい部分にペーストする

Ⅰ自社サイトに貼り付けたいアカウントにログインしておきSnapWidgetにアクセスする(https://snapwidget.com/)

Ⅱ「Get a free widget」と書かれたボタンをクリックし、アカウントを作成する(ニックネームとメールアドレス、パスワードで作成可能です)

Ⅲ「CHOOSE A SERVICE」をクリック、そのままInstagramを選択後、サイトに表示させたい形を選択しクリックする

Ⅳ「CONFIGURE WIDGET」をクリックしUsernameなどを指定し、下の方にある「GET WIDGET」をクリック、表示されたコードを自社サイトに貼り付けたい部分にペーストする

以上になります。次回はブログや動画におけるサムネイルの重要性についてご紹介します。

今や利用していない人はいないと言われているSNS(ソーシャルネットワーキングサービス)。実際どのようなものがあるのか流行りに乗り遅れてイマイチ把握できてない方も多いかと思います。そこで今回は主要なSNSを紹介するとともに実際に企業でSNSを運用する際にどのSNSを利用すればいいのかターゲット別に紹介していきます。

 

1.Facebook

SNSの魁とも呼ばれているFacebook、利用者は全て実名で登録することが義務付けられており(一部例外を除く)匿名性が無い代わりに個人のつながりを深く重視しており、ネット上で現実のような人間関係を広げることができるツールとして人気です。

日本で最も利用している年代は3,40代で主にビジネスマンが人脈を広げるツールとして利用されているケースが多いです。ビジネスでの広告や、3,40代に向けて発信したい商品がある場合はこのSNSがおすすめです。

2.Twitter

短い文字数でコミュニケーションを取る事のできるSNSです。匿名でアカウントを作成することが可能で、比較的ライトなコミュニケーションを取る際に利用されています。ユーザーは自分が見たい情報を発信してくれる他のユーザーをフォローして情報を収集する事ができます。利用者層は10代から40代あたりと幅広く、主に大衆向けの商品の広告などに適しています。最近はTwitterのライトなコミュニケーションを利用して、ユーザー参加型の広告イベントなどを開催するケースも増えてきています。

 

3.Instagram

Facebook社が運営している画像共有型SNSです。基本の構成はTwitterと似ていて、匿名性もあり、フォローなどの機能もあるのですが一番の目玉と呼べる機能は文字ではなく画像(写真)を共有することが主軸にあることです。ユーザーは自分の楽しかった経験やおいしい食べ物などをスマホのカメラで撮影し、Instagramにアップし、他のユーザーに良いね(機能)を貰ったり、逆に他のユーザーがきれいな画像を掲載していた場合は良いねを送ったり、することでコミュニケーションを取るツールです。そのため企業はインスタに掲載してもらうために見栄えの良い商品を作り出し(インスタ映えする商品)コストを掛けずに宣伝することができます。利用者層は1,20代がメインとなっています。

 

4.Linkedin

日本ではあまりまだメジャーなものではありませんが、MicroSoft社を親会社に持つ完全ビジネス特化型のSNSです。基本はFacebookとあまり変わりませんが、採用や、転職、ヘッドハンティング、外国人雇用向けのサービスが充実しており、海外での採用はLinkedinだということも最近増えてきています。新卒採用よりも中途採用を狙って広告を打つ企業が多いため、中途採用を考えている企業が広告を出す場合はおすすめです。

 

次回はHPにSNSを埋め込む方法について紹介します。

今回は、前回の記事『HPに動画を入れたほうがいいの？　動画導入のメリットとデメリット』

の続きの記事です。まだ前回の記事をお読みでない方は、下記リンクからお読みください。

 

前回の記事はこちら

 

前回の記事では、HPに動画を埋め込むメリットやデメリットについて書いていきましたが、今回は実際にHPに動画を埋め込む際、どのような方法で動画を埋め込んだら良いのかについて紹介し、どの方法がよりオススメなのかを書いていきます。

 

現在、HPに動画を埋め込む方法は主に２つあります。

1.埋め込みたい動画をHPのサーバーに入れて埋め込む方法

2.他社サービスを利用して動画を外部から埋め込む方法

 

以上が現在の殆どのHPで企業が実際に利用しているHP内に動画を埋め込む方法となっています。

 

1. 埋め込みたい動画をHPのサーバーに入れて埋め込む方法

用意した動画をFTPツールやCMSのサービスを利用して、HPのサーバーに直接動画のデータを入れてそこからHPに動画を埋め込む方法です。

分かりづらいかと思いますが、実際この方法は難易度も高く、サーバーが高性能のものでない場合は動画を再生することすらできず、全体のHPの読み込み速度も下がってしまうためおすすめできません。

 

この方法が向いている企業の特徴

・全て自社で完結させたい

・サーバーのスペックがかなり高い

・ITの知識がある

 

2.他社サービスを利用して動画を外部から埋め込む方法

1.と違いYouTubeやvimeoなど、自社サーバーではなく他社の動画配信サービスから自社HPに紐づけて動画をHPに※iframe方式で埋め込む方法です。

 

この方法だと自社サーバーへの負担が殆どかからないためHPの低速化などの懸念は殆ど無くなります。

 

特にYouTubeはSEOを決めているGoogleの子会社なので今後SEOに深く関係してくる可能性が高いため、動画を埋め込む際は積極的にYouTubeを利用することをおすすめします。

 

しかしYouTubeのテーマカラーが赤なため、埋め込んだ動画にも一部赤色が出てくることもあり、サイトのイメージと合わない場合は青のVimeoで埋め込むということもデザイン的にはありだと思います。

 

どちらも無料で利用でき、少し勉強すれば誰でも埋め込めるようになるためおすすめです。

(一部有料コンテンツもあり)

 

※ Inline Frameの略で、src属性で指定したリンク先ページの内容をインラインフレーム表示できるHTMLタグの一つです。自分のHPの中に別のHPが表示される窓を設置する技術のことです。Googleマップをサイトに埋め込む際も同じ技術が利用されています。

 

この方法が向いている企業の特徴

・コスト(技術・費用・時間)を掛けずに動画をHPに埋め込みたい

・誰でも動画が埋め込めるようにしたい

 

この方法の場合、サービスが終了した際のことも考えておく必要があります。

最近、採用サイトやコーポレートサイトに動画を導入するケースが増えています。

 

2010年のSEOの調査では動画を導入しているかしていないかで検索順位が1位で表示される数が53倍も変わっていたという研究結果(米　Forrester Research調べ)も出ていますが、

 

2010年、まだYouTubeなどの動画メディアもそれほど発達していない状況でHPに動画を導入するということは、動画を入れる入れない以前にそれだけHPに力を入れていた、だからSEOが上がっていたとも考えられるため、この研究結果を手放しに信用することはできないかと思います。

 

Googleは動画導入がSEOに関連づいているかどうかを明言していないため、直接的に動画自体がSEOに紐付いているとは現段階では考えにくいです。

 

しかし、一般的に大手と呼ばれている企業のサイトでは動画が導入されている。実際に弊社がサイト制作を行う際は動画の導入をおすすめしていますが、なぜSEO等にあまり関係のない動画をおすすめするのか、今回はその理由と動画導入のメリットデメリットについてお話をさせていただきます。

 

動画導入をおすすめする理由

まず、顧客がHPを見る際おそらくトップのイメージ画像と紹介文が目に入るかと思います。文字だけで的確に顧客に自社の伝えたい思いや商品・サービスを伝えることができれば良いのですが、文章だけで的確に顧客に伝えようと思うのならば、おそらくとても長い文章で表現しなくてはなりません。しかしあまりに長い文章になってしまうと、顧客は飽きてしまい最後まで読んでもらえません。短い文章や写真では伝えきれない部分で動画を導入する事によって、補うことができます。

自社で伝えたいメッセージをできるだけ的確に、簡潔に表現することができるため、サイトに動画を導入することが顧客満足度の上昇に繋がります。

更に動画を見ている時間はホームページの滞在時間にカウントされるため、間接的にSEOの上昇に貢献します。

しかしただ動画を導入すれば良いというわけではなく、伝えたいものを明確にした動画を制作する手間もかかるため、導入までにかなりコストが掛かってしまいます。そのため動画導入をする際は費用対効果を考えて慎重に導入する必要があります。

 

次回は実際にHPに動画を導入する方法をご紹介します。

 

動画導入のメリット

・自社の伝えたいイメージを伝えやすい

・間接的なSEOの上昇に起因する

・若年層へのアプローチに効果的

 

動画導入のデメリット

・コストが掛かる

今回は、前回の記事『今さら聞けないWeb知識「HTMLとCSSってなんだ？」』

の続きの記事です。まだ前回の記事をお読みでない方は、下記リンクからお読みください。

 

前回の記事はこちら

 

前回はホームページを作る上で必ずと言って良い程、重要な役割を果たしているHTMLとCSSについて説明をさせていただきましたが、今回はホームページの隠れた優秀な機能「JavaScript」についてご説明をさせていただきます。

 

JavaScript(ジャバスクリプト)はWebサイトに動きをつけるために開発されたプログラミング言語の一つです。当初はWebサイトのスライドショーなどの簡易な機能としてのみ利用をされてきましたが、現在ではパスワードの認証システム・アプリなど、おそらく私達が１回も使ってない日はないと思える程JavaScriptは浸透しており、Web業界ではNo.1の人気を誇る言語です。

 

前述したとおり、アプリの開発などのバックシステムの中でもよくJavaScriptを利用することがあるのですが、今回は理解しやすいフロントの部分のみ簡単に説明させていただきます。

 

サイトのフロント部分にはよくJavaScriptの中のJqueryを利用してサイトに動きを出します。JqueryはJavaScriptをより簡単に扱いやすくしたファイルの1種です。(ライブラリと呼ばれる)

 

※ライブラリとは、通常であればいちいち記述しなくてはいけない部分をまとめて省略してしまい、簡単に呼び出すことができるようにした機能。

 

JavaScriptでそのまま使おうとすると

→右足を前方に出す+左足を前方に出す+姿勢は立ったまま+前方を見る=歩く

 

となるものが、

 

Jqueryを使うと

→歩く

 

だけで済むようになる機能のこと。(例外もあります)

 

 

前回記述したコード

 

HTML

< h1 >hello!< /h1 >

 

 

CSS

h1{color : #008000 ;

font-size :20px;

}

 

に、例えばボタンを押すとhello!の文字色が変わるエフェクトをJavaScriptでつけた場合、

HTMLとCSSの記述ファイルに加え、JavaScriptのファイルも追加します。

 

HTML

< h1 >hello!< /h1 >

 

 

CSS

h1{color : #008000 ;

font-size :20px;

}

 

（追加）

JavaScript

function changeColor(idname){

var obj = document.getElementById(idname);

obj.style.color = ‘#ff0000’;            //文字色を赤にする

}

 

そして、このままではHTML側でJavaScriptが読み込まれないため、HTMLにJavaScriptが読み込まれるよう記述し、押すと変わるボタンも設置します。

 

 

HTML

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<script src=”JavaScript”></script>

</head>

<body>

<h1 id=”target”>hello!</h1>

<input type=”button” value=” ボタン ” onclick=”changeColor(‘target’);” />

</body>

</html>

 

 

CSS

h1{color : #008000 ;

font-size :20px;

}

 

 

JavaScript

function changeColor(idname){

var obj = document.getElementById(idname);

obj.style.color = ‘#ff0000’;            //文字色を赤にする

}

 

このようなコードになり、ボタンを押すと前回指定した緑色から赤色に文字色が変わるようになります。（実際にこのような機能をホームページの制作に利用することは殆どありませんが、）今回は簡単にJavaScriptを説明するために紹介させていただきました。

 

プログラミングの特にフロントと呼ばれる部分。実は英語が読めるとある程度意味がわかることもあるので興味がある方はぜひ触れてみてください。