制作実績
つむぐブログ様サイト（実案件）
詳細
つむぐブログ様サイト（WordPressのテーマCocoonを使用）の改修を行いました。
- 目的
- Webライターとしての練習台。ときに実力提示。
- ターゲット：
- 30～40代の女性。子供と犬と暮らす人。自衛官の妻or結婚したい人。姫路市に興味のある人。
- 要望
- すっきり、柔らかい雰囲気。サイトカラーはピンクが希望。「猫の応援」コーナーを目立たせたい。
- 担当領域：
- ヒアリング、要件定義、
ワイヤーフレーム 作成、 デザイン、 コーディング
- 改修箇所：
- TOPページ（全体）、
下層ページ （タイトルや サイドメニューなど）
- 工数：
- 3週間
- 使用したツール：
- Figma/
VSCode/ illustrator/ photoshop
最初に考えたこと
ブログにアクセスした大人の女性の心を引き付けるような、
柔らかく優しい雰囲気のサイトにしたい。
ライターとしての練習台や、ときに実力提示に使用するとのことなので、
ユーザーがより各記事に遷移しやすいようなサイトにしたい。
そう考えました。
考えたことを形にするために
サイト設計面で意識したこと
「猫の応援」コーナーは注目度を高めるため、MV（メインビジュアル）の直下に配置し、多くのユーザーの目に留まるよう設計しました。
記事のカテゴリー表示については、クライアント様のご希望により従来の形式を継続。設計段階から密に連携し、意図や優先度を反映した構成にしています。
カテゴリーの並び順も相談のうえ、最も推したい内容が上部に表示されるよう調整しました。
デザイン面で意識したこと
柔らかく親しみやすい印象を持ってもらえるよう、全体の配色はピンクを基調に、背景色にはベージュ、文字色には茶色を採用しました。
これにより、目に優しく温かみのある雰囲気を演出しています。
「猫の応援」コーナーは視認性を高めるため、背景色を切り替え、枠で囲むことで他の要素との差別化を図りました。
また、リンク先への誘導を意識し、ボタンに猫のイラストを配置することで視線を集め、自然な遷移を促しています。
女性や動物好きのユーザーを想定し、優しい色使いとイラストで親しみやすさを意識しました。
コーディングで意識したこと
改修前のサイトでは、各ページのリンクにホバーアクション（カーソルを合わせた際に色や動きで反応する視覚効果）が設定されていませんでした。
そこで、ユーザー体験の向上を目的に、リンクにホバーアクションを実装し、視認性と操作性を高めました。
リンクの存在が直感的に伝わるようになり、よりスムーズなナビゲーションが可能になっています。
クラス名やスタイルの命名には一貫性を持たせ、他の開発者が見ても理解しやすい構造を意識しました。
また、共通化できるスタイルはまとめて管理し、今後の編集や修正がしやすいよう保守性を高めています。
