エンジニアとデザイナーのクリエイティブの扉はこちら
どうも、かわゆた です。
GASHOO Inc. Advent Calendar 2017という場を借りてクリエイティブな人間になっていきたいと思います。
アドベントカレンダーというのを人生初「体験」していきます。
この文章を書くギリギリまで何を書くかなんて考えていなかったわけですが、最近、脳が疲れてきたので偏差値を下げてクリエイティブ力の向上を狙いたいなと思った為「エンジニアとデザイナーのクリエイティブの扉はこちら」というタイトルにしました。一言で言うと「More Creative」です。扉を開けたところで立ち入って動かないと意味がありません。テキストから体験を得るのは凄く難しい事で、妄想・想像でも良いですし、実際に手を動かして体験して頂けたら幸いです。技術メインの記事ではありません。技術、ソフトウェア紹介という内容でも無いです。
エンジニアの方はプログラミング技術を応用しビジュアルに。
デザイナーの方はプログラミング技術を取得し、更に高みへ。
偏差値を下げて読んで下さい。
目次
1. CSS Animationでインタラクションの神になる。
2. Processing / openFrameworks / P5.js / three.js ジェネラティブアートで脳活性化
3. Unity / vvvv / TouchDesigner 今日からあなたはアーティスト
4. After Effects / Maya / Cinema4D / Blendar / Houdini そして神になろう。
CSS Animationでインタラクションの神になる。
あなたは、CSS Animation を知っていますか。CSS AnimationとはCSSで制御したアニメーションを意味します。 何ができるのかというと、キーフレームの指定・リピート・デュレーションの有無など..です。 つまり、映像編集ソフトとほぼ同じような事がCSSでできるという事です。
上記イメージは、よくある動画編集ソフト(AfterEffects)のTimeline
このCSSアニメーションを使うと、比較的簡単に以下の様なアニメーションをWEB上で表現する事ができます。
See the Pen BKJqxj by YUTA (@yuta-sub) on CodePen.
SVG(ベクターデータ)を使ってCSSでアニメーションキーフレームを指定すると...
この様なグニャグニャと動くアニメーションもできます。jQueryやJS系ライブラリを使用して動かすアニメーションとは違い、細かくオリジナルで表現できるのがCSSアニメーションの良さだったりします。エマ・ワトソンも3割マシで可愛く見えます。ぜひ偏差値下げてフロントエンジニア・UIデザイナーの方はやってみてください。
CSS Animationは基本中の基本で、この基本を抑えるとWEBにおけるインタラクションはある程度カバーできるのかなと思います。
Processing / openFrameworks / P5.js / three.js ジェネラティブアートで脳活性化
この世にはジェネラティブアートという物が存在します。それは2D3D関係なく、人間とコンピュータの融合で想像を遥かに超えた美しいアートです。 そのジェネラティブアートを描写するのにオススメなのが「Processing / openFrameworks / P5.js / three.js」です。 WEBエンジニアの方はP5.jsやthree.jsを使えば良いですし、それ以外の方はProcessing / openFrameworksを使えば良いと思います。 上記ではジェネラティブアートを表現すると書いていますが、GLなのでグラフィックス表現APIのJavaなど各種言語でラッパーされた物と捉えて頂けたら良いと思います。
Processingとthree.jsを使ってどのような作品ができるのか見ていきます。
— △0◇ (@_kwyt_) 2017年7月20日
まずはprocessingです。、美しい数式があれば、描写されるアートも美しくなります。これは2Dですが3Dもprocessingでは表現する事ができます。
— かわゆた (@_kwyt_) 2017年7月20日
そして、3Dではちょっとしたmeshを追加しループアニメーションをするだけで、3D空間を舞うアートができます。
— かわゆた (@_kwyt_) 2017年7月20日
さらに、偏差値を下げてオラオラとmeshとアニメーションを追加していきます。すると激しい、普通じゃないけど気持ちの良い表現が産まれます。
つづいて、three.js
こちらも、processingと同じくmeshを追加して背景色やアニメーションをjsで書いてループさせているだけです。基本的にprocessingやopenFrameworksなどはループアニメーションを用いて表現します。こういった技術はVJとかにも使われてますね。three.jsやp5.jsはWEB上で実行する事が可能なので普通じゃないwebサイトを作りたい方は遊んで見ると人生変わります。
Unity / vvvv / TouchDesigner 今日からあなたはアーティスト
VJやインタラクティブコンテンツなどに使用される事が増えてきたゲームエンジンUnityやヴィジュアル表現ソフトvvvv / TouchDesignerのお話です。Unity / vvvv / TouchDesignerは、クリエイティブに生きるアーティストの最強ツールです。映像クリエイター・エンジニア・デザイナーなど様々な人が今は使っています。中でもUnityはゲームエンジンではありますが医療機関や研究機関でも使用されることが増えているようです。ボク自身、美大・芸大に在学している身ですが、美術系大学では殆ど授業に取り入れられているようです。
GUIでパーティクルコンポーネント追加しただけですが、GUIで形、画像指定、動き、あらゆる設定が可能です。コードを書くと更により高度な表現ができます。ちなみにC#とJSが対応しています。C#おすすめです。
Unityでは先に書いたProcessing / openFrameworks / P5.js / three.jsと同じようにシェーダーを書くことができます。ジェネラティブアートやエフェクトを作ったり。更に、iotと呼ばれる領域に入りますが、Arduino・Mesh・ラズパイなどセンサーと組み合わせてUnityを使ってインタラクティブコンテンツを作ると楽しいものです。また、VRやweb技術と連携すると夢が広がります。 また、コードを書かなくてもGUIで楽にゲームやインタラクションを作ることができるので感覚で作っていっても楽しめます。 以下を使うとUnityでシリアル通信ができるので試してみて下さい。 github.com
vvvv / TouchDesigner は共に、ノードでプログラミングしてインタラクティブな表現を実現できます。何ができるのかというと何でも出来ます。ジェネラティブアートもできますし、シェーダーも書けます。Unityと同じで実際にコードを書くこともできますし、シリアル通信やweb通信系はデフォルトで入っており連携が簡単にできます。センサーの塊スマートフォンで操作して動かしたり、カメラ映像をリアルタイムで歪ませる..なんてことも自由にできます。vvvv / TouchDesignerはエンジニア向きというわけではなく、どちらかと言えばデザイナー向けなのかなといった印象です。
vvvvは残念ながらWindowsのみでTouchDesignerはWindows/Mac両方あります。
After Effects / Maya / Cinema4D / Blendar / Houdini そして神になろう。
- 例えば、写真展に行き、写真を眺めます。撮った人の気持ち・風景・環境、そして写真という静止画を勝手に映像化して膨らませます。
- 例えば、画面遷移をアプリやWEBで作ります。表示されるローディングアニメーション。気持ち良くなるような物を想像します。
- 例えば、体験。見た人・触れた人がどういった体験をして表情で会話で...なんて事を想像してペルソナを明確にし戦略を考えます。
という感じで映像はクリエイティブ関係なく無意識に体感する気がします。そこで、映像を中心に磨き上げる事でクリエイティブ力増すのでは…とよく分からないことを考えてます。
After Effects では、Expressionを使いJSでタイムライン上のレイヤーの制御ができます。例えば、映像クリエイターでちょっとランダムな表現、人間味から離れた表現したいと思った際にある程度GUIで作ってしまい、一部コードを書いて...という使い方ができます。
Maya / Cinema4D / Blendar / Houdiniでは、Pythonでオブジェクトやアニメーションの制御ができます。ボク自身、Cinema4D以外でPythonを書いたことないですが、ゲームモデルであればMaya、映像であればCinema4D。キャラクターモデルであればBlendar、エフェクトであればHoudiniみたいな感じで興味に合うCGソフトを使えば良いと思います。正直、ここに関してはCGクリエイターではないのでフワっとしていますが、WEBでもCGソフトで作ったモデルは動かせますし。先に紹介したvvvvやTouchDesginer・Unityでも使えます。こういった技術に縛られずに組み合わせると物づくりが楽しくなる気がします。
まとめ
長々と色々書いてみましたが、まとめという項目を作ってみました。
結局、僕が言いたいことはエンジニア。デザイナー関係なく、クリエイティブに関わる全ての人が幸せに楽しく表現する為には、必ず技術は必要で、技術がある事でアイデアが光るのかなと思いました。すごいアイデアを持っていても実現できなかったら夢で終わるので、こういった技術をジャンル関係なく振れてみて組み合わせて楽しむ事ができたら、新しい体験でこの世が埋め尽くされるのかなと思います。
例えば途中、IOTというワードを使いましたが、身の回りにある物は今となっては殆どがテクノロジーに結びついていますし、電子工作やこういった技術が少し触れるだけでも価値があるのかなと思います。
興味が有るものはいっぱい何でも手を出して見て欲しいです。以上。
僕の初Contributionは 2016年12月22日
序文
⚠ すごく 当たり前のことを書くかもしれません
⚠ 僕自身の偏りな意見が多く見られるかもしれません
はじめに
Gashoo inc. Engineer の しゅんです。 今でこそプロダクト( gashoo.jp ) の コードを 書いたり, 修正したり, 提案したり していますが、 僕の Gashoo プロダクトへの 初 Contribution は 2016年 12月22日でした。 ( だいたい1年と感覚でしか 掴めていなかったので、GIthubで 確認してみた 笑 )
どういう内容の Contributionなのか気になったので、確認してみたところ、 すっごい しょうもない PR を出していたので , 実際のところ 貢献もクソもない。 詳しくいうと , error が 出ているところを コメントアウトする という 情弱っぷり。
その次, いつ 稼働したのかな と , 気になったので 見てみると 2017年 1月8日 とかでした。しかも, View など 文言 の修正ばかり….orz w
結論 なにが言いたいかというと, エンジニアになって まだ 1年未満ということ。
Advent Calendar を 書くと話が上がって来た際に, がむしゃらに コードを書いてきたので 一度 落ち着いて, 今年を 振り返ってみようかと思ったので、振り返ってみる。 ( これまで, きちんと どういう経緯など どういう人なのか 人に 話したこともなかったので… )
プラス これまで 自身が 勉強するにあたって 気をつけたことや, 心がけたことを記載していきます。 ( 今後の 成長や 育成のためにも )
んで、どんな人なの - ぷち経歴
大阪芸術大学を超絶ギリギリで卒業 ↓ ↓ ↓ ↓ ↓ ↓ 卒業式 当日 盛大に 寝坊し、式典に不参加 僕が到着したころには, 盛り上がり終えたあとで 落ち着いていた 改めて, 証書を取りに行くハメに ↓ ↓ ↓ ↓ ↓ ↓ 卒業後, 通信業界で働きながら 株式会社ガシューの立ち上げに携わる ↓ ↓ ↓ ↓ ↓ ↓ Gashoo βver. リリースに携わる(ユーザーマーケティング的なことしてた, いわゆる何でも屋サン) β版時は, 非エンジニアの ただの人 ↓ ↓ ↓ ↓ ↓ ↓ 正式リリースに向けてサービスの開発リソースが欲しいし、足りない ↓ ↓ ↓ ↓ ↓ ↓ じゃったら, わい エンジニアになるわ ↓ ↓ ↓ ↓ ↓ ↓ 3日後, 金髪にする ↓ ↓ ↓ ↓ ↓ ↓ 毎日 15時間以上 pcを眺める日々 ↓ ↓ ↓ ↓ ↓ ↓ いま ココ
2017年1月 ~ 3月
1月
毎日 10時間以上は 勉強してた 初めての Gashoo での PR 主にRoR, github の基礎を勉強
経験者がそばにいて, 比較的 質問しやすい環境ではあったが, わからないことが, わからない 現象になり そもそも なにを 質問 していいのか わからないので, 成長速度は クソみたいなスピードだった。
実は , 金髪にした 本当の意味は, 逃げ道を 断った という 通信の仕事の方を 完全に 断つためでも 僕の中で あった。
結果論でしかありませんが、実際のところ コードを書くことに 本気で取り組めた。
2月
プロダクトを形成していくのを手伝う 大方 基本を理解してきた気になる(勘違い) わからないことが具体化してきたので, 先輩エンジニアに質問をなげ 自分なりでいいので 理解できるようになるまで 聞き続けた、恐らくうざかった
超基礎が 大方理解できてきた時期でもあり, それらを どう使うのか, どう使えば 何が実現できるのか が 少しずつ分かり始めた時期
0 から 1 を 行う ことの 難しさ を 感じた ここでいう 難しさ というのは、1にすれば 完了でなく, 1 → 2, 3, … へと 想定しなければいけない 点において ということ。
3月
リリースにむけて, 訳のわからないことに立ち向かう aws, Linux, dns, route53, nginx, unicorn, httpsの知見を増やす
デプロイなどをするにあたって, 必要な知識が 一気に増える…. https化させるのに 最強につまったり, ドメインの紐付けに なにを 直せばいいのか エラーが出ても, 解決方法が さっぱり な時期。 全くわからなかったので, 知見がありそうな人に 訪ねまくったり, 深夜に サポートセンターに 電話したこともあった(笑)
勉強する際に 心がけたこと
僕自身 ここまで できるようになったのは、周りの 先輩方に 協力してもらったことも もちろんありますが、 勉強する際に 意識していたことは ある。
「 慣れろ 」 より 「 理解しろ 」
体育会系で よくある 「とりあえず やる!!!」みたいなのがあるのだが、
僕はそれが キライだし, ほぼ 意味ないと思っている。
理由としては、コードを書く際に 今 自分が なにしているのか , なんのために それを しているのか わからず, やっていると ,
なんか 知らんけど できた
ここに こうかいてあったから こう書いた
上記のような 状態になる。
いわゆる, コピペ実装。
理解!? そんなの 当たり前じゃん。って思うかもしれませんが、 これまでに , プログラミングしたいです~。 と 教わりに 来たりする人は 意外と そういう人が 多い印象。
理解だ とか 偉そうにいってますが、まずは 自分なりの解釈レベルでの 理解でも問題ないと 思っている。
自分は どう理解したのか 人に 説明できるとなると, 知見のある人と 話を している際に 「それの理解は少し間違っていて ….. と, これは こうで こうなっているから……」と わからないことが 明確化しているので, 両者共に win win な関係になっている。
「これ わからないです。」
って 質問しか出来ない時期は まだ 質問する段階ではない。
そもそも 自分の 実現したいことへの, 必要なものを 細分化できていない。 もっと 自身で 悩むべきだ ( 人や 状況によりけり )
「これの ここって こうだと思うのですけど, ここで このように 詰まってしまって….」
という 自身の見解, 理解ありきの質問ができるようになって 初めて 質問になるの ではないのかな と思う。
もう、小学生じゃないんだから。
あと なぜ はじめに 自分なりの解釈, 理解が 大切なのかというと、
パターン 1
Aというモノ(機能)を 理解せずに 組み立てていると, Aというモノしか 生み出せない。
パターン 2
Aというモノ(機能)の 仕組み を 少しでも理解し、Aというモノを 生み出した。 すると , Aというモノ(機能)の 仕組みは もしかしたら, B にも 応用が効くかもしれないな...という発想になる。
パターン 2の 方法を 取っているだけで, 「B」という モノ や 機能については、もう 先輩エンジニアと 提案レベルで 話すことができるので、
「それはね、こうあった方がいいから、こういう理由で…」と 別の知識を 学ばさせてくれたり、
「あ、それいいね!! なら, お願いできる!?」っていう 信頼や 楽しさの 発見にも 繋がる。
だから、
何年も コードを 書いてきたが, 変化のない人は
まずは 自分で why を 考えてみよう。
追記 : 僕らの会社規模感, スピード感 での 話ばかりなので 諸説あります。
デザインとアートの違いについて改めて考えてみた
はじめに(簡単に自己紹介)
※この記事はGASHOO Inc. Advent Calendar 2017 12月5日(火)の記事です。
こんにちは、株式会社ガシューのCDO、白石です。
ウェブデザイナとしてキャリアをスタートして、現在は株式会社ガシューにてChief Design Officerという責任のある立場に従事させてもらい、ポートフォリオを通じたプラットフォーム型SNS「Gashoo」を運営しています。
株式会社ガシューについて、Gashooというサービスについての詳細は、こちらをご覧ください。
さて、本題(経緯)
美大・芸大に通う学生はもちろん、その過程を踏まずにデザイナとして従事する人でも必ず聞いたことであろう「デザインはアートじゃない」論。なんとなく言わんとすることは理解できるのだが、いまいち自分の中で納得できる形で消化できていませんでした。(様々なビジネスマンやデザインに携わる人間と話し、よりそう思うようになりました)
今日は、ビジネスのシーンの様々な文脈で様々な用途で使われる「デザイン」という単語と、その対になる形で扱われる「アート」との用法を整理し、同時にデザインに携わる自分のスタンスを整理する意味でも考えようと思います。ここでは、スタイリングに対するアプローチや具体的なテクニックについて言及はせず、あくまで「デザイン」と「アート」が別の文脈をもって使用される言語であることを再確認し、それぞれの役割に対する整理であることに終始します。
これまでに聞いた主張
デザインとはクライアントが存在するものである
デザインは自己表現の手段ではない
デザインとは問題解決の手段である
デザインとは今よりも良い状態にすることである
なんとなく、「デザインとは他者利益のために存在するものである」という主張が伺えるのですが、あくまでビジネスレイヤ上で語られる目的であって、デザインという行為自体が意味する全体像ではないような気がしています。というのも、アーティストにもクライアントはいますし、問題を提起するための「スペキュラティブデザイン」というものも存在しますし、デザイナがデザインという言葉を以て自主制作を行うこともあり、現在機能的に問題がないものでも、意識改革的に作られるデザインもあります。いわゆる商業的なコンテキストに則らない制作物を「デザインではない」と一蹴してしまうのも、いや、ちょっと待ってくれよ、と思うわけです。
様々な文脈で語られるデザイン
デザインという1つの単語が、別々の文脈で、別々の意味をもって語られることが僕(もしくは皆さん)の混乱を招いてるのかもしれません。ですが、1つの言葉である以上、共通項があると思います。僕の拙い経験上、今まで聞いたことのあるデザインの文脈は以下に分類されると思いました。(二番煎じかもしれませんが)
意匠的文脈
分かりやすく、美しいかどうか、という文脈です。よく「デザインがダサい」という話の多くはこれに該当するかと思います。デザインの業務に携わっていない多くの人が考える「デザイン」もこれに該当するのではないでしょうか。「これ、アート的要素含んでるじゃん！」という指摘は少々お待ちください。後述します。
道具的文脈
道具として使いやすいか、使い続ける動機になるか、という文脈です。Appleの製品が「デザインされている」という時に、かっこいい見た目以上に「直感的な操作が可能である」という文脈で言及しているデザイン関連記事が多くあるのはこれに該当するかと思います。行動経済学や認知心理学が注目され始め、主にユーザ・インターフェースのデザインの文脈ではホットな話題で、道具的な文脈で語られるデザインを多く目にする気がします。
市場的文脈
売れるかどうか、コンバージョンに繋がるかどうか、という文脈です、広告やランディングページの設計時によくこの文脈が登場します。
仕組み的文脈
「ワークフローがデザインされていない」や「働き方のデザイン」みたいな形でここ最近よく見るようになった文脈だな、と思います。
共通項を探る
こうして文脈を整理すると、それぞれのデザインの文脈が設定するゴールが異なっていることが分かります。意匠的文脈では「ビジュアルの精度」、道具的文脈では「生活への浸透・定着率」、市場的文脈では「売上・KPI(KGI)」、仕組み的文脈では「物事の整理・効率化」といったところでしょうか。
つまり、文脈のゴールを指して「デザインとは何か」を理解するのは難しいと考えました。だとすれば、そのプロセスに注目するしかありません。それぞれの文脈が目指すゴールと、それに向かうプロセスを個人的に整理したものが以下です。
- 意匠的文脈 既存の意匠のアプローチを踏襲または逸脱し → 高い専門性を持ったクラフトマンが知識と経験を持って精度の高い造形を創造し → できあがったものの発想・アプローチや造形の精度が手にした人の心を動かす(購買動機となる)
- 道具的文脈 ユーザージャーニー・人体工学・プロトタイプ(etc)などを通じた多くのデータを用いて、仮説検証を繰り返す → リリース後もフィードバックからの検証を繰り返しアップデートしていく → 自分の生活を豊かにするもの・便利にするものとして自分の生活に取り入れていく(購買・インストールなど)
- 市場的文脈 ペルソナ、セグメント、3C分析(etc)などを使い、利益が高くなるターゲットを設定する →A/Bテストやアナリティクス(etc)を用いて、もっともCVRが高くなるデザインに最適化させていく → 購買意欲がそそられた消費者が成約・購入する
- 仕組み的文脈 現状の問題点を洗い出し、整理する → 既出のケースなどを参考に最も無駄のない、効率的なプロセスを導き出す
上記は限定的なケースかもしれませんが、下記の共通点があると思います。
- 提供者は何かしらの価値を届けたがっている
- 価値を伝達すべき工夫が必要
つまり、プロセスに着目して、その共通点から「デザイン」の定義を導くならば、デザインとは、
- 届けたい人に
- 届けるべき意図や価値を
- 伝えるための手段(プロセス)
ということになります。僕はこの解釈で飲み込めた気がします。この解釈だと、デザインの造形性を否定することもなければ、利益の追求性を否定することもなく、本来の役割(用途)としての「デザイン」に言及することができました。
忘れてたけど、アートって何よ？
結論：これを語るのは難しすぎる
なんですが、頑張って考えます。ここからはすごく個人的な見解となります。
アートってよく分からないもの？ = 皆にとってのデザイン？
僕の周囲には、すごくアートにすごく興味がある方と、全くアートに興味がない方がちょうど半々くらいいます。全く興味がないという意見の人たち曰く、「見方が分からない、鑑賞する意味が分からない」という人が多いです。確かに、アートと呼ばれる作品のほとんどが、制作意図やなぜこの形になったのか、というプロセスに説明がなく、意味深な造形物に意味深なタイトルがついた成果物だけを見せられることがほとんどです。
そして、少し前のデザインというものの立ち位置も、プロセスやノウハウが共有されることのない、いわば職人たちのブラックボックスであり、それが美的センスのみで成立しているものだと半信半疑で飲み込んでいました。そういう意味で、今でもデザインの造形性のみに着目され、「自分にはセンスないし、よくわからないな」というもので片付けられていた名残が、アートとデザインが対称性をもって語られている歴史なのかなと思います。
僕の解釈では、デザインは「届けるべき人にその価値を伝えるための手段(プロセス)」と前述させてもらったのですが、アートとは一体全体なんなんでしょう。
僕の敬愛するアートに造詣の深い方のほとんどが、「アートを理解する必要はない」と言います。彼らはアートが持つ「理解不能性」から自己の解釈で情報を汲み取って、「もしかしてこういうことなのかもな！」と思考するのが楽しいようです。僕もその１人です。言葉で伝達されなくても、「なんとなく喜んでいるようだ」「なんとなく悲しい内容だ」みたいな情報から、勝手に色々考えても良いみたいです。僕の解釈では、アートとは「考えるための道具」なのです。普段、意識することのない情報が、作品という形を借りて拡張されている、僕たちはアートを通じて再帰的に自分の思考に接続することができるのだと考えます。
結論
デザインとアートは全然違うと思うで！
最後は完全な主観になりましたが、最後まで読んでいただいてありがとうございました。
次回、白石の更新は12月12日(火)予定です！🐶
余談
Gashoo公式Twitter: twitter.com
白石のTwitter: twitter.com
興味を持っていただけましたら、どうぞ。
ヒトはクリエイティブな造形物であるか
どーも、ソルトです！
マーケティング の対象はヒトであることに着目して書いていきます。
脳科学をやってる身として、 人間自身がクリエイティブな造形物なのか を考えてみたいと思います。
これを考えるにあたって、 クリエイティブの定義 gashooに上がってくるクリエイティブな作品の定義、 それと比較した人の定義 について考えます。
クリエイティブについて クリエイティブと感じるのは人間のみと仮定します。 クリエイティブとは、人間が自他のヒト、モノ、と接触した際に五感を通じて認識する経路、感じ方、咀嚼の仕方を、意図的にロジカル的に考え、その表現方法の希少性に対して重み付けする形容詞。 とします。
作品の定義 gashooに上がってくるものは画集であり、作品。 思想を モノ化 したものであるととらえます。 人間がモノを認識する時には五感のうち、視覚 が大きな入り口だと思います。 人間がそれをクリエイティブと感じるのは 主に作品の刺激信号を視覚野領域における変換操作をし、その上で、咀嚼する。それに付随する希少性であると考えられます。
ヒトについて まず、ヒトの希少性は意図的に誰かに作り上げたものでしょうか。 自分自身、自他以外のヒトの二つに分け、対象をクリエイティブにする ということについて考えます。
自分自身についての考察 作品と同じ定義とすると、完全に客観視することができる生き物だとすると、自分を視覚野を揺さぶるデザインする、つまり服装や見た目が該当すると思います。 しかし、完全に客観視するのは無理ということでなし。
自他のヒトについての考察 自他のヒトをクリエイティブにできるのでしょうか。 ？ マネキンだったらできるでしょうがヒトは無理だと思います。 なぜなら自他のヒトも自分を完全に客観視できないヒト個人であるからです。
とすると、ヒトに対して、このクリエイティブの価値観は適応できないと考えます。
ではヒトはクリエイティブな造形物ではないのか。 今回、視覚野という3次元の中で考えてみましたが、これを膨らませて時間的側面も踏まえた4次元で考えたいと思います。 ヒトとモノの違いは、時間的に状態が自然と変わることと定義します。心臓の脈や、ゆらぎ、動的平衡など。
ヒトは、努力、経歴、スキルなどによって希少性が固まると思います。 過程 を重んじるのが人の特徴ではないでしょうか。 人のブランディングには過去の経歴が必ず入ります。 つまり、そこさえデザインすれば、咀嚼の仕方を意図的に発信できるものであると考えます。
3次元領域ではクリエイティブという定義に該当し得なかったヒトは 4次元領域でクリエイティブな存在として存在しうる。
という結論になります。
4次元をデザインしている動画、インターラクティブアート、これからくるであろうxR領域、 この辺をどう定義化してヒトと差別化したモノとしての再定義をして、クリエイティブという言葉を発信していくか、 また、僕たち自身がクリエイティブな存在、つまり4次元領域におけるクリエイティブ作品、になりうるか、 考えてみたら面白そうだと思いました。
morecreativeを、ヒトに落とし込む。 その観点からマーケティング します。
Gashooの裏側。(2)
Gashooの管理機能
GASHOO Inc. Advent Calendar 2017土曜日担当、3日目を飾ります、t-kusakabeです。 土曜日担当ですが3日目も飾っちゃいます。 またまた裏側話です。 最近管理者画面(以降、gashoo adminとなります)の作成に取りかかることができたのでその話ができればなと思います。
gashoo adminの技術選定。
やっぱりRubyを使っています。 ただ本体でRoRを採用しているためせっかくなら他のFWを使いたいなと思いHanamiを採用することにしました。
Hanamiについて
他FWとの比較
今年の8月のるびまで紹介されて知名度があがった気がするHanamiですが、他のFWに比べ以下の違いがある様に感じました。 - RoR : 重量級で、コマンド豊富。提供されるものが多い。レール乗れ感すごい。 - Sinatra : 超シンプル。よしなにしてくれ感。 - Hanami : Sinatraよりも色々してくれるけど、RoRほどレールに乗れ感がない。
RoRだとどうしてもDDD等がしにくくなりますが、Hanamiならやりやすいと思いました。 以下、公式抜粋です。(英語力ないのでgoogle翻訳しただけです。。。)
高速応答時間 Hanamiはスピードに合わせて最適化されています。 ミリ秒単位で応答を返します。 Content Delivery Networksを最大限に活用して、アプリをより迅速に作成できます。 フル装備だが軽量 メモリを犠牲にすることなく強力な製品を構築するために提供する100以上の機能を使用してください。 Hanamiは他のフル機能のRubyフレームワークより60％少ないメモリを消費します。 デフォルトで安全 Content Security Policy、X-Frameヘッダー、自動エスケープなどの最新のブラウザー技術に依存するアプリケーションを展開して、最も一般的なセキュリティ脅威からユーザーを保護します。 シンプルで生産的な Hanamiのシンプルなデザインとそのコンポーネントのシンプルさをお楽しみください。 柔軟なコードを数分で作成し、将来のために簡単に変更できます。
RoRを意識してる感があって個人的に面白いなと思いましたw
Hanamiのディレクトリ構成
個人的にHanamiを使ってみて良いなと思ったところはその構成でした。 デフォルトのスケルトンは以下になります。
. ├── Gemfile ├── README.md ├── Rakefile ├── apps ├── config ├── config.ru ├── db ├── lib ├── public └── spec
基本的にはapps以下を触ることになると思います。
apps
└── web
├── application.rb
├── assets
│ ├── favicon.ico
│ ├── images
│ ├── javascripts
│ └── stylesheets
├── config
│ └── routes.rb
├── controllers
├── templates
│ └── application.html.erb
└── views
└── application_layout.rb
Hanamiはマイクロサービス化をしやすくするためapps以下に好きにディレクトリを足せる様になっています。
通常のアプリケーションのコードをweb以下に作っている最中、管理者のみの機能が欲しくなった場合は
hanami g app admin とすると
apps
├── admin
│ ├── application.rb
│ ├── assets
│ │ ├── favicon.ico
│ │ ├── images
│ │ ├── javascripts
│ │ └── stylesheets
│ ├── config
│ │ └── routes.rb
│ ├── controllers
│ ├── templates
│ │ └── application.html.erb
│ └── views
│ └── application_layout.rb
└── web
├── application.rb
├── assets
│ ├── favicon.ico
│ ├── images
│ ├── javascripts
│ └── stylesheets
├── config
│ └── routes.rb
├── controllers
├── templates
│ └── application.html.erb
└── views
└── application_layout.rb
みたいな感じにapps以下にadminとして別のディレクトリを用意することができます。 また
apps/web/controllers
└── test
├── index.rb
└── show.rb
各controllerの下にアクション毎にclassを生成するので、RoRの様なfat controller状態になりにくいと感じました。 modelも同じく、entityとrepositoryに別れているためDDDっぽく責務をわけやすくなっています。
フロント側
Reactを採用しています。
今回は apps/web 以下に front というディレクトリを作成しYarnを使って管理しています。
. ├── Dockerfile ├── css ├── dist ├── gulpfile.babel.js ├── index.html ├── node_modules ├── package.json ├── src ├── webpack.config.js └── yarn.lock
src以下にjavascriptを、css以下にscssを置いてgulpでコンパイルしています。 CSS設計にはFLOCSSを採用しています。
. ├── foundation ├── layout ├── object └── style.scss
どうでしたでしょうか。 gashoo adminを作り始めたのがまだまだ最近のためほとんど土台しかできていない状態で、よくある形止まりになってしまっていますw 今年のアドベントカレンダーが終わる終わる頃にはちょっとは変わったことが出来るかもしれないのでその時はまた記事にしようと思います。 (むしろ記事にするために進捗だしたい。。。)
Gashooの裏側。
最初に
GASHOO Inc. Advent Calendar 2017土曜日担当、2日目を飾ります、t-kusakabeです。 今回は Gashooプロダクトを支える技術についてお話できればと思います。 (こういう構成の方がいいよ、これはよくないよ等ありましたらご教授いただけると)
Gashooのサーバー構成
現状Gashooの環境はいわゆるProduction環境、Staging環境の２つしかありません。 どちらもEC2内にサーバーだったりDBだったりを突っ込んでいる状態です。。。 インフラエンジニアがいないかつプロダクト自体が成長時期と言うこともあって後回しになっていたのですがこの度環境を見直そうという話になりました。 なのでここでは予定している構成を上げて行こうと思います。
現状目指している構成
今まではホスト環境で開発を進めていたため環境によるエラーが頻発していました。。。 現在は全てDockerに移行中です。 - Ruby:2.4.2-alpine - Node:9.1.0-alpine - MySQL:5.7 と予定です。
極力イメージを小さくしたかったので、ベースイメージはalpineを採用しています。 RubyでRoRを動かし、Nodeでフロントを動かしています。 フロント側ではgulpでSassとwebpackをよしなにしています。
DBをRDBに
現状EC2にmysqlを乗せていますがそろそろ辛いのでRDBを検討しています。 GashooプロダクトではDBのIOがボトルネックになっていることが多いので、データベースエンジンにはAuroraを予定しています。 AuroraはMySQLに比べ最大5倍、PostgreSQLに比べ最大3倍早いので移行することで解決することを願っています。。。
こんな感じにしたい。。。
最後に
どうでしたでしょうか。 まとめてみるとあまり変わったことをしていなくてどうしよう感があったのですが、ここからGashooらしさを出していければいいなと思います。(いろいろ検討中。。。) 現在は別機能でHanamiを導入しているので今後の記事で書ければなと思います。
クリエイターの選択肢を増やすガシューとGashooについて書いてみた。
みなさんこんにちは、株式会社ガシュー代表のしょーきです！
今までこちらのブログを開設したものの全く運用していなかったのでアドベントカレンダーを機に運用をしていこうと思います。
まずそもそもガシューがはじまったきっかけからガシューでは現在、なにをしていて今後なにをしていくのか？という点をいくつかの記事にわけて投稿していきたいと思います！
今日の目次
・株式会社ガシューとは？
・Gashooとは？
・筆者自身のガシューにかける思いとは？
株式会社ガシューとは？
ガシューはクリエイティブシーンに生きる人々の為の選択肢を開発する企業です。
人々の心の豊かさは人々のクリエイティブから生まれていると信じ、大阪と東京に拠点を持ち活動しています。
では具体的に何を開発しているのか？
Gashooとは？
その第一弾はこのクリエイターのポートフォリオ投稿SNS「Gashoo」です
Gashooでは映像、CG、グラフィック、プロダクト、コンセプトアート、クリエイティブディレクション等そのほかにも(投稿してくださっているのにそれ以外のジャンルの方でご紹介できずに申し訳ございません！)様々な作品ジャンルの作品投稿webサービスを運営しています。
作品投稿サイトを運営しているというよりもそれぞれのクリエイター自身がポートフォリオサイトを持ちつつそれがSNS的に広がっていく様なイメージのwebサービスを想定しています。
これは自分のマイページのスクリーンショットです。
各種SNSにリンク等で展開したり、自分のポートフォリオとして様々なシーンで見せれるようなシンプルなサービスデザインです。
こちらは作品詳細
これから様々なクリエイティブプロジェクト、プロジェクトを立ち上げる際のチームメンバーの募集、コンペのイベントを立ち上げて運営していきます！
筆者自身のガシューにかける思いとは？
何故、そもそもガシューという会社が生まれ「Gashoo」というwebサービスが生まれたのか？
それは創業メンバーの大半が同じ芸術大学出身という事もあり、同じ同級生、後輩、先輩達が様々な才能、技術を持ちながらそれらを活かせれるコネクション、進路決定の機会がまだまだ活かせていない状況があります。
まずはクリエイターのポートフォリオのオンライン化を目指し、それらが社会の様々な所で見られるような展開を考えています。
僕自身がガシューを通して実現したい世界観をお話させていただきたいと思います。
僕自身がこの会社を通じて世の中になにかをしたいと考えたのは学部生時代の時になります。僕が在籍していた大阪芸術大学は総合芸術大学で舞台芸術、音楽、映像、写真、デザイン、建築、美術等の様々な芸術分野の学科がある大学です。その大学の中で様々な友人に恵まれ色々な話をする機会がありました。
その中でみんなが一番悩んでいる瞬間は、大学卒業後の進路決定にありました。
今まで何かをしていた、何かしらの目的があって入った大学に対して卒業後になにをすればいいのかわからない、なにをしたいのかわからない、いつしか何かの目的を見失って卒業していく先輩達の話を聞いて何かおかしいなと思いました。
それをよく話を聞いてみると「卒業して就職はしたくないがお金がないから就職する」、「とりあえず大学卒業したら就職しなくちゃいけない。」などの声が多く大学卒業すると途端に活動の選択肢は狭まれている状況がありました。
僕自身が思う意見ですが、別に就職をしなくちゃいけないとかそういうのは誰かが考えた常識であって別に気にしなくて良いんじゃないかなと思います。自分の人生において誰かの決められた事だけで生きていく事って本当に生きてて幸せなんでしょうか？
そう言った問いの中で今の若年層(ここでは18-25歳くらいの人を想定しています。)の中において、現状の仕事を見つけるであったり、なにかしらの活動をするでもそうですが今やインターネットがあり、様々なwebサービスが生まれ、そして新しい技術がまだまだ出ていく。
この環境変化が早い状況の中で何かに流されて生きていくのではなく、自分で意志を持ち生きていく生き方のが美しいと考えています。
ガシューはそういった自分の意志を持って生きていく人たちを増やす為にも、常に世の中にワクワクや感動を与える人達、芸大美大生、クリエイター学生等のモノコトを生み出す人たちが社会において最適化された状態を作る事がガシューを通して実現したい世界観です。
好きな事がある人とそれを求める人達を常に探し続ける。
MORE CREATIVE
