2020年2月4日PCサイトをスマホ対応する際の問題|Webサイトの作り方|モバイルファースト前回は、レスポンシブの問題について論じました。今回はPCサイトをスマホ対応する際の問題についてフォーカスします。モバイルファーストの利点とはレスポンシブではPCコンテンツの影響が大きい一般的にレスポンシブでのWeb制作はPCサイトをデザインすることから始まります。今でも多くのWeb制作ガイドの書籍はPCデザインをベースに解説されていることからも、それはよく分かります。PCをベースにして、2つの画面サイズに合わせ、コンテンツとして使い易いUIやボリュームにするには、かなり高いハードルが存在します。スマホユーザーをより快適にすることは、難題です。横長のPCブラウザー向けのデザインは複雑です。全体のカラム構成、ヘッダー・フッター、グローバルメニューの配置、各カラム内のコンテンツ構成やバナーの位置を計算して決めていく必要があります。多くの場合、実際のコンテンツに合わせて、それぞれのセクションを独自にデザインする必要があります。スマホのデザインは単純です。上部からどのコンテンツを配置するかを決めるだけです。個々のセクションはメニューやカルーセルやアコーディオンなど標準的なものが揃っています。言い換えれば、スマホサイトのデザインは1次元であるのに対して、PCサイトのデザインは2次元となり、自由度が高まり、結果としてその制作コストはとても高くつくと言えます。レスポンシブでPCを最初に作ることから無意識となっていることも多いですが、PCユーザーが2割を切る中で、この制作コストは納得感が薄いと言えるでしょう。1ソース)の制作は難しいレスポンシブでは、HTMLは1つ。そのHTMLにCSSで当たるスタイルを横幅毎に設定することと、コンテンツをリキッドレイアウトによる自動配置を利用することで、様々な画面サイズに応じた(レスポンスした)レイアウトを実現するものです。具体的には、CSS3の規格であるメディアクエリーを使って、この切替を行います。画面サイズの境目であるブレークポイントを分けて、それぞれのデバイス用にCSS設定を行うことになります。次のように、それぞれの要素のそれぞれのプロパティをサイズごとに設定していかなくてはなりません。この切替設定はサイト全体では膨大な量となります。...また、マウス操作とタッチ操作の違いがあります。マウス操作は、小さな場所を指定し易くオンマウス・クリック・ドラッグと多彩な操作が容易である一方、スクロール操作は負担が多くなります。タッチ操作はスクロールは自由自在ですが、小さな場所を指定するのは苦手でイベントもタッチ以外(スワイプ等)は難しくなります。両方で利用できるように調整する必要があります。様々な計算をデバイス間で高度な調整をしていても、リキッドレイアウトはコンテンツ同士の相関性が強い為、コンテンツを変更すると、CSSの切替設定が脆くも崩れてしまいます。結果、再調整を余儀なくされ、見た目以上の工数が発生しやすい問題を抱えます。PCファーストだからコンテンツが重い多くのレスポンシブ制作では、PCファーストつまりPCデザインをベースにしています。PCに最適化されたコンテンツは、画像は大きく重く、文章は長く、表が多く、複数カラムになることも多くあります。これらはいずれもスマホの表示には不向きです。レスポンシブで狭い画面サイズやタッチ対応にしても、コンテンツ自体がPCコンテンツそのものなので、レスポンスが悪かったり、長すぎたり、という問題は解決できません。スマホユーザーだけに対応したいケースは多いですが、まずはPCデザインに組み込まないといけないので、対応に時間がかかり、コストも嵩みます。レスポンシブはPCとスマホがどちらがベースであれ表裏一体の関係にあるので、どちらか一方だけを見ていればいいということにはなりません。モバイルファーストの利点とはモバイルファーストと言われて久しいですが、その考え方はモバイルユーザーの為にありましたが、実はPCユーザーにとっても重要だと認識されてきています。モバイルを優先して作れば、余計なものは入れられない、ゆえに1つの画像1つの言葉に重みがあり重要なものがよく見える、結果的にPCコンテンツもシンプルで使い易くなります。レスポンシブは、システムとしてはPC/スマホ共存させることができますが、PCサイトから作ることでコンテンツとしてのモバイルファーストになりにくい点が難点です。弊社製品、「スマホのサイト制作。GCモバイルファースト」はこの問題を解決するためのソリューションであり、真のモバイルファーストを実現することと、スマホ/PC表裏一体ではなく、PCを従属させる戦略を採っているのが特徴です。次は、ならばレスポンシブではスマホファーストで作れない理由を整理します。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿サイドバー内のコンテンツをスマホに配置するための3つの方法レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。