JavaScript② じゃんけんゲーム
前回記事に引き続き、吉岡直人ほか『非エンジニアのためのプログラミング講座』(リックテレコム、2015年)を参考にじゃんけんゲームを作っていきます。
1.じゃんけんゲームを作る
まずはこちらのコードですが、コンピュータ側(相手側)は常にグーという設定で、ユーザー側はランダムに「グー」「チョキ」「パー」のいずれかを選択することになります。しかし、実際これをWebページにて表示すると・・・
上記のコードは「あいこ」の場合しか想定していないため、このように、ランダムで選択されたものが「グー」(あいこ)でない限りおかしな表示になってしまいます。これを解消するために、「勝ち」「負け」「あいこ」全ての場合を想定したコードを書き加えていきます。
2.すべての場合を想定したじゃんけん
ユーザー側がランダムに選択したものが「グー」「チョキ」「パー」のどれであっても勝敗が決まるよう、条件分岐のコードを書き加えていきます。これを実際にWebページにて表示すると・・・
この場合ユーザーは「チョキ」を選択したことになりますが、先ほどとは違いきちんと勝敗が表示されるようになりました。続いて、このゲームの開始を「ボタンクリック」に変えるべくコードを加えていきます。
3.ボタンをクリックするとゲーム開始
<input>タグに「onClick」プロパティを加え、ボタンをクリックすることでじゃんけんゲームが開始するようにします。
「ゲームにチャレンジ」ボタンをクリックすると・・・
ゲームが開始され、勝敗が表示されました。続いて、この勝敗結果をポップアップウィンドウにて表示するようコードを書き加えます。
4.勝敗結果をアラートで表示
関数「document.write」を、「alert」に書き換えて勝敗結果をアラートにて表示するようにします。こちらをWebページにて表示し、先ほどと同様ボタンをクリックしてゲームを開始すると・・・
このように、ポップアップのウィンドウが出てきて勝敗結果が表示されました。
「OK」をクリックするとアラートは消え、ユーザーの選んだ選択肢のみが残ります。
5.おわりに
前回記事に引き続きJavaScriptを用いたコードを書きましたが、初めて触れるものでもあったため新鮮でした。今回は基礎中の基礎に触れましたが、再来月は現在制作しているHPにJavaScriptを取り入れたいと考えているため、実際にWebサイトにおいて使うJavaScriptについてより勉強をしていきたいと思います。
JavaScript① 時刻表示
JavaScriptを用いて現在時刻を表示するWebページを作っていきます。今月読了した吉岡直人ほか『非エンジニアのためのプログラミング講座』(リックテレコム、2015年)を参考にしました。
1.現在時刻を表示する
まずは、組込み関数「Date.now」を使ってコードを書いていきます。こちらのコードでWebページを表示すると・・・
一応数字自体は表示されましたが、これでは何が何やら分からないためより時計らしく見えるために加工を施します。
2.今は西暦何年？
今度は、関数「getFullYear」を用いてコードを書いていきます。これを元にWebページを表示させると・・・
きちんと今年の西暦が表示されました。この要領で、日付も分かるようにコードを書き加えます。
3.今は西暦何年何月何日？
関数「getMonth」と「getDate」を書き加え、Webページを表示させます。
現在の西暦に加え日付も表示されるようになりました。そして最後に、時間も見えるようコードを書き加えます。
4.現在の年月日と時刻は？
同様に関数「getHours」、「getMinutes」、「getSeconds」を加え、これらを表示するコードを完成させます。これをWebページにて表示させると・・・
最初の段階とは打って変わって、普段見慣れた現在時刻が表示されるようになりました。
次の記事では、じゃんけんゲーム作りに挑戦します。
赤羽マラソン大会ボランティア
昨日は、荒川河川敷にて行われた「赤羽マラソン大会」の運営ボランティアに参加してきました。前回参加した落ち葉清掃ボランティアと違い、少数精鋭ながらもいろいろな仕事に携われたように思います。
スタッフ専用のビブスを着用して、運営に臨みます。
基本的な業務としては順位・タイム記録証の受け渡しに割り振られたのですが、大会が始まるまで時間もあったため受付の抽選をお手伝いしました。走者の方々にくじを引いてもらい、賞品をお渡しするものだったのですが・・・この時から風が強くなってきており手がかじかんでくじを開くのにも、参加賞(飲み物)をどんどん用意するのにも時間がかかってしまいました。
その時、一緒に業務に当たっていたボランティアの方が賞品の用意を何も言わず手伝ってくださり、作業がスムーズに進むようになり感謝の念を抱くと共に積極的にサポートする精神を見習いたいとも思いました。
大会がスタートしてからは最初に割り当てられた記録証の受け渡しに当たったのですが、先ほどに増してどんどん風が強くなり飛びそうになる記録証を素早く受け渡す作業になっていました。本当に寒さと風が身に堪えて辛かったのですが、走者の方々への応援や労いの声を切らさないよう心掛けました。
最後の方には、何も言わずとも皆が一丸となって応援していたのが印象深かったです。運営スタッフにしろ走者の方々にしろ、風を振り切って自分のできることに全力で当たっていたように思います。時折走者の方々から「寒い中お疲れ様です」とお声掛けいただくと非常に嬉しくより一層業務に力が入りました。後半は、とにかく手が空いたら何かしらの作業に当たり、積極的なサポート精神を心がけました。
全ての作業を終えた後は、現地解散となり陽が当たり始めた中、荒川を眺めながら帰路につきました。一日を振り返って、ボランティアスタッフ同士各々が各々の作業に夢中になっており会話が少なく、非常に残念でもったいなかったことが反省点として見出されました。「何も言わず」何かを手伝う精神も非常に大切ではあるのですが、業務に当たる中で各々のコミュニケーションも積極的にとれたらより良かったのでは、と思います。
とはいえ、様々な業務に携われたことは大変良い経験となりました。走者の方々と接する時間も、大会の雰囲気自体も、すべてが温かかったように思います。終盤の風の強さはカラーコーンやゴールの標識をも吹き飛ばす勢いでしたが、すべてを終えた後の達成感は清々しいものでした。
Illustrator③ HPワイヤーフレーム作成
今月は、Illustratorを用いてHPのワイヤーフレームを作成した。架空のカフェのホームページ制作を予定している。
まず初めに、Illustratorを開いてグリッド表示の設定を行う。
目盛の表示設定も終えたところで、グリッドに沿って背景やタイトル画像、メニューボタンといったあらゆる要素の配置を行い、TOPページのワイヤーフレームを作成する。
こちらが、ABOUTページのワイヤーフレーム。架空のカフェを想定しているため、カフェの説明、その下には地図の配置を行いたいと考えている。
こちらが、MENUページのワイヤーフレーム。商品名を羅列したメニュー横にそれに応じた画像を表示したいと考えている。
各要素の配置に関しては目盛を目安に慎重に配置を行った。地道な作業ではあったが、あらかじめ細かな設定を行うことでHP制作もスムーズに行えるのではないかと考えている。今月は、このワイヤーフレームを参考にホームページ制作を行ってゆく。
参考
Webデザイン Illustrator&Photoshop <CS4対応> (「デジハリ」デザインスクール) (デジハリデザインスクール)
- 作者: デジタルハリウッド
- 出版社/メーカー: 技術評論社
- 発売日: 2009/08/29
- メディア: 大型本
- 購入: 22人 クリック: 597回
- この商品を含むブログ (5件) を見る
アイデア分析③
前回に引き続き、仮想のサービス案についてアイデア分析を行う。今月は、橋本哲児『顧客の「本音」が分かる9つの質問』(秀和システム、2015年〔初版:2014年〕)を参考にする。
サービス案
サービス名:「30s」(仮)
形態:スマートフォンアプリ、Webサイト
料金:無料(一部有料)
内容:アーティスト側に曲、または動画の「聴いてほしいところ」の30秒を切り取ってもらい公開する。アーティスト側にとっては一番聴いてほしい部分を手軽に伝えることができ、リスナー側にとっては自分で飛ばす手間なく聴きたい部分を手軽に聴けるという「いいとこどり」のメリットがある。
アイデア分析
上記のアイデアの分析を行うに当たり、前掲『顧客の「本音」が分かる9つの質問』を参考に顧客の本音を引き出すための9つの質問を考える。
9つの質問
Q.1 「30s」にご満足いただけたでしょうか？また、その理由をお教えください。
→「強み」「弱み」をフラットに探り出す。
Q.2 最もご満足いただいた点は何ですか？また、その理由をお教えください。
→「マイナスイメージ」をもつ顧客をも満足させるような、より大きな「強み」を探り出す。
Q.3 最もご不満だった点は何ですか？また、その理由をお教えください。
→「プラスイメージ」をもつ顧客をも悩ませるようなより大きな「弱み」を探り出す。
Q.4 音楽試聴アプリ・サイトについて、どのような印象を抱いていましたか？
→同一カテゴリーに対する従来からの印象を探ることで顧客のリアルな声・感情を読み取り、最大の「強み」を見出す。
Q.5 「30s」をご利用いただいた一番の理由をお教えください。
→Q.1回答と照らし合わせて、利用前と利用後の満足感が一致しているかを確認。一致していなければプロモーション方法を見直す。
Q.6 「30s」をご利用いただく時、またはその以前に他の音楽試聴サービスも検討(利用)されましたか？よろしければサービス名等と、その理由をお教えください。
→同一カテゴリーの真の競合を把握する。
Q.7 「30s」をご利用いただく時、またはその以前に音楽ストリーミング配信サービスも検討(利用)されましたか？よろしければサービス名等と、その理由をお教えください。
→別カテゴリーの隠れた競合を把握する。
Q.8 「30s」をどこでお知りになりましたか？
→顧客接点を探り出す。設問は自由回答方式にすることにより、顧客の真の回答を得る。
Q.9 誰かに「30s」をオススメする可能性は何点でしょうか？(0~10点で評価)
→利用率、リピート率を高めていくための質問。
Q.1やQ.2に関しては、満足度・不満度を点数化しても良いのではないかと思う。しかし、Q.8の「顧客接点」の質問に関してはやはり自由回答方式を貫きたいと考える。ある程度の選択肢を与えることも回答者(顧客)側にとっては便利なものだが、ぱっと目についた適当な選択肢を選ばれてしまう可能性もある。真の傾向を得るには、自由に回答してもらうのが良いと思われる。
参考
読了:高橋朋代ほか『作りながら学ぶHTML/CSSデザインの教科書』(SBクリエイティブ、2016年〔初版:2013年〕)
高橋朋代ほか『作りながら学ぶHTML/CSSデザインの教科書』(SBクリエイティブ、2016年〔初版:2013年〕)を読了した。全ページフルカラー、HP制作のノウハウの基礎がバランス良く詰め込まれた内容と言える。
HTML、CSS、画像編集、JavaScriptと順を追って解説が為されていく。本書を読み進めていくにつれホームページに彩りが加えられ、動きのあるものになっていく様は非常に勉強になる。
飽くまでも主にHTML、CSSを用いたWebデザインの基礎を学ぶものであるため、本格的にデザインや配色を考える際には以前読んだ以下の本を組み合わせていけばHPがより良いものになるのでは、と感じる。
Webデザイン Illustrator&Photoshop <CS4対応> (「デジハリ」デザインスクール) (デジハリデザインスクール)
- 作者: デジタルハリウッド
- 出版社/メーカー: 技術評論社
- 発売日: 2009/08/29
- メディア: 大型本
- 購入: 22人 クリック: 597回
- この商品を含むブログ (5件) を見る
Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
- 作者: デザインラボ編集部
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2009/03/27
- メディア: 大型本
- 購入: 25人 クリック: 457回
- この商品を含むブログ (22件) を見る
今月からHP制作に取り掛かっていくため、これら3冊を参考にしつつ実践しながらノウハウを身に着けていきたいと考える。
読了:橋本哲児『顧客の「本音」が分かる9つの質問』(秀和システム、2015年〔初版:2014年〕)
橋本哲児『顧客の「本音」が分かる9つの質問』(秀和システム、2015年〔初版:2014年〕)を読了した。タイトル通り、顧客の「本音」を引き出すための著者独自の「9つの質問」について順を追って解説していく内容となっている。本書は著者の過去の失敗経験談から始まり、自然と読者を惹き込んでゆく。
1.「9つの質問」
顧客の本当の要求、「本音」を引き出すための9つの質問は以下の通りであるという*1。
①現状把握
→フラットに強み・弱みを探り出す最も重要な質問。
(ex)〇〇(商品名)にご満足いただけましたか？また(ご満足・ご不満)の理由はどのようなものですか？
②強み把握
→マイナスイメージ(不満)をもつ顧客にも伝わる強みを探り出す。
(ex)最もご満足いただいた点は何ですか？またその理由はどのようなものですか？
③弱み把握
→プラスイメージ(満足感)をもつ顧客も感じる弱みを探り出す。
(ex)最もご不満だった点は何ですか？またその理由はどのようなものですか？
④不満把握
→顧客を感情移入させる最大の不満を探る。「カテゴリー」への不満。
(ex)◎◎(商品のカテゴリー)について、特にあなたがお悩みだったことはありますか？
⑤購入理由
→買う理由と満足した理由に一貫性を探る質問。
(ex)〇〇を買った一番の理由は何ですか？その理由について、教えてください。
⑥競合把握
→真の競合と障害を発見するための質問。
(ex)〇〇を買った時に他の▲▲(同一カテゴリーの商品)も検討されましたか？よろしければ商品名などを教えてください。また、その理由は何ですか？
⑦隠れた競合把握
→隠れた競合と障害を把握し、さらに有利に戦うための質問。
(ex)〇〇を買った時に他の■■(別カテゴリーの商品)も検討されましたか？よろしければ商品名などを教えてください。また、その理由は何ですか？
⑧顧客接点
→企業や商品などの情報と顧客が接する点を探る。
(ex)〇〇をどこでお知りになりましたか？
⑨満足度把握
→既存客の購入率、リピート率、紹介率を高めるための質問。
(ex)あなたの知人や友人に〇〇を薦める可能性はどのくらいですか？10点(ぜひ薦めたい)から0点(絶対薦めない)の間で点をつけてください。
この中でも、とりわけ印象に残った④不満把握、⑤購入理由、⑧顧客接点について詳しく述べていきたいと思う。
2.「不満把握」
上記①～③の質問でも既に顧客が感じる不満は探り得るのだが、より広い視点で見た時に有効であるのがこの「不満把握」の質問である。
「◎◎(商品のカテゴリー)について、特にあなたがお悩みだったことはありますか？」
この質問に対する回答例は以下の通りである。
「長く使いたいと思っていたので飽きのこないデザインのものが欲しいと思っていました。私は飽き性なので。」
この質問は顧客の問題のリアル感を把握し得るものであり、また顧客がどのような言葉(文章)でその問題を表現しているのかを把握しなくてはならないものである。そしてその問題を、出来得る限り、商品の最高の強みで解決していく。顧客の最大の悩みは、商品の最大の強みになり得るものであると言える。
もちろんどれだけ優れた商品にも弱みはあるのだから、すべての悩みに対応しなければならないということではない。また、競合商品、競合他社がもつ強みの土俵で戦ってはいけない。飽くまでも、自社商品が発揮し得る強みを以てして顧客の不満に対応していくことが重要である。
3.「購入理由」
顧客がとある商品を「買う理由」と、それに「満足した理由」は別物である。前者は飽くまで顧客が買う瞬間に抱いた感情であり、後者は購入後、実際に使用しての感想である。今やインターネットで検索をかければ様々な商品レビューが見られる時代であるが、それらはどれも「購入後(使用後)の感想」であり買う瞬間の感情を探り出すことは難しい。だからこそ、この「購入理由」の質問が重要となる。
「〇〇を買った一番の理由は何ですか？その理由について、教えてください。」
この質問に対する回答例は以下の通りである。
「実物を見る場所がなかったので、不安でしたが、HPに載っていた商品の写真がかっこ良かったので。」
顧客がその商品を「買った理由(購入理由)」を把握することは非常に有効であり、それらを商品の広告、サイト、コピー、営業等と照らし合わせていくことができる。そして
、買った理由と満足した理由が一貫性を持つ、ないしは持たせることで好循環が生まれることになる。重要なのは「強み」の一貫性である。
4.「顧客接点」
著者が本書で最も強く主張していると思われるのがこの「顧客接点」である。読んで字の如く、顧客接点とは買う前の顧客が商品と接する点のことであり、例えばそれは広告、パンフレット、紹介など様々である。顧客が商品のことを知る場所と言える。
「〇〇をどこでお知りになりましたか？」
この質問に対する回答例は以下の通りである。
「ネットで探していたら、たまたま広告を見かけて。」
「会社の同僚から紹介されて知りました。」
この質問で重要なのは、「選択式ではなくフリーで回答してもらうこと」、「可能であれば理由も確認すること」である。企業側が選択肢を用意してしまっては顧客の本当の感情を狭めてしまうことになるため、その回答は事実とは言えないものになってしまう可能性がある。
可能であれば理由を確認する、というのは、顧客がその商品を知ったことが「偶然」であるかどうか、ということである。「偶然」、「ほとんどの顧客に接触されない」といった「顧客接点」は有望とは言えないためである。
5.おわりに
丁寧な解説と共に要所要所にまとめが組み込まれており、復習する上でも非常に役に立つ本なのではないか、と感じた。著者独自の考えながら、いろいろと納得させられる点が多かったように思う。
とりわけ、「顧客接点」を探る質問に関しては非常に興味深いものがあった。普段自分がアンケートに答える際、必ずといっていいほど「〇〇をどこでお知りになりましたか？」といった質問は目にする。しかし、それは大概選択肢が用意されている。ぱっと選択することも可能なのだが、選択肢が多い場合には自分が知った場を探り出すのが困難であることもままある。
著者は、選択肢を用意したことで大抵の顧客が1番最初の選択肢を(理由なく、何気なく)選んだ例があったことに言及する。選択肢を用意することは、顧客の手間を省くものでもあるが事実を得られない可能性は出てくるかもしれない。回答方式をフリーにするか選択肢を用意するかは、その時々によって慎重に考えなければならないであろう。
