デザイナー・コーダーで分担を行い、企画からデザインまで携わりました。
ログイン画面からトップページまでの2段階を想定し、
Figmaを使用して、ワイヤーフレームとデザインカンプ制作に取り組みました。
URL
https://drive.google.com/file/d/16RcN086ZGDBrH76O_4KXbYI07vQPKQjj/view?usp=drive_link(PDF) ※PCのみ
サイトの目的
既存の迷い猫サイトとTwitterのサービスを掛け合わせたサイトで、
迷い猫情報を目にする機会を増やし、猫の保護率を上げる
ターゲット
・10代〜50代 男女問わず(PC・SPの操作に慣れている方)
・猫好き(猫飼っていなくても登録したい)
企画・ワイヤーフレームについて
サイトの目的や目標を設定し、競合他社のサイトを参考に、新規サイトで「どのような内容が必要？不必要？」を話し合い、企画書の作成を行いました。
また新規登録CV率を上げるため、サイト登録(ログイン画面)のフォームを完結にすることなど、企画の際に上がった内容を踏まえ、
デザイン要素を取り込まないように注意しながら、ワイヤーフレームの作成に取り組みました。
デザインについて
「保護猫」や「迷い猫」の情報交換サイトと想定しての作成のため、
ログイン画面では柔らかい印象のあるフォントやカラーを選定し、
背景に曲線を使ったり、画像を円形にトリミングをしました。
またトップページではSNSのようなサイト設計にし、
各コンテンツへ移動する際は上部のタイトル部分に背景色をつけるなど、
「どのページにいるかがわかりやすいように」意識しながら、デザインに取り組みました。