【UX】スマホ×ゲーム機×PC『クロスプラットフォーム(マルチプラットフォーム)』が生み出すユーザー体験


目次


クロスプラットフォームとは

「クロスプラットフォーム(マルチプラットフォーム)」とは、OSやデバイスの違いなどの「壁」を越えた、データの受け渡しが出来る「統一仕様」で設計されたアプリケーションと説明すればわかりやすいでしょうか。
※同一アプリケーションを相互通信なく複数デバイスで製品展開する意味での「マルチプラットフォーム展開」とは異なります

身近なゲームカテゴリでは、商品コンセプトと利用シーンが違う「スマホ」「タブレット」「ゲーム機」「PC」それぞれのユーザーが、同一アプリケーションをそれぞれ所持して一堂に会する「ゲームソフト」でのマルチプレイを実現するものもあり、デバイスに限定しない強い戦略思想を感じます。
※入力デバイスの差異等により、スマートフォンデバイス以外のゲーム専用機間でのクロスプラットフォームが一般的
クロスプラットフォーム

この戦略により多種多様で複雑分散したターゲット層に対して「クロスプラットフォーム」は強いアプローチができました。


クロスプラットフォームに必要な条件

プラットホームを限定せず、デバイスを利用シーンに合わせて変更する場合は連携アカウントが必要になります。

また、
オンラインマルチプレイにはサブスクリプション契約による「サーバー」の仕組みを導入しているアプリケーションもあり、複数利用者が好きな時間に接続することが可能になることで利便性を高めることが可能となっています。


クロスプラットフォームのメリット

「サンドボックス型ゲーム」マルチプレイの例では「連携アカウント」により、

  • スマホ
  • 携帯型兼据え置きゲーム機
  • 据え置き型ゲーム機A
  • 据え置き型ゲーム機B
  • PC

それぞれのアプリケーションを連携させることができるため、どのデバイスでも利用シーンにあわせて続きをプレイする事ができ、またそれぞれのプラットフォームのユーザーと一緒に遊ぶことが出来ます。
※オンラインマルチプレイには別途サブスクリプション契約によるサーバー契約が一つ必要※参加する招待ユーザーは無料(※2020.3.23現在)

つまりは、
個人で遊ぶ場合は、部屋では画面の大きいゲーム機で遊び、外出時はスマートフォン

複数人と遊ぶ場合は本人は部屋のゲーム機で遊び、外出先のメンバーはスマホで遊ぶ

以上のプレイスタイルが選べるのがクロスプラットフォームのメリットです。


多様化した利用シーンとユーザー体験

多様化した現在では、

「PCを持たない」
「テレビがない」
「ゲーム機がない」
「スマートフォンだけ所持」

などの利用シーンが増え、その中でも驚異的な所持率のスマートフォンを念頭に戦略を考える必要があります。

ゲーム機専用ソフトのプロモーション目的でスマホ版の「簡易版」を展開する企業もあれば、
スマートフォンアプリでブランド認知を進めた後、ゲーム専用機で「eスポーツ」に参画する企業も出てきました。

所持率の高いスマートフォンですが、その利用シーンも多種多様になり、市場にマルチ展開することで同一IPへの接触頻度が高められ得られる相乗効果も過去のマルチメディア展開の比ではありません。

デバイスの連携によって得られるユーザー体験は、古くからゲームに触れてきた方にはとても不思議なものです。


さいごに

リスクを背負うハード開発から手を引く企業が増え、目まぐるしいハードウエアの競争が落ち着き、裾を広げるクロスプラットフォームが必然かはわかりませんが、多様化を認める世の中においてはとても便利なアプローチではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

風邪がうつらないようにするにはどうすれば?ユーザビリティ目線で考えてみた

年間を通して一般的な風邪や流行り風邪(インフルエンザ等)が絶えませんよね。
こればかりは個人が気をつけるしかありません。マスクやアルコール除菌が有効なのは承知の上、それでいてもそこをすり抜けて風邪はやってきます。
今回はちょっとデザイン的なUI目線から、自分たちができる範囲での注意や見直しを兼ねて考えていきたいと思います。

※特に風邪が流行った時に注意できたら…という感覚でお読みいただけると幸いです。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

最初に

風邪がうつる主な3つの要因として、例えば以下のことがあげられます。

・咳などの飛沫
・菌が付着しているところを触った手で口元などを触る
・空気感染

今回はこの中でも、環境や自分の意志、行動で注意のしやすい「触れる」部分に特化したいと思います。

不特定多数が触れる場所8

パッとあげられる8個を簡単な注意と実際に実現ができるのではと考えられる改善案(エラー解決までは至っておりません)を含めながら紹介していきたいと思います。

※すべてアルコール除菌を設置すれば…という考えも出てくると思いますが表題通りあくまでユーザビリティ目線で考えております。

1.つり革

つり革は特に朝の通勤、通学ラッシュ時には休みなく使われますね。
一見綺麗に見えるつり革ですが、人がずっとつかんでいるものですから手垢などがついてしまうのは仕方のないことです。
そこで、少しでも綺麗な状態で使う方法はないか少し視点を変えて考えてみたいと思います。


1つのつり革の使用回数を減らす方向性で考えてみました。
配置した時の幅の取り方など考えなければならないことはありますが、こうすれば基本的には綺麗な状態のつり革を都度都度、使うことができるようになるのではないでしょうか。
また、マイ箸ならぬマイつり革なんてあっても面白いかもしれません。好きな柄やサイズが選べたりしたら実際使うのも楽しくなりそうです。

2.ドア

ドアを開けるときに実はガッツリとドアノブを触っていることを意識したことはありませんか?重いドアになればなおさらです。
沢山の人がドアを開閉するということはそれだけそのドアノブを使っているわけなので、特に風邪が流行っているときなんかはどうしても気になってしまいますよね。ドアノブに触れなくてもドアとして機能するものといえばアレですね!

自動ドアです。ドアノブが無いのでドア自体に触ることもなく(一部ボタン式ドアを除く)沢山の人が通ってもドアに手垢がつくことは、ほとんどないと思います。手がふさがっている時も快適に使えて、とても便利ですね。コンビニ、スーパーなど様々な人が行き交うところで設置されれば良さそうです。
デパートなどでは自動ドアと自分で開ける式のドアが並列していることもあるので意識的に自動ドアを使用するなどするのもありかと思います。
ただし、会社などの私有スペース周りに自動ドアを実装する際はセキュリティーの対策をしっかり考える必要がありそうです。

3.お金

お金は回りに回っており、かなりの不特定多数の方が触っています。
他のどんなものよりも色んな人の垢がついている代物です。
お仕事で扱うことを除けば一般的には商品を購入するときにお金に触れる機会がほとんどです。それもほぼ毎日といっても過言ではございません。ここで、お金に触れる機会を減らしてみてはいかがでしょう。


こんな時こそ電子マネーなどを使用してみてはいかがでしょう。
これならすぐに誰でも簡単にできますね。クレジットカード、スマホの支払いアプリ、交通機関のカードなどなど実際に現金を触らなくても支払えるものを使用することで、物理的にお金に触れる機会が減るのではと考えました。あわよくば還元も受けることが出来るので、そのような環境が整っている人はできる限り使用するようにすると良いかもしれません。

4.エレベーター

エレベーターは乗ったら自然と行先ボタンや開閉ボタンなど触りますよね。会社のビルならまだしも、大きなデパートなどになればなおさらエレベーターのボタンは不特定多数の人が使用することになります。それではいっそのことボタンに触れなくても良いエレベーターがあったらいかがでしょうか。

エレベーターのボタンを触らずとも一定秒数、手を使近づけるだけでセンサーが働いてボタンがおせたら便利と考えます。満員時の誤認識なども考えられるのでエラーの解決ができれば実現性はあるかもしれません。ちなみに、自動販売機などにも同様な機能があれば便利そうです。

5.エスカレーター

エスカレーターの手すりは常にグルグルと循環しています。
利用者は基本的には手すりにつかまるのが原則ですので、こちらも不特定多数の方が多く使用されますね。(割とガッツリ触る人も多い印象を受けます)お掃除の方が定期的に拭いてくれてるのをたまに見かけますが、長い間拭き続けるのは難しいのでどうしても、循環した手すりを使う時間が長くなってしまいます。


除菌ができるものを取り付けて、常に除菌がされている環境を作ることができたら良いなと考えました。常に動いているエスカレーターはコストも掛かるでしょうが、スーパーなどで見かけることの多い「近づくと反応して可動する」形であれば実現可能かもしれません。

6.スタンプ

駅をはじめ多くの場所で設置されているスタンプ。スタンプラリーであったり、名所の記念スタンプなど全国各地にありますよね。
そして、さほど雑な扱いをしない限りボロボロにもならず、汚れたとしてもちょっとインクが付くぐらいのことが多いと思いますので新品に取り換えられることはあまりないのかなと考えます。
そんな中、不特定多数の方が楽しまれるスタンプの持ち手。
風邪が流行っているときは少し触れるのを避けられればと思い、触れないでスタンプがおせるUIを考えてみました。

これならば触れることなく押印できますね!
しかしながらスタンプラリーはスタンプを自分で押すのが醍醐味なのでもう少し考える必要がありそうです…

7.飲食店のお箸とか

お店によって常にお箸などを自分で持っていくパターンがありますよね。主にバイキング形式や大きなフードコートなどなど。
必要なものを必要な分だけ持っていけるのはとてもユーザビリティとして良いですが使用しないものにも、実は触れてしまっているのです。
普段全く気になるところではないと思いますが、何よりも口に含むものですから、注意することにこしたことはございません。

必要なものを必要な分だけ持っていけるのはとてもユーザビリティとして良いので残す方向性で考えてみました。
単純に口に含む部分が外部に触れなければ良いので、ひと手間加えて紙ペーパーで包むのはいかがでしょうか。
一番いいのはお店側が必要数渡してくれることが手っ取り早いのですが、すべてがそうとはいきませんよね。上記のようなものであればすぐに取り組むのも可能そうです。

8.買い物かご

買い物にかかせない買い物かご、このかごも順繰り循環しています。
抗菌の素材で作られているのがほとんどですが、食品の購入をメインに常日頃使用されるもののため、風邪が流行っているときはちょっと気になるかもしれません。手袋などをして意識的に対策も可能ですがお店側でも気にかけてくれると安心感と信頼へも繋がるのではないでしょうか。

使い終わったかごは店頭に戻される前に大型店舗であれば、かごを入れるだけで除菌できる装置、小さいお店であったら手動でも構いませんのでかごを清潔にする機関を設けられたらと考えます。
除菌後はそれが分かる旨を表記してあげたらお客さんも安心して買い物ができる環境が整うのではないでしょうか。

考えれば考えるほど、身近なもので改善できるものや意識することで対処できるものがたくさんあります。
またよくやりがちな床(地べた)に荷物を置かないことも家に見えない汚れを持って帰らない1つの手段だと思います。

最後に

少しでも気づきのポイントとして皆様の記憶に残れば幸いです。
あまり潔癖になりすぎるのもストレスのもとになってしまいますので、風邪が流行っているときに特に注意するなど、自分ができる範囲で心掛けるのが良いですね。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

スマホでステレオカメラを活用した空想/加速度センサー角速度センサー(ジャイロセンサー)とは?

今回は、私たちが普段持ち歩くなかで普及度が高く高額なセンサーを搭載したスマートフォンを活用した生活サポート機器などを考えてみます。

既に多方面研究機関や大学で開発検証、実用化が進んでいたり、現実的には不可能な部分を紹介するかもしれませんが、
ジュール・ヴェルヌの言葉
「人間が想像できることは、人間が必ず実現できる」
のことばに逃げますが、実用化可能な前程で空想してみます。


目次


加速度センサーとは

加速度センサーとは
専門的な仕組みと詳細の説明は割愛します。

「加速度センサー」では「縦」「横」「高さ」の3軸の値が取得できます。
また、静的な「傾き」も値も取得できます。

角速度センサー(ジャイロセンサー)とは

角速度センサー(ジャイロセンサー)とは
「角速度センサー」(ジャイロセンサーとも呼ばれていました)では「縦」「横」「高さ」の3軸の「回転値」が取得できます。
また、動的な「傾き幅や、その移動距離と早さ」等の値を取得することを得意としているのが「加速度センサー」との大きな違いです。

「加速度センサー」とあわせて「6軸センサー」とも呼ばれています。
6軸センサー

その他のセンサー

厳密にはセンサーの先の「仕組み」ですが、
「ステレオカメラ」は2つのカメラの映像を使い、カメラ間の距離と対象物体への距離から複合的に値を取得できるので、人間の眼のように立体的な複数の対象物の距離値を取得できます。
ステレオカメラ
このカメラが機械の眼になることで「対象物体までの距離」の値が取得でき、自身の「位置状態情報」とあわせることで様々な対処適応が可能となります。
ステレオカメラにより対象までの距離を取得

組み込まれている機器

「加速度センサー」「角速度センサー」を合わせた6軸センサーはスマートフォンやタブレット、そして家庭用ゲーム機のコントローラに組み込まれ、UI/UXには欠かせない機能になっています。

「ステレオカメラ」も、実用的な機能支援として「自動車の運転支援システム」に組み込まれてきており見えない形で暮らしのサポートを担ってきております。

組み込み案を空想

これまで紹介してきたセンサーや仕組みをつかった組み込み案を考えてみます。
※研究機関で既に研究が進んでいる内容ばかりですがご理解ください。

  • 二足歩行補助機器
  • 二足歩行補助機器
    まずは定番の「歩行補助系」です。
    大型化してしまうと実用性がなくなるので、いかに実生活社会に溶け込める大きさに落とせるかが課題ですが、調べてみると「義足」などでピンポイントな実用化が進んでいるようです。

    HAL®自立支援用下肢タイプPro


  • 危険察知機能付きスマートフォン
  • 危険察知機能付きスマートフォン
    個人的にはこの分野の実用化が進んでくれれば交通事故も減少するので期待があります。

    車両への搭載は進んでいますが、人個体にも守るすべが必要です。

    「ながらスマホ」が減らない以上は、割り込みで危険を知らせる機能をつける必要があります。


  • 姿勢監視アプリ
  • 姿勢監視アプリ
    あると便利なお節介機能で正しい姿勢を維持。

    この分野も加速度センサー等利用した近い製品が登場しておりました。
    Alex-Plus


  • 睡眠監視アプリ
  • 睡眠監視アプリ

睡眠監視で睡眠時の身体の以上を知らせる機能です。

「無呼吸症候群」「心不全」「脳梗塞」「幼児のうつ伏せ窒息」などの早期発見が用途ですが、姿勢と呼吸状態を判断した「目覚ましアラート機能」もあり、2度寝防止に役立ちます。

こちらも製品化と研究が進んでおりました。

さいごに

いろいろといままでにない空想してみたつもりですが、「人間が想像できることは、わりと誰でも考えている」ものです。

あとは「実用化」にたどり着けるかでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

2020/2/5~7 第3回 Web販促 EXPO【春】出展のお知らせ(dgiftSNS/ dgiftマーケティング)

2020年2月5日(水)~7日(金)に幕張メッセで開催される、第3回 Web販促 EXPO【春】に出展いたします。

今回はSNSキャンペーン実施をサポートする「dgiftSNS」と、Webアンケート実施や来店を促進できる「dgiftマーケティング」の2サービスをご紹介。

開催期間中はサービスの魅力を体験していただくためのイベント実施を予定しています。
また、弊社ブースにてdgiftSNSの申込(予約も可)をしていただくと、
『キャンペーン基本料金が50%OFF‼』キャンペーン(先着10社様限定)を実施しております。是非この機会にお立ち寄りください。

■会期:2020年2月5日(水)~7日(金)

■時間:2月5日~6日 10:00~18:00| 7日 10:00~17:00

■会場:幕張メッセ

■小間番号:5-46

Photoshop アートボードを使う

Photoshopでアートボードを使っていますか?
もちろん効率的に活用している方は沢山いらっしゃると思いますが、私自身、普通の「新規ドキュメント作成」で事足りていたためあまり馴染みがございませんでした。
そこで今回は初心者にもわかる!Photoshopのアートボードとはどのようなものか、勉強も兼ねて個人的な主観ではございますが書いていきたいと思います。

必要なところだけ読みたい方はこちらから↓

▼そもそもアートボードとは?
▼どんな作業に向いている?
▼1.ファイルの準備
 ■新規で作成
 ■アートボードの名前変更
 ■アートボードの追加
 ■アートボードの移動
▼2.画像作成
 ■スマートオブジェクト
 ■背景素材配置
 ■テキスト、図形配置
▼3.作成後
 ■書き出し
 ■修正
▼さいごに

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼そもそもアートボードとは?

デザイン、レイアウトやイラストなど、印刷や書き出し可能な領域の目安となるキャンバスです。
複数のデータを1つのファイル内で管理することができるため、便利ですが容量はそれなりにかさんでしまうことはあります。
例えば、編集ソフトが美術室であれば、アートボードは画用紙の様な関係ですね。

▼どんな作業に向いている?

それではアートボードはどんな作業をするのに向いているのでしょうか?考えてみました。

①テーマ、表題が同じで複数の素材を扱うとき

大きな問題ではないですがちょっと不便だなと感じるかもしれません。

②同じデザインのサイズ違いを作成するとき

これらはあくまでも一例になりますが、簡単にメリット・デメリットをまとめると…

メリット
・1つのファイルで複数のデータを管理できる
・複数のデータを同時に確認、編集することが出来る

デメリット
・複数のデータを扱うため、ファイルが重くなる

などなど考えられます。

▼1.ファイルの準備

今回は分かりやすく以下の2サイズの下記バナーをフォトショップのアートボードで作成してみたいと思います。

さっそくフォトショップのアートボードを立ち上げてみましょう。

■新規で作成

①[ファイル]→[新規](Ctrl+N)で新規ドキュメントを開く。
 今回は600×500サイズを入力しています。
②アートボードにチェックを入れる。
③作成をクリック!

■アートボードの名前変更

アートボードを作成すると、デフォルトで名前が入っており、今回は“アートボード1”となっています。(個数により数字は変化する)このままでも問題はございませんがデータを見た時に、瞬時に何を作成しているのか視認できた方が効率も良くなりますので今回はアートボードの名前を変更します。

最初に、レイヤーが見当たらない場合は[ウィンドウ]→[レイヤー](F7)で表示して下さいね。
レイヤーを見てみると“アートボード1”というフォルダーが出来ております。これがデザイン、レイアウトやイラストなど、印刷や書き出し可能な領域の目安となるフォトショップのキャンバス=アートボードになります。このフォルダーに素材を置く(いれる)事でアートボードに付与していくことができます。

“アートボード1”となっているところをダブルクリックします。そうすると文字が打てるようになりますので任意のアートボード名を入力して下さいね。今回は分かりやすく“600×500”とデータのサイズを入力しました。

アートボード側も自動的に名前が変わりました。

■アートボードの追加

今回は2サイズ作成しますのでもう1つアートボードを用意します。
この時に、最初に行った新規作成から行ってしまうと、管理ファイルが別になってしまいますので、追加するときはレイヤーのメニューから選択します。

この段階でアートボード名をつけておくと後々つける必要が無いので便利です。今回1000×120サイズのアートボードを新規に追加します。

■アートボードの移動

アートボードを追加した際にアートボード同士が重なってしまったり、そもそもアートボードの位置を動かしたい場合など、簡単に移動させられます。

方法①自由移動


移動ツールを選択し、動かしたいアートボードを選択します。
ワンクリック長押しのまま動かして最適な場所へ移動させます。
※②で選択をしていれば、移動ツールの矢印がアートボードに触れていなくても動かせます。

方法②整列

手軽にきっちり合わせたい時などは整列ツールが便利です。
動かしたいアートボードと目安となるアートボードを選択し、合わせたい位置のアイコンをクリックします。

これらは、使っていれば自然と慣れてくると思います。
移動ツールでちょっと動かしてから上辺を揃える…など、両方を使用するとより利便性がアップするかもしれません。

▼2.画像作成

それでは準備が出来ましたので画像作成を進めていきます!
今回は分かりやすく、「背景」「図形、テキスト」の2つに分けて説明します。

■スマートオブジェクト

最初に、作成にあたりスマートオブジェクトがキーポイントになってくるのでもし良く分からない…という方は下記ご確認くださいね。特に太字の所大事です◎

■背景素材配置

全体像が見やすい「600×500サイズ」から編集します。


①背景素材をファイルからドラッグしてアートボードに配置。素材はドラッグしているため元々スマートオブジェクトになっています。
②分かりやすくレイヤーの名前を「背景_600×500」に変更。

これで600×500サイズの背景素材の配置は完了です。

①1000×120サイズに背景素材を置く際はスマートオブジェクトの機能を使いたいため「背景_600×500」を複製して配置します。複製後は適応サイズへ調整して下さいね。
(背景素材が足りなかったので同じ色で塗り足しレイヤー追加)
②分かりやすくレイヤーの名前を「背景_1000×120」に変更。

これで1000×120サイズの背景素材の配置は完了です。
もし、配置した素材がスマートオブジェクトになっていなかったら「該当レイヤー右クリック→スマートオブジェクトに変換」をして下さい。

■テキスト、図形配置

次に、『アクセス:東京駅から2分』『2020年1月30日開催』部分を作っていきます。これらは下の図形とセットにしているため同時に進めます。

だいぶ完成に近づきましたね。残すは“親子でフリーマーケット”部分ですが、同じ比率のものを使用するには今回は難しいので各々個別に入力しました。(上手いことできるやり方もあると思うのですが、まだまだ勉強が必要です…)

完成です。

▼3.作成後

作成後、書き出し、修正などがあると思いますので簡単に紹介していきます。

■書き出し

[書き出したいアートボードを選択→右クリック→書き出し形式]をクリックします。

■修正

・ピンクの図形を青色へ変更
・“東京駅”を品川駅へ変更
・背景を変更
してみます。



▼さいごに

Photoshopのアートボードは使っていませんでしたが、今回記事を書き進めていくにつれて、こういうことだったのね!と理解すると同時に素直に便利だなと思いました。
個人ならともかく、お仕事などではもちろんユーザーによっては「使わなくても…」「サイズ違いのデザインの際には使っていこう!」などなどおられると思いますので臨機応変に使用できれば良いですね。知識として持っておく分には持っておいた方が他にも応用が利きそうなので良いかと◎

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

【ブログ記事 タイトル変更 SEO】順位変動/リライト/検索順位を上げるには

ブログ記事のタイトル変更によるSEOについて書きます。

普段記事の更新をする際はSEOが目的にならないように注意が必要です。

記事の内容については、タイトル含め利用者に「検索需要がある内容」「メリットがある内容」になっている必要があります。

Googleの見解では、SEOに取り組む時間を記事のユーザビリティ見直しやブラッシュアップ対応に充てることを勧めており、
そうすることでおのずと検索順位が上がっていく「検索コアアルゴリズム」開発に彼らは日々取り組んでいます。

今回の「記事タイトルの変更手順の紹介」についてもそのスタンスで紹介します。


記事を公開後に放置してはいけない

ブログ記事を公開したあと、何年も手付かずで放置しているページはないでしょうか。

新しい情報を含んだ競合記事は日々生まれていますので、古い記事は徐々に検索結果順位が下がっていきます。


最新の関連情報を追記(リライト)していく

リライト

記事の順位を上げるためには追記(リライト)が必要不可欠です。

ITならば特に「新しい考え」や「仕組み」「用語」が日々生まれるので、それらを知り掛け合わせ、「今」の価値観とトレンドを組み込む更新作業が必要です。

当ブログでも、スマートフォンの機種別ディスプレイ画面サイズと解像度をリスト化した記事を作っておりますが、
新端末の発表日の追記更新をおこなうことで、検索需要対応を進めており、
関連した他カテゴリ機器の仕様も掲載して、間接需要を増やす取り組みをおこなっております。


アクセスが無い記事への対応

リライトを進めることで「検索需要に応える記事」に達したと自己判断出来ていても、掲載判断は検索エンジンのアルゴリズムです。

Googleのアルゴリズムも完全ではないので、この段階で「SEO寄り」の対応を進める必要がでてきます。

検索順位が上がらない原因として「記事タイトルが需要あるワードではない」可能性が考えられます。

冒頭でも説明しましたが、
SEOをするのではなく、「需要に応えるワード選び」で変更をしていきます。


需要に応えるワード選びと確認

まず、
現在、検索需要があるとするワードを再分析していきます。

例として先ほど紹介したスマートフォンのディスプレイ画面サイズを掲載して記事の検索ワードは

「スマホ 画面サイズ」

と独自設定しておりましたが、

「サーチコンソール」で特定ワードでのクリック分析をしてみると、それだけでは月に3アクセス程度しかありませんでした。

既に3ワードで絞り込んでますが、まだまだビッグワードすぎますのでニッチな需要にさらに絞り込みする必要があります。

そこで本文中でも意識するタイミングが無かった「2019」というワードを追加することで、対策進めてみます。


タイトル変更の手順

それではワードの確認調査と対策の手順となります。

手順1

Google検索 ⇒ 利用者の「想定検索ワード」を調査

※今回の場合は例として「スマホ 画面サイズ」を「想定検索ワード」に設定して調査

「Google検索画面」で当該ワードが何番目に表示されているか調査
   ↓
<ポイント>

ファーストページ(10番目以内)に表示されているにもかかわらず検索結果画面の上部に、「サーチコンソール」と連動表示される「このクエリの検索パフォーマンス」表示がされない場合は、そもそも現状のワードの組み合わせでの検索需要がないと判断できます。
※需要がある場合は「このクエリの検索パフォーマンス」項目が表示される

手順2

「このクエリの検索パフォーマンス」項目が表示されない場合
Google検索 ⇒ 「スマホ 画面サイズ」を調査

「Google検索画面」で当該ワードが何番目に表示されているか調査

手順3

「このクエリの検索パフォーマンス」項目が表示されている場合

「このクエリの検索パフォーマンス」項目の期間が「過去90日間」の場合かつ一桁台のPVの場合も、現状のワードの組み合わせでの検索需要が少ないと判断できます。
※「過去90日間」の他に、「過去28日間」「過去7日間」がある。PVが多いほど短くなる

手順4

以上の分析調査でアクセスが少ないと判断出来た場合は、より検索需要のあるワードに変更をします。

「スマホ 画面サイズ」では範囲が広すぎて検索順位が埋もれてしまっていましたので、ワード追加をすることでニッチに絞り込んでいきます。

「2019」のワードを検索ワードに追加するためにタイトルを変更します↓

変更したタイトル↓
「【2019年版】スマホ 画面サイズ」


Google検索へのインデックス登録を促す手順

手順

「サーチコンソール」でGoogleインデックスのクローラーに来てもらう設定

「URL検査」⇒

当該ページのURLを上部のフォームに入力⇒

「インデックス登録をリクエスト」

これでクローラーがページを巡回してくれ、検索結果に即時反映されますので変更後の順位を確認します。
※続けてこの作業をおこなうと検索結果への反映がされなくなる傾向が確認出来ていますので、「インデックス登録をリクエスト」は数回に止めたほうがペナルティーが存在した場合リスクが少ないと感じます
※「インデックス登録をリクエスト」後、クローラーの巡回が5~10分アナリティクスのリアルタイムログで確認できますので、リアルタイムから表示が消えたあとに順位確認することをお勧めします

以上の対応をおこなった後に順位確認をすると、

「【2019年版】スマホ 画面サイズ」

に変更した記事ページはPVが上がり、検索結果の上位に表示されるようになりました。
これでアクセスが増える土俵に立つことが出来たので、毎日の分析集計のモチベーションが上がります。


タイトル変更後の観察

記事タイトルを変更したことでの順位アップ順位変動は一時的な場合もあります。

翌日には順位が戻ってしまうぬか喜びも少なくありませんので、
変更後の順位観察も継続しておこない、利用者の検索需要に近づけていきます。


さいごに

何もしなければ検索結果に埋めれていくだけですので、検索需要を見つめ直し、必要であれば記事の方向性を大きく変えてみたり、思い切って記事を削除又は「NoIndex設定」を追加することで、ブログページそのものの評価を上げることが可能です。

闇雲に記事を増やすだけではページ評価はさらに下がるだけですので、時間を見つけてリライト作業をすすめてみてはいかがでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Illustrator オブジェクトをパスファインダーで切り抜き・統合する

イラストレーターのパスファインダーを活用するとよりスピーディに目的のものを描けたり、難しい形も描きやすくなったりと効率が良くなることがあります。
今回は、初心者にもわかる!パスファインダーとはどのようなものか書いていきたいと思います。

▼紹介数が多いのでショートカットで読みたい方はこちらよりどうぞ!

1.合体
2.前面オブジェクトで型抜き
3.交差
4.中マド
5.分割
6.刈り込み
7.合流
8.切り抜き
9.アウトライン
10.背面オブジェクトで型抜き

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼パスファインダーとは

パスファインダーとは、簡単にいうと複数のパスで描かれた図(以下:オブジェクト)を状況に応じて結合したり、くり抜いたりすることがクリック1つでできる機能になります。
[ウィンドウ]の[パスファインダー]から開けます。

▼パスファインダー10

パスファインダーを開いてみると、それぞれの動作を表したアイコンが並んでいます。慣れないとパッと見では分かり辛く感じるかもしれませんね。さっそくですが、機能の紹介と簡単な一部使用例などもあげながら書いていきたいと思います。


パスファインダーの機能が分かりやすいよう、以下のオブジェクトを用意しました。丸が重なって配置されています。

1.合体

選択したオブジェクトすべてが最前面のカラーに合わせて結合されます。オブジェクトを分けて作成した際のまとめに役立ち、シルエット画像の作成の際など便利かもしれません。

2.前面オブジェクトで型抜き

選択したオブジェクトの中で最背面のオブジェクト以外の形で切り抜きます。例えばボタンのイラストを描く際に穴の部分をくり抜いたり三日月を作成する際に便利です。

3.交差


選択したオブジェクト全てが重なるところのみを切り取ります。
オブジェクトを組み合わせによってさまざまな形に変化するので汎用性の高い機能です。例えば、簡単な葉っぱがすぐ描けます!

4.中マド

模様、デザイン文字、ロゴマーク等々、デザイン性が高いものを補助してくれるイメージがあります。中マドの表現をパスツールで描くとなると難しく、時間がかかる可能性も。必要に応じて使えると便利な機能ですね。時には自分が予想していない模様に出会えたりするかもしれません。

5.分割

難しいことは一切ナシ!分割したいオブジェクトがある時にとても便利な機能です。様々なシーンで扱えるので、パスファインダー初心者の方に個人的にお勧めです。

6.刈り込み

「5.分割」では選択したオブジェクトが重なる部分を全て分割していましたが、「6.刈り込み」では目視できる形が切り離されるので、重なりを無視して分割したいときに便利です。
※枠線を使用していた場合、枠線は全て削除されます。

7.合流

一見「6.刈り込み」と同じように目視できる形が切り離されてますが、大きな違いは「7.合流」では同じカラーのオブジェクトが重なっていると結合させてから刈り込んでいます。
ロゴなどのデザインはもちろん、背景の柄を作成するときにも役に立ちます。
※枠線を使用していた場合、枠線は全て削除されます。

8.切り抜き

最前面にあるオブジェクトの形で切り抜きます。オブジェクトを組み合わせて作成した背景の一部を切り取りたいときなど、背景に何かしらの柄がある際の切り抜きに向いています。ちなみに切り取ったオブジェクトのグループを解除すると個々のオブジェクトに分離します。
※枠線を使用していた場合、枠線は全て削除されます。

9.アウトライン


選んだオブジェクトがその名の通りアウトライン化されます。
そしてオープンパスになっています。
※オープンパス:線などのスタートとゴールが同じ地点でないもの

10.背面オブジェクトで型抜き

「②前面オブジェクトで型抜き」の逆版と思っていただくと分かりやすいかと思います。選択したオブジェクトの中で最前面のオブジェクト以外の形で切り抜きます。

さいごに

始めはどれをどう使えばいいのか迷うこともありますが、慣れてくると自分の作業に適したものを選択できるようになり作業効率化へ繋がっていくのではないでしょうか。
まずは実践です!簡単なオブジェクトを使って色々試してみてください。いろんな使い方が見えてくると思います♪
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

【5Gスマホ/ゲーム】デバイスの表示遅延と入力遅延速度/通信低遅延について[UXとレイテンシ]

今回は、UXに多大な悪影響を与える、5Gスマホデバイスなどの表示遅延と速度、入力遅延について書いてみました。



スマホやゲーム機、そしてTVとモニターの「遅延(レイテンシ)」には、大きく分けると、

  • 「表示遅延」⇒ディスプレイへの画像表示が遅れる
  • 「入力遅延」⇒外部コントローラやキーボードで入力した情報のディスプレイ表示が遅れる/入力遅い

があります。

ディスプレイまでの表示遅延の図


※厳密には、経由するソフトウェア(エミュレータなど)や機器(変換機器)の処理の数だけ処理遅延が大小発生致します


PC用マウスやキーボードなどの入力機器は、USB端子のついたコードで本体に有線接続しますが、ゲーム機のコントローラはコードを使わないワイヤレス接続が一般的になりました。

しかし、ワイヤレス接続に用いられる「無線接続」「Bluetooth」の技術は仕組み上、伝達にロスが生じます。
※詳しい遅延速度については説明は割愛

そこで、1/60秒を競うロスを嫌うゲーマーは、ケーブル接続の入力機器を別途用意していたりします。

その他遅延のポイントには「通信環境」もあり、「有線LAN」接続と「無線LAN」接続についても、安定した通信を求めると有線接続に軍配が上がり、有線LAN接続端子の無い機器については別途「有線LAN接続USBアダプタ」等を用意して対応しています。

無線LANと有線LANの安定性の違い


それではスマートフォンはどうでしょうか。

スマートフォンでは外部コントローラなどの周辺機器は使わず本体画面を直接タッチするので遅延は無いと考えてしまいますが、遅延はあります。
大きなところで、

  • 電車やバスでの移動する際の通信基地局の切り替え(ハンドオーバー)時に、まれに電波が安定しない通信遅延
  • 高解像度ディスプレイの画像エンジン処理を通過する経路による遅延
  • 「Bluetoothキーボード」「Bluetoothコントローラ」使用時に発生する入力遅延

以上が代表的でしょうか。

Bluetooth通信により発生する通信遅延

Googleのクラウドゲームサービス「Google Stadia(スタディア)」、
Microsoftのゲームストリーミングサービス「Project xCloud(プロジェクト エックス クラウド)」が話題になっていますが、
遅延はゲーム性に大きく影響をあたえてしまうため、
「リアルタイムパズルゲーム」「アクション」「音ゲー」のジャンルについては、コンピュータゲームをストリーミング配信する仕組みは物理的に不向きと考えられています。


少々横道に反れますが、
いつの時代でも「遅延」や映像の表示速度に敏感な人と、その違いが気にならない(違いが認識しにくい)人がそれぞれいます。

1秒間のアニメーションを構成する静止画枚数の違い

1/30秒(30fps)と1/60秒(60fps)、さらに1/120秒(120fps)と数字が大きく細かくなっていけば映像はどんどんと滑らかになっていき、動体視力能力が高い人がゲーム競技を行ううえでは大きなアドバンテージになります。

※FPSは1秒間の映像を構成する1コマの静止映像の枚数の単位。60fpsは秒間60コマのアニメ

統計データはありませんが、例えば、
1/30秒(30fps)と1/60秒(60fps)の違いは大きく、判らない方でも、両方の映像を同時に見比べれば違いに気づくほどです。
しかし、
1/60秒(60fps)と1/120秒(120fps)の違いについては劇的な変化は感じられず、違いががわからない人は多くなるそうです。

「入力表示遅延」についても同じように違いが分かる人は全てではないようです。


ネットワークの遅延についてはゼロにはできませんが3Gから5Gの技術革新により、より低遅延になってきております。

  • 3Gで100ms(ミリ秒)未満程度
  • 4Gで 50ms(ミリ秒)未満程度
  • 5Gで 1ms(ミリ秒)未満程度
  • 「5G(第5世代移動体通信システム)」はとんでもなく低遅延で大容量のデータを扱えます。

    • 3G 速度は最大で 数10Mbps程度
    • ※ギガはメガの1000倍

    • 4G 速度は最大で 1Gbps程度
    • 5G 速度は最大で 数10Gbps程度
    • しかし5Gにも弱点があり、
      4Gよりも5Gは建物内へ電波が届かないため、現在4Gで問題を抱えている方は、状況悪化はあっても改善は見込めないようです。残念。

      5Gと4Gの電波状況図


      ちなみに私の住む場所は4Gがほとんど届かない構造なので、スマホで通話ができません;
      したがって、部屋に引きこもった生活をした場合は5Gは必要ないのかもしれません。

      最新の話題ですと、
      「Wi-Fi 6(正式規格名「IEEE 802.11ax」)」と呼ばれる無線通信の最新Wi-Fi規格がシャープの5Gスマホに対応となっており、5Gの環境外での需要を満たしてくれそうです。

      また最新の情報があれば更新していきます。

      次回も情報設計に関係した話題をお届け致します。
      デジマースのネモトでした。

【PNG32 PNG24 PNG8 違い】WEB向け画像拡張子の種類と特徴

拡張子というのは、画像や音楽などあらゆるファイルの名前の末尾につけられている文字列のことです。「ファイル名.●●」の「.●●」の部分ですね!
この記事では「主にWEB上で使われる画像」の代表的な拡張子の種類やそれぞれどんな時に適しているのかなどを簡単に紹介していければと思います。


GIF(.gif)

読み方:ジフ

最大256色で表現されるファイル形式です。色数が少ない画像を書き出すのに適しています。透過処理も出来て、容量も軽いため、ロゴやアイコンやボタンなどに最適な形式です。色数が少ないほどファイルサイズは小さくなります。
またGIFは可逆性圧縮形式の画像です。可逆圧縮とは、簡単に説明すると可逆圧縮は劣化が生じない圧縮方式の事です。一度保存した画像を再度加工したりリサイズをしても、画像が劣化しません。


【GIF 色数64 18KB】

上の絵は塗りが単色で色数が少ないので、綺麗に書き出す事が出来ました。
ただ、色数が多いもの、グラデーションを多用した絵や写真などを書き出す時には向いていません。


【GIF 色数64 25KB】

こちらは先ほどと同じ線画にグラデーションを多用して色を塗ったものです。先ほど載せた絵と同じく書き出しの際の色数は64ですが、画像のあちこちにノイズが発生してしまっています。
色数を多くして書き出せばもう少し綺麗に処理出来ますが、色数が増えるほどファイルサイズは大きくなってしまいます。

またGIFはアニメーションを作る事が出来ます。「アニGIF」と呼ばれるものです。

アニGIFについてはぜひこちらの記事も参照してみてください↓
簡単!なめらかなアニメGIFの作り方

PNG(.png)

読み方:ピング

約1677万色を表現出来る画像形式で、文字や図形などが含まれフチがはっきりしている画像、グラデーションや色数の多い画像に適しています。透過処理も出来ます。(※種類による 後述します)
またPNGもGIFと同じく可逆性圧縮なので画像の劣化が起きません。
ただGIFや後述のJPGと比べると、ファイルサイズが大きくなってしまう事が特徴です。


【PNG24 63KB】

GIFで全く同じ画像を色数256色(最大)で書き出すと22KBでしたが、PNGにすると一気に63KB…およそ3倍になりました。
高画質にはなりますが、大きな画像を多用するページでPNGをたくさん使うと少し重くなってしまうかもしれません。

またPNGには種類が3つあり、「PNG32」「PNG24」と「PNG8」というのがあります。
フルカラーで表現出来るPNGは「PNG32」と「PNG24」の事を指します。

PNG32とPNG24の違い

PNG32はPNG24を更に高画質に、そして透過情報を持たせたものです。PNG24の透明な部分はあくまで「透明な部分を表現している」のであり、厳密には透過ではないのです。
PNG32にもなるととてつもなくファイルサイズが大きくなるのであまりWEBには適していません。WEBでよく使われるのは「PNG24」、もしくはこれからご紹介する「PNG8」が主流になっています。

PNG8とは

GIFと同じように256色で表現される形式です。透過も出来て容量も軽いので、PNG8もGIFように色数の少ないデータを書き出す際に向いています。
ほぼGIFと同じなのですが、違いをあげるとするとグラデーションなどを含んだ画像において、PNG8の方がGIFよりファイルサイズが小さくなります。

同じ写真をそれぞれGIF、PNG8で保存して比較してみましたが…見た目に差異はありませんが、PNG8の方が少しファイルサイズが小さいですね。
まあ最終的にGIFを選ぶかPNG8を選ぶかは、個人の好みかな~と思います!

私は「画像PNGで欲しいです!容量200KB以下で!」と言われたら大体PNG8で書き出すようにしています。あとPNG8の事はピンパチと呼んでいます。多分日本でこう呼んでいる方は多い。はず。

JPG(.jpg)

読み方:ジェイペグ JPEGと表記されることもある

約1677万色を表現出来る画像形式です。写真などの色数の多い画像に向いています。そこまで聞くとPNGと同じじゃん?と思いますが、JPGは他の形式に比べ容量を軽くする事が出来るのが特徴です。GIF、PNGと違って透過処理は出来ません。
またJPGは、「非可逆圧縮」です。非可逆圧縮は、可逆圧縮と逆で保存を重ねるほど画像が劣化していってしまいます。一度そうなってしまったら元のオリジナルデータには戻せません。

一般的にJPGは写真向きの形式と言われています。スマホで撮った写真は基本的にJPGで保存されています。
単色のものやフチがはっきりしているものはぼやけてしまったり劣化が激しいのでJPGにはあまり向きません。


【JPG 最高画質】

画質も細かく調整して書き出しが行えるので、ファイルサイズと相談しながら圧縮が行えます。ただあまりにも圧縮すると劣化がわかりやすく表れてしまいます。


【JPG 低画質】

ガサガサになってしまいますがファイルサイズはこれでなんと10KB。

まとめ

・ロゴ、アイコンなどの色数が少ない~単色でフチがはっきりしているもの、アニメーションはGIF
・GIFのアニメーション以外の要素はPNG8でも代用出来るので用途によって使い分ける
・色数が多く、高画質に書き出したいイラストや画像はPNG24かPNG32(透過と容量に注意)
・写真はJPGが一般的(圧縮率に注意)

長々と書いてしまいましたが、まとめるとWEBで画像を扱う際はこのポイントを抑えておけば問題ないと思います。
今回はWEBで中心に使われている拡張子に特化して書きましたが、他にも色々な拡張子があるのでそれもまたいずれ紹介出来たらなあと思います。


いかがでしたでしょうか~ぜひ参考になれば幸いです。
それでは!寒さにお気をつけて!ユイPでした。

ツイッター↓
ユイP@デジマースブログ

05_モニター/MacBook Pro/デスクトップ/TV

モニター画面サイズ / ppi リスト

モニター
24.0 インチ 1920×1080 FHD  92ppi

MacBook Pro 13インチモデル
13 インチ 2560×1600 Retina 227ppi

MacBook Pro 15インチモデル
15.4 インチ 2880×1800 Retina 221ppi

MacBook Pro 16インチモデル
16 インチ 3072×1920 Retina 226ppi


TV画面サイズ / ppi リスト

ブラウン管TV
29.0 インチ  640× 480  SD  28ppi

ハイビジョンブラウン管TV
32.0 インチ 1280 × 720  HD  46ppi

フルHDTV
50.0 インチ 1920×1080 FHD/2K 44ppi

4K TV
60.0 インチ 3840×2160  4K  73ppi

8K TV
60.0 インチ 7680×4320  8K  147ppi


  1. 主要画面表示機器スペック表
  2. 記事TOPページへもどる