インハウスデザインとして、会社のHPを作成しました。もともとあったHPのリニューアルです。企業から約4年で社員全体の製作技術が身についてきた為、自社のHPは自分たちで管理できるようにしようという話になり、プロジェクトが発足しました。社長からの要望をヒヤリングし、折衝とヒヤリングを重ねました。
デザインコンセプト
企業理念に合った人の心を暖められるような柔らかなHP。
ターゲットユーザー
- 20歳～30歳
- IT企業に興味がある方
- ソーシャルワーカー
- 持病があり、職を探している方
担当領域
- デザイン（XDを使ったレイヤーカンプ作成）
- ディレクター
- WordPressを使った実装作業（使用テーマSWELL。CSSを使った微調整）
プロジェクトメンバー
計5名
- ディレクター（担当）
- デザイナー（担当）※コーディングまで実施させてもらい、最終確認はコーダーが担当しています。
- イラストレーター1名（自社オリジナルキャラクター・スタッフ紹介ページのイラスト担当）
- コーダー2名（サポート）
- ライティング1名
担当領域
- 制作ディレクター
- ヒヤリング
- プロジェクトチームリーダー
- レイヤーカンプ制作（XD）
- コーディング（WordPressをメインに使用）
- MV(動画プロトタイプ)作成
製作期間
約8ヶ月。
使用ソフト
- XD
- PhotoShop
- Illustrator
- WordPress
- HTML・CSS
制作のポイント・流れ
ディレクターとしてヒヤリングからデザイン、サポートチームのコーダーと連携して納品に至りました。社長からのオーダーというよりは、現状のHPの問題を指摘し、理想のHPを作成しました。
見出しの統一感が無い部分、padding、レイアウト崩れの懸念を社長に伝え、デザインのリニューアルを提案しました。
サイト全体のデザインを作成し、ヒヤリングを重ねました。slack、折衝、ミーティングを重ね必要な情報を肉付けしていきました。
- XDで作成したプロトタイプ（DeskTop版）
- XDで作成したプロトタイプ （SP版）
HP自体は既存だった為、デザインに沿って実装しました。サポートチームにコーディングルールを共有し、担当領域を依頼しました。
OP動画は社長のこだわりで文字の出現する秒数、位置間、細かく指定がありリテイクも何度かありました。XDのプロトタイプを録画し、コーダーとslackで連携し作成しました。
- XDで作成したMVプロトタイプ（DeskTop版）
- XDで作成したMVプロトタイプ （SP版）
- 実際にできたもの （現HP）
MVの雰囲気を複数提案
社長にMVの雰囲気を3パターンほどお見せしました。
明るいイメージが良いとのことでこちらが採用されました。
チームとの連携
他プロジェクトチームにサポートを依頼し、オン・オフラインでのやりとりを行いました。スプレットシート・slackメイン。
スプレットシートを作成しメンバーとやりとり
NG事項、確認事項をまとめ共有しました。担当者の割り振りもこちらで行っています。
オリジナルキャラクターページの作成
タイトなスケジュールで、自社キャラクターページの作成を依頼され、対応しました。キャラクターデザインは自社イラストレーターにアセットを依頼し、ホバーアクション、各ページの作成をコーダーに依頼。ポイントは、マウスホバーした際キャラクタが笑顔になる部分です。
ムーミンのページを参考にして作成しました。
https://st-ove.co.jp/design/制作実績ページの作成
制作実績ページが無かった為、こちらもタイトスケジュールの中レイヤーカンプを作成し、コーダーへ依頼しました。コーダーの提案で、HPデザインとイラストデザインでタブ分けされています。
工夫したこと
キービジュアルの見せ方を、会社のオリジナルTシャツをキービジュアルに使用し、雰囲気が伝わるような工夫を施しました。
まとめ
インハウスデザインだったため、社内のコーダーさんとタイムリーに連携を取りながらの業務となりました。以前作成したデザインのリテイクで、見出しのデザイン等バラバラだった為すべて統一しました。トップのMVは動画でという指示があり、XDの動画キャプチャ機能を使い簡易的に作成しました。
