鉄道ダイヤグラム作成

• このサイトは、時刻表データからダイヤグラムを作成できるサイトです。
• Windows、Mac に対応しており、ブラウザと、エクセル か Googleスプレッドシート があれば作れます。
• 作成したダイヤグラムは、iPad、iPhone、Android でも見られ、プリントすることもできます。
• 大きく表示しても奇麗なSVG形式で、カラフルなダイヤグラムも作ることもできます。

• サンプルダイヤグラム
• ダイヤグラム作成フォーム
• ダイヤグラムの作成手順
• 時刻データの仕様
• ダイヤグラムの使い方

• こちらのページで作成した、サンプルダイヤグラム一覧です。
  • 山手線（シンプルなダイヤグラムです）
    （ html・SVG・PNG・PDF ）
  • 東海道山陽新幹線（列車名毎にスジの色を変えています）
    （ html・SVG・PNG・PDF ）
  • 東北 北海道・秋田・山形新幹線（３つのダイヤを１つにしています）
    （ html・SVG・PNG・PDF ）
  • 山手線（スジなし）（手書きでダイヤを作りたい場合などに）
    （列車データを空で生成すると作れます）
    （ html・SVG・PNG・PDF ）
• 全て架空のダイヤグラムで、ファイル形式はそれぞれ４種類あります。
• ご自身でデータを用意する事により、この様なダイヤグラムを作れます。
  ※複雑、高機能なダイヤグラムの作成はできません。
  ※PDFはダイヤを表示後、ブラウザの印刷機能で生成しています。
• ※保存は環境により上手く動作しない場合があります。
  その場合は、Google Chrome を利用してみて下さい。
• ※スマホ、タブレット対応ですが、作成はパソコンの使用をお勧めします。

• 各項目を入力・設定して「作成」をクリックするとダイヤグラムが生成され、全画面で表示します。
• 作成手順や時刻データの仕様は、フォームの下に記載してあります。

1. 時刻データを作る
   • こちらが必要なデータのイメージです。
     表計算ソフトで見ている状態を表しています。

     ↓No

     ↓上下

     ↓駅種

     ↓駅色

     ↓距離

     ↓項目・駅

     ↓着発番

     ↓列車

     1

     1

     スジ種

     2

     2

     1

     1

     スジ色

     #e93323

     #efc51e

     #efc51e

     #efc51e

     #ec73b2

     #e93323

     #3753f6

     #3753f6

     #efc51e

     #efc51e

     #efc51e

     1

     1

     列車番号

     539A

     85A

     7A

     9A

     11:15A

     637A

     773A

     707A

     11A

     207A

     13A

     1

     1

     列車名

     ひかり 539

     のぞみ 85

     のぞみ 7

     のぞみ 9

     さくら 555

     ひかり 637

     こだま 773

     こだま 707

     のぞみ 11

     のぞみ 207

     のぞみ 13

     1

     1

     2

     #da3333

     10

     東京

     発

     05:20

     05:35

     05:41

     05:50

     05:53

     06:02

     06:11

     1

     1

     50

     品川

     着

     05:26

     05:41

     05:47

     05:56

     05:59

     06:08

     06:17

     1

     1

     品川

     発

     05:20

     05:27

     05:42

     05:48

     05:57

     06:00

     06:09

     06:18

     1

     1

     18.76

     新横浜

     着

     05:30

     05:37

     05:52

     05:58

     06:07

     06:10

     06:19

     06:28

     1

     1

     新横浜

     発

     05:20

     05:31

     05:38

     05:53

     05:59

     06:08

     06:11

     06:20

     06:29

     1

     1

     51.11

     小田原

     着

     05:35

     ↓

     ↓

     ↓

     06:14

     06:23

     ↓

     ↓

     ↓

     1

     1

     小田原

     発

     05:36

     ↓

     ↓

     ↓

     06:16

     06:25

     ↓

     ↓

     ↓

     1

     1

     18.78

     熱海

     着

     ↓

     ↓

     ↓

     ↓

     ↓

     06:33

     ↓

     ↓

     ↓

     1

     1

     熱海

     発

     ↓

     ↓

     ↓

     ↓

     ↓

     06:34

     ↓

     ↓

     ↓

     1

     1

     15.87

     三島

     着

     ↓

     ↓

     ↓

     ↓

     ↓

     06:40

     ↓

     ↓

     ↓

     1

     1

     三島

     発

     ↓

     ↓

     ↓

     ↓

     ↓

     06:11

     06:46

     ↓

     ↓

     ↓

     1

     1

     23.7

     新富士

     着

     ↓

     ↓

     ↓

     ↓

     ↓

     06:20

     06:54

     ↓

     ↓

     ↓

     1

     1

     新富士

     発

     ↓

     ↓

     ↓

     ↓

     ↓

     06:22

     06:57

     ↓

     ↓

     ↓

     1

     1

     32.44

     静岡

     着

     06:00

     ↓

     ↓

     ↓

     ↓

     06:33

     07:07

     ↓

     ↓

     ↓

     1

     1

     静岡

     発

     06:01

     ↓

     ↓

     ↓

     ↓

     06:38

     07:10

     ↓

     ↓

     ↓

     1

     1

     43.86

     掛川

     着

     ↓

     ↓

     ↓

     ↓

     ↓

     06:51

     07:24

     ↓

     ↓

     ↓

     1

     1

     掛川

     発

     ↓

     ↓

     ↓

     ↓

     ↓

     06:53

     07:28

     ↓

     ↓

     ↓

     1

     1

     27.62

     浜松

     着

     ↓

     ↓

     ↓

     ↓

     ↓

     07:03

     07:38

     ↓

     ↓

     ↓

     1

     1

     浜松

     発

     ↓

     ↓

     ↓

     ↓

     ↓

     07:05

     07:43

     ↓

     ↓

     ↓

     1

     1

     35.25

     豊橋

     着

     ↓

     ↓

     ↓

     ↓

     07:08

     07:17

     07:55

     ↓

     ↓

     ↓

     1

     1

     豊橋

     発

     ↓

     ↓

     ↓

     ↓

     07:09

     07:22

     07:59

     ↓

     ↓

     ↓

     1

     1

     38.65

     三河安城

     着

     ↓

     ↓

     ↓

     ↓

     ↓

     07:35

     08:11

     ↓

     ↓

     ↓

     1

     1

     三河安城

     発

     ↓

     ↓

     ↓

     ↓

     ↓

     07:43

     08:16

     ↓

     ↓

     ↓

     1

     1

     2

     29.2

     名古屋

     着

     06:44

     06:47

     06:54

     07:10

     07:28

     07:55

     08:26

     07:30

     07:36

     07:45

     1

     1

     名古屋

     発

     06:45

     06:48

     06:55

     07:11

     07:33

     08:03

     07:32

     07:37

     07:47

   • データは表計算ソフトなどを使い、ご自身で作成して下さい。
   • Googleスプレッドシートやエクセルでの作成がお勧めです。
   • データの仕様は、下記の「時刻データの仕様」に記載してあります。
   • データの保存は、当サイト内では行っておりませんので、ご自身で行って下さい。
2. 時刻データを入力する
   • 作成した時刻データを、作成フォームの「時刻データ」欄に入力します。
   • 入力方法は２通りあります。
     1. データファイルを選択する方法
        • 「ファイルを選択」ボタンをクリックし、時刻データのファイルを選択します。
          以上で自動的にファイルの内容が「時刻データ」欄に入力されます。
        • ※対応ファイル形式は「tsv」（タブ区切り）か「csv」（カンマ区切り）のみです。
     2. データ内容をコピペする方法
        1. エクセルやスプレッドシートのデータシートを開き、全てを選択してコピーします。
        2. 「時刻データ」欄に、コピーした内容をペースト（貼り付け）します。
        • データの「全て選択」は、画面の左上（下図の赤色部分）を左クリックするとでき、
          あとは右クリックで「コピー」を選択してコピーできます。
          Googleスプレッドシート
          エクセル
          
3. 各種設定を行う
   • 作成フォームの、各項目のサイズや色を設定します。
   • 設定内容は、最後に作成した際の内容が、お使いのブラウザ（cookie）に保存され、
     次回フォームを表示した際に、保存された内容が自動設定されます。
4. 「作成」ボタンをクリックする
   • 作成は以上で完了です。
   • ダイヤグラムは画面一杯に表示されます。
   • 画面左上の「×」をクリックするとダイヤグラムを閉じます。
   • ダイヤグラム作成に回数制限はありませんので、
     微調整したい場合など、納得いくまで何度でも作り直せます。
   • 作成したダイヤグラムの使い方や保存方法は、下記の項目をご覧下さい。

はじめに

• こちらが、最終的に必用となるデータのイメージです。
• JTB時刻表やJR時刻表などに掲載されている、縦軸が駅、横軸が列車毎のデータと同様です。
• この情報を基本とし、いくつかの情報を追加してデータを作成します。
• データは、Googleスプレッドシートやエクセルなどで管理してください。

  ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
  1	1				スジ種			6	2		6	7
  1	1				スジ色			#cc0000			#cc0000
  1	1				列車番号		201B	101A	801C	203B	103A	901D
  1	1				列車名			特急123号	臨時		特急125号	試運転
  1	1			1	Ａ駅	発	0500	0515	0530	0600	0615	0620
  1	1			2.5	Ｂ駅	発	0510	↓	↓	0610	↓	0630
  1	1			3.7	Ｃ駅	着	0520	0525	↓	0620	0625	0640
  1	1				Ｃ駅	発	0530	0526	↓	0630	0626	0640
  1	1			2.1	Ｄ駅	着	0540	0530	0550	0640	0630	0650
  ↓No	↓上下	↓駅種	↓駅色	↓距離
  1	2				スジ種
  1	2				スジ色
  1	2				列車番号		202B	204B	103A	206B
  1	2				列車名				特急120号	快速
  1	2				Ｄ駅	発	0450	0550	0600	0630
  1	2				Ｃ駅	着	0500	0600	0605	0640
  1	2				Ｃ駅	発	0500	0610	0606	0640
  1	2				Ｂ駅	発	0510	0620	↓	0650
  1	2				Ａ駅	着	0520	0630	0620	0700

注意点（データ作成前に必ずご確認下さい）

• スプレッドシートやエクセルでデータを扱う際、「表示形式」の設定にご注意下さい。
• スプレッドシートでは「書式なしテキスト」、エクセルでは「文字列」にして下さい。
• 設定が「標準」や「自動」などの場合、時刻データの「0123」が「123」に変化してしまい、使えなくなります。
• シート左上の角をクリックして全面を選択し、「表示形式」を一括して設定すると楽です。
• １つのダイヤ内に同一駅名を２度表示したい場合は、２度目に表示する駅名を変えて下さい。
  例えば、山手線の「大崎」〜「大崎」などが該当します。
  この場合、２度目に表示する「大崎」を「大崎　」や「大崎２」などにしてください。

仕様の詳細

• 実際のデータを表示しながら、簡単なデータから順にご説明します。
• 各データ部分をクリックすると、そのデータでのダイヤグラムが表示されるので確認できます。
  ※表示されたダイヤグラムが見にくい場合は、ダイヤグラムの使い方 を見ながら表示サイズを調整して下さい。
• １列目、２列目の設定
  • こちらは、ダイヤ作成に必要最低限の情報を記入してあるデータです。
  • これで、Ａ駅05:00発、Ｂ駅05:10着の下りだけのダイヤが生成できます。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				Ａ駅	発	0500
    1	1				Ｂ駅	着	0510

  • こちらは、上りも入れてあるデータです。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				Ａ駅	発	0500
    1	1				Ｂ駅	発	0510
    1	1				Ｃ駅	着	0520
    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	2				Ｃ駅	発	0530
    1	2				Ｂ駅	発	0540
    1	2				Ａ駅	着	0550

  • １列目は、その行が、何番目のダイヤのデータかを設定します。
    一度の作成で、１つのダイヤだけを入れる場合は「1」と設定します。
    一度の作成で、複数のダイヤを入れる場合は、「1」「2」「3」と順番に設定します。
    「複数のダイヤ」とは、本線と分岐線、Ａ線とＢ線などです。
    「サンプルダイヤグラム」の「東北 北海道・秋田・山形新幹線」では、３つのダイヤが入っているので参考にして下さい。
    （ 東北 北海道・秋田・山形新幹線のデータ ）
  • ２列目は、その行が、上り下りのどちらのデータかを設定します。
    通常は「下り」「外回り」「南行」「西行」を「1」とし、「上り」「内回り」「北行」「東行」を「2」と設定します。
• ３列目の設定
  • その行の駅名と駅名の下線の「太さ」を変えたいときに設定します。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				Ａ駅	発	0500
    1	1	1			Ｂ駅	発	0510
    1	1	2			Ｃ駅	発	0520
    1	1	3			Ｄ駅	着	0530

  • 終点や主要駅などの、強調したい駅に設定すると見やすくなります。
  • 設定は３段階で、下記の通りとなります。
    • 1 : 細（空白の場合も同様）
    • 2 : 中
    • 3 : 太
• ４列目の設定
  • その行の駅名と駅名の下線に色を付けたいときに設定します。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1		#ec5858		Ａ駅	発	0500
    1	1				Ｂ駅	発	0510
    1	1				Ｃ駅	発	0520
    1	1	2	#ec5858		Ｄ駅	着	0530

  • 終点や主要駅などの、強調したい駅に設定すると見やすくなります。
  • 色は RGB をカラーコード（#と６桁の英数字の組み合わせ）で指定して下さい。
    例 : #000000、#ff0000、#0000ff、#ff6600
  • カラーコードは、こちらのカラーパレットで確認できます。
    
• ５列目の設定
  • １つ上の駅との距離を km で設定します。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				Ａ駅	発	0500
    1	1			10.0	Ｂ駅	発	0510
    1	1			3.7	Ｃ駅	発	0520
    1	1			6.7	Ｄ駅	着	0530

  • 設定した値に合わせて、駅名欄の高さが変わります。
  • 他の駅間と比べて距離が短い場合は駅名が重なるので、その場合は数値を調整して下さい。
  • 不明や面倒な場合は空白のままでも構いません。
  • 駅間が狭く表示される場合は、フォームの「駅間１kmの高さ」で調整して下さい。
• ６列目、７列目の設定
  • ６、７列目の設定は、８列目以降に何のデータを設定するかで変わります。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				Ａ駅	発	0500
    1	1				Ｂ駅	発	0510
    1	1				Ｃ駅	着	0520
    1	1				Ｃ駅	番線	10

  • 上例の場合、２行目は、８列目以降は「Ａ駅」の「発車時刻」を設定するので、６列目には「Ａ駅」、７列目には「発」と設定します。
  • 同様に、４行目は、８列目以降は「Ｃ駅」の「到着時刻」を設定するので、６列目には「Ｃ駅」、７列目には「着」と設定します。
  • 同様に、５行目は、８列目以降は「Ｃ駅」の「着発番線」を設定するので、６列目には「Ｃ駅」、７列目には「番線」と設定します。
• ８列目以降の設定
  • ８列目以降に設定するのは、列車の情報だけです。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				Ａ駅	発	0500	0530		0630
    1	1				Ｂ駅	発	0510	0540	0610	0640
    1	1				Ｃ駅	着	0520	0550	0620

  • １列に１つの列車を記入します。
  • 列車は幾つでも設定できます。
  • 始発駅以前の駅、終着駅以降の駅は空白にして下さい。
  • 通過駅は、空白や「レ」「||」「↓」など何でも構いません。
• 列車毎の設定
  • 各列車毎に、色や線の種類を変えたり、列車番号や列車名を表示する事ができます。

    ↓No	↓上下	↓駅種	↓駅色	↓距離	↓項目	↓着発	↓列車
    1	1				スジ種		1	6	2		7	8
    1	1				スジ色			#cc0000			#cc0000
    1	1				列車番号		201B	101A	801C	203B	103A	901D
    1	1				列車名			特急123号	臨時		特急125号	試運転
    1	1				Ａ駅	発	0500	0530	0600		0700	0730
    1	1				Ｂ駅	発	0510	0540	0610	0640	0710	0740
    1	1				Ｃ駅	着	0520	0550		0650	0720	0750

  • 設定は任意で、必須ではありません。
  • 設定できるい項目は４種類で、下記の通りです。
    • スジ種：スジの種類を設定でき、設定した数値により下記の通りとなります。
      • 1：細い実線（空白の場合も同様）
      • 2：細い破線Ａ（----------）
      • 3：細い破線Ｂ（ーーーーー）
      • 6：太い実線
      • 7：太い破線Ａ（----------）
      • 8：太い破線Ｂ（ーーーーー）
    • スジ色：スジに色を付けたい場合に設定できます。
    • 列車番号：入力した内容を、スジの横に表示します。
    • 列車名：入力した内容を、スジの横（列車番号の次）に表示します。
  • 設定したい項目がある場合は、その行を追加し、各列車の上部に各項目の値を設定します。
  • 列車の情報は、どの列車を、どの列に入力しても、表示内容は同じです。
    終電が一番左で、初電が一番右でも、同じです。

スクロール

• ダイヤグラムは上下左右にスクロールできます。
• 「スクロールボール」「トラックボール」など、360度自由な方向に回せるボールが付いているマウスでは、
  マウスだけで上下左右をスクロールできます。
• 「スクロールホイール」が付いているマウスでは、縦方向はマウスだけでスクロールでき、
  横方向は「shift」キーを押しながらホイールを回すとスクロールできます。
• 「タブレット」「スマホ」では、「フリック」や「スワイプ」でスクロールできます。

強調表示・検索

• ダイヤグラム上の「列車番号」「列車名」「スジ」の何れかをクリックすると、その列車だけを強調表示できます。
  再度、何れかをクリックすると、元に戻ります。
• 画面下部の検索フォームに、「列車番号」「列車名」などを入力すると、該当する全ての列車を強調表示します。
  文字入力欄を空白にするとリセットできます。
• キーワードは、全角スペースを入れると「or検索」になります。
• 強調表示は、ダイヤグラムを閉じるとリセットされますのでご注意下さい。

絞り込み

• 画面下部のボタンで表示するスジの切替ができます。
  1. ：全てのスジを表示
  2. ：下りのスジだけを表示
  3. ：上りのスジだけを表示

サイズ変更

• 画面下部の入力部分やボタンでダイヤの表示サイズを変更できます。
• 「パソコン」と「タブレット・スマホ」で操作方法が異なります。
• パソコン
  • この様な入力部分が4つ表示されています。
    
  • 左から、駅名幅、駅間１kmの高さ、時分線１分の幅、ダイヤとダイヤの間隔、の設定となります。
  • 各部分内の「▲▼」や「⋀⋁」をクリックすると変更できます。
    
  • 「▲▼」や「⋀⋁」が表示されていない場合は、入力部分にカーソルを乗せると表示します。
  • それでも表示されない場合は、キーボードの▲▼↑↓などで操作してみて下さい。
  • それも出来ない場合は、直接数値を入力して「リターンキー」を押して下さい。
• スマホ
  • 下記の4つのボタンが表示されており、タップで変更できます。
    • ：縦サイズを縮小
    • ：縦サイズを拡大
    • ：横サイズを縮小
    • ：横サイズを拡大

保存

• 作成したダイヤグラムは、４種類のファイル形式で保存できます。
• ダイヤグラムを作成すると、画面下部にボタンが表示され、クリックすると保存できます。
• ボタンと保存できる種類一覧
  1. ：SVG形式のファイルで保存（機能は使えなくなります）
  2. ：PNG形式のファイルで保存（機能は使えなくなります）
  3. ：htmlページが生成され、URLを発行（機能は全て使えます）
     ページは一定期間経過後、自動的に削除します。
  4. ：PDF形式のファイルで保存・印刷・プリント
     （ 保存は、ブラウザの印刷機能を利用します ）
     クリックすると、印刷する際の１ページの横幅を選択できます。
     選択すると、新しいウィンドウで印刷用のページを表示しますので、
     あとはブラウザの印刷機能で「PDFで保存する」か「印刷する」を選択して下さい。
• 環境により上手く動作しない場合は、Google Chrome をお使い下さい。