スマホ対応のウェブサイト作成

2016-04-15

重い腰を上げ、ようやくこのウェブサイトもスマホ対応させました。(ど素人レベルですけどね)
トップページでも書いている通り、このウェブサイトはテキストエディタ一つで手入力作成。僕の計画性の無さも手伝ってかなり時間かかりました・・。もし、ウェブサイト自作してみよう!って方がいたら、しっかり計画してから作りましょう!

スマホ対応させる必要性

PCサイト見られるんだからしなくてもいいんじゃね?

そうなんです、そうなんですけど・・。
みなさんにも、こんな経験ありませんか?スマホでウェブ検索してたどり着いたサイトで、

「文字ちっちゃ!」

とか、

あ!違うリンク文字押しちゃったよ・・。

とか。

こういったストレスを解消してあげないと、いずれ誰も見てくれなくなってしまうかもしれません・・・。ウェブサイトは人に見てもらってなんぼですから、見る側がストレスフリーというのが理想です。

総務省の調査によると、スマホの利用率は約62%、20代に至ってはなんと約94%だそうです。
これからはスマホでも見やすいサイト作りをすることはとても重要だと言えます。

やり方は大きく分けて2つ。それぞれのメリット・デメリット

1. PC用とスマホ用のファイルを別々に作る

このやり方は、単純明快ですね。スマホ用を完全に分けることで、スマホで見ることに特化したページを作成できるのがメリット。例えば、スマホ用ではこの内容はいらないな、とかこの画像は先に持ってきた方がいいかなとかっていうのがやりやすいです。
デメリットは、2つ分のウェブサイトを管理しなきゃいけない!ということです。一つのサイトで2倍の労力がかかってしまいます。

2. HTMLファイルは共通で、スタイルシートを分ける

グーグルも推奨しているのがこのやり方です。メインのHTMLファイルは一つで済みますから、管理が1のやり方と比べ大幅に楽です。片方の更新をし忘れたりする心配もなくなりますね。

デメリットは、PC用と同じ内容をスマホでも表示することになりますので、コンテンツの表示順などしっかりとした構成で作っておく必要があります。また、メニューや常に表示しておく必要のないものは隠しておくなどの工夫も必要になってきます。僕のこのページではそこまで実装できていませんが(汗)

*2016.04.17に更新情報部分で対応しました。(スマホだと余計なスライドをしなければいけなかったため。)

*2017.06.23 基本的に隠さないデザインに変更

当ウェブサイトではスタイルシートを分けてデザイン

実は、はじめはスマホ用のページを別で作成する予定でした。スマホ用ということでゼロから作り直していったわけですが、そのうち

「これをPCに対応した方が早いかも!」

という結論に(笑)
その結果が今のこのウェブサイトの形になりました。文字の大きさや行間の間隔などの調整が一番時間がかかった気がします。

いろいろ苦労もしましたが、以前よりも少しは見やすくなったかなと思います(^^)

*2017.06.23 これもヤメ。メディアクエリで対応中。

最後に

当ホームページはテキストエディタを使って全部手入力で作成していますが、もっと簡単に作ってみたい!という方はウェブサイト作成ソフトを使う方法もあります。HTMLやCSSの知識がなくても作成できるようになっていますから、これからウェブサイト作成してみたいという方もいいかもしれません。