WordPressサイトをデザインする時に気をつけていること

この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起こしたものです。

当日はたくさんの方にお越しいただきありがとうございました。
会場に入れなかった方もいらっしゃったそうですみません。
この記事で、少しでも内容を共有できればと思います。

このセッションでは、オリジナリティのあるWordPressサイトのテーマをデザインする際に私が気をつけていることについてお話させて頂きます。

このセッションでお伝えしたいことは「4つ」あります。
いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。

このセッションで伝えたいこと

このセッションでお伝えしたいことは「4つ」あります。
いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。

まず「何が必要ないか」から考える

色々な方のブログを見る限り、WordPressテーマを作る際は標準テーマや既存のWordPressテーマを参考にされる方が多いかと思います。
しかし、それでは不必要な多くの要素を含むことになり、必ずしもそのブログの雰囲気や内容にマッチしているとは限りません。

Webサイトにおけるユーザビリティ研究の第一人者である Jakob Nielsen 氏の言葉に「その先に何があるのか分からないようなボタンを押して喜ぶほど、ユーザは暇ではない。」とあります。
リンク先にどんな記事があるか分からないと、ユーザーをためらわせたりしてしまうかもしれません。

例えば、ブログによくあるアーカイブはリンク先の内容が予測できないですよね。


カテゴリーは、アーカイブに比べるとSEO的には意味がありますが、果たしてユーザビリティ的に良いものでしょうか。
本文と同じくらいの小さなフォントサイズで縦にリスト表示されているとクリックしづらいかもしれませんし、そもそもユーザーは見てくれないかもしれません。
思いつくままにカテゴリを増やしていくとブログのテーマが不明確になり、SEO的にも不利になるかもしれません。テーマごとにブログを分けたほうがいいかもしれません。

これは私が趣味でやっているブログの場合です。
左はWebデザインやWeb技術について書いている「Stocker.jp / diary」で、右は「イタリア旅行記 :: Caffè Laguna」といいます。

私のブログの場合、スタートしてから半年くらいは、自作テーマではなく既存のテーマを少しだけいじって使用していました。
その理由としては、

カテゴリやタグは、一般的にリスト形式で縦に並べてサイドバーなどに表示することが多いですが、私はそのように単純にリストで並べることはしたくないと思っていました。

私がWordPressテーマを考える時の手順

私が自分のブログのテーマを考えるときは、標準のテーマや既存のテーマのことは忘れて、常に 0 から考えるようにしています。

0 からというのは「すべての要素が必要なのか、またこの位置でいいのか」というレベルから考えるということなので、「そもそもブログにヘッダは必要なのか」とか「サイドバーは必要なのか」ということまで考えます。

“3. 素材を用意し、Photoshop である程度作ってみる” とありますが、この時点でかなり完成形に近いイメージで作っています。

イタリア旅行記ブログの場合この手順通りでしたが、Stocker.jp / diary の場合、「トップページを欧風の新聞や雑誌のような雰囲気にしたい」と思っていても、雑誌や新聞のような文字組みにしたり、綺麗にテキストを文字詰めするための方法が思いつかず、長い間手付かずになっていました。


問題を解決した2つの JavaScript

そんなある日、2つの JavaScript を見つけたことでようやくトップページのデザインが固まりました。
1つ目は「jQuery Masonry」。
たくさんの要素を、雑誌や英字新聞のようにタイル状に並べる JavaScript です。

jQuery Masonryを適用すると、ブログの記事をこのように雑誌や新聞のように並べることができます。

2つ目は、iPhone アプリや ポーズマニアックス などで有名な @fladdict さん作の FLAutoKerning です。
日本語の文字間や、句読点の後などを美しく詰めることができます。
どの文字とどの文字の間をどれくらい詰めるかは定義ファイルがあるのですが、標準では組み合わせがそれほど多くなかったため、このブログでよく使う文字の組み合わせや見出しで使用している文字の組み合わせなどを追加して、Stocker.jp / diary 用に文字詰めが美しく見えるよう調整しました。

FLAutoKerningの定義ファイルは、このように文字の組み合わせごとにどれだけ間隔を詰めるかを定義しています。
私のブログでよく使われる文字の組み合わせを、このように追加しています。

※実際に使用しているカーニング定義ファイルはこちらです。
　文字化けする場合は、ブラウザのメニューの文字コードをUTF-8に変更してご覧ください。

JavaScript OFF と ON の画面キャプチャを見比べると、カッコの前後の余白が少なくなっていることが分かると思います。
カッコは、独自のjQueryスクリプトで太字を解除しています。

※ちなみに、このブログでは FLAutoKerning は Mac の場合のみ適用されるようにしています。
　Windows では、 MS Pゴシックは元々文字同士がくっついていたり、メイリオが使えるのは Vista 以降のみだったりして、現状美しくテキストを文字詰めするのは難しいです。

トップページに表示する記事の概要や本文などは、より美しく見えるようCSSで両端揃えに指定しています。

以前は、ほとんどのブラウザでは日本語の両端揃えがうまくできなかったのですが、このテーマを制作した頃とほぼ同時期に Firefox や Chrome で日本語の両端揃えができるようになり、IE では元々日本語両端揃えができるため、主要なブラウザのほぼ全てで日本語両端揃えが使えるようになりました。
もちろん、禁則処理（行頭に句読点などが来ないように調整すること）もCSSで指定しています。

私の場合、グローバルナビにはそのブログの主なカテゴリページへのリンクを並べます。
この時、無理に全てのカテゴリへのリンクを並べることはしません。

例えばこのブログの場合、Webデザイン・Web技術などの記事の他に、新サービスのプレスリリース等も掲載していますが、プレスリリースを読むためにこのブログを見に来ているユーザーは少ないと思われますので、そういったカテゴリへのリンクはグローバルナビには載せません。
グローバルナビに載せるカテゴリは4〜5つ程度に絞ります。

ブログの目的を明確に

Stocker.jp / diary のテーマの目的の1つは、単に美しいテーマを作るというだけでなく「フリーランスの仕事を受注する」ことでした。

私は何のコネも取引先候補も無くフリーランスになったのでブログからの問い合わせを増やすことが重要と考え、そのためには「ポートフォリオとブログを一体化すること」と「お問い合せフォームの表示方法」が重要であると仮定しました。

そのため Stocker.jp ドメインのトップページをポートフォリオにして /diary はポートフォリオの一部であるように見せるとともに、お問い合せフォームの効果的な見せ方について考えました。

※このページの1番下までスクロールすると、実際のお問い合せフォームの挙動が見れます。

真っ先に思いついた方法が JavaScript を使ってアニメーションさせる方法でしたが、もっとさり気なく見せる方法はないかと考え、せっかくページを1枚の新聞のように見せているのだから「新聞を読み終わって、机から持ち上げたら机に問い合わせ先が書いてあった」というイメージにしようと思いました。

最初、CSS3 や JavaScript を使う必要があるかな…と考えていたのですが、意外と CSS で z-index と position:fixed プロパティを使うだけであっさり解決できました。

結果的に、リニューアル前は全くブログ経由でお仕事が来ることはなかったのですが、リニューアル後はたくさんのお仕事が来るようになり、ブログのテーマを変えることにより予想以上の成果が上がっています。

このセッションで伝えたかったこと

ここまでのおさらいです。

会場でお話しした「One more thing…」部分については、新しいWebサービスを公開した際により詳しい記事として公開させていただきたいと思います。

他の講演者の方の資料

会場では同時に5講演くらい開かれていたため、残念ながらすべての講演を聴くことはできませんでしたが、資料をブログ等にアップされている方もいらっしゃいますので紹介させて頂きます。

ただ、また全ての資料を見つけられていません…見つけ次第追加していきます。
ここに書かれていない資料をご存じの方は @Stocker_jp まで教えていただけると幸いです。

WordCamp Kobe 2011: WordPress 最新事情

開会式でのマクラケン直子さんのセッションです。
WordPressは世界中でこんなに普及しているのか…(ﾟＡﾟ;)ｺﾞｸﾘ

できるWordPressサイト大解剖

WordPressの仕様にとても詳しいプライムストラテジーの大曲さんの資料です。

概要: WordPressの良さをめいっぱい引き出したサイトを題材に、サーバ構成・スペック、プラグイン、カスタマイズ方法、留意しなければならない点などを赤裸々に大公開。
単に作るだけではない、一歩先のWordPressをご紹介します。

信頼できるプラグインを作成運用するコツ

WordBench神戸のリーダー、堀家隆宏さんの資料です。

具体的な制作事例から見るWordPressの構築・運用例

ピクトロン・ウェブプランニングの杉山　敦さんの資料です。

WordPress × スマートフォンサイト

瀬口理恵さんによるWordPressのスマートフォン対応の話。
スマートフォン対応案件はこれからますます増えそうですね。
プレゼンの背景が布っぽくてとてもかわいいですね。

ハイパフォーマンス WordPress サイト入門

をかもと さんによる WordPress のパフォーマンスを上げるための方法。
入門とついていますが（私にとっては）かなり高度な内容でした。
プレゼン資料は HTML5 でできており、キーボードの → キーで次のスライドに進めます。
メモを取りきれなかったので、これを見て勉強させて頂きます！

他のCMSと比較したWordPressのメリット/デメリット

上村崇さんによる、WordPressと他のCMS（MovableType、Drupal、Joomla!、XOOPS Cube等）との比較です。

光速テーマ開発のコツ

WordCamp KOBE の実行委員であり、今回私にお声がけ頂いた菱川拓郎さんによる、WordPressテーマを素早く開発するための資料です。

初めてのWordPress!オリジナルのテーマでブログを作る方法

Parkn’Parkさんによる、はじめて WordPress テーマを作る方向けのやさしいスライドです。

セキュアな WordCamp サイトの作り方（LT）

Ktai Style という有名なWordPress携帯対応プラグインの作者である ゆりこさんの資料です。

WordPressの管理画面を徹底カスタマイズ！！（LT）

西川伸一さんによる、WordPressの管理画面をアメブロのようにPC初心者にも分かりやすくカスタマイズするための資料です。

WordBench鹿児島（LT）

西村州平さんによるWordBench鹿児島の話。個人的には大胆な文字組みの大胆さやアナログなテクスチャが面白いと思いました。

その他の方の資料も、順次 WordCamp KOBE の Facebook ページにアップされています！