ブロックワークス

 

サイトリニューアルで考えた事

久しぶりに「ブロックワークス公式サイト」をリニューアルいたしました。今回のリニューアルで考えた事を書いていきたいと思います。

リニューアルポイント

まずはじめに、リニューアルポイントを記載します。その中でこだわったポイントを補足していきます。

  • レスポンシブ対応(スマホ対応はしていたが、レスポンシブではなかった)
  • SASS、BEMを使用してCSSを管理(以前は素のCSSだった)
  • WordPressDB入れ替え(Ver2.0.1頃から使い続けたDBを削除して作り直した)
  • 以前は1ページで完結するように内容を作っていたが、目的別に細かくページを追加した
  • 写真の代わりに、GIFアニメーションを多用した

古い遺産をバッサリ捨てる

長らくリニューアルしていなかったので、古いコードが大量に残っていました。素のCSSだったり、レスポンシブではなかったり…。そのあたりの今となっては古い作り方だったものをすべて捨て、イチから作り直しました。

同業者の方はソースの中身を見たりすると思うので、基本は抑えたコード制作にする必要がありました。SASSを使い、BEM記法を使ってコーディングしているので、スッキリとして、CSSの干渉もないため、メンテナンスがずいぶん簡単になりました。

目的別に細かくページを作った

リニューアル前は、1ページにすべての情報を詰め込む方が合理的だと考え作っていましたが、ホームページ制作を検討中のお客様の事を考慮し、制作の流れなど、より詳細な情報を作るようにしました。

ただ、まだ情報不足や専門用語になっている箇所が一部あるので、そういった箇所は今後フォローできるよう改善していきたいと思っています。

写真の代わりに、GIFアニメーションを多用した

写真を否定する気はまったくありませんが、インパクトが少しほしいなと思い、GIFアニメーションを多用した画像を入れました。

アニメーションに関して、動画でも良かったのですが、意外と設置が面倒な動画と比較して、シンプルで軽量なGIFアニメーションは、意外と使える事がわかりました。メインビジュアルのGIFアニメーションも1000×350px、30fps、約10秒で1.1MBと、ちょっと大きめの画像と変わらない容量で動きを表現できます。

画質を保ったまま、軽量のGIFアニメーションを生成するために、ffmpegを使用したパレット生成による減色しています。これについては、また別記事にしたいですね。

今後追加していきたい事

今回のリニューアルは、早く公開する事を目的としていたので、不足のコンテンツがけっこうあります。

  • 制作実績の不足
  • 別サイトで更新していた情報を当サイトへ移行
  • 不定期コラム(技術的なことだったり、コンピュータ苦手な方の知識が上がるような情報)

「定期的に更新していく」という、基本に立ち返って情報を更新していきますので、ぜひご覧いただき、よろしければ、お気軽にお仕事についてお問い合わせいただければと思います。