株式会社fiika(フィーカ)|ウェブ制作・情報設計・システム開発・ウェブコンサル

１０月１４日自社ホームページのリニューアルを行いました。 
会社設立時から合わせて３度目の改定です。 
サイトリニューアルを検討している方の参考になれば幸いです。
初回と、２回目のホームページは、WEBFLOWというノーコードサービス（HTMLコーディングをせずにホームページが作れるサービス）を利用していました。理由は、どのようなお客様におすすめ出来て、どのような事から対応が難しくなるかを判断するためでした。 
実際に半年近く運用してみて、これができればいいのに！など、不自由を感じる事も増えてきたためMODxに変更することに決めました。 
ノーコードでできないことは、また機会があったら記事にします。
今回のリニューアルでは、 
MODxというCMS（コンテンツマネジメントシステム）と、 
NewtというヘッドレスCMSを使ってブログ機能を追加しています。
<h2>なぜ、MODxを選んだのか？</h2>
MODxというCMSは、日本ではあまり馴染のないCMSかもしれません。 
しかし、隠れた名作CMSだと感じています。 
私はもう、14、15年くらいの付き合いになるCMSです。
■MODx 
https://modx.jp/
MODxの良さは、キャッシュ機能が優秀で、表示速度が速く、複数のプログラムを同時に同一ページで走らせても問題なく動作する点につきます。 
が！一番の魅力は、官公庁のウェブサイトにも導入される実績と、WordPressのようにメジャーではないため、悪意のある第三者から攻撃を受けにくいという点につきます。 
また、WordPressは、複数の機能を追加した際に、各機能がぶつかり合ってしまい機能不全を起こすことが多いため、安易にモジュールの追加できず、相性のチェックをしなければいけないという問題が起きないことにあります。 
旧サイトで使用しているPHPなどのプログラムをできるだけ使いながら、サイトのリニューアルを行いたい場合、置き換え候補になるCMSです。過去に前述の理由で、採用媒体や大規模サイト、官公庁のウェブサイトで採用されています。
MODxには、エボリューションと、レボリューションというパッケージが存在しますが、うちで今回選んだのは、「エボリューション」です。
<h2>なぜ、Newtを追加したのか？</h2>
手軽に記事更新を行うために、ブログ機能を追加したいと考えていましたが、MODxはブログ機能がほぼ皆無で、MODx用にブログをつくるよりも、別のブログシステムを追加することを検討していました。 
そんな折、「ヘッドレスＣＭＳを試してみたい」と言われたことをきっかけに、Newtが候補に上がって来ました。
ヘッドレスＣＭＳとは、、、説明が難しくなるので是非ググってみて下さい。
Newtの特徴として、PCでもスマホでも非常にコンテンツの表示が早いことがあげられます。 
ブログシステムは、ユーザーからのアクセスのたびに、表示させる情報（HTMLや画像など）を毎回動的に生成して吐き出すため、比較的表示に時間がかかるものも多いのですが、このNewt！爆速です！！！ 
ローディングの時、くるくる回るアイコンをあまり見る事がなく快適です！
<h2>これから使ってみて、使い勝手や効果をチェック！</h2>
現状MODxについては、不満は全くありません。 
Nwetに関しても、特段困る事はありませんが、スマホからブログを更新する際にPC用の画面が表示されるため、スマホから編集する機能をもう少し高めてもらえるとさらにありがたいと感じているくらい。
今回の組み合わせが使えるようなら、お客様にもご提案していき 
効果を上げていただけるように、ノウハウをためてお伝えしていこうと思っています。
まずは、ヘッドレスCMS「Newt」を使い倒してみたいと思います。

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

<h2>ユーザーが見つけて来てくれる自動集客の仕組みをつくる</h2>
効果が上がるウェブサイトと、効果が上がりにくいウェブサイトには違いがあります！ 
実は、結構簡単な事ですが、知っているのと知らないのとでは大きな「差」が出てしまうので、知っておいて損はありません。プロがやっているウェブサイトをつくる際の過程（プロセス）とコツについて触れていきたいと思います。 
効果を上げるウェブサイトが、必ずやっている事があります。それは、、、
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/827a8727-6fc1-467d-8741-5732b5412fa4%2Fweb-process1.png" alt="web-process1.png">
つまり、 
「しっかり考え抜かれた戦略・設計が、効果を生み出す」ということです。 
考え抜き、試行錯誤を繰り返えすことで効果が得られるわけです。 
ちょっと難しく感じたり、面倒だと思うかもしれませんが、戦略・設計が身につけば、半自動的に集客できたり、半自動的に売り上げをあげられる自動集客の「仕組み」が作れるようになります。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/5afb151f-d1e1-46df-992e-ac53a6cb1512%2Fweb-process2.png" alt="web-process2.png">
<h2>１．相手は誰なのか、潜在顧客や見込み顧客を知る（分析フェーズ）</h2>
絶対に知らなければいけないこと、それはコンテンツや記事を見に来る人を、大雑把に纏めないことです。 
既存顧客なのか、すでにサービスや御社を知っている既知の見込み顧客なのか、それとも、まだ何も知らない潜在顧客なのか？ 
相手によって、知りたがっていることも違えば、求めている情報も異なります。 
会社について調べているか、商品やサービスについて調べているか、所在地を調べているのか、商品やサービスにクレームを入れたいのか？ 
さまざまな対象者が考えられます。 
その対象者を、年齢、性別、職業などの定性的な情報で分類・分析することが、まず第一歩です。 
この分析をすることで、対象者のペルソナが判明し、どのような人達を相手にすればよいかが見えてくるようになります。 
次に行う事は、各対象者の「訪問理由」を推測することです。 
訪問理由を仮定することによって、「検索キーワード」が推測できるようになります。検索エンジンだけでなく、SNSなどで、何か困ったことを解決したい、知りたいという、対象者の能動的な動機を知ることで得られる情報は非常に多くなります。 
キーワードプランナーや、その他多くの検索ワード解析ツールを駆使してどのようなページを用意したらよいかが見えてくるようになります。 
このように、情報の分類・分析をして素材を集めると、やるべきことがおぼろげながら見えてくるわけです。 
 
<h2>２．効果を上げるポイントは、ゴールを明確にすること（戦略フェーズ）</h2>
効果を上げるためにまず意識すべきは、「ゴールをはっきりさせること」です。 
「売上を伸ばしたい」、「お問合せを増やしたい」「ブランドを確立したい」etc… 
ウェブサイトやウェブサービスを用いて、何を達成したいのか、丁寧に時間をかけて考え抜くことが大切です。 
特に「なんとなくかっこいいウェブサイトを作りたい」というような「なんとなく」はNGです。ゴールがはっきりしなければ、成果もはっきりしないものになってしまいます。 
サッカーで例えれば、ゴールの位置がはっきりしないのに、いくらシュートを打っても点が決まらないようなもの。ゴール設定を優先しましょう。 
一つ例を考えてみましょう。 
ここでは、「お問合せが１ヶ月10件くるようになる。」ことを具体的な目標にして、サイトを作った場合を考えてみます。 
サイトに訪れた人の0.1%が問い合わせすると仮定した場合、１ヶ月で10,000PV(ページビュー)あれば目標を達成できそうだと仮定できます。 
このことから10,000PV獲得できるページを作ることがよりどころになるわけです。 
ウェブサイトは、目標達成の手段の一つにすぎません。 
場合によってはウェブサイトを作らずに、別のアプローチをする方が成果につながるケースもあります。 
もし、ゴールがぼんやりしている時は、ウェブやデジタルマーケティングに詳しい方に話を聞いてもらうことも効果的です。 
うまく言葉にできないこともアドバイスをもらうことで、カウンセリングのように明確にできることもあります。 
その上で、どのような特徴をもっているのか。何を大切にしているか。強みは何かetc…　 
以上のことを考えて作られたウェブサイトは、読者へメッセージが伝わりやすくなり、成果へと結びつきやすくなるでしょう。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/645e3b21-a117-497d-b6b6-ab0d9e7c8aef%2Fweb-process3.png" alt="web-process3.png">
<h2>３．困っているユーザーを解決へ導く 情報設計（設計フェーズ）</h2>
ウェブサイトの閲覧者は、何かを探しにきています。 
その答えが「すぐに」「一目で」見つかるようにすることでだれもが目的を達しやすく、分かりやすいページが作れるようになります。 
このことを念頭において、ウェブサイトやウェブサービスに求められるものを整理し、全体像を決めていきます。 
ウェブサイトのコンセプト、画面設計、主要なビジュアルデザインまで落とし込んでいきます。 
流れとして、ウェブサイトにどのようなユーザーが訪問するのか、その人物像（ペルソナ）を考えます。 
その上で、ペルソナの視点で、どのようなコンテンツに興味がわくか、どのようなキーワードで検索するか、使いやすい導線や配置を考えます。 
複雑で幅広い知識や想像力を要求する骨が折れる作業ですが、だからこそ、成果に差がつきやすいポイントになります。 
次に、ページの中に必要なページを、ペルソナ別にグルーピングします。 
例えば、
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/8cf0ff9f-8181-4357-8a9a-62c3aa864d63%2Fweb-process4.png" alt="web-process4.png"> 
など、ユーザーをグルーピングして、必要なページを各グループに分類していく作業を行います。 
また、お問い合わせや、Q&amp;A、TIPS、アクセスマップ、資料請求などの疑問を解決してあげるためのページは、疑問解決ナビゲーションとしてページのヘッダーに共通して配置するなど、グルーピングの方法はさまざまあります。 
次に重要な作業として、「情報の優先順位を付ける」ことが挙げられます。 
例えば、製品の中でも特に売りたい、問い合わせが対応が面倒だからページを確認してから連絡してもらいたいなど、いろいろな都合によってグルーピングされた情報でも優先順位が異なることがあります。 
この優先順位付けをはっきりさせる事で、表記の順番が揃い、見やすく分かりやすいアピールができるようになります。 
情報設計は、長年ウェブ業界に身を置いていた人でも非常に悩むことが多いパートです。 
ブレインストーミングを繰り返し、ポストイットなどの付箋に大小問わず項目を書き出し何度も並べ直し、グループ化を繰り返し、優先順位を検討することで情報が顕在化してきます。このほかにも、導線計画、ディレクトリ表、サイトストラクチャー、カスタマージャーニーマップ、ワイヤーフレーム設計や、ペーパーシミュレーションなどを並行して進め、精度の高い情報設計を行っていきます。 
この設計がサイト全体の良し悪しを決めるといっても過言ではありません。 
ユーザーの悩みを解決するコンテンツがあり、コンテンツを次々見て回る回遊導線設計がされているとユーザーの疑問を解決しつつ、ファンになってもらい、成果に繋がります。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/a40b78a8-f7da-46fa-a5c9-a49690ec6640%2Fimg-blog-website-02.png" alt="img-blog-website-02.png">Adobe XDで作られた、PC用のワイヤーフレーム。 
まだ、ここではデザインはされておらず、要素の配置とグルーピング、プライオリティの変更が繰り返される。 
 
<h2>４．綺麗なデザインだけじゃ効果はでない！（制作フェーズ）</h2>
良質な戦略・設計ができたら、いよいよウェブサイトを形にします。 
設計した内容をもとに、各種技術者が関わり合い、ウェブサイトを作ります。 
正直な話、ただ単にウェブサイトを作るだけなら、制作フェーズのみで事足りますが、それでは効果の上がるものはできません。　 
見た目は綺麗なサイトでも、ユーザーから見て、悩みを解決できるコンテンツがなかったり、コンテンツが探せなかったりしたら、離脱してしまいます。 
皆さんも検索していて、欲しい情報が分かりにくいページを見た経験ありませんか？ 
作業内容としては、ビジュアルデザイン、コーディング、プログラミングがあります。 
まず情報設計で作り上げた、ワイヤーフレームをデザイナーが見ながらデザインをします。 
この時、設計者の意図をしっかり理解できているかが重要です。 
ただ、見た目だけ綺麗に作っても、優先順位を間違えてしまったり、アピールポイントを勘違いしてしまうと、効果は激減してします。 
デザインができたら、CSSの設計を行います。 
CSS設計は非常に重要で、共通要素の割り出しや、余計なソースコードを書かなくて済むように運用をより簡単にするための必須作業です。 
そして、デザイナーの意図を汲み、表現方法を検討しながらHTMLコーディングが行われます。 
コーディングの際に、アニメーションや動的な挙動を与えたい箇所に、JavascriptやPHPを利用してプログラミングを行い、目的の動作ができるように詰めていきます。 
この時、パソコンやスマートフォン、タブレットを選び、どのくらいの古さのブラウザまで表示対応するかなど綿密に決めていきます。 
ソースコードは、開発環境で何度も修正が繰り返され、その後ステージング環境という本番環境と同一の状態に移され、再度確認が行われます。 
そして、公開日が来た際に、とうとう本番サーバーにデータが移行され、一般に公開されます。 
公開された後も、正しく動作するか確認作業も行なわれ、多くの時間をかけてウェブサイトは制作されます。 
綺麗なデザインのウェブサイトを作り上げるだけでは、検索してきたユーザーを満足させることはできず、効果を上げられない理由がお判りいただけたかと思います。 
これだけの手間暇をかけて、良質な戦略・設計がなければ効果は望めません。 
目に触れやすいビジュアルではなく、目に見えずわかりづらい、ビジュアルの裏に隠れている戦略・設計こそが効果を大きく左右するのです。 
もし、なかなか効果があがりにくいと感じたら、戦略・設計がしっかり練られているか改めて考えてみると良いかもしれません。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/ef6e04b9-8c3e-494d-a3b1-400cb82e7476%2Fweb-process5.png" alt="web-process5.png">
<h2>５．自動集客の仕組みに育てる（運用フェーズ）</h2>
ウェブサイトを公開できたら、ユーザーの要望に応じた機能の追加や、修正を経て、効果を上げる仕組みへと育てていきます。 
ここでいう効果とは、売上やお問い合わせがされ、収益を上げられるウェブサイトにするのと同じ意味です。 
自動集客の仕組みをつくるうえで、最も大事なのはランディングページ（ユーザーが検索や広告リンクをクリックして到達してくるページ）です。 
一般的にＬＰ（ランディングページ）というと、商品やサービスの良い事だけを書き連ね、嘘か本当かも分からないユーザーのレビューや、雑誌やテレビで紹介されたという謳い文句が並んだページを想像する方も多いかもしれません。 
しかし、本当に検索をしているユーザーは、あの華美な装飾の嘘か本当かも分からないページを見たいのでしょうか？ 
ユーザーは、困って検索をしてきていることが多いため、「ユーザーの困りごと」を分かりやすく教えてあげる、もしくは、解決してあげる方法がある事を示唆することで、お問い合わせや資料請求につなげる事が有益です。 
そのため、ＬＰ（ランディングページ）は、記事ページや、動画でやり方を説明して、可能性を伝えてあげる事が重要になります。 
１つの記事が、あるキーワードで月間1000PVあるのなら、別の問題を解決してあげられる記事をつくる事で、さらにユーザーの悩みを解決してあげられ、お問い合わせしてくれる、または購入してくれる見込みユーザーの分母が増える事になります。 
ウェブサイトの運用では、単にウェブサイトの劣化やHTMLの修正が大事なのではなく、自動集客するためのページや導線を増やしていくことが最も重要な作業になります。 
そして、ユーザーからの問い合わせが来た際に、ウェブサイトへのクレームがあったら非常に有益な情報だと捉えられます。 
ユーザーからの反応や温度感は、意図した事柄が適切に届いているかを図るパラメーターです。悪い反応も、逆に言えば期待されているとポジティブに受け取りましょう。これを敏感に感じ取り、活かしていくことが大切です。 
作ったら終わりではありません。 
運用の中で効果が上がったのか、下がっているのか都度確認する必要があります。 
A/Bテストや、コンテンツの順序を入れ替えたり、キャッチコピーや見出しの改善を繰り返していく事で、効果を上げる仕組みにしていきます。 
 
<h2>プロにまかせる手もあります</h2>
戦略・設計をしっかり行うことが成果を出すために大切なことですが、 
非常に難しく感じてしまう事もあるかもしれません。 
そんな時は、専門家にアドバイスをもらうことも有用です。 
株式会社fiikaでは、ウェブのカウンセラーとして、ご自分ではなかなか気づけないアピールポイントを客観的に発見するお手伝いもしています。 
目標達成のために、本当にウェブサイトを作る必要があるのかというところからご相談にのっています。 
ご予算やご都合に合わせて、段階的にテコ入れしていくこともご提案できます。 
得意分野は、戦略・立案・情報設計です。 
もちろん、デザインも心象をよくするための一助になるため、長年培ってきたノウハウでおつくりします。 
デジタルマーケティング、ネットショップ構築や会社ホームページ構築、SNS運用、動画制作など、お気軽にご相談ください。

#ノウハウ

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

プロがやっている、効果が上がるウェブサイトの制作プロセス

#ノウハウ

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

プロがやっている、 効果が上がるウェブサイトの制作プロセス

プロがやっている、効果が上がるウェブサイトの制作プロセス