HP制作②
先月に引き続き、架空のカフェのHPを作っていきます。前回はHTMLを書いて終わっていましたが、今回はCSSを用いて全体のデザインを整えました。
TOPページ
前回からの変更点としては、全ページに共通することとしては
・Illustratorを用いたロゴマークの作製・配置
・背景色の設定
・メニューを横並びにして体裁を整える
といったところが主なものです。
TOPページに関しては、主にキービジュアルをフレームで装飾しました。
コーヒーの画像にツタのフレームを直接重ねて画像化したものになりますが、後にcssを用いて二つの画像を重ねることも試みました。「position:relative」、「position:absolute」を用いるものでしたが実際に重ねた画像を中央寄せしようとすると一筋縄ではいかず少々苦労しました。結果、paddingとmarginの微調整で事なきを得ましたがこの辺りはもう少し深く探ってみたいと思います。
ABOUTページ
カフェの概要を記した「ABOUT」ページです。「CAFE CERVAについて」部分はfloat機能で写真の右側に説明文を回り込ませた形になります。
また、「店舗情報」部分はtableを利用して表を作りました。当初、表を横幅いっぱいに広げた際に項目名部分(th)が縦に伸び表の比率がおかしなことになって困っていたのですが、「 width: auto;」、「white-space: nowrap;」を加えることで上記画像のように落ち着きました。
MENUページ
季節のおすすめメニューを掲載する「MENU」頁です。こちらもtableとfloatを利用して画像を回り込ませる形になっています。左側のメニューをクリックすることで、
各メニューに応じた写真の拡大図と説明文が右側に表示されるようになっています。
CONTACTページ
問い合わせフォームを設けたページです。送信ボタンを押してもとりわけ反応は無いのですが、この送信後の結果やHP公開の実装については来月取り掛かりたいと思っています。また、全体的にもう少しデザインを改善できる部分が無いか考えたいと思います。
参考、素材をお借りしたサイト
①
②
読了:大澤文孝『Webとプログラミングのきほんのきほん』(マイナビ出版、2016年〔初版:2015年〕)
大澤文孝『Webとプログラミングのきほんのきほん』(マイナビ出版、2016年〔初版:2015年〕)を読了した。WebブラウザにおいてWebページが表示される仕組み(HTML、CSS、JavaScript等)から実際にWebプログラミングを行うまでの過程が至極丁寧に解説されている本であった。Webプログラミング初心者にとってもかなり理解しやすい内容なのでは、と思う。
先月までに読了してきた本においてはHTML、CSS、JavaScriptをさらってきたが、今回はPHPも加わりより詳しい内容を学ぶことができた。PHPを書いていく上での「XAMPP」の入手・インストールまで事細かに解説されており、スムーズに導入を行うことができたように思う。
PHP自体の解説は飽くまで基本中の基本といったところであるため浅いところをさらっていく感覚ではあるが、PHPというものを学ぶ上においては非常に分かりやすく、またそこからHTML、CSS、JavaScriptとWebサイトを作っていく過程までが非常にスムーズに進んでゆく。
最終的にはデータベースを使ったプログラミング(SQL)も解説されているため、タイトルの通りWebプログラミングの基本を満遍なく学べるものなのでは、と思う。今月はPHPを学び、HP制作にも本腰を入れていく予定であるためこちらを大いに活用していきたいと考えている。
ちゃんと使える力を身につける Webとプログラミングのきほんのきほん
- 作者: 大澤文孝
- 出版社/メーカー: マイナビ
- 発売日: 2015/02/19
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
読了:上田拓治『マーケティングリサーチの論理と技法〔第4版〕』(日本評論社、2016年〔初版:1999年〕)
上田拓治『マーケティングリサーチの論理と技法〔第4版〕』(日本評論社、2016年〔初版:1999年〕)を読了した。
マーケティングリサーチについての知識が網羅されており、非常に情報量の多い本であった。今までこの分野を勉強したことはなく、専門用語も多く出て来たため勉強になる反面理解に時間がかかる場面も多かった。以下、とりわけ気になった点を取り上げたいと思う。
1.マーケティングリサーチの新しい波
「マーケティングリサーチ」という分野において、近年の調査状況の変化は以下の通りである。
①生活者サイドの変化
・他記式→自記式・・・誰にも束縛されず自由に自分の意見を述べたいという欲求
・セールス等、訪問調査・・・調査への拒否や不在の増加
・インターネット利用者の増加・・・インターネット(Web)調査における良好な環境
②クライアント・サイドの変化
競争の激化・・・意思決定の迅速化、調査コストの低下を求められる
→「早い、安い」を最大の特徴とするインターネット調査に合致
③調査会社サイドの変化
・企業間競争の激化・・・定性調査の活用
・ICT技術の進化・・・自由回答やチャート、レポート等の自動処理が可能に
これら3つに共通して言えるのは、インターネット調査が多く活用されるようになっているということである。それは単にインターネットの進化や利用者増加のみを理由とするのではなく、「迅速」「低コスト」といったメリットを孕んでいる。
ここで、「①生活者サイドの変化」における「自記式」に注目したい。
2.自由回答質問
筆者は、自由回答質問について以下の長所・短所を挙げている。
【長所】
①特定のテーマに関する多種多様な回答
②調査対象者の生の声
③想定外の意見を得られることがある
④回答量が多い→プリコード回答よりも深い分析が可能
⑤調査対象者が本当に表現したい回答が得られる
→プリコード回答においては、自分の意見に近いと思われる回答カテゴリを選択するだけ
⑥プリコード回答欄を用意する時間・情報が無い時の次策
【短所】
①プローピング質問の方式により回答の質と量が変化
②回答量について個人差が大きい
→回答量の多い人に調査結果が偏る
③留置き調査では回答を作文するため表現が理路整然となりやすい
→本音から遠ざかる可能性
④プリコード回答に比べ時間がかかる
⑤留置き調査では記入欄が狭いと回答量が限られてしまう
⑥留置き調査では回答をなるべく短く書こうとする人が存在する
⑦電話調査では会話のスピードが速い
→正しく記録できない可能性
⑧自由回答のアフター・コーディング作業には時間がかかる
⑨アフター・コーディング作業でのコーディング・ミス
先月読了した橋本哲児『顧客の「本音」が分かる9つの質問』(秀和システム、2015年〔初版:2014年〕)においても指摘されていたことだが、プリコード回答にはデメリットが存在する。
上田にしろ橋本にしろ、両者が指摘しているのはプリコード回答においては「回答者の自由度が下がる(本当に表現したいことが限られてしまう)」という点である。その一方で、自由回答方式のメリットはやはりプリコード回答よりも自由な表現ができ、深い分析が可能ということである。
しかし今回本書を読んだことで、自由回答方式にもある程度のデメリットが存在することを学んだ。自由度が高いだけに、回答者側の時間が多く取られ回答を短くしようとする、文章化を意識して本音が隠れていまうといったリスクはある。また、アフター・コーディングにも時間がかかってしまう。
プリコード回答、自由回答の両者ともにメリット・デメリットは存在するが、そのバランスを考えて調査に当たるべきであると強く感じた。とりわけ、「回答者の本音を探りたい」という場合には自由回答方式において質問形式に気を付けつつ調査を行うのが良いのではないかと考える。
3.インターネット調査
「紙とペン」調査の限界
前述のように、インターネットが普及し始めると従来の「紙とペン」型の調査は限界を迎えるようになった。インターネットの使用とそれを介したコミュニケーションが拡大すると、インターネットが広告媒体の1つとして考えられるようになる。
1996年にインターネット調査が始まったが、当初の主流はオープン型であった。その後多様なニーズに対応するため、インターネット調査はオープン型からクローズ型へとシフトし、現在に至る。
インターネット調査は「迅速性」、「安価性」においては優れた手法として認知されてきた反面、従来型調査が目指した「標本の代表性」、「データの品質」に関わる領域については批判が生まれるようになった。
インターネット調査の将来展望
日本のインターネット調査の売上シェアは世界の4位に位置しており、安定期に入りつつあると言える。Web調査に関しては、「公募型」と「確率型」を調査テーマや機会によって使い分けることが最善であると考えられる。しかし、安定した回収率を確保するために確率型Web調査の長所をクライアントに充分理解してもらうことが大切である。
また、動画を提示して質問する方式はインターネット調査において非常に大きな利点であり、今後その利用度は一段と高まっていくものと思われる。
これまでインターネット調査は定量調査が主とされてきたが、最近は定性調査のニーズが高まってきている。これはクライアントが生の声を真に導き出す要因を望んでいるものと思われてる。
また、携帯電話(スマートフォン)を利用したいわゆるモバイル・リサーチはユビキタス社会での必須の情報収集ツールである。その特徴は、いつでもどこでもリアルタイムで情報収集し送受信できる。デメリットとしては、長文の入力に向かないこと、質問数・回答欄の選択肢の限界、画面の大きさ等様々な制約がある。また、キャリアごとに規格が異なるため時間とコストがかかる。
しかし、モバイル・リサーチはPC離れをした若者への調査としては欠かせず、GPS機能の活用など携帯電話ならではのメリットがある。モバイル・リサーチにはまだデータ品質や代表性の問題等残された課題は多いが、今後の新しい調査モードとして期待は大きい。
4.おわりに
マーケティングリサーチについて最新の情報が網羅された本であった。とりわけ、インターネット(Web)調査についての動向がよく勉強できた。しかし、前述の通り情報量が非常に多くなかなか理解が難しかった。マーケティングリサーチについては、これからの活用法を見極めつつより深い勉強を心がけたい。
Photoshop③ 料理写真をおいしく見せる
今回は、HPに使う料理写真をおいしく見せられるような加工を施していきたいと思います。
1.クレープをおいしく加工
元画像がこちら。これをよりおいしく見えるよう加工していきます。
トーンカーブを調整し、色調補正します。
続いて、「特定色域の選択」でレッド系を選び、いちごの赤やクレープ生地の色が映えるよう調整していきます。
クレープが載った皿以外の背景を選択し、トーンカーブで明るさや色調を調整していきます。
背景にぼかしを加え、最後に全体的な色調を改めて調整して完成です。
2.カフェラテをおいしく加工
元画像はこちら。これだけでも充分良い写真なのですが、写真全体に温かみを加えたいと思います。
先ほどと同様、トーンカーブと特定色域の選択ツールを用いて写真の色調を調整していきます。
続いて、「レンズフィルター」を用いて写真全体に暖色系のフィルターをかけ、温かみを増します。
こちらもクレープの時と同様、カフェラテ以外の背景を選択しトーンカーブにて色調調整を行います。
続いて、カフェラテのアート部分のみを選択し「アンチシャープ」のフィルターをかけます。次は湯気を合成・・・といきたいところなのですが、チュートリアル通りにいけばAdobe Stockの素材を用いることになっていました。しかしこちらに加入していないため・・・今回はこちらのサイトを参考に湯気を自分で作っていきます。
新規レイヤー作成→「スクリーン」選択→「フィルター」→「描写」→「雲模様1」という流れなのですが、初っ端から全体がもくもくになってびっくりしました。さながら銭湯のよう。これでは曇りすぎなので、カフェラテ付近のみに湯気をかけることにします。
まずは湯気のフィルターを湯気っぽく「波打たせる」ために、「フィルター」→「変形」→「波形」の順に湯気に流れを作ります。
仕上げに取り掛かります。まずはカフェラテ上部をなげなわツールで適当に選択。この時、最終的に湯気が自然な形となるよう境界線のぼかしを設定します(今回は20px)。「マスクを追加」をクリックし、選択部分だけに湯気が残るようにします。
湯気(レイヤーマスク)の不透明度を調整し、最後に全体の色調を改めて調整して完成です。
3.おわりに
Photoshopは機能が揃いすぎているぐらい揃っていてなかなか使いこなせない部分も多いのですが、今回は写真加工の機能を多く使えたかなと思います。特にフィルターとレイヤーマスクの活用はやっていて面白かったです。トーンレベルや色調補正に関してはもう少しスムーズに使いこなせたら、と思います。まだまだ勉強しなくては・・・
HP制作①
今月から、HP制作に取り掛かります。先日記事にて作ったワイヤーフレームを元に、架空のカフェのホームページを作っていきます。今月は、HTMLを用いて制作を行います。
まずはこちらがTOPページのコード。キービジュアルの下に「NEWS」を表示します。
こちらがキービジュアル。この下に・・・
いくつかのニュースを表示します。
続いて、「ABOUT」ページのコード。店舗紹介を載せると共に、テーブルを用いて店舗情報を掲載します。
こちらが実際のページ。店舗紹介の文章レイアウトは、のちにCSSを用いて整えていきます。
こちらは「MENU」ページのコード。基礎となるのはこのファイル(menu.html)ですが、選んだメニューを大きく表示できるようにするため各メニューを表示するためのファイルを複製(menu1.html、menu2.html、menu3.html)していきます。
こちらが実際の表示になります。各メニューの写真をクリックすると上部に大きく表示されるようになっていますが、こちらものちにCSSを用いてレイアウトを整えていきます。
今回は主にHTMLを用いてサイトを作りましたが、これだけではまだまだ見苦しい点も足りない点も多すぎるため来月はCSSを用いてよりレイアウトやデザインを整えていきたいと思います。
参考
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ページにて表示させると・・・
最初の段階とは打って変わって、普段見慣れた現在時刻が表示されるようになりました。
次の記事では、じゃんけんゲーム作りに挑戦します。
