サイトマップ
ワイヤーフレーム
WORKS
WEB-01
架空サイト/個人制作
社会福祉法人樹木会
くすのき保育園
個人制作
- 制作時期: 2025.11
- 制作期間: 7日間
- ターゲット: 20代から40代までのファミリー層
- 目的: 教育方針のPR/見学者•資料請求数のUP/入園者の増加
- イメージ: 明るい/楽しい/親しみ
Workflow
- プロセス:
制作期間を考慮し、ページ数を最低限に設定。
画像の準備•イラスト作成•テキストの作成•トップページのモックアップ作成•コーディング - 想定イメージの実現のために:
- cssアニメーションでメインビジュアルをゆらゆら揺れる動きを実装
- 彩度が高く暖かみのある色を使用
使用カラー
- イラストの配置
- その他留意点:
情報量が多いため、必要な情報を整理して見やすいようにレイアウト
資料請求・見学予約ボタンはアクセントカラーの濃紺で分かりやすく画面に固定•トップに戻るボタンをイラストの画像にして固定
WEB-02
架空サイト/グループ制作
オーガニックレストラン
みどりの食卓
グループ制作
Workflow
PC版ワイヤーフレーム
SP版ワイヤーフレーム
- デザイン:
topページを基準に各ページの情報を読みやすく・見やすくするため、余白多めに配置
画像の準備•イラスト作成•テキストの作成•トップページのモックアップ作成•コーディング - 想定イメージの実現のために:
- 淡いドロップシャドウ
- 背景に控えめな木のイラストを配置
- コンセプト文は白、大きなセクション（お知らせ）は淡いグレーの面で分割 読みの区切りを明確にし、情報の優先度と視線の流れを安定させた
使用カラー
- 予約フォームのデザイン:
ユーザーが迷わずに入力を進められるわかりやすいレイアウトと明確なラベル
入力欄を認識しやすくするため、他ページとテイストを合わせつつ、背景は白ではなくグレーを使用
予約フォームのワイヤーフレーム
バナー/ロゴ
- 制作時期: 2025年8月～11月
- 制作時間: 1時間～5時間
- 目的: 個人制作Webサイト用/グループ制作の提案用/自主学習
- 使用ツール: Illustrator/Photoshop
イラスト
- 掲載イラスト制作時期: 2021年∼2023年
- 制作時間: 1時間∼10時間
- 目的: イラストAC登録素材として制作/note投稿用に制作
- イメージ: 優しい/かわいい/清潔感
- 使用ツール: Illustrator/Photoshop