スマホサイトの構築 expression web4

スマホサイトを作りたいです。
expression web 4 を使っています
ｐｃ用のページは散々作ったのでわかりますが、
スマホ用のページも要は同様に作れるんですかね？
新規作成で項目見たらスマホ用ページと言う項目が見当たりませんが
他のフリーソフトのおすすめあれば教えて下さい。
よろしくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/09/01 11:33

こんにちは

「expression web 4」は存じませんが、スマホ用のブラウザとＰＣ用のブラウザの表示の仕組みは基本的に同じです。
その点では、特に気にすべきことはありませんが、一番大きな違いは画面サイズの違いと言えるでしょう。
例えば、ｐＣの画面サイズを想定したページをスマホで表示した場合、もちろん表示することはできますが、横スクロールが出てしまったり、意図とは異なるレイアウトになって表示が乱れたり、あるいは延々と縦スクロールをしなければならなかったりと、閲覧者にとって好ましくない状態になる可能性が高いです。

このようなことを防ぐために一般的に用いられている方法として、
１）ＰＣ用とスマホ用のページ（＝同じ内容）を別に作り、機器によってページそのものを切り分ける
２）同じHTMLを用いるが、表示メディアによってレイアウトやＵＩを切り替える
といった方法が用いられています。

どのような対応をお考えなのか不明ですが、１）であればページの作成は同様に行えばよいですが、確認の際にスマホの実機あるいはＰＣのブラウザ幅を狭める、エミュレータを利用して確認するなどの方法が考えられます。
https://www.genius-web.co.jp/blog/web-programmin …
最近のＰＣ用のブラウザであれば、モバイルモードの機能がありますので、それを利用しても確認できると思います。
https://qiita.com/aqril_1132/items/4789bc12a5111 …

２）の方法をとる場合の基本的な考え方は、HTMLは同じものを用いて、表示メディアに応じてCSSを切り替えるといった方法をとっています。
「レスポンシブ」、「メディアクエリ」といったキーで検索すれば、様々な情報が得られると思います。
https://www.yamatofinancial.jp/learning/know-how …
https://www.kagoya.jp/howto/webhomepage/responsi …

もしも、ＵＩの補助などをスクリプトを利用して行っている場合は、ＰＣとスマホの操作の違いも考慮する必要がありそうです。
ＰＣの場合の操作は、ほほキー入力とマウスクリックのみですが、スマホの場合はタップ、フリック、スワイプ等の様々な操作も可能なので、それらも考慮しておいた方がより使いやすいページとなることでしょう。