BUSINESS TIPSビジネスに役立つ情報がきっと見つかる

  • モバイル・スマートフォン
  • iPhone対応サイト構築

Webサイトのレスポンシブ対応を行うべき理由と依頼時の注意点

Webサービスの利用や検索など、スマホで閲覧するユーザーが増加しています。 その中で求められているのが、スマホとPC等どの媒体でも快適に使えるサイトデザインです。ここでは、今さら聞けないレスポンシブ対応のメリットと対応方法をご紹介します。

■レスポンシブ対応とは?

レスポンシブ対応とは、画面に合わせWebサイトのデザインが最適化されることです。PCだけではなくスマホなどのデバイスに合わせ、画面の表示形式やデザインが変更となります。

■レスポンシブ対応が必要な理由①「ユーザビリティ」の問題

レスポンシブ対応になっているサイトではユーザーにとってどんなメリットがあるのでしょうか。大きなポイントとして、1つのURLになったことにより、ページのシェア・リンクがしやすくなりました。例えば、PCサイトが友人からシェアされたとき。レスポンシブ未対応だと、スマートフォンで閲覧しようとすると、リダイレクトされる時間がかかりユーザーの離脱につながります。しかし、レスボンシブ対応だと、同一のURLでスマートフォン用に最適化されるのでページからの離脱を防ぐことが出来るのです。

■レスポンシブ対応が必要な理由②「SEO」対策で重要に!

レスポンシブ対応が必要な理由として、最近重要度が高まったのが「SEO対策」です。PC向けサイトは、モバイル端末では見づらくて使いにくいことがあります。現在、インターネットの利用ユーザーの多くがスマホからであることからも、レスポンシブ対応はほぼ必須となっています。レスポンシブ対応が言葉として登場し、一般に広まり始めたのは2011年の年末頃からです。Googleも「モバイルフレンドリーアップデート」として2015年4月から検索結果の表示順位の要因の一つとして取り入れることを発表し、2018年7月にはモバイル端末での表示速度をアルゴリズムに追加することを発表しました。 レスポンシブ対応を行うことで、モバイルフレンドリー(スマホ対応)となることはもちろんですが、URLをパソコン用とモバイル用に分ける必要がなくなります。1つのページを1つのURLで管理することが出来ます。URLが1つなので、ユーザーの利用環境に左右されずTwitterやFacebookでも同一のURLとなります。例えば、PCとモバイルでURLが区別されている場合(https://example.com/pcとhttps://example.com/mobile)、意図しないURLがシェアされてしまい、評価も2分されてしまう恐れがあります。もちろんサイト運営側で、OGP(Open Graph protocol)を適切に設定することで対応することも可能です。しかし、同じコンテンツのページをいくつも管理する工数を考えると、やはり単一のURLで管理が可能なレスポンシブ対応がおすすめです。 また、レスポンシブ対応されていないサイトでよくある問題が、PC向けサイトとスマートフォン向けサイトをユーザーの端末に応じてリダイレクトする処理です。多くはユーザーエージェントと呼ばれる識別子をもとにリダイレクト処理を行うのですが、新しい端末やブラウザが登場するたびに対応が必要になるため、対応までの間エラーが発生しやすいこと、またそのエラーがユーザーエクスペリエンス(UX)に悪いこともあり注意したいポイントです。

■Webサイトのレスポンシブ対応での注意点

【1】複雑なCSSデザインによるコストがかかる レスポンシブデザインは、1つのHTMLとCSSを使って、デザインのレイアウトを変えています。この複雑なレイアウト変更を表示させるには一定の技術が求められてきます。 【2】 転送データが重くなる表示が遅くなる場合も スマートフォンのサイトは画面の大きさ上、PCサイトよりも情報量が少ないことが一般的です。しかし、レスポンシブの場合だと、スマートフォンサイトでもPCサイトと同じ情報量をフルで読み込むため、データ量が重くなってしまうことがあります。 【3】デザイン・レイアウトに制約がかかる レスポンシブサイトでは、PCサイトでのデザインとスマートフォンサイトのデザインの折衷案が採用されることが多いです。その際、複雑なデザインは表示サイズによっては崩れてしまう場合があります。また、レイアウトやデザインを修正したい場合、まるごとHTML・CSSを書き換える必要があるため、始めのデザイン構成力が非常に求められます。

■外注する際のポイント

まずは制作会社とやり取りを円滑にすすめるために、下記の情報を予め用意しておくことをおすすめします。

・確認用端末(デバイス)を設定する。

昨今、ユーザーが利用するデバイスはiPhoneやAndroidなどのスマートフォンや、iPadやHuawei MediaPadなどのタブレットなど非常に多くの機種が存在します。画面の大きさも違えば、解像度も異なります。例えば、Retinaディスプレイは通常のPCに比べ解像度が非常に高いです。 これらすべての機種に対応できることがベストですが、現実的ではありません。実際レスポンシブ対応を行う際は、「iPhone 5s/5c以降で表示を確認する」「タブレットはiPad(第5世代)での表示を確認する」という形で検証する端末を最初に設定した上で構築していきます。

・ユーザーのデバイス毎のデータを確認する

対象サイトの閲覧ユーザーが、どのデバイスを使用しているか確認し、対応端末を設定を決めます。既存のPCサイトをレスポンシブ対応にする場合は、Googleアナリティクスなどの分析ツールで確認することができます。 デバイス別のデータが表示され、デスクトップ、モバイル、タブレットどのデバイスでのアクセスが多いのかをひと目で確認することができます。極端な話ですが、例えばタブレットを利用しているユーザーの比率が低い場合、タブレット対応のために時間を費やすより、その時間をコンテンツ制作やデザイン、情報設計に充てるほうが有意義だと判断することができます。

■レスポンシブ対応の方法

サイトを新たに作るタイミングでPCとモバイル端末向けで開発することが理想的ですが、既存サイトのデザインを引き継いで、レスポンシブ対応させることも可能です。既存サイトがPC画面を想定して作られている場合、PC画面の見え方とスマホやタブレット画面での見え方では、ユーザーからの印象が異なります。それぞれの画面のサイズに応じて、ブレイクポイント(どの画面サイズ用のデザインを適用させるかの切り替え点)を設け、制作を行います。

■レスポンシブ対応Webサイトの外注先とは

いまや、多くのWEB制作会社がレスポンシブ対応での制作は行っています。しかし、単にレスポンシブ化させるだけでなく、各デバイスに応じてユーザーの利用シーンに適したデザイン設計ができる会社は貴重です。 デバイスに応じて画面の大きさ、解像度は異なりますので、どのような情報をどのような順で表示させるか、どのような文字の大きさ、画像の大きさ、ボタンの大きさを用意するかなど、デバイスごとのデザイン設計に強い企業に依頼することがおすすめです。

■【迷ったらチェック】モバイルフレンドリーなサイトか確認しよう

レスポンシブ化を考えているが、自社のサイトにどの程度必要かが分からないとどうしても後回しになってしまいます。適切な判断をする材料として、モバイルフレンドリーテストを行うとよいでしょう。モバイルフレンドリーテストとは、Googleが提供するテストツールです。特に「SEO対策」としてレスポンシブ対応を行う際には、モバイルフレンドリーテストを行うことで自社サイトの対応状況を視覚的に確認することが出来ます。 ▷モバイル フレンドリー テスト - Google Search Console https://search.google.com/test/mobile-friendly 対象サイトのURLを入力すると、自動でそのサイトがモバイルフレンドリーか否かを判定してくれます。例えば制作を外注した際に、制作会社との目標共有としてテスト結果をひとつのKPIとしてもよいでしょう。

iPhone対応サイト構築でお困りではありませんか?

仕事の発注先探しや、新規顧客開拓など、ビジネスパートナー探しに役立つ総合ビジネスマッチングプラットフォーム。
それがリカイゼンです。

無料で相談する

iPhone対応サイト構築の関連記事

お客さんに届くWEBサイトをお望みなら ポイントは〝モバイルファースト〟

WEBサイトの閲覧はモバイルが8割以上PCサイトのデザインに力を入れても無意味!?どれだけデザインにこだわって、見た目がキレイなWEBサイトが出来たとしても、効果が上がらなければ役割はまったく果たせていませんよね?WEBサイトの一番の目的は、伝えたい内容が相手にしっかりと届くこと。そのためにポイントとなるのが〝モバイルファースト〟です。業種にもよりますが、ユーザーがWEBサイトを検索する際の多くは、スマートフォンなどのモバイルが約8割以上。いくらPCサイトを綺麗にデザインしたからといって閲覧されなければ意味がなくて、担当者の自己満足で終わってしまいます。WEBサイトはデザイン性を競うものではありません。例えば楽天のサイトなど、決してデザイン性が高いものでなくても売上をあげることができているんです。B to Bの企業さんがコーポレートサイトを作成したとして、営業担当者がPCではなくタブレットなどを用いて説明を行っているとします。その場合は、いくらPCサイトのデザインにこだわったとしても企業の魅力はクライアントに届きません。従来までのレスポンシブデザインでは、PCサイトをベースにモバイルに対応してきました。ですが実際に閲覧される率が低いPCサイトをベースに作成し続けることは効率的でしょうか?そこで私たちはスマホサイトをベースに作成し、それをPCサイトに展開するという従来とは逆の〝モバイルファースト〟のWEBサイトを推進しています。効果を出すためのWEBサイトづくり〝モバイルファースト〟がスタンダードに!スマホサイトをベースに作成し、それをPCサイトに展開していく〝モバイルファースト〟。ここで問題になるのが、スマホでの見やすさを重視したデザインでは、PCサイトに展開した際にどうしてもデザイン性が物足りなく感じてしまうこと。従来までの方法に慣れているクライアントの多くがそのように感じるのは当然で、その際には実績を伝えるなどして理解していただく必要があります。例えば京都の呉服店で着物レンタルのWEBサイトを作成するとします。京都のイメージやデザイン性にこだわることも必要かもしれませんが、着物レンタルの大半はスマホで閲覧していることから、スマホサイトの見やすさを一番に考えるべきではないでしょうか。最近ではGoogleでもサイトによっては「このサイトはモバイルフレンドリーではありません」と表示されています。その点からも〝モバイルファースト〟のWEBサイト作りはこれからのスタンダードになっていくと思っています。

やりすぎないWEBサイトのススメ

デザインで見受けられる、目的と手段のミスマッチ   コンビニに行くのに、スーツに着替える人はあまりいないと思います。肉じゃがを作るのに、A5ランクの牛肉を買ってくる人もあまりいないでしょう。ところが、特に広告に関しては、目的と手段のミスマッチがたびたび見受けられます。   例えば、デザインの仕事と言っても、お客様自身が描いた絵をIllustratorのデータに変換してほしい、あるいは名刺にしか使わないイラストを描いてほしいなど、小さな依頼もあるわけです。そういう場合は、作り手のこだわりよりも短納期や低価格の方が優先しますから、知り合いの専門学校の卒業生に、アルバイトとして手早く仕上げてもらいます。   逆に、ハイレベルなご依頼の場合は、美術系の大学出身で今はその大学で教えているデザイナーや個人事務所を立ち上げてバリバリ活躍されているWEBデザインのディレクターなど、経験豊富な方々にお願いしています。デザインもコーディングもできて、企画書も書ける子育て中のママさんスタッフもいます。多種多様なご依頼が舞い込んできますから、お客様のご意向に合わせてスタッフィングできるかどうかが私の主な仕事になります。重要なのは「適材適所」を見極められる目です。     「くわしくはWEBで」の時代は、終わっています   弊社のお客様でメインとなっているのは、町の個人商店や中小規模の工場などです。地域密着型で広告制作業や業務改善コンサルタントの仕事を手掛けているのですが、ご依頼の内容として多いのは、WEBサイトの構築です。最初の打ち合わせでお話を伺うと、弊社の前に、WEBサイトを作りませんか、という他社様の営業を受けてらっしゃるとのこと。そのほとんどが、too muchな提案なのです。   十数ページからなるサイトを提案しても、個人商店や個人病院の方は忙しくて時間がとれず、取材を受ける時間や自分で原稿を書く時間などないことが多いのです。何より、文章量たっぷりの立派なサイトを作ったとしても、画面上の細かい字はあまり読まれないと思います。それよりも、電話番号が大きくて見やすい、地図がわかりやすいといったことのほうが重要です。   「スマートフォンやタブレットで読まれる」を前提としているのが、今のWEBサイト制作のトレンドです。当然、レスポンシブデザインになっていて、おしゃれ、かっこいいという印象を与えられるもの。読み手の負担にならないように、1ページのうちにきれいに収まっているランディングページが好ましいです。   かつて「くわしくはWEBへ」と、テレビや新聞・雑誌の広告メッセージのつづきとしてWEBサイトへ誘導し、商品やサービスのことをくわしく語るスタイルが流行しました。それは今、古いと言えます。   個人の病院やクリニックを例に挙げると、「患者さんの症状が当院の技術や設備によって治りました」と症例を何ページも説明しているケースがあります。同業者が読めば、「こんな症例を扱ったのか」と感心するかもしれません。しかし、ふつうの患者には難しい話はわからないのです。それよりは、走ることが趣味で健康には人一倍気を配っています、じつは料理を作るのが好きですといったお医者さんのパーソナリティを前面に出す方が、「やさしさ」「安心感」を伝えることができて、集客には効果的だと思います。   中小企業の広報担当のみなさん、くれぐれも、やりすぎ広告にはご注意ください。広告予算の適切な使い方について、弊社からアドバイスできることはあると思います。何か困りごとがありましたら、まずは、ご連絡ください。

Webサイトのレスポンシブ対応を行うべき理由と依頼時の注意点

Webサービスの利用や検索など、スマホで閲覧するユーザーが増加しています。 その中で求められているのが、スマホとPC等どの媒体でも快適に使えるサイトデザインです。ここでは、今さら聞けないレスポンシブ対応のメリットと対応方法をご紹介します。 ■レスポンシブ対応とは? レスポンシブ対応とは、画面に合わせWebサイトのデザインが最適化されることです。PCだけではなくスマホなどのデバイスに合わせ、画面の表示形式やデザインが変更となります。 ■レスポンシブ対応が必要な理由①「ユーザビリティ」の問題 レスポンシブ対応になっているサイトではユーザーにとってどんなメリットがあるのでしょうか。大きなポイントとして、1つのURLになったことにより、ページのシェア・リンクがしやすくなりました。例えば、PCサイトが友人からシェアされたとき。レスポンシブ未対応だと、スマートフォンで閲覧しようとすると、リダイレクトされる時間がかかりユーザーの離脱につながります。しかし、レスボンシブ対応だと、同一のURLでスマートフォン用に最適化されるのでページからの離脱を防ぐことが出来るのです。 ■レスポンシブ対応が必要な理由②「SEO」対策で重要に! レスポンシブ対応が必要な理由として、最近重要度が高まったのが「SEO対策」です。PC向けサイトは、モバイル端末では見づらくて使いにくいことがあります。現在、インターネットの利用ユーザーの多くがスマホからであることからも、レスポンシブ対応はほぼ必須となっています。レスポンシブ対応が言葉として登場し、一般に広まり始めたのは2011年の年末頃からです。Googleも「モバイルフレンドリーアップデート」として2015年4月から検索結果の表示順位の要因の一つとして取り入れることを発表し、2018年7月にはモバイル端末での表示速度をアルゴリズムに追加することを発表しました。 レスポンシブ対応を行うことで、モバイルフレンドリー(スマホ対応)となることはもちろんですが、URLをパソコン用とモバイル用に分ける必要がなくなります。1つのページを1つのURLで管理することが出来ます。URLが1つなので、ユーザーの利用環境に左右されずTwitterやFacebookでも同一のURLとなります。例えば、PCとモバイルでURLが区別されている場合(https://example.com/pcとhttps://example.com/mobile)、意図しないURLがシェアされてしまい、評価も2分されてしまう恐れがあります。もちろんサイト運営側で、OGP(Open Graph protocol)を適切に設定することで対応することも可能です。しかし、同じコンテンツのページをいくつも管理する工数を考えると、やはり単一のURLで管理が可能なレスポンシブ対応がおすすめです。 また、レスポンシブ対応されていないサイトでよくある問題が、PC向けサイトとスマートフォン向けサイトをユーザーの端末に応じてリダイレクトする処理です。多くはユーザーエージェントと呼ばれる識別子をもとにリダイレクト処理を行うのですが、新しい端末やブラウザが登場するたびに対応が必要になるため、対応までの間エラーが発生しやすいこと、またそのエラーがユーザーエクスペリエンス(UX)に悪いこともあり注意したいポイントです。 ■Webサイトのレスポンシブ対応での注意点 【1】複雑なCSSデザインによるコストがかかる レスポンシブデザインは、1つのHTMLとCSSを使って、デザインのレイアウトを変えています。この複雑なレイアウト変更を表示させるには一定の技術が求められてきます。 【2】 転送データが重くなる表示が遅くなる場合も スマートフォンのサイトは画面の大きさ上、PCサイトよりも情報量が少ないことが一般的です。しかし、レスポンシブの場合だと、スマートフォンサイトでもPCサイトと同じ情報量をフルで読み込むため、データ量が重くなってしまうことがあります。 【3】デザイン・レイアウトに制約がかかる レスポンシブサイトでは、PCサイトでのデザインとスマートフォンサイトのデザインの折衷案が採用されることが多いです。その際、複雑なデザインは表示サイズによっては崩れてしまう場合があります。また、レイアウトやデザインを修正したい場合、まるごとHTML・CSSを書き換える必要があるため、始めのデザイン構成力が非常に求められます。 ■外注する際のポイント まずは制作会社とやり取りを円滑にすすめるために、下記の情報を予め用意しておくことをおすすめします。 ・確認用端末(デバイス)を設定する。 昨今、ユーザーが利用するデバイスはiPhoneやAndroidなどのスマートフォンや、iPadやHuawei MediaPadなどのタブレットなど非常に多くの機種が存在します。画面の大きさも違えば、解像度も異なります。例えば、Retinaディスプレイは通常のPCに比べ解像度が非常に高いです。 これらすべての機種に対応できることがベストですが、現実的ではありません。実際レスポンシブ対応を行う際は、「iPhone 5s/5c以降で表示を確認する」「タブレットはiPad(第5世代)での表示を確認する」という形で検証する端末を最初に設定した上で構築していきます。 ・ユーザーのデバイス毎のデータを確認する 対象サイトの閲覧ユーザーが、どのデバイスを使用しているか確認し、対応端末を設定を決めます。既存のPCサイトをレスポンシブ対応にする場合は、Googleアナリティクスなどの分析ツールで確認することができます。 デバイス別のデータが表示され、デスクトップ、モバイル、タブレットどのデバイスでのアクセスが多いのかをひと目で確認することができます。極端な話ですが、例えばタブレットを利用しているユーザーの比率が低い場合、タブレット対応のために時間を費やすより、その時間をコンテンツ制作やデザイン、情報設計に充てるほうが有意義だと判断することができます。 ■レスポンシブ対応の方法 サイトを新たに作るタイミングでPCとモバイル端末向けで開発することが理想的ですが、既存サイトのデザインを引き継いで、レスポンシブ対応させることも可能です。既存サイトがPC画面を想定して作られている場合、PC画面の見え方とスマホやタブレット画面での見え方では、ユーザーからの印象が異なります。それぞれの画面のサイズに応じて、ブレイクポイント(どの画面サイズ用のデザインを適用させるかの切り替え点)を設け、制作を行います。 ■レスポンシブ対応Webサイトの外注先とは いまや、多くのWEB制作会社がレスポンシブ対応での制作は行っています。しかし、単にレスポンシブ化させるだけでなく、各デバイスに応じてユーザーの利用シーンに適したデザイン設計ができる会社は貴重です。 デバイスに応じて画面の大きさ、解像度は異なりますので、どのような情報をどのような順で表示させるか、どのような文字の大きさ、画像の大きさ、ボタンの大きさを用意するかなど、デバイスごとのデザイン設計に強い企業に依頼することがおすすめです。 ■【迷ったらチェック】モバイルフレンドリーなサイトか確認しよう レスポンシブ化を考えているが、自社のサイトにどの程度必要かが分からないとどうしても後回しになってしまいます。適切な判断をする材料として、モバイルフレンドリーテストを行うとよいでしょう。モバイルフレンドリーテストとは、Googleが提供するテストツールです。特に「SEO対策」としてレスポンシブ対応を行う際には、モバイルフレンドリーテストを行うことで自社サイトの対応状況を視覚的に確認することが出来ます。 ▷モバイル フレンドリー テスト - Google Search Console https://search.google.com/test/mobile-friendly 対象サイトのURLを入力すると、自動でそのサイトがモバイルフレンドリーか否かを判定してくれます。例えば制作を外注した際に、制作会社との目標共有としてテスト結果をひとつのKPIとしてもよいでしょう。

iOSにもいよいよ対応。WEBサイトを制作する際にAMP対応が見逃せない!!

アメリカのサンフランシスコで開催されているGoogleの開発者向けイベント「Google I/O 2016」でAMP(Accelerated Mobile Pages)の新情報が発表されました。 AMPとは? AMPとは、米グーグルとTwitterが共同で立ち上げた「Accelerated Mobile Pages Project」のオープンソースプロジェクトです。スマホやタブレットといったモバイルデバイスに向けて、WEBページの配信を最適化し、ページを高速に表示することが出来る仕組みです。国内では、ニュースサイトなどでいち早く取り入れられています。 グーグル検索でWEBサイトを検索した際に「⚡」のマークを見かけたことはありませんか?AMPに対応したWEBサイトの検索結果には「⚡」のマークが表示されます。2015年の10月に発表されたAMPですが、既にWEB全体で64万もの異なるドメインから1億2500万を超えるコンテンツで利用されているようです。 ついにiOSにも対応 そんな、AMPがまもなくiOSへ対応すると「Google I/O 2016」で発表されました。さらに、レシピ系のページでもAMPが使用できるにAMPの対処範囲が拡大されるようです。 みなさんも自社ホームページを始めとしてオウンドメディアやキュレーションサイト、ニュースサイト、レシピサイトなどを運営されているかと思います。現在のところAMP対応がSEO対策に必須の要素ではありませんが、AMPに対応することでモバイルフレンドリーなサイトを制作することができます。また、今後AMPが検索順位に影響する可能性も大いにありますのでこのタイミングでAMP対応を検討してみてはいかがでしょうか。 ネクスゲートでは既存WEBサイトへのAMP対応、新規でのWEBサイト構築の際のAMP対応が可能なウェブ制作会社に無料で見積の取得や相談ができます。 これからWEBサイトを制作する際には、AMP対応が見逃せませんね!!

より良いユーザーエクスペリエンスのために実践したい2つのルール

昨今、ホームページやアプリを制作する際に、UX(ユーザーエクスペリエンス)の必要性が叫ばれています。 みなさんのホームページやアプリは、使用しているフォント(書体)に気を使っていますか? より良いユーザーエクスペリエンスを提供するためには、文字の大きさや色など読みやすさが大切になります。 今回はUXをより良いものにするために、フォントを利用した3つのルールをご紹介します。 文字の行間は大きく広げる ユーザーに愛されるウェブ体験の鍵のひとつに、行間スペース(Line Spacing)があります。 特にモバイル端末に重要で、行間を広げることでコンテンツを読みやすくしてくれます。 文字の行間スペースを検討するときは、以下の点にも気をつけましょう。 フォントサイズ 文章量 これは!といった最適なルールはありませんが、PCとスマートフォン用のサイトでも行間を調整 したほうがいいです。 PC向けのウェブサイトでは、文字サイズの125%の行間で調整します。(多くのウェブサイトで設定されています。)そして、スマートフォンなど、タップ操作が発生するモバイル端末では、文字サイズの150%の行間で調整します。 複数の書体を使い過ぎない。 使用する書体は、2種類にしましょう。あまりにも多すぎる書体(イタリック体や明朝体、太字が混ざっている)はユーザーを混乱させるだけでなく、読むのも一苦労です。タイトルやロゴなどデザイン要素として、もう1種類書体を加えてもいいですが、基本的にスッキリとする2書体までが望ましいです。 より良いユーザーエクスペリエンスを実現するために、今回紹介したポイントを実践してみてはいかがでしょうか。

iPhone対応サイト構築に関連する記事を見る

記事を探す

キーワードで探す

カテゴリーで探す

無料¥0

業者の選定や案件について、お気軽にコンシェルジュにご相談ください。