2021.06.10
最終更新：2026.02.19
WEBサイトリニューアルの手順や流れを実際の事例に沿って紹介してみた(ver. 2021)
こんにちは、RYOZEN Scratch Creations代表のみなせしゅんです。
突然ですが、つい先日当サイトをリニューアルしました。
このサイトはもともと2020年の4月にリリースしたもので、適宜改修を行いながら運営をしていたのですが、課題が積もってきたため大幅にリニューアルすることを決断しました。
その際に考えたことや行ったこと、実際の手順などなどを、WEBサイトリニューアルの事例としてご紹介させていただきます。
そもそもこのサイトは何のサイト？
本題に入る前に、初めてこちらのサイトに来ていただいた方に向けて、少しだけご説明をさせていただきます。
このサイトは、「RYOZEN Scratch Creations」というギルド型組織のWEBサイトです。コンテンツ制作を通じ、「人生がポジティブに変わる爪痕」を作り出していくことをビジョンとしています。
詳しくはAboutページをご覧ください。
では、本題に入ります。
実際に踏んだ手順をいくつかのステップに分けて書いていきます。長くなりますがお付き合いください。
- リニューアルの目的を言語化
- 要件定義・設計
- デザインカンプの作成
- コーディング
①リニューアルの目的を言語化
始めは「開設から1年経ったし課題もいろいろ出てきた気がするし大幅にリニューアルしたいな～～」程度の、なんとなくの気持ちからスタートしました。
ですがこういったことは目的が明確になっていないと着地点が見えず、いろいろ考えているうちに思考が迷宮入りするため、何を課題だと感じているのか、なぜリニューアルしたいと思ったのかを言語化しました。
ちなみに天下のWEB制作会社「LIG」さんの記事にもこのように書かれています。
冗談みたいなお話ですが、「春だから……」というような理由で時折、お問い合わせをいただくことがあります。いや僕らとしてはいいんですが。全然嬉しいのですけれども。この場合、「強い課題はないけどリニューアルをしよう」と考えた方の部下がWebのご担当となることが多く、ご担当の意気込みや熱意は薄れているのが常で、窓口としてのご負担に耐えられない可能性すら出てきてしまいます。
また目的意識の希薄化から「何を課題とし、解決策とするのか」というものが確定できなくなってしまいます。僕らも精一杯ご提案をおこなうのですが、本当の課題解決のためには圧倒的なヒアリングが必要になり、全般お任せされてしまうと、課題の本質に近づけません。
そうするとたとえ制作が完了したとしても、何の意味もなさないサイトが出来上がることがあります。これ以上コスパが悪いことが他にあるでしょうか。
僕らはプロとして、意味のないと考えることには「意味がない」と伝えますし、効果が薄いと考えることには「効果が薄いでしょう」と伝えるようにしています。僕らが作り手として最も怖いのは、鋭意をもって作り終わったものが、意味のないもので、誰にも使われず、誰も幸せにできないことなのです。
僕が自分の立場をいったん置いて、本当にお客様のためを思ったとき、目的がないサイトなら作らないことが最もコスパがよい、ということを言わなければなりません。
拝啓、お客様。Webサイト制作のコストはここにかかります。
そんなわけで、リニューアルの目的を明確にしていきました。
ちなみに考えをまとめたいとき、自分はGoogleドキュメントを使っています。
思い浮かんだ単語や文章をひたすらドキュメントに打って、単語の出現頻度から自分がどうしたいのかを探り、その感情を目的としてまとめるという流れです。
まとめた結果、リニューアルの目的は以下の2点に集約されました。
- より多くの方にコンテンツを届けられるようになりたい
- より沢山のお問い合わせをいただけるようになりたい
より多くの方にコンテンツを届けられるようになりたいという点について
このサイトを開設した当初、主なコンテンツはブログ記事とクライアントワークの制作実績だけでした。しかし時間が経つにつれ掲載できるコンテンツがぐっと増え、ありがたいことにGoogle検索からの流入がだんだんと増えてきました。
ところがそれに伴い直帰率も増えてきました。もともとどんなユーザーにどんなコンテンツにたどり着いてほしいのかが明確になっておらず、導線の設計等も特に行っていなかったことが原因だと思われます。
今後も掲載するコンテンツの幅を広げていく計画があるため、ここで一度扱う概念を整理し、拡張性を担保しつつ導線を組むことが必要だと考えました。
より沢山のお問い合わせをいただけるようになりたいという点について
以前のサイトは、当ギルド結成当初に組織としての実態がほぼゼロの状態で作成したものです。そのため、具体的に何を手掛けているかを説明するページがありませんでした。結局何をしている組織なのかよくわからないという印象を持たれてしまっていた可能性が無きにしも非ずです。
上でも書きましたが結成当初と比較すると手掛けられることがかなり増えてきたので、その実績をまずはトップページでざっくり伝え、実績ページでもしっかり伝えることで信頼を得られるようにしたいと考えました。
では、以上の2点を踏まえ、どう改善していくかを考えていきます。
②要件定義・設計
目的の設定ができたので、それを踏まえ要件定義と設計を進めていきます。今回は以下の流れで行いました。
- 具体的な数値目標(KGI・KPI)の設定
- 導線の設計
- 要改修箇所の選定
具体的な数値目標の設定
数値目標がないと何も始まらないため、まずはKGI・KPIを設定しました。
この作業があって初めて理想が具体的に見え、そこにたどり着くために何が必要なのか見えてきます。数字と聞くと逃げたくなる気持ちはわかりますがこの作業は絶対に必要です。
詳しくお見せすることはできないのですが、下の図の青いブロックがKGI、その下の白いブロックがKPI、その下にぶら下がっている文章たちが実際に行う施策です。
「より多くの方にコンテンツを届けられるようになる」「より沢山のお問い合わせをいただけるようになる」の定義を具体的な数字に落とし込み、この数字を叶えてくれるサイトにすることを目指します。
ちなみに今回は、MindMeisterというWEBアプリで上記の図を作りました。
マインドマップ的なものを作る際にめちゃめちゃおすすめなWEBアプリです。
KGI・KPIについてご存じない方は、こちらような記事も併せてご覧ください。
KGI・KPIとは？【違いをわかりやすく】設定のコツ、メリット
導線の設計
続いて導線の設計です。
リニューアルの目的である「より多くの方にコンテンツを届けられるようになる」「より沢山のお問い合わせをいただけるようになる」を叶えるためにはPV数の改善が必須です。
ちなみにPV数という指標をもう少し分解すると、以下のような指標に分けられます。
- 直帰率・回遊率
- リピート率
- 新規流入数
これらの数字は、やみくもにサイト内リンクを張りまくれば改善するというわけでもありません。そのため、誰に何を届けたいかという視点で導線のモデルケースを考えていく必要があります。
今回は4パターンのモデルケースを作成しました。
ケース1. どんな組織・サイトなのかをとりあえず見に来てくれた方
- 主なランディングページはトップページと想定
- ざっくり何をしている組織なのか伝えたい、あわよくばAboutも見てほしい
- そのあと実際に発信しているプロジェクトを認知してほしい、それ経由で記事とかプロダクトとかクライアントワークとかを見てもらえたらうれしい
- その流れの途中で、お仕事を依頼できる組織ですよ～～っていうのを認知してもらえたらうれしい
- いろいろ認知いただいた上で、印象に残ったモノを目当てに後日再訪いただけたらとてもうれしい
ケース2. 発信中のプロジェクトに興味を持ってくださっている方
- Twitterからの流入で、まずはプロジェクトに紐づく記事に着地することを想定
- 記事を読んでいただいた後シェアいただけたらうれしい
- シェアいただけなくても、同プロジェクトに紐づく他の記事にも興味を持ってもらえたらうれしい
- その流れでプロジェクトの概要説明ページにもアクセスしてもらえたらうれしい
- そのまま何らかの形で他のプロジェクトも紹介して、それらも認知してもらえたらうれしい
- なんならその流れでギルド自体にも興味を持ってもらえたらうれしい、あわよくばギルドのAboutページを見てもらえたらもっとうれしい
- いろいろ認知いただいた上で、印象に残ったモノを目当てに後日再訪いただけたらとてもうれしい
ケース3. Google検索やTwitterのシェアツイートから記事を見に来てくださった方
- ランディングページは各記事ページを想定
- 記事を読んだ後、あわよくばシェアいただけたらうれしい
- シェアいただけなくても、関連記事を読んでいただけたらめちゃめちゃうれしい
- あわよくばギルド自体にも興味を持ってもらえたらうれしい、Aboutページを見てもらえたらもっとうれしい
- いろいろ認知いただいた上で、印象に残ったモノを目当てに後日再訪いただけたらとてもうれしい
ケース4. クライアントワークの依頼先を探している方
- 「歯医者 ロゴ制作」のようなキーワードによるGoogle検索で、制作実績のページに着地することを想定
- 制作実績のページで、プロのクリエイターが制作していることをしっかりご説明し、信頼に繋げたい
- 他の制作実績にもアクセスいただき、様々なご依頼に対応できることをお伝えしたい
- あわよくば当ギルドをお仕事のご依頼先に選んでいただけたらこの上なくうれしい
要改修箇所の選定
導線のモデルケースができたところで、既存のサイトと比較してどこをどう改修すれば上記の導線を実現できるのかを考えていきました。
長くなってしまうため詳細は割愛しますが、ざっくり羅列すると以下のようになります。
- ファーストビューをイケてる感じにする
- トップページでざっくり何をしている組織なのか伝えられるようにする
- Aboutページ下部に各所へのリンクを設置する
- 各ページから関連する情報にアクセスしやすくする
- SNSシェアボタンを目立たせる
- ヘッダーの情報量を減らす
- フッターに各所へのリンクを設置する
- お問い合わせフォームのUIを改善する
③デザインカンプの作成
どこをどう改善するかの指標が決まったところで、ようやくデザインカンプの作成に移ります。
カンプ作成は以下の手順で行っていきました。
- 最近のWEBサイトのトレンドを調べる
- 各パーツの雰囲気をなんとなく決める
- ツールを用いてデザインを作成する
最近のWEBサイトのトレンドを調べる
まずは最近のトレンドをめちゃめちゃ調べました。比喩抜きで100サイトぐらい見た気がします。
気になったサイトを1つずつスクショし、「メディア・クール系」「コーポレート・ミニマル系」といった感じでジャンルを付け分類していきました。
ちなみに参考サイトを探すときは以下のようなサイトを使わせていただいています。
SANKOU! | Webデザイン制作の参考になる国内のステキなサイト集
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
各パーツの雰囲気をなんとなく決める
続いて、どんな雰囲気で作っていくかをざっくり決めていきます。
ジャンルごとに分類したスクショを見ながら、大元のトンマナ、ヘッダーやフッター、見出し、背景など、それぞれについてどの方向性でデザインを作るか検討しました。
ツールを用いてデザインを作成する
ある程度トンマナの方向性が見えてきたところで、デザインに移ります。
デザインに使用したツールはAdobe XDです。無料で使えてしかも軽量なのでめちゃめちゃおすすめです。
今回は以下の順番で簡易的なカンプを作成していきました。
- ヘッダー・フッター
- ファーストビュー
- トップページ
- Aboutページ
- その他
ヘッダー・フッター
まずは常に目に入る部分のデザインから制作を始めました。
共通パーツが先にできているほうが「今リニューアル作業してるんだ……！」という実感が湧き、他のページのデザインを作る際もモチベーションが冷めにくくなるためです(自分の場合)。
完全に気分の問題です。
ヘッダーとフッター、それぞれのBeforeとAfterはこんな感じになりました。
ヘッダー
▼Before▼
▼After▼
フッター
▼Before▼
▼After▼
ヘッダーは情報を減らし、フッターは情報を増やしました。
ヘッダーの情報を減らしたのには、初めて訪れた方が面食らわないように(迷わないように)する意図があります。
フッターは情報量をがっつり増やしています。上半分にアクセスいただきたいページを凝縮し、下半分にはサイトマップの役割を持たせました。記事を最後まで読んで下さった方に向けて、あわよくばギルド本体にも興味を持っていただけたら嬉しいな～～とアピールをする意図があります。
ファーストビュー
続いてファーストビューの制作に取り掛かりました。トンマナが凝縮された重要な部分なので早めに作ります。
どちらかと言えばWEBデザインよりもグラフィックデザインの毛色のほうが強い印象があるので、こちらはAdobe Illustratorを使用し案を作っていきました。
アイディアが狭まってしまうため、コーディングのしやすさは気にしたら負けだと思っています。
こちらがファーストビューのBeforeとAfterです。
▼Before▼
▼After▼
ファーストビューの下には、当ギルドが何を手掛けているかの具体的な説明が入ることをこの時点から想定していました。
そのためそちらとは対照に、こちらは思いっきり抽象的なデザインにしています。
トップページ
続いてトップページ(ファーストビューの下)です。
改修の要件である「ざっくり何をしている組織なのか伝えられるようにする」を叶えられるよう、まず全体の流れと情報の優先順位を考えていきました。
このページにおいてはそれぞれの記事単体よりも組織としての実態をアピールするほうが優先度が高いと判断したため、メディアサイト寄りのデザインからコーポレートサイト寄りのデザインに舵を切っています。
一部を切り取るとこんな感じです。
▼Before▼
▼After▼
(この画像だとぼやけていて見えないかもしれませんが)各セクションに説明を付けたことで、組織の実態が以前よりも伝わるようになった気がします。
Aboutページ
ファーストビューとトップページ全体を作ったところで、既存のAboutページのトンマナが新しいトンマナと噛み合わなくなってしまったため、こちらもデザインをリニューアルしました。
▼Before▼
▼After▼
「要改修箇所の選定」で設定した「Aboutページ下部に各所へのリンクを設置する」という改修要件も叶えています。ちなみにこれらのリンクは、Aboutを最後まで読んでくださった方に向けてせっかくなら他のページも回遊してほしいとアピールする意図があります。
その他のページ
その他細かい部分の改修についてはカンプを作らず、コーディング時に対応する方針で進めました。
④コーディング
デザインが終わったら次はコーディングをしていきます。こちらについては語ることもそんなにないのですが、3点だけ共有させていただきます。
フォントについて
フォントに関しては、無難にNoto Sans JPを選択しました。
CSS設計手法について
以前のサイトではこれといったCSS設計手法を取り入れておらず、とにかくゴリゴリにSCSSのネストとmixinを用いてなんとかしていました。ですがだいぶ保守に限界が出てきたので、FLOU(FLOCSSから派生)という設計手法を少しアレンジしたものに移行することを決めました。
実際にコーディングしてみると、やっぱり何らかの設計手法は採用したほうがいいなあという感想です。
苦労した点について
ファーストビューに斜線が降るアニメーションを実装しているのですが、これは少しだけ苦労しました。
こちらで斜線を降らせるアニメーションのスクリプトをご紹介しておりますので、よろしければご覧ください。
参考にした本
今回のリニューアルを行う上で、以下の書籍がものすごく参考になりました。
コンバージョンを上げるWebデザイン改善集
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。
多くのウェブサイトを改善してきた著者たちが、実際のデザイン事例 Before&After、汎用的に使える改善Tipsやコンバージョンに貢献しやすい施策を解説しています。サイトの種類が異なっても再現できるようにポイントを解説するだけでなく、次の一手のアイデア集として長く活用していだけるように、汎用的な内容を数多く紹介しています。 最後の章ではプロが現場で行う改善のプロセスを解説し、次の一手を打ち続けていくために必要な考え方についてまとめてあります。
こちらの本は、WEBサイトのリニューアルに焦点を当てた本です。
実際の事例のBeforeとAfterが掲載されているため、何がイマイチで何がベターなのかが一目でわかります。また事例だけでなく改善のTipsが46個も掲載されているため、新規でWEBサイトを作る際のアイディア帳としても使えます。
WEBサイトを制作する方であれば、まず間違いなく持っていて損はない一冊です。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
本書は415点の厳選した良質なWebサイトを集めた見本集です。レイアウト、配色、フォント、素材、プログラムなど、ページを構成しているデザインパーツまで分解して解説しているので、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。「アイデアが見つからない」「イメージはあるけど、何が必要で、どうつくればいいかわからない」といった時に必見の価値あり。パラパラめくって好きなページを見つけ出し、デザイン制作に役立ててください。
こちらの本は、WEBサイトのデザインに焦点を当てた本です。タイトルの通りアイディア帳として使えます。
デザインの雰囲気からだけでなく、業種やジャンル、レイアウトや構図からも探せるのが最大の特徴です。とりあえずパラパラとめくるだけで、「今回はこの雰囲気は違うかな～～」「これなら今回の雰囲気に合うかも」というようにある程度方向性を絞ることができます。
クライアントの方にご提案する際も使えますし、ヒアリングで「こちらのページとこちらのページ、どちらがイメージに近いですか？」といった質問をする際にも活躍します。
更には制作の流れや画像ファイルの扱い、配色などなどの基礎的な知識も教えてくれるので、これからWEB制作を始めたい方にもおすすめです。
あたらしい、あしらい。 あしらいに着目したデザインレイアウトの本
「けっきょく、よはく。」「ほんとに、フォント。」
大人気のデザイン書シリーズ第3弾!!!
本作は「あしらい」に着目。
「タイトルのあしらいは統一して」
「可愛い感じのあしらい入れて」
「このあしらい、なんかダサくない?」
このように、デザインの現場では
「あしらい」という言葉がよく飛び交います。
デザインで言う「あしらい」とは
「装飾」や「ディテール」と同義で使われます。
たかがあしらい、されどあしらい。
「あしらい」がていねいなデザインは全体が洗練されて見えます。
本書では今っぽくて抜け感のある
おしゃれな「あしらい」の基本とテクニックを紹介します。
こちらの本は、デザインで使用する「あしらい」に焦点を当てた本です。
一見WEBデザインではなくグラフィックデザイン寄りの内容にも見えますが、実はWEBデザインをされている方にこそおすすめしたい本です。ある程度WEBの知識が身についてくるとコーディングしやすいデザインを考えてしまいがちなのですが、この本はその枠をぶち壊してくれます。
特にパーツのデザインで悩みがちな方におすすめしたい一冊です。
リニューアルはゴールではなくスタート
そんなこんなでリニューアルが完了しました。
ですがこれはゴールではなくスタートです。このリニューアルには果たして効果があったのか、Googleアナリティクスを見ながら継続的に検証を行う必要があります。より良いサイトにすべく、これからも仮説検証を続けてまいります。
以上、サイトのリニューアルにあたり考えたこと・行ったことを共有させていただきました。
長めの記事になってしまいましたが、どなたかの参考になればとても幸いです。
WEBサイトリニューアルはとても手間のかかるものですが、完成した時の喜びもひとしおですよね。
皆様のWEB制作を陰ながら応援しています。
役に立ったよ～～という方がいらっしゃいましたら、ぜひ下部のボタンからシェアいただけたら嬉しいです！
Writerこの記事をかいたひと
みなせしゅん
ディレクター／エンジニア／デザイナー／
1994年生まれ、千葉県育ち。2019年より個人事業主として活動。
プランニングやディレクション、フロントエンドやバックエンドのコーディング・プログラミング、WEBデザインからグラフィックデザインまで、わりとなんでもやる人。
Related Topics関連記事
