CASE STUDY-08｜100時間でサービスリニューアルした事例

わたしが運営するノーコード開発サービスを2023年6月1日にリニューアル。サービスの見直しからサービスサイトの設計・デザイン・STUDIO開発・公開、その後の対応までに費やした時間は合計100時間。その制作工程とそれぞれの工数、工程ごとの対応した内容を事例として紹介。

制作工程と100時間の内訳

2019年に立ち上げたサービス内容をベースに、サービスの見直しと課題の洗い出しから着手し、およそ2.5ヶ月ほどで公開した。

ページ設計・デザイン・STUDIO開発は行ったり来たりしながら徐々に作り上げたのでぴったり正確な工数ではないけれど、おおよそ以下のような時間で対応。

ピンク：サービス設計／青：デザイン／緑：STUDIO開発

1. サービス見直し・課題洗い出し　16h

2. 情報整理・設計　18h

3. WEBサイトページ設計／デザイン　24h

4. STUDIO開発　28h

5. 公開〜公開後対応　6h

6. ブログ更新　4h

7. SNS 投稿用データ作成・投稿　4h

＊制作会社で対応する場合はチームで対応するので設計資料が完成してからデザインを進めることが一般的であり効率がよいが、わたしがひとりで全て対応する場合は、ある程度の格子ができたら設計とデザインは一気に進めることが多く、その方が効率的でかなり時短になる。

1. サービス見直し・課題洗い出し - 16h

以下の項目を見直し・課題を洗い出して、リニューアルで再検討するべき要素を考える。

• 改めてどんなサービスなのか？

• クライアントにとってメリットは何か？

• 競合調査

• サービス紹介のわかりやすさ

• 事例紹介のわかりやすさ

実際はメモレベルで始めたが、まとめると以下のような感じ。
＊このページにある資料はすべてnote用にわかりやすく簡略化してまとめたもの。

サービス特徴・旧サービスの訴求ポイントを書き出して課題を抽出

WEB制作会社・フリーランスを比較して可視化してみると、
このサービスのベネフィットが見えてくる

整理した内容をまとめると、リニューアルのポイントは以下3つ。

リニューアルのポイントを3つに決定

2. 情報整理・設計 - 18h

サービスの目的・ターゲット・ベネフィットを整理してコンセプト・デザインの方向性を再定義し、必要なコンテンツを絞り込んでいく。さらに現状のメディア全体を可視化して整理。

サービスのコンセプト設計

サービスの目的とターゲットを整理する

サービスの特徴から利用するベネフィットを明確にする

さらにサービスのコンセプトを再定義。
この時点で、WEBサイトで使用するコピーの骨格が完成。

サービスにとって大事なメッセージなので、何度も手を入れて完成

デザインのコンセプト設計

キーワードからデザインの方向性を考える。

たくさんキーワードを出して、グルーピングしていく

キーワードを整理して、デザインのコンセプトを導き出す。

このコンセプトを元にどんなデザインがよいか検討する

参考になりそうなクオリティの高いデザインをたくさん集めて、コンセプトと照らし合わせながら、方向性を絞っていく。

たくさんの参考サイトからデザインの方向性を絞り込む

サービスサイト設計

当初トップページとお問い合わせページの2ページ構成で考えていたが、コンテンツを整理していくうちに、他に2コンテンツの独立したページを作成することに。

サービスを紹介する上で必要な要素を可視化し構造化していく

メディアの整理

サービスのメディアとそれぞれの要素を可視化することで、アクティブなもの・そうでないもの、活用できるものを整理。

可視化して要素と導線を整理する

3. WEBサイトページ設計／デザイン - 24h

2.で定義したデザインコンセプト・サービスサイト設計から、各ページの詳細内容を決定しデザインを進める。色・フォントの選定など細かい部分は割愛。

完成したデザインはこちら。

各要素のデザイン

コンセプトを意識して、デザインのポイントは以下のような感じ。

• アニメーションを想定したあしらい・レイアウト

• 背景のグラデーションで奥行き感を

• 色選定・配色のバランスはカジュアルすぎない印象に

• ページごとに色の変化をつけてわくわく感を演出

• サービスをイメージで訴求することが難しいので、メインビジュアルに事例を活用

4. STUDIO開発 - 28h

サービスサイトのリニューアルにあたり、WixからSTUDIOへ変更。現時点では機能面を考えるとWixの方がかなり充実しているが、STUDIOのデザインの自由度の高さが決め手となった。デザイン時点ではどちらにするか決めかねていたため、デザインで使用していたフォントが使えず変更することに。（Wixでは独自フォントの使用が可能）

デザインプレビューの精度がかなり高いので、PC・タブレット・スマホそれぞれプレビューでチェックしながら、さくさく開発が進んだ。

最終的に、文章校正やデザイン調整に4時間ほど使って、完成。

5. 公開〜公開後対応　6h

公開から公開後に対応することの流れ。

• STUDIOの有料プラン契約／Wixは自動更新なしに切り替え

• WixからSTUDIOへDNSレコードを移行

• 公開＆チェック

• SNSデバッグ

• 計測ツールの設定・計測チェック

  • Google Analytics

  • Google タグマネージャー

  • Google Search Console

• www.問題発生（未解決）

WixからSTUDIOへの移行がややこしかったので整理

資料内のURLは全てダミー

今回はWixからSTUDIOへ移行したため、DNSの書き換えに通常よりも時間がかかった。DNSレコードがWix側に書かれていたので、一度ドメイン（お名前.com）のネームサーバにDNSレコード情報を追加してWEBサイトの表示確認をしてから、さらにネームサーバをSTUDIOのDNSレコードに書き換えるという手順で行った。それぞれのステップでしばらく時間がかかるので、なんだかんだで夜になってからSTUDIOでWEBサイトの公開処理をして、翌朝に公開されたことを確認した。

www. 問題について
STUDIOではサブドメインがきれないため、「www」のあり・なしでリダイレクトすることができず、実現方法の調査に時間がかかった。お名前.comのURL転送Plus（httpのみ対応／httpsができず）や、GTMリダイレクト（ページが読み込まれないのでリダイレクトしない）、その他いろいろ試したもののどれも実現できず。サーバを別で用意してhtaccessで設定する他なさそう。これでは本末転倒なので・・（Web制作ツールの良さが消える）早く解決してほしいところ。

6. ブログ更新　4h

ブログのデザインも、WEBサイトのデザインに合わせてリニューアル。また2.でメディアの整理をした通り、ブログに新たに「事例」を追加。

7. SNS 投稿用データ作成・投稿　4h

instagramに実際に投稿された時のイメージを作成してデザインを確認する

投稿する内容を決定し、文章・画像を用意。投稿するスケジュールを決定し、最初の投稿してひとまず完了。

・・・

オリジナルのWEBサイトをノーコードで。｜CHOYFUL WEB DESIGN SALON

CHOYFUL Blog ｜オリジナルのWEBサイトをノーコードで。