コーポレートサイト｜アンダーワークス株式会社

品と親しみやすさのバランス
アンダーワークス：Webリニューアル

アンダーワークス株式会社は、デジタルマーケティングの戦略立案から運用までを一気通貫に支援する企業です。本件では、旧サイトの基調色やCMS管理画面の使い勝手を維持しながら、コミュニケーションデザインを改善しました。

プロジェクト期間とスコープ

ほぼ全工程を網羅する
Webサイトリニューアルを実施

プロジェクト期間は約4ヶ月。情報設計、デザイン制作、HTML/CSSコーティング、CMS「WordPress」の改修とSEO対策など、サイト構築のほぼ全工程を含むリニューアルを実施しています。

戦略

同社を理解してもらい、
お問い合わせ頂くには――。

今回リニューアルの主な目的は流入ユーザーを増やすこと、同社サービスやカルチャーをユーザーに正しく理解してもらうことでした。別サイトになっていたコーポレートサイト、ブログをひとつのサイトに統合し、検索キーワードが考慮されていなかった「サービス（事業）名称」は検索されやすい文言へ変更しました。
ブログ記事をより活かすため、リニューアル後の各サービス詳細ページには関連するブログ記事を表示させ、コンテンツ同士の関連性を高め検索エンジンクローラーから評価される構造としました。

リニューアル前によく見られたユーザー導線は、「トップページ」や「ブログ」からコンバージョン（CV）箇所である「お問合せ」へ遷移するというもの。しかし、導線の合間に同社の姿勢やメッセージを伝えるページが存在していない、つまりユーザーが同社への理解を深めないまま離脱している可能性が危惧されました。

そこでリニューアル時、社名や設立年を記載する「会社概要(/company)」と、所属するコンサルタントたちの大切にしていること、＋αの価値観といった個性も発信する「アンダーワークスとは(/aboutus)」に分けて構築。CV導線の合間に「アンダーワークスとは」を挟むことで、同社のことを理解した上でのお問合せを生み出すと共に、カルチャー発信の基盤としています。

デザイン

品と親しみやすさのバランス

旧サイトの色味はコーポレートカラーである「黒」が多くを占め、近寄りがたい印象を受けてしまうこともあり、クライアントに寄り添う同社の社風が十分に伝わっていないことが懸念されました。ユーザーフレンドリーにしたい、しかし「デジタルマーケティング」のスマートなイメージは保ちたい。

そこで、黒はセカンドカラーとし用途をルール化し、サイトが黒くなり過ぎないようにしました。また、コンテンツをグリッドに沿ってレイアウトし、コンテンツ名称をタイポグラフィのように立たせることで洗練された印象を作りました。
写真も旧サイトから大きく雰囲気を変更し、社内の様子が伝わるものにしました。専門的な内容が多く、1ページに占めるテキストの割合が多いと「難解」という印象になりがちだったので、写真の量とサイズもボリュームアップしました。

このサイトのCTA（Call To Action：行動喚起）であるお問い合わせボタンは、白黒で統一したサイトの中で唯一色を使いユーザーの注意を引き付けるようにしました。リラックスのイメージがある緑色を使うことで、お問い合わせの心理的ハードルを下げる効果を狙いました。

システム

「ブロックエディタ」を実装。
コンテンツ配信を促す

コーポレートサイトはリニューアル前、HTMLやCSSの知識がなくても直感的で扱いやすいCMS「WordPress」のプラグイン（拡張機能）「Page Builder(ページビルダー)」を活用し、更新されていました。しかし「同社のサービスやカルチャーをユーザーに正しく理解してもらう」ほどにデザイン性は豊富ではなく今回、管理画面の直感的な操作とデザイン性をどう両立させるかが課題に。そのためサイトデザインは、情報設計・デザイン制作・HTML/CSSコーティングを経て独自のものを制作する一方、管理画面には「WordPress 5.0」以降から搭載された「ブロックエディタ」を導入。「見出し」「段落」「画像」といった固まり（ブロック）を並び替えて記事投稿できるこの「ブロックエディタ」を実装することで、より先方社内での記事投稿を促し、新たなコンテンツ作成も行いやすいように構築しています。

まとめ

「自社のサービスやカルチャーをユーザーに正しく理解して欲しい」という、コミュニケーションデザインの改善に端を発した本リニューアル。デザイン面では、基調色「黒」が持つ洗練は残しつつも、親しみやすい印象に。システム面＝CMS「WordPress」構築については管理画面の直感的操作は維持しながら、デザイン性も担保するといったように、相反する要件をいかに実現させられるかに心を砕いたプロジェクトとなりました。