「テンプレは入ってるから、あとはよろしく」
自社サイトを新しく立ち上げることになったとき、渡されたのはSWELLという「テーマ」（サイト全体のデザインの土台になるもの。以降「テンプレ」と呼びます）がインストールされた、まっさらなWordPressの管理画面でした。
WordPressは、以前オウンドメディア運用をしていた時期に、記事を入稿した経験だけはありました。でも、それは既存の記事をお手本に、同じようにテキストを流し込むだけ。管理画面や投稿内のブロック機能を、自分でちゃんと使ったことは一度もありませんでした。
最初に思ったのは「これ、どこから手をつければいいんだろう」でした。
マニュアルもなければ、教えてくれる人もいません。あるのは、テンプレという「土台」だけです。
しかも今回は、サイトのWebディレクションをしながら、WordPressも実務レベルまで独学で身につけて、サイト自体も自分の手で作らなければいけない状況でした。
それでも、ほぼ未経験の状態から、実務で使えるレベルのサイト構築まで独学で辿り着くことができました。今日は、それまでにやったことを、順番に書いていこうと思います。
参考サイトをリサーチして「型」を探す
テンプレはあっても、何もない状態からいきなり触り始めても、何を作ればいいのか分かりません。まず手をつけたのは、WordPressを触ることではなく、リサーチでした。
何事も、まずは「王道」を知ることが一番の近道だと思っています。我流でいきなり作り始めると遠回りになりやすいですが、型を知ってから外すのは簡単だからです。
競合のメディアサイトを片っ端からリサーチし、1メディア1スライドで要点をまとめた資料を作りました。それを編集メンバーにも見せると、編集メンバーが「業界は違うけれど参考になりそうなメディアサイト」をいくつか教えてくれたので、それもチェックしてスライドに追加しました。
集まったスライドから、共通する「王道」の構成や要素を抽出し、TOPページのワイヤーフレームを作りました。ワイヤーフレーム自体はWebディレクション業務で慣れていたので、ここは迷わず進められました。
この際に意識したのは、最初から完璧な形を目指さないことです。要素はできるだけシンプルにして、後から足していける余白を残した構成にしました。正直、そこまで作り込む時間もなかったという事情もあります。
また、スマホ閲覧が多くを占めることを想定して、スマホでの見え方を優先した構成にしました。
このワイヤーフレームを、もう一度編集メンバーに見てもらって微調整し、TOPページの構成はだいたい固まりました。
ここまでは、WordPressをまだ一度も触っていません。次にやったのは、このワイヤーフレームを、実際にWordPress上で再現していく作業でした。
とにかく全部触ってみる
構成が固まったら、次はいよいよ実際にWordPressを触る番です。といっても、いきなり本番のページを作り始めたわけではありません。まずやったのは、管理画面のすべての項目を、片っ端からクリックしてみることでした。
設定画面、ブロックエディタ、SWELLの独自機能……意味も分からないまま、とにかく全部開いて中身を見ていきます。これを繰り返しているうちに、「このツールで何ができるのか」がうっすらと見えてきました。
ここからは、ワイヤーフレームで作ったイメージを、実際のページで再現していく作業です。まずはブロックの中に、それらしいものがないか探します。見つけたら実際にページに入れてみて、「ちょっと違う」「これでもない」を繰り返しました。
こういう場面でAIに聞けば、答えはすぐ出てくると思います。でも私は、まず自分で触ってみることを優先しました。そのほうが、後から知識として定着しやすい気がしたからです。
自分でひと通り試したうえで、それでも分からないところだけAIに「これと同じように再現したいんだけど」と聞き、教えてもらった方法を実践する、という順番にしていました。
これを繰り返してページが少しずつ形になっていく中で、メインで使うブロックが分かってきたのと同時に、「ブロック機能だけでは再現できない部分がある」ということも見えてきました。
その部分をどう再現するか。ここから先は、コードの力を借りることになりました。
AIにコードを書いてもらう
ブロック機能だけでは実現できないことは、AIにコードを書いてもらって解決しました。
例えば、固定ページを作成すると、メインビジュアル（MV）の上に不自然な余白ができてしまうことがありました。この余白を消す、という機能はSWELLにはありません。こういうときはAIに聞いて余白を消すためのCSSのコードを生成してもらい、ページ下部にある「追加CSS」の欄に入力して解決できました。
もう一つの例は、ページ内にGoogleマップを埋め込みたかったときです。SWELLにはそのための標準機能がなかったので、これもAIにコードを生成してもらい、HTMLブロックの中にコードを入力して対応しました。
正直、コードは書けません。読んで役割や意味を推測することはできても、自分でゼロから書くのは無理でした。それでも、AIに「これを実現したい」と伝えれば、要望に合わせてコードを生成してくれました。
ただ、いつもうまくいくとは限りませんでした。特に大変だったのは、AIが生成したコードを入れても、思った通りに反映されなかったときです。
そういう時は、プレビュー画面のスクリーンショットをAIに見せて、コードを再生成してもらい、イメージ通りになるまでそれを繰り返します。内容によっては、ページ全体のコードの中から該当するコードを探してAIに伝えないといけない時もあり、難航した場面もありましたが、いつも最終的にはなんとか実現までこぎつけることができました。
そしてそのうち、生成されたコード内の数値を自分で書き換えて微調整するといったアレンジもできるようになりました。
コードを完全に理解していなくても、検証を繰り返すことで、「どこを直せばいいかを探す力」は少しずつ身についていくものだと分かりました。
プラグインで、足りない機能を補う
サイトができていく過程で、いくつかプラグインも入れました。
まずはSEO対策として「Yoast SEO」。記事ごとにタイトルやディスクリプションを設定できるようにしました。
公開前には、まだ社外に見せられないページを関係者に確認してもらう必要がありますが、全員がWordPressにログインして見れるわけではありません。そのために「Public Post Preview」を使い、限定公開用のURLを発行して、編集メンバーや上司にチェックしてもらいました。
サイトはまずステージング環境で作り、確認が取れてから本番環境に移す、という流れで進めていたので、その移行には「All-in-One WP Migration」を使いました。
どのプラグインも、最初から名前を知っていたわけではありません。「こういうことがしたい」から逆算して調べ、見つけたものを使ってみる、を繰り返した結果でした。
テンプレだけの状態から、公開まで辿り着けた
こうして振り返ると、特別なことは何もしていません。リサーチして、構成を考えて、触って、分からないところはAIに聞いて、足りない機能はプラグインで補う。これだけです。
でも、この順番があったからこそ、WordPressもSWELLもほとんど触ったことがなかった状態から、実務で使えるレベルの知識を身に着け、メディアサイトを公開まで持っていくことができました。
最初から専門書やネットの知識だけをインプットしてから始めていたら、ここまで短期間でこのスキルを身につけられなかった気がします。結局のところ、一番の近道は「実践あるのみ」でした。
分からないことがあっても、まず触って、詰まったら調べる。この動き方さえ身につけば、ツールが変わっても応用が効く。そんな自信につながりました。
最後に、このメディアサイトは、同じ時期に立ち上げていたサービスサイトと合わせて2つ同時に進行していました。そのときのディレクション側の話は以下の記事に書いているので、あわせて読んでもらえると、あのときの裏側がもう少し見えてくると思います。
「WordPress、任されたけど何から始めたらいいか分からない」——そう思っている方の背中を、この記事が少しでも押せたら嬉しいです。
