話題・トレンド

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

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

    リアルとバーチャルの融合「プロジェクションマッピング」

    最近、イベントやCMなどで取り入れられてきているプロジェクションマッピ…

  3. 話題・トレンド

    思わず笑みがこぼれてしまう写真たち

    見ているだけで微笑んでしまう写真を紹介します。仕事につかれた時にでもど…

  4. 話題・トレンド

    誰にでもできる(かもしれない)最強の護身術

    たまにはちょっと息抜きネタで。海外ブログのDamn Cool …

  5. 話題・トレンド

    宿泊客をあたたかく出迎えてくれる「Towel Origami」

    ちょっと高級なレストランなどに行くとナプキンが飾り折りされている場合が…

  6. 話題・トレンド

    Before I Die… 死ぬまでにしたいことは何ですか?

    ニューオーリンズのマリニーSt.とバーガンディーSt.の交差点にある廃…

  1. Design Items

    プレゼントされたら一生忘れないアクセサリー
  2. WEB制作関連

    自然をモチーフにした24のフルFlashサイト
  3. 話題・トレンド

    実写版 ”マリオカート” の再現度がスゴイ!?
  4. WEBマーケティング

    「囚人のジレンマ」を回避した一言とは?
  5. WEB制作関連

    紙のテクスチャが素敵なWEBデザイン35個
PAGE TOP
Top