ブログ

「remを利用したスケーラブルなレスポンシブWebデザイン」・「日本語Webフォント」などを採用してサイトをリニューアルしました。

いつも見ていただいている方々は既にご存知かと思いますが、先週の週明けくらいにこっそりサイトをリニューアルしました。公開後に出てきた修正をつぶしていたのですが、そろそろ見てもらってもいいだろうという感じになったので堂々と告知です(笑)。

リニューアルの概要

今回は新しい技術をさらに進化させたり、未来を見据えた技術を採用してみたりしています。

コンセプト的には、新しい技術の融合というテーマです。
レスポンシブWebデザインは当たり前、他に取り入れた技術は以下の通りです。

  • 「remを利用したスケーラブルなレスポンシブWebデザイン」
  • 「日本語Webフォントの導入」
  • 「フラットデザイン」
  • 「アイコンフォント」
  • 「CSS Transform」
  • 「シングルカラムデザイン」
  • 「CSS Calc」

実はほかにも、やってみたいけど時間的都合で取り入れていない技術などが多くあるので、コード的にはいろいろこれからも変えていく予定です。

remを利用したスケーラブルなレスポンシブWebデザイン

今回は、pxを使用せずremを使用しました。何カ所かある、1pxのボーダーの類以外はremのみを使用しています。CSS3などを多用し、スケーラブルなレスポンシブWebデザインを目指しました。

Internet Explorerもバージョン9以上がターゲットブラウザならpxはいらないですね。ちなみに、古いブラウザでも何とかしたいときにはpxでフォールバックが必要です。

基本的な部分は菊池さんの書籍「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」に書かれていますのでぜひぜひ読んでみてください。

日本語Webフォントの導入

日本語Webフォントを導入してみました。デメリットがあるのを承知です。テストで使ってみて最後まで採用するか迷った部分です。

ページロード時にはちょっと重いのでなかなか実案件で使うのは難色をしめすケースがあるかもしれません。デメリットはこんな感じ。

  • Webフォントの文字ロードが遅い。遅いと言ってもiPhone5+LTEのレベルならなんとか耐えられる感じがします。
  • JavaScriptのロードが遅いと、Webフォントがロードされるまで文字が画面に見えなかったりするときがあります。ここが妥協したところです。

上記のようなデメリットもありますが、それを上回るメリットがあれば実案件でも採用していきたいと思っています。今回はシンプルなデザイン故、フォントにはこだわりたいので、fonts.comの有料プランを契約して、日本語Webフォントを導入しました。

  • 今回日本語Webフォントで使ったのはAxisフォントファミリー。現時点ではfonts.comでしかWebフォントとして扱っていません。
  • ちなみに英語WebフォントはFreight Sansです(スタバのフォントという噂らしいです)。欧文フォントに関しては、定番フォントに関しては、Webフォント買い取りオプションがあれば買い取りたいです(パッケージではなくバラ売りがないので現在検索中)。JavaScriptで解析しているとサイトのパフォーマンスがその分落ちるのが理由です。

フラットデザイン

フラットデザインを採用してみました。実際に取り組んでみて、色加減が難しいと感じました。

今回はブランドカラーを選んで、それを中心に作成。色数も前のデザインと比べるとかなり減らしています(減らし過ぎ?)。

HEXもほとんど使わずにHSLAを利用しています。#fff(白)だけは、入力しやすいのでHEXを利用しています。

アイコンフォント

今回は、アイコンフォントを全面的に利用しています。

  • 画像読み込みをできるだけ無くして、パフォーマンスアップしたかった。個人的にはCSS SpriteはCSSでの設定が面倒なのでアイコンフォントの方が楽だということもあります。
  • フラットデザインで色数を減らしているので、ピクトグラムアイコンは単色でもOK。なのでアイコンフォントにみと割り切ってしまいました。
  • ロゴもWebフォントにしたかったけど、そこだけは画像で妥協しました。

結果、このサイトで使っている画像は、ブログ記事と制作実績のページ以外は3つだけです(ソーシャルのJavaScriptは入れ替える予定なので、最終的には2つになります)。

アイコンフォントはicomoon Appで作成しました(icomoon Ultinateも購入済みです)。それでも足りないアイコンは自分で調達(SVGを購入したり、自作したり)もしています。

CSS Transform

CSS Transformを利用して、画像の変形などをしています。

案件の関係で海外のサイトを研究していると、最近は画像は形を正方形などに整えただけにし、WebサイトではCSS Trasformで変形させているケースがちらほらでてきています。

今回は、スクエアな形の疑似要素をCSS Transformで変形させて、ひし形(CSS Diamond)にしています。そういえば、某案件でCSS Transformを利用した六角形(CSS Hexagon)も使いました(これはマジで泣いたけど)。

CSS Transform(2D)を利用した画像変形はいろいろノウハウがたまったのでいずれは記事にしたいと思います。案件とかも含めて使ってみると、現時点では、制作者がかなり難しいと感じるのではないかと思っています。

シングルカラム

2カラムを一切使わずシングルカラム構成に。ブログなどでは要素も断捨離しています。海外のサイトのように最低限のミニマリズムなサイトになるようにしています。

ただ、ブログの部分に関してはカテゴリーや月別エントリーの一覧をどう表示する、など研究の課題があるのかなと感じました。

CSS Calc

CSS Calcをはじめて使ってみました。CSS Calcを利用すると、余計なdiv要素などをかなり減らせました。CSS Calcもまだ実装的には発展途上なところが多いなと感じました。ちなみに、使い道を誤るとChromeで思いっきりクラッシュします。

バーティカルリズム

バーティカルリズムは前のデザインと同様に採用しています。今回は文字サイズと行間の計算をpxではなくremにしています。ただ、pxをremに変換する形を使用していません。remのみで文字サイズのジャンプ率を指定しています。

あと、今回は変則的な比率を採用しているため、実のところ計算が大変でした。なにしろ、いままで使っている計算式(のメモ)が全く使えないので(笑)。

まとめ

今回は「CSS Calc」とか「日本語Webフォント」など新しい技術をいろいろ使ってみました。新しい技術も、案件に即して実際に使ってみて使えるかどうか分かるものだとつくづく感じた次第です。このあとは、「Flexbox」など、ようやく仕事で使えるようになってきている技術も取り入れていきたいと思っています。

最後に、今回のリニューアルにあわせてTwitterFacebookページGoogle+ページを本格的に運用開始したりしています。ブログに書ききれないことが山のようにあるので、書ききれないことなどシェアしていきたいと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。