話題・トレンド

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

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

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

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

  3. 話題・トレンド

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

    18日発売のWeb Designing 5月号に執筆させていただきまし…

  4. 話題・トレンド

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

    最近ネットで人気の動画を取り扱った番組なんかも増えてきましたが、これも…

  5. 話題・トレンド

    「もし小人だったら」を再現したアートがスゴイ!

    最近映画も公開された 「GANTZ」の世界を思わせるような作品ですが、…

  6. 話題・トレンド

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

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

  1. Design Items

    究極のユーザビリティを実現したスイッチ
  2. 話題・トレンド

    Googleファッションショーがかわいいぞ。
  3. WEB制作関連

    色とWEBデザイン -オレンジ編-
  4. Design Items

    パックマンをテーマにしたインテリアいろいろ
  5. WEB制作関連

    色とWEBデザイン -あか編-
PAGE TOP
Top