インクループ株式会社|神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 廃業のお知らせ https://incloop.com/closed_business/ Wed, 30 Sep 2020 15:00:42 +0000 https://incloop.com/?p=21788

拝啓 貴社ますますご盛栄のこととお喜び申し上げます。
平素は格別のご高配を賜り厚く御礼申し上げます。

弊社は創業以来皆様より格別のご厚情を賜り今日まで存続してまいりましたが 諸般の事情により、2020年9月30日をもちまして廃業いたすことになりました。

これまでに皆様から賜りましたご厚情に対し心より感謝申し上げるとともに、ご迷惑をおかけする結果となりましたことを深くお詫び申し上げる次第でございます。
皆様の今後のご発展を心よりお祈り申し上げます。

敬具

 

上記に関する連絡先は
[email protected]
までお願いいたします。

 

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

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

]]>
Googleストリートビューの過去画像でタイムスリップ!過去の建物や街並みをみて懐かしい気分に浸りましょう https://incloop.com/google-street-view-past-img/ Fri, 25 Sep 2020 08:55:40 +0000 https://incloop.com/?p=21764

2014年頃から、グーグルストリートビューに過去の画像が見られる「タイムマシン」という機能が追加されました。 […]]]>

2014年頃から、グーグルストリートビューに過去の画像が見られる「タイムマシン」という機能が追加されました。
あまり知られていないこの機能ですが、6年経った現在は過去の写真が多くなり、結構楽しい機能になっていたので記事にします。

ストリートビューの「タイムマシン」の操作方法

まず初めに、グーグルマップを表示します。
グーグルマップ

左上のテキストボックスに地名や建物名を入力して検索します。

画面右下の人形をドラッグ(クリックして押しっぱなし)して、見たい地図の位置に人形の位置を合わせてドロップします。

ストリートビューが表示されたら、画面左上の時計のアイコンをクリックします。

小さい画面の中に、過去の映像が残されている年代が表示されますので、ボタンのアイコンを見たい年代に移動させて日付の文字をクリックします。

過去の画像が表示されます。

左側の建物の1階の日高屋さんは昔はモスバーガーだったんですね、懐かしいです。

過去の映像はグーグル側に記録が残っている箇所のみになりますので、場所によっては過去の映像がない場合もありますが、相模原周辺の大通りであれば10年前の映像も残っていました。

コロナの影響で遠方への旅行ができないストレスが溜まっている方は、ストリートビューで過去への旅行をしてみるとストレス解消になるかもしれません。

地元を知る友だちや親戚と過去の建物や施設を懐かしんだり、昔の街並みについてクイズをしてみると盛り上がるかもしれませんね!

ではまた!

 

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

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

]]>
YouTube動画のサムネイルを差し替える方法と基本的なSEO https://incloop.com/youtube-thumbnail-seo/ Tue, 01 Sep 2020 06:40:47 +0000 https://incloop.com/?p=21723

テレワークが推奨されるようになり、世間にはオンラインイベントやウェビナーといった、インターネットを使ったユーザ […]]]>

テレワークが推奨されるようになり、世間にはオンラインイベントやウェビナーといった、インターネットを使ったユーザーへのアプローチが積極的になっています。
その中で、YouTubeを利用した動画での告知やお知らせ、紹介などを行いたい方々も増えました。

ここでは、動画のサムネイルの変更の仕方と、簡単なSEOをご紹介します。

YouTube動画のサムネイルを差し替える

1.YouTube動画のホームから右上のアカウントiconをクリックし、「YouTube Studio」をクリック。

2.YouTube Studioの左メニューから「動画」をクリックすると、投稿した動画の一覧が表示されます。

3.編集したい動画をクリックすると、編集画面が開きます。

4.「サムネイル」の項目で作成したサムネイルをアップロードすることができます。

YouTubeの動画サムネイルは以下のように推奨されています。

  • 解像度: 1280×720(最小幅が 640 ピクセル)
  • アップロードする画像ファイル形式: JPG、GIF、PNG など
  • 画像サイズ: 2 MB 以下
  • アスペクト比: できるだけ 16:9 を使用する(YouTube プレーヤーやプレビューで最もよく使われるため)

動画のサムネイルを追加する

YouTube動画の基本的なSEO

大まかに分けて「タイトル」「説明」「タグ」の三項目があります。
また、基本的なSEOは、WEBサイトの投稿記事などと同じ法則になります。

YouTube動画のタイトル

  • 約50文字以内にまとめること。
  • ユーザーが検索するであろうキーワードを使うこと。
  • 必要であればハッシュタグを利用する。

動画検索でのハッシュタグについて

YouTube動画の説明

  • 200~350文字程度にまとめる。(文字数制限は5000文字)目安推しては3行前後。
  • 動画のタイトルに含まれたキーワードを盛り込む。
  • 「とりあえず書く」「キーワードだけ並べる」はスパム認定される可能性あり
  • ユーザーにわかりやすいようなセンテンスにする。
  • 必要であればハッシュタグを利用する。

動画検索でのハッシュタグについて

YouTube動画のタグ

  • 効果は微小であるがあったほうがいい。
  • つけすぎはスパム認定に。多くても15~20個程度を目安に。

動画にタグを追加する

 

YouTube動画の便利機能

動画に終了画面を追加する

YouTubeの動画終了、最後の 5~20秒に、終了画面を追加することができます。他の動画を宣伝したり、ユーザーにチャンネル登録を促したりする目的に利用できます。

動画に終了画面を追加する

 

YouTube動画のカード

YouTube動画の画面上に特定のカードを表示することができます。
動画、再生リスト、チャンネルの他、外部サイトへも誘導することが可能です。(他リンクへの誘導にはYouTubeパートナープログラムに参加する必要があります)
基本的にテキストで表示されます。カスタマイズメッセージ(30文字)で紹介文を別途掲載することもできます。

動画にカードを追加する

画像・ロゴの透かしを動画に追加

カスタムチャンネル登録ボタンと呼ばれることもあります。
ユーザーにチャンネル登録を促すことができます。画像を利用することが可能です。
150×150ピクセル以上の正方形で、サイズは1MB未満にする必要があります。

画像・ロゴの透かしを動画に追加

 

 

設定をしっかりと行い、情報をユーザーに届けていきましょう!

 

 

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

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

]]>
ホームページ上で動画を自動再生させて、動画の中央に画像を被せて表示する簡単な方法 https://incloop.com/video-and-image-display/ Mon, 24 Aug 2020 07:34:45 +0000 https://incloop.com/?p=21703

Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。 ホーム […]]]>

Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。
ホームページ上で動画が流れるようなサイトは中身のコンテンツも凝っていることが多いので「すごく難しい事をやっているんだろうなぁ…」と思ってしまいますが、実はそんなことはなかったりします。
ということで、今回は表題の通り「動画を自動再生させて、動画の中央に画像を被せて表示する方法」を紹介します。

この記事を読んでできる事(サンプル)

下記のように、動画の上に画像を被せた表示ができるようになります。


準備は簡単!動画と画像を用意するだけ!

画像は弊社のロゴを使用します。
動画は著作権フリーで非常に良質な動画がダウンロードできる「pixabay」様のサイトから取得しました。
準備はたったこれだけですが、単純な技術だからこそ素材の質が非常に重要になるので、素材の選定にはこだわりましょう!

設置するHTMLコード

設置するコードは下記になります。

<div id="movei-contents">
  <video id="video" src="https://incloop.com/wp-content/uploads/2020/08/fishing.mp4" loop autoplay muted></video>
  <img src="https://incloop.com/wp-content/uploads/2020/08/logo.png">
</div>

上記のように、videoタグとimgタグに用意した素材のURLを貼り付けるだけでOKです。
注意点としては、videoタグには「loop」「autoplay」「muted」という属性を付けています。
「loop」は映像のループ、「autoplay」は自動再生、「muted」は動画の消音設定になります。
GoogleChromeでは「muted」属性が付いていないと「autoplay」が動かないので、その点のみ注意が必要です。

詳細は下記記事が参考になりますので、詳しく調べたい方はリンク先をご確認ください。
video: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN

CSS(スタイルシート)の設定

用意するコードはたった3つのセレクタになります。

<style>
#movei-contents {
  position: relative;
  display: inline-block;
}
#movei-contents video {
  width: 100%;
}
#movei-contents img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 50px 100px;
  background-color: rgba(255,255,255,0.6);
}
</style>

これだけのコードで、今風のホームページによくあるサンプルのような表示が実現できてしまいます。

少しでもホームページの見栄えをよくしたいと思ったら、今回のような動画と画像を組み合わせたコンテンツを表示しても良いかもしれませんね。

ではまた!

 

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

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

]]>
Adobe XDを動画で学ぶ総合学習プログラムAdobe XD Trail https://incloop.com/adobe-xd-trail/ Mon, 17 Aug 2020 07:47:13 +0000 https://incloop.com/?p=21681

Adobe製品にはいずれのソフトウェアにもラーニングページが設けられていますが、Adobe XDにおいては専用 […]]]>

Adobe製品にはいずれのソフトウェアにもラーニングページが設けられていますが、Adobe XDにおいては専用のサイトが設置され、さらに多様なチュートリアル動画が用意されています。

Adobe XD Trail

AdobeXD検定でスキルを自己分析

Adobe XD Trailでは、無料で検定を受けることができます。

Adobe XD検定

初級、中級、上級の3つのレベルから検定を選ぶことができ、問題に答えるだけで、得意分野や強化ポイントをカテゴリ別に診断することができます。

検定は一問一答形式の4択で、制限時間はありません。

途中で「もう一息!」など応援するコメントが出ます。地味に勇気づけられます。

一通り返答すると、以下の画面に切り替わります。

 

「結果を見る」をクリックすると、以下の画面に切り替わります。

総合上級問題に促すボタンとともに、スクロールしていくと各問題の解説を見ることができます。

その際、「関連する解説動画を見る」をクリックすると、問題の解説を動画で閲覧することができます。

 

 

学習には「TUTORIAL」「LESSON」「WORKSHOP」と多様な選択肢

Adobe XDの多彩な機能を、個別に動画で学ぶ TUTORIAL

UIデザイン、プロトタイピング、共有、デザインシステム、機能拡張とツール連携、というカテゴリがあります。

  • UIデザイン
    ユーザーインターフェイスを構築するための操作に関するチュートリアルが掲載されています。
    レイヤーの操作や描画ツールの使い方、オブジェクトのサイズ変更や回転、テキストツールやリピートグリッド、構成要素を意味するコンポーネントの作り方などを学ぶことができます。
  • プロトタイピング
    作成したユーザーインターフェイスに動作を追加し、模擬的にサイトを動してウェブサイトの試作をすることができるプロトタイプモードでの操作を学ぶことができます。
  • 共有
    作成したデザイン及びプロトタイプを、クライアントやコーダーといった他の人と共有するための操作を学ぶことができます。
  • デザインシステム
    AdobeXDに紐づくクラウドドキュメントの操作、各アセットの操作や、コンポーネントの具体的な操作方法などを学ぶことができます。
  • 機能拡張とツール連携
    プラグインの利用、他Adobe製品との連携、クリエイティブクラウドとの連携などを学ぶことができます。

 

目的やつくりたいもの別に、実際に手を動かして学ぶ LESSON

現在は2つしか動画がありませんが、目的に合わせてXDを使ってデザインを作成することができます。

 

一人では分からないことも、みんなで一緒に高め合う WORKSHOP

ConnpassのAdobe XD Trailグループでワークショップを行なっています。

ConnpassとはエンジニアをつなぐIT勉強会支援プラットフォームです。

サイトはこちら。

Adobe XD Trailグループはこちら 

現在439人のメンバーがいるようです。

学習にワークショップキットも用意されているので、動画を見ながら自分で勉強することができます。

 

学習キットも充実「KIT/RESOURCE」

XD Trail ワークショップで実際に使われる、オリジナル学習キットを公開しています。

また、初級編、中級編とスターターキットが用意されており、レベルに応じて学習が可能です。

さらに、UI Kitなどの便利なリソースもダウンロード可能です。

Adobe XDは初心者でも楽しくわかりやすく学べる環境がしっかり整っています。ぜひ勉強してみましょう!

 

 

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

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

]]>
2020年 夏季休暇のお知らせ https://incloop.com/2020%e5%b9%b4%e3%80%80%e5%a4%8f%e5%ad%a3%e4%bc%91%e6%9a%87%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ Tue, 11 Aug 2020 01:51:52 +0000 https://incloop.com/?p=21672

夏季休暇についてお知らせいたします。 誠に勝手ながら、弊社の2020年の夏季休暇は下記の期間とさせていただいて […]]]>

夏季休暇についてお知らせいたします。

誠に勝手ながら、弊社の2020年の夏季休暇は下記の期間とさせていただいております。

2020年8月13日(木)~2020年8月16日(日)

上記期間中のお問い合わせは弊社のホームページ「お問い合わせ」からご連絡いただけますようお願いいたします。
ご不便おかけいたしますが、何卒ご了承くださいますようよろしくお願い申しあげます。

 

熱中症に気をつけましょう!

新型コロナウイルス対策で、新しい生活様式が取り入れられ、マスクの着用による熱中症のリスクが高まっています。
マスクを付けると皮膚からの熱が逃げにくくなったり、気づかないうちに脱水になるなど、体温調整がしづらくなってしまいます。
暑さを避け、水分を摂るなどの「熱中症予防」と、マスク、換気などの「新しい生活様式」を両立させましょう。

「新しい生活様式」における熱中症予防行動のポイントをまとめました|厚生労働省

【新型コロナウイルス】マスク着用で熱中症リスクが高まるおそれ 熱中症を予防するための8ヵ条|日本生活習慣病予防協会

 

夏にできるオンライン体験

外に出るのはちょっと今は怖いなぁ、という場合には、様々なオンライン体験を利用することができます。

online experience|アクティビティジャパン

お家時間を楽しもう!オンラインイベント特集|PassMarket

オンラインアカデミー|ベルトラ

日が高くなって暑くなったら海を眺めて癒やされる今日このごろのテレワークです。

ぼーっと沖縄

 

ウィズコロナで生活に様々な変化が起きていますが、じっくりと向き合って素敵な夏を過ごしましょう!

 

 

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

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

]]>
ファッション系のECサイトで役立つ!服やアクセサリー画像の「着せ替えアプリ」機能の実装方法 https://incloop.com/dress-up-script/ Fri, 07 Aug 2020 12:59:30 +0000 https://incloop.com/?p=21585

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。 使用 […]]]>

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。

使用する言語

  • HTML
  • CSS
  • JavaScript
  • jQuery

※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。

着せ替え機能のサンプル

服の画像をクリックすると、服を組み合わせた画像を上部に表示します。





各種コードの説明

HTMLコード

<div id="kisekae-area">
  <img class="base-img" src="https://incloop.com/wp-content/uploads/2020/07/base.png">
</div>

<div id="select-img-area">
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4.png">
  </p>
</div>
class「base-img」の要素には、切り替えても消さない基準となる画像を入れておきます。

class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。

着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。

jQuery(JavaScript)コード

<script>
<!--
  jQuery(function($) {
    // 画像エリアクリックイベント
    $('.select-img').on('click', function(){
      $(this).toggleClass('selected');
      change_img();
    });

    // 画像変更処理
    function change_img(){
      var s_html = '';
      var i_z_index = 1;
      $('.select-img.selected').each(function(index, element){
          s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">';
          i_z_index++;
      });
      // 要素削除
      $('#kisekae-area img').each(function(index, element){
        if(!$(this).hasClass('base-img')){
          $(this).remove();
        }
      });
      // 要素追加
      $('#kisekae-area').append(s_html);
    }
  });
-->
</script>
画像がクリックされたら、HTMLコードに予め仕込んである二枚目の画像のURLを取り出し、z-indexを正しい順序で埋め込みながらimgタグを生成します。

選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。

※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。

CSS(スタイルシート)の設定

<style>
#kisekae-area {
    border: solid;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}
#select-img-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.select-img {
    border: solid 1px #000;
    text-align: center;
    padding: 10px;
    width: 20%;
    margin-right: 5px;
    cursor: pointer;
}
.select-img img {
    display: none;
}
.select-img img:first-child {
    display: inline-block;
}
.select-img:hover {
    background-color: #e6e6e6;
    opacity: 0.6;
}
.select-img.selected {
    background-color: #e6e6e6;
}
#kisekae-area img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#kisekae-area img.base-img {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}
</style>
CSSの重要な設定は「#kisekae-area img」の箇所となります。
位置を調整しないとレスポンシブの際に表示が崩れてしまうため、leftやtransformで真ん中に表示されるように調整しています。

今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。

コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません!

弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。

ではまた!

 

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

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

]]>
【テキスト・画像 保存可能】PC(パソコン)版 LINEのトーク履歴のバックアップと復元方法 https://incloop.com/pc_line_backup/ Wed, 05 Aug 2020 08:23:00 +0000 https://incloop.com/?p=21622

パソコン版(Windows版)のLINEをインストールして、スマートフォンと同じアカウントで利用している人とい […]]]>

パソコン版(Windows版)のLINEをインストールして、スマートフォンと同じアカウントで利用している人というのは多いのではないでしょうか?

先日、パソコンを買い替えたのですが、パソコン版のLINEのデータ(トーク履歴)を新しいパソコンに引越しさせる方法がGoogle先生で検索してもなかなか見つけられませんでしたが、分かったので備忘録として残します。

普通に
「パソコン版 LINE バックアップ」
で検索しても、パソコン版のLINEはバックアップできません!!テキストコピーして残すしかありません!などとなぜか断言しているページばかりなんですが、全然そんなことはなくて・・・

appdataの中にデータが保存されていて、コピーして上書きするだけで
「テキストも画像も新しいパソコンに引越しできる」んです!

できないって書いている投稿が多くて、困ってる人も多いと思ったので、書くことにしましたw

パソコン版LINEとは?

パソコンとスマートフォンと両方の端末で同じアカウントで使うことができるので便利です。

https://line.me/ja/download

パソコン版LINEのダウンロード方法

Windowsで使う場合は、Windows版を選択してインストールをしてください。

パソコン版LINEのWindows版のダウンロード方法

LINEのトーク履歴のバックアップ方法

まずは古いパソコンのLINEのトーク履歴をバックアップしたいと思います。

①パソコン版のLINEを終了させる

タスクバーのLINEのアイコンを右クリックして、【終了】を選択して、パソコン版のLINEアプリを終了させます。

パソコン版LINEの終了方法

②隠しファイルを表示する

LINEのデータは初期設定のままでは見えないところ(隠しファイル)に保存されています。

隠しファイルを表示するために、以下の箇所にチェックを付けます。

隠しファイルを表示する方法

③LINEのデータの保存場所

隠しファイルにチェックをつけると、以下のようにAppDataというフォルダが見えるようになります。

で、実際のLINEの保存場所は以下のフォルダです。

C:\Users\自分のユーザー名\AppData\Local\LINE

このLINEフォルダをまるごとUSBメモリなどに保存すれば、バックアップは完了です。

パソコン版LINEのバックアップ先

LINEのトーク履歴の復元方法

新しいパソコンに古いパソコンのLINEトーク履歴を復元する方法は簡単です。

  1. 新しいパソコンにパソコン版LINEをインストールする。
    ダウンロード先:https://line.me/ja/download
  2. インストールし終わったら、タスクバーからLINEを終了させる。
    ※上記に説明した方法です。
  3. USBメモリなどに保存しておいたLINEフォルダの中身を全部コピーして、
    C:\Users\自分のユーザー名\AppData\Local\LINE
    に上書きする。
  4. パソコン版LINEを起動する。

たったこれだけです!w

これで古いパソコンのLINEのトーク履歴を新しいパソコンに引越しさせることができます。

これで新しくパソコンを買っても安心です!ぜひお試しください。

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

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

]]>
厚生労働省公式のCOCOA -接触確認アプリ- を使ってみました。 https://incloop.com/cocoa-%e6%8e%a5%e8%a7%a6%e7%a2%ba%e8%aa%8d%e3%82%a2%e3%83%97%e3%83%aa-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%be%e3%81%97%e3%81%9f/ Wed, 05 Aug 2020 00:11:19 +0000 https://incloop.com/?p=21607

新型コロナウイルス接触確認アプリ(COCOA) COVID-19 Contact-Confirming App […]]]>

新型コロナウイルス接触確認アプリ(COCOA) COVID-19 Contact-Confirming Application とは?

COCOAは、厚生労働省が公式に発光している、新型コロナウイルス接触確認用のスマートフォンアプリケーションです。

新型コロナウイルス接触確認アプリ(COCOA) COVID-19 Contact-Confirming Application

7/31 17:00の段階でのダウンロード数は約996万件、日本の人口の約8%がダウンロードしている計算となります。意外と少ないですね!

なお、個人におけるスマートフォンの保有率が64.7%なので、約8,150万人がスマートフォンを持っていると考えると、約12%ほどしかこのアプリをダウンロードしていないということになります。少ないですね!

スマートフォン保有率

一ヶ月前ほどからリリースが開始され、最終アップデートは8/3現在3週間前となっています。(iPhone8調べ)

先日キャリアからメールでご案内が来ていたので、さてどんなものかと思いつつ、DLして使ってみました。

 

COCOA -接触確認アプリ-  でできること。

  • 新型コロナウイルスで陽性と診断された方との接触を確認することができます。
  • 新型コロナウイルスと診断された場合、その情報を登録することができます。

基本的にできることはこの2つです。

これはつまり、

  • 新型コロナウイルスから自分の身を守るために情報収集ができます。
  • 新型コロナウイルス陽性者になった場合、周囲の人たちを守ることができます。

ということです。

できれば新型コロナウイルスにかかってしまったかも……という場合の対処方法もアプリ内に記載してほしいなと思うのですが、その場合はこちらをどうぞ。

新型コロナウイルスに関するQ&A(一般の方向け)

基本的には各市区町村に専用相談窓口があります。決して病院に突然いかず、まずは連絡を。

 

COCOA -接触確認アプリ-  の使い方

まずはアプリをダウンロードします。

アンドロイド系【Google Play】

iPhone【App Store】

以下はiPhoneの画面です。

ダウンロードしてアプリを起動すると、以下のように案内が表示されます。

 

「次へ」を押すと、利用しているスマートフォンへのプライバシーに関する注意事項が表示されます。プライバシーは全て暗号化され、行政や第三者によって利用されることはなく、また、アプリ自体をアンインストール・削除すれば、接触記録はいつでも止められるようです。

記録の蓄積も14日で終わると明言されています。

引き続き、「次へ」を押すと、利用規約、プライバシーポリシーへの同意を求められます。

 

 

最後に通知を有効にするかどうか求められます。難しいこと書いてありますが「新型コロナウイルスがめちゃくちゃ近かったぞ、というときに通知しますか?」と尋ねられています。有効にしておいて損はないでしょう。

これらの作業が終了すると、登録完了です。簡単ですね。

なお、使い方は特にありません。スマートフォンを携帯するのみです。画面ではこのように確認できます。

「陽性者との接触を確認する」をクリックすると、以下のようにアンサーがあります。

 

COCOA -接触確認アプリ-  アプリ内で確認できること

以下の4点が確認できます。

それぞれにアプリでできることが詳しく書いてあります。

 

このアプリをダウンロードしていて有意義なことは、「感染を広げない」という一点につきます。

自分が陽性者に接触した場合、何をしたらいいのか。

自分が陽性者になった場合、どうしたらいいのか。

自分も周囲もきちんと正しく守るために、アプリを利用したいですね!

 

 

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

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

]]>
食べて健康になる!お弁当屋「有限会社あさのやおふぃす」様のホームページ制作を行いました https://incloop.com/asanoya/ Fri, 17 Jul 2020 07:14:23 +0000 https://incloop.com/?p=21565 あさのや記事アイキャッチ

栄養バランスの良いお弁当やお惣菜の宅配を行う「有限会社あさのやおふぃす」様のホームページ制作を行いました。 ホ […]]]>
あさのや記事アイキャッチ

栄養バランスの良いお弁当やお惣菜の宅配を行う「有限会社あさのやおふぃす」様のホームページ制作を行いました。
ホームページはこちらから。
トップページ

写真を多用することで賑やかで活力のあるサイトへ

写真を多用することで、賑やかで活力のある元気なサイトへ仕上げました。
ユーザーのクリック頻度の高いコンテンツやリンクはトップビューに設置し、各種ページへのリンクは専用のバナーを作成することで視覚的に分かりやすいデザインに仕上げました。
トップビュー

画像をひと工夫することで楽しいメニュー表に

お弁当の画像にはちょっとした遊び心を加える事で、見るだけでも楽しくなるようなメニュー表に仕上げました。
お弁当メニュー

レスポンシブデザインでスマホにも対応、更新作業の負担を軽減

レスポンシブデザインで構成することで、パソコンと同じ情報量がスマホユーザーにも届くようにしています。
更新の際も「スマホ用」「パソコン用」と二つの情報を更新する手間が無くなるため、ホームページの更新作業も楽になります。
トップページのパソコンとスマホの画面

ブログページも写真をメインに、綺麗な写真が並んでもっと華やかに!

ブログページは単純に記事の一覧が並ぶようなページではなく、文字よりも写真をメインにしたタイル型の記事を敷き詰めるようなページに仕上げました。
記事を投稿するごとに一覧ページの華やかさが変わるため、見ているユーザーだけでなく、投稿者の楽しみにもなるように設計しております。
ブログページ

使用しているCMS

WordPress

作業期間について

本制作の作業期間は下記の通りです。

構成検討:約3日
デザイン:約5日
実装:約10日
確認・調整:約3日

制作費用について

制作に関する費用は下記フォームよりお問い合わせください。

お問い合わせはこちらから

 

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

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

]]>