スタッフ厳選おすすめ情報

おすすめ情報

2017年7月11日

初めてのGoogleタグマネージャ(GTM) ~設定・導入編~

first-time-google-tag-manager-gtm-setting-introduction

リスティングを運用するうえで何かと絡んでくるのはタグの設定だと思います。リマーケティングタグやコンバージョンタグ、Googleアナリティクスのトラッキングタグなどなど、複数のタグを管理するのは大変だと思います。また、各媒体ごとに発行が必要なのでWebサイト管理者に埋め込みを依頼するのも大変になるかと思います。加えてタグを設置しすぎたことによりサイトの読み込み速度の低下なども起きます。しかし、複数のタグの管理が簡単に管理できるツールがあるのはご存知でしょうか? 今回はそんな便利ツールを紹介していこうと思います。

タグマネージャーとは

タグマネージャーとは、Googleアナリティクスなどの解析ツールのタグやリマーケティングタグ、コンバージョンタグなどを一元管理できるツールです。無料で使用できるものですとGTM(Google タグマネージャ)とYTM(Yahoo!タグマネージャー)が有名かと思われます。どちらもできることは似たようなものですが、使用できるテンプレートの数に違いがあります。今回はその中のGoogle タグマネージャの設定紹介になります。

Google タグマネージャ開設・導入

まず、Googleアカウントがない方はアカウントの作成が必要です。そして、公式サイト(https://www.google.com/intl/ja/tagmanager/ )でGoogle タグマネージャの登録をおこないます。「アカウントを作成」をクリックし、次へ進みます。

first-time-google-tag-manager-gtm-setting-introduction1

進みますと画像のような画面になりますので、アカウント名のところに○○株式会社などの任意の名前を入れます。
そしてコンテナの設定、コンテナ名をいれます。

first-time-google-tag-manager-gtm-setting-introduction2

ここは例の用意、WebサイトのURLでも構いませんし、日本語も入力することが出来るのでWebサイト名でも構いません。そしてコンテナの使用場所を「ウェブ」「iOS」「Android」「AMP」環境に合わせて設定したらGTMの発行は終了です。あとはGTMのタグをWebサイト内に設置すれば導入完了です。

Google タグマネージャ設定

作成および設置が完了したら、いよいよタグの設定となります。設定する順序に特に決まりはないのですが、自分はいつもトリガーの設定から行うのでこちらから説明していこうと思います。

トリガー設定

トリガーとはタグを発火させるルールを設定するもので、例えば特定のページを見たユーザーのみにタグを発火させたり、特定の項目をクリックしたときにタグを発動などをさせることが出来ます。今回はサンクスページで発火させるトリガーを作成してみようと思います。今回は「http://○○.co.jp/shopping/complete.php」のでタグを配信するトリガーを作成してみようと思います。

first-time-google-tag-manager-gtm-setting-introduction3

今回の場合上記画像のように作成しました。トリガーの種類はページビューで作成しました。そして発生場所は一部のページビューで先ほどの「/shopping/complete.php」を指定してあります。Webサイトによっては「/shopping/complete.php?138927」など固有のIDが振られるサイトもあるのでそういう場合は含むで作成するといいと思います。固有のIDがない場合は等しいにしておけばそのサイトでしか配信されないので、等しいにすることをお勧めします。

タグの設定

トリガーが設定完了しましたので次はタグの設定です。今回はAdWordsコンバージョンタグ設定を設定します。AdWordsの場合テンプレートがあるのでそちらの方を利用します。テンプレートがないタグの場合はカスタムHTMLでコードを貼り付けてください。

first-time-google-tag-manager-gtm-setting-introduction4

設定完了すると上記画像のようになります。必須項目は、コンバージョンIDとコンバージョンラベルとなり、AdWordsのコンバージョンタグからID、ラベルを貼り付けるだけでタグの設定は完了です。あとは先ほどの、トリガーを配信トリガーとして設定すれば完了です。カスタムHTMLで組んだ場合も基本的には同じで、ソースコードを丸ごと貼り付けるか、一部のみになるかの違いしかありません。

プレビュー確認

先ほど設定は行ったので次に確認の作業となります。先ほどの設定したタグが実際にちゃんと動いているか、プレビューモードを使い確認していきます。Google タグマネージャの右上にある「プレビュー」ボタンを押すとプレビューモードになります。そして実際にGoogle タグマネージャが設置されているWebサイトアクセスすることで確認できます。問題がなければ公開をし、問題があればもう一度見直しが必要です。

タグマネージャーのメリット・デメリット

便利なタグマネージャーですが、メリットもありますがその裏にはデメリットがあるのも事実です。

タグマネージャーのメリット

タグマネージャーのメリットとしては下記のようなものが挙げられるかともいます。

・タグの管理が運用者側で可能になる
今までタグを設置してもらう場合、Webサイトの管理者に依頼してたと思いますが、タグマネージャーのコードを設置してもらえば、以後依頼のの必要がありません。追加や削除もこちら側でできるので手間がなくなります。

・Webサイトの読み込み速度が短縮される
タグマネージャーを使わない場合、個別でタグの設置をする必要がありますが、利用するタグの数分だけWebサイト内に設置する必要がありました。しかし、タグマネージャーを利用すると、複数のタグコードがなくなり、タグマネージャーの物1つだけになりますので、サイトの読み込み速度が個別で設置していた時より速くなります。ただ、設置しているタグの数が元から少ない場合は早さを実感できない可能性はあります。

タグマネージャーのデメリット

タグマネージャーは便利なツールですが、デメリットもありますのでそちらも含めて使用するかを考える形がいいと思います。

・既存のサイトからの移行がすごく手間がかかる
設置してあるタグが少ない場合は、手間はそんなにかからないのですが、多い場合大量の時間を使うことになります。また、現在のサイトに設置してあるタグは全て外す必要があり、また外し忘れがあると、エラーや二重計測されてしまうなんてこともあります。

・対応していないタグがある
基本的にはGoogle タグマネージャの場合カスタムHTMLを使えば対応できますが、それでもすべてのタグが対応しているわけではないので、非対応の物はサイトに直接設置してもらう必要が出てきます。

まとめ

Google タグマネージャの設定・導入からメリット、デメリットを取り上げましたがいかがでしたでしょうか。設定はタグマネージャ管理画面ないで視覚的に確認できるので、あまり迷うことはないかと思います。GoogleアナリティクスなどのGoogle関連のサービスは基本的にテンプレートが存在するので簡単に導入できます。リスティング広告運用者が気になるYSSやYDNのタグもカスタムHTMLで対応できます。また、Yahoo!タグマネージャーを使えばYahoo!関係のテンプレートも存在しますので、使い勝手のいい方を導入するといいと思います。タグ関係で悩まされている方はぜひ一度導入をしてみてはいかがでしょうか?

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年7月11日

仕事を効率よく進める優先順位の決め方

How to prioritize仕事を効率よく進める人はどのようにして優先順位を決めているのでしょうか。
どんなに仕事量が増えてきても、落ち着いて淡々とこなしていく人もいます。このような人は優先順位への判断基準や価値観をしっかりと持っている方なのだと思います。逆に仕事量が増えてきて混乱してしまうような方は上手く優先順位をつけることができていないということになります。

仕事を効率よく進めていくために、優先順位の決め方について紹介をしていきます。

仕事の優先順位を決める必要性

優先順位をつけなければ、どの仕事から手につければよいかがわからなくなってしまいます。そのため、どれも中途半端な状態になってしまいます。この状態では、集中力も上がらず、業務効率も上がりません。そのため、まずはきちんと優先順位を決める必要があります。

優先順位を決める癖をつける

仕事の効率が上がらない人は、発生した仕事の順番に取り組んでいる可能性があります。そのような人は4つの表をつくり、仕事を表の中に当てはめていくと良いでしょう。

その4つの項目は、
1.重要かつ緊急性が高いもの
2.重要だが緊急性が高くないもの
3.重要ではないが緊急性が高いもの
4.重要でなく緊急性も高くないもの

以上の4つに当てはめていく癖をつけ1番から取り組むようにすることが、優先順位の決め方を学ぶ1歩になります。重要度や緊急度に視点をあてた考え方が必要になります。

期日の迫っていないものに対しての取り組み方を考える

説明した2の重要性は高いが緊急性が高くない仕事は、苦手意識などによって先送りにしてしまう可能性があります。これをそのままにしておけば、2の表にあったものが1の表に入ってくるようになります。そうすると慌てて混乱してしまうことがあります。そのため、大きな一つとして捉えるのではなく、小さく分けて簡単な部分から進めていくというように取り組み方を考えていく必要があるのです。

期日の捉え方を再認識する

期日にはふたつのものが存在します。1つは誰もがわかっている最終的な期日になります。もう一つは他者との関係性を高めて、信頼を得ることができる期日です。どちらを意識して仕事をするかによって得られる効果が変わってきます。それを意識し、既に終わっている仕事に対してもベストな期日はいつだったのかを振り返ることができ、それを次に活かしていくことができます。

すぐに終わらせられる仕事はすぐに取り掛かる

難易度の高い仕事とすぐに終わらせることのできる仕事を分け、すぐに終わらせられる仕事から取り掛かります。このように動くことでスピード感がでてきます。物事の初めをスタート良く切ることが次の仕事のスピードにもにもつながっていきます。完成度を求めて考えてばかりいても行動につながらないため、ますは簡単なものから動いてみることをしてみましょう。

タスクを忘れないための仕組みづくり

優先順位を決めていく前段階の話になりますが、忘れてしまっては優先順位のつけようも効率の良い進めようもありません。そのための仕組みづくりが大切です。その仕組みも人によって合う、合わないがあります。そのため、自分にあったタスク管理の方法を見つけ、段取りを組んで仕事を進めていくことが大切になります。

仕事を早く多くこなしている人の真似をしてみる

自分の会社に圧倒的な仕事の量を涼しい顔をしてこなしていく人はいないでしょうか。もしそのような優秀な社員がいるのであればその人の真似をしてみるとどのように仕事を進めていけばよいのかが見えてくることがあると思います。そのようなできる人は自分なりのやり方を持っているはずです。その人を観察し真似してみるのも良いでしょう。

過去にした仕事を活かす

全然違う分野の仕事でなければ、過去に行った仕事や書類を生かして作業を進めることができると思います。それを上手く利用することによって作業スピードが効率化できることもあると思います。その仕事がリスト化され分けられていれば、それを見つける時間さえも短縮することができます。

そのためにも、これまでの仕事の整理をしっかりしておくということが大切です。それができていればすぐに仕事に取り掛かることができるからです。

まと

仕事を効率良く進めるための優先順位の決め方について進めてきましたが、仕事でなくてもこれは大切なことだといえるでしょう。時間には限りがあります。そう考えれば人生においても同じことが言えると思います。

忙しい人にはパターンAとパターンBがあります。パターンAはやりたいことが多くて急がしい人です。パターンBは仕事に追われて忙しい人です。忙しいとは、心を亡くすと書きます。いっぱいになってしまうと周りも見えなくなり、悪循環になってしまいます。

私もいっぱいになってしまう部分があるため、優先順位についてもっとしっかりとした基準を持つ必要があるなと記事を書きながら改めて感じました。

 

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年7月7日

総務の仕事をおこなううえで勉強するべきこと

general-affairs-work-study

総務部とは、どんな企業にも必ず存在する部署です。そのため、総務の仕事は誰しもが経験する可能性があります。
総務の仕事を行っていくうえで必要な知識の前提として、社会的規範を自分の知識を知っておく必要があります。

社会的規範とは

社会的規範には2つの法があります。1つ目は、成文化され社会の規範となる「成文法」でです。もうひとつは、普段の生活で慣習的に行われてきた「慣習法」があります。

総務の仕事を行うにあたって、すべてにわたり、成文法と慣習法の知識が求められます。この2つの法は、総務の「土台となる知識」なのです。

そして、成文法、慣習法の上に築くべき知識は、下記の11項目になります。

総務の担当者に求められる知識

1.社員と会社の関係に関わる知識
2.株主総会・株式に関する知識
3.契約や債権・債務に関する知識
4.手形、小切手に関する知識と実務
5.商業登記に関する知識と実務
6.社会保険に関する知識と実務
7.労働保険に関する知識と実務
8.会計・税務に関する知識
9.給与計算事務に関する知識と実務
10.経営計画策定に関する知識
11.営業活動に必要な各種法律や規定の知識

総務業務とは

総務としてだけでみると、大まかに下記の3つの業務があります。

経営に対するサポート業務

取締役会の運営や株主総会の準備、社内行事などの企画、活動などを行い、経営陣をサポートしてく仕事です。

社内の管理業務

「固定資産管理」「消耗品や備品などの調達、在庫管理」「事務機器等の保守業務」「防災・保安などのリスクの管理」など、多岐にわたります。

社内外の対応

「秘書的業務」「冠婚葬祭や慶弔」「来客の対応・案内」「受付や電話対応」など社内外に対する窓口的な仕事を行います。

これら、庶務的な仕事は、知識が無くても誰にでもでき、ルーティーンをこなすことだけで、専門的な知識は必要ではないと考える人が多いかと思います。

しかし、備品の管理、事務機器の管理、防災保安の管理をみても、それぞれに必ず初歩的な知識は必ず求められます。備品管理ひとつをとってみても、技術革新により、商品サイクルは短くなり、より安価で便利なものが市場には出回っています。日々の変化に常にアンテナを張り巡らせる必要があるのです。

経営戦略

経営戦略の仕事とは、経営者、上層部に対するサポートをしていく業務です。

会社という組織の中で、総務は管理的な業務を担っています。そのため、日常的にさまざまな情報が集まりやい状況にあります。

例えば、経費の精算上、出張に行った担当者から「どこへ行き、何を目的に、誰と会い、どのような仕事をしたのか」という情報を細かく確認する必要があります。

また、給与計算を行う際に、勤怠事項チェック作業では、部署、社員の勤務状況が明確に確認することができます。時間外勤務の多い部署などは、メンタルヘルス対策の必要がある可能性があることもあります。また、遅刻や早退が多い部署に関しても何らかの対策をとる必要があります。

このように、総務は日ごろから、さまざま情報を「経営情報」と考え、捉えていくことが重要になります。

それにより、経営者や上層部に対し、経営計画や経営奉仕の策定に有用な情報や資料を提供することができるようになります。

労務管理業務

労務管理の仕事は、大まかに以下があります。

  • 働くときのルールづくり・就業の管理
  • 働きがいのある会社に必要な労働者と経営者の関係の構築
  • 働きやすい職場づくりを行っていくために心身にわたる健康の管理
  • 福利厚生の立案・運用
  • 社員の日常に沿って生じる諸手続きに関する管理

労務の仕事というだけあり、「人」に関わる仕事が大半を占めています。会社内の人材は適材適所なのか、人事際は、人手不足または、社員が多すぎる部署はないのか?社員の働きに見合った報酬になっているか?社員は会社に定着しているのか?などをしっかり検討していく必要があります。

企業が運営していくうえで、大きな割合を占めるのが人件費です。その人件費をしっかり管理し、社員のモチベーションを保つ土台作り、利益を伸ばしていくには、労務管理は必要振な仕事です。そのため、会社の存続から、さらに大きくしていくには、労務担当者には長期的で、経営者的な視点が求められます。

企業法務

企業法務とは、「会社の事業活動に関わる法務業務」のことです。

会社というものは、会社法により存在が認められ、営業活動などを行うことが可能になっています。その点からみても、企業の設立、活動、終了に至るまで、すべての工程に法律が関わってくるのです。

例えば、下記のような仕事があげられます。

  • 契約・取引に関する法務
  • 株式会社として企業活動していくための組織法務
  • 社内コンプライアンスに関する法務
  • 会社が何らかの法的問題に問われた時の紛争対応法務

上記のように、企業法務の仕事は、企業活動に関わるほ法務業務の仕事がすべて含まれます。また、企業活動の環境がめまぐるしく変化しているため、法務担当者は日々の経済変化などにも敏感になる必要があるといえます。

日々の変化に対応してく能力を

総務担当者は会社に関するすべてのことに関与しています。そのため、社会の変化に敏感になり、常に新しい知識の勉強をし、会社に貢献していく必要があるのです。

それぞれの担当者には難易度の高い資格を取得することが求められます。自分の知識として、資格試験に挑戦していきたいですね。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年7月5日

急がば回れ!様々なブランディング手法

Various branding methods

クライアントからの相談で多いのが、採用が上手くいかないという悩み。
仕事はあるが、肝心の社員、スタッフが足りていない。募集しても応募が来ない。なぜだろう。そういうお話です。

労働条件やその職業自体が人気がなかったりなどが考えられますが、一番の理由はその企業で働きたいと思わせるブランド力が無いからだと感じます。採用したい時だけ情報発信をして、反応を得ようというのは中々難しい話です。

就職先で人気の企業は、大企業・中小企業とその規模は問わず、採用に影響するブランド力というものを認識し、ブランディングに予算を投じています。採用、サービスの受け入れられやすさなど、あらゆることに影響する企業ブランド。
今回は、ブランディングの手法について考えてみます。

ブランドとは

そもそもブランドは、自分の家畜を他と識別するために「焼印を押す」ことに由来すると言われています。故にブランドとは、自社商品を他社と違うものとして認知させる役割があって、同業に多くのライバルがひしめき合う現代では、特に重要とされています。

ブランドとい聞いて多くの方は、高級時計や高級車やファッションブランド、普段好んで口にするコーヒーショップなどの名前を連想するでしょう。固有の企業名は挙げられても、なぜその名前が思い浮かぶのかという理由。ブランドの本質とは一体どういうことなのでしょう。

ブランドは、商品やサービスを選択する際に購入者が重視しているひとつの要素です。アメリカのマーケティング協会では、次のように定義されています。「個別の売り手、もしくは売り手集団の商品やサービスを識別させ、競合他社の商品やサービスから差別化するための名称、言葉、記号、シンボル、デザイン、あるいはそれらを組み合わせたもの。」
参考:http://www.brand-mgr.org/knowledge/word/

名称や企業メッセージ、デザインなど、ブランドを成り立たせる色々な要素のことを、ブランド・エレメントと言います。そのブランド・エレメントを通じて、消費者・顧客との関係性が構築されてはじめて、ブランドとして認識される役割を果たします。

商品に名前を付けただけでブランドが生まれるわけではなく、その商品がどういったもので、他とは何が違って、何を大切にして、どんな人に向けて、などその商品の本質が購入者に理解されて初めて、ブランドが存在し始めるのです。

知名度の高さもブランド形成の大きな要素ですが、単に知られていればOKであると言うわけではないのがブランディングの難しいところでもあります。

ブランディングの手法

ブランディングの取り組みには、ブランド名称の考案やロゴマークの作成、ウェブサイトのリニューアルなど幅広く存在しますが、闇雲に発信をしてもこちらが意図する通りに消費者に浸透しません。伝えたいことを正しく伝えるためには、自社のブランド要素を整理して、筋の通ったブランドイメージをぶれずに発信しなければなりません。

プロセスとしては、①今の自社の課題や問題点などの把握 ②業界の現状分析や今後の予測調査 ③事業方針の決定 ④業界で優位に立つためのブランド戦略立案 という順序です。

大事なのは発信ばかりを考えるのではなく、まずブランドの価値自体を考えることです。人は、機能的価値や価格だけを見て、全ての購入を決断している訳ではありません。機能で劣っていることは理解しながらも、そのメーカーの製品が好きだから購入する。そういう感情的価値による判断も購入に大きく影響してくるのです。

ブランディングとはある意味、その商品が当然持ちうる機能的な価値ではなく、選ばれるための価値を創造することだと思います。
ジャンルを問わなければ、誰にでもお気に入りのブランドや商品が存在するはず。顧客にとって自社がそんな存在となるためには、どう発信するかということよりも、こういう会社であるということを決める。そこが全ての出発点となるのではないでしょうか。

ブランドアイデンティティを決め、相応しい手段で発信して顧客との接点を作っていくなかでも、特にロゴやCMで使用するデザインは重要です。なぜなら、デザインにはブランドの本質を一瞬で伝える力があるからです。高級品にはには高級なデザインを、低価格サービスにはお得感を感じさせるデザイン。そのディレクションを間違えないようにして下さい。

また、ブランディング活動は内部向けと外部向けに大別できます。内部向けのブランディング活動により、社員が自社ブランドの本質を理解できていれば、外部に向けた発信にも一貫性が出てきます。会社と社員との結びつき効果にも期待でき、社員の退職を防ぐことにも繋がるでしょう。

ブランディングは、すぐに効果が出るものではなく、中長期的計画に基づき継続的に実施していくものです。ブランドを確立できるかどうかは、自社の在り方をぶれずに貫き通せるかどうかではないでしょうか。

まとめ

SNSを活用すれば、企業だけでなく自身のブランディングも可能な時代。どんな仕事をし、どんな事を考え、何が好きで、何が嫌いか。発信するメッセージにより、自分の人物像をある程度認識付け、つまりブランディングしているのです。人生にプラスとなるようなセルフブランディング。投稿する内容にも気をつけていきたいものです。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年7月5日

レスポンシブウェブデザインにおけるviewportを理解しよう!

understanding-viewport-for-responsive-webdesign

弊社の記事でもなんども紹介しておりますが、サイト制作においてスマホ最適化が必須となっている今、viewportの指定はWebデザイナーなら一度はつまづいたことがあるのではないでしょうか?結局、どうするのが1番いいのか、そもそもviewportって一体なんなのか、今回はviewportについて掘り下げて紹介したいと思います。

まずは、レスポンシブWebデザインとは?を理解しよう

以前弊社の記事でも紹介させていただいた、「今更聞けない?レスポンシブwebデザイン」の記事もぜひご参照ください。

レスポンシブウェブデザインとは、デバイスの種類ごとに別サイトを用意せず、ひとつのHTMLファイルで、パソコンやスマートフォン、タブレットに最適化されたページを実装することを指します。どうやってデバイスを判別するかというと、画面の大きさで判別をしていきます。グーグルにも推奨されている手法であり、URLも切り替わらなかったりとメリットも大きいので、弊社ではレスポンシブウェブデザインでのスマホ最適化がほとんどです。

他にも、同一URLでもパソコンとスマホで別HTMLを呼び出す手法の「ダイナミックサービング」というものもありますが、こちらはよほどスマホサイトなどに力を入れたい場合でないと、運営の手間がかかるためおすすめできません。ただ、デザインの幅は広がるので、ユーザー目線で考えるならばこちらの方が利便性の良いサイトを作ることが可能です。

viewportって何?

Webデザイナーでない方は「viewport」という言葉を聞いても、なんのことだかさっぱりわからないかと思います。「viewport」とは、「表示領域」のことを指しており、ブラウザにおけるウィンドウの画面幅(ウィンドウ幅)表示領域がviewportとなります。

スマホやタブレットの普及がなく、デスクトップPCだけの環境では意識する必要がなかった「viewport」の概念ですが、デスクトップPC幅とは画面サイズが異なる、スマホやタブレットの普及により、それぞれのデバイスで横幅がはみ出たりすることがないよう、指定する必要が出てきました。

横幅いっぱいでおさまらないコンテンツや本文は、横のスクロールがついて表示されてしまいます。そこで、パソコンの表示と全く同じにしておきたい場合や、レスポンシブウェブデザインの場合などviewportを指定することで、画面幅いっぱいにコンテンツや本文がおさまるようにしていくのです。

魔法の呪文<meta name=”viewport” content=”width=device-width,initial-scale=1″>

viewportの指定といっても、このようなコードをコピペして使用している方が多いのではないでしょうか?

大体の場合はこれで問題もなく、制作していけるので、このコードについて深く考えることもあまりないかと思います。ただ構造を理解することによって、何か問題が生じたときなど、柔軟に対応することができるようになるので、今回はこちらのコードについて詳しくご紹介したいと思います。

viewportで指定可能なもの

width(横幅)

viewportの横幅を指定できます。ピクセル単位での指定が可能です。初期値は980px、指定できる範囲としては、200px〜10000pxとなるようです。他にも、表示しているデバイス幅に合わせる、device-widthがあり、魔法の呪文で使われるものはこのdevice-widthが指定されています。

▼横幅を750pxにする場合

上記のように指定することで、横幅750pxの下層領域としてviewportが作られることになります。
こちらの幅とメディアクエリのブレイクポイントの幅を合わせておけば、問題なく最適化することも可能です。ただ、widthのピクセル値が効かない端末も一部あり(古いAndroidなど)、あまり推奨されている表記ではありません。

height(縦幅)

あまり使うことはありませんが、縦幅の指定をすることも可能です。横幅とのアスペクト比から計算される値が初期値となっているようです。widthと同じように、200px〜10000pxの間で指定でき、device-heightも指定可能です。

initial-scale(初期倍率)

そのページが表示されたときの倍率の設定です。width=device-widthを指定していて、initial-scaleを指定しない場合は、initial-scale=1と自動的になります。

minimum-scale(最小倍率)

最小縮小倍率の指定です。初期値は0.25で、0より大きく10未満の値を指定できます。

maximum-scale(最大倍率)

minimum-scaleと同様最大拡大倍率を指定できます。0より大きく10未満の値を指定することができ、初期値は1.6になっております。

user-scalable (ズーム操作の可否)

ユーザーがズームすることを許可するかどうかを指定できます。yesかnoまたは1か0で指定することができ、初期値はuser-scalable=yesになっています。

target-densitydpi (ターゲットとなる画面密度)

target-densitydpiは古いAndroid端末のために指定するものになります。ターゲットとなる画面密度の設定となりますが、target-densitydpi=device-dpi(ターゲットとなる画面密度をデバイスの画面密度と合わせる)とすることで端末ごとに表示される文字サイズも大きく変わってしまうことから、最近ではそうならないよう、target-densitydpi=medium-dpiに設定するか、そもそも記述しないことが多くなっているようです。
古いAndroid端末に向けてであり、最近のもの(Android4.2以降)では廃止されているので、気にする必要はないかもしれません。

メディアクエリについて

先ほど、viewportで指定する表示領域の幅と、メディアクエリのブレイクポイントの幅を合わせておけば、問題なくスマホ最適化することも可能だとご紹介しましたが、メディアクエリについても少し説明したいと思います。
メディアクエリ(Media Queries)とは、デバイスの解像度やウィンドウの幅(画面サイズ)、向きなどの指定条件に合わせて、パソコンとスマホで別々のcss(スタイルシート)を適用できる機能のことをいいます。メディアクエリを使用したcss(スタイルシート)の切り替えは、切り替え条件として「ブレイクポイント」(Break Point)を設定します。
このブレイクポイントは簡単に言うと、表示している画面幅が750px以下ならこのスタイルを、750pxより大きいならこのスタイルを、といったような形で切り替えが行われます。このメディアクエリによりレスポンシブウェブデザインを行うことが可能になりました。
しかしながら先ほども述べたように、一部viewportのidthのピクセル値が効かない端末もあることから、viewportで指定する幅とメディアクエリのブレイクポイントの値を合わせてスマホ最適化する方法は推奨されておりません。

まとめ:結局どうやって指定するのが1番いいのか?

ここまででviewportについてと、レスポンシブ化する仕組み、メディアクエリのことなども簡単にご理解いただけたかと思います。結局のところ、viewportの指定はどのようにするのが1番いいのか?
結局のところ、魔法の呪文である

に落ち着きます。メディアクエリさえ正しくなっていれば、この表記で問題が起こることはそうそうありません。
たまに起こってしまうスマホ表示の際の右側の謎の空白など、幅は全て収まっているし、心当たりも何もなく、どうしても解決できなさそうな場合はwidthにそのサイト幅を指定してあげると解決できることもあります。
たった一行の記述ではありますが、レスポンシブウェブデザインにおいて重要な記述のviewport、少し理解が深まったでしょうか?Webサイト制作の際、何気なく使用しているコードは他にもたくさんあるかと思います。そういったものもどういった記述なのか、どういった役割があるのか、など知識を深めていくと、またよりいっそう制作が楽しくなるので、どんどんいろいろなことを調べていきましょう!

このエントリーをはてなブックマークに追加
メルマガ登録
1 2 3 4 5 6 7 8 9 10 11 12 13 170