話題・トレンド

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

気づけば当ブログも丸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. 話題・トレンド

    アートの域に達したアイメイクがスゴイ。

    女性の目元を彩るアイメイクですが、ここまで行くともはやアートですね。…

  2. 話題・トレンド

    やっぱりストリートビューはすごかった。

    日々、進化を続けるGoogleのサービスですが、その中でもストリートビ…

  3. 話題・トレンド

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

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

  4. 話題・トレンド

    Googleロゴで振り返る2010年

    今年もいろいろありましたが、いろいろなイベントや記念日にちなんでその姿…

  5. 話題・トレンド

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

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

  6. 話題・トレンド

    思わず目を奪われてしまった85の建造物

    ちょっと奇妙なものやとにかく美しいものなど、様々な建造物のまとめです。…

  1. WEBマーケティング

    ブログをやっている人なら必ず読んでおきたい記事のまとめ
  2. Design Items

    絵は口ほどに物を言う。16枚の広告ポスター
  3. WEB制作関連

    色とWEBデザイン -茶色編-
  4. 話題・トレンド

    一度見たら忘れられない屋外広告
  5. 話題・トレンド

    インドのスターが踊るPerfume!?
PAGE TOP
Top