Mother's Life

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

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

      2016/09/25

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

最近はインターネット利用者の半分以上がモバイル端末からのアクセスといわれていますし、私のサイトもスマホからのアクセスがとても多く、また更に、検索エンジングーグル先生からも、「スマホに最適化していないサイトは、検索結果の順位を下げますよ~m9っ`Д´) ビシッ!!」とのお達しが出ているため、仕方なく重い腰をあげてスマホサイトを作ることにしました(;´д`)トホホ…

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

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

PCサイトは横幅を広く使えるため、画面のどちらか、または両サイドにメニューバーや広告スペースを配置し、中央に本文スペースを取る形式のものが多いです。スマホでサイトを見たときはそのまま縮小されるため、見ずらいし、リンクをタッチしようにも幅が狭くてうまくいかないなど不都合が多くなってしまいます。

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

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

ただし、ページ上部のメニューが邪魔で、パッと本文が見られないようなレイアウトはよくありません。この部分のメニューはタッチすると縦に展開するなどの工夫をするか、思い切ってなくすかのどちらかですね。

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

今の状態からスマホサイトを作る場合、当サイトのような「レスポンシブデザイン」のテンプレートを使って、PCサイトのデザインごと変更するか、現在あるPCサイトはそのままに、スマホ用サイトを別に作り、見る端末によってどちらを表示させるかの振り分け設定をする、という2パターンの方法があります。
どちらにしても今あるサイト内容をベースに、新しいデザインの素を使って編集しなおす手間は変わりません。一応PC用サイトは自分でデザインしているので思い入れもありますし、スマホ用サイトを新たに作って本文をコピペして移行することに決定しました。

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

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

テンプレートを入手したら、実際の編集作業は「ホームページビルダー」などメジャーな有料ソフトや、無料のテキストエディタ「Tera Pad」などのツールを使って行います。
管理人は有料ソフトを持っていないため、地道にテキストエディタで移行をがんばっております。

ホームページビルダーの購入も考えましたが…

こういったソフトを使えば、既存のPCサイト内の本文をコピペして持ってきて、画像はソフトの機能を使って簡単に挿入できますので作業がスピーディなのですが…
管理人のサイトは、画像や本文を枠組みで囲うという余計なことをしてしまったので、そのままコピペで持ってくるだけでは不都合が生じ、結局手でHTMLをいじって編集する必要があるため、わざわざお金を払ってソフトを入手するメリットがない…ということでやめました(;´Д`)

無料でも、プログラミング言語がわからなくても簡単にサイトが作れる、ビルダーと同じような感覚で使えるソフトがあるのですが、どういうわけか配布されているテンプレートをこういうソフトで編集するとバグってしまい、表示されなくなってしまうんですよね…だから使えないんです(ノД`)シクシク

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

 - よろず, サイト作成