Mother's Life

30代半ば、ごく普通の主婦の妊娠&出産&育児日記です。

現在、スマホ用のサイトを作成中です

      2018/08/30

当サイト「Mother’s Life」は見る端末によってレイアウトが変化し、ストレスなく閲覧できるレスポンシブデザインのテンプレートを使って作成しているのですが、以前から運営している別館サイトはPC閲覧オンリーを想定して作ったので、スマホでアクセスすると使用感に難点があります。

最近はインターネット利用者の半分以上がモバイル端末からアクセスするのだそうで、私の所有サイトに至っては8割以上がモバイル端末からの閲覧です。検索エンジングーグル先生からも、「スマホに最適化していないサイトは、検索結果の順位を下げますよ~m9っ`Д´) ビシッ!!」とのお達しが出ているため、スマホサイトを作ることにしました(;´д`)トホホ…

PCサイトとスマホサイトのレイアウトの違い

PCサイトレイアウトの一例上の画像がPCサイトのレイアウトの一例です。

PCサイトは横幅を広く使えるため、画面の左右どちらかにメニューバーや広告スペースを配置し、反対側に本文スペースを取る2分割形式のレイアウトが一般的です。スマホ対応していないサイトだと、この形がそのままスマホ画面に縮小されて表示されるので見ずらく、リンクをクリックするのも一苦労です。

スマホサイトレイアウトの一例こちらはスマホサイトレイアウトの一例です。

スマホの画面の形状に合わせて縦長なレイアウトが基本です。リンクのボタンはタッチしやすいよう大きめに設定します。

ただし、ページ上部のメニューが邪魔で一見して本文が見えないレイアウトは閲覧者に不親切なので、この部分のメニューはタッチすると縦に展開するなどの工夫をして設置します。

どのようにスマホサイトに移行するか

今の状態からスマホサイトを作る場合、2パターンのやり方があります。

レスポンシブデザインに移行する

前述のとおり、レスポンシブに対応しているデザインのサイトを自作orテンプレートを使って、PCサイトのデザインごと作り変えてしまうという方法です。

一度設定すればあとは閲覧環境により自動的に表示レイアウトを変えてくれるため、その後の管理は楽になります。

スマホ用サイトを別に作り、利用端末によって振り分ける

こちらはスマホ用サイトを別に作り、見る端末によってどちらを表示させるかの振り分け設定を行う、という手法です。

この場合、更新のたびにPC用・スマホ用のページを両方いじる必要があるので、管理が面倒だという難点がありますが、PC用サイトのデザインはいじらずそのままにできるのがメリットです。

悩みましたが、試行錯誤しつつ作った今のPCサイトをなるべくそのまま活かしたい思いがあり、私の素人知識と技術では今のサイトのデザインを活かしつつレスポンシブ化をすることができないので、前者の方法は諦めました(;^ω^)

スマホサイトはテンプレートを使いました

さすがに1からデザインを考えるのは面倒だったので、こちらの「TempNate」さんご提供のスマホサイトの無料テンプレートを利用させていただくことにしました。

管理人は作成ソフトを持っていないため、地道に手打ちのテキストエディタで移行をがんばっております。
ページ数がそこそこ多いのでさすがに面倒くさくなり、有料のHP作成ソフトを導入しようか迷いましたが、以前のサイトを作るとき知識のなさゆえに余計なひと手間を加えてしまい、仮に作成ソフトを入手しても、手打ちでソースコード(このように表示しますよ~という指示をするプログラミング用のコード)をいじらないと編集できないため、ソフトを購入する意味はあまりなかったのでやめました(;´Д`)

以上、興味のない人には全く何のことかわからない記事になってしまい申し訳ありませんが、管理人の近況をお伝えする記事でした<(_ _)>

 - その他いろいろ, サイト作成