制作会社の自社サイトリニューアル事例｜ブランディング・技術・公開後データを解説

なぜ自社サイトをリニューアルしたのか

旧サイトの課題は、現在のShareDanが提供していることや目指している姿と、サイトから受ける印象が合わなくなっていたことです。制作・開発の相談、当時の採用活動、情報発信の入り口としても、期待する役割を十分に果たせていませんでした。

制作・開発の相談：リニューアル前は、サイトを名刺代わりと考え「あればいい」という位置づけでした。そのため、サイトをきっかけにした相談は増やせていませんでした。

採用：当時はエンジニア採用に苦戦していましたが、自社サイトに採用ページがありませんでした。現在は採用活動を行っていないため、本記事ではリニューアル当時の目的として扱います。

情報発信：そもそも継続的に発信するブログやコンテンツがなく、公開後に情報を積み上げていく仕組みもありませんでした。

リニューアルの必要性は以前から認識していましたが、社内承認に時間を要し、具体的な制作に着手できない時期が続いていました。承認後は、デザインの刷新と並行して、「誰が、どんな課題や情報を求めてサイトに辿り着くのか」を整理しました。

リニューアル当時の対象は、「Web制作やシステム開発を検討している中小・成長企業の担当者」と「エンジニア採用の候補者」の2軸です。誰に何を伝え、どんな行動につなげたいのかを決めてから、情報構成やデザインを具体化しました。

ShareDanのブランディングを、サイト全体でどう表現したか

デザインでは、トレンド感を取り入れて印象を刷新することと、ShareDanのブランディングをサイト全体で表現することの両方を重視しました。色や写真だけでなく、ブランドメッセージ、情報の見せ方、画面上の動き、スマートフォンでの使いやすさまで、一つの方針で設計しています。

ブランドメッセージをページ全体の軸にした

「We Build. We Grow. / 作るだけじゃない。仕組みも、人も、育てる制作会社」という言葉を策定し、ページ全体の語り口を揃えました。

単にサービス項目を並べるのではなく、Webサイトを作ること、その後の仕組みを整えること、人材育成にも向き合うことを、ShareDanの姿勢として伝えるための言葉です。旧サイトと現在の会社像のずれを埋めるうえでも、デザインと文章を別々に考えないことを意識しました。

コーポレートカラーの緑を一貫して使った

アクセントに使った緑は、リニューアル時に新しく選んだ色ではありません。もともとのコーポレートカラーを、ShareDanを識別する色としてサイト全体で一貫して使用しました。

色だけに新しい意味を持たせるのではなく、写真、文字、余白、動きなどと組み合わせたときに、ShareDanらしい見え方になることを重視しています。

情報の順序と導線まで含めてデザインした

デザインは装飾だけの作業ではありません。今回は、どの順番で情報を見せるか、次の行動にどう進んでもらうかまでを含めて設計しました。

たとえば旧サイトでは、スマートフォンの最初の画面が画像で埋まり、その先の情報へ進みにくい状態でした。新サイトではPCとスマートフォンの両方で情報の順序を見直し、お問い合わせへの導線も複数の場所に配置しています。

ユニバーサルデザインやアクセシビリティの視点も取り入れ、見た目の印象だけでなく、情報が伝わり、次の行動へ進みやすいことまで含めて判断しました。

オリジナル撮影で、会社らしさをどうつくったか

写真は、サイト全体のデザイントーンをつくる要素として、最初から設計に組み込みました。汎用的なストックフォトでは会社固有の雰囲気を伝えにくいと考え、使用する写真を完全オリジナルで撮影しています。

制作現場では、撮影を行わず、支給素材やストックフォトでサイトを構成するケースもあります。その経験があるからこそ今回は、オリジナル撮影が会社らしさを伝えるうえで重要であることを、サイト自体から感じてもらいたいという思いがありました。

一方、ShareDanからは、顔を全面的に写したくないという希望もありました。顔を大きく見せる写真だけに頼らず、構図、切り取り方、ページ内での使い方を調整し、希望に配慮しながらブランドの印象を保つことを目指しました。

撮影をするかどうか、人物をどこまで見せるかに、すべての会社で同じ正解があるわけではありません。大切なのは、企業側の希望や制約を確認し、その条件のなかで何を伝えるかをデザインと一緒に考えることです。

デザインギャラリーへの掲載をどう受け止めているか

リニューアル後のサイトは、複数のWebデザインギャラリーに掲載されました。掲載そのものが問い合わせや売上を保証するわけではありませんが、今回重視したデザインが、複数の外部の視点から取り上げられた事実として受け止めています。

MUUUUU.ORG「SITE OF THE DAY」

MUUUUU.ORGのShareDan掲載ページでは、2026年6月30日の「SITE OF THE DAY」に選出されました。掲載ページでは、アクセントカラー、やさしく柔らかい配色、人物写真、細やかな動き、レスポンシブ対応などの特徴で分類されています。

Web Design Clip

Web Design ClipのShareDan掲載ページでは、メインカラー・サブカラーの緑、Astro、レスポンシブWebデザイン、シンプル、スクロールテキスト、テキストエフェクトなどの特徴が付けられています。

さらに、トップページだけでなくAboutやサービス紹介などの下層ページまで取り上げるKASOUや、ハイクオリティなサイトを集めるS5-Styleにも掲載されました。ブランディングを下層まで一貫させたことが、外部からも確認できる形になっています。

「デザインに力を入れました」と自分で言うのは簡単です。ただ、第三者が運営するギャラリーに実際に取り上げられると、狙ったデザインが外から見ても伝わっていた、という手応えになります。自分たちの主張とは別の角度から評価を確認できたことは、制作の判断を振り返るうえで大きな材料になりました。

デザインギャラリーは、制作会社を探している人が、気に入ったサイトから制作元にたどり着く入り口にもなります。ギャラリーを見た人が相談や問い合わせに至る例もあり、私たちも今回の掲載を、デザインを起点にした新しい接点の入り口として捉えています。

Astro × microCMS × Vercelを採用した理由

技術は新しさだけで選ばず、表示速度と更新のしやすさを両立する目的で、Astro × microCMS × Vercelを採用しました。デザイン、実装、公開後の運用を別々に考えないことが、今回の技術選定の軸です。

Astroで表示部分を構築し、ブログや実績などの更新情報はmicroCMSで管理、公開環境にはVercelを使用しました。発注担当者がすべての技術名を理解する必要はありません。重要なのは、表示する内容と更新方法に合わせて、必要な構成を選ぶことです。

ShareDanはデザインと開発の両方に対応しているため、デザインを決めたあとで実装方法を考えるのではなく、更新のしやすさや表示方法まで同じチームで検討しました。これにより、デザインの意図と実装のずれや、工程間の手戻りを抑えやすくなります。

この背景には、ShareDanの体制があります。代表の山本はWebディレクターを起点に、いまは要件定義から設計・実装、インフラまで自分で手がけるフルスタックエンジニアで、プロジェクトマネジメントも担い、株式会社エスケイワードのCTOも兼務しています。ディレクションから開発、公開後の運用までを俯瞰できるため、デザイン・開発・運用を切り離さず、目的から逆算して全体を提案できます。

そして、この技術構成を自社サイトで採用した実績がきっかけとなり、実際の商談にもつながりました。受注や売上を確約する話ではありませんが、自社サイトがデザインを見せる場所だけでなく、技術対応力を確認してもらう制作実績としても機能した事例です。

公開後71日間で見えた変化

公開後の初期変化は、Google自然検索で見つけてもらう機会と、訪問後にサイトを見てもらえる時間に表れました。公開前後の各71日間を同じ日数で比較しています。

見つけてもらえる回数だけでなく、自然検索から訪れた人がサイトを見る時間にも変化がありました。ただし、リニューアルと同時にページ構成の変更、採用ページの新設、記事の追加などを行っているため、どの施策がどれだけ影響したかは切り分けられません。

サイト全体の平均掲載順位とクリック率には改善の余地があり、問い合わせ数も計測方法の変更によってリニューアル前後を同じ条件で比較できません。増えた数字だけで成功と判断せず、検索語やページごとの状況を確認しながら改善を続けています。

全体のセッション数には、他サイトからの流入やリスティング広告などの有料検索も含まれます。そのため、全アクセスの増加をリニューアルだけの成果としては扱わず、ここでは自然検索を分けて掲載しました。

リニューアルを検討している方へ

今回の経験から改めて感じたのは、リニューアルはデザイン、情報設計、撮影、開発、公開後の運用を別々に考えるより、一つの目的でつなげたほうが判断しやすいということです。

• 会社の事業内容や姿勢が、今のサイトから伝わっていない
• トレンド感だけでなく、自社らしさのあるデザインにしたい
• ストックフォトではなく、撮影を含めてデザイントーンを整えたい
• 更新しやすさや表示速度も含めて技術を選びたい
• 公開後のブログや集客、改善まで相談したい

ご相談時には、参考サイトの好みだけでなく、誰に何を伝えたいか、現在のサイトで困っていること、公開後に誰が更新するかまで伺います。要望がまだ言葉になっていなくても、目的と課題を一緒に整理します。

具体的な制作工程は「ホームページ制作の流れ｜初めての外注でも迷わない全体像」、公開後の集客設計は「ホームページは作っただけで終わらない｜集客できるサイトの条件」で解説しています。