予算ないサイトにHabakiri使ったら想像を超えてて草すらも生えない件 #Habakiriアドベントカレンダー

こんにちは。miccです。
今日は、今年のWordCamp Kansaiで初めてお会いしましためちゃ好青年のモンキーレンチ北島さんの、超イケてるテーマ、Habakiriを案件で使ってみた感想をメインにお伝えしたいと思います。

この記事は、WordPressの公式テーマ「Habakiri」のアドベントカレンダー Habakiri Advent Calendar 2015 の参加記事です。

Habakiri?

私、Habakiri テーマを最初、Hibariki って読んでましたw

非馬力!

でもまさにそんな感じのテーマなんですよねぇ。
名前の由来は未だこれを書いてる時点で知りません。。。ごめん、今度こっそり教えて下さい。

こんな案件に良く効きます。

個人でサイト制作をしていると、時にお付き合いで安く請けた制作案件とか、イベントサイトなど短期間で省エネしたいサイト制作も人生一度はあったりしませんか?私はお人好しなので、イエスです。
しかし使える時間は限られています。削っていいことは削ってサイトを作りたい。
(新しいことをやる実験台にするとかして、モチベーション上げたいというのもありますけどね。)

例えばこんな感じで省力化を考えてみましょう。

高額でないサイトの工数圧縮

  • デザインをPSDで作って、それを何度もやり取りするのをやらない
  • スマホサイトも作って欲しいようなので、レスポンシブ、bootstrapを使う
  • WordPressでブログも書いてるので、(要件的に今回は)使うCMSを迷うのをやめる。いさぎよくWordPress
  • HTML書くのも時間かかるし、テーマを一から作るのは辞めて、子テーマにしよう
  • カスタマイザーでベースカラーを決めて、インブラウザデザインにしよう
  • プラグインなんかは、決め打ちでいいよね

まぁ、それでも予算が無ければ、JimdoやWixみたいなサービスのセットアップ代行でもいいと思うし、Tumblrにドメイン割当てでもそれなりにカッコイイサイトになるテンプレートがあるし、WordPress.comも同様。

制作会社にいれば、ほぼデザインをHTML化して案件用のWordPressテーマを作成する事になるし、俺のプラグイン集 みたいのを作っていても、仕様によってだいたいは変わってくる。

今回の話はそこまでゴリゴリではない。きれいなサイトを作ってあげたいが、その裏腹に工数をそう掛けたくはない。
頭を制作会社にいたときの「全部入り脳」から一度離してあげる必要がある。

そ・こ・で、「Habakiriテーマ」なんですってば、奥さん!

まず、北島さん凄いわ、北島さんかっけーーーー、これを10回位言いたくなります。
無駄にモンキーレンチのプラグインを買ってお布施をしたくなります。
使用前に、南の方角に向って、感謝の気持ちを叫びましょう。

こんな感じでインブラウザデザイン

さて、気を取り直して、Habakiriの子テーマを作ります。
そして、コピーライトを書き換えるPHPダンジョンを頑張りましょう。
頑張りたくない人はプラグインを買ってあげましょう。
私はチュートリアルを見ながら頑張りましたが、
コピーライトプラグインにお布施することで、テーマの応援にもなります。
北島さんのテーマプラグインをがしがし買って、応援してあげましょう。大事なことなので太字にして書きます。

あとは子テーマのCSSに、font-familyとかいい感じに書いてあげましょう。
公式にも記載ありますので、人通り公式を読んでから触ると良いです。

Habakiriのテーマカスタマイザーでいい感じに色合せをします。
ロゴなんかもアップして、メニューやウィジェットも調整しましょう。
そしてテキストコンテンツを流し入れます。

ここまで来たら、私はこうしてます。

Macの「PAGELAYER」という素敵なAppでキャプチャを取って、PSDレイヤーにします。

Photoshopでページ見出しや区切り線、挿入する写真やイラストなどをごにょごにょっとして、パーツを書き出します。(そいえば、Photoshop CCの右クリック ->PNGでクイック書き出し は超便利になりましたね。)

CSSで軽く変えられる部分、例えば見出しエリアの高さやリストなどもPSDでいい感じに調整して、それをCSSで適用してみましょう。

グラフィカルな装飾部分と、ブラウザデザインして部分を上手く馴染ませるのにこの方法を取るといい塩梅なことに気づきました。「PAGELAYER」は、目から鱗Appなので、オススメです。

固定ページは全てサイドバーなしのテンプレートにしています。
ブログページに入った時だけ、サイドバーありを選択して、バナーやブログアーカイブを表示するようにしてみます。
フッターエリアを手厚くしてあげましょう。
TOPページは、下層ページのような全幅テンプレートも選べますが、bootstrap的にHTMLを書いてあげましょう。

あと、プラグインで悩むのを辞めるということ。
北島ファミリーで決め打ちにしましょう。
そして、モンキーレンチ△ーーーー!!を復唱しましょう。
悩むのをやめれば幸せになれます。シンプルに生きましょう。
(まぁ、それに至るまでに色んなプラグインを触って試した部分もあるのですけどね。てへぺろ)

あとは、キャッシュ系は、勝手知ったるWPsitemanagerを使っています。
セキュリティには、SiteGuardを入れてます。
あとは、SNSボタンは別にプラグインとか要らないのですが、
プラグインをもし買ったとしたら、それはお布施という事です。
繰り返し言いますが、北島さんのテーマプラグインをがしがし買って、応援してあげましょう。

という感じで、Habakiri子テーマでブラウザデザインすれば、超早でWordPressサイトが出来ます。
あとデザインが出来ない人は、北島さんのカスタマイズテーマをがしがし買って、応援してあげましょう。

北島さんのHabakiriはGPLで公式ディレクトリで公開されています。素晴らしく良心的ですね。

既存のテンプレートデザインでもOKですか? という最初に調整するもしないも貴方次第、上手に公式テーマに付き合いましょう。
私は安価な案件前提で書いちゃいましたが、別に高額な案件で使っちゃダメなんて一言も言ってないですよ!
もちろんデザイン等、煮詰める事は増えるでしょうが、ベースメントとして使うのに、Habakiri、いーんじゃないですかっ!?(川平J風に)普通に、Bootstrap、案件で使いますよねっ!いーんですっ!

こんなの作って欲しいです

あと、個人的には、固定ページのアイキャッチ画像を設定したら、見出しの背景が変わる奴を付けて貰えると嬉しいかなぁと思いました。結構、あれを個別にしたいのが多いので。

有料テーマも応援しているので、飲食系、士業系あたりのド定番を是非ドーンと出してください。もうサイト作っちゃったのでアレですが。。。出た暁には、応援はしますんで!

ちょっとここから余談。

デザイナーさん等のポートフォリオで、結構(GPLでない)有料テーマを使ってる例、そこそこ見かけたりします。

恐らくそれらは、WebやWordPressを主業としていないグラフィック系の方なのでしょう。
名前を出すとはばかられますが、某なんとかPressなど、ライセンス的にGPL無視で残念なんですよね。当然そういった団体はWordCampにはスポンサーとして参加してきてくれませんし、参加もできません。

しかし、それらのテーマ類が実際に使われている理由として考えられるとすれば、公式にあるテーマに、思い描くレイアウトのテーマが無かったから、という事かなと思います。若しくは公式探してもいないかも。。。
沢山良質なテーマはありますが、海外製のものは翻訳が必要になったり、font周りの工夫や、デザインが日本では受け入れられるかな?とか、装飾を必要としていない、という面で、もっと癖の無いプレーンなテーマが欲しかったんだと思います。

そういう需要にようやく時代に追いついた感がするのが、このHabakiriテーマでした。彼のテーマはGPLで配られていて、プラグイン類もGPLで販売されており、正面からクリーンで戦いに挑んでいると思います。
こういう事業者さんの取り組みを応援したいと思うので、このアドベントカレンダーが盛り上がってほしいなと思いました。

そしてがしがしダウンロードして、Habakiriを盛り上げていきたいですね!

あ、ベクトルさんのLightningテーマもナイスですよ!

===

バトン途切れちゃってゴメンナサイ。なんとかクリスマスの前に書けた。(写真入ってなくてごめんね。。。)

翌日はHiromi Kitakadoさんです。私が書かなくても良いくらいの、素晴らしい紹介になっていると思います。良記事なので是非ご覧ください。

12/24、トリを飾るのは勿論、我らがキタジマタカシさんですよ!こちらもお楽しみに!