はじめに
事前説明
この専攻医サイトのシステムは、診療班の脊椎脊髄班サイト(2024年10月納品)のシステムに乗せ換えたWEBサイトシステムになります。
そこで、何点か事前にお知らせをしておきます
- サイトによって搭載している機能(以下セクションテンプレート)が異なります
- 専攻医サイト専用のセクションテンプレートがあります
- 旧専攻医サイト(2025年2月時点)で実現していることを本サイトでは可能レベルになっています
- 脊椎脊髄班サイトを例にした使い方の説明などがありますので本サイトに置き換えて理解をして下さい
- 本ページに序文などもあり脊椎脊髄班サイトの Tutorial と重複してしまいますが、この専攻医サイトが初めてとなる人の場合も想定できますのでご了承ください。
旧専攻医サイト(2025年2月時点)にあって本サイトにないもの
- アカウント。旧サイトを作成時に運営体制が曖昧だったのでBlog(先輩より)の投稿者(author)の一人ひとりにアカウントを発行してBlogの投稿ができるようにしていましたが本サイトではその概念はありません。
- Table 作成機能を編集ページに搭載していましたが本サイトでは搭載していません。現時点でのバージョン等の稼働テストが必要ですが用途があれば搭載できると思います。
はじめに
ここでは、スマートフォンで普通にYahooや気になるカフェのホームページを利用しているけど、どのようにできているのか?なんて考えたこともなく想像もつかない!という人のために作成しました。
カフェのホームページといっても、TOPページがあり、食事やドリンクのメニュー、季節限定メニューの紹介、お店の場所案内、従業員募集などのページが多数あります。
そして、ナビゲーションなどのメニューがあり、それをクリックすることで、各ページを表示することができます。
ここでは
- ホームページを構成しているページについて
- ホームページの内容を「どこで」「どのように」編集しているのか?
- 各ページをどのように配置しているのか?
クライアント側でホームページの編集をする目的と背景
クライアント側の作業ができる機能として、「お知らせ」などの最新情報をユーザーへ告知する機能やBlogなどの機能を使ってコンテンツ情報を公開する機能が一般的ですが、本システムでは、クライアント側でホームページの内容を追加編集する機能を搭載しています。
通常では、HPの「メニューの項目を増やす」、「ページ内の情報を追加/削除」するなどの作業は内部ファイルなどを編集する必要があるためシステム会社へ依頼をする必要があり、同時にシステム会社へ支払う作業料が発生します。
本システムでは、クライアント側でHPを作成/編集を可能とする設計及び管理画面を構築しており、従来のホームページ運用で発生するであろうカスタマイズ費用の80%以上を抑えることを可能としています。
- ホームページ運用の費用を大幅にコストダウンができます
- システム会社へ依頼をする時間的(下準備・実際の打合せ)コストを無くすことができます
- 修正を公開後にもスピーディーに再修正ができます
また、クライアント側で作業をする担当者が不在の場合であっても、仮にシステム会社側へ依頼する場合でも本システムが搭載されていることで作業量も軽減することが可能であり、月々の保守費用でまかなうことも可能であります。
よって、作業の担当者様には、本システムの利用方法及び目的と背景を理解をして頂き、使う前にまずは目的と背景と輪郭だけでも描いていただければと思います。
ホームページの作成の知識について
本システムでは、ホームページ(以下 HP)の作成の知識がない人でも本システムの機能を使うことでHPを作成できるように構築されています。対象としては、パソコンでマイクロソフトのWordなどを使ったことがある。という人を前提としています。
- 専用のコードなどの知識がなくても
- Word を使うような感じでHP文章の作成ができる
- 本システムのマニュアル(テンプレート、使い方など)を順次用意してあります
ページ上の表示
![]() |
文章を作成するフォーム
![]() |
このフォームで文章の入力以外にも表を作ったり画像を挿入したりしてコンテンツを作成することが出来ます。本システムでは「エディター」と呼んでいます。マイクロソフトの簡易版のWordのようなものになります。
編集方法について
ページの作成編集について
管理画面(ダッシュボード)のメニューから作成編集ができます。
「固定ページ:TOPページや専門研修プログラムなどの主にグローバルメニューにあるページ」、そして投稿タイプの「お知らせ」「Blog(先輩より)」「関連研修施設」などもWordのドキュメントのようにページに情報が記述されていて、そのページはカテゴリ別に分けて管理されています。そして、各ページは、用途に合わせたフォーム(セクションテンプレート)で情報を入力をします。
![]() |
HPを編集するための管理画面のTOPページです。 左側の赤い下線のところにページを編集するためのメニューがあります。 |
![]() |
メニューの「Pages」をクリックすると、「全体TOPページ」、「専門研修プログラム説明」、「研修病院・指導医数」、「病院見学」などがあり、これを開くと各ページの編集ができます。 |
![]() |
「Blog」の中には、先輩よりの記事が入っています。 |
![]() |
「お知らせ」の中には、Whats New の記事が入っています。 |
![]() |
「関連研修施設」の中には、各研修病院 の記事が入っています。 |
![]() |
「研修プログラム」の中には、専門研修プログラム の記事が入っています。 |
![]() |
ページのヘッダー(上段)にあるメニューなどのグローバルの設定のメニューになります。 グローバルについては「セクション・テンプレートのレイアウト設定について」の Tutorial で説明しています。 |
各コンテンツやページをどのように配置しているのか?
上記のビデオは脊椎脊髄班用で作成した Tutorial になります。
本システムでは、HPを構成するための機能をあらかじめ搭載してあります。
- ページ内にコンテンツを作成する機能
- 作成されたページを指定の場所で表示する機能
などの機能を搭載しています。
ページ内にコンテンツを作成する機能
下記は、複数枚の画像と文章のコンテンツを「2col Gallery | Editor A」というセクションテンプレートで表示しています。
イメージとして、マイクロソフトの Word (または、Google ドキュメント)でツールバーから画像を挿入するメニューを使用して画像などを張り付けますが、同様にツールメニューから「2col Gallery | Editor A」を選択して専用のフォームから画像と文章を入力すると下記のような表示が完成されます。
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
テスト環境
![]() |
練習用として Pages の 中に 「Test」というページがあり、下記の練習を行えます。
- Type Classic
- メインコンテンツで使用するセクションテンプレート
- SideBar
とくに Type Classic などのテンプレートは多くの設定箇所があります。「Type Classic Test」で動作確認テストをして下さい。「Type Classic」は本番環境になります。