某衆議院議員の公式サイト構築・保守

概要

知人からの紹介にて案件受託。日本維新の会所属の衆議院議員の公式サイトを作成、運用させていただいております。（2014年12月より。受託当初は大阪府議会議員）

先方＆紹介者の意向もあり、極力トップページだけでコンテンツを全て網羅する方向で制作したため、LPのような非常に縦長のサイトとなっている。

制作イメージ

＊一部抜粋＆加工の上掲載（クリックで拡大）

デザイン面

カラーリングとビジュアルアイデンティティ

日本維新の会のブランドイメージと整合性を持たせながら、政治家サイトに求められる「信頼性」と「親しみやすさ」を両立させたカラーパレットを設計。

• アクセントグリーン #8fc427：セクション見出し・主要CTAに使用。市民活動・環境を連想させる色として採用
• メインブルー #015f99：リンク・サイドバー見出し。誠実さ・権威を表現
• ボディ背景 #fbfaf5（オフホワイト）：長文記事の視認性に配慮し、純白より読み疲れしにくい色調を選択
• 本文テキスト #0d0015：完全な黒より柔らかく、コントラスト比を確保

政治家サイトとして「硬すぎず・軟すぎない」絶妙なバランスを意識し、有権者への訴求力を高めるトーンを構築した。

タイポグラフィ

• 使用フォント “ヒラギノ角ゴ Pro W3″、”メイリオ”など、日本語サイトに最適化したフォントスタックを採用。
• 文字間隔 letter-spacing: 1px：日本語の可読性向上のため明示的に指定
• 行間 line-height: 1.5：24px ベースラインに基づく垂直リズムを維持
• 見出し設計：デフォルトのブラウザスタイルをリセットし、グリーン背景に白テキストで統一感のあるセクション区切りを実現

レスポンシブレイアウト

3段階のブレークポイント設計により、PC・タブレット・スマートフォン全対応を実現。

モバイル向けの工夫

• ナビゲーションフォントに 4.062vw（ビューポート幅相対）を採用し、機種を問わず最適なサイズを実現
• PCヘッダー画像（header-pc.png）とスマートフォン用ロゴ（header-logo.png）を .visible-phone / .hidden-phone クラスで出し分け
• 画像に max-width: 100% を設定し、コンテンツ幅超過を防止

UIコンポーネント

ナビゲーション

• 背景 #333 のダークバーに白テキスト
• ホバー時に #666 へ変化するフィードバック
• サブメニューはクリックで slideDown('slow') 展開（jQueryアニメーション）
• 外側クリックで自動収納（UX配慮）

CTAボタン（.link-button）

background-color: #015f99;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.9);

ホバー時 #028ddd に変化し、クリッカブルな印象を強調。

セクション構造

• h3 タグにグリーン背景（#8fc427）
• 直下の .main-block に同色ボーダー（border: 1px solid #8fc427）
• 視覚的なグルーピングで情報の階層を明示

フローティングTOPボタン

• スクロール量に応じて fadeIn / fadeOut
• PC幅では right: calc((100% - 1050px) / 2) により、コンテンツ領域の右端に固定

YouTubeレスポンシブ埋め込み

• padding-top: 56.25% によるアスペクト比16:9の維持
• 内部要素を position: absolute で全域展開

コーディング面

WordPress テンプレート階層の活用

特定ページに対してスラッグベースのカスタムテンプレートを作成し、柔軟なレイアウト切り替えを実現。

カスタム関数（functions.php）

1. ウィジェットエリア登録

サイドバーとフッターの2カ所にウィジェットエリアを定義。カスタムHTMLラッパーを指定してデザインと統合。

register_sidebar(array(
    'name'          => 'サイドバーウィジット-1',
    'id'            => 'sidebar-1',
    'before_widget' => '<div class="menu-block" id="%1$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>',
));

2. URLリライト（.html拡張子対応）

renritsu.html というURLをWordPressのクエリへマッピング。日本の行政・政治サイトで慣例的な .html 拡張子に対応。

// URL パターンを index.php?pagename=renritsu にルーティング
add_rewrite_rule('^renritsu\.html$', 'index.php?pagename=renritsu', 'top');

// page_link フィルターで生成URLを .html 形式に書き換え
add_filter('page_link', function($permalink, $post) {
    if ($post->post_type === 'page' && $post->post_name === 'renritsu') {
        return home_url('/' . $post->post_name . '.html');
    }
    return $permalink;
}, 10, 2);

'top' 優先度で登録し、WordPress デフォルトルールより先に評価させる設計。

3. Contact Form 7 メールアドレス確認バリデーション

フックの優先度を 11（デフォルト 10 より後）に設定し、デフォルト検証後に追加チェックを実行。グローバル変数で1つ目のメール値を保持し、2つ目フィールドと照合。

add_filter('wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2);

function wpcf7_text_validation_filter_extend($result, $tag) {
    global $my_email_confirm;
    $tag   = new WPCF7_Shortcode($tag);
    $name  = $tag->name;
    $value = isset($_POST[$name])
        ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " ")))
        : '';

    if ($name === 'your-email') {
        $my_email_confirm = $value;
    }
    if ($name === 'your-email_confirm' && $my_email_confirm !== $value) {
        $result->invalidate($tag, '確認用のメールアドレスが一致していません');
    }
    return $result;
}

wp_unslash() によるPOSTデータのサニタイズを適切に実施。

4. キャプションショートコードのカスタマイズ

WordPress デフォルトの を上書きし、画像インライン埋め込みキャプションを独自実装。正規表現でコンテンツを解析し、キャプションテキストを抽出。esc_attr() によるXSS対策を実施した上でHTML生成。

トップページのコンテンツ構成（WP_Query 多段活用）

index.php において、12以上の WP_Query / get_posts() を使い分けて多様なコンテンツセクションを動的構築。

// 例：期間指定付きクエリ（直近1年以内の投稿のみ表示）
$args = array(
    'posts_per_page'  => -1,
    'category_name'   => 'extra',
    'category__not_in'=> array(15),
    'date_query'      => array(array(
        'after' => array(
            'year'  => $year - 1,
            'month' => '1',
            'day'   => '1',
        ),
    )),
);

カスタムメタフィールド（page_category）で「トップ固定」「本文エリア」「バックナンバー」を切り分け、管理画面から柔軟なコンテンツ管理を実現。

セキュリティ対策（.htaccess）

WordPress 向けセキュリティプラグイン「All In One WP Security」の設定と組み合わせ、包括的なサーバーサイドセキュリティを実装。

Docker を使ったローカル開発環境

本番環境（共有サーバー）との差異を最小化しつつ、テーマファイルのライブ編集が可能なDocker環境を構築。主に、Wordpress本体やPHPなどのコア部分のバージョンアップが必要な際に事前の検証に活用している。

services:
  wordpress:
    build: ./docker/wordpress
    ports: ["8083:80"]
    volumes:
      - ./wp-content/themes/theme_name:/var/www/html/wp-content/themes/theme_name
      - ./media:/var/www/html/wp-content/uploads
    environment:
      WORDPRESS_DEBUG: "1"
  db:
    image: mariadb
    ports: ["3309:3306"]

• テーマディレクトリをボリュームマウントし、再起動なしでの即時反映を実現
• ポート番号を本番と分離（8083 / 3309）しローカル競合を防止
• WORDPRESS_DEBUG: "1" でデバッグモードを有効化

JavaScript インタラクション

jQuery を使用し、3種のUI動作を実装。

// サブメニュー開閉（外クリック自動収納付き）
$('#have-submenu1').click(function(event) {
    $('#submenu1').is(':visible')
        ? $('#submenu1').slideUp('slow')
        : $('#submenu1').slideDown('slow');
    event.stopPropagation();
});
$(document).click(function() { $('#submenu1').slideUp('slow'); });

// スクロール連動フローティングボタン
$(window).scroll(function() {
    $(window).scrollTop() > headerBottom
        ? $('#go_top').fadeIn('slow')
        : $('#go_top').fadeOut('slow');
});

// スムーススクロール（アンカーリンク全対応）
$('a[href^="#"]').click(function() {
    var target = $($(this).attr('href'));
    $('html, body').animate({ scrollTop: target.offset().top }, 500, 'swing');
    return false;
});

まとめ