納品時のスクリーンショット

パソコン版

スマートフォン版

プロジェクト概要

お客さまのお悩み・課題

• 当初、事務局様ご自身でのサイト作成（Jimdo無料プラン）も検討されていましたが、クオリティや運用の確実性を考慮し、「自力で作成すべきか、初めからプロに依頼すべきか」という点で悩まれていました。
• サイト運営に関する専門知識がなくても、「イベント案内」などの日々の情報更新や編集作業を事務局スタッフで簡単に行える体制にしたい、という課題をお持ちでした。
• 団体の「認知度向上」と「新規会員募集」が主な課題であり、それらを達成するための効果的な情報発信の場を必要とされていました。

ご要望

サイトの目的・ゴール

• 「認知度アップ」と「会員募集」をサイトの主な目的としたい。
• サイトを通じて「活動への参加」や「お問い合わせ」を増やし、「新規入会申し込み」を獲得したい。

運用面

• 専門知識がなくても、事務局側で簡単に情報更新ができるホームページにしたい。

デザイン

• 「地域」「自分らしい暮らし」「親しみやすさ」「安心感」「優しさ」「温かさ」といったキーワードを反映したデザインを希望。
• 特定のコーポレートカラーはないものの、関連団体の支部的な動きをしているため、その団体と関連性を示すため「オレンジ色」の使用を検討したい。
• どなたでも読みやすいよう、フォントのサイズを大きめにして、太くして、見やすさを重視したい。

はなウェブからのご提案

ご自身での更新（運用面）に関するご提案

サイトの管理者権限はすべてお客様にお渡しし、将来的にご自身でサイトを自由に「育てて」いける体制をご提案しました。

「イベントの案内」など、時系列で情報を発信したい内容は「ブログ（お知らせ）機能」で投稿する方法をご提案しました。
ブログ記事の投稿は、ホームページ作成の経験がない方でも比較的簡単に行え、公開すれば自動的にサイトのトップページなどに時系列で表示されます。

はなウェブで制作した固定ページ（「私たちについて」「ご入会のお願い」など）についても、文字の修正や画像の差し替え程度であれば、比較的簡単に行えます。

配色（デザイン面）に関するご提案

お客様が制作されたロゴ（淡いオレンジ色とピンク色のグラデーション）をデザインの基準としました。
ロゴのイメージをサイト全体に反映させつつ、「親しみやすさ」「温かさ」といったご要望のイメージとも両立できるよう、サイト全体の配色をご提案しました。
ロゴとサイトデザインに一体感が生まれるよう、メインカラーからアクセントカラーを設計し、全体の統一感を図りました。

フォント（アクセシビリティ面）に関するご提案

「フォントが大きく、見やすいほうがいい」というご要望に対し、訴求力と可読性のバランスについてご提案しました。
フォントを大きくすると、力強い印象を与え、訴求力を高める効果があります。
その一方で、本文（長い文章）の文字サイズが大きすぎると、かえって読みにくくなり、サイト全体のデザインバランスを損なう可能性もあります。

そこで、見出しは大きくして目を引きつけつつ、ユーザーがしっかり読む本文の文字サイズは、一般的なウェブサイトの標準サイズ（16px程度）より一回り大きく、読みやすいとされる「18px」として設定することをご提案しました。

制作のポイント

色彩に込めた想い

サイト全体のイメージである「親しみやすさ」「安心感」「優しさ」「温かさ」を表現するため、オレンジ色とアースカラー（自然を連想させる色）を基調とした配色をご提案しました。

「優しさと安心感」で包み込む、温かな淡いオレンジ

ロゴにも使用されている温かみのある淡いオレンジをメインカラーに採用。
サイト全体を「優しさ」や「安心感」で包み込みます。

「目の疲れにくさ」に配慮した、暖かみのあるオフホワイト

真っ白ではなく、ごくわずかに暖かみのあるオフホワイトを背景に設定しました。
メインカラーと馴染みつつ、長時間見ていても目が疲れにくい「安心感」のある色合いです。

「落ち着きと信頼感」を添える、こげ茶とベージュのアースカラー

見出し文字には真っ黒ではなく、柔らかい「こげ茶色」を、グローバルナビゲーションには「ベージュ」を採用しました。
オレンジ系の色と相性の良いアースカラーで全体をまとめることで、「地域」や「自分らしい暮らし」といったテーマに寄り添う、落ち着きと信頼感を表現しています。

「活動の楽しさや彩り」を表現する、アクセントのオレンジとピンク

メインカラーよりもしっかりとしたオレンジをアクセントとして使用し、デザインにメリハリをつけています。
また、差し色としてコーラルピンクやピーチ色をグラデーションで加えることで、活動の楽しさや彩りを表現しました。

「次にすべき行動」を明確にする、ユニバーサルデザインの青・青緑色

サイトのゴールである「お問い合わせ（CTAボタン）」や「リンク文字」には、あえて暖色系とは対照的な「青緑色」と「青色」を採用しています。
これは、温かみのあるページの中で「次に行うべき行動」や「クリックできる場所」がユーザーの目に瞬時に留まるようにするためです。
「親しみやすさ」だけでなく、誰にとっても分かりやすく使いやすい「ユニバーサル」なデザインを目指した配色です。

配色（カラーコード・色見本）

#ffd694		メインカラー （基調となる主要な色）
#faf9f7		ベースカラー （背景色）
#e86a33		アクセントカラー （ポイントとなる強調色）

お客さまの声

地域共生ネットワーク東海さま

当団体の代表者より「親身になって制作していただける方」という紹介を受け、ご依頼しました。
完成したホームページで一番気に入っているのは、自分でメンテナンス出来るように設計・納品していただいた点です。
これにより、軽微な修正や更新で費用が発生することも、保守費用が掛かり続けることもありません。
イベント開催後に、ホームページ経由で6件の入会申込を受け付けることができ、ホームページの価値を実感しています。

公開から3か月が経過し、最近よく思うことがあります。それは、Googleの検索結果への満足です。
出来立てなのに、ページタイトルのみならず「全国 地域共生」など当団体との関連ワードでも上位表示されることに驚いています。
時間が経過し、やまさきさんに作成いただいたこのサイトへの愛着と、やまさきさんへの感謝の気持ちがジワジワと増しています。ありがとうございます。

サイト仕様

お客さま情報

無理なく始められる
ホームページ制作・運用を
お手伝いさせていただきます

Web制作 一覧を見る

部分的な制作も対応可能です

• Facebook
• X
• Hatena
• Copy

カテゴリー

ホームページ制作実績

主な担当範囲

Webサイト構造設計、WordPressサイト構築、コーディング、デザイン

担当範囲の詳細

WordPressセキュリティ対策、WordPressテーマのカスタマイズ、WordPressテーマ導入・設定、WordPressプラグイン導入・設定、マニュアル作成、常時SSL化設定、画像選定、進行管理

テーマ

Lightning G3

制作種別

Webサイト 新規制作