blog

森が非常勤講師をしている赤塚美容・デザイン専門学校Webデザインコースの学生に出した課題を自分でもやってみた、という話の続きです。前回は準備編でした。では制作編をどうぞ。

制作

理論だった創作折り紙の経験はなかったので、書籍にあたってみるかと思いましたが、図書館はゴールデンウィーク中は閉館中。
あんまり学ぶのに時間をかけてもな、と思って、手を動かし始めました。

あれこれ折りながら最初にできあがったのがこれ。

…異形のモノ感が強すぎる。髪の毛が大き過ぎ。
角(カド)を作り出すベースは変わらないけど、形をもう少し受け入れやすくするために

  • 折り紙上の上半身・下半身の面積を半々にする
  • 足の長さを揃える
  • 足を細くせず、体を細くする
  • 頭と髪をわかりやすくする

という調整をしたのがこれ。

それっぽくなってきたけどさらに

  • 髪の長さを抑える
  • 髪のボリュームを抑える

という調整をしたのがこれ。

さらに、体を細くしてみたのがこれ。細くしすぎたようす。

最終的に胴体の下から上に向かって細く絞る形に落ち着きました。

正直アマビエかなあ…というところもありつつ、ユニークで疫病収束の祈りを担ってくれそうな形になってると思います(妖怪だから神様のような形とは言いづらい😅)。

折り図

そしてここで問題が1つ浮上。折り図。筑波大学の三谷純教授が折紙関連ソフトウェアのリストを公開されているのですが、当然のことながら使うのにはある程度習熟が必要なようで、ここが一番の難関となりました。

Adobe Illustratorを使うか…それもなかなか手がかかる。
手書き…うまく書ける自信はない。
ということで図というか折る順番に写真を並べるのがおそらく手が掛からないと考えました。

さらに問題が1つ。折り方をシンプルに示すこと。

これはあやふやなポイント同士を結ぶ折り方ではなく、はっきりしたポイント同士で折るようにまとめる必要があります。
創造する思考ではなく、まとめる思考ってこと。
どっちも折り紙には欠かせないことがものすごくよく分かりました。

さて折り図(写真)は下記です。お楽しみください。

1. 色のついた面を表にします2. 対角線に谷折り3. 裏返して縦と横に谷折り
4. 真ん中の折り線で左に谷折りしたあとで、右下のカドを斜め線に向かって谷折り5. 左下のカドを4で折った部分を軸に谷折り6.下のカドを5で折った部分の上辺に合わせて谷折り
7. いったん全部開きます8. 左下と右下のカドをすでについている折り目で谷折り9. 両側を8で折った部分の先端に合わせて谷折り
10. すでに折った線を使って3つのカドを作りながら12の形に折りたたんでいきます11. 折りたたみ中12. 折りたたみ完了
13. 折りたたんだ上の2枚を開いて折りたたみます14. 折りたたみ完了15. 裏返します
16. 手前の2枚を中央の線に向けて谷折り。上の方が真ん中の線に近くなるように折ると折り上がりがきれいになります17. 左右の上側のカドを結ぶ線で谷折り18. 裏返します
19. 左側を16で折った線の少し内側と下の線に合わながら谷折り19’. 16で折った線の少し内側で折るので少しはみ出ます20. 19で折った部分の左上と右下の対角線を谷折り
21. 裏返して、20で折った線を縦線に沿わせるように折ります22. 16で折った部分の内側の線に添わせて右側の紙を谷折り23. 左側も18〜22と同様に折ります
24. 裏返して、下に出ている三角の部分を上に折ります25. 裏返します26. 両側の紙をいったん開きます
27. 24で折った三角の部分をこちら側に折り上げます28. 下側に白く出ている三角が見えないように谷折り28’. 下から見るとこのようにみえます。
29. 両端をすでに22で折った線に沿わせて谷折り30. 22で折った線で谷折り31. 上部の下に尖ってる部分を折り上げます
32. 下部を押さえながら上部の折りたたまれた部分を引き出します33. 下から指を入れて膨らませることで立体的に仕上げます34. 完成

シンプルな形なのでアレンジは自由にしてみてください。
千羽鶴に表れるように日本で「折る」は「祈る」にも通じることなので、新型コロナウイルスの早い収束への祈りも込めていただければ幸いです。

作り終わってみて

この記事を作ったことで結局自分も「作り出すことを楽しみ、人に伝えること」について考えることになり、とても勉強になりました。「作り出すことを楽しみ、人に伝えること」は創造する思考とまとめる思考が必要で、どちらも創意工夫の余地がたくさんある行為でした。

森はずっと折り図を見ながら折ってきましたが、折り図を作るのは職人仕事で、折り紙は折り図を通した「作り出すことを楽しみ、人に伝える」文化そのものだと分かりました。

この記事を読んでくださった方が「作り出すことを楽しみ、人に伝えること」を楽しんでいただけたら幸いです。
そして、生徒が何を作ってどんな記事を作ってくるかが楽しみです。

ここまで記事を読んでくださりどうもありがとうございました!


コーディングデザインは「あなたの事業の価値を伝えるWebディレクター・WebアナリストとフロントエンドHTML&CSSデベロッパーのユニット」です。折り紙作家ではありません☺️お仕事のお問い合わせをお待ちしております!

blog

森が非常勤講師をしている専門学校も5/10(日曜日)まで休校、5/11(月曜日)から再開となりました。休校の間、赤塚美容・デザイン専門学校Webデザインコースの学生には下記のゴールデンウィークの課題を出しました。


自宅でなにか作ってみる。それを元に400字くらいの文字と写真を使った記事を作って提出

下記の参考リンクもつけました。

課題の目的は「作り出すことを楽しみ、人に伝えること」です。

Webは基礎の技術を身につけるだけでも時間がかかり、技術を自在に扱えるようになるまでもさらに時間がかかります。
基礎を学ぶのはなかなかにしんどい期間ですが、その間も絵画・彫塑・その他なんでも、自分で作り出す楽しさは生徒の中にあり、それをなくさないようにしたい。

また、これからの世の中で必須の技術である「人に伝えること」も合わせて伸ばしていきたいと考えました。

この先ももしかしたら自宅で過ごす時間はある程度あるかもしれないと考えると、生徒から集まった記事をWebに公開して共有するとより広がりが出るはず。

言葉で言うのは簡単ですが、自分で何を作って記事に仕立てるまでやるのが難しいのはすぐ想像できます。その難しさを生徒の立場に立って考えることができるように、森も課題をやってみることにしました。

そして完成した折り紙はこちら。

下記はこの折り紙の制作の記録で、今回は制作前の準備編です。
折り図は制作編で公開しています。

準備

まずはぱっと思い浮かぶところでやりたいことを出して、それに対してのやることリストを考えます。やろうと思ったことは複数ありました。

  • Vue.js & AMP & Firebase(or microCMS)でアプリ制作
  • アマビエチャレンジとして創作折り紙制作

コーディングデザインの仕事としては前者がいいのだけど、緊急事態宣言下で営業的なことを書くのもいかがなものかと思うし、短い期間で作れて、自分自身がより楽しめるほうがいいので後者で進めることにしました。
アマビエチャレンジとしてアマビエの折り紙を作るにあたっての準備は下記の通り。

  • アマビエの特徴
  • 公開されているアマビエの折り紙
  • ターゲット
  • 自宅にある折り紙の書籍からの応用
  • 折り紙自体の検討

アマビエの特徴

アマビエといえばこの画像。アマビエと疫病の関わりの話や元ネタの話などありますが、それらは検索してみていただくとして、今回折り紙にするアマビエはこの画像を元にします。

『肥後国海中の怪』(京都大学附属図書館所蔵)

この画像から特徴をざっと挙げてみます。

  • 長い髪
  • くちばし
  • ひし形の目
  • ヒレのような耳
  • 胴体にあるウロコ
  • 3本足

折り紙の世界は「折り鶴」を見ると分かる通り、必ずしも見たままを表現するのではなく、特徴的な形や対象への作者のイメージが大事です(見たままを表現するすごい折り紙ももちろん数多くあります)。「折り鶴」って名前じゃなかったら、あの形から鶴を連想できるでしょうか。

ということで、アマビエの特徴をすべて満たすことを考えず、ちょっとそれっぽく、イメージや物語を感じるところに落ち着けることを考えました。

公開されているアマビエの折り紙

アマビエ 折り紙」で画像検索すると、アマビエの折り紙はすでにたくさん出てきます。ざっとシンプル系と難解系で解析してみます。

シンプル系折り紙

  • 等身
    • 2、3等身
    • 元画像のまま
  • 水色・ピンク・紫などの一般的な単色の折り紙
    • 白黒(元画像をプリント)
  • 立体 or 平面
    • 平面が多め

難解系折り紙

  • 等身
    • 3等身
    • 4、5等身くらい
    • 元画像とほぼ同じ
    • 群青・薄紫・くすんだ黄色や緑の和紙
  • 立体 or 平面
    • 立体

顔やウロコなどの細かい部分をシンプル系折り紙はあとから書いたり、柄がプリントされた紙を使ったりしていて、難解系折り紙・切り紙はきちんと作り込んでいるようすでした。
ここで自分で作る際にどんな方向に行くかを考えてみます。

  • シンプル系だけど少し難しいくらい
  • 3等身くらい
  • ファンシーとリアルの中間(プリズム折り紙や千代紙を使う)
  • 平面が多めの立体

立体にするので少し難しめになるのと、ファンシーではないけどリアルってほどでもないほどほどにのポイントを考えます。

ターゲット

折り紙好きな小学生高学年がメインターゲット。
でもサブターゲットとしては折り紙が好きな30代〜40代の大人。

折り紙にハマると難解系に行くけど1つ折るのに何時間とかかかるのは流石になにかと忙しい大人には辛い。
折り紙は面白いけどシンプルすぎるのは手が伸びないってところの人に刺さればいいな、と。
まあ、自分自身なんですが。

自宅にある折り紙の書籍からの応用

アマビエの形をつくるのに自宅にある折り紙書籍から参考になるものがないか探してみました。うちにある折り紙書籍は4冊。

今回なんとなく頭に思い浮かべながら作ったのは「ジョイ・オブ・オリガミ」の「半開折り」。
つまり折りたたむと平面になるのを半開きの状態にすることで立体を作るのが「半開折り」。

この「半開折り」によって折り上がりが立体的になることを目指しました。
偉大なオリガミマスター笠原邦彦さんに感謝。

折り紙自体の検討

折り紙自体は何を使おうかと考えて、青系の単色を考えていましたが、ググってみると青系でありつつも、ターゲット層が好みそうな色であることが分かりました。

ファンシー色

  • 水色・ピンク・紫などの一般的な単色の折り紙

難解系折り紙

  • 群青・薄紫・くすんだ黄色や緑の和紙

今回のターゲットは折り紙好きな小学生がメインなので、おそらくいろんなタイプの折り紙を持っていると考えて、単色の一般的な折り紙・千代紙・和紙ではなく、ちょっと変わった折り紙(市販されているもの)を使うことを考えました。

折り紙といえばトーヨー。Webサイトを見てみると

  • オーロラ
  • ホログラム
  • スピンカラー
  • プリズム

などなど、変わった折り紙はたくさんあり、なかでも見る角度によって色が変わるようなものは面白いと感じました。
最初はぱっと手元にある紙で折って、改めてお店で変わった折り紙を買うというのも楽しみの1つかなと。
森の手元にはちょうぞ青系のホログラム折り紙があったので使うことにしました。

かなり長くなってしまったので続きは制作編で。


コーディングデザインは「あなたの事業の価値を伝えるWebディレクター・WebアナリストとフロントエンドHTML&CSSデベロッパーのユニット」です。折り紙作家ではありません☺️お仕事のお問い合わせをお待ちしております!

blog

コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。

10月16日のてげWebはもくもく会にしていて、あらかじめheadlessCMSを触ることにしていたのでちょいとそのまとめを書いておきます。

そもそもheadlessCMSって何?

ざっくりというとサーバでページの組み立てをしてクライアントに送る仕組みじゃなくて、
サーバからはAPIに応じてデータを渡し、クライアントでページを組み立てる仕組みのようです。

こちらのQiitaをどうぞ。

学習コスト、開発コストが高いとのこと。むむ。

Netlifyなら1クリックでheadlessCMSを導入できる

WordPress、Jimdo、Tumblrなどの既存のCMSじゃなくて静的サイトジェネレーターというのがよく聞かれるようになって、どんなのがあるのかなと調べていて出てきたのが、StaticGen
これは静的サイトをホスティングできるNetlifyが運用しているWebサービスで1クリックでNetlifyに静的サイトを導入できるボタンがついてる。

StaticGenのナビゲーションに「Need a Static CMS?」とあり、クリックして表示されたのがheadlessCMSというWebサービスでした。こちらにもNetlifyに1クリックで導入できるNetlify CMSというのがありました。

Netlify CMSは静的サイトジェネレーターにGUIの管理画面をつけることができるということで、既存のCMSのかわりに導入できるのでは?と思った次第。静的サイトジェネレーターはDBを使わず、markdownファイルでページを作り出すようになってます。

さて、先に現時点の話をします。
扱うファイルが多すぎて、オリジナルテーマを作るのは結構ハードルが高い。

基本のテンプレートでのサイト作成はたしかに数クリックくらいだけどすぐできる(gitリポジトリの設定がある)。
ただ、GUIの管理画面の導入はあともう1手、Netlify Identityの設定が必要でした。
詳しくは逆引きマニュアル: Netlify CMS + Hugo + GitLabの導入方法の「Netlify Identityの設定」を参照。
ほんとにここを書いてくださった方に感謝。

これで無事GUIの管理画面も見られるようになりました。
ローカル環境では npm installnpm run start であっという間に環境ができあがり。
gitでリポジトリのmasterブランチにpushすれば自動でビルドがかかってNetlify環境に公開されます。

configファイルで設定をいろいろいじれるのはOK、でもテーマを作るのにはちょっとファイルが多すぎて、もくもく会では時間が足りず、むむむむむむ、となりました。

とはいえDBを介さないのでシンプルに作れるのは魅力的。
落ち着いたらもう少し突っ込んで手を動かしたいとおもったことでした。

blog

この本が発売されたのは去年の3月のことですが、ブログでなにもフォローしてなかったのでちらりと書いておきます。

Amazonでの評価も上々のようでなにより。シャレがきいてるのは編集者さんのお仕事。さすがですよね。

HTML5はそんなに追加してないけどCSS3はFlexboxやらCSS Gridも追加済みです。
CSSはCSS position:stickyConical GradientsScroll snapなどなど面白いのが目白押しなので、次の改定時に何を入れるのか楽しみ楽しみ。