25 Shares

ブログテーマ制作に役立つ無料サービス「QuirkTools」の使い方

mac

WordPress でブログをはじめて、そろそろ「テーマを作りたい!」という思いが出てきた頃かもしれません。

もし、既存のテーマをばりばりカスタマイズして使っているなら、テーマを自作することはそれほど難しいことではありません。むしろ自作するメリットのほうが多いでしょう。

本日は、テーマ作成に役立つ「QuirkTools」というツールをご紹介します。本格的なものではありませんが、ちょっとしたデザインメモぐらいならこれだけで十分です!

テーマカスタマイズから次のステップへ

僕もこのブログを始めた当初は「Stinger3」というテーマを使用していました。

現在も愛用されているブロガーさんはたくさんいますし、後継の「Stinger5」を利用している方も増えています。Stinger がきっかけで WordPress に移行した方も多いはず。

STINGER5

ほかにも素晴らしいテーマはたくさんあります。

HTML も CSS も PHP もよくわからない! というのであれば、無料でありながらサポートもアップデートも充実している「Simplicity」がおすすめです。

Simplicity

初心者向けの機能はいらん! ごりごりいじってカスタマイズしたい! というなら、「Gush2」をおすすめしますw

WordPress Theme Gush2

でも、既存のテーマを利用するとこんなデメリットも。

  • 配色を変えたぐらいではオリジナリティが出ない
  • コードにクセがあってカスタマイズしづらい
  • うまく動作しないプラグインがある

逆に考えると、自作テーマにはこんなメリットがあるわけです。

  • 世界でたったひとつのオリジナルデザイン
  • 自分の思うとおりに作り上げられる
  • ほしい機能はどんどん追加できる

もちろんそれなりの知識は必要ですが、WordPress に関する技術的な問題は検索するだけでほぼ解決します。どうしてもわからない場合は、フォーラムもありますし。

冒頭で述べたとおり、すでに原型をとどめぬほどカスタマイズをしているなら、自作したほうが得られるメリットは多くなります。

記事を書くだけがブログのおもしろさじゃないですからね。

QuirkTools で使える4つの便利機能

QuirkTools

テーマ作成に役立つのが、QuirkTools という WEB サービス。現在 4 つのツールが使えます。

  • Wires(ワイヤーフレーム作成)
  • Smaps(サイトマップ作成)
  • Screenfly(レスポンシブ WEB デザイン確認)
  • Retro(自分のブラウザ環境確認)

では、順番に見ていきましょう。

アカウント作成

「Wires」と「Smaps」はアカウント登録後、使用可能になります。

上部メニューバーの「Sign in」からアカウントを作成。

QuirkTools アカウント作成

ニュースレターは登録しなくても OK です。

ワイヤーフレームが作れる Wires

ログインしたら、「Wires」でワイヤーフレームを作ってみましょう。

ワイヤーフレーム
Web ページの大まかなコンテンツやレイアウトを示した構成図のこと。

まず「New Project」から新規ワイヤーフレームを作成します。無料版は 3 つまで作成可能なので、スマホ・タブレット・PC 用で作成すると良いかも。

QuirkTools Wires 新規作成

適当なプロジェクト名を決めて、公開 or 非公開を選択します。「公開」に設定すると、複数メンバーで共有できるようです。

すでにコンテンツ全体の幅が決まっている場合は、あらかじめ横幅を指定しておくことができます。

ここら辺は、あとからでも変更可能。

QuirkTools ワイヤーフレーム作成

こんな感じで設定してみました。

QuirkTools Naifixサンプル

プロジェクト画面に移ると、方眼紙のようなものが出てきます。

QuirkTools Wires プロジェクト画面

左上の十字ボタンを押すとウィジェットパーツが出てくるので、あとは自由に配置していくだけです。

Naifix も裏でテーマ改変中なので、こんな感じでイメージを作成しております。

Naifix ワイヤーフレーム

各ウィジェットの幅や高さも表示されるので、完成後はこれをもとに組み上げていくだけですね。

ちなみに、1 つのプロジェクトでホーム画面のほか、投稿ページなども作成できます。

サイトマップが作れる Smaps

「Smaps」では、デザインではなくブログの構造(サイトマップ)を作れます。

QuirkTools Smaps 作成画面

ブログの場合はカテゴリーから投稿記事という流れがあるだけで、さほど複雑な構成にはなりません。

ただ、会社の WEB サイトにブログを組み込むような場合や、親子カテゴリーの見直しを行う場合は重宝すると思います。

端末ごとの表示が確認できる Screenfly

「Screenfly」はアカウント不要で利用できます。

レスポンシブ WEB デザインを採用しているなら、わざわざブラウザの幅を変えなくても各デバイスごとの表示を確認することができるので便利。

PC表示サンプル

PC表示サンプル

タブレット表示サンプル

タブレット表示サンプル

ただし、幅と高さを変更するだけで User Agent はそのままです。そのため、WordPress のスマホ用分岐コードなどは正確に反映されません。

きっちり確認したいのであれば、Chrome のデベロッパーツールを使いましょう。

自分の環境を確認できる Retro

「Retro」では、現在閲覧している自分の環境をチェックすることができます。

QuirkTools Retro

「My viewport」の数値が、ブラウザの幅です。

メジャーなアクセス解析ではモニターのサイズを取得することができますが、実際に必要なのは読者のブラウザ幅。みんなフルサイズで閲覧しているわけじゃありませんからね。

以前調べたときは 1200 px 前後が最も多かったのですが、主流モニターの解像度が変わればブラウザのサイズも変わります。

まとめ

実際にテーマを作るとなると尻込みしてしまうかもしれませんが、作る楽しさを味わうとやみつきになるかも!?

ブログのメインは記事を書くことですが、そろそろ次のステップへ移行する時期かもしれません。

デザインを含めて自分の魅力を演出してみましょー。

それでは、また。