コーポレートサイトリニューアル Column vol.3【CMS＆コーディングについて】

こんにちは。ジーニアスウェブの杉田です。
2017年も残すところあと１ヶ月を切りました。
時の早さに驚きを隠せずにいる今日この頃です。

さて、その2017年が終わる前に行った当社のコーポレートサイト全面リニューアル！
今回は私が担当させていただいた「CMS&コーディング」についてのお話しをさせていただきます。

今までの記事と合わせてお読みいただけますと嬉しいです。
◎コーポレートサイトリニューアル Column vol.2【デザインについて】
◎コーポレートサイトリニューアル Column vol.1【なぜリニューアルをしたか？】

使用したCMS

今はもう当たり前になっている、WordPressを使用しました。
世界中を見ても使用されているサイトが多く、情報やプラグインなどが豊富です。
WordPressを使わない理由はないと言っても過言ではありません。

当初は違うCMSを使ってみようか、という話も出ていました。
しかし、イチから勉強し情報が少ないCMSを使用して制作するより、工数が断然抑えられ早く公開できるということで、WordPressでの制作にすることにいたしました。
使用した主なWordPressの機能はカスタム投稿、カスタムフィールドです。

■ カスタム投稿
制作実績＆お客様の声のコンテンツは、随時増えていくものなので投稿形式です。
デフォルトの投稿機能を使いカテゴリ分けなどを行わず、カスタム投稿を実装しました。
ちなみに、カスタム投稿を実装する際は、プラグインを使わずにfunctions.phpで設定する方法でいつも実装しています。。
その方が別案件でも使い回しやすいので効率的かなと私は思っています。

■ カスタムフィールド
カスタムフィールドと言えばこちらのプラグイン「Advanced Custom Fields」。
私が大好きなプラグインです。
投稿時の作業工数短縮、コーディングが出来ない人でも簡単に更新が出来るように心がけて実装しました。

Advanced Custom Fieldsについては、以前ブログでご紹介させていただきました。
よろしければご覧ください。

コーディング概要

■ ブレイクポイント
サイトはレスポンシブサイトで制作していますが、その際に指定するブレイクポイント。
以下ブレイクポイントで基本構成としています。

・min-width: 768px
・min-width: 1024px
・min-width: 1280px

私はいつもレスポンシブのコーディングをする際、スマホファーストでの記述です。
そのほうがやりやすいですし、色々と都合が良いです。

今までは、先述のブレイクポイントを使用することが多かったのですが、
最近は、Bootstrapに合わせたブレイクポイントが私の中の定番になっています。
ブレイクポイントの値を考える時に「どの値にしようか…」と、迷う時間がもったいないので、多くのサイトで使用されていて実績のあるBootstrapを参考にさせてもらっています。

・min-width: 768px
・min-width: 992px
・min-width: 1200px

■ フレームワーク
グリッドだけですが「fox.css」というものを使用しています。
こちらは、Flexboxベースのもので、色々クラスが用意されているのでとても使いやすいです。
レスポンシブサイトはワンソースで制作・運用ができるというメリットはありますが、CSSが膨大に膨れ上がりますよね。
そんな時に、グリッドだけでもフレームワークを使用しておけば、要素ごとにCSSの指定をする必要がありません。
よって、作業工数短縮、CSSファイルの容量削減、サイト内で統一することができて効率的になるのではないでしょうか。

■ アイコンフォント
IcoMoonでオリジナルフォントを作成し使用しています。

IcoMoonについても、以前ブログでご紹介させていただきました。
よろしければご覧ください。

「IcoMoon」を使用して自作アイコンをWebフォントにしてみよう！

■ トップページのメインビジュアル
jquery.mb.YTPlayerを使用して動画を背景に設定しました。
動画が入ると動きがあり、ジーニアスウェブが日々どのように仕事を行っているかが伝わりやすくなったのではないでしょうか。
撮影時はカメラを意識しすぎて不自然にならないよう、心を無にし、とにかく仕事に集中しました…

■ トップページのメインビジュアルのテキスト
メインビジュアルのグラデーションテキストはSVG画像を使いました。

当初、このテキストはSVGアニメーションを使用していましたが、ブラウザごとの挙動があまりにも不安定で、それに対応するための私の知識と技術がまだ足らず…
泣く泣く静止テキストとなりました。
今までなら画像テキストはpngにすることが多かったのですが、ぼやけてしまうのを回避するために、拡大縮小に耐えられるSVG形式にしました。
静止テキストにした事は、いま思うと、
背景が動画なので邪魔にならなくて良かったのかな、とも思ったりもしています。

さいごに

色々挙げさせていただきましたが、自慢できるほど特別すごい技術を使ったわけではありません。
むしろ、今回のプロジェクトでまだまだ自分のスキルは足りないなと感じることが多々ありました。
公開できたことに満足するだけでなく、良かった点・反省点を洗い出し、今後の運用・制作に活かしていきたいと思います。
そして、お客様が快適に使っていただけるサイトになるよう、今後も追求し続けたいと思います。

それでは、次は広告担当の大木氏にバトンタッチいたします！

コーポレートサイトリニューアル Column 2017の記事一覧はこちら