SMASK コーポレートサイト

制作の詳細

Scope　担当範囲

• 企画
• 情報設計
• 文章制作
• デザイン
• 実装
• 公開後の運用

実施した内容

• サイト全体の構成と導線の再設計
• 全ページの文章制作
• トップページの制作（オープニングとキャラクターの演出）
• 検索・SNS向けの設定（タイトル、説明文、構造化データ）

1. 1

   プロジェクト概要

   Webコンテンツ制作を行う自社（株式会社スマスク）のコーポレートサイトです。

   事業の内容が変わったことに合わせ、掲載する情報とサイト全体の構成を作り直しました。

2. 2

   制作前の課題

   旧サイトには複数の事業ページが並んでおり、閲覧者から見て何を依頼できる会社なのか判断しづらい状態でした。

   制作物の見せ方が中心で、どのような考え方で、どこまで担当するのかを説明する場所がありませんでした。

3. 3

   制作方針

   掲載する事業をWebコンテンツ制作に一本化し、情報量を増やす前に何を伝えるかを絞り込みました。

   完成物の見た目より、事業を理解してからWebをつくるという進め方が伝わることを優先しました。

4. 4

   情報・導線設計

   トップページは、SMASKとは、サービス、実績、考え方、課題、強み、制作の流れ、問い合わせの順に、上から読むだけで理解が進む一本の流れとして設計しました。

   下層は事業内容、サービス、制作実績、会社概要、お問い合わせに整理し、各セクションから対応する下層ページへ進めるようにしています。

5. 5

   文章・デザイン

   見出しと本文の大きさをサイト共通の基準として定義し、セクションごとにばらつかないようにしました。

   トップの宇宙の世界観と2体のキャラクターを、下層ページの見出しやフッターにも続け、どのページでも同じ世界が続くようにしています。

6. 6

   実装連携

   Next.jsとTypeScriptで構築し、各ページを静的なHTMLとして書き出しています。

   ページごとのタイトル・説明文・構造化データを1か所で管理し、検索エンジンやAIにも内容が伝わるようにしています。