KAITO PORTFOLIO

「顧客目線」のECコンサルティングを行っているFORCE-R株式会社のコーポレートサイトをリニューアルしました。

担当期間

• 2024年4月〜7月

プロジェクトで使用したツール

• Google spreadsheet/Miro/FigJam/Figma/Photoshop/Illustrator/XD

プロジェクトを実施したメンバー構成

• ディレクター兼デザイナー（私）

• デザイナー

• コーダー

私が実施したこと

• 競合分析

• ブランドガイドライン制定

• 社内依頼者へのディレクション

• 社内メンバーのアサインからディレクション

• ワイヤーフレーム制作

• デザイン

なぜやる必要があったのか？（目的）

• 旧サイト作成から数年が経過し、現在の社内体制や方針が変わったため、それに伴いコーポレートサイトの情報更新したかった。

• 情報更新後に会社の認知拡大、リード獲得、問い合わせ数の増加をしたかった。

目的に向けてどう達成しようと考えたのか？

• FORCE-Rが訴求したいサービスや強みを言語化するために依頼者（社長と役員）とワークショップを実施し、抽象的だった課題の言語化から競合調査をしながらどのようなサイトにするべきか議論をした。議論の後に具体的なサイトイメージが内製化に必要なCMSなどの要件を確認して実際のサイトへ反映させていき目的を達成するための制作を行う。

デザインについて

FORCE-Rのブランドカラーは青と定められていたが、配色指定やロゴの使用ルールなどブランドガイドラインの制定がされていなかったため新たに作成し、そのブランドガイドラインをベースにデザインを制作した。

制作で重視したポイント

• 複雑なCSSやJavaScriptを使用して再現したアニメーションの読み込み遅延でアクセシビティを低下させないために、なんとなくカッコいいという理由だけでアニメーションは入れないようにした。

• クリエイティブチームを内製化するために、Webサイト制作のルールを定めながら制作を進めた。例えば、デザイン制作で余白やフォントサイズを指定するときの数値設定に規則性を持たせたり、コーディングする際のルールを設けたりなど、次回のプロジェクトで作業を効率化できるようフォーマット化するなど。

• 誰でもWebサイトの更新ができるよう、更新頻度の高い箇所はCMS化してマニュアルを作成した。

• 本プロジェクトに参加したコーダーは未経験で入社し、プロジェクトを開始したタイミングの実務経験期間は3ヶ月だったため、なるべく構築が難しくないようなデザインにしつつ依頼者の目的を達成できるような構成にした。

実施内容と完成イメージ

ビジュアルワークスペースMiroでワークショップを実施。

競合分析をしてFORCE-Rが掲載すべきコンテンツは何か仮説を立てながらサイトの構成を考案。

競合分析にディレクトリ構造を作成。

必要な機能やデザインの参考をリストアップして分析し、どんな機能とデザインにするかイメージを固めた。

プロジェクトの進行中に内製化も進めたかったため、フォルダの命名規則などのマニュアル作成やブランドガイドラインの制定も同時並行で行う。

Webサイトデザインのフィードバックや質問などは、Figmaのコメント機能を使いながら実施することで円滑なコミュニケーションを取ることができた。

Webサイト全体の完成イメージ