目次

自分が作るときに使用したもの

• ① 魔法陣模様フォント『MagicRing』
  ダウンロードリンクhttp://inatsuka.com/extra/magicring/

• ② ビットマップフォント『GD-DiVaLish-OTF』
  ダウンロードリンクhttp://mksd.jp/fingerfive.html
  (現在はページがない？)

• ③ イラストレーター
  パス化して切ったり貼ったり。デザインを分解グループ化して個別にSVGで書き出し。⇐ CSSアニメ用。

• ④ フォトショップ(本のページ背景用に加工)
  (バージョンアップ後にSVGでの書き出しができなくなった模様)

デザイン考案の役に立つジェネレーター

• 魔法陣自動生成/MITライセンス
  『CiaccoDavide/Alchemy-Circles-Generator』
  ダウンロードリンクhttps://ciaccodavi.de/qbdp/acg/

• 更新するたびに新しいデザインがズラッと一覧で出てくるので見てるだけでも楽しい。

• 

• 楕円形ツールで正円を作る

• ① ツールボックスの中に長方形ツールがあるので長押しか右クリックで小窓を開く。一覧の中に楕円形ツールがあるので選択。
  ② “キーボードのShiftキーを押したままドラッグ”で正円を作る。(サイズ変更する時もShiftキーを押したままドラッグで正円を維持できる)

• 長方形ツールで正方形を作る

• ① ツールボックスで長方形ツールを選択。
  ② “キーボードのShiftキーを押したままドラッグ”で正方形を作る。(サイズ変更する時もShiftキーを押したままドラッグで正方形を維持できる)
  ③ コピペでもう一つ作る。(レイヤー＜長方形＞が選択されている時にCtrlキー+Ⅽでコピー、Ctrlキー+Ⅴでペースト)
  ④ 正方形の角にカーソルを近づけるとサイズ変更とは違うアイコンが出るのでCtrlキーを押したままドラッグ。45度づつ回転するので縦横で八芒星を作る。

• 作った図形を魔法陣っぽく配置

• ① 好きなように図形を配置
  ② 細かい調整
  ③ 必要ならデザインの追加。(または削除)
  

魔法陣の作り方は以上になります。
この本は、作り方、ツールの使い方を自分自身で忘れないことを目的に作り始めました。どうせなら少しでも誰かの役にたったらな～という気持ちが途中で芽生え、それっぽく作り変えてます。
しかし私自身イラストレーターは初心者で、使い方も手探りで覚えていますので、もっと他に早くて楽なやり方がたくさんあると思います。ですので『こんな方法で作ってる人もいるのか～』ぐらいで捉えて頂ければ幸いです。流し見程度で参考にしてもらえればなぁと思ってます！
それではここまでご覧いただき本当にありがとうございました！
またね★(ﾟ∀ﾟ)ｵﾂｶﾚｼﾀｰ

…っと大事なことを忘れてました！文字化け対策にデザインをアウトライン化してください！
※アウトライン後はテキストの変更が出なくなるので注意

ドラッグで全てのパスを選択し、画面の上の『書式』からアウトラインを作成を選択(ｲﾗｽﾄﾚｰﾀｰ)

• css＜ソースコード＞

• 1. @charset "utf-8";
  2. body {
  3.   margin: 0;
  4.   padding: 0;
  5.   background: black;
  6. }
  7. .anime_3d {
  8.   margin: 0 auto;
  9.   position: relative;
  10.   /*transform: perspective(200em) rotateX(65deg) rotateZ(0deg);*/ /*最初から3ｄ表示にしたい場合はここにperspectiveを入れる*/
  11.   width: 100vw;
  12.   max-width: 960px;
  13.   height: auto;
  14.   transition: 1s;
  15.   overflow: hidden;
  16. }
  17. .absolute_bg {
  18.   width: 100%;
  19.   max-width: 100%;
  20.   position: relative;
  21.   height: 100vh;
  22.   transition: 1s;
  23.   filter: grayscale(1);
  24. }
  25. /*＝＝魔法陣のパーツ　1〜5＝＝＝＝＝＝*/
  26. /*パーツ1*/
  27. .magic_parts1 {
  28.   margin: 41%;
  29.   height: auto;
  30.   position: absolute;
  31.   /*animation: spin-reverse2 120s infinite linear;*/ /*最初からアニメーション状態にさせたい場合はコメントアウト解除*/
  32. }
  33. /*パーツ1のホバーアニメ設定*/
  34. .absolute_bg:hover .magic_parts1 {
  35.   animation: spin-reverse 120s infinite linear; /*回転させない場合はコメントアウト*/
  36. }
  37. /*パーツ2*/
  38. .magic_parts2 {
  39.   margin: 38%;
  40.   position: absolute;
  41.   /*animation: spin-reverse2 130s infinite linear;*/ /*最初からアニメーションさせたい場合はコメントアウト解除*/
  42. }
  43. /*パーツ2のホバーアニメ設定*/
  44. .absolute_bg:hover .magic_parts2 {
  45.   animation: spin-reverse2 130s infinite linear;
  46. }
  47. /*パーツ3*/
  48. .magic_parts3 {
  49.   margin: 34%;
  50.   position: absolute;
  51.   /*animation: spin-reverse2 150s infinite linear;*/ /*最初からアニメーションさせたい場合はコメントアウト解除*/
  52. }
  53. /*パーツ3のホバーアニメ設定*/
  54. .absolute_bg:hover .magic_parts3 {
  55.   animation: spin-reverse 150s infinite linear;
  56. }
  57. /*パーツ4*/
  58. .magic_parts4 {
  59.   margin: 17%;
  60.   position: absolute;
  61.   /*animation: spin-reverse2 180s infinite linear;*/ /*最初からアニメーションさせたい場合はコメントアウト解除*/
  62. }
  63. /*パーツ4のホバーアニメ設定*/
  64. .absolute_bg:hover .magic_parts4 {
  65.   animation: spin-reverse2 180s infinite linear;
  66. }
  67. /*パーツ5*/
  68. .magic_parts5 {
  69.   margin: 13.5% 13%;
  70.     position: absolute;
  71.   /*animation: spin-reverse2 100s infinite linear;*/ /*最初からアニメーションさせたい場合はコメントアウト解除*/
  72. }
  73. /*パーツ5のホバーアニメ設定*/
  74. .absolute_bg:hover .magic_parts5 {
  75.   animation: spin-reverse 100s infinite linear;
  76. }
  77. /*魔法陣の光（非ホバー時は見えない）*/
  78. .absolute_bg_circle {
  79.   display: none;
  80.   margin: 13% 13.5%;
  81.     width: 73%;
  82.     height: 72%;
  83.   background: #00ffff47;
  84.   border: 2px solid #00f6ffc2;
  85.   border-radius: 50%;
  86.   box-shadow: 0 0 1px #00fffc, 0 0 1px #00fffc, 0 0 1px #00fffc, 0 0 1px cyan, 0 0 20px #00f3ff, 0px 0px 40px #00fbff, 0px 0px 140px #00f0ff;
  87.   position: absolute;
  88. }
  89. /*ホバー時に魔法陣をぼやっと光らせるアニメーション*/
  90. .absolute_bg:hover .absolute_bg_circle {
  91.   display: initial; /*初期値*/
  92.   animation: fade 3s;
  93. }
  94. /*ホバー時に奥行＆カラーを追加*/
  95. .absolute_bg:hover {
  96.   position: initial;
  97.   opacity: 1;
  98.   transition: 1s;
  99.   transform: perspective(200em) rotateX(65deg) rotateZ(180deg); /*ホバー時に3ｄ（奥行を追加 ⇒ perspective)*/
  100.   filter: none; /*grayscaleの解除*/
  101. }
  103. /*ふわっと明るく*/
  104. @keyframes fade {
  105.   0% {
  106.     opacity: 0;
  107.   }
  108.   100% {
  109.     opacity: 1;
  110.   }
  111. }
  113. /*回転*/
  114. @keyframes spin-reverse {
  115.   0% {
  116.     transform: rotate(0deg);
  117.   }
  118.   100% {
  119.     transform: rotate(-360deg);
  120.   }
  121. }
  123. /*逆回転*/
  124. @keyframes spin-reverse2 {
  125.   0% {
  126.     transform: rotate(0deg);
  127.   }
  128.   100% {
  129.     transform: rotate(360deg);
  130.   }
  131. }