一般社団法人ななつのこ様｜法人ホームページ｜実案件

❖ 目次

• 制作物
• 要件
• 制作範囲
• 情報設計
• デザインコンセプト
• デザインの工夫
• 実装の工夫

❖ 制作物

🔽 完成サイトはこちら

https://nanatsunoko.org/

❖ 要件

❖ 制作範囲

• ワイヤーフレーム（情報設計）
• デザイン
• 画像選定・加工
• 実装（レスポンシブ対応 / アニメーション）
• 公開

❖ 情報設計

サイトの目的や対象を踏まえ、情報が伝わりやすいよう設計しました。

[ 活動の3本柱「場づくり・活動づくり・地域づくり」]

• 文章のみだった部分に、一目で伝わる簡潔な見出しをご提案し、一部調整いただき採用

• 並列ではなく段階的な流れであることがヒアリングから分かったため、数字と矢印でステップとして表現

• FVのコピーとしても使用

[ 年次レポート ]

• 更新のしやすさと見やすさを考え、シンプルな構成に

[ 団体概要 ]

• 必要な情報を保持しつつ、分かりやすく整理

❖ デザインコンセプト 

• 法人の地域に根差した親しみやすく柔らかな雰囲気を表現 
• 法人は主役ではなく「支える側」としての立ち位置

❖ デザインの工夫

[ ① 配色 ]

• 既存のカフェサイトの配色（水色・黄色）と調和を取りつつ、法人サイトとして区別できるよう意識

[ ② メインビジュアル   イラスト ] 

• 複数回のイメージすり合わせを実施
• 地域住民の活動の一部を描写（ヒアリング内容をもとに）

　・多世代交流・勉強支援・花の植栽・育成

• 法人は活動の土壌を作る「支え手」として表現

　・法人は直接描かず、木や土壌で地域活動を支える“土台”としての役割を象徴化

　　※コピーで意図を補足

• 地域の人々のつながりや拠点としてのカフェを家のイラストで表現

　・法人のマスコットキャラをマークとして描画（ご要望を反映）

[ ③ メンバー紹介　似顔絵 ]

• ご要望に沿ってイメージをすり合わせ、サイトの世界観に馴染むゆるい雰囲気のイラストを制作
• 写真をもとに輪郭や顔のパーツの位置を捉え、個性を表現 

[ ④ モチーフ ]

• 地域のつながりから輪を連想し、モチーフを円に設定

　・背景装飾やセクション区切りに活用

 [ ⑤ サイト全体の工夫 ]

• FVの世界観をサイト全体で統一
• イラストを散りばめ、地域に根差した温かみと親しみやすさを表現  

▼ その他イラスト

❖ 実装の工夫

[ ① アニメーション ]

• 最後まで飽きずに見てもらえるよう、イラストにアニメーションを追加

[ ② レスポンシブ対応 ]

• すべてのデバイス・画面サイズでレイアウトが崩れないよう、細かく調整