ITキヲスク、デザインリニューアルしちゃいました☆ | ITキヲスク

おめでとー！ありがとー！おめでとーー！！ありがとーーー！！！

前回のリニューアルから１年半、継ぎ接ぎした機能も増えてきたり、投稿記事も増えてたりしてきたので、ここらで久しぶりにITキヲスクのデザインテーマをリニューアルしちゃいましたよ☆

パッと見は大幅に変えていませんが、アイキャッチ部分に遊びを入れたり、ちょこっとコンテンツを差し替えたり、新たなプラグインを導入したりと、結局WordPressのテーマをフルスクラッチで作る大改造に。

んでは、以下に今回のリニューアルにおける意図とか改良点とかをば♪

リニューアル概要

今回のリニューアルに際しての意図としては、「グダついてきたサイドバー周辺をスッキリさせたい」「増えてきた自作サービス群を目立つ場所に一覧させたい」「あんまり使われてないコンテンツはボツに」「もう少しサイト内の巡回性を良くしてページビューを増やしたい」ってあたり。

で、デザインの基本的な方向性は現状のままで結構お気に召してたので、そこら辺は生かしたまま、悪の枢軸IE6～7は「見れればいい」程度の対応までで行こうと。

そんな感じでUIデザインを作り込んでいった結果、おおまかに下記のような対応をする事に。

リニューアルポイント

• アイキャッチをコンテンツ化
• カテゴリーメニューをシンプルに
• 記事下部のコンテンツ群を再編成
• サイドバーに「ランダム記事」を掲載
• ページネーション導入
• フッターにアーカイブとタグリストを表示

そんなこんなで前述の通り、見た目はあまり変わらないものの中身は完全フルスクラッチ、０からの作成となりました。

リニューアルポイントの詳細

アイキャッチをコンテンツ化

以前のアイキャッチは、いわゆる2chまとめサイト系に良く見るような「お気に入りサイトのRSSフィードタイトル表示」ってゆーコンテンツでした。

コレ自体は私自身も良く使ってたコンテンツなんですが、せっかくの絶好ポジションなので、今回のリニューアルを機にココをもっと活用したいなーと。

なので、リニューアルの意図でもある「増えてきた自作サービス群を目立つ場所に一覧させたい」ってのをココに持って来ようと。

ただスペースとしてはそんなに大きく無いし、数えてみたら自作サービスの数も結構あるし、かといってサービスのサムネイルや説明文だけってのも面白くないので、その辺の兼ね合いを考えた結果、「右部には各カテゴリ別のサービス一覧を配し、それをクリックすると左部にそのサービスの概要とサムネイルを表示 + 当該サービスの詳細記事へのリンクを張る」ってゆー、ほぼ独立したAjaxなコンテンツにしちゃいました。てへぺろ。

んで、このアイキャッチコンテンツ自体を開閉できるようにして、その状態や４つのアイキャッチコンテンツの選択状態をCookieで保存するようにしたので、邪魔に感じれば閉じておけるし、どれかのコンテンツを選んでいれば以後それがアイキャッチに表示されるようにしました。

さらにフリーランスのお仕事の窓口的なトコも考えて、今までちょっとおろそかだった自己紹介的なコンテンツも置いてみました。

twitterやfacebookのアカウントをはじめ、メアドやskype IDも掲載しましたので、何かお手伝い出来る事がありましたら、どぞお気軽にご一報下さい m(_ _)m

カテゴリーメニューをシンプルに

今まで最上部に配置していたメニューナビゲーションですが、やや古臭いデザインに感じていた上、「場所ソコじゃねーだろjk」と思っていたので、アイキャッチ下に移動させつつ、シンプルなテキストデザインに差し替えました。

マウスオーバーで子メニューが表示される仕組み、多分下衆の極みIE6～7ではちょっと変な表示になってるかと思いますが、今回は鬼畜の所業IE6～7は「見れればいい」対応なので、コレで良しとしてますので、あしからず。

記事下部のコンテンツ群を再編成

今までは結構おざなりにコメントや関連記事や広告などをばばーっと表示させてたんですが、今回は「もう少しサイト内の巡回性を良くしてページビューを増やしたい」って意図があるので、既存の「関連する記事」コンテンツの表示を最大３件から最大５件にした他、新たに「同じカテゴリーの記事」コンテンツを配しました。

サイドバーに「ランダム記事」を掲載

既存のサイドバーでは「Popular / Recent / TagCloud」という３つの記事紹介用タブナビゲーションがあったのですが、ここにタグクラウドを置いてもあまり効果的ではないように思えてたので、ランダムに記事を抽出する「random」コンテンツを新たに作成して、タグクラウドコンテンツと差し替えました。

ページネーション導入

以前は「前のページへ | 次のページへ」というナビゲーションだったのですが、見栄え的にもユーザビリティ的にもイマイチだと思ってたので、数字で表す形式に変えました。

フッターにアーカイブとタグリストを表示

今までここには「ソーシャルブックマーク系」「カテゴリーメニューナビゲーション」「自己紹介」を配していたのですが、それを大幅に変更。

アーカイブとタグリストをシンプルに配置し、ページ上部や記事内には無い導線を作った他、新たに「このブログについて」的なコンテンツを設け、ちょっとした自己紹介文と共に表記しました。