WordPress テーマ自作への道のり vol.1—構想編

photo credit: thisismyurl via photopin cc
photo credit: thisismyurl via photopin cc

しばらく中断していたブログのオリジナルテーマ作りを最近になって再開し、白紙の状態からやり直しています。完成まで長い道のりになりそうなので、切りのいいところで1回1回、作業内容を記事にまとめていこうと思います。1回目はコーディングに入る前にまず考えておきたい、本来の意味でのブログの「テーマ」についての話です。

WordPress テーマ自作への道のり

今回の目次

  1. 制作前に意識したい3つのこと
  2. ユーザビリティ
  3. ターゲット
  4. ゴール
  5. 対応ブラウザやスマートフォン向けの制作ポリシー
  6. 無料のオンラインツールでワイヤーフレームを制作
  7. これから

制作前に意識したい3つのこと

テーマ自作のために参考にしている書籍はいくつかあるのですが、その中でも Web デザイナーの高橋のりさんの著書現場のワークフローで覚える Webサイト制作教室はすごくためになります。本の中で最初に強調されているのが次の項目です。

Web デザイナーの仕事は「Web サイトの見栄えを良くすること」だけではありません。誰に、どのような目的で、いかにわかりやすく情報を伝えるか、という点を明確に意識することが大切です。

具体的にはユーザビリティ(使いやすさ)、ターゲット(見てもらいたい相手)、ゴール(サイトを公開する目的)の3つを明らかにしましょう、ということです。

これらはビジネスとしての Web サイト制作だけでなく、個人のブログにも十分に当てはまることだと感じたので、自分でも最初にそこをよく考えてみることにしました。ブログの本来のテーマ、つまりコンセプトですね。

ユーザビリティ

ユーザビリティについては、自分としても「読みやすさ、分かりやすさ、使いやすさ」を重視したいです。シンプルな構成で、軽いサイトにしたいと考えています。

自分自身はどんなデザインのブログを読みたいのかー。そんな視点で胸に手を当ててみると、「背景色と文字色の組み合わせは、目が疲れないよう適度なコントラストにしたい」「余白を十分に取ろう」「スマートフォンからアクセスした時でも検索フォームはページのトップ付近に」といった具合に、実現したいこと、今のテーマで足りないこと、が見えてきます。

ターゲット

ブログを読んでほしい相手は主に同年代(20–40代)で、Apple 製品や WordPress に興味がある人、子育て中の人、シンプル思考やライフハック系の話題に関心のある人、となりました。

これを踏まえて、記事のカテゴリーをターゲットに合った形になるよう見直してみようと考えています。

ゴール

このブログのゴールは、読んでくださった人に知識でも考え方でも、ちょっとした感情でもいいので「何か1つでも持ち帰ってもらえるブログ」、「何かのきっかけになれるブログ」です。信頼してもらえる情報を提供すること、ブログを通じて交流を図ることもゴールに入ります。

対応ブラウザやスマートフォン向けの制作ポリシー

現場のワークフローで覚える Webサイト制作教室では、サイトのコンセプトを検討した後は制作ポリシーを決めていくことになります。

そこで大切になるのが、どのブラウザまでをターゲットにするか、ということ。それによって使える技術が変わってくるからです。考え方としては、「クロスブラウザ」と「プログレッシブ・エンハンスメント」の2つに分かれるそうです。

クロスブラウザとは、どのブラウザでも同じように表示(CSS)され、同じように動く(JavaScript)こと。IE の旧バージョンでも、同じ表示になるようにコーディングし、同じ動作になるようにプログラミングすることを求められます。

プログレッシブ・エンハンスメントでは、まずすべてのユーザーに対して基本的なコンテンツ、情報を閲覧できるように Web サイトを制作します。もちろん IE8 も含めたすべてのブラウザが対象です。その上で、モダンブラウザを利用しているユーザーに対してはよりリッチな体験をしてもらおうという考え方です。

自分自身は CSS3 をいろいろ試してみたい気持ちがあるので、後者の考え方のほうがしっくりきます。

スマートフォン対応にはレスポンシブ・ウェブデザインを使い、コンテンツ自体は PC と同じものを表示させようと思っています。

無料のオンラインツールでワイヤーフレームを制作

あとはコーディングに入る前に、ブログのサイトマップ(カテゴリーをはじめとした全体の構成)をどうしようか、どんな導線があればユーザにとって親切だろうか、といったことをあれこれ考え、ワイヤーフレーム(設計図のようなもの)を作ります。

特別なソフトを持っていなくても、オンラインで無料で使えるツールがいくつかあります。

参考記事:

私は参考記事の中で紹介されていた iPlotz: wireframing, mockups and prototyping for websites and applications を使って、こんな風に作ってみました。

ブログのトップページと記事ページ、PC とスマートフォンといった具合に、内容を分けていくつかページを作っておくと後のコーディングがやりやすくなると思います。iPlotz は無料アカウントでも5ページ分のワイヤーフレームを作れます。ただ、最初に言語設定を日本語から英語に変えないと新規ページの作成がうまくできなかったので、使う人は行き詰まったら言語設定を見てみてください。

これから

今後は実際にコーディングをする作業に入っていきます。順番としては最初に HTML と CSS でページを作ってから、それを WordPress のテーマファイル用に書き直していきます。・・・何とも気が遠くなる作業です。

作業が進捗したらその都度記事にまとめていきますので、気長にお待ちいただければと思います。

現場のワークフローで覚える Webサイト制作教室
高橋のり
エムディエヌコーポレーション
売り上げランキング: 226,015

One thought on “WordPress テーマ自作への道のり vol.1—構想編

  1. Pingback: 【WordPress】テーマ制作日誌 第0回 事前準備 | futapapa

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です