無料会員制サイト

アフィリエイト初心者に知ってほしいスマホUIガイドライン

UIデザインのガイドライン

いきなりですがUIって聞いたことはありますか?
UIとは「ユーザーインターフェース」の英単語の頭文字で表す略語です。

それでは「ユーザーインターフェース」とは何?
ニュアンス的には読者がサイトに訪れた時に、直感的に使えるデザインになっているのか。

車に例えてみましょう。
もしも、デザインも一緒で価格も同じ新車があったとします。

ただ違う点が一つだけ。
それはハンドル、パワステが装備されているかどうかです。

あなたなら、どちらを購入しますか?
私ならパワステ装備の法を選ぶでしょう。

UI「ユーザーインターフェース」は読者の利便性を最大限に考慮する必要があるのです。

なぜUI「ユーザーインターフェース」などと言う、訳の分からないテーマを取り上げたかには理由があります。

スマホ全盛期の時代にUI「ユーザーインターフェース」のデザインについて知らないと、これからはアフィリエイトで成功する事はできないでしょう。

記事を書いて画像を貼り付けて終わり。
あとはWordpressなどに記事を投稿して完成。

もう、そんな時代は過去の話になってしまいました。

難しい話を簡単に。
これが一番難しいのですが、実はUI「ユーザーインターフェース」には分かりやすいガイドラインがあります。

次からはUI「ユーザーインターフェース」が必要な理由と、Google、Apple、Adobeが提唱するガイドラインを紹介していきます。

画面解像度の比較表

出典:StatCounter(スタットカウンター)画像をクリックすると拡大

この結果を見てみるとデスクトップのシェアが圧倒的に多く見えます。

しかし、実際はそうではありません。

アップル各機種の解像度表
機種名 画面サイズ ポイント 解像度
iPhone 6
iPhone 6s
iPhone 7
iPhone 8

4.7インチ

375×667

750×1334

iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
iPhone 8 Plus

5.5インチ

414×736

1080×1920

iPad 3
iPad 4
iPad Air
iPad Air 2
iPad Pro 9.7

9.7インチ

768×1024

1536×2048

iPad Pro 10.5

10.5インチ

834×1112

1668×2224

iPad Pro 12.9

4.7インチ

2048×2732

1024×1366/p>

何だか訳がわからない。
正直、そんな感想を持たれるかもしれません。

実はスマホはもっと複雑な構造になっています。
それを説明してまうとテーマがズレてしまいますので簡単に表にしてみました。

ここで注目して欲しいのが「ポイント」と「解像度」です。
最初にデスクトップのシェアが多かったのは「解像度」が関係しています。

たとえば「iPhone 6 Plus」の解像度は「1080×1920」、デスクトップPCの画像解像度と変わりません。

などなど、これ以上はWEB制作の話になってしまいますのでカットします。

あなたも私もアフィリエイト記事を書く時に注目しなければいけないのが「ポイント」です。

このポイントを意識してUI「ユーザーインターフェース」のデザインをしていきましょう。

アフィリエイトサイトはスマホからデザインするのが鉄則

モバイルファースト

侍仕事塾のようにソフトや無料サービスなど、アフィリエイトに関連した記事が多いブログはデスクトップのアクセスが多くなります。

デスクトップが多い理由
  1. 記事を読みながら実際に無料サービス試してみる
  2. コードをコピペして自分のブログに貼り付ける
  3. 記事を読みながらソフトの使い方を実践してみる

このような理由で自然にデスクトップからのアクセスが多くなります。

これはブログを設計する段階である程度は計算しているので、それに合ったブログの作成を行わなければいけません。

しかしサイトアフィリとなると話は違います。
色々な統計やアクセス解析を見ると、劇的ににスマホからの閲覧者が増えるんです。

これでスマホに最適化されたサイトを作成する必要性を理解していただけたのではないでしょうか

GoogleやAdobeから学ぶデザインのガイドライン

スマホデザインのガイドライン

あ~、難しい。
確かに全てのデバイスに最適化するのは難しいことです。

難しいと言うよりは無理だと思ってください。
最初からあきらめて必要最低限の事をするだけで充分です。

GoogleやApple、Adobeなどがスマホに最適化するためのガイドラインを公開しています。

そのガイドラインを参考にしながら、アフィリサイトを作成していきましょう。

重要なのはモバイルファースト。
UI「ユーザーインターフェース」のデザインの極意はスマホ最適化です。

次から、それぞれのガイドラインを紹介しながらUI「ユーザーインターフェース」のデザインの方法について紹介していきます。

スマホ最適化のためのガイドラインの紹介

CSSブレークポイント

画像をクリックすると拡大表示されます。

それではGoogleとAdobe、Adobeのガイドラインの要点を簡単にまとめてみましょう。

  1. 読者を引きつけるためのサプライズ(演出)
  2. リアルなオブジェクトを使用して読者を楽しませる
  3. シンプルで魅力的なフレーズ、長い文章は好まれない
  4. 読者にアピールできるのは文章よりも画像
  5. 読者を迷わせない画面遷移はわかりやすく
  6. 重要なアクションの優先度を決める

本当に簡単なまとめです。
実際は多くの項目について親切に記述してあるので、是非ガイドラインを参考にしてください。

  1. デバイスの画面に合ったレイアウトの作成方法
  2. 読者が操作しやすいUIデザインとは
  3. タップする要素の大きさとデザインについて
  4. 文字の大きさと文字色や背景色について
  5. iOSに最適化された画像サイズについて

日本ほどiPoneユーザーが多い国はありません。
スマホユーザーの約40%以上がiPoneを使用しています。

つまりAppleのガイドラインはAndroidと同じように、しっかりと読んで理解することが重要です。

  1. 画面上の操作には優先順位をつける
  2. ユーザーに直接関係する操作を強調する
  3. モバイルデバイスを使用する環境を理解する
  4. 登録要求(ログイン)が早すぎると85%以上が離脱
  5. ユーザーが消化しきれない情報過多を避ける

Adobeは直接スマホは販売していません。
しかしWEB製作者のほとんどが、Adobeの何らかのソフトを使用しています。

AdobeはGoogleやAdobe以上に多くの情報を保有しているのです。

あなたは既に「矛盾」に気がついたでしょう。
これらのガイドラインに沿ってサイトを作成したら、文字数などが限られてくることを。

Googleが発表したスマホ検索の優位性

スマホ検索の優位性

なんだか難しいタイトルをつけすみません。
簡単に言うと検索結果はスマホとデスクトップを分離すると発表したのです。

2016年10月13日 Search Engine Land by Barry Schwartz

Within months, Google to divide its index, giving mobile users better & fresher content Currently, Google has a single index of documents for search. Google’s Gary Illyes announced they plan on releasing a separate mobile search index, which will become the primary one.

数ヶ月以内にGoogleはインデックスを分離することを発表。
これによりモバイルユーザーにより良く、新鮮なコンテンツを提供することを目指す。

Googleは現在1つのインデックスしかないが、Googleのゲイリー・イリーズ氏によると同社は分離されたモバイル専用のインデックスを公開予定。そしてこのモバイル専用のインデックスが今後Googleの主要なインデックスにすることを決定。

引用元:Search Engin Land

そして遂にスマホでの検索結果が標準になろうとしています。

Googleにとってのメリット
  1. スマホユーザーの利便性を向上
  2. スマホからの広告収入の増加
  3. 2つの検索エンジンを統一してコスト削減

Googleの収益のほとんどが広告です。
スマホの検索結果は広告主にとっても歓迎されるでしょう。

しかし、あなたや私のようにアフィリエイターにとっては非常に頭の痛い事態です。

紹介したガイドラインに沿ってサイトを作成した場合、文字数の多さは逆にデメリットになりかねません。

例えば3千文字の記事を書いた場合。
大見出し毎に「ページ内を移動できる」こんな工夫も必要になってくるでしょう。

今まで言われてきたSEOの常識を、最初から考え直さなければいけなくなるかもしれないんです。

こう言う時は頭で考えても始まりません。
実際に実験してみて、結果を見るのが一番効果的です。

あなたも一緒にスマホのデザインカンプ(雛形)を作成してみましょう。

動画で見るスマホデザイン作成方法

私がデザインカンプ(雛形)を作成しているダイジェスト動画を撮ってみました。

実はスマホサイトから作成するのは難しいんです。
まずはデスクトップのデザインカンプをスマホを意識しながら作成します。

スマホデザインカンプ(雛形)

私は普段Adobeの「Adobe XD CC」を使用してデザインカンプ(雛形)を作成しています。

IllustraterやPhotoshop、無料のInkscapeやGimpで作成しても同じ様なものができるはずです。

今回はPhotoshopではなくIllustraterで作成しました。
過去の記事で紹介した「draw.io」でも可能かもしれません。

Adobeの「Adobe XD CC」なら30分。
イラストレーターで作成したら2時間弱もかかってしまいました。

なお、使用した画像は以下のサイトからダウンロードした画像です。

画像ダウンロード撮影者1
Photo by Brooke Lark on Unsplash
画像ダウンロード撮影者2
Photo by Anete Lūsiņa on Unsplash
画像ダウンロード撮影者3
Photo by Felix Russell-Saw on Unsplash

とにかく何を使ってもいいので手を動かしてみましょう。
デザインカンプ(雛形)が完成すれば、色々なアイディアが生まれてくるはずです。

参考記事
楽しく使えるグラフィック無料オンラインサービス「draw.io」

記事を書くことに集中したいならツールが必要!

SIRIUS

出典:SIRIUS

色々と書いてきましたが行動あるのみです。
トライ&エラーを繰り返していくことでしか、物事の本質は見えてきません。

記事を書くことに集中したい。
難しいことは考えたくないと言う方はツールを購入しましょう。

以前の記事で私は「WordpressとSIRIUS」を完全に使い分けていると書きました。

WordPressとSIRIUSの使い分け
WordPress
侍仕事塾のように多くの記事を投稿する場合に使用
SIRIUS
サイトアフィリのように記事数が少ない場合に使用

なぜ、このように使い分けるか?
これ以上書くとテーマがズレてしまいますので、お手数ですが以前書いた記事を参考にしてください。

今回はUI(ユーザーインターフェイス」についてお話しさせていただきましたが、勉強する時間がない人はツールを購入するか外注してください。

どっちも嫌だ・・・
残念ですが解決策はありません。

ユーザービリティ(利便性)が向上すれば、報酬という結果として返ってきます。

あなたにとって最良の選択は何か?
冷静に考えてみることが大事かもしれません。

以上、UI(ユーザーインターフェイス」についての紹介でした。

それでは、さようなら!

参考記事
初心者必見!WordPressとSIRIUSの使い方ガイド!

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください