
こんにちは!創業60年以上続く名古屋のデザイン会社、アドパブリシティ(通称「アドパブ」)では、
このたび、弊社のWeb制作のサービスサイト「ウェブパートナーズ」のリニューアルをすることにしました!
現在制作真っ只中!! せっかくの自社のサービスサイト制作ということで、普段私たちがどのようにWebサイトを制作しているのか?!を、
実際の制作物の画像とともに、ダイジェストでお届けしてまいります!
現状の解析・分析
まず第一に現状のサイトの把握から始めます。解析ソフトを使い、アクセス数、コンバージョン(お問い合せ)数、ユーザー属性や検索キーワードなどを確認します。
(ちなみにGoogle検索「Studio制作 名古屋」で1ページ目表示です!✨)
既存サイトはStudioでのサイト制作に特化していることと、Topページに情報の大半を詰め込んでいるコンパクトなサイトです。この点を、拡張&改善してまいります!
https://www.web-ptrs.com/
コンセプト変更
今回は、「ウェブパートナーズ」をコンセプトから変更します。
今までの「ノーコードツールStudioでのWeb制作に特化したサービスサイト」から、「ADPUBのWEB制作サービスのサイト」に内容を拡張し、StudioだけでなくWordPressもCMSを使わないサイト制作も含め、さらにWebだけでなく、オフラインの販促ツールに展開することを強みとして押出します。
そして、ターゲットを「BtoB企業のWeb制作やプロモーションを任された担当者様」に定め、デザインのトーン&マナーの主軸とします。
さらに、より覚えてもらいやすい&検索しやすいワードとして、英字の「WEBパートナーズ」にサービス名を変更しました。
プランニング・ワイヤーフレーム(WF)制作
今回のリニューアルプロジェクトは、3名でプランニング。
打ち合わせを重ね、3名のWeb制作に対する考えや、今後のWEB制作のニーズについての考えをすり合わせ、文章を定めていきます。
ターゲットがどのような情報が求められているかを仮定し情報を整理しながら、コンテンツやページの構成、ナビゲーションなどのUIをデザインし、ワイヤーフレームを作成します。
デザイン
作成したワイヤーフレームをもとにデザインをスタート。ファーストビューを2〜3パターン作成し、修正を重ね、デザインの方向性をすり合わせをします。
BtoBのWeb制作ということで専門性の高い内容のサイトになります。ナビゲーター役がいたほうが理解されやすいため、今回は「キャラクター」を登場させようということに。 サイトの顔となって、クライアントに寄り添い、一緒にワクワクしながら創り上げてくれる心強い味方の誕生です!デザイナーがワクワクしすぎて、デザインの初稿はかなりカラフルになってしまいました(笑)。
デザイン修正
初校プレビュー後、ターゲットに合わせて、色数を減らしたり、イラストを「アイコン」に変更するなどの修正を行いました。
「わかりづらさ」や「伝わりにくさ」を改善し、レイアウトやイラストの修正、文言の修正も行います。
最終的に、色をブルー基調でまとめ、メインビジュアルやイラストなどもすべて変更し、ようやく「B to Bプロモーション」に特化したWebサイト制作サービスサイトらしいデザインになりました。キャラクターがいることで、固くなりすぎず、親近感のあるサイトになっているかと思います。
デザインが決まった部分からコーディングスタート
デザインが9割完成したところで、いよいよコーディングです。デザインデータを元に、htmlやcssなどでコード化します。
Webパートナーズでは、投稿記事や制作実績ページなどのコンテンツを追加していきたいので、WordPress(ワードプレス)というCMS(コンテンツマネージメントシステム)を使います。WordPressを構築するために、phpファイルにしていきます。
コーディングが完成したら、サーバーにテスト環境をつくります。記事の投稿やお問い合せフォームなどの動的(プログラムで動く)な部分のチェックや、ブラウザ毎、PCとスマホ、WinとMacでのチェックなど、動作検証をしていきます。