44
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[tips]スプレッドシートで構成図(サイトマップ)を作成する方法

Last updated at Posted at 2018-06-21

最近、ページを洗い出すために構成図(サイトマップ)を作成する機会があり、
スプレッドシートで簡単に作成できる方法を見つけたのでまとめてみました。

目次

  1. なぜ構成図(サイトマップ)を作成するのか?
  2. 構成図(サイトマップ)の作成方法

1. なぜ構成図(サイトマップ)を作成するのか?

- まず構成図(サイトマップ)とは

 サイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。サイトマップによってサイトの骨格を設計し、掲載する情報の組織化・構造化を進めていきます。

- 次に、なぜ構成図(サイトマップ)を作成するのか?

 サイトマップには単なる設計資料としての役割だけでなく、サイトの企画意図をクライアントや他のプロジェクトメンバーと情報共有するためのコミュニケーションツールとしての役割もあるため作成されます。

2. 構成図(サイトマップ)の作成方法

- まずは、どんな感じにできるのか画像をどうぞ!

https://gyazo.com/b8cf5ca9548b3c677f52b47ce06a12d7

では、手順を説明します

- シートの1行目に親要素(遷移元)、子要素(遷移元)、備考の項目を書く

https://gyazo.com/c627b3732546dce2f5c9d2b2e10f2f1e

- 把握している遷移ページを記述(全て書く必要はない)

https://gyazo.com/2fa5a8fdbba162b9b5528ebf889ab24a

- [挿入] > [グラフ] をクリック

https://gyazo.com/adbc568b5992c31da4eae3baf982a6ae

- グラフの種類を[組織図]に設定

https://gyazo.com/3f7e76fbc54aed387a96442d0be883a5

- 親を親要素(遷移元)を設定する

|https://gyazo.com/0834eaf0e1ab9dc6e22abf17ee64804f

https://gyazo.com/60ac037a3ad2e7a27fdf1e69f55147f0

- 識別子を子要素(遷移元)を設定する

https://gyazo.com/dac4ae490668c2c39c9740b17e4feef9

https://gyazo.com/5b3fc1c671c7794c734b7a97def8afeb

- ツールチップを備考を設定する

https://gyazo.com/9ab665e6288245852a02f452791ef6cf

https://gyazo.com/34a22b13c4b7b03b5993c3920fa53bda

#### 以上!めっちゃ簡単だし、修正もしやすいです!

44
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?