WebDesigner's Memorandumウェブデザイナーの備忘録

あしたラボUNIVERSITY主催の学生限定ハッカソンに行ってきました

今回、富士通さんのあしたラボUNIVERSITY主催の「あしたラボUNIVESRITYハッカソン! ~半径3メートルから世界を変えよう~」に参加してきました。この記事では参加して学んだ事、感想、今後に活かしていきたい事等を備忘録も含め書き綴っていきたいと思います。

この記事の要約
  • 富士通株式会社が運営、活動しているあしたラボUNIVERSITYのハッカソンに参加してきたよ!
  • ハッカソンの参加は初めてだったけれどミニアイデアソンや講座などがあって、ハッカソンをする前に色んな知識を得てから臨むことができた。
  • 全国から集まった学生や社会人の方(富士通の社員さん)と交流する事で凄く刺激になった。
  • 濃い3日間を過ごすことができた。

[myphp file=’read_later’]

あしたラボUNIVERSITYって?

あしたラボUNIVERSITYは富士通株式会社が運営、活動している「あしたのコミュニティーラボ」の中の「学生×社会人」を中心とした団体の事です。

学生と社会人が繋がり共に創る「共創」の場として、今まで地域をテーマにしたトークセッションやアイデアソンを中心に活動を行ってきました。
今回はそんなあしたラボUNIVERSITY初のハッカソンでした。

ハッカソンって何?

さて、先ほどから何度も出てきている「ハッカソン」というワード。
意味は「ハック」と「マラソン」をかけた造語で、技術者が集まって短期間でWebサービスやソフトウェアを開発するイベントの事です。
GoogleやFacebook等有名な企業も行なっていたりと近年世界中で開催され、注目されています。

似たイベントに「アイデアソン」というものもあり、これは「アイデア」と「マラソン」をかけた造語です。こちらは開発はせずに、短期間のうちにアイデアを出すイベントになります。

ちなみにFacebookのいいね!ボタンもハッカソンから生まれたんだとか…

今回のイベントの詳細

今回のハッカソンのテーマは「半径3メートルから世界を変えよう」です。
この3メートルは物理的な3メートルという意味ではなく、自分の身近なもの(コト)から世界を変えていこう。良くしようという意味とのことです。

特定個人から特定多数へ、特定多数から不特定多数へと人へと巻き込んでいくことが重要となり、自分の身近なものを見直して「面倒なことをちょっと便利にする」「つまらないものをワクワクするものに変える」ことを目標にして参加者全員全力を尽くしました。

そして何より、あしたラボUNIVERSITYの一番の特徴(だと僕個人が勝手に思っている事)は学生と社会人は対等な関係であるという事です。今回のハッカソンでは北は会津、南は沖縄と全国から集まった学生30名に富士通の社員さんが10名混ざり、計40名が4〜5人のグループになってそれぞれグループごとにアイデアを形にしました。
普段仕事をしている社員の方と共に作品制作に対等な立場で取り組める。他にはない機会ですよね。
アイデアの出し方や考え方など、スキル以外にも色んな事を学ばせていただきました。

場所

ちなみに今回ハッカソンが行われたのは「富士通ソリューションスクエア」内にある「PLY(プライ)」という場所です。
自由に利用できるFABスペースがあったり、スペース全体も居心地のいい空間でした。
ずっと作業してられそうです。

GoogleMap

タイムスケジュール

今回のハッカソンは全部で3日間。そのうち1日目はアイスブレイクを行ったり、簡単なアイデアソンを行ったり、午後からはハッカソンで勝つための講座を2つ受講しました。
その後は懇親会があって、二次会(みんなで集まってご飯を食べながらお話)をしました。

2日目からはハッカソンですが、その前にゲストスピーカーとしてお2人の方にスピーチをしていただいてからハッカソンがスタートです。まずは個人個人でアイデアを出して、その中から共感するアイデアを幾つか選出して、グループ分け。そこからはグループごとに、アイデアを形にしたり発表に向けての準備です。

そして3日目の16:00から発表。かなり緊張しました。

今回学んだ事

今回のハッカソンは3日間でしたが、正直数週間分のインプットがあったような気がします。
そう思うほど、中身の濃い3日間でした。

自分ができる事は意外とあった

僕は普段デザイナーとしての勉強しかしていないので、できる事はWebデザインや簡単なマークアップのみ。それでもモックアップを作ったり、ビジネス的観点からアイデアを見直したりやれる事はたくさんあるんだなと思いました。

「自分はプログラミングできないから何にもできない」という事は決して無いという事です。
(できればプログラミングもできるようになりたいと思いましたが)

講座から色んな事を学べた

ハッカソンで勝つための講座でも新しい発見がたくさんありました。
「デザイン」「ビジネス」「ものづくり」の3つの90分講座があり、その中から2つ受講する事ができるのですが、僕は「ビジネス」と「デザイン」を受講しました。

ビジネス講座

ビジネス講座の様子

ビジネスの講座では、チーフシニアコンサルタントの佐々木哲也さんが担当。
著書に「0から1をつくる まだないビジネスモデルの描き方」があります。今回の講座では主にビジネスの視点を考慮してアイデアを形にする事の重要さ。良いビジネスアイデアとは何なのか?そして現場観察を実施する際のコツや、インタビューを行う際のコツ。ペルソナの作成において気をつけるべき点。他にはエレベーターピッチやビジネスモデルキャンバスなどのビジネスモデルのフレームワークに関して教えて頂きました。

ハッカソンはDemo or Die

まずはハッカソンは「Demo or Die」いいアイデアでも形にしないと意味がない。という所から講座は始まりました。そしてハッカソンではいいアイデアでもビジネスの視点を考慮していないチームが多いという事も話されてました。
そしてハッカソンが求められるビジネス的背景として、今の時代が共創の時代である。共創の手法としてハッカソンが重要視されているという事。

アントレプレナーが用いる方法論に「リーンスタートアップ」というものがあり、基本的に「Fail fast, Learn a lot 」、素早い失敗と学習が不確実性を低減するという考え方である。そしてハッカソンではこのリーンスタートアップを実践できる。

良いビジネスアイデアとは?

次に良いビジネスアイデアとは?という話に移ります。良いビジネスアイデアとは…

  • 課題が明確である
  • 解決方法が適切である
  • そして上記2つがフィットしている

言われてみると当たり前だと思いますが、物凄く重要な事ですよね。そしてこれらの条件を揃えるために特定の個人に焦点を当てる必要(ペルソナの設定)があるというお話でした。
また、ユーザーの暗黙の要望(潜在欲求)を見つけるためにもペルソナの設定は不可欠です。

現場観察やインタビューのコツ

まずは現場観察のコツについて。
今回のハッカソンでは外に出かけて実際に現場観察を行いましたが、その時にも役立ちました。

  1. 複数人のチームで現場に行く
  2. 仮説は一旦置く
  3. ユーザーになりきる
  4. 「当たり前」に「なぜ?」を考えてみる

3番のユーザーになりきるというのが個人的に難しかったですね。

そして次はインタビューのコツについて。

  1. 成功体験や理想を聞く
  2. 表情に注目する
  3. 相手の状況を想像する
  4. 決めつけない
ペルソナの作成を行う

ゲームの方ではありません。マーケティング用語のペルソナはターゲット像がぼやけないように細かく設定された架空の人物の事です。ペルソナを作成する一番のメリットはチーム全員がターゲットの共通認識を持つことができるという事。例えば20代男性をターゲットとしてしまうと、自分の知り合いに20代男性に当てはまる人がいる場合はその人を想像してしまいますし、近所のお兄さんを想像する人もいれば、自分の兄を想像する人も出てきます。そして何より20代男性といっても好きなものや趣味って人によって全然変わってきますよね。

チームのメンバーがそれぞれ全然違う人物像を思い浮かべながら進めてもまとまりのあるWebサービスは作成できません。そしてそんなペルソナの設定は今やマーケティングの世界では当たり前になっています。
(先ほどの良いビジネスアイデアの項目を埋めるためにも必要になりますよね)

ペルソナのチェック項目としては

  1. 具体的になっているか?
    • インタビューやデータなど事実に基づくものになっているか?
    • メンバー全員が個人名でイメージできるレベルか?
  2. 本質的な課題は見失っていないか?
    • 顧客の潜在的欲求は一体何か?
    • お金をかけてでも解決したいと思う悩みは何か?
  3. その課題に対して現在どうしているのか?
    • 不完全であっても解決しようとしているか?
    • それに今、どれくらいのコストや時間をかけているのか?

という3つの項目を上げていました。

そして今回はペルソナ作成の練習として、自分たちが知っている人物の特徴をあげていくというワークを行いました。僕たちのグループはサザエさん(アニメのキャラでもみんなが知っていれば何でもありとの事でした。)

  • 一言でいうとどんな人?
  • ありたいと思っている姿
  • 価値観(判断基準)
  • 行動パターン(口癖・習慣)
  • ターゲットの本質的な課題・悩み・望み

などの項目が書かれたシートが配られ、そこに記入していきます。「サザエさんってどんな悩みがあるんだろう…」という事をかなり真剣に考えました。まあサザエさんは一言でいうと「せっかちな人」ですよね。

ペルソナは完全に自分たちの空想の人格なので今回のように既存のキャラクターや実在する人物を使ってということは無いのですが、意外と事細かに人格を書くのは難しいという事を思い知らされました。

WHYから考えるゴールデンサークル

次は人は「何を(What)」ではなく「なぜ(Why)」に動かされるというお話です。

Whyから考えるゴールデンサークル

ゴールデンサークルというのは「Why」「How」「What」の3つの円の事で普通はゴールデンサークルの外側から内側に向けて考ます。「What」→「How」→「Why」という順番ですね。
しかしこれを「Why」→「How」→「What」の順で考えると人は動かされるとのことです。

具体例としてはAppleが出されていました。

  • 我々のすることはすべて 世界を変えるという信念で行っています。(Why)
  • 私たちが世界を変える手段は、美しくデザインされ簡単に使え、親しみやすい製品です(How)
  • こうして素晴らしいコンピュータができあがりました(What)

実はこの話は以前TEDの動画で見たことがあったため、内容もスッと入ってきました。


(サイモン シネック: 優れたリーダーはどうやって行動を促すか – TED Ideas worth spreading)

エレベーターピッチで利用するフレームワーク

お次はエレベーターピッチで利用するフレームワークについて。エレベーターピッチというのは30秒程度で人に興味を持ってもらうアメリカのシリコンバレー発祥の説明手法の事です。エレベーターピッチの「ピッチ」は説明するという意味で、「エレベーター内で説明できてしまうくらい簡潔にまとまった説明」という意味になります。

そんなエレベーターピッチで利用できる下記のフレームワークを教えていただきました。

エレベーターピッチで使えるフレームワーク

『コピぺで使う用』
私たちは「(ユーザーの特徴)」であるユーザーの
「(課題)」を解決する
これまでの「(既存の手段)」とは異なる
「(どのような新しい体験をもたらすのか、その特徴やアピールポイント)」な
「(プロダクトもしくはサービス)」を提供する

このフレームワークを使うと自分たちのサービスを30秒でアピールする事ができるようになります。

ビジネスモデル・キャンバス
ビジネスモデルキャンパス
Paul Mackinaw – Using the Business Model Canvas to improve Salesforce.com Designs

ビジネスモデルキャンバスは世界的に利用されているビジネスモデル作成フレームで、9つの構成要素に組織活動を分類して書き出す事で、それぞれの要素の関わり合いが一目で分かるようになります。

  1. 客層 (Customer Segment)
  2. 勝ち提案 (Value Propositions
  3. チャネル (Channels)
  4. 顧客関係 (Customer Relationships)
  5. 収益の流れ (Revenue Streams)
  6. 主要リソース (Key Resources)
  7. 主要活動 (Key Activities)
  8. 主要なパートナーシップ (Key Partner)
  9. コスト構成 (Cost Structure)

ビジネスモデルキャンバスはこちら(https://strategyzer.com/canvas)のサイトからダウンロードする事が可能です。

僕はビジネスに関する知識が全く無かったのですが、たった90分の間にこれだけの知識を得る事ができました。

デザイン講座

デザインの講座では、ラクガキについて学ばせて頂きました。落書き?いえいえ楽書きです。
僕は絵を描くことに苦手意識を持っていたのですが、誰にでも絵心はあるんだということ。100の表情を簡単に描く方法や、感情を中心にアイデアを出すエモーションマップという手法をタムラ カイさん(Twitter@tamkai)から学びました。

タムラ カイさんは著書に「ラクガキノート術」や「アイデアがどんどん生まれる ラクガキノート術 実践編」などがある方です。ちなみにタムラ カイさんの事を皆、タムカイさんと呼んでいるので便乗して僕もそう呼ばせていただきます。
そして何とブログもやってらっしゃいます。

自己紹介

デザインの講座では、まずタムカイさんの自己紹介があり、ハッカソンで勝つためには「3(アイデア)6(プレゼン)1()」が必要だというお話をし、その後グループの人で自己紹介をしました。

その自己紹介の方法がユニークで、紙を八つ折りにして折り目をつけたら紙を開いて、出来上がった一番左上のブロックに自分の名前と呼んでほしい名前を書く。そして残り7つのブロックに趣味などを書いていき、書きあがったらそのシートをグループで見合って会話をします。

シートがあることによって相手の特徴や好きなものが分かった上で会話をする事ができ、話題で困る事がありません。
そしてこの「紙を折って折り目を枠として使うテクニック」は色んな事に応用できるよ〜とも仰ってました。()

デザインとは何か?

デザインに関する細かな事を話していると90分の講義時間にはおさまらないので、今回は簡単に説明するとのことで、まずそもそも「デザインって何?」というお話です。

タムカイさん曰く「デザイン」とは「課題を解決すること」。そして課題を常に人にある。
確かにデザインと聞くとなんだか抽象的なモノ・コトを扱うイメージをする人が多くいますが、デザインは明確な「課題」があってそれを解決するための見た目であったり仕組みであったりを考えていくんですよね。

更にデザインの2つの側面として「デザインスキル」と「デザインマインド」の2つを挙げていました。スキルとマインド、そしてデザインは漢字にすると「意匠」となり、「意」はマインド、「匠」はスキルとなる。

デザインの四原則

そしてデザインの基礎のなるデザインの四原則についても軽く触れました。

  • 近接
  • 整列
  • コントラスト
  • 反復

この4つです。軽くそれぞれの原則について説明していきます。

「近接」というのは人間は位置が近いものは関係があるものだと認識する習性があるので、位置関係を整理する事でパッと見でも理解しやすいレイアウトが作れるという手法です。

人は位置的に近いものを「関係があるもの」と認識する習性があるそうです。つまり、位置関係を整理するだけで、視覚的に理解しやすいレイアウトを作ることができるのです。
下の図を見ると分かりやすいと思いますが(四角が写真でZ字がテキストだとイメージしてください)「A」の方は画像・テキスト・画像・テキストの縦に並んだ4つの要素の余白が同じですが、「B」の方は1段目の画像と2段目のテキストの間の余白を狭くしています。(3段目と4段目も同じ)

これによってどことどこが関係性が強いのか分かりやすくなります。

近接の法則

次の整列は、そのままの意味で「揃える」事です。
デザインの基本は揃える事なんですね。例えばプレゼンシートにしても何にしても下の図の「A」のように何か二段目の線だけズレてるとそこにばっかり目がいっちゃいますよね。
逆に「B」は全ての線が綺麗に揃っているので、全体的に目が行き届きます。

また、逆転の発想でズラす事によって1点に集中させるというテクニックもあります。

整列の法則

3つ目のコントラストは要するに強弱の事ですね。
色や大きさ、文字の太さ等に強弱をつける事で、メリハリがつきます。
下の図の「A」はただ文字を並べただけですが、「B」の方は「最高!!」の部分の文字を大きくして文字色を赤色にしています。

コントラスト

最後は「反復」です。これは特徴的なものを何度も繰り返し使う事ですが、要するに「ルールを決めなさいよ」という事です。
例えばプレゼンシートを作成するとき、下の図「A」のように見出しの位置であったりあしらいであったりがバラバラだとプレゼンシート全体に統一感がなくなります。逆に「B」のようにある程度型が決まっているとプレゼンシート全体に統一感が出てきます。

反復の法則

落書きではなく楽書き

さてここからラクガキについてのお話です。まずそもそもラクガキというと皆んな絵を想像しますが、タムカイさんによると「文字だってラクガキなんだよ」という事みたいです。例えば漢字だって元は絵みたいなもので、そこから象形文字になってだんだん今のような形になったんだと。

確かに言われてみればそうですよね。
そうやって考えると日本人はもの凄くたくさんラクガキをしているということ、そして絵心は画力とイコールでは無いという事も教えていただきました。

漢字の成り立ち
漢字の成り立ち雑学・トリビア・豆知識 – ネタオ
絵心の定義とは?

さて絵心と画力がイコールでは無いなら絵心とは何なのでしょうか?
そこで辞書の解説です。

デジタル大辞泉の解説
え‐ごころ〔ヱ‐〕【絵心】
1 絵をかく心得や趣味。また、絵を理解する能力。「絵心がある」
2 絵をかきたい気持ち。「絵心が動く」
絵心(エゴコロ)とは – コトバンク

絵を理解する能力、絵を描きたい気持ち、何だか随分「絵心がある」のハードルが低くなった気がしますよね。僕もこの意味を教えてもらうまで自分には絵心が無いと思っていましたが、あったんですね。絵心。

100通りの表情を描く方法

丸い円(顔の輪郭)の中に「口」「目」「眉」の3つのパーツを描く事で100通りの表情を描く方法を教えていただきました。

100通りの表情を描く方法

口のパーツ5つ、目のパーツ5つ、眉のパーツ4つで、5×5×4=100通りなのですが何が面白いって1つパーツを変えるだけで全然違った表情になるというところです。これ凄いですよね!
(画像右の顔は眉→口→目の順にパーツを1つずつ変えています)

そして表情を描いたらその隣に吹き出しを描いてそこにセリフを入れたりもしました。

他にも体の描き方であったり、鼻をつけるだけで別人を表現できるということや、タムカイさんがいつも着ているTシャツの事を教えていただきました。おそらくこれですね↓

アイデア発想に役立つ川柳の三要素

川柳には「穿(うが)ち」「かるみ」「おかしみ」という3つの要素があるらしいです。
穿ちとは本来は「穿つ」という動詞で本来は穴を開けるといった意味のようですが、川柳の場合は人が見落としているようなことに目を向けて取り出したり、常識を打ち破るといった意味になるとか。

「かるみ」は内容が軽いという意味ではなく、形式として「軽い」。さりげなくサラっと言った句体から奥行きや広がりを感じさせるといった意味になるということです。
ちなみにこの記事は、かるみがまるでありませんね。書き出すと止まらなくて…申し訳ないです。

「おかしみ」はじわじわと湧いてくるおもしろさの事ですね。

そしてこれら川柳の三要素はデザインにも同じことが言えるのでは無いかということです。
与えられた情報を「理解」「分解」「再構築」する。そして良いアイデアには深みがあり、集団無意識にまで入り込んでくる。

エモーションマップ

エモーションマップ

エモーションマップ、タムカイさんの講座で一番衝撃を受けた話題です。アイデア出しをする時にデザイナーは色んな言葉を書き出していったりします。言ってしまえば連想ゲームみたいな事をポストイットを使ってやったりするんですね。

しかしそれだと限界がある。そこで、感情を中心にしたのがタムカイさんのエモーションマップなんですね。まずアイデアの基盤となるキーワードを書いて、その近くに先ほどの方法で表情を幾つか書いていきます。そしてその表情に吹き出しを付けて、表情にあったセリフを書いていくのです。こうすると問題まで具体的に浮かび上がってきますよね。

ものづくり講座

あと僕は受講できなかったのですが、ものづくりの講座はシステムエンジニアの手塚徹さんが担当しました。何やらレーザーカッターを使っていたり機械をいじってたりしたみたいで、「THE・ものづくり」って感じでした。

1つ目の講座と2つ目の講座の合間の休憩時間に3Dプリンタで作った作品を見せていただいたり、3日目の朝と終了後に少しお話させていただいたりしました。

ちなみにFABスペースには色んなものが用意されていました。
今回触ったのはMesh(メッシュ)というiPadでMeshタグと呼ばれるブロック状のセンサーやライト、ボタン等を使った仕組みを作れるようになる機械やスマホで自在に色を変えられるHUE(ヒュー)というLED照明を使わせてもらいました。

FABスペースの様子

最後の方にシングルボードコンピュータのRaspberry Piについてお話をしたりもしたのですが、めちゃくちゃ興味湧いてしまいました。今物凄く欲しいです。ちゃんと扱えるかどうか不安ですが…

様々な人と出会えた

先ほども書きましたが、今回のハッカソンでは北は会津、南は沖縄と全国から集まった学生30名に富士通の社員さんが10名混ざる構成です。
そして学生といっても「大学生・専門学生・高専」と様々です。分野も「デザイナー・プログラマー・プランナー」と違ってきます。

富士通の社員さんもそれぞれの担当や分野があったり、スタッフの方も個性豊かな方ばかりでした。
おそらくこの場が無ければ出会わなかったんじゃないかなと思います。

地方も違えば分野も違う。そんな人たちが集まるからこそ生まれる刺激というものが今回のハッカソンにはありました。

刺激の多い3日間

今回僕はハッカソンに参加するのが初めてでしたし、そもそもアイデアソンにすら参加した事がありませんでした。最初は不安でしたが、富士通さん主催のハッカソンやアイデアソンは、参加者をほったらかしにするのではなく、ちゃんとやるべき事が手順としてあってその通りに進んでいく事ができるという情報を学校の先生から教えて貰っていたので不安はそこまで無く。

実際に1日目・2日目はミニアイデアソンがあったり講座があったりして、まずは実力をある程度つけてからハッカソンに臨むという形式でしたし、スタッフの方も相談に乗ってくださったりと親切丁寧でした。

ハッカソンが終わって全て終わりというわけでなく、今回得た知識は自分の血肉となるように、せっかく繋がれた人間関係は大切にし今後も刺激しあえる存在になれたらと思います。
最後になりましたが、参加者の皆さん、スタッフの皆さん、お疲れ様でした。お世話になりました。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね