サイト制作・運用
ポートフォリオからSEOで集客できるWebサイトにリニューアルする全工程を紹介

2021年12月1日に当事業サイトのトップページをリニューアルし公開しました。今回の記事では、リニューアルのきっかけ編、サイトデザイン編、コーティングスキル編、時間的・費用的コスト・作成期間編、今後の施策編と大きく5つに分けて書きました。

興味のある箇所だけでも良いので参考などにしていただければ嬉しいです。

リニューアルのきっかけ編

リニューアル前の古いポートフォリオサイト
リニューアル前の古いポートフォリオサイト

大前提として、元々このサイトは2015年9月にポートフォリオサイトとして作成しました。当時はそこまでスキルがなかったので、WordPressの無料の海外テーマを色々漁って自分が気に入るデザインのものを選択しました。

ポートフォリオなので、このサイトを通じて集客するという目的はなく、自己紹介的な要素やブログを書いていくために用意したもので、あくまでクライアント様に自分をもっと良く知ってもらうためのツールでした。

ですので、自分の趣向を取り入れて全体的なデザイン・配色はダークカラーを採用し、トップページはコンテンツを配置せず、ナビゲーションリンクだけを置くといったシンプルな構造・デザインにしていました。

きっかけはSEOにおけるDR指標

某オンラインサロンに加入してSEOを勉強していました。これについては別のブログ記事でまとめてるので気になる方はご覧ください。

上記記事にも詳しく書いてますが、ドメインの強さを測る指標のひとつである「DR指標」を調べた時、当事業のドメインの「DR指標」が、他の事業サイトのドメインに比べて高いことがわかりました。

このドメインを取得してから6年以上経っており、趣味レベルで書いていたブログ記事に数件の被リンクが付いていたことが要因でした。 (毎月欠かさずブログは続けていたことが良い結果につながったのかな!)

となれば、現状のポートフォリオサイト(特に、ナビゲーションだけを置いたトップページ)は、SEOの観点から非常に低質なWebページであり、SEOのよる集客を阻害している大きな要因だという気付きがありました。

大阪のWeb系フリーランスの方とお話する機会

個人レベルでSEOで集客するということに諦めていたという気持ちがあったのも事実です。他業種においてはわかりませんが、「ホームページ制作」のキーワードは競合が多く、予算の規模感含め、個人の事業サイトでは太刀打ちでき無いと思い込んでいました。

Twitter経由で、同じ大阪のWeb系フリーランスさんが主催している勉強会に参加させていただく機会がありました。そこで、Web制作の案件をほとんどSEO経由で受注しているという話をされていました。

そのキーワードはいわゆるビッグワードではなく、地域+「フリーランス」+ホームページ制作の3つの複合ワードでしたが、継続的にSEO経由で仕事を受注されているということでした。

さすがに3つ複合ワードだと、SEOのインパクトはないと考えていたので、同じフリーランスの方が、SEO経由で定期的に仕事を受注しているという事実に衝撃を受けました。ちなみに、その方のサイトのDR指標は僕の事業サイトに比べて低かったので、今のポートフォリオサイトのままではマイナスではないのか?と考えるようになりました。

以上の2点により、まずはポートフォリオサイトからSEOで集客できる事業サイトに作り替えようと思い立ちました。

ターゲット・サイトデザイン・コンテンツ編

ターゲット・サイトデザイン・コンテンツ編<

サイトリニューアルしていく過程を、ターゲット・サイトデザイン・コンテンツに分けて考えたことをまとめました。

ターゲット・強みについて

Web制作事業というのは、個人事業主・企業・法人を対象に、特に業種を絞らず提供できるサービスです。そういった業界なので、差別化するためにWeb制作事業の世界では業種に特化したターゲティングや、自分の事業の強さ(制作クオリティ、ブランディングやSEO、マーケティングなど)を押し出している印象があります。

自分の事業サイトリニューアルに関しては、あくまで今まで通り「個人事業主・中小企業」を対象としたターゲットに留め、トップページのコンテンツを作り込み、SEOの流入を意識したサイト構造にするということを決めました。

今までやってきた事業を表層化し、自分の強みはなにか?を問い続けてとにかく、分厚いコンテンツにしました。

ウケるデザインへ

今までは、ポートフォリオサイトということもあり自分が好きなように、自分が好きなデザインで作ってきました。しかしリニューアルにあたり、まずは受け入れられやすいウケるデザインへの転換を考えました。

ダーク系デザインをやめた

大きな変更点として今までのダーク系デザインを辞める決断をしました。
「ウケる」ことを考えた時、ダーク系デザインは千差万別に受け入れられるものでないからです(マイナスの印象になりうることは避けたかった)。

また、昨今の流行でダークモードがいろんなアプリ・OSで標準化されてきたことで、「ダーク系デザイン」に差別化する要素がなくなってきました。そういった点からトップページ含め全体の背景色は白系にしました。

配色の選定

ここも大きく迷いました。というのも、配色に関していえば、ブログで使用している色との整合性もあったからです。ブログという性質上、ブログではできるだけ落ち着いた色を選定していました。

ただトップページの配色に関していえば、ブログとは目的が違うので、ブログの配色は残しつつ別の配色も取り入れました。「ウケるデザイン」を考えた時、明るい印象を与える「黄色」をまずは採用しました。

個人的に好きだ!という理由で、ビジネスには向かない「赤」を使用したかったので、配色選定は混迷を極めました・・・ 色をたくさん使うことには抵抗があり、そもそも赤を取り入れたサイトデザインというのはなかなか少なく、かなり時間を消費しました。

そういった悩みを上手く解決したのがグラデーションの採用でした。赤の配色はかなり限定的に抑えて、黄色、オレンジ、赤のグラデーションによってサイトデザインにも幅ができました。

グレードがわかりやすい3つの料金プラン
グレードがわかりやすい3つの料金プラン

例えば、今回は料金プランを三つの形にしたのですが、黄色とオレンジの配色を活かしてグレードをわかりやすく示しました。

縦線軸が黄色から赤にグラデーション
縦線軸が黄色から赤にグラデーション

また、フリーランスのコンテンツ部分も縦線軸が黄色から赤にグラデーションさせることで、終局に向かっていることを配色で示せたと感じています。

グラデーションのボーダーを採用した見出し
グラデーションのボーダーを採用した見出し

その他には、h1の見出しのボーダー・ヘッダーの問い合わせボタンの背景色にグラデーションを採用し、極力色の強い赤はおさえたデザインにしました。
(厳密には、黄色オレンジのグラデーションも作成して使い分けをしています。)

今回のサイトリニューアルでどのような配色ツールやサイトを利用したかは下記ブログ記事で紹介しました。

SEOを意識したコンテンツ

SEOで集客できる事業サイトにするために、ページの統合やキーワード選定、被リンクなどのSEOをコンテンツ編集にどう取り入れたかについて書いています。

ページの統合

トップページを作っていくにあたり、下層ページのコンテンツをトップページに集約することを決めました。

理由としては、スマホの登場でページ分散型のサイトよりは、ページ集約型のサイトが好まれる傾向が増えてきたからです。スクロールしやすくなり、自分が知りたいコンテンツに早くアクセスすることができるようになりました。
そして何より、充実したコンテンツにすることはSEOに大きく貢献すると考えました。

トップページのコンテンツそのものをかなり分厚くするため、リニューアル前に下層ページとしてあった「料金・プラン」「よくあるご質問」「コンセプト」「ホームページ制作の流れ」のページを、トップページにコンテンツとして再設計し統合しました。

フリーランスを意識したコンテンツ

「ホームページ制作」+「大阪・関西」の地域ワードを前提したキーワードでコンテンツを作りました。

フリーランスを意識したコンテンツ
フリーランスを意識したコンテンツ

それ以外だと、「フリーランス」という言葉を意識してキーワードに含めました。具体的には、下層ページにもなかった「フリーランスだからこその強み」を作り、なぜフリーランスに頼むのか?を意識してコンテンツを作りました。

具体的には、

  • 制作料金・費用相場が安い
  • コミュニケーションコストがシンプル
  • ホームページ完成・納品、修正対応が早い
  • クライアント様ひとりひとり丁寧にサポート

などのフリーランスの強みを強調しつつも、デメリットにも触れました。
クライアント様にデメリットも提示することで、今後のコミュニケーションコストも下げれると考えました。

被リンクを意識したデザイン

どこからの被リンクを獲得していくか?を考えた時に、候補にしたのがWebデザインを紹介したギャラリーサイトです。

紹介していただけるよう具体的に取り入れたことは、

  • 先進性・斬新性
  • モダンなコーディングスキルを使ってアニメーション
  • イラストを豊富に使ったわかりやすさ・見やすさを追求
  • 見出しセクションに縦書きの英字
  • 縦線軸を意識したコンテンツの配置

などです。

まだこの辺りは実際にギャラリーサイトさんに申請依頼を出していない状態なので、どうなるか分からないですが、一つでも引っかかれば良いなーとは思っております。

コーディングスキル編

コーディングスキル編<

デザイン・コンテンツを作った後は、今度はコーディングスキル編について書いていきます。

脱Internet Explore

2020年6月16日をもってInternet Explorer(IE)のサポートは終了になることが告知されています。ただし、クライアントワークではIEを意識したコーディングをする必要がありましたが、今回は自分の事業サイトということで思い切って-webkit-text-strokeプロパティを使うことで、文字の背景色をズラしたデザインを実現することができました。

-webkit-text-strokeプロパティ

text-shadow:2px 2px 0px #fff;
-webkit-text-stroke:2px #000;
color:transparent;

見出しの背景色をズラしたデザインはこちらのCSSで実装しました。

WebP・AVIFでサイトを高速化

画像を使用するところは、pictureタグを使用してWebPを使用しました。ちなみにトップのメイン画像に関してはAVIFまで作成してます。また、イラストやアイコンについては、SVGで実装しています。
このあたりのIE終了後の画像ベストプラクティスに関する技術は下記のブログでまとめました。

CSSのみで横カルーセル実装

「制作の流れから戦略的運営まで」で使用されている横にスライドできるカルーセルはIEで動かないわけではないですが、scroll-snap-alignプロパティはIEに対応していないのでスナップが効かない状態となります(横スクロールは問題ありません)。

脱jQuery

クライアントワークではjQueryは使っているものの、トップページにjQueryを使用しませんでした。jQueryそのものを否定しているわけではないですが、保守性・スピード面などを考慮して、jQueryは採用しませんでした(ブログページなどではまだ使ってます)。

例えば、JS周りは

  • プログレスバー・スムーススクロール:VanillaJS
  • スマホメニューやポップアップ:Micromodal.js
  • 制作実績やブログスライダー:Swiper.js
  • スクロールアニメーション:Intersection Observer

を採用しました。

スクロールアニメーションについては、途中までGSAPというアニメーションライブラリを使っていたんですが、自分のスキル不足で今回は断念。とても有名なアニメーションライブラリなので、どこかでまたチャレンジしてみたいです。

このリニューアルを機に、トップページしか使用していないJSがあるなど、CSS・JS周りが複雑になってきたので、functions.phpでJSとCSSを管理するようにしました。詳しくは、下記記事にてまとめています。

時間的・費用的コスト・作成期間編

通常はトップページ改修だけであれば、2ヶ月もかからないのですが、

  • 写真撮影
  • イラスト発注
  • 全く別のデザイン
  • 全てのライティングコンテンツ
  • リファクタリング
  • モダンなコーディング技術の採用

などに時間的・費用的コストがかかりました。

費用的コストでいうと、僕の写真撮影は3万、イラスト・アイコンの発注は8万、その他の、ライティング、デザイン、コーディング全て個人でやりました。全て自分でやった分のコストは浮いたようにも思えますが、時間的コストや自分のクライアントワークをお断りするケースもあったので、トップページだけでも、おおよそ100万単位のコストがかかったと考えています。

とはいっても全てのクライアントワークを断るわけにもいかず、クライアントワークと並行していたこともあったので、着想からトップページ公開までは6ヶ月以上が経過していました。

今後の施策編

今後の施策編<

サイト全般にいえますが、サイトは作ってからがスタートです。トップページを改修し終わった今、今後やっていきたいことを書きます。

既存顧客へのインタビューコンテンツ

サイトリニューアルと合わせて進行していたプロジェクトが、既存顧客のインタビューする「お客様の声」というコンテンツです。クライアントさんに納品したサイトの効果をうかがう良い機会にもなりますし、自分の事業の信用価値を高める上で非常に有用なコンテンツです。

高頻度に更新できるコンテンツではないですが、クライアントさんに協力していただける限りはコツコツと更新していきます。

下記にて「お客様の声」を公開することができました。

既存コンテンツの修正・リニューアル

1点目は事業概要ページを含めた下層ページのリニューアルです。
特に、事業ページはWebサイト全体でもよく見られているページなので、他のページとは違ったデザインやアニメーションで実装したいです(ここでGSAP3かな?)。

2点目はブログ全体の改修です。
ブログの一覧・アーカイブ含めて、もっと見やすいデザインを追求したり、検索などの機能なども実装したいです。ブログ記事数がだいぶ膨れてきて修正をかけていくのもコストが掛かかるようになってます。また、薄いコンテンツ発信はSEOの面から良くない可能性もあり、よく考えていく必要があります。

リニューアルにかかりっきりなこともあり、ブログの更新がだいぶ止まっていたので、ブログの更新も進めていきます。

リンクビルディング

事業概要ページが整えば、次は被リンクを獲得するためにリンクビルディングに取り組みます。

メインは競合の被リンクを調査して、「僕のサイトにもリンク貼ってください!」というお願いをしていくことがベースにはなります。個人でどこまでやれるのか?そして、被リンクが増えることでどういった成果につながっていくかやってみないとわからないことが多く楽しみです。

被リンク営業と並行して、コンテンツマーケティングにも注力していくことになるでしょう。 どういった切り口で参入して行くかはまだまだ考えている段階ではありますが、成果が出るように勉強と行動を重ねていきます。
(現段階では、「ホームページ制作」というキーワードでは被リンクをいくらがんばっても、個人サイトでは上位進出は難しいと考えています。)

まとめ:サイトリニューアルは大変だ!!

長編記事でしたが、最後まで読んでいただきありがとうございました!

サイトリニューアルに至った経緯、またどのようにリニューアルしていったかを
・リニューアルのきっかけ編
・サイトデザイン編
・コーティングスキル編
・時間的・費用的コスト・作成期間編
・今後の施策編
と、ざっとまとめてきました。
(長かったですが、最後まで見ていただいてありがとうございます!)

何か1つでも参考にしていただけるところがあれば嬉しいです!

トップページのリニューアルが終わり、SEO流入を狙う土台はできました!!
もちろん、今後もやることが山積みではありますが、サイト集客の結果・成果などもブログで公開していければと考えております。
(実は、1件このトップページを見ていただいた方から受注が決まりましたー!嬉しい!)

ホームページ制作ご対応エリア

LIVALESTは、個人のフリーランスとして活動しています。全国対応ではなく、大阪を中心とした関西圏の直接お会いできる距離を重要視しています。

直接、お話をお伺いすることで、広く深くクライアント様のビジネスを理解し、ホームページを通じて、要望を実現いたします。

  • 大阪府:
  • 池田
  • 泉大津
  • 泉佐野
  • 和泉
  • 茨木
  • 大阪狭山
  • 旭区
  • 阿倍野区
  • 生野区
  • 北区
  • 此花区
  • 城東区
  • 住之江区
  • 住吉区
  • 大正区
  • 中央区
  • 鶴見区
  • 天王寺区
  • 浪速区
  • 西区
  • 西成区
  • 西淀川区
  • 東住吉区
  • 東成区
  • 東淀川区
  • 平野区
  • 福島区
  • 港区
  • 都島区
  • 淀川区
  • 貝塚
  • 柏原
  • 交野
  • 門真
  • 河内長野
  • 岸和田
  • 四條畷
  • 吹田
  • 摂津
  • 泉南
  • 高石
  • 高槻
  • 大東
  • 豊中
  • 富田林
  • 寝屋川
  • 羽曳野
  • 阪南
  • 東大阪
  • 枚方
  • 藤井寺
  • 松原
  • 箕面
  • 守口
  • 八尾
  • 兵庫県:
  • 神戸
  • 姫路
  • 尼崎
  • 明石
  • 西宮
  • 洲本
  • 芦屋
  • 伊丹
  • 相生
  • 豊岡
  • 加古川
  • 赤穂
  • 西脇
  • 宝塚
  • 三木
  • 高砂
  • 川西
  • 小野
  • 三田
  • 加西
  • 丹波篠山
  • 養父
  • 丹波
  • 南あわじ
  • 朝来
  • 淡路
  • 宍粟
  • 加東
  • たつの
  • 京都府:
  • 京都
  • 福知山
  • 舞鶴
  • 綾部
  • 宇治
  • 宮津
  • 亀岡
  • 城陽
  • 向日
  • 長岡京
  • 八幡
  • 京田辺
  • 京丹後
  • 南丹
  • 木津川
  • 和歌山県:
  • 和歌山
  • 海南
  • 橋本
  • 有田
  • 御坊
  • 田辺
  • 新宮
  • 紀の川
  • 岩出
  • 奈良県:
  • 奈良
  • 大和高田
  • 大和郡山
  • 天理
  • 橿原
  • 桜井
  • 五條
  • 御所
  • 生駒
  • 香芝
  • 葛城
  • 宇陀
  • 滋賀県:
  • 大津
  • 彦根
  • 長浜
  • 近江八幡
  • 草津
  • 守山
  • 栗東
  • 甲賀
  • 野洲
  • 湖南
  • 高島
  • 東近江
  • 米原

ホームページ制作やWeb集客、
リニューアルやサイトの管理・運用・更新まで、
あなたのご相談・ご依頼をお待ちしております。

お電話でのお問い合わせ

050-5604-7128 平日12:00 ~ 18:00

24時間以内に必ず、ご連絡させていただきます。

ホームページ制作実績一覧