NxWorldをリニューアルしました

  • Posted on
  • Category : Blog
NxWorldをリニューアルしました

少し前になりますが、NxWorldをリニューアルしました。一応このブログを書き始めてから1年と少し経つのですが、実はプチリニューアルも含めると今回で4回目のリニューアルとなります。今までは毎回ちょっと色が変わる程度の大した変更でないものだったのでリニューアルとは言えないかもしれませんが、今回は自分なりにいろいろ手を加えたので変更点などを書き残しておこうと思います。

リニューアル前のデザイン

リニューアル前のデザイン

せっかくなのでリニューアル前のデザインを記念に残しておきます。
画像は今回を機に取っ払ったトップページですけど、全体的な色合いはこんな感じでした。
あと、ちょこちょこJS使って動きを付けていたりもしてました。

ポートフォリオという形をやめた

ブログ

当初は自身のポートフォリオサイトがメインで、ブログはおまけ程度の感じで作ったんですが、今回のリニューアルを機にブログメインという形にすることにしました。
そもそも僕がこのサイトを作ろうと思ったきっかけが以下の2つです。

  1. WordPressを触ってみる・勉強してみる
  2. 自分のポートフォリオを作り直す

WordPressを触るだけであればXAMPPなど用いてローカルで勉強したり、適当にサーバー借りていじったりすればいい話なんですが、ちょうどその頃ポートフォリオを作り直すことも考えていたので、「それならポートフォリオをWordPressでつくってみよう!」と思ったのが始まりでした。

当初は個人的に作ったサンプルサイトやお手伝いさせてもらった案件なんかも制作実績として少しだけ載せていたんですが、いろいろあってここ最近は制作実績のページ自体をずっと伏せていました。

もともとポートフォリオ兼ブログで始めたので、一般的なサイトのようにトップページを設けて、そこに最近の実績やブログ記事を並べたりしていたんですが、上でも述べたようにここ最近はブログの方ばかり更新していたので、今回のリニューアルを機にトップページも実績も取っ払って単純にブログメインにすることにしました。

レスポンシブWebデザインにしました

レスポンシブWebデザイン

嬉しいことに少し前からブログをシェアしてくれる方や見てくれる方が結構増えてきたんですが、中でもスマートフォンからのアクセスが増えているなという感じでした。
リニューアル前はスマホ最適化されたテンプレートを別に作ろうと思っていたのですが、特にデザインにこだわっている訳でないし、わざわざテンプレート分ける必要あるのかなどいろいろと考えた結果、レスポンシブWebデザインにすることにしました。
あと、正直レスポンシブWebデザインについての知識がまだまだないので、勉強も兼ねてでもあります。

レスポンシブWebデザイン

実装にはCSSのMedia Queriesを使用し、切り替えは1200px、960px、768px、480px、320pxで行なっています。

ガーッと作ったので無駄な記述があるのと、ここ直さなきゃなーと思うところは暇を見つけて少しずつ手直ししていくとして、ひとまず自分で確認できる環境では致命的な問題はないかなという感じなので、しばらくはこれでいこうと思います。
もし、不具合とかあれば教えてもらえると嬉しいです :)

レスポンシブWebデザインについて個人的な意見…

リニューアルの話からちょっと逸れますけど、レスポンシブWebデザイン(長いので以下:RWD)についての個人的な意見を書こうかと思います。

ちょうど実装しようとした頃、RWDについて否定的な意見やデメリットについて書いている何人かの方の記事がTwitterやはてブなどを通して多くの方にシェアされており、僕もひと通り読ませてもらいました。
中には個人的に凄く納得させられる記事もあったりして、やっぱりやめようかなとかも考えたんですが、このブログの場合は個人的な備忘録だしそこまで気にすることではないと思って実装することにしました。
あと、先に述べたように勉強も兼ねてというのも実装した理由のひとつです。

正直RWDに関しては肯定派でも否定派でもないです。(実装に関してだけであれば何かと面倒なので、圧倒的に嫌いですが…)
そのサイトに適している(必要性がある)のであれば実装すればいいし、最近流行っているからとかの安易な理由で無理して実装する位ならやる必要はないかと思います。
これはRWDに限らずパララックスとかでも同じことが言えますね。

ただ、これはいろんな方が言っていますが、例えばスマホでは必要ない部分をdisplay: none;使って非表示にしたり、わざわざJSを沢山使って古いIEにもバッチリ対応とかするぐらいなら、無理して実装する必要はないのではないかと。
あと、中には最適化したはずなのにPCでの見た目と変わりすぎてて逆に使いづらくなったと感じるユーザーや、スマホで見てるけどPC用の表示で見たかったのにと思うユーザーもいるようです。
テンプレートを分けていればPC用とスマホ用で切り替えできますが、RWDの場合は基本的にそれができないので、そういうのも考慮する必要があるかと思います。

なんかダラダラと書きましたけど、要するにRWD自体は否定をしないけれども、試行錯誤して無理に実装するだとか、流行ってるから実装するぐらいの理由ならやる必要はないんじゃないかと思います。
また、これはRWDに限らないし当たり前のことでもあるんですが、実装する場合はターゲットだとかそういう部分を特に考慮すべきだと思うのが僕の個人的な意見です。

とにかくシンプルに

Simple

今回リニューアルした一番の理由が、とにかく全体的にシンプルにしたいでした。
多少は下手なりにデザインも考えたんですけど、飽き性でまたすぐに変えたくなるだろうと思ったのと、レスポンシブにする際にいろいろと考えなきゃいけないのが面倒になったので、こんな感じでシンプルなものにしました。

デザイン、記事以外で使用している画像、テンプレート、スタイル、プラグイン、JSなど全体的にいろいろと削って、今回のリニューアルでJSは3分の1の数に、プラグインは現時点で6個減らしました。
プラグインに関してはこれもいらないかなと思うものがまだ幾つかあるので、それらも追々減らしていこうと思っているのと、まだ検討中ですがアイコンなどもWebフォントに切り替えようか考えています。

以上、今回のリニューアルについて大きな変更点をさらっとですが書いてみました。
今までデザイン変更する度に「しばらくデザイン変えない」とか思いつつ何度も変更していたんですが、今回こそはこのデザインで当分の間やってこうと思います。
まだいろいろと手を加えていたり検証している状態なので、上でも述べたようにもし何か不具合などあれば教えてもらえると嬉しいです :)

相変わらずのんびりとマイペースに更新していきますが、今後もNxWorldをよろしくお願いします。

Back to Top

NxWorldをリニューアルしました

NxWorldをリニューアルしました

/ Blog

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。