話題・トレンド

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

気づけば当ブログも丸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度見してしまうガレージいろいろ

    ガレージにいたずら書きされて困っている方は必見かもしれません。…

  2. 話題・トレンド

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

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

  3. 話題・トレンド

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

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

  4. 話題・トレンド

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

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

  5. 話題・トレンド

    ロボットと暮らす日もそこまできた!?

    初音ミクで多くの人に広まった”ボーカロイド”いまや人間をバック…

  6. 話題・トレンド

    モレスキンのカッコいい使い方。

    モレ本なんてものも出て、ちょっとした話題のモレスキンですが、かっこいい…

  1. 話題・トレンド

    思わず目を疑ってしまうペットの捜索願い
  2. iPhone

    iPhoneを使いたおしてみる。
  3. WEB制作関連

    話題の「about.me」でプロフィールページをつくってみた。
  4. WEBマーケティング

    リピーター獲得はリコメンドよりリ???ド
  5. WEB制作関連

    便利なアイコン配布サイト10+1
PAGE TOP
Top