Treant.js イメージ作成〜ダイヤグラムにイメージを表示する〜

イントロダクション

前回作成した、ダイヤグラムは文字をメインに表示しているので、横長でとても見づらいものになりました。

この問題を解決するために、「イメージファイル」を使用して、「直感」に頼る方法で目標ブレークツリーを作成しようと考えました。

イメージファイルの作成

設計=デザインをすると言う部分で、いかにも「デザイン」な作業になってしまいました。(苦手なのです。。。)自分は、絵を描いたり、造形デザインなどをやったことがなく、またやる気もありませんので大きな問題になりました。

答えは、以下の中どれかになると思います。

  • 「できる人に頼る」
  • 「他の方法を模索」
  • 「自分で学習してやる」

時間との兼ね合いになると思います。どの手段でも良いと思います。そして。自分は真ん中の項目「他の方法を模索」を行うことにしました。

そして、他の方法というのは「既にあるものを使う」という手段になります。

<手順>

  1. 目標ブレーク用イメージルールを作成する
  2. シンボルについて調査する
  3. 目標ブレーク用カテゴリに対応するシンボルをカスタムする

こんな感じでやろうと思います。

イメージの作成ルール

このルールは実際に目標ブレークツリーを後悔した後で、ヘルプの様な形で「このマークはどんな意味?」に応えられる様なドキュメント(説明書的な)を表示する時に使用するドキュメントになります。

目標ブレークカテゴリ一覧

Lv0: 目標カテゴリ(方向性)
<創造・実行>

作成する、貯金する、〜へ行く etc...
<学習・習得>

資格を取る、歴史関連のドキュメント作成、英語の学習 etc...
<生活習慣>

ダイエット、生活リズム改善、朝活 etc...
Lv1: 実行カテゴリ(目標行動)
<デザイン・アート系>

絵画, 彫刻, イラスト, 漫画 etcの作成
<音楽系>

バンド, コンサート出演、楽器や歌 etc...をやる
<ファッション系>

お洒落の勉強, 着こなし, アクセサリ etc...
<スポーツ系>

スポーツ全般, 格闘技, 登山 etc...
<コミニティ(参加する・作る)>

サークル、グループなどの立上げ、参加 etc...
<プログラム・WEB系>

プログラミング関連, WEBデザイン etc ...
<園芸・農業系>

家庭菜園, 盆栽, 花, 食べれる野草 etc ...
<オートスポーツ(車・バイク・船)>

車, バイク, ヨット, ゴーカート etc ...
<ゲーム系>

カードゲーム, ボードゲーム, TRPG, TVゲーム
<グルメ・料理>

料理関連、食べ歩き, お酒 etc ...
学問(数学。歴史,科学)

お手軽料理レシピ作成, つまみ作成 etc ...
<占い・スピリテュアル系>

タロットカード, 星占い , 魔術, 呪術 etc ...
<ホビー(漫画・アニメ・鉄道・フィギュア・etc)>

上記に含まれないカテゴリ
Lv2: 成果物カテゴリ(作成するもの)
<実物・制作物>

作成物, 目的のもの, 実行結果
<日記・ノート・ドキュメント>

実行の記録, 研究結果, まとめ etc ...
<資格・免許>

TOEIC, 電気工事士, 中小企業診断士 etc ...
 こんな感じのカテゴリ一覧に対してそれぞれの項目にイメージ(絵)を当てはめていきます。

当然、自分はデザイン(絵や、造形)に関しては無頓着なので「まるでダメ」です。余談ですが、学生の頃の美術の成績は5段階で「2」でした(笑)

調査を行う

「絵心がない」問題を解決するために自分が使用する手段は「既にあるものを使う」です。具体的にどの様にするかというと以下の様な手順を踏みます。

  1. どんなものを描きたかったのか再度確認する
    → 各カテゴリに対応するシンボルマークを描く
  2. シンボルについて調査する、あわよくばそのシンボルを修正して自分用に改造して使用する(著作権など注意する)
    <参考サイト>
    古代錬金術のシンボル
    三神(創造・維持・破壊)
    インディアン(ホピ族など)シンボル → ここのサイトをメインにする
  3. 上記のサイトか自分のイメージに近いものを選択する、ただし「イメージ作成のルール」に則して作成する

こんな感じで作成開始します。

でわでわ。。。