モバイルファーストデザインってみんな五月蝿いからブログをリデザインしたよ

流行り物にいつも乗っかる男

この記事の目次

モバイルファーストって何?

呼んで字のごとくモバイルの利便性を優先しましょう、っていう概念なのですが、その背景にはスマートフォンの普及があります。今後はスマホがパソコンの変わりになるかもな、なんて話しているそこのおじさん。もう遅い。

とっくの昔にもうスマホユーザーの方がパソコンユーザーより多くなっています。
ちなみにこのサイトのユーザー比率は以下の通りです。

70%がスマホ、タブレットでパソコンは30%だけ。パソコン用の見た目にこだわっても今は無駄なんです。スマホでいかに快適に閲覧できるかが重要なんですね。

デザインリニューアルにあたり

というわけで、こういう事に敏感なブロガーなんかはいち早くモバイルファーストのデザインを取り入れているのですが、なんか大体みんな同じ感じなんですね。よく見ると挙動なんかも同じなので発注先が同じか使っているテンプレートが同じなのだと思われます。

かくいうこのサイトも似たようなデザインなのですけど、ここはウェブ制作者の意地としてスクラッチ(つまり0から)作ってみる事にしました。ついでにサーバーも変えました。

デザイン制作

とにかく軽く。もうね、ボタンをタップする前に開くくらい軽くしたかったんですよ。そうなるとすることは1つ。余計な画像やccs、jsをどんどん削除。だってタップする前にページが開くのが目標だから、できるだけ軽量化したいですよね。

なので見てのとおり、すごくシンプルです。1時間ほどでベースデザインを作って後はコーディングで反映させようと思いました。

ベースデザインはこんな感じ

なんかメニューのところにカッコつけて英語が入ってますが、究極の軽さを求めるあまり削除しました。

コーディング

0からやると決めたのでトップページと一覧ページと詳細を静的にコーディングしました。これをワードプレスに入れて完成です。これを機に要らないと思われるものは全部削除しました。

サーバー変更

なぜって言われてもそういう気分だったんですよね。リニューアル前はさくらインターネットなんですけどコントロールパネルがダサくてうんざりしてたっていうのもあります。それでワードプレスを使っている人なら結構使ってる有名なエックスサーバーのwpXクラウドや大手のGMOの格安サービスであるドメインキングも考えたのですが、なんかコントロールパネルがカッコ良さそうという事で海外のGodaddyを選びました。

海外のサーバーとは言え、日本語対応しているし、かっこいいし。。。。

それでこれまでの投稿をデータベースごと新しいサーバーに移動して、ドメインのDNS設定を変更して、サーバーにドメイン登録して変更完了!

※ワードプレスのインポート、エクスポート機能はアイキャッチ画像を持っていくことができないのでまじ使えない。開発者の皆様、この辺の改良をお願いします。ワードプレスサイコー。

リニューアルしてみて

読み込みは速くなりましたし、元々のデザインは購入したワードプレステーマを改修したものだったので、たくさんの不満がありました。今回は0から作ったので使い勝手もよくなり満足です。

スピードは以下の通り(ドヤ
 

 

今後もちょこちょことカスタマイズしていこうと思っています。ちなみに今回作ったテーマは無料で配ろうと思っているので欲しい人がいたらご連絡いただければあげます。また、ワードプレスのオリジナルテーマを作って欲しいという人もご連絡いただければ作ります。有料です。つまりお仕事ください

いやーウェブサイト制作って本当に楽しいものですね。それではさよなら、さよなら、さよなら。