本件ではTOPページ〜下層ページ全てのデザインとStudio構築を担当させて頂きました😊
14ページ＋CMSの中規模ホームページです。

ワイヤーフレームの作成から入り、事業責任者様とディレクター様と私の計３名で完結した、３ヶ月ほどのプロジェクトです。

1.制作時のクライアント課題

• 既存HPが簡素な1ページサイトのため、コンテンツをしっかり伝えるサイトにしたい

• 訪問ユーザーが自社の強みと主要サービスを理解しやすいように、導線が整ったサイトにしたい

• コラムも本腰を入れて更新していくので、カテゴリー別に遷移できるようにしたい

2.当方のご対応

🗺️全体設計、ワイヤーフレーム

• まずはプロジェクト管理Notionを作成し、進行フェーズの詳細や期限をご共有。必要な際はお互いに「この日までに変更したい」と適宜ご相談の上で調整しながら完遂いたしました。

• そして事業責任者様がご用意くださったテキスト原稿をもとに、サイト設計図＝ワイヤーフレームをFigmaにて作成いたしました。

• 当方では下図のように、グレーの箱とテキストを並べてコンテンツを作成し、その後にデザインを制作していきます。

🎨デザイン制作

• 社内お抱えのインフルエンサー様がおられる強みを活かし、TOPページのメインビジュアルに大きく人物写真を掲載し、目力による吸引力で強く会社の印象を残せるように意識しました。

• 色合いは旧サイトが白ベース×青紫のグラデーション会社ロゴの構成だったことを活かし、薄紫色ベース×白の会社ロゴ×青紫のグラデーションボタンにブラッシュアップする形でリニューアルさせていただきました。

• ただし、グラデーションが悪目立ちしないように、文字や一部のボタンは黒にして画面を引き締めています。

• 細かい部分で言うと、TOPページには固定背景で青紫色のグラデーションが入っています。また、白い会社ロゴも背景あしらいとして活かし、奥行きを出しました。

• 日本語フォントは視認性の高いNoto Sans jp、英数字は視認性の高さと洗練されたモダンな空気感が出せるUnboundedを組み合わせて魅せています。

• 制作ツール……レイアウト/ベクターイラスト加工：Figma、写真補正：Photoshop

🔗該当サイトはこちら

💻 Studio構築

• 下層ページのヘッダー構成は共通で、PC版にはページ内メニューを設置。

• 各サービスページ下部のメインCTAはデザインが共通ですが、テキストは各サービス内容にちなんだものへ変更しております。（コンポーネント設定による）

• 共通ヘッダーの【サービス関連メニュー(PC版）】部分はプルダウンで実装し、サイトマップを整頓しました。

🔗該当サイトはこちら

3.更新担当者様の独り立ちをサポート

記事更新のご担当者様から打診を受けて、Studioの更新方法レクチャーを

①Zoomで直接🙋‍♀️

②更新資料のご送付📝（下図のPDF版）

にて行わせていただきました。

実施後に、「これまで記事を作るだけでサイトを運用したことがなかったけれど、自分でもやっていけそうで安心しました！☺️」のお声を頂けて、当方も嬉しかったです😊

★制作工房FlapClapでは保守サポートをさせていただくことももちろん可能ですが、それだけでなく、Studioの特性である『直感的に操作しやすい』利点を活かしてクライアント様ご自身でも更新できることを最善としております。

基礎的なレクチャーはアフターフォローの範囲内ですので、ご希望の際はお気軽におっしゃってください♪