バゲット)」という小さなパン屋をやっています。この店のWebサイトは僕が作っているのですが、作ったのが4年前(2013年)なので、だんだんデザインが古くなってきてしまいました。「そろそろリニューアルしないといけないよな~」とは思っていたものの、なかなか時間が取れずしばらく放置状態だったのですが、この年末年始は少し長めの休みが取れたので、この機会に全面リニューアルを敢行しました。明けましておめでとうございます。Facebookというわけで、このエントリでは今回のデザインリニューアルについてあれこれ書いてみようと思います。4年前との違い:7割以上がスマホからのアクセスになった冒頭で「デザインが古くなってきた」と書きましたが、何が一番古くなったのかというと「スマホ対応できていないこと」です。いうか、この問題がなければ今回のデザインリニューアルはしなかったと思います。以下はクープバゲットのWebサイトを訪問するユーザーのOS比率です。ご覧のとおり、iOSとAndroidで7割を超えています。4年前もスマホからのアクセスはありましたし、Webデザインのセオリー的にも「モバイルを意識しろ」という話はありましたが、ここまで「スマホ一辺倒」な感じではなかったように思います。最近はGoogle先生も「あなたのサイトはモバイルフレンドリーではありません」みたいな警告を送ってくるので、もはや「スマホ対応できていないWebサイトはWebサイトではない」と言っても過言ではない状況になってきています。新デザインではレスポンシブデザインを採用というわけで、新デザインではレスポンシブデザインを採用し、スマホでも見やすくしてみました。PCで見るとこんな感じですが、スマホで見るとこんな感じになります。お店のコンセプトページだと、こんな感じです。実際のWebサイトへはこちらからアクセスできます。旧デザインはこんな感じちなみにスマホ対応できていなかった旧デザインはこんな感じでした。PCで見ればまずまずなのですが、スマホで見るとPCの画面がそのまま縮小されてしまい、「モバイルフレンドリー」ではないのは見て明らかです。デザインテンプレートを購入して、時間を節約ところで、Webサイトをレスポンシブデザインにしたい!と思っても、僕の本職はWebデザイナーではなくプログラマなので、フルスクラッチでゼロからデザインするのは大変です。(それにぶっちゃけ、そこまでのスキルは僕には無いです)そこで今回はデザインテンプレートを使って時間を節約することにしました。今回購入したのはZUPAというデザインテンプレートです。Template「一人で全部作ったんとちゃうんかい!!」とツッコみたくなった方はごめんなさい(苦笑)。いえ、わずか10ドル(=1000円ちょっと)でレスポンシブ対応済みの小洒落たデザインが手に入るというのは、非常に費用対効果が高いと思います。WrapBootstrapというサイトにはZUPA以外にもBootstrapベースの有料テンプレートが数多く揃っています。今回は「レストラン」というカテゴリから、イメージに一番近いテンプレートを妻に選んでもらいました。WrapBootstrapその他の新機能:FacebookやTwitterでの見た目を改善した(OGP対応)レスポンシブデザイン以外で旧デザインから新しくなった点は、FacebookやTwitterでの見た目を改善した点です。Protocol)対応ってやつですね。SNS(特にFacebook)の重要性も4年前に比べるとずっと増してきました。FacebookやTwitterにリンクを貼り付けたときの見た目がショボいと、なんか非常に残念な感じになるので、この点についても今回のリニューアルで改善することにしました。Facebookでリンクを貼り付けると以下のように表示されます。Twitterの場合はこんな感じです。OGP対応したおかげで、このブログ(はてなブログ)にリンクを貼り付けたときも、いい感じの見た目になりました。ちなみにFacebookやTwitterでの見た目を確認する場合は以下のツールが使えます。DevelopersWebサイトの品質チェック他にもこんなチェックをしたりしました。表示速度やWebサイトの基本的な品質チェックは以下のツールを使いました。Optimizationまた、表示速度が低下しないように、Webサイトで使用している画像は解像度をある程度まで下げたり、画像圧縮ツールで圧縮したりしています。transparencyリンク切れの確認リンク切れがないかのチェックは以下のツールで行いました。リンク切れチェックツール:HTMLの構文チェックHTML5として構文的に致命的な問題がないかどうかもチェックしています。手元にある以下のブラウザでは、実際に自分で動かしながらひと通り表示確認をしています。miniただ、Androidだけは実機が手元にないので、会社のメンバーに表示確認してもらいました。制作期間は5日(公開日を含めると6日)ですが、テンプレートを使ったおかげで基本的な枠組みは1日でほぼ完成しました。「細かい手直し」の期間は自分で表示確認して、「う~ん、ここのマージンをもう少し大きく」とか「ここの写真はこっちに入れ替えた方がいいんじゃないか?」とかブツブツ言いながら、変えては確認、変えては確認、を繰り返していました。いやあ、この手直し作業は表示を確認するたびに「あ、ここも」「あ、こっちも」って思ってしまうのでキリがないですね(苦笑)。それが面白いと言えば面白いんですが。RailsとHerokuで構築しています。RailsのコードはGitHubに置いてあるので、誰でも確認可能です。site.リニューアル時のdiffも以下のリンクから確認できます。興味のある方は覗いてみてください。GitHubまとめというわけで、このエントリでは妻のパン屋のWebサイトをデザインリニューアルした話をあれこれ書いてみました。遅ればせながらこれでそこそこモダンな作りにはなったはずなので、今後数年は大きく変更しなくても大丈夫なんじゃないかなーと思っています。バゲットあわせて読みたい4年前にデザインを変えたときにもブログを書いています。いやあ、わずか4年の間にWebデザインのトレンドも大きく変わってきましたね~。こちらは「なぜ妻がパン屋を始めたのか?」というエピソード等を書いたエントリです。新しいお問い合わせフォームに関するちょっとした技術的な工夫について書いてみました。はてなブログPro株式会社ソニックガーデンで働くRubyプログラマ。2017年11月に「プロを目指す人のためのRuby入門」を出版。blog)はてなブログをはじめよう!JunichiItoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。