久々に自作のコード紹介になります、網干です。

今回はほぼコピペで完成してしまうようなスマホ専用メニューの作成方法をご紹介致します。
メニューの項目はアコーディオン形式で表示しますので、項目が多くなっても対応できます！
本記事を読む事で下記のようなメニューを作成することができます。

※本記事では「大項目」は見出しのみリンクなし、「中項目」はリンクありの想定でメニューを作成します。

では早速、横から割り込むようなスマホ専用メニューを作っていきましょう。

WordPressのメニューでスマホで表示するメニューを作成する

まずはじめに、WordPressのメニューから新規メニューの作成を行います。

今回は「大項目」「中項目」でメニューを作成しました。
メニューの作成が完了したら「メニューを保存」ボタンを押して確定します。

以上で、メニューの準備は完了になります。

bodyタグの下にスマホ用メニューのコード（htmlタグ、Javascript、jQuery）を貼り付ける

bodyタグの次の行に下記コードを追記します。
※基本的にはheader.phpのコードに追記することになると思います。

<!-- メニュー開閉ボタン設置 -->
<a id="menu-button" onclick="dispSpMenu();">めにゅー</a>
<!-- メニュー表示エリア設置 -->
<div id="sp-menu">
<?php
  // メニュー取得
  wp_nav_menu( array('menu' => 'てすとめにゅー', 'container' => ''));
?>
</div>

<script>
  /* スマホメニューにクラス付与 */
  // 要素取得
  var elmsMenuItem = document.querySelectorAll('#sp-menu .menu > li > a');
  
  // 要素がある？
  if(elmsMenuItem.length > 0) {
    for(var iCnt = 0; elmsMenuItem.length > iCnt; iCnt++ ) {
      // 要素にクラス付与
      elmsMenuItem[iCnt].classList.add('sp-menu-toggle');
    }
  }
  
  /* スマホ用メニューの表示切替 */
  function dispSpMenu() {
    // 要素取得
    var elmSpMenu = document.getElementById('sp-menu');
    // スマホメニュー表示中？
    if( elmSpMenu.style.left == '0px' ){
      elmSpMenu.style.left = '-300px';
    } else {
      elmSpMenu.style.left = '0px';
    }
  }
  
  /* アコーディオンメニュー開閉ギミック追加 */
  function AccordionMenu() {
    jQuery(this).next().slideToggle( 300 );
  }
  
  jQuery(".sp-menu-toggle").click( AccordionMenu );
</script>

7行目の”wp_nav_menu”の’てすとめにゅー’の箇所を作成したメニューの名前に変更することで、自作したメニューの内容でスマホ専用メニューを作成することができます。

コードの見栄えやファイル管理を考えると、script部分はまとめて別ファイルにして読み込ませる方が良さそうですね。
ですが、今回は後先のことを考えずに「コピペでできる！」という部分を追求して作成します！

コードの貼り付けは以上です。
続けて、CSSの設定を行いましょう。

スマホ専用メニューのCSSを設定する

下記CSSを設定します。
※基本的にはstyle.cssのコードに追記することになると思います。

#menu-button {
    width: 100px;
    padding: 10px 0;
    margin-left: 5px;
    margin-top: 5px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
    background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #0099CC;
    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    cursor: pointer;
    position: fixed;
    z-index: 10;
    transition: all 0.5s linear;
    display: none;
}

#sp-menu {
    left: -300px;
    width: 275px;
    height: 100%;
    background-color: rgba(255, 55, 55, 0.95);
    position: fixed;
    overflow: auto;
    z-index: 9;
    display: block;
    transition: all 0.5s ease-out;
}

#sp-menu .menu {
    padding-left: 30px;
    margin-top: 55px;
    line-height: 25px;
}

#sp-menu .menu .sub-menu {
    display: none;
}

@media screen and (max-width: 1000px) {
    #menu-button {
        display: block;
    }
}

ボタンスタイルは下記のサイト様を参考にさせて頂きました。
参考：5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

47行目の”@media screen and (max-width: 1000px)”の指定で、画面の横幅が1000px以下になったらメニューボタンが表示されるように設定しています。
もし1000pxではなく、もっと小さな横幅の時にメニューを表示したい場合は1000の値をもっと小さくしてください。

CSSの設定は以上です。

以上で、スマホ専用メニューが表示されるようになります！
細かいスタイルの修正は、CSSでなんとかごまかしましょう！

WordPressの関数を使うことで楽にメニューの作成が完了してしまいます！

いかがでしたか？

WordPressの関数を使用することで楽にメニューの項目が引き抜けてしまいます。
メニュー項目の設定自体はそこまで深い知識を必要としないので、お客様にお出しする際にも「この部分を変えればスマホ専用のメニューを変えることができます」と紹介できるのが良いですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

先日某M氏が「全員で簡単に共有できる議事録ファイルがほしい！」という云々をおっしゃった際に「ああーそれ便利ですなー」となったので、ちょいとGoogleアプリを調べてみたところ、まーこれが面白い面白い。
けれどどうにも「Googleアプリって……そもそもなんなん……？」となってしまったので、整理がてらつらつら書いてみようと思います。

そもそも「アプリ」って何？

スマートフォンが一般的に流通してからよく聞くようになりました「アプリ」ですが、もともとは「アプリケーション」とフルで呼ばれていました。PCに慣れ親しんだ人からすると、デスクトップに並んでいたアイコン、あれらがアプリケーションだったわけですね。
アプリケーションはもともとOS（オペレーティングシステム。WindowsやMacOSのこと。後述）で動くソフトウェア（コンピュータで動くプログラム）の一つです。ソフトウェアにはシステムソフトウェアとアプリケーションソフトウェアがあって、もうここらへん面倒になってくる頃合いかと思いますので、つまりアプリというのは「何らかの機械の中で動くプログラム」程度の認識で大丈夫です。

OS(オペレーティングシステム）とは

Windowsはバージョンがいろいろ変化していますが、一般的に理解されるようになった95から98、Millennium、XP、VISTA、7、8ときて現在10となっています。これらすべてがOSです。現在10なので、二世代前のVISTAあたりからかなりのおじいちゃんOSになります。95とかほとんど戦前です。
Macでいうと素敵な名前がついていて、Cheetah、Puma、Jaguar、Panther、Tigar、Leopard、Snow Leopard、Lion、Mountain Lionとネコ科できていたのがいきなり最近MavericksとかYosemiteとかになってきてMacユーザーとしては「？！」な感じになりました。まだネタ切れには早いでしょうネコ科。スナドリネコとかいたでしょう？

アプリの種類には何がある？

最近のアプリにもいろいろあって、とりあえず「何らかの機械の中で動くプログラム」から「何らかの機械の中で動くプログラムで動くプログラム」みたいなものもアプリに分類されています。

デスクトップアプリケーション

コンピュータのデスクトップ上で動くアプリ。スマホより先に普及したPCのほうでの呼び方で、単にアプリケーション、と呼ぶ場合はこちらのデスクトップ上で動くアプリのことを差して言います。若い人だとこのデスクトップアプリケーションもアプリと呼ぶときがありますね。それに合わせて企業がデスクトップアプリケーションをアプリと呼ぶこともあるようで、たまに「？？？」となっています。混合するとやばいことになりかねないので「それどこで動くアプリ？」と聞いてしまう古い人間です。

モバイルアプリケーション

スマートフォンやタブレット、いわゆる携帯端末で動くアプリです。単に「アプリ」というと、一般的にもっぱらこのモバイルアプリケーションが連想されるようです。
androidアプリ、とかiPhoneアプリ、というのもモバイルアプリケーションの一つで、androidで動くからandroidアプリ、iPhoneで動くからiPhoneアプリ、といったような言い方をします。
GooglePlayはグーグルさんがやってるandroidアプリを販売するオンラインソフトウェアショップ、AppStoreはアップルさんがやってるiOS（iPhoneに搭載されているOSのことですね）で動作するアプリを販売するオンラインソフトウェアショップです。
androidとiPhoneではプログラムの書き方が違うので、分けないとだめなんですな。ついにandroid対応！とか言ってるのはつまりそういうことなんです。どこもかしもこ商業戦略。
androidが海の中で自由に泳ぎ回るソフトならiPhoneは空を自由に飛び回るソフト、くらいの違いがあるんです。空ではスキューバダイビングなんてできないのと同じ理屈。

ウェブアプリケーション

ウェブブラウザ上で動くアプリのこと。つまり「ウェブブラウザが開ける環境であればどこでも使える」ことが利点として挙げられます。こちらも主に「アプリ」と呼ばれます。

Chromeアプリは2018年までに終了

Google、Chromeブラウザー向けの「Chromeアプリ」の提供を2018年までに終了｜INTERNET Watch
これで使えなくなるのは「Chromeを起動しなくても使えていたアプリ」にあたります。
Chromeのウェブストアのサイドバーには、「拡張機能」「テーマ」「アプリ」「ゲーム」とありますが、この「アプリ」の項目から「Chromeアプリ」がなくなります。（あいますとかぐらぶるとかのプレイヤーが涙をのみそうだ……）
Chromeブラウザの右上のマークから「その他ツール」→「拡張機能」のものは残りますので確認しておきましょう。

アプリとアドオンって何が違うの？

アプリ＝アプリケーション＝ソフトウェアというものに対して、随所で見られるアドオンとは「追加機能」という意味を持ちます。拡張機能とほぼ同じ意味合いです。
GoogleChromeはアプリケーション、GoogleドキュメントはGoogleChromeのウェブアプリケーション、Googleドキュメントにラベリング機能を追加してくれるのがアドオン、みたいな感じになります。

Googleのアプリサービス

さてわが社が愛用しまくっているGoogleさんですが、最近多岐に広げに広げたホームグラウンドをややシュッとスリムにしようと試みていらっしゃるようです。スリムなパッケージにスリムなアイテム、なんでもスリムが好まれる時代です。
ざっくりとよく知られているGoogleさんのサービスを見てみましょう。

サービスの一覧はコチラ＞＞　サービス｜Google

検索システム

GoogleChromeというウェブブラウザの提供から、ウェブ検索、ブックマーク機能などを一括してポンしてくれています。ちょうべんり。だいたいみんな使ってます。

ビジネス

普通の人にはあんまり興味ないかもしれませんが、ビジネスマンなら知っておけツール満載。広告の配信をはじめとする、「オンラインで収益を上げるための手法」をあれこれ提供してくださっています。

メディア

動画見たり画像検索したり本読んだりニュース見たり。

地理情報

GoogleMapさんには多くのウェブデザイナーがお世話になっております。グーグルアースを旅するのも楽しいですね。

目的別の検索

学術論文なんか検索できたんだ、という新しい発見。すごい…知識の玉手箱…。時間泥棒にもほどがある…。

ホーム&オフィス

おそらくGoogleChromeを使う多くの人が知っているツールが詰まったカテゴリ。

Gmail

フリーメールの一つです。Googleアカウントを取得する際に必ず必要になります。別のメールアドレスとも連携が取れます。

ドキュメント

MicrosoftWordと似たような機能で、Wordファイルへの変換も可能。書類がいろいろ作れます。別ユーザーとの共有も可能で、作成した書類はGoogleドライブに自動的に保存されます。拡張機能を入れることで、Wordファイルを開いて編集することも。アドオンを使用することで、ラベリングや名前タグを付属させることもできるなど、多様性満載。

Google ドキュメントの使い方｜Google Apps

スプレットシート

MicrosoftExcelと似たような機能で、Excelファイルへの変換も可能。こちらもいろいろ書類が作れると同時に、別ユーザーとの共有が可能で、ドライブへの自動保存機能がついています。アドオンの使用もさまざま。

Google スプレッドシートの使い方

スライド

プレゼンテーションに必須のスライドショーを簡単に作れるアプリ。MicrosoftPowerPointと連携が可能で、Chromecast（有料）やハングアウトでも利用可能。テーマや使用可能フォントも豊富で、埋め込み動画やアニメーションも搭載。PowerPointが無料で使えてしまうような心地でスライドを作成できます。

Google スライドの使い方

フォーム

イベント参加の管理やミニ投票、メールアドレスの収集や、小テストの作成、用途は様々。いわゆるアンケート機能、というものにあたります。スプレットシートとも連携が取れ、回答は同じくスプレットシートに記録可能。フォームをメールなどで先方に送るだけで、アンケートがウェブ上で完結する優れもの。簡易なヒアリングならこれだけでいけちゃうかも……？

Google フォームでアンケートを作成する

図形描画

たくさんの図形を組み合わせて、席配置やフローチャートなども作れるドローイングアプリ。ドライブに自動保存すると同時に、PDFやjpeg、pngなどといった形式で画像をダウンロードすることも可能。サイトマップを使うときなんかにすごく助かります。
似たようなツールにCacooがありますが、使い勝手はどっちかというとCacooが上かもしれません。相性もありますが、直観的に使えるのは後者ですかね。

図形描画の作成と編集

Googleサイト

上記サービスを統合してウェブサイトを建てることも可能。凝った作りはできませんが、リンクを張ってそれぞれの所定ファイルに移動することなど造作もない…なんてことができちゃいます。社内やチーム内だけで閲覧するホームページがほしいときは重宝します。

Google サイト ヘルプセンター

カレンダー

登録ユーザーと共有しながらスケジュールを時間単位で記載することができます。あの人今日お休み？　なんてことをおろおろしなくても一発で確認。簡易なタスク管理ならこれ一つで十分かも。

Google カレンダー スタートガイド

翻訳

最近精度が上がっていると聞きましたが、やっぱり「瓜二つ」は「Two gourds」と出てきてしまうので、日本語のめんどくささを感じざるを得ません。が、やはり普通の翻訳に比較すると精度は高いのかも……。

Google翻訳

GoogleKeep

ハイパーメモ帳。ただのメモ帳としても、リスト帳としても優れもの。写真を置いておくことも可能で、音声までメモに直してくれます。検索機能付きだから、メモがごっちゃになってもすぐに引っ張り出せます。
似たような機能にEvernoteがあります。こちらはノートやページで細かく分類して整理できるうえ、WEBリンクすると中のページも見せてくれたりするので、あれこれとメモが膨大になりがちな人にオススメ。

Google純正メモサービス『Google Keep』をさらに活用する4つのコツ｜Life hacker

ハングアウト

インクループの会議でめちゃめちゃ使っているハングアウト。ビデオチャットから画面共有状態でのチャット、簡易な連絡のやり取りなど、リアルタイムでの応答に優れたツール。

ハングアウト

Microsoftofficeが手元になくても、書類や表計算はできる！

これはMacユーザーには非常にありがたいお話で、いちいち購入しなくてもGoogleさんにお力を借りればMacでも普通にドキュメント作成が可能、ということです。
フルで活用するにはあまりにもいろいろできすぎちゃうGoogleさん、いつかは使い倒してみたいものですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

おはようございます！
今日は透き通る青空に気持ちのいい風で
洗濯物もよく乾きそうですね(*’▽’)気分も晴れやかです♪

以前にスマホの画面に固定位置に電話番号を常に表示する記事を書きましたが、
今回はその追記をしたいと思います。

お問合せ件数が増えた！というお客様の声も続々届いており、とても嬉しいです！
さらに件数アップのためにいろんな検証をし続けるのがインクループでもあります(*’▽’)

そこで！スマホ固定位置に電話番号を常に表示する応用編で、これあったらいいんじゃない？
と思いついたものを今回ご紹介いたします。

曜日ごとに変えられる固定表示

例えば、歯医者などのクリニックの場合、木曜が定休日の場合が多いですよね。
ですので、定休日のときに表示をちょっと変えるのです。

例：「木曜日は定休日です」とすぐにわかる表示

こうすれば定休日がすぐに認識でき、電話予約できないことがユーザーに伝わるので、
”定休日なのに電話が鳴り響く”ということがなくなります。

定休日と営業日ごとに分けて表示ができるから便利

営業日のときは通常表示させます。これならいつでも電話をかけれる状態になります。

曜日ごとに変えられるタグの実装はこちら！

コピペだけでOK！のそのまま使えるタグを紹介します。

木曜日が定休日に合わせて作成してあります。
曜日代え、文字変え、デザインなどのカスタマイズ変更も臨機応変に可能ですよ♪

曜日ごとに固定表示を変えるタグの位置はこちら

入れる場所はこちらの赤枠をご参考にしてください。（例はfooter.php）
XXX－XXXXの箇所にはお電話番号を入力してくださいね(*’▽’)

曜日ごとに固定表示を変えるタグの埋め込みはこちら

タグはこちらのタグをコピペするだけでOKです！

			

				
木曜日は定休日です
		
			
		  ';
}
else{
	echo '

			

				電話をかける

        		☎XXX-XXXX		
			
		  
';
}
?>

曜日ごとに固定表示を変えるCSSの埋め込みはこちら

こちらのCSSをコピペするだけでOKです！

/*641px～PC　PC上では見えないようにする*/
@media screen and (min-width:641px){
	.footer_area{
		display: none;
}	
}

/*スマホ～641pxの幅サイズまで*/
@media screen and (max-width:640px){
.footer_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba( 0, 0, 0, 0.6 );
	z-index: 10000;
}
.footer_area .footer_area_inner {
    position: relative;
    width: 80%;
    margin: 0px auto;
    padding: 10px 0;
	margin-right: 0px;
}
.footer_area .footer_area_inner .footer_area_inner_btn {
    width: 85%;
    padding: 11px 0;
    font-size: 20px;
    font-weight: bold;
    margin-left: 15px;
	line-height: 1.3;
    
}
.inquiry_btn {
    background-color: #068BF1;
    -webkit-border-radius: 3px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	width: 80%;
    padding: 5px 0;
    font-size: 18px;
    font-weight: bold;
}
.inquiry_btn:link, .inquiry_btn:visited {
    color: #FFFFFF !important;
}
.footer_area_inner span{
	color: #fff;
}
#siteBottom{
	margin-bottom: 85px;
}
}

以上です！おつかれさまでした！

今日は金曜日…みなさまよい週末を(*’▽’)

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

こんにちわ
木曜担当の吉見です！

最近涼しくなってきて、ようやく過ごしやすい日常が送れていてホッとしています(*’▽’)
クーラーも使わず、暖房も使わない今の時期ってなんて最高なんでしょう(*’▽’)！

さて、今日は私のお気に入りで、コピペで今すぐ使える便利な機能をご紹介したいと思います。
インクループでWEBサイト制作をする際にもよく設置します。

それほどすっごく便利なんです！(/・ω・)/

お客様がスムーズに予約・お問い合わせができるかが大切！

今やほとんどの人が持っているスマートフォン。
何かを検索して、スマホからそのまま予約をしたりお問い合わせの電話をかけた経験は皆さんあるかと思います。

「予約したいけどどこから予約すればいいんだろう？」
「いろんなページがありすぎて、予約の仕方がわからない」
「結局どこからお問合せしたらいいのかわからなくて、探すの面倒だからやめてしまった」

こんな経験はないでしょうか？
「あるある」の一つではないでしょうか。私はしょっちゅうあります(笑)

お客様を逃がさないようにするために

なかなかお問い合わせをするための方法が見つからないと

今すぐに予約したいのに！
今すぐにお問い合わせしたいのに！

スマホを片手にイライラ。こんな場面が想像できますね。

予約やお問い合わせの仕方がスムーズにできないと、
このようにお問い合わせをしたいと思っているお客様を失ってしまう恐れがあるのです。

ですから、訪問したお客様がスムーズに予約やお問い合わせをしやすいWEBサイトをインクループでは心がけて制作をしています。

スマホからそのまま予約・お問い合わせができるようにする

スマホでWEBサイトを閲覧しているお客様がスムーズに予約やお問い合わせをするための

誰でもわかる！簡単な方法

を一つご紹介したいと思います。

その方法とは、スマホからいつでもお問合わせの電話がかけられるように画面下部に常に電話をかけるためのボタンを表示し続けるということです。

こちらはインクループ社長のご両親が経営されている「焼肉八起」です。
（※相模大野にあって、私は人生の中で一番おいしかったです！自家製のタレが自慢です♪）

上記がスマホで見た焼肉八起のWEBサイトです。（URLはこちらです）

スマホでWEBサイトを表示すると、画面の一番下にはすぐにお問い合わせできるように「電話で予約する」ボタンが設置してあります。これをタップするとそのまま電話がかけられるというものです。

このボタンはパソコンで閲覧している時には表示されることなく、スマホの時だけ表示され、さらに画面をスクロールしても常に最下部に表示され続けるのです。

つまり、すぐお問い合わせ方法が見つかる＆すぐに予約の電話ができるのです！

これだけです。

シンプルオブ　ザ　ベスト！！！！

そうなんです。これが一番スムーズ。ユーザーにとってもストレスなし！
こういったシンプルさがすごく便利で利用価値は高いと思うのです。

活用してみた結果・・・利用している人はどれくらいいるのか？

実際にこの「電話をかける」ボタンを設置したとして、どのくらいクリックされるものなのか？という結果がどうなのか気になりますよね。
どんなことでもトライアンドエラーが大切です！

結果はこちらです！

※クリック数の計測にはGoogleアナリティクスのイベントトラッキングを利用しています。
[過去記事] クリック回数を測定したい！たった1行でGoogleアナリティクスでイベントトラッキングを設定する
WordPressでGoogleアナリティクスのイベントトラッキングが反映されない！（泣）

電話するボタンは確実に機能しているようです。徐々に利用してくれている方が増えているようです。
機会損失を減らすことができているのではないかと思います。

コピペだけで実装できるご予約ボタン

「…便利で簡単なのはわかったんだど、実際にサイトに埋め込もうとすると、やっぱり大変なんでしょ…？」

と思いましたか？

思った以上に簡単なんです。ご安心を！！！(*´ω｀)！

どこに埋め込めばいいのか？というと、この部分です。

footerのあと、もしくはbodyのあとに埋め込みましょう。

焼肉八起のHPでは、こちらに埋め込んでいます。

HTMLは以下のようになります。

電話番号の入力を忘れずに(/・ω・)/

 電話で予約する 電話番号をここに入れる
 

PCの画面上では表示せず、スマホの画面上のみ表示させるようにCSSを作ります。

以下のCSSをコピペすればOKです！デザインはお任せします♪

/*641px～PC　PC上では見えないようにする*/
@media screen and (min-width:641px){
	.footer_area{
		display: none;
}	
}

/*スマホ～641pxの幅サイズまで*/
@media screen and (max-width:640px){
.footer_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba( 0, 0, 0, 0.6 );
	z-index: 10000;
}
.footer_area .footer_area_inner {
    position: relative;
    width: 80%;
    margin: 0px auto;
    padding: 10px 0;
	margin-right: 0px;
}
.footer_area .footer_area_inner .footer_area_inner_btn {
    width: 85%;
    padding: 11px 0;
    font-size: 20px;
    font-weight: bold;
    margin-left: 15px;
	line-height: 1.3;
    
}
.inquiry_btn {
    background-color: #068BF1;
    -webkit-border-radius: 3px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	width: 80%;
    padding: 5px 0;
    font-size: 18px;
    font-weight: bold;
}
.inquiry_btn:link, .inquiry_btn:visited {
    color: #FFFFFF !important;
}
.footer_area_inner span{
	color: #fff;
}
#siteBottom{
	margin-bottom: 85px;
}
}

簡単なので、ぜひお試しくださいませ(/・ω・)/

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

こまごまとたくさんいろんなことを更新し続けているGoogleMapさんですが、先日ストリートビューを表示していた箇所でちょっとしたバグが見られました。

まあ基本的なところになりますが、GoogleMapさんの簡単な設置方法はこちら

＞GoogleMapのデフォルトの「地図を埋め込む」「場所を共有する」を使う場合

＞もっとカスタマイズして埋め込む場合【「Google マップ」の埋め込み地図をカスタマイズする方法まとめ】

「Google マップ」の埋め込み地図をカスタマイズする方法まとめ

社長のこんな記事も

＞3分でプロット・マッピング！エクセル顧客住所をGoogleマップの地図上に無料表示する

GoogleMapのストリートビュー表示画面が要素の上に回ってしまう場合

スマートフォン表示をするときに、インクループではよくこんな感じに電話番号やメールフォームといったコンタクト系のアイコンや、ライン、フェイスブック、ツイッターといったSNSアイコンを並べて、クリック一つで対象のリンクに飛べるようにしています。

GoogleMapさんの表示タイプは、地図タイプとストリートビューと大きく分けて二つあります。地図タイプを埋め込む場合は問題なかったのですが、ストリートビューで表示したときに、どうもこのアイコンを並べている場所の上を通ってしまうようなんですね。

これはアイコンを並べている場所に〔z-index:1;〕を入れるだけで即解決する問題でした。以下のような感じですね。

.icon-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba( 0, 0, 0, 0.6 );
height: 60px;
z-index: 1;
}

<div class="icon-container">
<div class="icon-container_inner">
<a class="icon-container_inner_btn" href="https://incloop.com/contact/">お問い合わせ（無料）</a>
<div class="icon-container_telbox">
<a class="phone_icon" href="tel:0427748442"><span class="icon-phone"></span></a>
</div>
</div>
</div>

アップデート毎にこまかな注意が必要ですね。

GoogleMapが影響するlightboxなど同一画面上で展開する要素の挙動不審

前にlightboxタイプのスクリプトを使用した可変グリッドレイアウト、タイル状のギャラリーのトップデザインが魅力的な、Wordpressテーマのお話をしました。

＞【Photoshop】複数、多量の画像を一度、一括で処理する方法

このタイプのスクリプトとGoogleMapは、純粋に表示する画面の重さゆえに相性が悪いものが多いです。特にギャラリー量が多ければ多いほど、挙動がふわふわします。

特にスマートフォンでの表示は絶望的で、重さに耐えきれずアプリが強制終了することになるのでご注意ください……気づかないでしばらく苦しんでいました。

Lightboxタイプのギャラリーは、別ページにリンクを飛ばすのではなく、その一ページ上で大量の情報を展開するため、あまり数多く利用すると、PCでは生きていてもスマートフォンで死ぬケースが多いようです。ギャラリー10枚に対しすべてのフォトに詳細をつけて、GoogleMapさんを埋め込む、なんてことになると身動きとれなくなっちゃうようです。

GoogleMapをフルで利用する際にはAPIキーが必要になっています

2016年6月22日より、新規でサイトを制作してGoogleMapを表示する場合には、APIキーが必要になりました。前はどないやったんやろう（遠い目）

Application Programming Interface (API)

あるプログラムやソフトウェアなどの機能やデータを、外部の他のプログラムから呼び出して利用するための、手順やデータ形式を定めた規約

そもそもAPIキーってなんぞ、といいますと、扉と扉を繋ぐ鍵みたいなものです。ウェブサイトという部屋とGoogleMapという部屋つなげる鍵です。

いちいちAPIキーとか取得しなくてもMap表示できるじゃん「共有」から「地図を埋め込む」を選べばすぐにURL取得できるじゃん、てのもあるかもしれませんが、APIキーを取得してGoogleMapをHPに埋め込むと、結構多彩な仕様変更ができるのですね。

自社サイトのGoogleMapのデフォルトピンのデザインアイコンや、吹き出しを使いたい、となってくると、このAPIアドレスが必須になってきます。

どんなことができるの？　という方は、見た目だけですがこんなことができます、ということでこんなサイトをご案内。

＞EZ Map

こんな機能があります。

Google Map API

GoogleMapの「リンクを共有」「地図を埋め込む」を利用する際に出てくる「この地図は自分専用です」の意味

GoogleMapには場所を保存しておく機能がついています。Googleアカウントに登録していると、ログインすることでこれらが閲覧可能になります。

メニューから「マイプレイス」＞「保存済み」を選ぶと、☆印のついた保存みの場所がでてきます。よく行くところ、行ってみたい場所、これから向かう場所などを保存しておくわけです。旅行の予定なんかにとても便利ですね。

この保存機能はGoogleアカウントに紐づいて動いているので、Googleアカウントにログインしたまま、企業のHPなどに行って地図をみると、自分が保存した場所に☆がついています。

「この地図は自分専用です」の意味はここです。Googleアカウントをログアウトすると当然見られなくなります。

企業HPで訪問者の「自分専用の地図」が表示されてしまう、というのは……まあ、悪くはないですけどどうなんでしょうかね。企業さんによると思うのですが、お気にされる企業さんはAPIキーを取得することをオススメします。普通のWEBサイトなら無料で取得が可能です。

Google Map API

HPを制作する際にがっつりGoogleMapを埋め込みたい、というときは、APIキーを取得したうえでのご依頼をお勧めいたしますー！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

木曜担当の吉見です。

今回のテーマですが、パソコン業務をするにあたって、約9割以上の方が疲れ目の経験があると思います。そこで、
「今すぐ簡単にできる！疲れ目対策」についてご紹介していきます。

パソコン・スマホ・タブレットの「疲れ目」は大丈夫ですか？

仕事でパソコン、家でもスマホ。長時間同じ姿勢でディスプレイを見る機会が増えたことで
疲れ目に悩む人が増加していて、4人に1人が疲れ目の症状を感じているといわれています。

目の充血はビタミンB2不足

目は視力が落ちてしまうとなかなか良くするのは大変ですよね(>_<)

これからもずっとお付き合いする大切な目ですので、ちょっとした工夫をするだけでも疲れ目を防げることはできます。

ではさっそくご紹介していきましょう！

疲れ目を軽減！【メガネ版】

ディスプレイにはブルーライトといわれる可視光線の380mmから500mmの紫から青色の短波長光を
発しており、可視光線の中では最もエネルギーが強い光なのが特徴です。

疲れ目を軽減するサプリメントなども多いですが、今すぐに疲れ目を軽減したい！方には
ブルーライトをカットするメガネがおススメです。
メガネを着用するだけの簡単な方法なことから、短期的、長期的にも疲れ目の軽減につながります。

度なし、度ありのブルーライト軽減メガネもありますし、
最近では種類も増え、かわいい系からキレイめ、オシャレなものまで豊富にありますよ(*’▽’)

疲れ目を軽減！【目薬版】

目薬の正しい指し方って知っていますか？
目薬を差したあとに目をぱちぱちする→これは正しい目薬の差し方とは言えないようです。

正しい目薬の差し方手順

①手を洗う（手についた汚れを落とす）
②顔を真上に向け、指で下まぶたをひく
③目薬の容器などが触れないよう1滴だけ点眼する
④約1分間目を閉じる

目のふちや皮膚についた余分な目薬はティッシュなどで優しくふきとりましょう。

目薬の成分について

疲れ目に効果が期待できる成分として、このような種類がありますのでぜひ参考にしてください。

【血行を促進】

・天然型ビタミンE（酢酸d-a-トコフェロール)
・ビタミンB6（塩酸ピリドキシン）
・ビタミンB12（シアノコバラミン）

【ピント調節機能を癒す】

・メチル硫酸ネオスチグミン
・ネオスチグミンメチル硫酸塩

【目の組織に働きかける】

・ビタミンA(パルミチン酸レチノール)
・L-アスパラギン酸カリウム
・タウリン

今まであまり成分表は気にしてなかったのですが、いろいろな種類があるんですね！

疲れ目を軽減！【アイマスク版】

疲れ目は血行不良が原因になることが多く、目の周りが凝り固まってしまっている状態です。
血行不良なので、温めて固まっている筋肉をほぐしてあげます。
※充血や痛み、炎症が起こっている場合は冷やすほうがいいみたいです。

お昼休みに目を休ませるためにもアイマスクなどで目を温めることもおススメです。
最近ではじんわり温かくなるアイマスクも薬局などでよく見かけますし、USBでつないで温めることができるアイマスクもあるので、愛用しています(*’▽’)

疲れ目を軽減！【マッサージ版】

ちょっとしたマッサージで目の疲れを軽減することもできます。
少しツボを刺激するくらいでしたら、会議中でも場所を問わずいつでもできますよね。

①清明（せいめい）

疲れを感じたときにこの辺りをぐっと押すと気持ちいいと感じる方も多いこのツボ。
目の疲れ以外にも、目の不調や全般的に効果が期待されるといわれています。

②攅竹（さんちく）

目の疲れ、頭痛の緩和、老眼や眠気解消にも効果が期待されるといわれています。
また、女性には嬉しいむくみ解消や美容面でも有名なツボです。

③魚腰（ぎょよう）

目も疲れや目のむくみやたるみ、頭痛や老眼にも効果的といわれています。

④承泣（しょうきゅう）

目の疲れやかすみ、目のむくみ解消にも。目元の血行を促進し、小じわやクマにも効果的と言われています。

いかがでしたか？目のマッサージのコツとしては、心地よいと感じるくらいの力で刺激することです。
1か所を重点的に何度も押すと痛みがでてきてしまう場合もあるため、1か所あたり5～10回を目安にしましょう。

以上、今すぐにでも実践できる簡単疲れ目対策でした(*’▽’)

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

2016.7.22より任天堂さまよりポケモンGOが配信されました。
ゲーマーの血がたぎりますねッ！　上司の許可も得たことですしガツガツお昼休みに歩いていきましたよッ！

そんなわけで世界で空前絶後の大ブームとなりそうなポケモンGOをやってみたレビューをレッツGOですのよ！

正規商品でない物にはご注意ください！初期設定のやり方

配信されたぜ！　とM氏に言われいそいそとアップルストアに行ってみたら見事につかまされました泣いた。

中には個人情報を抜き取るような悪質なアプリもあるようです！

検索から見つけにくい場合にはグーグルやヤフーから検索してダウンロードページに飛ぶといいと思いますほんとにお気をつけてー！

この画面が出てきたらもう安心。このまま生年月日、利用規約、ログインアカウント（わたくしめはグーグルアカウント利用です）、などなど諸所入力したりおっけー規約守ります等したりします。途中「通知を送信しますか？」と聞かれたりしますがご随意にどうぞ。

あと「位置把握」はしっかりとOKにしておかないとそもそもこのアプリを存分に楽しむことができませんのでビビらないで「OK」してくださいねッ！（←前までビビッてOKできなかった人）

それぞれの設定が完了したらこいつを頭に叩き込んでレッツゲームスタートですのよッ！！！

初めてのポケモンは懐かしきレッド・グリーンより「フシギダネ」「ヒトカゲ」「ゼニガメ」

もう興奮してすっかり順番忘れちゃったんですが、この時点で男女どちらかのキャラクターを選ぶことができます。

キャラクターは任意で服装や髪の色、眼の色など変更可。（たぶんこれそのうちバリエーションが増えてく課金システムなんだろうなァ）

完全趣味でわたくしめのかわいこちゃんを作ったら突然現れたこの博士、

オーキド博士じゃない……だと……？

近くにポケモンがいるってさ！　そうだねつかまえようね！

ダネ子ぉぉぉぉおおおおぉぉおぉぉ！！！！

わたしの！　初ポケは！　懐かしきン十年前の初ポケは！　君だったんだよな！

アニメのダネダネ言ってる愛らしさに「あぁ～～～ダネ子かわいいよぉぉぉ～～～！」ってなってたの懐かしいな！

もちろん今回だって君が私の初ポケですがな！　捕まえたいポケモンをタップしてね！

カメラをオフにする理由もないのでこのまま「はい」にします。ぱっと画面が切り替わったときにポケモンが見えないこともありますのでその場でぐーるぐーる回ってみてください。たまに上のほうにいたり下のほうにいたりして、「なんで君そこにいるの」を楽しむのも一興です。

誰もあんたのどうしょもない弁当なんか見たくないよ。フォークさしっぱにしないの。

ダネ子だせよダネ子。

……はいすみません興奮しすぎてうっかり画面にいるの撮り忘れましたよ……涙とまらないですな……。

初ポケを捕まえるとこんなふうに画面が切り替わってダネダネしますね。

この画面はメニューから普通に見ることができますが、なんとポケモンをタップするとモーションしてくれます。

わたしのダネダネがはかどりますね。

外を歩こう！

初ポケが手に入るとウィロー博士から「お手伝いよろしくね！」されます。

呼んでほしいニックネームはどうやらローマ字と英数字しか使えない模様。こればっかりは仕方がないので日本語はあきらめましょう。

それなりに長めでないと「使えないよ！」されてしまうので英数字含めていろいろ考えたほうがいいかもしれませんね。

そうすると歩くことができるようになります。どうやらマップ上の指定の場所にと何かがあるらしい……郵便局行くついでにちょっといろいろ歩いてみますかね！　ということで外に出ました。

遠くに見える青いスポットはアイテムポップスポット（ポケストップというらしいです）、赤いのはどうやらジムらしいです。（ジムはレベル5になって出直してこいや！されました）

ぽてぽて歩いていくと、まーもースマホ片手にきゃっきゃしてる大人のお仲間の多い事多い事話しかけたいのこらえるの大変でしたからねお昼休みのトレーナーさんたち！

小学校付近のおともだちもスマホ片手に雨の中ぽてぽて歩いておりました。そうだね夏休みだね。

遭遇。

さすがに最初ともあってそんなに全く出会わない、なんてことはないようです。事務所を出る前にキャタピーとピジョンをゲットしておりましたので実質ズバットちゃんで3匹目。

でもまぁ外で傘片手だとまぁモンスターボールが当たらないこと当たらないこと……。

力いっぱいブン投げるよりもソフトにポーンとフリックするほうが良い感じにボールが飛びます。

どうしてもだめなときは右上にある「AR」をONにしましょう。画面が止まりますのでゆっくり狙いを定めることができます。

新しいポケモンを捕まえると自動的に図鑑に登録されます。ちゃきちゃき歩きましょう。

ポケストップダイジェスト

ポケストップは一定時間時間が経つと、再ポップ設定がされているようです。十五分くらいですかね。

ランダムで「たまご」が手に入るらしく、これは後程おこなう「孵化」作業に関わってくるアイテムになります。

市役所付近の産業会館がスタート地だったので、ポケストップがたくさんありました。特に市役所なんて3か所もありまして豊作です。相模原市民の皆様はモンスターボールを集めたいときは、けやき通りをてろっと西門入口まで歩くと結構な収穫になるかと思います。

ゲットしたポケモンダイジェスト

このほかにキャタピーとピジョンがおりますがスクリーンショットに問題があったため泣く泣く……。

ところでこの子を捕まえるときにちょっとした問題が発生しました。

GPS信号を発見できないと画面が停止することがある

「トゥサキィ～～ン……」というなんとも色っぽい声が好きで愛用していたこのトサキントを捕まえたときに、画面のようにぽちっと端っこで停止してモンスターボールがとれない、という現象が発生しました。

どうにもこれは解決できないようで、いったんアプリを終了する他ないようです。

が、再起動したときにすぐに近場にポップしてくれるので、捕まえることは可能です。モンスターボールが減っているかどうかはチェックしておりませんが、歩きゃどうにでもなりそうですね。

ポケモンGOのシステムとメニュー画面

レベルが上がるとモンスターボールがもらえます。そのうちボールじゃない物ももらえるようになるんですかね？

条件を満たすとコインがもらえます（キャラクターダイアログで確認可能）

その他さまざまなことはメニュー画面で行います。

メニュー画面は上から図鑑、ショップ、左がポケモンで右が道具です。

ポケモン図鑑はポケモンの詳細がわかります

ダネ子天使。

ショップでは様々なアイテムを買うことができます

色々アイテムはございますが、基本的にはポケコインを購入したのちに各々のアイテムを購入するかたちのようです。

「課金は悪！」という風潮の世の中ですが「課金のやり過ぎ」「自分のお金ではなく親のお金を使い込んでしまう」ことが悪なのであって、別に「課金」そのものは特に悪でもなんでもございません。

個人的にわたくし課金ゲーには非常に温厚なタイプでして、制作会社様及びメーカー様にはきちんといただいたサービスに見合う対価を振り込ませていただきたいと常々思っております。

このゲームが無料なんだぜ……振り込ませてくれ……ぜひ振り込ませてくれ……このいただいたサティスファクションと感動に費やされた労力に見合う対価を支払わせてくれ……。

ポケモンではポケモンの強化、進化、博士に送る、などができます。

進化に必要なのは「ほしのすな」と「それぞれのキャンディ」ですね。スクロールしていくと「博士に送る」というボタンがあり、ダブったポケモンは博士に送ることができます。

ポケモンを送るとどうやらあめちゃんがもらえる様です。ほかにももらえるようになるのかな？

さて……ここまできて気が付きました。ポケモンGOには個体差があるんですな……。

CPが総括したポケモンの強さのようですが、よくよく見てみると体格が違ったり、そもそも持っている技がちがったりしています。こ、こまけぇ！

さすが任天堂さま……大人も子どもも楽しめるといういつぞやのシリーズのやりこみ要素をラフに入れてきましたね……！　これモンスターボール足りるのかな……？

また、タブに「ポケモン」のほかに「たまご」がありますが、こちらをタップするとポケストップなどで手に入れたたまごを孵化させることができます。

ふかそうちにセットすると、「歩け！！！」といわれますので歩きましょう。

この時ほど「通勤が徒歩でよかったッ……！」と思ったことはありません。どんどん歩きましょう。ダイエットにもなるし健康にもよいですし。

右下の時計マークのようなものをタップすると、ポケモンの順番を並び替えることができます。

道具では持っている各々の道具を使ったり確認することができます

アイテム購入をしていないので詳細はまだ不明ですが、イラストレーションもぎゅんぎゅんくるものがありますねたぎる。

歩くときには気を付けて！マナーとモラルをきっちり守って楽しいポケモンライフを！

やってみて思ったことですが

これは事故るわ……です。

他国では侵入事件、交通事故、強盗事件まで起こっているようですが、ここまでくるとホント注意力散漫ってレベルでなくなります。

が、歩きスマホでの衝突事故なんかは余裕で起こりそうな予感。だがそのリスクを引いても、この「スマホ上とはいえリアルにポケモンに会える」喜びはひとしおです。

いいですかプレイヤーのみなさん！

ポケモンをはじめとするすべてのゲームにおいて言えることですが！

そのゲームを守るのはプレイヤーのマナーとモラルと良識です！

道路の真ん中で立ち止まらない、ポケモンを見つけたら速やかに道の端によって通行人の邪魔をしない、などなど、自発的にできるマナーの順守はたくさんあります。

「他人がやってないのだから自分もやらぬ」というよくわからん理論は捨てて下さいネッ！

マナーもモラルも良識もないプレイヤーなんてゲームの敵だッ！

おねがいだからこのすごいゲームを「事件性のリスクを多分に秘める」とかいう理由で法的に禁止にしないで……ホント……まじで……。

そんなわけでポケモンGOのファーストレビュー、インクループのライトゲーマーがお送りしましたー。

フシギダネは天使。

追記：電車内におけるポケモンGO

某M氏が打ち合わせついでに検証をしてくださったようで、以下のことが判明しました。

• 徒歩でないとポケストップはだめ？→頑張れば電車でもできる。（車両内で立ち上がって走り出したりしないように！）
• 電車内でポケモンゲットできる？→早すぎてあっという間にいなくなる。（あきらめましょう）

個人的にはマナー違反になるような電車でのポケGOは断固反対ですけどね！！！！

お席に着席して必死こいてポケストップくるくるしている自分にがっくりしなければやってもいいと思います。

記事を書いている最中にこんなこともわかりましたので追記

何度か検証したのですがどうにも上手でないようで……

モンスターボールを投げたとき、どうやらボーナス判定があるようです。

グレイトとナイスと両方見ることができましたが、EXにボーナスポイントが付きました。

ところでこれなんでしょうね？

きらきらピンクの花びら舞ってます。ボーナスアイテムかな？（追記：誰かがルアーモジュールをそのポケストップで使ってるということでした）

追々記：行ってみたらいっぱいポケモンいました。

なるほどこういう仕様…

そして17時超えたあたりでのサバ落ち……！　たまらんですな。これ。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

私がおいしいもの大好きなせいか私のまわりにはとてもおいしいものがすきな友人が多いので、よくごはんの写真が送られてきます。深夜のラーメンフォトテロは本当に殺意がわきますね！　ランチタイムに「ここに行ったよぉ」なんてケーキバイキングの写真とか送られて来たら涙が出てきます。

旅行に行ったり、ランチしたり、その際にブログのネタや記念としてごはんの写真を撮る文化のようなものが少しずつ蔓延している世の中ですが、できうる限りマナーを守って撮影をしていきたい所存です。

今回はそういう飯テロに効果的な写真撮影のテクニックをちょっとだけ解説します。

ちなみにごはんだけでなく、被写体が一人分のランチサイズであればわりとブログのアイキャッチなどにも有効的ですので、どうぞスマホユーザーのみなさまは積極的にぱしゃぱしゃ小さな音で撮影をどうぞ！

スマートフォンは小さいのにデジカメ並みの良い写真が撮れます

小型化が進んだ最近のデジカメは、顔サーチや保存機能やいろいろついて、ある程度使い方を知っていれば素人でもきれいな写真を撮れる機能が満載です。

実はスマホもそれなりに高機能で、上手な加工と上手なトリミング、そして上手な角度調整ができればいい写真が撮れるのです。

角度変えるに1分もいりません。10秒あれば十分！

まずはこちらをご覧くださいませ。

これ、一切フォトショを使っておりません。スマホのアプリで完結しております。

ちなみにカウンターテーブル、1人のスペースは70センチくらいでした。iPhone5使用ですが、スマホの小ささは本当にすてきです。

写真を撮影するときの角度とは？

基本的にごはんを撮るとなったら、大概の人がその全容を映すために、真上から写真を撮ります。

狭いスペースで真上から撮り、「こんなの食べたよ！」というのは合理的なように見えますが、実はコレ、1枚の画像となる写真の中ではかなり停止、静止します。写真に動いているもなにもないやろ、というのは一理ありますが、動きのない図というのは造形概論的にもあるので割愛。

被写体がよすぎますねラーメン食べたい。若干角度が付いていますが、けれどこれはやっぱり「停止した画像」に見えます。

撮影するときにちょっと角度をつけてみましょう！　可能であればお皿の向こう側の被写体はナシ、もしくはぼかす、という選択肢もあります。

手前にピントを合わせて奥行きを意識した厚焼きたまごです。もう少し中心にピント合わせればよかったとは思っています……未熟者……。

奥に被写体が続くので、ボリューム感のある一枚になっています。

かなり角度をつけてみると、縦に盛り付けられている、高さのある被写体がぐっと見栄えするようになります。

特にお皿や器の向こう側よりも上に被写体の中身がくると、ぐっと容量が増して「おお！」感も増します。

接写というのは被写体にぐっと近づいて撮影することを言います。必然的に手前の被写体にピントが合わせることになりますが、たとえぼけたとしてもぐっと臨場感が増します。

さらにお皿や器を画面外に出すことで、小さい被写体も「……？！」くらいのびっくりボリューム。

ラム肉最高ですな。(・∀・)

肉一切れが5センチくらいだなんて思えないボリュームを出したいわけです。

オススメのスマートフォン写真加工アプリ

インスタグラムは言わずもがなですが、わりとこちらの子がシャープを使いやすくてお気に入りです。私も飯テロリストの友人に教えていただきました。

Fotor >> http://android.app-liv.jp/001088673/

課金要素もありますが、編集＞＞写真選択＞＞基本＞＞シャープ　をかけるだけでぐっと写真が見栄えするようになります。

さらに編集＞＞写真選択＞＞高度＞＞曲線調整　で、Photoshopにもあるトーンカーブが使えます。細やかなコントラスト調整、明るさ調整もお手軽簡単。

コラージュもできますので入れておいて損はないです。

加工だけに頼らない、デジタルの前のひと手間を大切に

どう撮ればかっこよくできるのか、どう見れば美しいのか、人のセンスが問われるのは写真の加工のテクニックよりも前に写真の撮り方のテクニックです。

ほんのちょっと一呼吸おいて、「この子はどんなふうに映してあげたら、一枚の画像の中で生きるのかな？」と考えてあげると、無機物有機物動物人問わず、「良い写真」が撮れるのではないかと思います。

良い写真は良いアイキャッチです。ぐっと目をひく一枚を撮りましょう！

最近の渾身の一枚でした。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

箱庭系スマホゲーム「ねこあつめ」が大人気なのですが、海外でも人気になっているとのことです。

「ねこあつめ」海外で人気　日本語版しかないのに3～4割が海外から　「日本ローカルネタ多くて恐縮」と開発会社

ゆる～いイラストの猫が集まってくるのを眺めるゲーム

ねこあつめをご存じない方のために少しだけ説明しておきます。

ねこあつめは部屋や庭に猫が好きそうなオモチャやゴハンなどを置いておくと、しばらくすると猫が集まってくるので、眺めて楽しむというゲームです。

ただそれだけです！

インストールして、30秒かからず理解できるゲームです。

そんな誰でも理解できる操作と、猫という世界的に愛好家が多い動物、そしてイラストの可愛さとが相まったのか、この「ねこあつめ」が世界的大ヒット！！

Twitterでハッシュタグ「#nekoatsume」で検索してみると・・・

記事でも書いているので、ハッシュタグで検索してみました！

日本語よりもむしろ外国語のほうが多いんじゃないかと思えるくらいです。英語以外も多いのに驚かされます。

世界中の猫好きを虜にしているようです。

ハマりすぎて止められなくなっているそうですｗｗ

この方なんて、夢が実現してしまったそうです！

これこそ日本のお家芸！

日本発のアプリが世界で人気を集めているというニュースは嬉しい限りです！

日本はIT化で出遅れたこともあり、業務用アプリなどではアメリカを始めとした海外勢に負けっぱなしです。

しかし、「ねこあつめ」のようなゆるさ全開のゲームは日本でなければ開発できないのでないでしょうか？

もしかすると今後ゆるゲーで日本のアプリが人気をさらに集めるかもしれませんね！！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

視聴行動分析サービスを提供するニールセン株式会社から「Digital Trends 2014」が公開されました。

利用者数が増加し続けているスマートフォン、一方で以前からあるガラケーにスマホの要素を組み合わせた「ガラホ」などモバイルデバイスは多用なデバイスが開発され続けています。

2014年におけるスマートフォンの普及状況はどのようになっているのでしょうか？

20代から50代におけるスマホ保有率は64%

携帯電話が本格的に普及し始めたのが1996年頃からであり、ちょうど今から約20年前です。その頃は通話がメインであり、メッセージサービスも今みたいなリッチなものではなく、カタカナ20文字が送信できる程度でした。そんな携帯電話が今では恐ろしいまでに進化してしまいました。

2014年9月にスマートフォンの保有率が従来型携帯電話（ガラケー）の保有率を超え、その後も伸びていることが分かりました。特に20代から50代までのスマートフォンの保有率は2014年11月時点で64%と働く世代の3人に2人がスマートフォンを保有している状況となり、スマートフォンの存在感がさらに増した年となりました。

~ニールセン 2014年のまとめレポート DIGITAL TRENDS 2014を公開~

PCの使用率（青い線）はずっと下降していたのですが、昨年後半にかけて下げ止まり感があります。一方でスマートフォンに関してはずっと右肩上がりの状態であり、今後の予想では、2015年の冬には逆転するとの見通しです。

図：ニールセン株式会社から「Digital Trends 2014」より

PCの利用者減に関しては、これまでインターネットを利用するためのデバイスとしてPCを使っていたユーザーが、モバイルでも十分と判断し、PCから移行してきたというのがこれまでの経緯だと考えることができます。

職場や家庭で常にPCを利用できる環境の人であれば、モバイルよりも画面の大きなPCのほうが使いやすいと考える一定の層は間違いなくいるので、5,000万人というのが今後のPC利用者数として一つの基準として考えることができるのではないかと思います。

一方でモバイルデバイスに関しては、PCとモバイルの両方を用途に応じて使い分けるユーザーがいることから、ユーザー数はPCよりも多くなり、このペースで行くと、2015年の末には6,000万くらいになりそうです。

購入するためのデバイスとしてはPCが顕在

ユーザーは用途に応じてデバイスを使い分けるという傾向があるようです。

情報の入手に関してはスマートフォンとPCの利用率はあまり差がないのですが、商品の購入に関してはPCがスマホの2倍以上の利用率となっています。

図：ニールセン株式会社から「Digital Trends 2014」より

スマートフォンで買い物することに対して、ユーザーはなんだか漠然とした不安感があるのではないかと思います。PCのほうが信頼感が高いというのも理解できます。

それと買い物に関しては差が出ていることに関してもう一つ理由があると思います。

買い物は入力する項目が多いので、パソコンほうが操作がしやすい！

ということです。スマホで多くの項目を入力していくのは非常にストレスです。アプリで入力補助することもできますが、やはり手打ちで入れていくケースが多いのではないでしょうか。

スマホで買い物をしやすい環境を作っていけば、スマホを買い物に利用する割合が高まっていくのではないかと思います。

20年前では想像もつかなかったようなことが実現してしまったスマートフォンですが、今後どのように進化していくのか目を離すことができませんね！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。