ITスタートアップ企業HPの作成

急成長ITスタートアップ企業のリニューアル案件にPMとして関わりました。

AIDAO

https://aidao-pjt.com

目次

デザインコンセプト

かっこいい、未来感がある、洗練されている、幾何学的。他ITサービスと差別化したい。

かっこよさを表現するために、画像にはオーバーレイ等使っています。

ターゲットユーザー

  • 20~40歳
  • 男性
  • 未来を感じるAIサービスを探している
  • 会社経営者向け

プロジェクトメンバー

制作会社と現場の間でのPMとしての役割でした。

  • ディレクター(制作会社)
  • デザイナー(制作会社)
  • コーディング(制作会社)
  • SE(現場CTO)1名
  • プロジェクトマネージャー(担当)

担当領域

現場配属時、HP制作は他社様が担当される予定となっていたため、私は現場代表取締役の代役及びHPプロジェクトマネージャーとしての参画となりました。

  • 工程表の管理(デザイン提出やコーディング提出日が迫った際、確認の連絡)
  • 一般的なデザインの知見
  • 代表取締役と出来上がったデザインのチェック
  • リテイクの依頼
  • 適宜MGT参加(WP化して納品してもらう為、カスタムフィールドの設定MGT、またトンマナ会議等)

使用ソフト

  • スプレットシート(工程表のやりとり、文言修正の依頼に使用)
  • MGT
  • ライン
  • Figma

コミュニケーションツールの使用となりました。

製作期間

4か月

制作のポイント・流れ

スタートアップならではの忙しさや、予定変更がある為、この日までに公開したいページ、等リテイクも多々ありました。制作サイドの事情もあるので、可能であるのか、認識ズレ無いかの確認をラインで実施しました。

STEP
サイトマップ、工程表を見てスケジュールの確認

制作会社側から工程表とサイトマップを見て、HPの構成を現場と確認しました。

STEP
ワイヤーフレーム確認

ワイヤーフレームを提出いただき、現場と内容は問題ないか確認しました。この時、自分に必要とされた業務は、デザイナーとしての一般的な知見とアドバイスです。現場では気になるところの吸い上げを行いました。その後、お戻し、リテイクの流れでした。

STEP
トンマナ会議

制作会社からトンマナの提案をいくつも頂き、一番近い色味を現場で検討しました。その上で、制作現場にお戻しし、モックデザインの作成を依頼しました。自身は、現場のCI確認、イメージカラーのすり合わせを行い制作現場と調整しました。

STEP
モックデザイン確認

出来上がったモックデザインを現場取締役と一緒に確認し、直して欲しい部分の洗い出しをしました。この際も、HPデザインの経験を活かし、IT企業の一般的な構成や色合いについてアドバイスした後のお戻しをしました。

STEP
実装

現場CTOも含めたMGTを行い、実装部分の確認をしました。納品後管理運営を行うのか、実装はどうなるのかという部分ですり合わせが必要だった為。その後、STG環境での実装状況を私が確認した後、制作サイド側のSEにプッシュして頂きGithubを通して現場CTOが本番環境にサイトをアップするという作業を繰り返しました。

提案されたトンマナ

HP制作において、いくつかのカラーリングを提案いただきました。

定例ミーティングで話し合った結果、AIのカラーイメージは淡いピンクで、周りのIT企業と差別化したいとのことで、こちらのHPに合わせてもらう方向性になりました。

情報提供の依頼

スプレットシートを使って制作会社とのやりとりを行いました。

工程表作成

簡単ではありますが、スプレットシートにて工程表作り、タイムリーにやりとりしました。

一度組んだ日程が全て白紙になってしまった為、現場サイドでスプレットシートで確認及び日程表を作っています。

制作会社との情報共有

ダミーテキストの部分は、現場取締役に現状文章と掲載したい文章をスプシに記載してもらうよう依頼しました。スプシを使ったコミュニケーションはスムーズでした。

修正したい箇所

修正してほしい箇所もキャプチャを取ってスプシで制作会社と共有しています。こちらのやりとりで齟齬は生まれずスムーズなやり取りとなりました。五月雨にもならず現場が混乱することもありませんでした。

柔軟性と調整力が試されるプロジェクトでした。

現場の急な予定変更や制作会社のスケジュールを調整しながら、無事に完成まで導けたことは、大きな学びとなりました。関係者全員がスムーズに協力できる環境を整えることの大切さを再認識しました。制作に関わってくださった全ての方々に感謝しています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次