ポートフォリオ用HP
きの
制作時間
ファイヤーフレーム：約1日/1ページ
本体：約1カ月
レスポンシブ設定：約3日
修正・仕上げ：約3日
合計：約1.5カ月
制作ツール
WordPress
Photoshop
illustrator
Canva
一部コーディングにAIツール
こだわったポイント
- やわらかい配色とイラストで警戒心を解くファーストビュー
淡いクリームイエローを基調に、線画の動物のイラストを添えることで、"デザイン会社っぽい硬さ"を出さず、動物に関わる仕事だと一目で伝わる雰囲気に仕上げました。 - 実績より先に"人柄・想い"を伝える構成
制作実績を並べる前に「ティーダのわとは？」というストーリーセクションを配置。
愛犬ティーダとの出会いから保護犬との暮らし、デザイナーを志した想いまでを順に伝えることで、スキルの前に"この人になら任せられそう"という信頼の土台を作る導線にしています。 - 3つの強みをカード化して一目で伝え、下層ページで深掘りする二段構成
TOPでは強みを一言ずつ端的に見せ、「ティーダのわ」についてページではその強みを「クライアント様の"何を求めているのか"まで一緒に考える」といった具体的な言葉で補足。
情報の粒度を段階的に深くすることで、興味を持った人がストレスなく読み進められる構成にしました。 - 制作実績を"見やすさ優先"のシンプルなグリッドで整理
実績ごとに日付・サムネイル・モックアップを統一フォーマットで並べることで、見比べやすく、更新頻度が伝わる一覧に仕上げました。 - 料金表をタブ切り替えで整理し、情報過多を防ぐ設計
「ホームページ/LP/その他」をタブで切り替える構成にすることで、必要な情報だけに絞って比較検討できるようにしました。
プラン比較表は○×表記で瞬時に違いが分かるようにし、意思決定のハードルを下げています。 - 依頼への不安を先回りして解消する情報設計
「納品までの流れ」を5ステップの図解で示し、支払い条件やキャンセルポリシーも隠さず明記。
さらによくある質問をあらかじめ用意することで、初めて依頼する方でも安心して問い合わせできるようにしました。 - クライアント様に合わせて選べるお問い合わせ導線
ヘッダーの「お問い合わせ」にカーソルを合わせると、LINE・Instagram・メールの3つの手段がプルダウンで表示される仕様に。
普段使い慣れているツールで気軽に連絡できるようにすることで、問い合わせ方法で迷わせない配慮をしています。 - 丸みのある柔らかいUIパーツとモバイル最適化
黄色い円形フレームの写真、丸角ボタン、犬のシルエットアイコンなど直線的なパーツを避けて統一。
PCの横並び要素もスマホでは自然に縦積みへ再構成し、どちらの環境でも世界観が崩れないよう設計しました。
この作品で提供できる価値
保護犬施設や動物病院、ペット関係の方がこのサイトを訪れたとき、「デザイン会社に発注する」という緊張感ではなく、「同じ動物好きの人に相談できる」という安心感を最初に感じてもらえるよう設計しました。
実績や強みをいきなり見せるのではなく、人柄とストーリーを先に伝えることで、比較検討の段階から一歩リードした信頼関係を築きやすくなります。
さらに、興味を持った方が制作実績で具体的な仕上がりイメージを掴み、サービス・料金ページで金額や流れ、疑問点まで事前に解消できる構成にしたことで、「気になるけど、聞くのが不安」という問い合わせ前の心理的ハードルを大きく下げています。
最後のお問い合わせ導線でも、使い慣れたツールを選んでもらえるようにすることで、"あと一歩"の連絡のハードルまで丁寧に取り除いています。
その結果、「なんとなく良さそう」で終わらず、「ティーダのわに相談してみたい」という問い合わせ・ご依頼につながりやすい、サイト全体としての導線が完成していると思っております。
