【どう作るの？】「見やすさ」重視のサイトマップ
おはようございます、たななこんぶです。
昨日、嬉しい知らせがやってきました。
note上のサイトマップ係担当とも言うべき「伊藤 翼（いとう つばさ）」さんの目に、
私たななの《たななこんぶのサイトマップ》が届きました！↓↓
🔰「サイトマップって言葉、何ですか？」の方、
たななこんぶ流に説明してみたので、よかったらどうぞ↓↓
この記事では、サイトマップのより良い姿を検討してみた過程と結果、その実践方法を整理します。
A. サイトマップの模索過程
1. 「伊藤 翼（いとう つばさ）」さんについて
「伊藤 翼（いとう つばさ）」さん（以下、「翼さん」と呼ばせていただきます）の紹介・ご協力なしでは記事の目的が果たせないので、
丁寧に順を追っていきたいと思います。
翼さんは、
①noterさんが自身の記事をリンク集で一覧化するページを記事として作り、
②一番上に固定することで、
③読者にアクセスしやすくしてもらおう、orそのnoterさん自身の頭の中を整理しよう、
という発信に力を貸してくださっているお方です。
noteを始めて1か月経たずのたななこんぶも、
翼さんの素晴らしい記事を拝見しました↓↓
⭐︎1つ目がこちら↓↓
⭐︎2つ目がこちら↓↓
…いかがですか？ サイトマップが重要だということ、だいぶ理解できますよね🐈⬛
それを踏まえて、次、たななこんぶの場合の、翼さんのノウハウの吸収過程に話をうつします。
2. たななこんぶのアイデア収集・整理整頓
たななこんぶの場合、アイデアの収集・整理→「noteで発信するのはどう？」という流れだったので、
翼さんのようなアイデアの整理の仕方はしていません。
B5のキャンパスノートに日々の記録を書いていたものを、大きなカテゴリに整頓する
という、むしろ翼さんと逆の流れかもしれません。
（余裕のある方は、【noteを始めるきっかけ: 「文章、さくらももこさんみたい」】も読んでいただけると嬉しいです🌱）
3. たななこんぶ、ネタ帳を作る
同じくB5のキャンパスノートに「ネタ帳」と書き、自分だけがわかる題名（メモ付き）を列挙していきました。
具体的に例を出すと、
【ネタ帳】
〈1回目の入院 〇〇病棟〉
・経緯
・給食の座席
・統合失調症を知る
・クリスマスパーティー
・
・
と箇条書きしました。
4. noteを始める決断→「サイトマップ」と出会う
B5ノートができた頃に成り行きでnoteという手段を知り、noteにて発信していく、と決意しました。
ここで重要なのは、次のことをできる限り明確化する、ということです。
・発信する目的（何のために発信するのか）
・書く目標（執筆にあたり達成したいこと）
たななこんぶの場合、
・目的・・・
①「精神科ってこんなところだよー」や「発達障害ASDってこんな感じだよー」を伝えることで人々の抵抗を減らすため、
②困りごとへの解決策の提案をするため
・目標・・・
例）まずは1日1投稿を続けてみる
こんな感じ↑↑です。
目的&目標が作れればもうこっちのもの、
峠を越えて、書きたい気持ちになっているので、
はやる気持ちを抑えつつ、冷静にB5ノートを分類する作業をします。
前後しますが、目的&目標が決まり、noteで発信していく、となれば、
「noteってなに？」の疑問に答える作業が出てきたので、この時「サイトマップってなに？」とも出会いました。
先にも書きましたが、この時、翼さんの記事が参考になりました。
ですので、今この記事をご覧になっている皆さんは、大半が既にnoteを始めていらっしゃると思うので、
今一度、目的&目標は何か、自分に問いかけるのが近道かなぁと思ってみたりします。
5. サイトマップに悪戦苦闘する
サイトマップと出会ったたななこんぶ。
言葉の意味から調べなければ、全くわかりませんでした。
その上、ひたすら題名が羅列されてスマホでスクロール、何が何だかわかりませんでした。
既に書いているセリフ、
「たななこんぶ、わからないこと、ニガテです」。
わからないのに、作れるはずはまずありません。
そこで、わからない理由→解決策を考えました。
①「サイトマップ」を言い換えると？
→「索引帳」！
②文字の羅列、イメージがつかずニガテ…
→図や色を使って「可視化」しよう！
これでようやく、サイトマップを作ろう！にたどり着きました！
次のB.から、どうやって作成したのか、書いていきたいと思います。
B. 《たななこんぶのサイトマップ》を作る
⚠️作業量が多いので、適宜、休憩してくださいね🤭たななは午前中丸々かかりました。
1. Canvaで「索引帳」を図で作る
↑↑これです。こんな感じの図があると、自分も読み手も「わかる〜」ってなると思ったんです。
以下、気をつけるポイント、書きますね。
まずはCanvaのアプリを開くところから〜。
〈手順〉
①: あなたの索引帳のページ（カテゴリ）は何枚ですか？
→たなな「12枚です。」
②: では、①で答えた数字の分だけ、索引帳の題名の枠を複製して増やしましょう！
→たなな「矢印形を枠にしよう、で11回複製マークを押すっと。」
③: この辺りから、ご自身の好みとデザインを決めてください。
→たなな「わかりました！」
④ここからは、たななさんを例にしていきます。12カテゴリの題名を、それぞれ入力してください。
→たなな「自己紹介〜旅行、作りました！」
⑤: 配色を考えましょう。たくさん色があり過ぎると、ごちゃごちゃして見にくいです。
たななさんの12カテゴリは多い方だと思うので、さらに大きなくくりはできませんか？
→たなな「うーん、病院系は緑💚、学生時代はピンク🩷とか？」
⑥: その調子です！あとは均等に配置したり、見やすい工夫をしてみてください。
→たなな「はーい！」
⑦: いいですね〜。完成と思ったら、「画像」として保存など、保存先が写真になるように大切にしまいましょう！
→たなな「了解しやしたー」
いかがですか？できましたか？
ひとつクリアしました！お疲れ様です〜🌱
2. Canvaで「埋め込みリンク」用のトップ記事の見出し画像を作る
次の作業のお話です。
noterさんなら、リンクで跳ぶということは理解されている方がほとんどだと考えました。
要は、題名の羅列を1記事内で繰り返さなくても、「こっちの記事にリンク貼ってあるよ〜」と伝われば、誘導完了！と思ったのです。
各カテゴリごと、記事のURLをコピー、までは翼さん他多くの方と同じですが、
たななのこだわり:「図なら理解しやすい！」
つまり、ただリンクを貼るのではなく、
「記事を埋め込んでURLを貼り付ける」
をしたいです…！
すると、図2のように、「見出し画像でわかりやすい」という印象を受けるはずです。
では、見出し画像の作成手順とポイントにいきましょうか。
〈手順〉
①: ごちゃごちゃすると見にくいので、カテゴリ共通の部分を先に作る
→カテゴリの枚数分を複製する
例）たななのオレンジ枠、アイコン、名前 など
②: ①の〈手順〉⑤で大きく分けた色を思い出してほしい
例）たななは、病院系は緑💚、学生時代系はピンク🩷だったね
③: レイアウトはご自由ですが、各カテゴリに②を反映させるのを忘れずに
例）たななでいうと、左下の枠の色だね
④: その他、ご自由にデザインくださいませ
（たななの参考話）
＊色別も大事だけど、「カテゴリ1」など、ナンバリングも重要だと思うなー
＊左下の枠内の文字のように、もし子見出しが決まっているなら入れると、PCでは目立つかも？
⑤: たななでいうと13枚目（カテゴリ12＋表紙1）が必要ってわかるかな？
「サイトマップ」と記載する表紙を作るのを忘れがちだから気をつけて〜（図3参照）
いかがですか？疲れたら休憩してくださいね☘️
3. noteで各カテゴリの記事を作る
いよいよnoteでの作業開始です。お疲れ様です🌱
〈手順〉
①カテゴリの数（たななは12）＋サイトマップ表紙の数だけ、記事を作る
重要なのは、URLを発効することです。
💡はじめは題名「カテゴリ1」〜「カテゴリ12」、「サイトマップ」と入力するだけでも可
②各カテゴリの記事は、翼さん他の方のように、記事の題名にリンクを付ける作業をする（図4参照）
③一方で、表紙「サイトマップ」の記事は、カテゴリの記事を埋め込む形でURLを貼る（図5参照）
・
・
・
お疲れ様です♪
たななこんぶはまだ記事数が少ないので、記事を投稿したらカテゴリの記事を更新しようかなぁと思っています。
増えてきたら、厳選しておすすめを紹介するのかどうかは未定です。
とりあえず、完成形がこんな感じです↓↓
おわりに
いかがでしたか？
結構大変…と思われたかと思います。
大変さと見にくくて混乱、両方を天秤にかけた時、私は混乱を避けたかったので、このようなサイトマップにしてみました。
あくまでもコンセプトは、「見やすさ」重視のサイトマップです。
大変だけど、きっと読者も訪れやすく（特に下の方に表示されていた記事の子たち）、
大変さが報われる時がくるんじゃないかな、とこっそり思ってみたりもします🤭
ひとまず、お疲れ様でした！
そして、最後までお付き合いいただき、ありがとうございました！
改善の余地は充分あるかと思います。
お気軽にコメント、感想、スキなど、お願いします！
ではでは♪
たななこんぶ
