November 9, 2015

Delphinusテーマ – サイトのリニューアルが終わりました



少しずつアップデートを重ねた結果、レスポンシブ対応も含め、サイトのリニューアルがおおよそ完成しました。

web_image

サイトを立ち上げたときは、HTML/CSSとWordpressの勉強をしながらサイト構築をやっていたので、すべてが行き当たりばったり、かつ強引な感じになってしまっていました。今回は前提となる知識がそれなりにある状態で、かつ事前にいろいろと準備をしてからやったので、前よりもきちんと組みあがったと思います。

反面、新しい分野にも手をだしてしまったので、その分に結構な時間を割く結果になりました。時間はかかってしまいましたが、デザイン、コーディング両面についてのスキルアップも含め、とてもいい経験になったと思っています。

ここに、自分の備忘も含めて、簡単にアップデート内容をまとめておきたいと思います。

準備段階でやったこと

いきなりコーディングするのはやめ、事前にいくつかの準備をしました。もちろん、準備に入る前にいろんなWebサイトを訪れて、イメージを膨らませたり、参考にさせていただいたりしましたが、その部分は割愛します。

やりたいことを決めて、Mockupを作成する

サイトを新しくするにあたり、ざっくりと「こうしたい」というのを考えました。

  • 画面いっぱいに広がる大きな画像を使う
  • Blur(ぼかし)のエフェクトを使いたい
  • スクロールに反応して要素が出現するようにしたい
  • 余白を多めにとって、全体をなるべくシンプルにみせたい

少し最近のWebデザインの流行を取り入れたい、というのと、前のデザインが割とごちゃっとしていたので、必要な最低限の機能に絞り、なるべく単純化したかったという意図がありました。

Mock

それらの考えを実現するために、PhotoshopをつかってMockupを作りました。最終的なデザインとは細かい点が異なりますが、だいたいイメージ通り仕上がったと思います。

Mockupを作るのは面倒ですが、デザイン面での試行錯誤をCSSでやるのはかなり非効率的なので、いきなりコーディングするよりも圧倒的に早く仕上がった感じがします。

スクロールに反応して要素が出現する実験

本番の環境でコーディングする前に、シンプルなページを作って技術的に大変そうな部分に関する実験を行いました。最初に、スクロールすると要素が順番に出現してくる実験をやってみましたが、これはすんなりいきました。

$(window).scroll(function() {
  var windowHeight = $(window).height();
  var curScrollPosY = $(window).scrollTop();
  var offsetY = 80;

  $('.fade-in-down-target').each(function(){
    var targetPosY = $(this).offset().top;
    if(curScrollPosY + windowHeight - offsetY > targetPosY){
      $(this).addClass("fade-in-down");
    }
  });
});

ターゲットとなる要素のY座標が、スクロール+Windowの高さを超えたら、アニメーション用のClassをAddしているだけです。実際には、Windowの一番下よりも少し手前で出現させるためのOffset値を設けています。

画像をぼかす

今回のリニューアルの中で、これが一番苦労しました。

blur

使いどころとしては

  • 画像にマウスがのったときに徐々にぼける
  • Featured Image(アイキャッチ画像)をぼかして大きく表示する

というのを考えていました。CSSにはデフォルトで、filter: blur(pixel)というぼかしをかける機能が備わっているのですが、Internet Explorerでは効きません :/  いろいろ調べた結果、SVGを用いてぼかした画像を生成するjQueryのPlugin、background-blur.jsにたどり着きました。

ただ、このプラグインはぼかしたSVGを生成するためのPluginなので、Hover時に徐々にぼかす、といった機能はついていませんでした。なので、中身をいじって、数ミリSecおきにSVGを生成しなおす、というロジックを自分で付け加えました。これで、少なくとも最新版のIE、Firefox、Chromeどれで閲覧してもHover時に徐々に画像をぼかす効果を実現することができました。

デザイン系でやったこといろいろ

ロゴの作成

今回は全体を直線的なデザインにしたため、サイトのロゴも曲線を使わないデザインに改めました。正方形と”P”を組み合わせて、シンプルかつ覚えやすい形にしてみました。

logo

僕の本業はデザインではないので、この手のDrawing系作業は苦手なのですが、わりとうまくいったかなと思っています。

カラースキームの作成

紆余曲折ありましたが、結果的に以下のエメラルドグリーンを中心としたスキームに落ち着きました。

colors

本当はもう一色アクセントカラーを追加しようと思っていたのですが、統一感を重視し、1系統のみにしました。本文テキストも単純なGrayにせず、グリーンを少し含めています。

フォントの変更

前はRobotoフォントを利用していましたが、Template作成の途中で出会った、ドットコロンさんのAileronを使わせていただきました。このサイトのデザインは、Aileronフォントの美しさに頼っています 笑

aileron

フリーのフォントなのに、Weightもたくさん用意されており、かつ非常に美しいという至れりつくせりな感じがとても素晴らしいです。

アイコンフォントの作成

直線的なデザインにあうようなフリーのアイコンが見つからなかったので、自分で作ることにしました。

icon_font

画像として作成した後、FontForgeで自動トレースすることでVectorフォント化しています。フォント化しておけば、CSSでテキストと同じように扱えるので、非常に便利ですね。自作すればライセンスを気にする必要もありません!

新しく導入したPlugin/機能など

Pluginについても整理を行い、不要なものは削除し、新たに必要なものを導入しました。

Master Slider(WordPress Plugin)

以前はHome用とTemplateの画像用の2つを別のPluginで管理していたので、同じもので管理できるPluginを探していました。また、Slider内にYouTubeの再生機構を持ち、TemplateのPreviewが一か所にまとめられればベストだと考えていました。

master_slider

そんなとき見つけたのがこのMaster Sliderで、僕の要望をすべて満たしてくれる、かつ見た目もかっこいいので、「まさに」という感じでした!

このSliderは今後、Blogの中でPowerPointスライドを張るときにも使っていきたいと思います(上の見た目はWrapperを挟んで、自分でカスタマイズしています)。

Google Code Prettify(jQuery Plugin)

このサイトでコードを張り付けることは滅多にないと思いますが、見た目を統一するためにWordPressのSyntax Highlighterをやめ、シンプルなGoogle Code Prettifyに変更しました。

function convertRgbToHex(rgb) { 
  return "#" + eval(rgb.replace(/rgb/,"( ( ").replace(/,/ig," )*256+")).toString(16); 
};

行番号を出したり、テーマを変更したりと、基本的なことは実現でき、軽量です。

Shareボタンの導入

以前のサイトでは、誰もShareなんかしないと思っていたので、配置していなかったのですが、ないとUX的に不便ということで、追加しました。

share

自作したWebフォントに組み込んで使用しています。画像ではなくフォントにすると、Retina対応や色、大きさの変更が非常に楽ですね。唯一ブラウザによるアンチエイリアスの違いによる影響で、見た目が汚くなったりするところが欠点でしょうか(対策を入れないと、小さい場合つぶれたりします)。

見出しをわかりやすく

縦方向に流れる記事は、内容が長くなるにつれ、どこで区切られているのかがわかりにくくなってきます。かといって、あまり濃い装飾はしたくなかったので、今回はインデントを用いることにしました。

indent

ここについてはかなり試行錯誤しました。見出しの装飾をどうするかずっと悩んでいろいろ試してみたのですが、イメージに合うものがなかなか出来上がりませんでした……。最終的に、装飾に頼るのではなく、文字を下げることにより、どこで区切られているかがはっきりわかるようにしてみました。

WordPressデフォルトの機能では実現できなかったので、ショートコードを追加することで実現しています。

おわりに

1からサイトを構築しなおすのはかなりの時間と労力を要するので、今後当分の間は(少なくとも一年以上は)やらないと思います。その分、今回は結構な力を入れたので、長い間使えるサイトデザインになったのではないかなぁと自負しています。ただ、使っている画像についてはまだ十分納得がいっていない部分もあるので、入れ替えるかもしれません。

今後は、見た目ではなく中身を充実させていきたいと思います。すでにある記事についても、内容が分かりにくかったり、説明の順番がよくなかったりするので、少しずつ見直していこうと考えています。なかなか頻繁に更新したりはできませんが、できる範囲で活動を続けていきたいと思いますので、今後ともよろしくお願いいたします。