[寄稿] 新米Webディレクターが最初におさえたいSEOのこと

セカイラボの岸と申します。この春で自社Webサービス「セカイラボ」のWebディレクターになってから1年になります。業務ではアクセス解析、サービス改善、SEO、開発マネジメント、コンテンツ作成、プロダクト戦略を担当しています。 今回は自社WebサービスやWebサイトを担当する新米Webディレクター向けに、私のSEO経験をもとにWebディレクターとして最初におさえたいSEOのことを紹介します。

SEOを知らないディレクターがビジネスをダメにする/Webディレクターズマニュアル中村健太氏インタビュー

唐突に始まった企画の対談モノですが反響次第では継続していくかもしれません。

ということで企画の第一弾として、Webディレクターズマニュアルの運営をはじめ、若手(?)Webディレクターとして幅広い活動をされていらっしゃる中村健太氏に、「WebディレクションとSEO」をテーマにお話頂きました。

自身の集客経験から、SEOの重要性を知る

土居:今日は「WebディレクションとSEO」というテーマでお話できればと思います。改めまして中村さん、本日はよろしくお願いします。

中村:はい、よろしくお願いします。

土居:さて、中村さんはWebディレクターの中でもかなりSEOにも精通しているイメージがあります。SEOは独学ですか?

中村:昔は個人でWebサイト作ってアフィリエイトをやっていた時期が何年間かありまして、その時にかなりSEOは勉強していました。今では通用しないような手法も結構やっていましたれどね(苦笑

やっぱりWebで集客しようとか考えていくと、何だかんだでSEOは絶対欠けてはいけないものなんですよね。ですから今でもサイトを作る時にはSEOどうしようっていうのは必ず考えていますし。

幸い、SEOに詳しい専門家の方も周りには多いですので、なるべく時代遅れにならないようにキャッチアップはするようにしています。

土居:なるほど、自分で実践していた時期があったんですね。納得です。

SEOはディレクターの必須スキル!でも知らない人が多すぎる

暗がりの中で肘を付き会話を進める中村市

中村:でも逆に言えば、SEOを知らないディレクター、SEOに興味すら持っていないディレクターが多すぎる、とも思っています。だってWebディレクターがSEOある程度知ってるとか普通のことだって思いますよ。

サイトを作る上で、検索からどうやって集客するのか?とか、どうやったらサイトが検索エンジンに評価されるのか、とか、全く知らないとか考えられないとかでサイト作っちゃったら、クライアントのビジネスをダメにしちゃうじゃないですか。

ディレクションって、突き詰めれば”Webビジネスをデザインすること”ですから。

だから、知ってて普通というか、ディレクターなら必須スキルだと思うんです。デザインとかHTMLとかCSSを知ってて当たり前なのと同じくらい。

土居:確かに、欲を言えば、皆さんもうちょっと最初から考えていただければなー、と思うことはありますね。あとは中途半端な知識で大胆なことをやってしまって取り返しつかなくなったりとか、、

ただ、個人的にはWebディレクターをやりながら、SEOの技術的な領域まで全てカバーするっていうのは至難の業だとは思うんですよね。というか誰にでも出来てしまうのであればもう僕いらないですし。

中村:それはそうですよね。ただ、「ここは詳しい人に相談しておいた方が良いな」とか、例えばそういうことが考えられるだけでも全然違うと思うんです。一番だめなのは、「SEOとか分からないしこれでいっか」みたいなのとか、そもそも最初から何も考えていないとか。

まずは、SEOが必要なのかどうなのか?どこに気をつけなければいけないのか?そういうことにちゃんと考えが及ぶこと。最初はそれが大事だと思います。

SEOとWeb制作と表裏一体

中村:逆に、土居さんから見てWebディレクターに対して何か文句言いたいことありますか?

土居:文句ってわけじゃないですけど、とりあえず、「サイト作って、そのあとSEOしましょう」みたいのをWebディレクターさんが普通に言わないで、とは思いますね(汗)

中村:あー、分かります。Webの制作とSEOを完全に別物だと思ってる、っていうことですよね?でもそこでいう”SEO”って、「昔のSEO会社が作った商品の名前」みたいな感じですよね。

土居:なるほど、まさしくそういうことですよね。そして僕も最初そうでしたし、今でも多くの人たちの中でのSEOって「SEOという名前の商品」なんですよね。

中村:Webサイトを作るときには、必ず最初に「情報設計」っていうのをきちんと考えるんです。どういうコンテンツを用意してそれぞれどう配置するか、とかそれぞれの事柄をどう表現するか、とかも全部含めて。サイトを設計する上で、SEOにも大きく関わる部分ですよね。

土居:まさしく。例えばSEOではサイトを作る前に”キーワードマッピング”みたいな作業をするんですけど、簡単に言えばこういう検索する人がこういうところに辿りつけるように、みたいな全体像ですね。それが、設計段階でのSEOでの肝のひとつになります。

コンテンツ増やすとかリンク増やすだけがSEOではないんですよね。

SEOはまだまだ世間的にはイメージ良くないと思う

若手ディレクターのエース中村氏と、顔よし頭よし性格よしと三拍子そろったイケメンSEOスペシャリスト土居が向い合って対談している風景

中村:僕個人としても、SEO会社さんとかに対してそこまで良いイメージは持っていない、というかぶっちゃけ今でも世間的にはまだまだイメージ悪いって思いますよね(苦笑)。僕もこれまで色んなSEO会社と付き合ってきて、何度か痛い目にあったこともありましたし。

ただ、だからこそ情報はどんどん発信していくべきだと思いますよ。本当はこういう内容ってWebに関わる皆が考えるべきことだと思いますし。

土居:コメントしづらいって言えばしづらいんですけどやっぱイメージは良くないんですね。ただ、僕も同感です。

業界のイメージ良くしよう!とか言うつもりはないですけど、本当はとても難易度の高いチャレンジングな業界で、頑張れば頑張るだけ価値を発揮できる市場だと思っていて、まだまだプレイヤー不足は否めないと思っています。

ですので、皆さんにもっとポジティブに興味をもって頂きたいなとは思いますね。

終わりに

土居:インタビューにご協力頂きありがとうございました。

中村さんは、去年には一躍有名になったWeb系メディアFindjob!Startupの編集長をされたり、Webディレクターズマニュアルという自身のサイトの運営をされていながら、日本ディレクション協会(通称:ディレ協)の会長とか、更に今はBITAという制作会社で受託制作のディレクションをやっていたりメディア運営をしていたりと、かなり幅広く活動されていますよね。

中村:はい、ご丁寧な紹介ありがとうございます。そんな感じで色々と活動していますね。今はBITA以外では、特にディレクション協会での活動に特に力を入れています。

そして最近はそんな中、本も出しまして。

現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2 一戸健宏, 大串 肇, 合志建彦, 高瀬康次, 田口真行, 中村健太, 中村健太(日本ディレクション協会/株式会社ビットエー)

現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2
著者:一戸健宏/大串 肇/合志建彦/高瀬康次/田口真行/中村健太
監修:中村健太

ナカムラは監修・執筆し、共著としてディレ協の主力ディレクターである高瀬さん、田口さんをはじめとして本当に優秀なディレクターの方々が参加した書籍で、是非皆さんに読んで頂きたい本です。SEOの話題にも一部触れていますので、このサイトの読者の方も是非是非。

土居:執筆に関わった皆さん個人的にも存じていますが、とにかく豪華なメンバーですね、、みなさんポチっといきましょう。中村さんありがとうございました。

あとがき

中村さんはたまにお仕事で一緒になったりしますが、企画、デザイン、HTML、マーケティング、アクセス解析、プログラミング、メディア運営、、とにかく守備範囲がものすごく広いし、それでいてそれぞれの領域について理解もかなり深いし、すごいなあと思っています。

とりあえず、僕個人としましては写真うつりはもう少し気にしてみようと思いました。

こんな感じの企画も少しずつ出していければと思いますので、出て頂ける方いましたら、宣伝告知なんでもOKですので是非お声かけ下さい。この企画が第一弾で終わらないことを祈ります。

Webデザイナー(女)、働き方が変わりました

30代Webデザイナー(女)、働く環境が変わりました

ここ1年以上ブログをさぼってましたが、その間、Webデザイナーとして、働く環境が大きく変わりました。

ワタクシ、昨年、第一子を出産しました!!

最近は子育てするには難しい環境と言われてますし、Web制作のお仕事も将来どうなるんだろって不安は絶えません。(夫もWeb屋です。。。)

そんな転機を迎え、将来のことなどいろいろと考えました。

Web系のお仕事は比較的「働き方に融通が効く」方だと思います。
最近、Web系のお仕事されている女性たちの働き方がブログ等で紹介されていて大変参考にさせてもらってます。

ノマドでお仕事できたり、正社員だったり派遣だったり、1か月のうち数日だけ死ぬほど働いて後はオフにしたりという方も。
Web系の仕事の魅力はもちろん、こういった働き方が好きでこの職を続けている方も多くいるのかも?

私はこの職に就くまで美容業界、教育関係、医療業界とお仕事転々とした方ですが、
20代後半で出会えたこのお仕事がとても好きで、「環境さえ整えればお家でも仕事が続けられる!妊娠中、出産後、育児中も続ける!」と、意気込んでおりました。

が、、、今「育児なう」なわけですが、仕事との両立、とにかく思い通りに行ってません!(;´∀`)
想定外の連続です。
夫も一緒にWeb制作を生業としております。
Web系でお仕事されてる男性にとっても、嫁が妊娠・出産したらこんな感じになるかもです!

妊娠前までの働き方

妊娠までは事務所に出勤し毎日朝10時から、残業して夜9時くらいまで、モリモリWeb制作のお仕事して参りました。
前述のとおり、子供ができてもずっとずっとお仕事をしていたいと思ってました。

自宅にも制作環境を整えていたので、
「子供ができても仕事は続けられる!」、
「満員電車にも乗らなくていいし、自宅で陣痛来るまでお仕事する!」、
「産後はしばらくは育児できついかもしれないけど、数ヶ月経ったら赤ちゃんのお昼寝タイムにちょこちょこお仕事しておむつ代稼ぐ!!」
と、そんなことを考えてたのでした。

地獄のツワリ開始

妊娠がわかって大喜びし、仕事と妊娠生活両立できたのはわずか数日のみでした。

すぐにツワリがやって参りました。

つわりがツライっていうのはよく聞く話です。

でも、まさか、ここまで??(ヽ’ω`)な感じでした。。。
第一の「想定外」です。

24時間二日酔いの状態、寝ても覚めても気持ち悪く、(私の場合は)気持ち悪いのに全く吐けませんでした。
PCに向かうなんてのは拷問かっって状態になりました。
横になると気持ち悪くなるので日によっては座ったまま寝たりしてました。

そしてその気持ち悪さよりも何よりも辛かったのがとんでもなく気分が落ち込んだこと。
気持ち悪くて働けない自分に罪悪感を感じ、
「世の中の妊婦さんは臨月まで頑張っている人もいるというのになぜ私は、、、」
「私が働けないせいで夫のタスクが山積みになって大変な思いをしている、、、」
「働けないくせに家事もできないなんて、私はクズ、、、」
と、永遠と自分を責めて責めて責め続ける謎の自虐プレイに入りました。
不眠にもなりました。
気持ち悪くて何も出来なくて気分が落ち込んでて寝れないっていう最悪の状態です。
なぜか韓流ドラマにはまりました。

噂のホルモンの仕業です。

夫は、その頃、私が使い物にならなくなったせいで、鬼のようなタスクを抱えて終電で帰宅、真っ暗闇の部屋の中で真っ青な顔の嫁にむかえられ、深夜の食事(コンビニ弁当)。
その後深夜の作業を開始し、日の出とともに布団に入り、少しの睡眠、数時間後また出勤、という毎日を送っていました。

普通ドラマとかだと嫁の背中をさすって「大丈夫~?」って姿を見ますが、夫は仕事がお祭り騒ぎで正直それどころじゃなかったと思います。
私も私で仕事が出来ずに夫のタスクを益々ファイヤーさせてたのは重々承知だったので、せめて静かに苦しもうと思って一人で身悶えていました。

「うーーーーーーーーん、うーーーーーーーん」と暗闇で目をつぶってあぐらをかいて唸りながら泣く私( ;∀;)。
隣の部屋からカタカタカタカタカタ、キーボードをたたく音。

カオスでした。二人でみるみる痩せて行きました(ヽ’ω`)

大誤算でした。
「陣痛来るまで働こ~」なんて軽く考えてた私に、恥を知れ、とののしりたいです。

心身ともに弱ってる状態でまっったく仕事なんか出来ず、ツワリ期の3ヶ月間、ただただ泣いてました。

つわり期の後半になると、泣いて過ごしながらも、働いてない罪悪感からとにかく何かしたい一心で少しずつお仕事に挑戦しました。

出来たことは、
デザイン(得意なジャンル限定)、
htmlとcssのコーディング、
WordPressの簡単なタグを埋め込んだりする作業。
妊娠前には普通にやっていた、ライティングやワイヤー作ったり、なんかは無理でした。
WordPressの複雑なループの処理を考えたりとかも無理。
コレを機に自分でも初めて気づいたのですが、どうやら私にとってこれらの作業は使う脳が違うようで。。。
「考える」作業が無理なのでした。
デザインはひょっとしたらいい気分転換になっていたのかも。
PCの前にいるだけで気持ち悪さは悪化するのですが(例えるなら船酔い中に船内で論文読む感じ。。。)それでも「働かなきゃ私、クズ…」という謎の強迫観念からできることだけ作業してました。

こうやって少しでもお仕事続けられたのはこの職種、環境に感謝だ、と思ってます。
通勤するお仕事、人前に出るお仕事だったら続けられなかったと思います。

この時期はまだ安定期に入る前なので、あまり人に知られたくなかったりもして、、、
はっきりとした理由も伝えられず欠勤が増えたり、職場側の理解がイマイチで休みが取りづらくて仕方なく退職される方もいるようです。

安定期の働き方

つわり期の最終段階では気分が落ち込みすぎて「人は何で生きるのか」と意味の分からないどん底まで思い悩んだ末、少しず~つ気持ち悪さが回復。
それとともに気持ちの沈みも回復。
さらにさらに夫のお祭りもおさまってきました。

それでも、相変わらず普通の体調ではありませんでした。
近所のスーパーに行くだけで動悸息切れ、めまい、電車に乗ると貧血。
犬なみに発達した嗅覚に、あらゆるニオイがダメ。
食べ物のニオイだめ、シャンプーのニオイだめ、夫のニオイだめ、全部ダメ。

この後も通勤することは断念。
完全に自宅で仕事するようになりました。

この頃の想定外は「妊婦、なんか肩身が狭い」。
ちょうど「妊婦お断り」の飲み屋が炎上した時期です。

世の中には「マタニティマーク」が嫌いな人がいるらしく、あのころあったこと、思ったことを、ここでいろいろ書くつもりはないですが何だか世の中、世知辛いなぁとつくづく思いました。
私の安定期は、中の人はありがたいことにずっと順調にいてくれたので、どうしても用事があって電車に乗るときはマタニティマークをつけずに良く立ってました。

でも、本当に体調の良くない妊婦さん、います。
「マタニティマーク」は、何かあった時にいち早くお腹に赤ちゃんがいると周りに知らせるためのものでもあります。
しんどいのに電車に乗って通勤してお仕事する妊婦さん、本当に尊敬します。
私は出来なかったので。
すごいことです、本当に。

出産

そんなこんなで予定日の1ヶ月前から里帰り出産のために実家の福岡へ。
夫は立ち会いを希望していたので予定日付近をなんとか仕事があけられるようにスケジュール組んでたようですが、なかなかそんなにうまくいかず、予定日付近にどんどんズレこんでいきました、、、
そしてお腹の中の人は、うんともすんとも出てくる気配なく、お腹ライフを楽しんでる模様。

まだかまだかと悶々としていたのですが、幸か不幸か計画分娩の流れになっていきました。
超音波で確認していると、めちゃくちゃ中の人のヘッドがデカかったんです。
さすが、私と夫の子です。
このままでお腹の中で育ち過ぎては分娩に長時間かかって難産になってしまうので、入院して陣痛促進剤を使って早く出したほうがいいでしょう、とのことで「突然来るかもしれない陣痛」にハラハラすることもなく、夫は入院日に合わせて東京から福岡へやって来ました。
(予定日は過ぎていたので充分にハラハラしていたのですが…)

と言ってもやはりズレこんでしまった仕事はあったので、福岡に来ても私の実家でひたすらPCに向かって仕事してました。
明日、我が子が生まれるかもしれない、という入院予定日の前日も、夫は深夜までカタカタしてました。

入院日。
朝9時に陣痛を起こすような処置をしてもらって病室で陣痛が起きるのを待ちます。
その間も夫は病室でずっと仕事してました。

これは良かったのか悪かったのか、、、
他の職種だったら諦めて立ち合えないか、仕事をスパっと諦めて妻の陣痛に専念するか、ですよね。
夫は両方やらなきゃいけない状況にw

お昼ごろからゆるい陣痛開始、
うーーーーーーーーーん、うーーーーーーーーーーーーん、と痛がってる中、同室で夫もぐぬぬぬぬ、、、と迫る納期と戦っておりました。
つくづく同業で良かったなぁと思います。
普通、「ちょっとあんたこんな時に何やってんのよ?イライラ」ってなりますよね。
同業だったので、私は陣痛で苦しみながらも「ちょっとあんた、間に合うの?イライラ」ってなってました。
そのPCの向こうのお客さんの顔がわかってるので、陣痛中にハラハラしてました。。。

痛みは続いたまま夜になってきて、、、
夫は前日の深夜作業もたたって夜はパタン、と就寝。(付き添いも同室で就寝可能の病院)
私は微妙に続く痛みに眠れず、さらに、深夜になって「お?コレは赤さん本気出してきた、、、」っていう痛みが開始。
めっっっちゃくちゃ痛かったのですが、恐らくこの先も長いだろうことはわかっていたのでグーグー言ってる夫は起こさずに一人耐えました。

それから翌日のお昼ころまで、私のうめき声をBGMに、夫は仕事したり電話対応したり心配したりお茶飲ませてくれたりウロウロカタカタ大忙し。

13時くらいにようやく分娩台に移動。
そこで夫もようやくPCと離れました。

その後はもうなんかとにかくひたすら痛みとの闘いです。
笑っちゃうくらい痛くって、なにこれ死ぬのってくらい痛くて、それはそれはひどく痛いとしかまぁ言えないんですけど。

前日9時に処置、微弱陣痛に苦しみ深夜からの本格的な陣痛、
翌日17時43分、30時間以上かけてようやく3390g 男児出産しました。

新しい世界にびびって泣く赤ん坊、
感極まって泣く夫、
へろへろに疲れた私がいました。

小さい彼との初めてのご対面の感想は
「なんだ、そんな頭でっかくないじゃん」。

こんな感じの出産でしたが、つくづく夫と同業でよかった。
痛みに身悶えてる時に夫がぐーすか寝たり仕事したり、恐らく同業じゃなかったらキレ散らかしてたと思います。
同業の男性の方、奥さんが同業じゃない場合はぜひ潔く出産立ち合いに専念してください。

産後

その後数日、入院中の私に付き添って夫も病室に寝泊まりしました。
寝泊まりしながら仕事してました。

キャサリン妃とか安藤美姫選手とか、あれは一体何なの?

私、産後、めちゃくちゃ辛かったです。
産後4日くらいは何かにつかまらないと立ったり歩いたりできませんでした。
貧血みたいなフラフラするんです。
産後10日くらい円座にしか座れませんでした。
痛いんです、めちゃくちゃ( ;∀;)
産後、赤ちゃんと一緒にお腹の中に入ってたものが少しずつ出てくるのですが、私は完全に終わるまで2ヶ月かかりました。

順位をつけるなんて出来ないくらいどれも辛かったですが、どーしてもと言うならば、私のツライ順は
ツワリ > 産後 > 出産
でした。
産後2ヶ月くらいは仕事なんて全く頭になかったです。
育児が大変はもちろんですが、本当に体がしんどかったです。

なので産後一日で退院してスタスタ歩いちゃうキャサリン妃、
産後数ヶ月で氷の上で踊っちゃう安藤美姫選手、マジすげぇ~、としか言えないです。
ムリムリムリムリ(゚∀゚)、って感じです。
産後がこんなにツライのはまたしても想定外でした。

育児と仕事

育児、噂通り、大変です。

仕事復帰に関して、保育園に預けるのは自営業だと難しいと事前に聞いていたことと(ただでさえどこも空き待ちの状況で育休中の方でも苦戦してるそうで)、
私自身も可能であれば家で育児しながら仕事を続けるのが理想なので最初は家で育児しながら仕事してみましたがこの大変さもかなりの想像以上でした。

夜泣き、寝ぐずり、早起き、原因はいろいろですが結局、私の中で「保育園あずけずに育児しながらの在宅ワーク」は限界でした。
でも保育園は待機待ちで簡単に入れる状況ではなく、現在空き待ちをしながら「一時保育」を利用しています。

一時保育とは、一般的に認可保育所通常の保育とは別枠で子どもを受け入れるシステムなのですが、1回○時間○円、という感じで、一般の認可保育園にあずけるより高いです。
倍以上です。
働けば働くほどお金がかかる悲しい現状になってます。

とにかく妊娠、出産、子育て、と、色んなことが想定外で、女性が仕事を続けるっていうのは大変なことなんだなぁーと身を持って感じています。

反省、反省

大変だとは知っていてたくさん考えたつもりでしたが、妊娠出産育児は想像以上でした。

つわりがあってもなんとか仕事はできるでしょう、と思ってたのが大間違いでした。
母乳のこと、ミルクのこと、妊娠中にもっと勉強しておけばよかった。
保育園あずけずにモリモリ仕事は私にとっては不可能でした。
事前にちゃんと保育園のこと調べておけばよかった。
あ、ネントレやったことは大正解でした。
(ネントレ=赤ちゃんのねんねトレーニング)
働くママさんは、もしやらないにしてもネントレがどういうものか知っておくといいかも。
おすすめです。

想定外だらけで体も心もへとへとに疲れてますが、一つだけ良い想定外。

我が子がかわいいです、驚異的に奇跡的にどうしようもなくかわいいです( ;∀;)
顔がカワイイとかそういうのじゃなくて、もう存在全てがありえないほどかわいく感じるのです。

「ホルモンの影響だからしょうがないよ」と、一言で片付けられてしまうホルモンとやら。
つわりや気分の落ち込みなど、ホルモンとやらにはかなり悩まされましたが、
ここまで何かを心の底からかわいい、愛おしく思うのがやはり母性だとかホルモンとやらの仕業だとすると、ホルモンとやら、捨てたもんじゃねぇと思います。

同業で子育てしながらモリモリ働くママさんたくさんいます。
しかもパワフルに!アグレッシブに!激しく働いていて、尊敬します。
私もっ!今後もこのお仕事を続けていきます。
働き方を工夫すれば続けられる職種であることに感謝です。
でもその分、地道な努力も必要だなーとも実感しています。
何しろどんどん新しいことが出てくるので着いていけない。。
まだ本格的に、とは言えないですが久しぶりにお仕事再開して浦島太郎状態です。
pre_get_postsって何それ?
Fireworks終了のお知らせって何っっ?ヽ(;▽;)ノ
たった1年ちょっとのことなのに産後ボケしてる私の頭は、冷蔵庫に豆腐が7丁あったり日常生活にも支障をきたしていて、しばらくリハビリが必要です。

今はまだ手探りで必死で毎日を過ごしてますが、うまく育児と仕事を両立できるといいな。
今後、また会社に就職したり(年齢的に難しいかもしれませんが・・・)、働き方は変わってもこのお仕事をやっていきたいと思ってます。

息子が10ヶ月を迎えましたので記念と決意、ということで書きました。

頑張る。

WordPressのオリジナルテーマでブログを作る方法②

この記事は、WordPressのオリジナルテーマでブログを作る方法①の続きです。

目次

テーマの編集

ではいよいよテーマの編集になります。
私のやり方になっちゃうんですけど、流れとしては

  • 1 パスを書き換える
  • 2 ページを分解する
  • 3 ループを理解する
  • 4 テンプレートタグを埋め込む
  • 5 必要ファイルを作成・複製する

こんな感じです。

1 パスを書き換える

最初に、画像などのパスをWordPress用の書き方に修正していきます。
こちらが、パスの書き方です。

もともとの記述

<img src="images/sample.jpg" />

修正後

<img src="<?php bloginfo('template_directory');?>/images/sample.jpg" />

twentyelevenの中にも、画像なんかはこの記載でかかれてますので、この部分をコピーしてきて、画像パスなどを全置換、してください。

header部分の、style.cssの読み込みの記載方法だけ、ちょっと違うのでご注意ください。
こちらもtwentyelevenのheader.php内に記述がありますので、
参考にこぴぺしてください。

もともとの記述

<link rel="stylesheet" href="style.css" type="text/css" />

修正後

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

一応、追加資料のほうにもこの辺、書いてますので、よろしければ参考にしてください。
「初めてのWordPress!オリジナルのテーマでブログを作る方法」追加資料【pdf】

2 ページを分解する

WordPressでは、各ページの共通部分を、「テンプレートファイル」にしてしまって、読み込むことができます。


たとえば、上の画像のデザインで言うと、このindexページの、header部分、右カラム部分、フッター部分は、他のページでも全く同じ内容です。

そのようなファイルを
header部分はheader.phpに
右カラム部分はsidebar.phpに、と新しいファイルを作ってしまいます。

index.phpのソースには、
ヘッダーがあったところに、phpの「header.phpをよみこんでくださーい」という記述を書いておきます。

<?php get_header(); ?>


同じように、右カラムがあったところに、

<?php get_sidebar(); ?>

フッターがあったところに、

<?php get_footer(); ?>

と記述。

index.phpはソースがスッキリなるはずです。

3 ループを理解する

php、が苦手でも、これだけは理解しておいたほうがいい記述です。

ブログでは、投稿の内容を複数件、表示することが良くあります。
例えば、最新記事の5件表示、同じカテゴリーの記事5件表示、など。

上の↑感じで同じレイアウトの箱を5回表示させたい!
そんな時の書き方がこちら。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		~ここに表示したい一つの箱のソースが入るよ~
	<?php endwhile; ?>
<?php else : ?>
~ここは記事が1件もなかった時の表示内容~
<?php endif; ?>

図で書くとおそらく下のような感じ。

「もし投稿があったら、投稿内容を表示させましょー」、というphpの記述を書いて、
その中身は、投稿内容の、ひとつの、ボックス分の、ソースが入ってきます。
投稿内容がないときは、記事はありません、といったような表示をだす、っていう記述です。

※ループに対してたくさんの条件を設定することもできます。
例えば「カテゴリー3の記事だけを5件表示」とか。
そんなときは、「WordPress 特定カテゴリ」とかわかりやすい言葉で検索すると、たっくさん参考、解説サイトが出てきます!

4 テンプレートタグを埋め込む

ループ部分の記述が終わったら、テンプレートタグを埋め込んでいきます。
日付やタイトルなど、テスト用に、ソースにテキストをじかがきしてる部分に投稿内容を反映させるため、テンプレートタグを埋め込んでいきます。
このタグについてはWordPressのCodexにタグ一覧が載っています。

たとえばtitle、上の画像の「斜めフレンチ・・・どうのこうの」の部分は、Codexの中から必要なtitleタグを見つけて詳細を見てみると、

Codexに答えが載ってます。
記述方法まで詳しく紹介されています。

ここ以外でも、たくさんのブログでよく使われる、テンプレートタグは紹介されてますので、ぜひ、いろんな参考サイトを調べつつ、タグを埋め込んでいってください。

5 必要ファイルを作成・複製する

次に、必要なテンプレートファイルを作っていきます。
WordPressをインストールした時にもともと入っているテーマにはもりもりとphpファイルがあります。
ですが、自分で、テーマを作るときに、まねして、全部準備することはありません。
もりもりある中でも、ブログ制作時によく利用されて、最低限抑えておきたいテンプレートファイルは少しだけです。

こちらは、ブログの構成を考えたときの図。

ここから必要ファイルを考えた場合、以下のようなファイルを作ることになります。

今回の構成では、最新5件表示のデザインは、トップページもカテゴリーも全部、同じなので、ほぼ、複製するだけで、すみます。

他にも、Codexには、カテゴリーやタグ以外でも、色んなファイルが紹介されていますので、追加したい機能に対する、該当ファイルを使ってオリジナルブログを作っていくことができます。

私はだいたいこんな感じで、Codex、Twentyeleven、参考になるブログなどをいったりきたりしながら、ブログを制作しました。
この内容は、ほんとに最小のページ数でブログを作る方法を、ご紹介したのですが、もし、ここまでできたら、機能を追加したり、ページを追加したりすることにも、調べ方が、慣れてきてますので、サクサクと、比較的簡単に、できるようになってるんじゃないかな、と思います。

目次へ

WordPressで制作した「ブログ」でよく使うプラグイン

「プラグイン」はWordPressの拡張機能です。
プラグインはWordPressの大きな魅力の一つで、phpなどを一生懸命記述するのではなく、そのサイトに合った機能を簡単に追加していくことができます。
プラグインは無料のもの、有料なものとありますが、「なんでこんな高機能で無料!!」とびっくりするほど充実した手の込んだ大盤振る舞いの機能がさくっと追加できたりします。
追加方法も簡単、直接、管理画面の「プラグイン」⇒「新規追加」から、インストールすることができます。

Contact Form 7

Contact Form 7
コンタクトフォームを、一発で、実装することができます。
日本語もOKだし、デザインもカスタマイズできます。

WPtouch

WPtouch
スマートフォンに最適化させるプラグインです。
デフォルトのままでなんかかっこいいインターフェイスになります。
利用者がすごく多いので同じデザインをよく見かけてしまうのですが、簡単なカスタマイズも可能です。

SNSプラグイン

最近はFacebookやtwitterからの、ブログの訪問者さん多いと思います。
たくさんの方に見てもらいたいって方は、ぜひ、こういったソーシャルネットワーク系の、アイコンを、設置されるといいかと思います。

SexyBookmarks

このプラグインはこのブログでも使ってるのですが、ぴょこっとでてくるデザインがかわいいです。

WP Social Bookmarking Light

ブログに限らず多くの色んなタイプのWordPressのサイトで使われています。

WP-PageNavi

WP-PageNavi
ページ番号を並べた、ナビゲーションリンクを、表示させることができます。
今どこのページにいて、あとどくらいページがあるのか、直感的に分るので、訪問者には便利です。
デザインもカスタマイズすることができます。

目次へ

最後に。WordCamp Tokyoが開催されるよー!

最後に、なんども申し上げていますとおり、WordPressはたくさんの参考サイトがあります。
勉強会やコミュニティもたくさんあります。

私が今までお世話になって、これからもお世話になるであろう、親切な「WordPress上級者」の方々にはとっても感謝しております。

そして、、、
2012年9月15日にWordCamp Tokyoが開催されます。
もうすぐ1000枚用意してあったチケットがなくなる勢いなのだそう。。。(ΦωΦ)すごいです。

WordCampではたくさんのデザイナーさん、プログラマーさん、ブロガーさん、などなどと交流ができて、WordPressのことを知ることができる無料のお祭りみたいな感じです。
私も今からとっても楽しみで、どのセッションに行こうかと、タイムテーブルとにらめっこしてます!
当日はそのへんうろちょろしてると思うので、是非、みなさん名刺交換&仲良くしてくださいヽ(´ー`)ノ☆

デザイナーさんにとってプログラム書いたりって、とっても難しいですが、こういった機会にお友達を作って同じ悩みを共有、相談できる人ができると、きっと楽しいはず!
と思います。WordPressにご興味ある方、こういった機会を大事にしてぜひ、参加してみて下さい。

また、今回、ジョブボードとやらが用意されるらしく、参加者が働く先を、企業が一緒に働く仲間を探す場が提供されるそうな。
(詳しくはWordCampで仕事を探せ!WordCampで仲間を探せ!!で。)
今、まさに一緒に働く仲間募集中なので、いい出会いがあるとうれしいです(ΦωΦ)♪

WordPressのオリジナルテーマでブログを作る方法①

目次

はじめに

昨年9月、WordCamp KOBEで「初めてのWordPress!オリジナルのテーマでブログを作る方法」というお題でスピーカーをやらせていただいてもうすぐ1年。。。
終了後のスライド公開時に「しゃべった時のカンペもそのうち公開します」とか言ってそのままズルズル、ずーーっと気になっておりました。

ググればこの手の情報はきっちりまとめてくださってるブログなどがわんさかあって、今更、需要無さそうですが、もうすぐWordCamp Tokyoも開催されますので、「行ってみようかしら(・∀・)」と思う方ちょっとでもいたらうれしいなぁ、と思い、まとめてみました。

約1年前のスライドとカンペをもとに、変わった部分(WordPressのバージョン的にも私の知識的にも)を織り交ぜつつオリジナルテーマでブログを作る方法を書いてます。
全スライドはこちら WordCamp KOBE「初めてのWordPress!オリジナルのテーマでブログを作る方法」スライドと追加資料です
※でもこのスライド約一年前のなので情報が古い部分もあります。。。
「PHPよくわかんないけど、html、cssはおっけーでWordPressにちょっと興味があるWebデザイナーさん、またはWebデザイナー目指してる人」など、初心者向けの内容です。
コレ見たらブログが作れたよ!っていう内容ではないですが、今後WordPressに触れる上で参考になるサイトや調べ方などをざっと紹介できたらと思います。

目次へ

WordPressをおススメする理由

WebデザイナーでSNSなどを利用して情報を収集している方多いかと思います。
そうやって情報集めまくってると、それをメモっといたりするアウトプットをする場が欲しくなってきます。
そのひとつの方法として「ブログ」があり、私は最初アメブロやらFC2やらでブログをやってたのですが、Webデザイナーなりたいんだからやっぱオリジナルのデザインで、好きなレイアウトで、好きな構成のブログ作りたいなぁーと思いはじめたのでした。
その頃ちょうど、転職も考えていたので、ポートフォリオの一つになるといいなぁとも思ってました。


そこでPHPもよくわからないまま、WordPressのブログ制作に挑戦しました。
が、わからないなりにもなんとかできました。

今、ほんとにWordPressって大人気で、
WordPressに興味がある人がたっくさんいるので、
ちょっと調べると情報が満載です。
上級者の方からたくさんの情報を得ることができます。

たとえば、

WordPress Codex
こちらは、WordPressの公式オンラインマニュアルで、
初心者の方が欲しい情報はほぼ書いてある教科書のような存在です。

Codexに載ってないような、、もっと具体的な質問も、
WordPressフォーラムに投稿すると、答えてくれるWordPress上級者さんがいらっしゃいます。

あと、今回のWordCampのような、無料のイベントも各地でたくさん開催されてます。
この他にも、ちょっと検索すると、参考になるブログがたくさんあふれています。
こんなかんじで、WordPressは初心者のために色々と教えてくれる先輩もたくさんいて、わからないことがあっても情報量が多いので調べやすいです。

私の場合は、こうやってWeb上でいろいろと調べながら、WordPressにふれていって、今ではお仕事でもWordPressを使ったサイトを制作できるようになりました。

PHPの知識が浅くても、WordPressのおかげで動的なページが制作できるようになります。
また、WordPressに慣れることで逆にちょっとだけPHPが理解できるようになります。

WordPressに慣れていくためには、まずは最初にブログを作って、いろいろとテストしていくのがすごくいい練習になると思います。

目次へ

ブログの構成を考える

まずはブログのデザインに入る前に構成を考えます。

ブログと一言で言っても、いろんな種類があると思うんですけど、内容や目的、ターゲットなどをよく考えてどんなコンテンツやページが必要なのかを考えてみます。
そのためには、私の場合はいろんな既存のブログを見て、構成とか参考にさせていただきました。

今更な感じですが、Webデザイナーさんにとっては有名ドコロ、デザインがステキでWordPressで作られているサイト。

こういう素敵なブログを見て、
「ほぉ~2カラム構成で、サムネイルを豊富に使ってて、、、」とか研究してました。
(よそ様のブログを研究した時に書いた記事⇒4つの人気ブログのデザインを研究。しつこいですが、またブログリニューアルしました

ちなみに、こちらのサイトWPデザインギャラリー

WordPressを使用した国内外のWebサイトを収集したWebデザインギャラリーで、カテゴリーで「個人の日記」など選ぶことができるので、WordPressで作られているたくさんのブログを参考にすることができます。

WordPressの「投稿」と「ページ」

WordPressのブログの構成を考える上で、「投稿」と「ページ」っていうのがとても重要になってきます。

WordPressでは、コンテンツを作成する時に「投稿」または「ページ」という方法でページを作成します。
(※カスタム投稿タイプという投稿方法もあるのですが、これは初めてWordPressをさわる方はまだふれないほうがいいかなぁ~と思います(;・∀・)
今後慣れてきて機能を追加したい時なんかに挑戦してみたらいいかと!
ちなみに私はコーポレートサイトなんかを制作するときはカスタム投稿タイプをモリモリに利用するものの、自分用のブログ、今まで3つ作って来ましたが、全てカスタム投稿タイプは使っていません。)

その「投稿」と「ページ」2つの違いなんですけど、

画像の左側は、管理画面の「投稿」の画面、右側は「ページ」の画面です。
すごく似ているんですけど、
「投稿」の方は、カテゴリーを選択したり、タグを設定することができます。

ですが、右側の「ページ」の方ではそれができません。

カテゴリーやタグでソートできるのも、「投稿」で、作ったページなので、まさに「投稿」は、「ブログ」向きの機能だと思います。

で、「ページ」の方は、時系列には影響せずに、恒久的、半固定的な情報を掲載する際に適していますので、たとえば「このサイトについて」とか「お問い合わせのページ」なんかが向いてる機能だと思います。

「投稿」でどんなカテゴリー、どんな構成にするか、また、「ページ」でブログとは別の、どんなページを追加するか、それぞれ考えます。

最近よく見かける、ブログのページ構成

こちらは、最近よく見かける、ブログのページ構成です。

まず、トップページで最新の記事数件をタイトルやサムネイル のみで 表示させます。

そこから、記事の個別のページにリンクする、そう行った作りのブログが、最近よく見るなーと、思います。

さらに、この、トップページと同じようなレイアウトで、タグとかカテゴリーでソートされたタイトルだけ、数件表示のページから、個別記事へリンク、そういった感じの構成です。

私のブログもそうなんで、具体的なページを見てみるとこんな感じなんですけど、

イメージ画像で、ぱっと見で視覚的な情報を得ることができたり、おっきなフォントサイズでざーーっとタイトルを確認できたり、、、などなど、自分なりの見せ方を追求できるのがオリジナルデザインのブログをつくる醍醐味だと思うので、ぜひ、その辺も研究して、オリジナリティあふれるレイアウトを工夫してみてください!

今回はこの構成でのブログ制作についての流れを考えてみたいと思います。

構成が出来上がったところでデザインに入っていきます。

目次へ

デザイン~コーディング

デザイン

準備するデザインとしては、先ほどの構成を元に、5件表示用のレイアウトがひとつ、あと個別記事のデザインが二つ目、

この2つだけで最初に挑戦してみるブログであれば、十分なんじゃないかなーと思います。

あと、必要があればっと書いてるんですけど、、「このサイトについて」や「お問い合わせ」のページも、あるといいかもしれません。
ブログによっては、フッターの部分に自己紹介がしてあったり、お問い合わせフォームが右カラムにあったり、とその辺も自分にあったいろんな形にできますので、工夫してみてください(・∀・)

具体的なデザインをご紹介します。
これ、5件表示のページ。

細かく見ていくと、先ほどの構成案のとおりで、右カラムにカテゴリー別のリンクを設置。
あと、「キーワード」という形にはしてますが、タグのリンクになってます。

それぞれ、タグやキーワードで絞られた、最新5件表示のページ(レイアウトは全て同じ)にリンクするような構成になっています。

次に、各記事のページ。

先ほど例に上げたような見やすい素敵なブログは、見出しのデザインとか段落ごとの十分な余白とか、そういったことがすごーく考慮されている感じがします。

一つの記事内でも、いろんなスタイルを用意しているようです!

そのほかにも、訪問者に長時間見てもらうために、一つの記事の最後に関連する記事へのリンクを表示したり、人気のある記事をランキングで表示したり、と、色んなブログで色んな工夫がなされています!

また、訪問者に、再度、遊びにきてもらうために、RSSやtwitterアイコンを設置したり、アフィリエイトを考えている方は、バナーの設置場所とか、それに合わせたカラムサイズ、効果的な広告の位置を考える、といいのかも。

せっかくオリジナルデザインのブログなので、いろいろ工夫したデザインを作ってみてください♪

コーディング

デザインが終わったら、コーディングです。
あとからワードプレスの機能を加えていきますので、
まずはWordPressことは考えずに、いつもどおりモリモリコーディングします。


作ったデザイン2種類のPHPファイルとcss。あと画像フォルダ。

目次へ

WordPressをインストール

サーバーについて

WordPressを設置するには、PHPとMySQLが使えるサーバーが必要なんですけど、レンタルサーバーによって特徴や規制があります。

データベースを作ったりとか、サーバの知識とかあまり無くて初めて体験する方にとっては、ちょっとだけめんどくさい工程があります。(慣れちゃったらダイジョブなんですが!)
ここでつまづいてしまう方多いと思います、私もくじけました(;・∀・)
ローカル環境でWordPressを動くようにしたり色んな方法があるかと思いますが、最初は思い切ってWordPressを自動インストールできるサーバを契約してしまった方がいいと思います!

インストールするときに、心折れてしまっては、どうしようもないので、初めての方は一番簡単な方法で、やってみるのを私はオススメします。。。
参考サイト
WordPress Codex レンタルサーバ情報

レンタルサーバの説明どおりに作業して自動インストールが完了したら、管理画面とサイト側のページが確認できます。

これは、WordPressに最初に入ってるテーマです。これから、いよいよ、自分のデザインを反映させていきます。

自分のオリジナルテーマと合体!

で、この自動インストール後の全ファイルをのぞいてみると、膨大な量のファイルがあります。
あまりの量で、けっこう、気持ちはなえてしまいそうなんですけど、実際、使うファイルは、ちょびっとだけなので、ダイジョウブです!

WordPressを、インストールしたフォルダ直下の、wp-contentフォルダ、themesフォルダと中に入っていきます。
このthemesフォルダの中が、自分のオリジナルのテーマを入れる場所になりますので、このthemesフォルダの中に自分でコーディングしたテーマをフォルダごと入れちゃいます。


※ちょっと内容が古いですね、ゴメンナサイ。でもやることは変わらないです。。
このnails-parkっていうのが今回作ったオリジナルテーマで、まるごとUPします。

themesフォルダの中に既に他のテーマがもう入ってます。(WordPressのバージョンによって、入ってるテーマは違います。)
これが先ほどサイト側の画面で見えてたテーマです。
こういったもともと用意されているテーマは、これから自分のテーマを編集していく上で、すごく参考になりますので、私は参考ソースとして、一応、とっておきます。

では、まずは、サイト側で自分のテーマが表示されるように、設定します。

管理画面の、外観テーマのページを見てみると、
twentytenが現在のテーマとして、設定されているのがわかります。
※情報が古いです、スイマセン(´・ω・`) 2012年8月現在、最新のWordPressをインストールすると、「twentyeleven」というテーマが入ってるかと思いますがどちらも参考にする部分は同じです!

もともと用意されているテーマの中のstyle.cssを開いてみると、一番最初の部分にテーマの名前とか、URLとかの記述があります。
これがこのテーマの情報です。

管理画面内でテーマを選ぶときに表示される情報がここになります。

なので、もともと用意されているテーマのstyle.cssの記述を参考にして、「自分の」オリジナルテーマ内のスタイルシートを編集してください。
自分のテーマに沿った情報に、記述を修正していきます。

修正したファイル、をまとめてアップすると、ちゃんと、管理画面外観テーマに、自分のテーマ情報が、表示されるようになります。

ここで自分のテーマを有効化させると、なんとなく、自分のテーマの内容が表示されるようになります。
この時点ではcssや画像が反映されてなくて、予定してたものと違うのでドキドキしてしまいそうですが、これから自分のテーマを、WordPress仕様に書き換えていきますので、この時点ではこの表示でダイジョウブです!

WordPressのオリジナルテーマでブログを作る方法②へ続きます。