株式会社INVOICE Webサイト
概要 overview
TECH::EXPERTデザインコースの最終課題にてBtoB事業会社のコーポレートサイトを作成。クライアントへのヒアリング、デザイン、コーディングまでを担当しました。
- 制作期間:21日間
- 担当箇所:クライアントへのヒアリング、デザイン、コーディング
- 使用ツール:Illustrator、Photoshop、Figma、HTML、CSS、jQuery
- URL:https://invoice2020.netlify.app/
依頼内容 request details
電子請求書サービスをリリースしたIT系ベンチャー企業のコーポレートサイトの制作依頼。企業のブランディングを目的とし、潜在顧客からの信頼を掴めるようなデザインを希望。
制作プロセス Process
競合調査_3C分析

3C分析を行い、顧客の強みや弱み、ターゲットの設定、競合他社の情報をまとめました。顧客は請求業務に関するコスト削減率と工数削減率に関して業界No.1という強みがある為、この点を大々的にアピールすることで信頼感を得ることができると感じました。
競合調査_ポジショニングマップ

電子請求書サービスを運用している競合他社のポジショニングマップを作成しました。横軸は実績の高さで、縦軸はコーポレートサイトのコンテンツ量の多さを表しています。全体的にコンテンツ量が多い傾向にあることがわかりました。
ターゲット設定


競合調査を行った結果を踏まえて、ターゲット設定を行いました。リモートワーク化やペーパーレス化の動きがある中小企業の経理担当者が電子請求書の導入を検討している状況を想定しました。
ヒアリング
コーポレートサイト制作の目的や、方向性のすり合わせを行いました。また、競合調査や設定したターゲットがサイトを見た時に疑問や不安を解消できるようなサイトにする為に追加で必要な情報等をヒアリングしました。設定したターゲットを元にサイトの方向性を提案しながら進めました。サイトで一番アピールしたい点などをヒアリングで確認することができました。
コンセプト設定

今までの競合調査やターゲット設定、ヒアリングで得た情報を元にコーポレートサイトのコンセプトを設定しました。一つはサイト制作の目的でもある「信頼感」です。もう一つは企業のイメージや、設定したターゲットから「シンプルでわかりやすい」というコンセプトを掲げました。この二つをサイトのデザインに落とし込みます。
配色

配色はコーポレートカラーで企業ロゴにも使用されている濃い青色をベースに設定しました。信頼感を感じさせるかつシンプルなサイトにする為に色味をなるべく少なくしました。
デザイン設計
ファーストビューに一番アピールしたかった「業界No.1」ということを大々的にアピールし、信頼度を上げました。また、実際の代表者の顔写真や会社の外観の写真を入れることでより信頼性を上げるようにしました。またピクトグラムを使用することでシンプルでわかりやすくまとめました。
WebサイトURL: https://invoice2020.netlify.app/

