ちょっと異色なイベント?「クリエイター200人祭り」を開催します。

こんにちは、クリエイター200人祭り実行委員のマッツォです。

kurieita-200

12/18(日)にあべのハルカスで「3年後のあなたを変える!爆発スタート!クリエイター200人祭り」というイベントを行います。

クリエイター祭りの内容

イベントはクリエイター「祭り」とあるように、楽しく盛り上がれるものとなっております。

クリエイター多数決!あなたはどっち?

会場で、例えば「あなたはイラレ派?フォトショ派?」という質問にWebシステムを通じて答えていただきその場で集計します。(・・・・Sketch派ごめんね、そしてこの質問を当日するかどうかはわかりません)
あなたは多数派でしょうか、それとも少数派でしょうか?

トークセッション

4つのトークセッションを聞けます。身近に感じられる成功例などを聞いていただけるので、ご自身の活動においてもヒントが多いと思います。

  • 30代で転職して未経験から2年で独立!!
    悩みまくりな自分が悩みを解決できた、3年後を変えるためにマジで伝えたいこと
  • めっちゃ働いたら病気でダウン!!
    病弱グラフィックデザイナーが独立し、好きな仕事を続けている秘密
  • 【働き方を徹底対談!】働き方をチェンジした昆虫写真家 ✕ 働き方をコーディネートする就職相談屋
  • クリエイター支援5年間の統計爆発!
    結論:あなたの未来を変えるのは◯◯するだけだ!

交流タイム:聞きたい場所に行け!テーマ別しゃべり場

当日は色々なクリエイターや、クリエイターと働く人、クリエイターを目指す人が集います。自分の聞きたいしゃべりたいテーマ別に集まって人脈を広げることができます!喋るのが苦手な人も大丈夫です!各グループにスタッフがサポートに付きますのでご安心ください!例)転職、独立、副業、悩み相談etc

このような内容でイベントをお送りする予定です。

なぜ私はイベントの実行委員をやるのか

私は30歳の時に職業訓練からスタートし、Webデザイナーとして2つの職場を経験しました。
いずれもWebデザイナーは社内に自分1人という環境です。それゆえ、なるべく人と知り合うべく最新技術に関する勉強会などに参加していました。

それでも技術系勉強会でトレンドばかりを見聞きするうちに「努力する方向性はこれでいいのか」「1年後、3年後もっとよくなれるだろうか」などと考えることが多くなりました。その他にも、「フリーランスになるにはどうしたらいいんだろう」「スキルを身につけたいけれど、死ぬほど残業しないと制作会社では働けないの?」などといろんなことを考えていました。

ちょうどそのいろいろ考えていた頃に、去年12月に【クリエイター100人祭り】というイベントを友人に教えてもらい参加しました。

こうして振り返ると、今年のイベント運営に参加するきっかけは、去年のイベント参加です。

去年イベントで登壇者(技術系では聞けない仕事などの濃い話)や、名刺交換して知り合った人たちのおかげで、
自分の働き方を変えたいという意志が強まったり、
自分にとって足りない方向性(クリエイターでは無い部分を強化)が見え、大きな収穫でした。

今年、クリエイター200人祭りの実行委員に携わっているのは、前回クリエイター100人祭りで自分の方向性を再吟味した結果のひとつです。

ほんの少しだけ視点を変えるだけで、見えないものがたくさん見えるようになるその「ほんの少し」のひとつのきっかけを持って帰って頂ければ嬉しいとおもい、イベント運営に携わっております。

去年は参加者、今年は実行委員として携わる私がこのイベントのおすすめポイントを【クリエイター×◯◯】であらわしてみます。

  • ハルカスで開催されるクリエイターイベントは珍しいので、まずは【クリエイターのあなた×ハルカス】というシチュエーションを楽しんでください。
  • マーケティングなどの基本をしっかり学んでいるクリエイター達が実体験を交えて語るので、【クリエイター×ビジネス】がすんなり見聞きできます、難しい話は苦手だけど、クリエイターが安く軽く扱われるのは嫌だ、などのもやもやを感じているひとはヒントを得やすいでしょう。
    なんでも近道は「人に聞くこと」だなと思います。
    イキナリ、ホリエモンさんの話を聞いて実践するのはちょっと難しいと思う方も多いかもしれませんが、身近な環境のクリエイターの経験から学べることは、実践にも移しやすいと思います。
  • カフェ交流会(懇親会)には参加できなくても、イベント内で、参加者さん同士で名刺交換などができるしゃべり場コーナーも設けられます。【クリエイター×クリエイター】で、制作あるあるや、請負の本音、仕事の回し方やお金のこと、営業ってどうやってるの?まで、ざっくばらんにおはなしください。

ここまで「クリエイター」と連呼してきましたが、私には経験があるひとつのネガティブな気持ちがあります。
「私まだ自分のことをクリエイターって呼べるほど何もできない、まだまだ見習い?何者でもないんですけど!」という、あのモヤモヤした感じ。

大丈夫です。そんな人ほど来て欲しい。
たとえば「あなたが思っているクリエイター像」より、クライアントは「いまのあなたができること」にすでに魅力を感じている場合が多いです。そんなこともイベントで少し実感できるんじゃないかなと思います。

先程述べましたしゃべり場コーナーでも各チームにそれぞれスタッフがおります。初心者のひとも、人としゃべるのが苦手なひとも、名刺を持ってないって人も、スタッフを頼れば大丈夫です。

ビジネス感覚に長けた人から、職人気質濃く「話すの苦手」な人まで、様々なひとが集まることと思います。安心して自分の得意なことも苦手なことも織り交ぜて、お祭りを楽しんで頂ければ幸いです。

12/18は天王寺のあべのハルカスで、クリスマス前のお祭りを楽しみましょう!
お待ちしております!

申し込みはこちらから!

簡単!スマホ用メニュー|3本線のハンバーガーメニューと、その下に「menu」という文字

こんにちは、寒くなってきました。
副業フリーランスも、うさぎ雑貨制作も最近ちょっとサボり中のマッツォです。

久しぶりによく使うコードをメモとして残しておこうと思い久しぶりにブログを開きました。

スマートフォンのときだけ3本線のメニューが右上にでてくるアレです。

やりたいこと

  • 3本線のハンバーガーメニュー
  • 3本線の下に「menu」と言う文字もついているもの
  • クリックして開いている時は「これクリックしてるよ」とわかるようにボタン部分の色は暗くする
<div class="menu_button"><span></span><span></span><span></span>MENU</div>
<ul id="hNavi">
	<li><a href="index.html">トップ</a></li>
	<li><a href="info.html">企業情報</a></li>
	<li><a href="place.html">拠点一覧</a></li>
	<li><a href="sitemap.html">サイトマップ</a></li>
</ul>

そして下のJSは、スマホのときだけメニューがでるようにする部分です、headタグの中に書きましょう。

<script>
	if (window.matchMedia('screen and (max-width:768px)').matches) {
		//メニュー
		$(function() {
		    $("#hNavi").css("display","none");
			$(".menu_button").on("click", function() {
				$("#hNavi").slideToggle();
				$(".menu_button").toggleClass("menu_close");
			});
		});
	}
</script>

これで準備はできましたが、実際三本線にしたり、メニューに色をつけたりするのはCSSで行います。
下は例。スマホ用のCSSに書いて下さい。
色などお好きに変更してみてください。

.menu_button {
    position: absolute;
    top: 22px;
    right: 10px;
    background-color: #FA0046;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    color: #FFF; }
    .menu_button span {
      display: block;
      background-color: #fff;
      height: 2px;
      margin-bottom: 3px; }
  .menu_close {
    background-color: #CE5E60; }
  #hNavi {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 999;
    border: 2px solid #CE5E60;
    border-radius: 3px; }
    #hNavi a {
      background-color: #FBF7F7;
      display: block;
      padding: 10px 20px;
      color: #FA0046;
      border-bottom: 1px dotted #CE5E60;
      text-decoration: none;
      text-align: right; }
    #hNavi li:last-child a {
      border: none; }
  #hNavi:after {
    content: "";
    position: absolute;
    top: -8px;
    right: 12%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #CE5E60 transparent;
    z-index: -1; }

※動かない場合

jQueryを読み込んでいますか?orその読みこみより前に記述していませんか?