サイトオープンから半年経って
スウィーテスヘアのホームページがオープンして半年が経ったのですが、この度ホームページをリニューアルいたしました！
今回はとにかくホームページを見ていただく方に、より見やすくなるようにとデザインを変更いたしました。
今を思えば最初は、まさか自分で作るとは思っていなかったので自分でできる範囲でネットで情報を集めながら試行錯誤の連続で作っていましたが、流石に知識も経験も無かったのでPCやタブレット、スマホなど画面の大きさが違うものに対しての対応がなかなか出来なかったので、多分今一番多く見られるであろうスマホから見たデザインを重視してデザインしていました。
一応ホームページ作成する上で使用しているワードプレスのテーマ「Simplicity」はレスポンシブデザイン(ディスプレイのサイズに合わせて最適な表示になる)に対応しているので、とりあえずはPCでもスマホでもそれなりには見えていたと思います。
気になっていた事
しかし、基本をスマホで見る視点で作っていたので縦にスクロールする量が必然的に多くなってしまい、PCで見る場合でもかなり下までスクロールしないと全ての情報が見られない状態になっていました。
PCの画面は横に長いので横並びに情報を表示する事が出来れば、もう少し見易くなると思っていたのですが、専門的な知識もない僕にはハードルが高すぎて…
プラグインで解消！
と、思っていたのですが、たまたま「Simplicity」の作者の方がTwitterで、とあるWord Pressのプラグインの情報をシェアされていたのでそれを見てみたらまさに目から鱗で、そのプラグインを使えば今まで気になっていた事が割と簡単に解消出来る事に気付きました。
ブログのトップページを作ったので、作り方から実測効果まで全部紹介 https://t.co/iKDJ1lklMV
すご。テーマテンプレート自体はカスタマイズせずに、プラグインと工夫と、少々のCSSでここまでできるんだ。— わいひら@寝ログ (@MrYhira) 2017年9月27日
そのプラグインは視覚的に確認しながらサイトを作っていけるので知識の無い僕でもそれなりなレイアウトでサイトをデザインする事が出来ました。
ホームページのトップページも少し情報を整理してレイアウトしたのでPCでもスマホでもそこまでスクロールする事なく全ての情報が見られる様になったと思います。
画像メニューもシンプルに見易く
サイトのレイアウト変更のついでに画像メニュー(画像をクリックで違うページへ)の見直しをしました。
これはホームページを見て頂いた一部のお客様から言われてたのですが「画像上の文字が英語だと分かりづらい」とご意見を頂いたので日本語で分かり易く表示してみました。
何となく作る方としては「ちょっとオシャレでセンス良い感じ」を目指してしまいがちなのですが、カットやパーマと同じで、ホームページを見て頂く方の立場に立って考えると、色々見えてくるものも違ってきますね♪
その他もろもろ
他にもメニューも一部日本語にしたり、おススメリンクを別のページにしたりと色々と小さな変更をしております。
お時間ある方は以前のページと比較して間違い探しでもしてみて下さい。( *´艸｀)
旧ホームページのデザインは、不要になった「CSS」を削除したために元々のホームページのデザインとはかなりかけ離れたものになっておりますが、一応自分自身の思い出としてリンク先は残してあります。
このブログを読んで頂いている皆様には、なんの参考にもならないと思いますので旧ホームページのリンクはクリックしないで下さい。
CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。
あと、ホームページ 作成してしばらくはgoogleで「スウィーテスヘア」と検索してみても近所にある違う美容院が出てきてみたり、当店のページが出てきてもカレンダーのページだったりしていて、なかなかホームページのトップページが出てこなかったのですが、最近やっと「スウィーテスヘア」とgoogleで検索すればトップに当店のトップページが表示される様になりました。
さすがにホームページがあるのにお店の名前を知っている方に「スウィーテスヘア」と入力し、検索して貰っても全く検索にヒットしないなんてホームページがある意味も無いに等しいと思っていたのでとりあえずはこれでひと安心です。(^0^;)
ホームページも勿論ですが、このブログでももっと見て頂く方に有益な情報を提供できる様に努力して行きますので不定期の更新になってはおりますがよろしくお願いします！
それでは、また！( ´ ▽ ` )ﾉｼ
コメント