ハルリのホームページのトップページをリニューアルしました。

機密事項であるため、なかなかお客様のホームページをご紹介することはできませんので、今回はハルリがどのような考えで、どのようにホームページを制作しているか、ハルリのホームページを使って、簡単にご説明したいと思います。

ホームページの制作やリニューアルをする際に制作会社に指示をしたり、自社のホームページをチェックする際のご参考になれば幸いです。

リニューアル前から行っていること

WordPress

ブログのように更新できるシステムの一種で、これを使うことにより、お知らせなどの更新を簡単に行うことができるようになります。また、システム導入の費用を抑えることができるのと、拡張性が高く、長く使うことができるというのも大きなメリットです。

なぜWordpressにしたかはブログ更新システム（CMS）はWordPressがおすすめの理由をご覧ください。

スマートフォン・タブレット対応

これは今は当たり前になっていることですが、スマートフォンだけでなく、タブレットへの対応も行っています。

高度なSEO対策

検索エンジンからの集客は非常に重要なので、SEO対策の成功率と効果を大きくするために、通常よりも高度なSEO対策を行っています。

どのようなSEO対策を行っているかはなぜハルリのSEO対策で結果が出るのか？をご覧ください。

リニューアルで追加したこと

ロゴのSVG化

ロゴを画像からSVGにしました。SVGとはベクターデータのことで、SVGにすることで、拡大したり、高解像度のモニターでもきれいに表示されるようになります。

会社名やサイト名などのロゴは通常画像が使われていて、SVGすることで若干重くなり、SEO対策が微妙に不利になるなどのデメリットはありますが、無視できる範囲内での差なので、これからの時代に備えて、拡大・高解像度モニターへの対応を優先しました。

イメージ画像のタイプライター風表示

動きを出すために、イメージ画像の中のテキストをタイプライターのように一文字ずつ表示されるようにしました。

タイプライターのように表示する方法は、jQueryで実装する方法とCSSで実装する方法の2つがあります。

jQueryを使う場合、「○.○○秒毎に一文字ずつ表示させる」と表示する間隔を一括で指定できるので、簡単で手間も少なく実装することができます。その反面Googleが提供しているライブラリを利用するので、万が一Googleに障害が起きると不具合が出てしまいます。ほぼありえないことですが、先日Gmailで障害が起こったばかりで、可能性はゼロではありません。また、SEO対策でマイナスの影響が出てしまう可能性があるというリスクがあります。簡単で手間が少なく実装できるので、この方法が一般的です。

CSSだと、例えば0.08秒間隔で表示させる場合、「一文字目は0.08秒後、二文字目は0.16秒後、三文字目は0.24秒後…」といった形で、一文字ずつ計算して指定しなければならず、テキストが21文字あるので、21文字分を一つずつ計算して指定する必要があります。指定した後に確認して、イメージと違ったら、また21文字分を一つずつ計算して設定していくという作業をイメージ通りになるまで繰り返します。CSSはjQueryで実装した時のリスクを回避できる反面、何倍も手間が掛かるというデメリットがある訳です。

手間は掛かるといってもはじめだけで、その後の手間は掛からず、手間を掛ければリスクを回避できるので、CSSで実装しました。

スクロールすると発生するギミック

下にスクロールすると、ロゴと右側のメニューに透過した黒の背景が出てきます。また、右下にページの上部に戻るボタンが浮き上がるようにしました。

これはjQueryでなければ実装できず、万が一jQueryに障害が起こっても影響の少ない部分なので、jQueryを使っています。

あとがき

細かい部分まで挙げていくとキリがありませんので、大きなところはこれくらいかと思います。

良いホームページを作る際に大切なのは、より多くの選択肢を増やし、それぞれのメリットとデメリットを知って、最良の方法を選択するのと、良いホームページにするためにはどうしても手間が掛かりますので、手間を惜しまないことだと思います。

ハルリでは、お客様のホームページを制作させていただく際も、他社ではやらないような細かい部分まで、手間を掛けて丁寧に作り込んでいます。

ホームページの制作・リニューアルをお考えの会社様がいらっしゃいましたら、お気軽にハルリにご相談ください。