パソコン版
スマートフォン版
プロジェクト概要
- サイトの種類
- コーポレートサイト（企業・個人事業主・団体などの公式サイト）
- 制作種別
- リニューアル
- プロジェクト期間
- 7か月（お申し込み～納品・公開まで）
※お客様作業期間（原稿準備・内容のご確認等）を含む - ページ数
- ■ 基本ページ：7ページ
・トップページ（1ページ）
・下層ページ（6ページ）
■ 更新機能（自動一覧ページ）
・ブログ
- 公開日
- 2023年12月
- 担当範囲
-
詳細を見る
【 企画・設計 】
- サイト構造設計（迷わないメニュー構成づくり）
- デザイン設計（ブランドに合わせた配色・レイアウト設計）
- 個別レイアウト設計（原稿や目的に合わせた専用デザイン設計）
- レスポンシブWebデザイン（画面サイズに応じた見やすいレイアウト調整）
【 コンテンツ設計・制作 】
- 原稿編集（文章の推敲・見出しの整理）
- 画像・素材の選定（内容に合うビジュアルの提案）
【サイト構築・機能実装 】
- WordPress構築（ご自身で更新できる仕組みづくり）
- セキュリティ対策（不正アクセス・改ざん防止）
- バックアップ体制の整備（サイトデータの保存体制づくり）
- メールフォーム設計・設置（お問い合わせ・お申し込みの窓口づくり）
- XMLサイトマップ設定（検索エンジンにページを伝える設定）
【サーバー・通信環境 】
- 常時SSL化・URL正規化（通信の暗号化とURLの統一）
【 サポート・運用準備 】
- 専用マニュアル提供（納品後も自走できる更新手順書）
- 進行管理（無理のないスケジュールでの伴走）
- Web資産管理シート（ログイン情報・契約情報の一元管理）
成果・効果
イラク人医師の研修に関するキーワードで、Google検索結果での上位表示が増えました。
Google検索結果での表示順位
- 「イラク人 研修」1位・5位/約87万件中
- 「イラク 医師 研修」1位・4位/約42万件中
- 「イラク 医師」7位/約433万件中
- 「イラク 小児がん」7位/約65万件中
- 「イラク 子ども がん」9位/約143万件中
解決したかったこと
抱えていたお悩み・課題
「一番困っているのは、手がつけられない状態になっていること」
- ホームページの管理体制が確立されておらず、更新が完全に停止している状態。
- 約20年前の情報が掲載されたまま更新が止まっており、情報が古くなっている。
- 特定の担当者のみが更新可能な形式で作成されているため、組織全体で情報を更新できない。
SNSでの情報発信の限界
- Facebookページは開設しているものの、情報が断片的で活動内容が伝わりにくい。
- 問い合わせの度に、詳細を説明しなければならない。
助成金申請とホームページの重要性
- 助成金申請の際に、ホームページの有無を確認される。
- 団体の信頼性を証明するために、最新の情報が掲載されたホームページが必須である。
「保護されていない通信」警告表示
- ホームページが常時SSL化に対応していない。
- ブラウザのアドレスバーに「保護されていない通信」と警告が表示される。
いただいたご要望
- 複数メンバーで更新可能なホームページを希望。
- WordPressの基本的な操作（記事投稿、テキスト修正等）は可能なため、日々の活動報告を自分たちで投稿したい。
- サイト全体の構築は困難なため、主要ページの制作を依頼したい。
- Facebook、Instagramの投稿をホームページに、自動的に表示させたい。
はなウェブからのご提案
Webサイトの管理・運営体制
WordPressを導入し、複数人でのサイト運営が可能に
リニューアル前は、HTMLとCSSで構築された静的なウェブサイトでした。
今回のリニューアルでは、専門知識がなくても更新できるWordPressを導入し、複数人でのサイト運営を可能にしました。
コンテンツの最適化と効率化
コンテンツ整理による情報発信の効率化
サイト構築にあたり、日記のように時系列で発信できるコンテンツと、独立したページで掲載する情報を整理しました。
これにより、サイト訪問者は必要な情報をスムーズに見つけられるようになり、情報発信の効率も向上します。
研修受け入れ効率化のための情報集約
医療機関へのイラク人医師研修受け入れ要請の際に、毎回伝えていた内容をまとめたページを作成することで、説明の手間が大幅に削減され、交渉を効率的に進められるようになります。
SNS連携とWebサイトのパフォーマンス向上
SNSへの誘導はボタンを配置して誘導
SNSのタイムラインをウェブサイトに埋め込むと、ページの読み込み速度が遅くなることがあり、検索結果の順位に悪影響を及ぼす可能性が高くなります。
各ページの文末にFacebookとInstagramのボタンを配置し、各SNSへの誘導を行うことで、ウェブサイトの表示速度を維持しながら、SNSへのアクセスも促進できるようになります。
常時SSL化でセキュリティ強化
セキュリティ強化と信頼性向上
常時SSL化（常時HTTPS化）とは、Webサイトの全てのページにおいて通信を暗号化するセキュリティ対策です。これにより、Webサイトと訪問者の間で交わされるデータのやり取りが暗号化されます。
その結果、第三者によるデータの盗聴や改ざんといった不正行為を防止できます。
また、訪問者に安心感を与え、Webサイトの信頼性向上にもつながります。
さらに、検索エンジンによるWebサイトのランキング評価を高める効果も期待できます。
制作のポイント
視認性を高めるサイトアイコンの改善
サイトアイコンの文字が細く、ブラウザのタブや検索結果で視認性が低かったため、文字を太くして再制作いただきました。これにより、アイコンの視認性が向上しました。
サイトアイコン（ファビコン）とは、ウェブサイトを象徴する小さなアイコンで、ブラウザのタブ、ブックマーク、検索結果などに表示されます。
複数のタブを開いている際や、ブックマーク一覧などで、ウェブサイトを視覚的に識別しやすくする役割を果たします。
イラク国旗の色彩をヒントに、穏やかで優しい配色
イラクの国旗は、赤、白、黒の横じま模様で、真ん中の白い部分に緑色の文字が書かれています。
この国旗に使われている色と、ニュースレターで使われている色をヒントに、Webサイト全体が優しく落ち着いた雰囲気に見えるような配色にしました。
- 緑色：イスラム教の象徴として
- 白色：寛容、寛大さ、平和の象徴として
- 黒色：過去の抑圧と勝利の象徴として
色の対比で訴求力を強化：寄付・参加ボタン
NPO法人セイブ・イラクチルドレン・名古屋さまのブランドカラーである明るいオレンジ色をメインカラーに使い、寄付や参加を促すボタンにはオレンジ色と対照的な緑色を選んでいます。
オレンジと緑を一緒に使うことで、それぞれの色がよりハッキリして、ボタンが訪問者の目に留まりやすくしました。
緑色は安心感や信頼感を与えるだけでなく、行動を促す心理効果も期待できるため、お問い合わせボタンに利用することでユーザーの行動喚起に繋がると考えられます。
配色（カラーコード・色見本）
| #dd5f0f | メインカラー （基調となる主要な色） |
|
| #fdfdfb | ベースカラー （背景色） |
|
| #39a030 | アクセントカラー （ポイントとなる強調色） |
サイト仕様
- CMS
- WordPress
- 使用テーマ
- Lightning G3 Pro Unit
- 対応端末
- パソコン / スマートフォン / タブレット（レスポンシブ対応）
- 搭載機能
【 お問い合わせ導線・情報発信 】
- メールフォーム設計・設置（お問い合わせ・お申し込みの窓口づくり）
【 利便性・コンテンツ強化 】
- HTMLサイトマップ（必要なページへたどり着きやすくする一覧導線の設計）
【 保守・安全性・SEO基盤 】
- セキュリティ対策（不正アクセス・改ざん防止）
- 自動＆手動バックアップ（サイトデータの保存体制づくり）
- XMLサイトマップ（検索エンジンにページを伝える設定）
- 導入ツール
- reCAPTCHA（お問い合わせフォームの迷惑メール・スパム対策）
- Googleサーチコンソール登録（検索キーワードの把握とサイト改善の基盤づくり）
- Googleアナリティクス設定（アクセス状況の見える化）
- 納品資料・設計資料
【 運用・引き継ぎ資料 】
- ブログ更新ガイド（投稿方法をまとめた手順書）
- アップデートマニュアル（日常のメンテナンス方法をまとめた手順書）
- Web資産管理シート（ログイン情報や契約情報を整理して管理するための資料）
【 設計資料 】
- カラーコード一覧表（配色ルールを共有するためのカラーパレット資料）
- ディレクトリマップ（サイト構造とSEO設計を整理した資料）
- サイトツリー（ページ全体の構成を把握しやすくした図解資料）
お客様情報
- 名称
- NPO法人 セイブ・イラクチルドレン・名古屋様
- サイト名
- セイブ・イラクチルドレン・名古屋
- URL
- https://iraq-c.gr.jp
- エリア
- 愛知県名古屋市
- 事業内容
- イラク人医師の研修、医療支援、国際理解への活動など