話題・トレンド

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

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

    “ここが変だよ日本”が分かる動画「The Strange Country」

    最近話題になっている動画ですが、ハッとさせられる内容だったので紹介した…

  2. 話題・トレンド

    平和な街並みを異空間に変えてしまったアート

    まるでCGで作ったような状況を描きあげてしまったというアートをご紹介し…

  3. 話題・トレンド

    Web Designing 2012年8月号に執筆させてもらいました。

    18日発売のWeb Designing 8月号の特集「サイト設計のため…

  4. 話題・トレンド

    これを見れば禁煙できるかもしれない。

    「百害あって一理なし。」そんなことは分かっているけどやめられない。…

  5. 話題・トレンド

    新型MacBook Airを買う前に必ず読んでおきたい記事まとめ

    新型MacBook Airを機にWindowsからMacに乗り換えよう…

  6. 話題・トレンド

    10万本の楊枝と35年の年月がつくりあげた壮大なアート

    ものすごい要塞のような見た目ですが、そのディティールや仕掛けも必見の逸…

  1. 話題・トレンド

    いろんな物の運び方がスゴイ!?
  2. Design Items

    猫好きにはたまらないアイテムを発見
  3. iPhone

    iPhoneを使いたおしてみる。
  4. WEBマーケティング

    マーケティング心理学|アンカリング効果
  5. 話題・トレンド

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