【ESTADO様】コーポレートサイトリリースの裏側

回、HP制作のご依頼をいただいたのは、個人や中小企業のお客様に対してインフラ環境のトータルコンサルティングを行っている、ESTADO様です。

代表の池田氏をはじめ、メンバーの年齢層が若くてとてもエネルギー溢れる会社です！

デザインについて

お客様のご要望は、「明るく面白いページ」とのことでしたので、とにかく元気の溢れるサイトをメインテーマにしました。メインカラーは、ESTADO様の会社ロゴにも使われている「赤」をつかってエネルギー溢れるサイトを目指しました。

社員の方々の日常をヒーローの戦いに重ねてみると面白いのでは？と思い、アメコミ風に。特に、アメコミのイメージとして強い1940年代の「スーパーマン」や「バットマン」などのあしらいを多く参考にしています。

コーディングのあれこれ

filterプロパティー

ウスホバーした時に、メンバーの画像をモノクロにしています。ホバー時用の画像を用意しているかと思いきや、実はこれ、filterプロパティーを使って画像のレタッチをしているのです！

filterを使えば、コントラスト・明るさ・透明度・モノクロetc…組み合わせや値を細かく設定できます。画像以外の要素でも指定できので、表現の幅がいろいろ広がりますよ！

text-align: justify;

テキスト中心のページの場合、テキストの右側が揃っていなかったり、改行の位置がバラバラだったりすると、見た目が悪いですよね。そんなときにおすすめなのが、均等割付けを実現する「text-align: justify;」です。両端が揃って、見た目が美しくなります！

↓だたの左揃え。見た目が悪いです。

↓均等割付け指定。見た目がすっきりしました！

will-changeプロパティ

今回は、TOPやCULTUREページ内に多くのアニメーションをつけています。見た目が華やかになって、面白いページができるのがアニメーションのいいところなのですが、コーダーにとっては、画像のちらつきをいかに抑えるかが腕の見せ所になります。

これまでは、transform: translate3d(0, 0, 0); や transform: translateZ();などのCSSハックを使って、2Dの要素を3Dの要素だとブラウザに認識させることで、なめらかなアニメーションを実現していました。しかし、この方法だと、GPU使用率が上がりモバイル端末では悪影響であることがわかりました。

そこで今回は、will-changeプロパティを使っています。ブラウザに、animationの処理をしますよーとあらかじめ宣言することができるwill-changeプロパティ。ブラウザは、animationに備えてブラウザを最適化して、待っていてくれるというすぐれものです。

しかし、便利な反面、ブラウザの最適化は思いがけない副作用をもたらすことがあります。使うときは、よく注意して使ってください。ここぞというとき以外は、使用しない方が無難です。