INVOICE | Webデザイナーを目指す竹沢和のポートフォリオサイト

Overview

TECH CAMPデザイナー転職の制作課題として、BtoB事業会社（架空）のコーポレートサイトを制作。デザインからコーディングまで行いました。

制作期間：

2週間
担当箇所：

デザイン、コーディング
使用ツール：

Photoshop、Figma、HTML、CSS、jQuery
URL：

https://invoice-by-wt.netlify.app/index.html

Detail

電子請求書プラットフォーム「INVOICE電子請求書」を提供する株式会社INVOICE（架空）のコーポレートサイトの制作です。

依頼経緯

クライアントは2019年設立のIT企業。「INVOICE電子請求書」サービスをリリースし、LPを立ち上げて集客を図っている。LPを訪問した潜在顧客が運営会社を調べた際に信頼感を抱いてもらうため、コーポレートサイトを制作することとした。

Webサイトの目的

LPから遷移した潜在顧客に信頼感を抱かせることで、CVの促進に貢献する。
社会一般のステークホルダー（求職者、メディア、他企業等）に対して、企業情報を伝える。

Process

クライアント調査→ターゲットの具体化→参考デザインピックアップ→デザイン作成

ターゲット設定

クライアントの事業における市場環境、競合他社について調査した上で、クライアントの事業戦略も踏まえてターゲット像を抽出しました。

市場環境

クライアントの事業領域であるBtoB電子請求書プラットフォームの市場環境を、政治・法律、経済、技術、顧客の4つの観点から調査しました。結果として、我が国の中小企業において今後も高いニーズが見込まれることがわかりました。

競合他社

同業他社8社のコーポレートサイトについて調査しました。各社の共通点は、以下のような方法で、広く社会一般のステークホルダーに企業のアイデンティティを発信していることでした。

コーポレートカラーの活用
ファーストビューでのターゲットやビジョンの明示

事業戦略

クライアントの事業戦略について調査した結果、製品戦略や価格戦略から、市場環境にて抽出した中小企業の課題・ニーズとの親和性が高いことが確認できました。

ターゲット

以上の分析結果から、以下の2つのターゲット像を抽出しました。

中小企業の経理担当者決裁権限者など、購買の意思決定に関わる人々
ニーズ
- 忙しいので短時間で調べたい・説明してほしい
- ユーザー対応を丁寧にしてくれそうな会社かどうか知りたい
- 取引を認めるに値する信用できる会社なのか知りたい
社会一般の求職者メディア他企業など、企業の多様なステークホルダー
ニーズ
- 求人があるかどうか知りたい
- 企業やサービスに関する公式情報をプレスリリースで確認したい
- 新たな取引・協業が成立しそうな企業かどうか調べたい

ヒアリング

クライアントとターゲット像をすり合わせるとともに、デザインの方向性を視覚的に共有し、共通認識を持つために、ヒアリングを実施しました。

ヒアリング内容（一部抜粋）

情報設計について、信頼感を高めるための追加コンテンツの提案
事前に用意した参考サイトを見ながら、サイト全体のレイアウト、ファーストビューや配色の方向性についての認識合わせ

ヒアリングを通して、クライアントはハイセンスなデザインを求めてはおらず、シンプルで扱いやすい、ユーザーに安心感を与えられるようなデザインを求めていることがわかりました。
またクライアントはバックオフィス業務の体制強化という課題を抱えており、人材確保の策を検討していることも伺いました。

コンセプト設計

抽出したターゲット像と、ヒアリングで把握したクライアントの要望を踏まえて、次の2点を軸としました。

信頼感

「丁寧かつ迅速に顧客対応してくれそうな企業か」「取引を認めるに値する十分な信用のある会社か」といった、購買の意思決定を左右する条件を満たす会社であることを伝える。

わかりやすさ

業務が忙しい顧客や、幅広い属性のステークホルダーがアクセスすることを想定し、わかりやすさを追求したUIとする。

ワイヤーフレーム

設定したコンセプトを実現するために、特に以下の点を意識しました。

お問い合わせページへのリンクボタンをヘッダーとフッターに大きく配置

顧客対応に前向きな姿勢をアピールし、信頼感を抱かせるため。

トップページに採用情報セクションを追加

人材確保に対するクライアントの課題意識を踏まえて提案。求職者へわかりやすく情報開示するため、お知らせ文を掲載。

NEWSの各リンクにカテゴリー別のラベルを追加

NEWSページのプルダウンリストでカテゴリー別の絞り込み表示を可能とし、手早く記事の検索をできるようにするため（検索機能は未実装）。

お問い合わせフォームに顧客属性や問い合わせ内容についての項目を追加

幅広い顧客属性・問い合わせ内容に対して、クライアント側で迅速な対応を取りやすくし、ユーザーに信頼感を与えるため。

デザイン

設定したコンセプトを実現するために、特に以下の点を意識しました。

人にフォーカスしたファーストビュー

さまざまな業種のユーザー企業社員をイメージした画像とキャッチコピーを組み合わせ、クライアントが実現したいユーザーの姿を表現。ユーザー志向の企業風土をアピールし安心感を抱かせる。

コーポレートカラーの濃い青に黄色を加えた配色

濃い青によって知的・冷静で信頼感のあるイメージを抱かせ、お問い合わせボタンの黄色によって活発でレスポンスの良いイメージを想起させる。

コーディング

モバイル端末での操作性を担保するため、レスポンシブ対応を行いました。

最終的な制作物

URL:https://invoice-by-wt.netlify.app/index.html

back to my works