ノンデザイナーが行ったWEBサイトのリニューアルの流れ

こんにちは、kikiです！
マーケ活動の中で、私たちのサービスに興味・関心を持ってくれた方がまず目にすることになるWEBサイト。
直近WEBサイト関連の業務が複数（Wixを使った新規作成と既存サイトのリニューアル with エンジニア）があり、自分以外の人とも連携をとりながら、進められる進め方で形になったので、今回はその話をします！

1 . WEBサイト改修の目的などを定義

何かしら課題があるからこそ改善になると思うのですが、いきなりここをこうしたいなどから考えるのではなく、まずは「対象となるユーザー」「改修・新しいサイトの目的」を定義、改善の洗い出しを行います。

私の改修対象だったサイトは、TOCとTOB側のコンテンツが混じったブログサイトでした。
そのため、1番の改修の目的は、『TOCとTOBのコンテンツをわけ、ユーザーが読みやすいものにする』ということでした。

そして、それぞれTOCとTOBでユーザーを改めて定義し、それぞれのサイトの目的、どういう行動をユーザーにとって欲しいのかをまとめました。

ここがあることで、次からの行程が進めやすくなります！

2 . 競合調査/ベンチマーク探し

自分のサイトの目的、ユーザーが決まったところで、次は競合調査です。

対象が同じユーザーをターゲットとしている競合のサイトがどのようになっているのか確認します！

ここで私は2つのことをチェックするようにしています。

• どのようなページ構成になっているのか

• どのようなデザインがあるのか

• （どのようなコンテンツがあるのか（今後のために））

こうすることで、新しくする際のアイディアや、競合を超えるための構成などを考えることができます。

3 .  紙にページ構成を書き出す

ここでいきなり、FigmaやAdobe XDなどのツールに落とすのではなく、まずは鉛筆 with 消しゴムで紙にページ構成を書き出すようにしています。（俗にいうワイヤーフレーム作成）

まず紙に鉛筆 with 消しゴムで作成する目的としては、
WEB上で作成するより簡単に修正できるからです！

多くの場合は、自分だけでなく、他者との合意を必要となると思うので、
修正が入るはずです。
その際にWEB上で作成すると時間がかかりすぎて、作業時間が無駄になってしまいます。

紙に作成したワイヤーフレームで合意が取れたら、やっと次の段階（WEB上で作成）です！

4. Figmaを活用

私はこのタイミングでカラーコードと文字サイズの策定を行いました。1 . でやってしまっても問題ないとは思います！

前の行程で作成したワイヤーフレームに基づき、細かいパーツやデザインFigma上で作成していきます。
エンジニアチームと作業するためには、何かしらのツールに書き起こしてしまった方がやりやすいかと思います！

5 . エンジニアとMTG

そして先ほど作成したデザインを持って、エンジニアとMTG！

ノーコードツールを使って自分で作成することが多いのですが、今回のサイトは元があったので、社内のエンジニアチームと連携する必要があったので、エンジニアとビジネス側の希望を伝えるMTGを実施しました。

エンジニアなしでもWEBサイトを作成する方法については、こちら↓

ここでは、実際に実装が可能なのか、必要最低限の機能はどれか、どれくらいの時間軸で作成可能なものかディスカッションしていました。

この後、エンジニアが実際の作業への分解、タイムラインの策定を行ってくれ、公開という流れになります。

6 . さらなる改善に向けて

私の会社ではMVP、アジャイル開発を行っているため、1回で完全なものが出来が上がりません。

そのため、スプレッドシートを用いて改善点の共有、優先順位づけ、作業タイムラインを引くことを定期的に行っています。

まとめ

今回は、なんでも一人でこなすマーケターが社内のページを改善するために行った流れについてお話しました！

まだまだ改善方法も様子を見ながらより良い方法を探っているところではありますが、それなりにできると思います。
WEBサイト自体もまだまだ改善の余地ありなので、引き続き色んなところから良いものを盗みながら頑張ります〜！！