FlapClapロゴ

デザイン中心の制作工房

「FlapClap -フラップクラップ-」

mail

制作を相談する

Webデザイン

Studio構築

ブランディング

BtoBマーケティング支援会社様のHPリニューアルデザイン、Studio構築

本件では全ページのワイヤーフレーム作成/デザインカンプ制作/Studio構築を一貫して担当させて頂きました😊
20ページほど+CMSのホームページです。

進行中に追加ページの作成もご依頼いただき、事業責任者様・ディレクター様・私の3名で完結した、3ヶ月ほどのプロジェクトです。

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

  • 既存HPが簡素な1ページサイトのため、訪問ユーザーが会社の強みと主要サービスを詳しく理解できるようにしたい

  • 各ページへスムーズに誘導できるよう、ビジュアル面を含めてリニューアルしたい

  • コラムや資料請求ページ(ホワイトペーパー)にも注力するので、運用しやすい形でサイトに資産を貯めていきたい

2.当方のご対応

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

  • ご準備いただいたテキスト情報の多さから、認識に齟齬が出ないようにワイヤーフレームを全ページ作成いたしました。

  • その上で、ご希望内容とStudioの仕様から折衷案が必要な際は、イメージが明瞭になるよう補足内容のご提案ワイヤーも適時作成いたしました。

    その結果、構築時〜公開後の齟齬を起こさずに納品が叶っています😊

🎨デザイン制作

  • 全体のトンマナはリニューアル前の白〜グレーベースを引き継ぎ、【イラストや写真以外はモノトーン】のご希望をいただいて実現しております。イラストを仕様する際も、彩度を下げてモノトーンの中で浮かないように微調整いたしました。

  • TOPページのメインビジュアルには、シンプルな線画系の動画を選定させていただきました。ベンチマーク先のサイトでは建物の線画だったのですが、印象が被らないかつ「企業の成長を、戦略と実行で支える。」というメインコピーに合っているとのことで、お選びいただけた次第です😊

  • ただし、動画は素材そのままではスピードが遅かったため、Photoshopで微調整しております。

  • 制作ツール……レイアウト/ベクターイラスト加工:Figma、動画調整:Photoshop

🔗該当サイトはこちら

💻 Studio構築

  • 共通ヘッダーの【提供サービス一覧メニュー(PC版)】はモーダルで実装し、ポップアップする仕様です。

    より快適にサイトを回遊していただけるように、主要コンテンツであるサービスページを整頓しました。

  • お問い合わせフォームは、【問い合わせ種別の横に❓マークを付けて、それを押すとサービス概要が出てくる仕様にしたい】とご希望いただいたため、ベンチマークサイトを参考に、Studioで実装できる形にて実現させていただきました。

    ★PC版・スマホ版で共通の仕様です。(モーダルを活用してポップアップさせています)

🔗該当サイトはこちら

3.更新担当者様の運用をサポート

ホワイトペーパーのご担当者様へ、アフターフォローとしてStudio更新資料を作成・送付いたしました🙌

👆これを見ながら行えば、

・細かい見落としポイントを潰せる

・他の方にダブルチェックしていただく際、共通認識を持って取り組める

ことを意識しております。
実際にご活用いただき、資料をスムーズにアップロードできている旨をご報告いただけました😊

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

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