1作目としてクラウド会計サービスを提供する株式会社ケイリノ雲（架空）のコーポレートサイトを制作しました。スマホからレシートを送信することで簡単に経費計算ができたり、個人事業主の税金管理や確定申告に役立つサービスを提供しています。すでに同業の大手企業が、業界シェア率が高いため、まだ使ったことのない地元の中小企業や、自分で手作業をして苦労している個人事業主に向けて、とにかくシンプルでわかりやすい、ということをアピールできるよう工夫しました。
URL
https://adjustacademy.com/0335/d240913-040335/site01/index.html
作成ページ
担当
情報収集・ペルソナ設定（10時間）
コンセプト立案（5時間）
ワイヤーフレーム作成（3時間）
写真収集（10時間）
コーディング（60時間）
使用ソフト
Googleスプレッドシート
PowerPoint
Gemini
Mapify
Visual Studio Code
制作期間
2024年10月2日～11月5日
サイトの目的
無料トライアル登録、フォームからの問い合わせ、資料ダウンロード
ターゲット
個人事業主（経費計算や確定申告のための税金計算）、中小企業の経理担当（経理計算のペーパーレス化、既存システムとの連携による業務効率化）
使用カラー
#1686B8
#DEF1FA
#F7C02D
制作過程
まずは業界理解のため、同業他社を30サイトリサーチし、ヘッダーやフッターの内容、コンテンツなどをスプレッドシートにまとめていきました。URLと参考にしたいパートをメモし、コーディング時すぐに確認できるようにしています。
生成AIを活用し、ターゲットやコンバージョンから考えられるサイトの内容を整理してマインドマップを作成。
PhotoshopやFigmaは履修前だったため、手書きでワイヤーフレームを作成。さらにイメージがつくように、PowerPointで簡単なデザインカンプを作り、これをもとにコーディングしていきました。
デザインについて
クリーンなイメージと、クラウドシステムであることが分かりやすい雲の形をもとにして制作しました。ロゴはGeminiの画像生成機能を使用。ファーストビューでは、CMに起用している想定の女性タレントを大きく配置し、認識の共通を図りました。ターゲット層を2つに分類して、それぞれが困っていることを吹き出しのセリフ口調にすることで共感性を高め、さらに難しいイメージを持たれないようにかわいらしいイラストを挿入しました。
導入事例として、ターゲット層が身近に感じるであろう業種の方々をメインに載せました。個人事業主といっても、扱うジャンルによって使い方が様々であることを想定。最近増えているフリーランスのwebデザイナーや、ハンドメイド作家などを入れました。ITに苦手意識の高いシニア層に向けて、素朴な飲食店の事例を提示することで、自分にも始めやすいと感じてもらえるようにしました。ページを戻ったり、スクロースしなくてもすぐにボタンが押せるように、情報の合間や固定ナビにも「無料お試し」のボタンを配置。
コーディングについて
未経験からHTML/CSSを学び、2週間でコーディングを開始しています。知識の浅いなかで、ユーザーとして近い目線を持っているからこそ、複雑な構成にならないよう、客観視しながら組みました。学んだばかりのHTMLのルールやSEO対策を忠実に守りながら、タグを正確に使用しています。
