column

Tokyo Q Studio Web Site リニューアル 2014/11/01

CATEGORY Bootstrap HTML5 jQuery TQS宣伝広告 UI WordPress デザイン レスポンシブル TAG,

投稿日:2014年11月1日 更新日:

執筆者:

Tokyo Q Studio Web Siteが新たにリニューアル致しました。

今回のリニューアルは今までのWeb制作での経験を出来るだけ詰め込みました。

 

スマホ・タブレットに完全対応!BootStrap化したWordPressテーマ

まずPC表示は当然の事、タブレット・スマホにも完全に対応した形を取っています。

その際マストアイテムとしてBootStrap化を施し、制作スピードと自由なレイアウトを実現しました。

 

PC表示

スクリーンショット 2014-11-01 0.20.10

タブレット表示(縦)

スクリーンショット 2014-11-01 1.22.23

スマホ表示(縦)

スクリーンショット 2014-11-01 1.21.48

 

BootStrapもカスタマイズ。12カラムを24カラムに変更すると幅が広がる!

BootStrapも少々改良しておりメニューのクリックダウンメニューをホバーダウンに変更したり、12カラム設定を24カラムに変更し細かなレイアウトの対応も可能です。

 

スクリーンショット 2014-11-01 1.06.11

 

 

実際ここ数ヶ月で大規模なサイト制作を約10本こなせるほどになっています。

 

WordPressのカスタマイズは出来るだけPlugInを使わない方向が良いのかも!

WordPressのカスタマイズは以前使っていた無料テーマのStingerを参考にし、SEOに強い構造を組み込みました。

(Stinger制作者さんありがとう!本当に良いテーマです!)

そして必要最小限のplug-inだけを使い、出来るだけ軽くするためにfunction.phpに組み込みました。

jQueryもWordPress標準のものを排除し、比較的新しい「jQuery2.0.3」に載せ替えています。

これはレガシーブラウザの対応を辞め、軽量化したjQueryとなっています。

その為IE対応ブラウザは9から上位と言う事となりますが、html5で制作しているためこれ以下は対応する事はないかなと・・・。

(賛否両論はあるかと思われますが、動き無しでは一応IE7ぐらいまでは何とか見えているかなと・・・)

 

JavaScriptもfunction.phpで管理し、全てをfooterで読み込ませるようにしました。

簡単ではありますが、jQueryも書き込みちょっとした動きの部分を表現させています。

 

やっぱりParallaxはマストだねぇ。YouTubeもLightBoxぐらいしないとね!

トップではParallaxで奥行きを出し、CSS3での動きのあるコンテンツ、そしてYouTubeLightBoxを実装しました。

YouTube広告用動画を使った戦略は1年程前から始まっているのも見逃せないと言う事もあり、コンテンツに実装することで同時に動画広告にも対応出来、幅を持たせられるサイト構築をアピールしたいとの思いがありました。

こういった動きのあるサイトを企業サイトでも採用されている現状にキッチリと対応出来るサイトに致しました。

 

スクリーンショット 2014-11-01 1.27.38

 

 

メニューはメガ化がマスト!BootStrapがあると何でもできる!

メニューではBootStrapを使用しメガメニューにも対応出来るようにしています。

現在はCSS3で装飾しているだけですが、画像や動画を表示することも可能です。

ナビにはカテゴリーを表示させその記事数も同時に表示させています。

これは後にも紹介致しますが某サイトで勉強させて頂いたWPのショートコードをカスタムし、BootStrap化させることでドロップダウンメニューをメガメニューする事が出来ました。

当サイトではカテゴリーがまとめきれていないため(笑)、ものすごく沢山ございます。

その為ドロップダウンメニューをスクロールし、全てを選択出来るようにしています。

これもメガメニューの将来的設計のために実装したものです。

 

スマホメニューは全画面が先進? 良いものはいい!Footerにボタンが流行るかも!

プラス、スマホ対策として画面全体メニューを実装しました。

スクリーンショット 2014-11-01 0.56.47

footer側に広めのボタンを置き、スマホを手に持っていても素早くアクセスすることを目指しました。

ただ、現状残念なのがfooter側をタップするとブラウザのメニュー等が浮いて出てくるため、2度タップしなければいけないと言う事です。

これは改善の余地があるとは思いますが、実際他のサイトでもfooter側にメニューボタンを実装するところが増えています。

なのでこれはこれで間違いではないと思っています。

 

も一つ!スマホメニューはアコーディオンしないと大変だよ。

そして、スマホ用ナビはアコーディオン化しており、よくあるfooterのサイトマップ的な役目も果たせます。

数が多いメニュー量にもスクロールで対応出来るためスマホでも全てのコンテンツにアクセス可能です。

プラスCSS3+JavaScriptで動きのある表示方法となっているため、スマホでも楽しいサイト表現が可能になっています。

 

 

まだまだいっぱいあるので最後に告知!

ここまででもかなりの分量を記述しましたが、まだまだ細かなところが紹介し切れていませんので、Blogコンテンツとして今回の製作過程と実装方法を紹介していきたいと思います。

 

まだまだ完成系ではありませんが、トップとBlog部分はかなり良い状態に持って行けたと思っています。

このテーマをブラッシュアップしECサイトや企業サイトにも転換して行けたらと思っています。

そして、もっと使いやすくしたところで無料テーマなんかも考えています。

管理画面がもっとカスタマイズ出来る様になれば公開したいと思っています。

 

 

それでは見やすくなったTokyo Q Studio Web Siteをお楽しみ下さい。

(今はコンテンツが工事中なのでもう少々お待ち願えれば幸いです!)


コメントを残す

関連記事

PREV

5分で、自分のブログやサイトにSNS機能を実装できる「Spot.IM」

NEXT

WordPressカスタマイズ その1 | WordPressをBootStrap化する為の注意点 〜初期設定編〜

Tokyo Q Studio Web Site リニューアル 2014/11/01

side bar

メニューはこちら

メニューはこちら