スマホ対応デザインとPC版デザインの関連性

/スマホ対応デザインとPC版デザインの関連性
スマホ対応デザインとPC版デザインの関連性2018-08-24T07:26:36+00:00

スマホ対応デザインは、これだけスマートフォンが生活に浸透した現代では必須のデザイン仕様です。しかし、私たちの調査では、企業サイトの20%強〜50%前後のトラフィックがパソコンからアクセスされています。

この数値が何を物語っているのかといえば、通販系サイトや「情報検索」のアクセス割合はスマホに流れていたとしても、企業検索や法人向けサービスなどのウェブサイトへのトラフィックは、勤務先のパソコンなどから起こっているのではないかということです。

そして、この仮説は、スマホで初回アクセスを起こした「ながらアクセス」ユーザーを、上手くパソコンでもアクセスさせることができれば、接触頻度を上げるとともに、腰を落ち着けて、じっくりと、あなたが発信する情報を受け取っていただけるということです。

このように、スマホ対応デザインとパソコン版デザインは、閲覧者の「状況」を考慮し、それぞれのコンテンツ(各ページ)の「特性」に応じて設計する必要があります。

私たちは、この仮説のもとホームページ制作サービスを提供し成果をあげていただいているとともに、私たち自身が運営するサイトでも、同様の仮説のもとホームページを作り運営しています。

それぞれのデザイン仕様やライティングに関しては、『ホームページのデザインとコピーライティングの関係』で、解説するとして本ページでは、スマホ対応デザインとパソコン版デザインの関係に関して、ご紹介いたします。「WEBページ」という特性と「レスポンシブWebデザイン」というデザイン仕様の特性上、本ページは「詳細情報コンテンツ」のデザイン仕様で設計されています。各種デザイン仕様の違いなども『ホームページのデザインとコピーライティングの関係』をご参照ください。

上部画像は、本サイトのトップページデザインを、スマホ版とパソコン版それぞれのスクリーンショット撮影したものです。

それぞれのデザインが「異なる理由」を
当てることはできますか?

「モバイルファースト」はSEOダケじゃない!

モバイルファーストと聞くと、今では多くの人がGoogleが発表した「モバイルファースト・インデックス」を思い出すことでしょう。

これは、Googleが2016年に発表した検索ランキングの表示形式にまつわる変更のことです。以前は、パソコンから行われた検索データやパソコン向けコンテンツのGoogleなりの評価をもとに検索ランキングを決定し、それを「モバイル検索」の結果にも反映していました。しかし、この「モバイルファースト・インデックス(MFI)」導入後は、それを逆転させ、検索ランキングの結果を「モバイルによる検索データ」と「モバイル向けコンテンツの評価」によって決定し、その結果をパソコン版検索結果にも反映すると変更されました。

しかし、この「モバイルファースト」という考え方は、GoogleのMFIに先立つ7年前の2009年にルーク・ウロブルスキー(Luke Wroblewski)氏によって提唱された、WEBコンテンツ設計のフレームワークです。

簡単にいえば、モバイル端末(特にスマートフォン)で、アクセスするユーザーの「状況」をはじめに想定し、コンテンツをデザインするという「考え方」のことです。

肝心なことは「スマホユーザーを『はじめに想定』し、デザインする」ということです。

ただし、「スマホユーザーの状況を想定する」と、言っても取り止めのない話になってしまいます。「概念的」には、スマホユーザーの閲覧傾向とパソコンユーザーの閲覧傾向や検索傾向には、一定の偏りがありますが、この「概念的」な「統計情報」が、あなたが運営するホームページの閲覧傾向に必ずしも合致するとは限りません。

そのため、まずは「単純なこと」だけにフォーカスして、スマホ対応デザインとパソコン版デザインを設計することが大切になります。

これまで10年以上ホームページで集客や収益を上げてきた者として、また、ホームページ制作や改善をサービスとして提供してきた者として、はっきり言えることは…

サイトは、さっさと作って公開しろ!
と、言うことです。

サイトを公開する前に、いろいろな情報を頼りに頭を悩ますよりも、単純なことだけ、また、基本的なことだけを抑えて、コンテンツを作り、いち早く、実際に「あなたのコンテンツ」に関するデータを集め、「あなたのコンテンツに関するデータ」をもとに改善するほうが、圧倒的にビジネスツールとしてホームページは機能します。

まずはモバイルファーストに関して単純なこと、基本的なことから抑えていきましょう。PC版デザインとの関連性は、後半で!

スマホデザインの最大要件

スマホ対応デザインを設計するときに、もっとも配慮すべきことは「アクセス環境」です。

スマートフォンで、インターネットにアクセスするときのことを思い出してみてください。最近は通信速度の速い屋外Wi-Fiも増えてきましたが、その拠点があまりにも多すぎて、イライラしたことなどもあるでしょう。

また、2018年現在の屋外無線通信規格4Gが、近い将来5Gになれば、通信速度の問題は飛躍的に緩和されます。そのためスマホ対応デザインを設計するときの「データ量」に関しては、配慮する必要性はしだいに薄れてくるかもしれません。

しかし…

スマホユーザーは移動しながらだったり、会話しながらインターネットに接続し、あなたが作ったコンテンツを見ています。

スマホユーザーは、コンテンツに「集中していない」と、考えるわけです。また、スマホユーザーの多くが、スマートフォンの扱いに慣れていません。「お気に入り」に登録する方法を知らなかったり、閲覧履歴から再び同じページにアクセスする方法を知らない人は、きっと、あなたが想像する以上に多いことでしょう。

スマホユーザーは「集中していない」のですから、始めから最後まで腰を落ち着けてコンテンツを読んでくれることは少ないわけです。

スマホユーザーは、「集中していない」と言うよりもむしろ「集中できない」環境で、あなたのコンテンツにアクセスしていると考えたほうが良いかもしれません。

街中の喧噪や、友達の声、周囲の会話や電車のアナウンス。ときには、雲の切れ間から差し込んだ、太陽の光に意識が向けられることもあります。

もしかすると、あなたの作成したコンテンツが、どれだけ閲覧者の役に立つ情報だったとしても、スマホユーザーは集中していませんし、仮に集中していたとしても、その集中を途切れさせるさまざまな要因から、その集中を阻害されないとも限らないわけです。

そのため、スマホデザインで、もっとも重要なのは「どこまで読んだのか」を記憶できるようなデザインを施すことか、もしくは、短時間で購入や予約、「問い合わせ」や「資料請求」などのアクションを起こさせる仕掛けを施すことがとても重要です。

では、あなたにご質問です。

「どこまで読んだかを記憶できるようなデザイン」と「短時間で閲覧者にアクションさせる仕掛け」では、どちらが簡単だと思いますか?

「どこまで読んだかを記憶できるようなデザイン」は、さておき「短時間で閲覧者にアクションさせる仕掛け」は、おおむね「コピーライティング」のテクニックが必要でしょう。ただ、きっとあなたもそうだと思いますが、私は「集中していない状況」で、「急かされるような文章」を目にすると、嫌悪感を覚えます。

「急かすような」キャッチコピーは、目を引くことはできるかもしれませんが、それはただ「目を引くだけ」で、そのようなキャッチコピーが「売れるコピー」と言うわけではありません(詳しくは『ホームページのデザインとコピーライティングの関係』を参照してください)。

「どこまで読んだかを記憶できるようなデザイン」には、各段落見出しの背景色を変えたり、このページでも採用している本文の背景色を変えることで、無意識の内に記憶に刷り込むことができます。

例えば、このページなら「初めのほうの緑色のところを読んでいる」と、記憶に刷り込まれるわけです。このページには、緑の他に淡いブルーや薄いピンクを背景色とした段落があります。そのため、コンテンツを読んでいる途中に、誤ってスクロールしてしまっても「色」を記憶しているため、すぐに該当の箇所に戻り読むことができるわけです。

そして、実は「どこまで読んだかを記憶できるような仕掛け」も簡単に作ることができます。それが「目次」です。

スマホデザインに「目次」は、とても便利

近年、ウェブコンテンツに「目次」を掲載するページが増えていますが、「目次」は、さまざまな役割を果たしてくれます。

以下にその例をご紹介します。

  1. ひと目で、そのページの概要をつかむことができる。
  2. 必要な段落をすぐに読むことができる。
  3. 見出しタイトルを記憶し、再び読むことができる。
  4. 目次を掲載すると、検索エンジンがページを高く評価する?
  5. 営業ツールとして、活躍する!?

このページでも導入文章の下に「目次」が表示されるようになっています。目次の前に「導入文」を掲載する理由は、コンテンツを読む目的を訪問者に確認していただいたり、記述した内容の「裏付け」と、なるようなことを記述しコンテンツの信頼性を引き上げる目的などがあります。

この他にも「共感」を得るための誘導文を書いたり、記事に集中させるための動機付け、斜め読みユーザーの排除を目的とした誘導分の書き方などがあります。

「目次」を掲載するページは、比較的「詳細情報」を掲載した、文字量の多いページが多いので、『最短で利益を上げるサイトデザインと運営方法』を実践する場合は、【誘導文+目次】で、顧客を引きつけることができれば、それは最高のパフォーマンスを発揮するコンテンツだと言えます。(『最短で利益を上げるサイトデザインと運営方法』に関しては、該当ページをご覧ください。)

目次は、WordPressなどのCMSを使ったホームページなら、本文の中で「見出し」に設定した一文を、自動的に目次として生成してくれるプログラムを無料で使うことができます。

また、目次に各見出し文が並ぶことで、ページ最上部のヘッドコピー(本文の大見出し)と、誘導文だけではなく、この目次に掲載される見出し文をキャッチコピーとして文章を工夫すると、この目次でも訪問者を引きつけることができます。

2番目の「必要な段落をすぐに読むことができる」は、改めて解説する必要はないと思います。(3)の「見出しタイトルを記憶し、再び読むことができる」は、前述したとおりキャッチーな文章を見出しに使うことができれば、この確率は上がります。

次の「目次を掲載すると、検索エンジンがページを高く評価する」と、言うのは、検索エンジンに「目次」と認識できるよう適切な目次を掲載すると、検索結果に、その目次の見出し文が表示され、その文章もリンクとなりクリックできるようになります。

検索結果に表示されることから、多くの専門家が「目次のあるページは、検索エンジンが高く評価するのではないか!?」と、考えているわけです。

私としては「目次」が、検索ランキングに直接影響するかどうかはわかりませんが、検索結果に他者のコンテンツと並んだ場合に、他者と違う表示がなされれば、それだけ選ばれる確率も上がるのではないかと考えています。

同じ検索結果の中から、他人のコンテンツ以上にクリックされれば、自ずと検索エンジンはそのことを評価しますので、結果的に「目次は検索ランキングに影響する」という説に賛同しています。

5番目の「営業ツールとして、活躍する」というのは、通常、私たちは、ホームページで集客し、サイト内のいずれかのコンテンツを使ってプレゼンを行います。

しかし、自分のパソコンを開くことは滅多にありません。

ホームページの制作会社なら「紙の資料」で、お客様にプレゼンするのではなく、お客様のスマートフォンやタブレット、お客様のパソコンで自社のサイトにアクセスいただき、プレゼンするものです。

「売れるホームページを作ります」「御社の営業ツールとしてホームページを!」と、セールスするのなら、制作会社が実践し、成果を上げていなくては、信用に関わると、私たちは考えているのです。

そのようなホームページの魅力に惹かれて、ホームページの作成を依頼くださったり、運営する方法をご希望されるお客様にも紙の資料でなく、ホームページを使ったプレゼンが出来るようにご指導させていただいています。

企業サイトのウェブコンテンツは、インターネットを通じて、見込みのあるお客様を、顧客として迎え入れるために情報を掲載するものです。あなたのホームページにも「インターネットを通じて、見込みのあるお客様を、顧客として迎え入れるための情報を掲載」しているのなら、その情報は、追客中のお客様のもとに営業へ出かけた際、そのページは「営業資料」として役立てることができます。

そして、この時、「目次」は、トークスクリプト(お客様にプレゼンをする順番)に、なっているというわけです。

仮に、お客様がスマートフォンやタブレットをお持ちでなかったとしても、自身のスマートフォンで、該当のページを確認しながら、お話をすることで過不足なく適切な営業を実践できるようになります。

スマホ対応デザインは「手のひらサイズ」

スマホ対応デザインを検討する時、もし、デザインに関して難しいことや専門的なことがわからなくても、「そのデザインは『手のひらサイズ』に収まっているか」を基準に判断すると、スマートフォンでページを閲覧しているユーザーに配慮したスマホ対応デザインを実装できるようになります。

少し抽象的な表現ですので、具体例をいくつか上げます。

スマホ対応デザインは、特別な仕掛けを施さない限り、パソコン版のデザインのような「サイドメニュー」は、存在しません。

また、画面内に2つも、3つもコンテンツが横並びになることもありません。そのため、スマホユーザーの視線は、わずか10cm足らずの幅で左右に動きながら下へ下へと動きます。それも、通常スマートフォンは片手で持ち、男性ならスマホを持った手の親指で、女性の場合なら、もう片方の手の人差し指で画面をスクロールさせながら、ページの記事を読みます。

画面は広めのスマートフォンで約7cm x 12cm、やや小さめの画面サイズで7cm x 9cm程度、iPhone Xだと若干縦に長くなるくらいです。

まずは、感覚論から

この狭い範囲の中で、そして、「手のひら」という、閲覧者のもっとも身近なところで「さわがしくなく」それでいて「飽きのこない」記事や記事の内容に集中できるデザインや「仕掛け」が、最適な「スマホ対応デザイン」です。

具体例を示します

例えばこのページです。

このページはiPhone5以上(幅320px x 縦568px以上)の画面サイズで閲覧した際、どこを切り取っても「背景色+通常文字色+段落完結」と言う範囲は存在しません。

常に、文字に装飾(太文字、下線、大文字など)が、画面の中に入り込み、これらの文字装飾がない場合は、画面(手のひら)内で、文章の塊(段落)が完結しないように設計されています。

文字装飾は、人の視線を引きつけ、画面の下に文章が続く場合、人は、スマホの画面をスクロールし、続きを読もうとします。また、画面の下端に次段落の文字上端が、映り込めば、そこにも気になって、画面をスクロールします。

このように、画面をスクロールし続けたくなる仕掛けのことを「スクロールフック(「スクロール・トリガー」とも言う)」と、言います。

「文章が面白い」「記事の内容が役に立つ」ということは、人それぞれですが、スクロールフックによって画面をスクロールするのは、人の自然な行動原理なのです。

地味なデザインほど効果的?

一時期(諸説によれば、今でも?)、縦長のページは敬遠されていましたが、スマートフォンの普及によって「無限スクロール」という、次から次へと画面をスクロールするたびに、コンテンツが出現し続ける演出も生まれました。

無限スクロールを使って、延々と閲覧者の行動を完結させないのは、コンテンツを改善すると言う視点から考えると、アクセス解析データを複雑にしてしまいますので、私たちは採用しません。

スマホ対応デザインは、「手のひら」内で視線を引きつけるデザインを用い、「手のひら」からこぼれる文字(時には画像)を追わせることで、読者に情報を提供し続けることができます。

このページで採用しているような、背景色の変化も単純に終わらせるのではなく、下端を下向きの三角形で終わらせたり、上向きの三角形で背景色の切り替えを行うことで、読者の視点を次の段落に誘導することができます。

半円弧を用いているのも同じ効果です。

また、左下がりの背景色替わりで始め、左下がりの背景色替わりで終わるのも、人がスマホ画面を左から右に視点を動かしながら閲覧する自然な流れを利用したスクロールフック・デザイン・テクニックのひとつです。

スマホ対応デザインでパソコンにもアクセスを誘導する

物販サイト(通販サイト)でない限り企業サイトは「接触頻度」が、顧客獲得には欠かせません。そのため、「ながら閲覧」のスマートフォンでのアクセスをきっかけに、じっくりと腰を落ち着けて閲覧することができるパソコンでアクセスに促すことができれば、ここでも接触頻度を増やすことができます。

ウェブコンテンツでは、このページでスマホ対応デザインとパソコン版デザインとで背景色を切り替えているのと同じように、パソコン版デザインでは画像を表示させ、スマホ対応デザインでは、その画像を表示しないということもできます。

例えば「図解」を用いて解説したほうが、読者が適切に情報を理解できる場合、スマホ画面のような小さな画像を掲載してしまっては、見づらいだけで不快な思いをさせてしまうとも限りません。

こういった場合は、スマホ上では「文字解説」だけにとどめ、「注釈」を記述し、そこにパソコンで同じページをご覧いただくと、わかりやすい図解が掲載してあります」と、書いておけば、この一文が、接触頻度を増やすきっかけとなります。

画像はデータ量が多いので、通信環境によっては読み込みに時間がかかり、ページが表示されるまでの待ち時間を不快に感じたスマホユーザーは、そのページへのアクセスを断念しないとも限りません。

「手のひらサイズの図解」では、見にくい上に、表示ストレスまで感じさせるわけです。しかし、その手のひらサイズの図解を文字に切り替え、適切な「注釈」を記載することで、それは「誘導文」となり、接触頻度を上げることにもつながるのです。

PC版デザインとの関連性

人は通常、ウェブコンテンツを「左から右、上から下」へと閲覧します。しかし、画像が掲載される場合は、画像に視点が誘導され、大きな文字があれば、大きな文字に視点を引っ張られます。

同じ画像でも、人物の画像の影響力は強く、人物の画像でも特に「顔」には強い吸引力があります。さらに「顔」の画像でも「瞳」には、特別な力があり、閲覧者と目があうような画像は、そのほかのデザインを差し置いて、その人物画像の「瞳」に視点は動かされます。

そして、その画像が読者に与える印象は、画像の周りに配置された「文章」にも影響します。

例えば、本サイトのパソコン版トップページデザインで採用しているファースト画面のデザインでは、この効果を期待し次のようなデザインを施しています。

画像が及ぼす文章への影響

このページにアクセスした人は、左側に掲載してある男性2人が丸テーブルの上でパソコンや資料を広げ、何やら商談か打ち合わせをしている画像から、無意識のうちに「商談」や「打ち合わせ」をイメージします。

このページへのアクセス経路が、検索経由であっても、SNS経由であっても、はたまたURLを直接打ち込んだアクセスだったとしても、閲覧者は、この画像から一瞬のうちに「ビジネスシーン」を想像するわけです。

どんな検索キーワードで、このページにアクセスしようと、どんな紹介文が記載されたSNSに投稿されたリンクをクリックした場合でも、同様に「ビジネスシーン」をイメージして、このままコンテンツを読み続けるかどうかを決定します。

ですから、ビジネスに関係ない検索キーワードでの結果からのアクセスなら、この画像から受けるイメージに違和感を感じ、読み進める確率は下がるでしょう。

人は、左から右に視点を動かしながら、コンテンツを閲覧しますし、文字情報より先に画像に視点が向きます。

そのため、右側に書かれた「反応を引き出すホームページのデザイン」という大きめの文字は、『男性2人が丸テーブルの上でパソコンや資料を広げ、何やら商談か打ち合わせをしている画像』から受けたシーンに影響を受け、書かれた文章以上の内容で読者は解釈します。

例えば、「反応」という言葉をビジネスシーンで起こる「反応」とは、何を意味するのか?と、イメージを膨らませ「成果」や「成約」と過大解釈し読むわけです。

私たちは、ビジネスに役立つ情報として各種ウェブサイトを運営していますので、このサイトも比較的パソコンからのアクセスが多くなるだろうと仮定しデザインを施しています。ある種、冒頭でお伝えした「モバイルファースト」的な発想ではなく、パソコンからの閲覧者を想定して、コンテンツをデザインし、「そのコンテンツにスマートフォンでアクセスされた場合のデザイン」を後から行なっているわけです。

パソコンからのアクセス者は、スマホユーザーに多く見られる「ながらアクセス(ながら閲覧)」という状況は少なく、また、スマートフォンの画面よりも多くの情報を一気に表示させることができますので、ファースト画面(アクセスされた際に表示される、ページの冒頭部分)だけで、読者への興味付けからアクションの誘発までを行うことができます。

しかし、スマホ画面のような小さな画面では、これだけのことをスクロールなしに行うことはできません。また、スマホ画面は左右の幅が狭いため、画像によって視点をコントロールする必要もありません。

加えて、スマホユーザーの多くが「ながら閲覧」ですので、画像から触発される想像力は、ほとんど働かず、文章に与える「過大解釈」を期待することはできません。

スマホユーザーは、画像はなんとなく目に移す程度、文字情報は書かれた文章の意味のまま読み進めるというわけで、デザインによる訴求力をスマホ対応デザイン(特にページ冒頭)では期待できないということです。

では、このことを踏まえながら、パソコン版デザインとスマホ対応デザインの関連性についてもう少し踏み込んで見ていきましょう。

パソコン版デザインの「配列問題」

例えば、次のような左右大きさの違うハケを使ったメイクアップのテクニックを伝えるコンテンツを作成するとします。

パソコン版デザインとスマホ対応デザインを見比べた際に、違いがわかるよう背景に色をつけています。
 

大きいハケ

大きいハケの特徴やテクニックをここに記述。

小さいハケ

小さいハケの特徴やテクニックをここに記述。

このようなシチュエーションの場合、横に3分割されたコンテンツが並んでおり、通常左から右にコンテンツを読むという一般的な動きは行われずに、「中央」「左」「右」の順で、人は視線を動かします。

特に、上の例では中央に画像を配置していますので、より「中央」「左」「右」で読まれる確率が上がります。

しかし、パソコン上でこのような横3分割のレイアウトデザインを採用した場合、通常の簡易的な分割デザイン方法では、スマホ対応デザインに変化した場合「大きいハケの記述」「画像」「小さいハケの記述」の順で並んでしまいます。

 

モバイルファーストの視点からコンテンツを作成すると、今度はパソコン版デザインの配列が意にそぐわなくなってしまいます。

このスマホ対応デザインとパソコン版デザインのHTMLソース的な関連性を押さえておくと、このような問題を起こさずにデザインする方法をアイデアできるようになります。

ひとつ目の方法は、レイアウトの分割を「1と2」とし、画像の下段に2分割したテキスト枠を設ける方法です。この方法なら簡単なデザイン技術で実装できます。

2つ目の方法は、このページでも採用している「flex」というレイアウト命令文を使ってコンテンツの順番を入れ替える方法です。

この「flex」というレイアウト配列を変更する命令文に関しては、専門性が高くなるので割愛しますが、スマホ対応デザインとパソコン版デザインの関連性を理解しておくと、このような「配列問題」を参考に、HTMLソースコード技術ではなく、デザインによって人の視線をコントロールするアイデアを見つけることができます。いくつか例をあげて解説しましょう。

高度な専門技術を不要にするデザインアイデア

難しいHTMLやCSSのスキルがなくても、背景色の濃淡や文字色。文字の配置やボタンとの位置関係で、任意のパーツに視線を集中させることもできます。もちろん、背景色と文字色の組み合わせによっても、視点誘導効果は変化します。

このデザインと視点誘導に関して、細かい記述を行ってしまうと、文字情報が、あなたの感覚を左右してしまいますので、下記の画像を見比べながら、あなたの視線がどのように変化するかを体感してみてください。

まずは、背景色も何もないプレーンな3分割です。きっと、あなたの視点は定まることなく「見辛い」と、感じるのではないでしょうか?

デザインされていない3分割

背景色(寒色)をつけ左から右に濃くなるデザインでは、あなたの視点はまず、どの枠に向かいますか?

背景色の濃淡

同じく背景色(寒色)をつけ左から右に濃くなる3分割デザインに、中央寄せ大文字の見出しがある場合。

見出し+背景色の濃淡

さらに見出し下部中央にアンダーライン(暖色)がある場合。

見出しの下中央にアンダーライン+背景色の濃淡

今度は見出しはなくなり、右枠内の文字色のみ白抜き文字になっています。

背景色の濃淡+文字色

背景色は無色で、中央の枠内だけ、文字列が中央寄せ。

中央枠内のみセンタリング文字列

文字配列に加え、ボタンを掲載した場合。

文字配列とボタン

いかがでしたか?

おそらく、背景色の濃淡だけだと、文字がもっとも読みやすい、薄い背景色になっている左の枠に視線がいったのではないでしょうか。

その左枠に行きかける視点を、見出しや見出しの装飾が中央の枠に視点を誘導し、文字配列の変更でも中央の枠に視点が移ったことだと思います。

肝心なことは、この次です。

中枠の一行目の文字数が少ない

左枠のみ極端に文字数が少ない

きっと、上2つの画像では、中央の枠に目が行き、そして、最後の画像のケースだと、右の枠に目がいったのではないでしょうか。

このように、配色や画像を使わなくても、人の視線は「余白」に誘導されるのです。

ウェブコンテンツのデザインや演出にこだわると、それだけ作業工数が増え、依頼する場合は料金が上がるか納期が遅れます。紙ベースのチラシを作るのと違って、ウェブコンテンツの場合は、「HTML」というウェブコンテンツを表示するソースコードを左から右に、上から下に書き、そのソースコードをCSSなどの命令コードで配列を変化させ、色や大きさを制御しています。

先ほど少しだけ触れた「flex」という命令文もCSSが新しいバージョンになって実装可能になった技術です。そのため、導入された当初は、対応しているブラウザも少なかったため、ウィンドウズのインターネット・エクスプローラでアクセスした場合と、グーグルのクロームでアクセスした場合の配列が違うなどの現象が起こったこともあります。

ウェブコンテンツをデザインする場合「モバイルファースト」の視点で設計すると、原稿もHTMLソースの記述と同じようになるため、過度な装飾や技術を必要とせず、コストも抑えられるようになります。

このページもここまで約11,000文字の情報を掲載している分けですが、一般的なウェブコンテンツの場合なら、3ページから5ページに分割される文章量に当たります。

ページを分割する理由は、様々ありますが、ひとつは、読者は単調な文字列を追い続けると、読むことに飽きてしまいます。その「飽き」が起こる文字数の限界を「クリック」というアクションと「読み込み時間」によって、リセットしようとするのが、ページを分割する理由のひとつです。

しかし、繰り返しになりますが、スマホ対応デザインにアクセスされる場合は、通信環境が悪いということも考慮すれば、分割されたページにクリックして移動する場合に、通信が途切れ訪問者にストレスを感じさせると、予測できます。

そのため、私たちは「クリック」と「読み込み時間」で、「文字を追い続ける飽き」をリセットするのではなく、背景色や文字装飾と言ったデザインで補う方法を選択しているわけです。

モバイルファーストでコンテンツを作るにせよ、ウェブサイトの特性や運営方針などから、パソコンユーザーからのアクセスを想定し、コンテンツを作るにしても、それぞれのデザインが与える読者への影響や関連性を考慮しながら、取り組むように心がけてください。