話題・トレンド

サイトリニューアルしました!

気づけば当ブログも丸4年。仕事の都合で止まっていた記事更新も再開したので久々にリニューアルしてみました。リニューアルのポイントと参考にした記事などをまとめてみました。

デザインについて

以前ガラッとデザインリニューアルした際にブログをやめてしまったのかという声も聞いたので今回は基本的なトンマナは以前のものを踏襲。読みやすさを重視して基本の文字サイズを大きくしました。

そういえば「トンマナ」って意外と意味を聞かれることが多いので念のため捕捉…

トンマナ(とんまな)は、トーン&マナーの略で、もともとは広告におけるデザインやコミュニケーションに一貫性を持たせること。要するに、全体の雰囲気に合わせましょうってこと。

ちなみにこちらが旧デザイン

renewal_02.jpg

変えなすぎもつまらないのでサイトロゴをプチリニューアル。

renewal_01.jpg

レスポンシブ対応について

以前はスマホからの閲覧はhtaccessを用いてスマホ用のページへ転送していましたが、タブレットでのレイアウトが調整できていなかったこともありレスポンシブを採用。

ブレイクポイントは1024pxと640pxの2か所で以下のようにレイアウトを切り替えてます。

renewal_03.jpg

ちなみに旧型ブラウザは非対応としました。あとで簡易的にCSSで整形しようかと思っています。

レスポンシブ時に意外と見落としがちな外部モジュールによるレイアウト崩れは以下で解決しました。

YouTubeなどはこちらで回避。

サイトの高速化

レスポンシブにしたこともあり、表示速度をあげるように最低限必要な画像のみCSSスプライトにし、極力WebフォントやCSSで完結させました。主な施策と参考記事は以下です。

Webフォント

WebフォントはGoogle Fontsを利用。日本語はどうしようかと悩んでのですが、ひとまずデバイスとしました。

CSS3の利用

装飾は基本的にCSS3で実現しました。面倒なグラデーションやシャドウの数値は以下を利用して取得。

アイコンもWebフォントで利用してみました。

CSSスプライトのRetina対応にちょっと手間取ったのですがこちらで解決。

ソーシャルメディア

これを気にソーシャルメディアも少し整理。

今まで利用していなかったGoogle+ページを作成。

最近はログインすらしていなかったmixiページは廃止しました。ちなみにソーシャルメディアはhoot suiteで管理を集約しています。

JavaScriptについて

今回は極力控えようと思っていたので必要最低限の利用にしました。アコーディオンやスクロールはあまり凝らずにjQueryを利用した軽めのもので実装。

どうしても入れたかったスマートホン版のスライド式のメニューはこちらのプラグインで実装しました。

こちらでかなり簡単にスライドメニューを実装できました。

制作の際に利用したプラグインや便利ツールなどはあとで詳しく紹介したいと思います。

リニューアルはできましたがちょうどこんなニュースも飛び込んできて、これからも記事の質をあげていきたいなと思いますのでこれからもご愛読よろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. 話題・トレンド

    Googleファッションショーがかわいいぞ。

    「誰でもできるのに誰も思いつかなった。」というような動画。出演者たちが…

  2. 話題・トレンド

    iTuneからの重大発表、その後。

    いろいろな憶測が飛び交い、ネットや世間を騒がせていたappleからの重…

  3. 話題・トレンド

    あなたは分かる?LEGOで表現した超有名絵画

    こちらはちょっと面白いアイデアのLEGOの広告です。いろいろな色のレゴ…

  4. 話題・トレンド

    クリエイティブな名刺を集めてみた

    商談などの際にまず相手を知ることになる名刺ですが、ここで特徴的な名刺だ…

  5. 話題・トレンド

    賛否両論 !?スターバックスのロゴがリニューアル

    すでに話題になっていますが、スターバックスが40周年の節目の年にのロゴ…

  6. 話題・トレンド

    近未来空間を実現した「ドバイメトロ」がすごい。

    世界最長の無人メトロネットワークを形成している「ドバイメトロ」ですが、…

  1. WEB制作関連

    jQueryを学ぶなら必ず見ておきたいサイトまとめ
  2. 話題・トレンド

    いろんな物の運び方がスゴイ!?
  3. WEB制作関連

    美しい写真に目を奪われるWEBサイトまとめ
  4. LifeHack・仕事術

    情報の波にのまれずに整理する方法
  5. WEB制作関連

    WEBマガジンスタイルの海外サイトまとめ
PAGE TOP
Top