読者です 読者をやめる 読者になる 読者になる

おばちゃんのつれづれ 主にマンガとweb

おばちゃんがライフハックや日常を書きます

cssアニメーションは製作者の自己満足でしかない

いまやHP閲覧者の6割がスマホからという時代、飲食店やサロンなどのHPがスマホからだと見れない、見づらい、ということではお客さんがお店を見つけることができません。ですがスマホ対応のHPを作成する業者に頼むと高額になってしまいますので個人のお店だとなかなか手がでません。

逆に考えると、スマホ対応のHPを作成すればお客さんはスマホを使っているのにお店側では対応できていないこのギャップを利用するこの時代ならではの集客が可能です。私もお店のHPをスマホ対応したらぐっと反応率があがりました。スマホ対応やるなら今ですよー!

スポンサーリンク

 

なぜスマホ対応HPは難しいのか

スマホ対応HPを作るのはなかなか難しく「スマホ HP」とか「レスポンシブデザイン」とかでネットで探しても上級者向けの情報しか出てきません。

jQuelyを使って、とか、phpを作成して、とか、あるいは暗号みたいなコードがずらっと書いてあって「これをコピペすればできます」とか。どこにどうコピペすればできるの?という肝心のところが書いてない。

その上ぬるっと動くアニメーションを実装だとかクリックすると光るボタンだとかグラデーション背景だとか余計なことばっかり書かれています。そういうのはwebデザイン上級者には必要なのかもしれませんが、おばちゃんのような永遠の初心者にとっては意味不明です。

HPに求められること

そもそも、個人商店のHPにcssアニメーションでぬるっと動く挙動はHPに必要でしょうか。

「近所においしいカフェはないかな」「このカフェでは紅茶が飲めるかな」とか思って検索したお客さんにとって必要な情報はお店の地図やメニューであって別にぬるっと動く戻るボタンとか一定時間たつと下からにゅにゅっと出てくるお問い合わせボタンだとかクリックするとぐりんと動く矢印だとかそんなイマドキcssアニメーションを見に来てるわけじゃないのですよ。むしろぬるっと動くことで気が散って肝心な情報を得られない危険すらある。

HPに必要なのは今欲しい情報であってそれ以外は邪魔でしかない

ぬるっと動くイケてるエフェクトが見たいなら4D映画でも見に行きます。

メニューボタンが分かりやすい位置にあって、スマホの小さい画面でも横スクロールしないで見れればそれで十分。

 

HPに必要な情報

よっぽどオシャレパワーが要求されるHPでなければ

  1. いつでも分かりやすいメニューボタン
  2. スマホの小さい幅でも見れるレスポンシブデザイン

の二つで十分じゃないですか。むしろそれ以外はいらない。

そしてこの二つであればhtmlとcssがいじれる程度の知識があれば簡単に実装できます。jQuelyもphpもいらない。スマホが普及する以前のページがいっぱいあって複雑なリンク構造でリッチな画像を多様したPCよりよっぽどラクに作れます。

なのにネット上にも本にもスクールにもそういう情報がなかなか載ってなくて、みんなフェードアウトするボタンとかマウスオンで色が変わるとかcssでアイコン作るとかそんなことばっかり言うんだもの。そしてぬるぬる動く余計な情報ばっかのHPが溢れかえるんだもの。

なんかもっとこう、おばちゃんみたいな底辺ユーザーに優しい世界にならないもんですかね。

 

てことで、超シンプルかつイマドキなレスポンシブデザインのテンプレートを配布しようと思います。びっくりするほどシンプル。

超絶シンプルなレスポンシブHPのテンプレート

シンプルすぎて解説不要な気もするけどおいおい解説記事をかいていきます。

 

 

そしてこの超シンプルレスポンシブHPを強力な集客ツールであるスマホアプリ化する方法がこちら。

 

obatyan1.hatenablog.com