HP更新の背景

当社では、ホームページの情報を随時更新しております。
ご訪問いただいた皆さまに、制作の背景から取り組みをお伝えすることで、次のようなつながりを築いていければ幸いです。

• 事業内容や技術力のご紹介（信頼の土台づくり）
• ご相談・ご依頼につながる情報発信（新たなビジネス機会）
• 採用情報の掲載（新しい仲間との出会い）

ぜひ一度ご覧ください。

目次へ戻る

課題点の洗い出し

今回のホームページ更新にあたり、現行サイトの課題点を洗い出しました。
テーマのサポート終了、フォームやフッターの機能性、レイアウトの調整など、見直し対策を通じて、より見やすく・伝わりやすい構成を目指しています。

代替テーマリニューアルの検討。

代替テーマリニューアルの検討と、動作ver比較を調査。
下表は調査結果ならび比較になります。

※HPとして使用テーマに問題ないため、いったん調査までとしました。サイトマップやレイアウト、追加プラグインの動作検討を進めました。

ホームページ開発環境のver確認

R7/6/13時点の弊社のHP構成は下記の通りです。

バックアップ / リカバリー

プラグインBackWPupを使用

HPのサイトマップ構成

弊社HPの構成について他社と比較し、よりIT企業のPRを高めるため参考にしました。
比較表は下記の通りです。
※マークの意味「罫線：下層ページ」「・：見出し」

当社と比べ、見出し項目やその下層ページが少ない印象を受けました。
そこで、当社HPの構成をaftのように集約、変更を行いました。

お問い合わせフォーム更新

お問い合わせはプラグインContactForm7を導入しています。自動返信設定と問い合わせ表のレイアウト編集を更新しました。
自動応答設定は下記の通りです。

問い合わせ表のレイアウトを編集。

⚙：WPダッシュボード / 外観 / カスタマイズ / 追加CSS　
プラグインContactForm7の入力フォームの表示レイアウト微修正するため、下記CSSを追加しレイアウトを整えました。

/* フォーム全体の幅と中央寄せ */
.wpcf7 form {
	padding: 0 0 0 20px;/* 上・右・下は0、左だけ余白20px */
}

.wpcf7-form-control-wrap {
  display: block;  /* 要素をブロック表示にして縦並びにしやすく */
  margin: 0;　 　　/* 外側の余白0px */
  padding: 0;　  　/* 内側の余白0px */
}

/* テキストエリアの高さ調整 */
.wpcf7 textarea {
  height: 100px !important; /* 高さ100pxに強制固定（!important使用） */
  max-height: 100px;　　　　/* 最大高さ100px */
  min-height: 100px;　　　　/* 最小高さ100px */
  resize: none; 　　　　　  /* ユーザーがテキストエリアのサイズ変更不可 */
}

/* 送信ボタンのスタイル */
.wpcf7 form input[type="submit"] {
  background-color: #0073aa;  /* ボタンの背景色（青系） */
  color: #fff;　　　　　　　　  /* 文字色：白 */
  padding: 10px 30px;　　　　　/* 上下10px、左右30pxの余白 */
  font-size: 1rem;　　　　　　 /* 文字の大きさ標準の1rem設定 */
  border: none;　　　　　　　　/* 枠線なし */
  border-radius: 4px;　　　　　/* 角丸を4px */
  cursor: pointer;　　　　　　 /* マウスオーバー時に手のカーソルに変化 */
  margin-top: 10px;　　　　　　 /* ボタン上に10px余白 */
}

/* 送信ボタンにマウスを乗せた時の色の変化 */
.wpcf7 form input[type="submit"]:hover {
  background-color: #005e8a;   /* 少し濃いめの青に変わる */
}

/* 送信後のメッセージ表示部分の余白調整 */
.wpcf7 form .wpcf7-response-output {
     margin: 0em 0.5em 0em !important; /* 上・下0、左右0.5em強制余白 */
}

調整した結果、お問い合わせ入力フォームは下図のようになりました。

フッターにサイトマップリンク、住所の地図表示の追加

⚙：外観 /メニュー / 新しいメニューを作成しましょう　選択
フッターメニュー　名で作成し、トップメニューと同等の項目を固定ページ一覧から選択し保存

・ブロック
・ブロック
・ナビゲーションメニュー　←　追加
　　タイトル：Company Info
　　メニュー選択：フッターメニュー
・テキスト 　←　地図表示用に追加
　　タイトル：Company
　　コード　←　GoogleMapから弊社所在地のコードを引用

〒530-0041
大阪市北区天神橋2丁目5番3号第5新興ビル503号室
株式会社エンジニアズ
TEL : (06)6467-4465
<iframe style="border: 0;"
 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.326420084503!2d135.5108530751032!3d34.69694597292087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e6dafd60d387%3A0x71a38225ac63d78d!2z5qCq5byP5Lya56S-44Ko44Oz44K444OL44Ki44K6IOacrOekvg!5e0!3m2!1sja!2sjp!4v1750062374826!5m2!1sja!2sjp" 
width="600" 
height="450" 
allowfullscreen="">
</iframe>

TOPページ以外のページでもトピックス記事リスト、タグリストが表示される

テーマNEXTAGEにて、TOPページ以外で各記事にサイドバー（トピックス記事リスト、タグリスト）が表示され、画面横幅一杯で記事が表示できなかった。調査した結果下記設定変更の対応で解消。

⚙：固定ページ / 各固定ページのクイック編集 / テンプレート選択
１：テンプレート項目「デフォルトテーマ」→「No side」選択
２：更新

レイアウト調整

レクレーション活動について紹介ページのレイアウト調整
カラムを使い配置を調整していきます。

👍採用ページ / 社員紹介でのブロック配置
📌社員紹介ですので写真と紹介文を載せる配置にしました。
左図：構成
右図：カラム内のブロックの垂直配置
※「埋めるように拡張」：比べるべきカラムがある場合、短い側のカラム高さを自動的に長い側に合わせて揃える

▼

😊採用ページ / レクレーション活動でのブロック配置
📌レクレーション活動ですので交流場所や社員間の雰囲気を伝える狙いで配置
※　ブロック配置の手法もいろいろ試しています

⛩大阪天満宮
左図：構成
※今回カラム内で縦積みは、タイトルと段落の間が縮まったため未使用
右図：カラム配置

カラム（タグ：大阪天満宮）
　上揃え

カラム（SmartSlider3）
　中央揃え

▼

天神橋商店街
左図：構成
右図：各ブロック配置設定

メディアとテキスト
垂直方向：上揃え
メディアを左に配置

▼

😁繫昌亭
左図：構成
右図：各ブロック配置設定
※カラム内に写真を収めるカラムを2列入れている

カバー：配置：中央寄せ
　カラム：中央揃え
　　カラム：中央揃え
　　（＝　タイトル、紹介文用）
　　　縦積み：左揃え
　　カラム：中央揃え
　　（＝　紹介画像用）
　　　カラム：中央揃え
　　　　画像１：設定１
　　　カラム：中央揃え
　　　　画像２：設定２
※設定１・２は下記設定内の「画像」に記載

伸縮
　　・Cover　画像２で選択
　　　　＝　はみ出してもいいからピッタリ埋めたい
　　・Contain　画像１で選択
　　　　＝　はみ出さず全部見せたい

▼

⛰六甲山へドライブ
📌山なので、段々になる見た目を目指しました。
左図：構図、中央：レイアウト結果

図のカラム内のコンテンツ配置設定
カラム：上揃え
　カラム：上揃え
　カラム：中央揃え
　カラム：下揃え
※　各縦積みは、「中央揃え」設定