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

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

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

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

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

• 特に映像制作サービスは主要コンテンツのため、下層ページの中でも独立したトンマナにしたい

2.当方のご対応

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

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

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

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

🎨デザイン制作

• 全体のトンマナは、同時期にご依頼いただいたホームページのモノトーン・シンプルな印象とは真逆の【賑やかで面白い感じ】でいきたいとご希望をいただいたため、全体的にカラフル＆ポップなカラーリング＋海外のポップな手描きイラスト素材＋背景に方眼の柄を入れる……という組み合わせで実現させていただきました。

• TOPページのメインビジュアルには、キャッチコピーに合う人物写真を選定し、切り抜きとあしらいの彩りで個性や奥行きを出しています。自動で横スクロールする英字は、テレビのテロップのイメージです😊各セクションにも、アンテナ付きテレビをイメージした背景色を入れたりしています。

• 下層ページのFVは、コンテンツごとにメインカラーを変えております。（会社概要は青、キャスティングはビビッドピンク、コラムはオレンジ等）

• 主要コンテンツである映像制作サービスのページは、自社コンテンツと制作実績がより印象強く目に残るように、劇場を思わせる黒ベースにいたしました。
  このページではメインビジュアルが動画になっていたりと、他ページとは見せ方を変えつつ、全体としては統一感が出るようにバランスを整えています。

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

🔗該当サイトはこちら

💻 Studio構築

• ちょっとした部分ですが、コラムページで記事の上にカーソルを当てると、「ん？読むの？」と首を傾げているような動作として、『斜めに動く』ホバーアニメーションを入れました。

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

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

🔗該当サイトはこちら

アフターサービスとして、コラムやサイトを更新される担当者様からのご質問に適宜お答えする形で運用をサポートしております😊