メルカリで重要な役割を果たしているWebView

白石：お二人は、メルカリでどんなお仕事をされているんですか？

小嶋：私は2015年10月に入社して、アプリケーション内のWebViewページの開発を担当してきました。具体的には大規模なトラフィックがある取引画面や、配送サービス「メルカリ便」に新たな運送会社を追加したり、「大型らくらくメルカリ便」の配送機能を拡大したり、集荷サービスなどの開発も行いました。

白石：ビジネス的に重要な部分を作っていらしたんですね。

小嶋：技術としてはいわゆるHTML5、CSS3、JavaScriptを使ったフロントエンドで、WebView内からお客様の取引状況に合わせて、Web画面を出す部分を担当してきました。最近はメルカリのJP Web版（日本向けWebサイト）の開発を進めています。機能開発というよりは流入施策ですね。

▲株式会社メルカリ エンジニアリングマネージャー 小嶋 仁司氏
メルカリ エンジニアリングマネージャー / Frontend。大手Webメディアで働いた後、Flash の表現力に感嘆しフリーランスで Flash Developerとして働く。その後、Flashの衰退とともにHTML/JS/CSSにスイッチし、ゲームの受託開発などを行う。2015年にメルカリに入社。Web/WebView開発に従事。今はPWAに興味津々。

坂本：エンジニアの坂本です。Engineering Operations Teamというチームで、エンジニア全体の組織作りや制度、採用にコミットしています。現在3名（取材当時）いますが、全員エンジニアです。私は特に中途エンジニアの採用や技術広報、そして技術ブランディングを担当しています。もともとサーバーサイドエンジニアで、2014年に入社して去年の12月まではプロダクトに関わっていました。

▲株式会社メルカリ Engineering Operations Team　ソフトウェアエンジニア 坂本結衣さん
大学卒業後、流通業で営業職や店舗運営を経験し、Web制作会社に転職。PHPを用いたシステムの実装から、要件定義や設計、またDevOpsによる環境構築、Jenkinsサーバー構築等の開発基盤の構築・管理等を担当。2014年にメルカリに入社。Engineer Operation Teamという、エンジニア組織作り・採用・制度・技術ブランディングを行う部署のメンバーとして活躍中。

白石：メルカリはWebViewをかなり使っているんですか？

小嶋：最近はReactNativeを使ったりしているので、WebView自体は減っている傾向にあります。ただし、ReactNativeもJavaScriptで書くのでフロントエンドの領域だと思っています。WebViewとして特にコアな機能は取引画面ですね。

白石：なるほど。ということは、重要な画面はこれまでWebViewで作ってきたんですね。

小嶋：そうですね。当時からするとホットデプロイできる強みや、Webの技術でデプロイして、クイックに画面が切り替えられるという理由でWebViewが選定されたんだと思います。

白石：それはサーバーサイドに画面を更新すれば反映されるということですか？

小嶋：はい。更新性という意味合いでは大分速くなってきたんですけど、ネイティブはどうしてもiOSで申請があったり、ネイティブのアップデートがあるので…。例えば取引画面で使用している外部の配送サービスが急に一時期使えなくなったときに、ネイティブで何ができるかというとメンテナンスと出すしかなく、お客様はアップデートを待つしかありません。それであれば、Web上だけでクイックに開発できる方が良いという選択だったと思います。例えば、招待ページはWebViewで作られていましたね。

WebViewの全体量としては減っていますが、Web文脈でいうと注目度はかなり高まっています。例えばPWAとか。技術選定の根底にあるのは、お客様の体験だと思っているので、その時その時の状況に適した技術選定ができていればいいと思っています。WebViewをなくしていこうとか、PWA（Progressive Web Apps）だけにしていこうとかではなく、その都度リーチできるものを選べばいいかなと。

白石：パフォーマンスの速さとユーザー体験を重視しているわけですね。

小嶋：会社全体としてもテックカンパニーという点を重視しているので、いち早く最新技術を取り入れるという目的もあると思います。

開発速度を優先すべく、コードベースをリージョンで分割

白石：小嶋さんご自身は、ReactNativeの開発をしているんですか？

小嶋：僕自身は以前はUSプロダクトもやっていましたが、現在はJPプロダクトの担当なので、ReactNativeのプロダクト導入経験はないです。

白石：ちなみに、USプロダクトということは、JPプロダクトとは別にアプリを作っているんですか？

小嶋：はい。コードベースの話をすると、去年の秋くらいに現地での開発速度を優先するという目的で、JPとUSとUKのAPI含め、リージョンを分割したんですね。というのも、日本で開発した機能で、一部USで表示がどうしてもおかしくなってしまうこともありました。そういうことを懸念して、現地のことは現地でオーナーシップを持って開発・運営することにして、分割した経緯があります。

白石：Googleは全世界で一つのコードベースだと言ってますが、御社は分割したほうがいいと判断されているというのは、興味深いですね。

小嶋：ステークホルダーが同じリージョンにないということは、タイムゾーン分だけコストがかかります。例えばUSである機能をさくっと1日で開発してリリースしたいときも、JPに影響がないかを見るためにはQAなど複雑なリレーションが発生します。なので、現地でやっていることは現地のルールを優先しています。

坂本：メルカリは会社のミッションとしても、「世界的なマーケットプレイスを創る」ことを目標としています。最終的に世界中でメルカリを使ってもらいたい。ですが、まずは世界を獲りにいくことが最優先。そのために一番いい選択肢は何かと考えたときにリージョンごとに分けるほうが最適だと判断をしました。

小嶋：全リージョンで、完全に共通のコードベースを持つことは大切なんですけど、必ずしも日本のUIが全世界で最適だとは限らない面もあります。民族性や国土の広さなど、様々な違いがあるし、前提として物を売ったり買ったりするマインドの違いもある。そのときに共通のUIベースで勝負するのは難しいという課題もありますね。

白石：とはいえ、決断にはかなりの覚悟が必要だったんじゃないかと思います。そんなことないですか？

坂本：メルカリのバリューの一つに「Go Bold（大胆にやろう）」があります。経営陣も迷ったと思いますが、かなりスピーディに進めていたと思います。

白石：ちなみに、最近GoogleがWeb PaymentsやShippingの機能をブラウザで共有のUIを提供するらしいという話を聞いたのですが、メルカリさんはどう考えますか？

小嶋：Google Paymentsはかなり親和性はあるんじゃないかと思ってます。Webの可能性という話になるんですけど、決済に関して標準化されたものがあるなら、使っていきたい気持ちはあります。もちろんお客様にとって便利になるかどうかを検討してからになりますが、特にPWAやWebベースでのプラットフォーム化が加速していったときに十分可能性がありますね。

白石：個人的にもPWAにはご興味があるとのことでしたけど、社内ではどうPWAを活用していきたいですか？

小嶋：去年もサンフランシスコで開催された「Chrome Dev Summit」というカンファレンスに参加させてもらったのですが、現地ではトラフィックに弱いインドなどではかなり可能性があると発表されていました。話を戻すとお客様にとっての体験向上という意味で、正しいプラットフォームは何なのかを考えながら、特に細かくどんどん変わっていくべきだと考えています。

僕の個人的な意見ですが、例えば会社がビジネスを選定するときは、端末の保有台数や通信インフラの整備の高さなどを含めて海外進出を考えていくと思うんです。いわゆるネイティブライクな体験がWebベースでもできるように担保されるのであれば、Push Notificationなどもありなんじゃないかと。PWAを一番最初に導入してユーザー数を3倍に増やしたインドのFlipkartのように、インドという巨大な人口を有する国でも戦えるんじゃないかと期待しています。

白石：PWAをやるときはWebViewでやってたコードがまた使えるようになるんですか？

小嶋：それでいうと、PWAのアーキテクチャにも最適解がかなりあって。例えばService Workerのオフラインキャッシュ、ヘッダー部分とかグローバルナビ部分などはきっちりコンテンツ部分とは分けるべきだと思います。

App Shellモデルの概念もあるし、既存のWebで培われているコードべースができるとは思っていないのと、メルカリの課題としてリプレイスとかもあると思っているので、新しいものは新しく作りたいですね。

メルカリの開発体制や、サービスのリプレイスは？

白石：続いては、メルカリの開発体制や、サービスのリプレイスをどう進めていくのかなどについて聞かせてください。

小嶋：フロントエンドの文脈で言うと、一部リプレイスの必要があって、常に現場から上げるようにしています。今進んでいるプロジェクトとバランスを持って進められるように意識しています。

白石：それはメルカリJP Webの話ですか？

小嶋：そこもやりたいのですが、もっと優先度が高いところもあります。なぜ今そこをやるのかというのを説明した上でやるようにしています。Webだけではないかなと思っています。

白石：御社でいうフロントエンドというのは、もうWebに限らない？

小嶋：そうですね。フロントエンドはアプリのWebViewの開発をしている人もいるし、Webの開発をしている人もいるし、USはJavaScriptエンジニアが開発しています。Node.jsなども使われています。領域は広がっています。

白石：小嶋さんがフロントエンドだからあまり話に出てこないのかもしれないのですが、思いっきりネイティブで書かれているところも結構あるんですか？

小嶋：かなりあります。うちは優秀なiOSエンジニア、Androidエンジニアが相当数いるので、ロイヤルティ高くお客様の体験向上のために寄与しています。フロントエンドは現状では更新性の高いところを担当していますね。

白石：さらにメルカリの開発の裏側を知りたいと思うんですが、クラウドやデータベースの話から聞かせてもらってもいいでしょうか。

坂本：サーバーサイドはいろいろな会社のサービスを使っていますね。日本のサーバーサイドがメインで動いているのは、さくらの専用サーバーですし、USではAWSを使っていたり、現在では裏側のドメインごとによるマイクロサービス化の流れがあります。

白石：サーバ―サイドは何を使っているんですか？

坂本：サーバ―サイドで最初からコードべースで一番使っているのは、PHPです。

白石：それ以外の言語も増えているということでしょうか。

坂本：マイクロサービスの文脈の中で基本的にインターフェイスが定義されていれば、中身はなんでもOKです。その中でもいろいろな利点からGoを使っているケースが多いです。

チーム体制は3カ月ごとに適したチームを模索

白石：続いては、チーム作りや開発体制について聞いていこうと思います。先ほどフロントエンドの定義についてお聞きしましたけど、大まかにいうとフロントエンド、iOS、Android、サーバーサイドエンジニアというかんじなんですか？

小嶋：開発体制でいうと、さらにプロダクトマネージャーとデザイナーが入ってきます。いわゆるチームプロダクトという大きなくくりで、プロダクトを推進するためのチームになっています。チーム体制についてはクォーター（四半期）制という3カ月ごとに適したチームを模索しています。

僕の経験でいうと、かなりフレキシブルに動いていて、プロジェクトにプロダクトマネージャー、エンジニア、デザイナーと就くこともあれば、僕はJPフロントエンドという横ぐしのチームで動いています。その時にどういうチームが最適なんだろうと結構模索された上でチームを構成します。3カ月後に同じチームがあるとも限らないし、まったく違うチームでやる人もいるし、ずっと同じチームでやる人もいます。

白石：3カ月ごとに編成されるというのは、大分スピーディですね。ちなみにどう開発しているか、どう開発を進めているかもお聞きしたです。相当UXにはこだわっていると思いますが、事前の調査やテスト、それをどうフィードバックして、どう開発やデザインに反映しているんでしょうか。

小嶋：UXに関しては1年前くらいからユーザービリティテストをかなり活発にやっています。お客様に使ってもらって、ご意見を聞きながら、UI/UXの改善しています。あとはABテスト基盤があるので、プロダクトマネージャーが数値をもとに10%改善に基づいて、数値を見ながら取り組んでいます。常にPDCAが回っているかんじです。

ターゲットや契約している会社があるわけではなく、社員は参加も自由で公募もされています。行きたい人が行ける。全社的にプロダクト志向が高いですね。エンジニアだからプロダクトに意見を言わないという風土はないですね。

白石：クォーターごとにチームが変わっていくというお話ですけど、タスク管理などはどうされているんですか？

小嶋：タスク管理に関してはアトラシアンのJIRAを使っていて、全社的にチケット駆動開発で進んでます。情報管理はOSSのコミッターがいるんですが、CrowiというWikiを使っています。チーム移動したからツールが違うというのはないですね。プロジェクトごとに切っているチームもあります。

開発速度が早いがゆえの課題

白石：現在の課題と自慢できること、今後やりたいことについて聞かせてください。

小嶋：メルカリではクォーターごとにプロジェクトのゴールを設定しているので、開発速度が相当早いんです。さらに新規事業も多い。開発速度が早いとなると、エンジニアとしては、技術的負債を早く返したいと考えます。その辺のバランスを見直そうという動きも出ていますが、開発スピードの早い組織ならではの課題だと考えています。

白石：技術的負債をどうするかという問題ですね。

小嶋：スピードも大事ではあるのですが。

白石：自動テストもきっちり書いているとそれだけで時間がかかったりするから、省略するところもあったりしますよね。

CTOとVo/Eの二頭体制

白石：メルカリ開発チームならではの自慢できることは何ですか?

小嶋：現場が技術選定をある程度任されているところですね。あとは月並みですけど、全社員に開発者端末が支給されるんですね。iOSを使っている人だったらAndroid端末、Androidを使っている人ならiOS端末が入社時に無償で貸与されます。パフォーマンス出せるための備品や、エンジニアが最適だと考えるソフトウェアに対してはかなり優遇されていると思います。

坂本：メルカリは退職者が圧倒的に少ないですね。エンジニアに限らず、会社が成長を続けているので離れていく人が少ないし、 ネガティブなことを考える必要がない。プロダクトに集中できるし、今の環境をよくすることに注力できます。

またCTOとVP of Engineerがそれぞれ1名いて、技術的なトップと開発チームのマネジメントのトップが分かれているので、バランスがとれていると思います。CTOが開発体制に入り込んでしまうと、技術的な進歩に貢献することに時間がさけなくなってしまう恐れがありますが、そういうことがありません。

圧倒的に会社の技術を引っ張るという意味で、会社全体を先導しているという姿勢を見せてくれている。リアルな開発現場はVP of Engineerがコミットしてくれている体制があるので、エンジニアたちはよけいなことに時間を使わずに本質的なことにフォーカスできる環境だと思います

白石：CTOがこうだと言っても、現場が異議を唱えることはないんですか？

小嶋：トップダウンというより、どちらかといえば方向性を提示した上でテック寄りな人たちでデスカッションしている。距離が近いので、導入するにしてもしないにしても議論が頻繁に行われています。

白石：現場とトップの距離が近いとのことですが、CTOとのコミュニケーションもフラットにできるということですか？

小嶋：そうですね。かなりオープンな文化なので、CTOと1on1したいときも自由に設定できます。「必ずマネージャーを通すように」などの文化はないです。それから、メルカリでは3カ月に一回、Be Professional Dayという、普段はできないことをやろうという取り組みがあり、誰が何を開発してもいいことになっています。

前回はオートメーションというテーマを設けて箱根で開発合宿をしたのですが、CTOも来てくれて、いろいろアドバイスしてくれました。関係性としてはフラットなのかなって思います。

白石：エンジニアにとってはいい開発環境とチーム体制ですね。これからのメルカリにも期待しています！今日はいろいろ面白い話をありがとうございました。

▲メルカリのバリュー「Go Bold」グッズがたくさん！

HTML5 Experts.jp編集部の馬場です。
いよいよ2020年度から小学校でプログラミング教育が必修化されますね。
今回の「Webの未来を語ろう2018」は「プログラミング教育」がテーマです。

HTML5 Experts.jpの白石編集長をモデレーターに、プログラミング教育の最前線で活躍中の、みんなのコード利根川裕太さん、ライフイズテック水野雄介さん、日本マイクロソフト春日井良隆さんをお招きし、プログラミング教育の現状からプログラミング教育必修化の課題、その先に目指す未来について語っていただきました。

今回のゲストプロフィール

ライフイズテック株式会社 代表取締役CEO 水野 雄介さん
1982年生まれ。慶応義塾大学理工学部物理情報工学科、同大学院在学中に、開成高等学校物理非常勤講師を2年間勤める。卒業後、人材系コンサルティング会社に入社。教育変革を掲げ、退社後、2010年7月、ピスチャー株式会社（現ライフイズテック株式会社）設立。シリコンバレーIT教育法をモチーフとした中高生向けIT教育プログラム「Life is Tech!」を立ち上げる。現在延べ15000名の中高生がLife is Tech !に参加。

NPO法人みんなのコード 代表 利根川 裕太さん
一般社団法人みんなのコード代表。慶應義塾大学経済学部卒業後不動産デベロッパーへの勤務を経て2011年よりラクスル株式会社に立ち上げより参画。2014年Hour of Codeのボランティア実施後プログラミング教育の必要性を感じ、2015年7月一般社団法人みんなのコードを設立し代表理事に就任。2016年、文部科学省「小学校段階における論理的思考力や創造性、問題解決能力等の育成とプログラミング教育に関する有識者会議」委員。

日本マイクロソフト株式会社 プロダクトマネージャ 春日井 良隆さん
岐阜大学 教育学部を卒業後、大沢商会、アドビ システムズを経て、マイクロソフトに入社し、ExpressionとSilverlightのマーケティング戦略を担当する。その後、エバンジェリストとして、ユーザーエクスペリエンスやHTML5、プログラミング教育の普及に奔走し、Imagine CupやHour of Codeの日本での活動を主導する。2015年よりWindowsのプロダクトマネージャーとしてコンシューマ市場を、2017年より教育市場を担当。

プログラミング教育のこれまでの取り組み

白石：まずは皆さんの自己紹介と、プログラミング教育との関わりについてお聞かせください。

水野：ライフイズテック水野です。これまでプログラミング教育は重要だと言われながら、社会がなかなかついていけてなかった。プログラミングスキルは「やりたい」「好き」という気持ちがないと伸びないと考え、7年半前に中高生向けIT教育プログラム「Life is Tech!」を立ち上げました。

「Life is Tech!」は春夏冬休み中に、3～8日間のキャンプ形式でiPhoneアプリやゲームを作りながらプログラミングを学びます。1回150～200人の中高生が参加し、5～6人が1チームになり、大学生がメンターとなって中高生に教えています。これまで延べ27,000人が参加しており、世界2位の規模となりました。

Life is Tech!では、ただプログラミングのスキルをつけるだけでなく、好きな仲間と出会ったり、尊敬する大学生のメンターに学ぶことでこんな先輩になりたいと思ったり、夢中になれることを見つける体験をしてほしいので、大学や企業など、中高生にとって非日常な空間でキャンプするということを大事にしています。

▲「Life is Tech!」キャンプの様子

有料コースと無料コースがありますが、全体の1/3が無料体験会や企業とのタイアップキャンプの参加者です。最近はIoTをテーマに開催したり、NHKさんとAIを学んだりしています。ポケモンGOやUnityのコースも人気があります。参加者には勉強時間はLINEが使えなくなったり、ライバルが勉強し出すと通知が来る機能など、独創的な発想で作った勉強管理のアプリを作り、ダウンロード数が10万超えした子もいます。

子どもたちにはいつもプログラミングの力で「半径2mの世界を自分たちで変えていこう」、さらに「その半径を広げていこう」と伝えています。

▲ライフイズテック株式会社 代表取締役CEO 水野 雄介さん

利根川：僕は大学卒業後、大手の不動産会社に就職し、2011年にラクスルというベンチャーに社長の次にエンジニアとして入って、立ち上げから携わりました。それから4年経った2014年くらいに、エンジニアと非エンジニアの壁をなんとなく感じていたこともあり、アメリカの非営利活動法人Code.orgが展開している「Hour of Code」をみんなでやってみたんですね。

それをきっかけに、こうしたプログラミング教育が日本にも必要だと思うようになり、2015年1月に小学生のプログラミング教育を支援する活動準備を始めました。7月にはCode.orgの日本パートナーとなる一般社団法人みんなのコードを設立しました。

当時はプログラミング教育がこんなに盛り上がるとは思っていませんでしたが、2020年から必修化も決まり、行政・企業との連携を深めながらプログラミング教育の支援活動を広げています。

私たちみんなのコードは、「全ての子どもがプログラミングを楽しむ国にする」というミッションを掲げています。なぜ、全ての子どもなのかというと、プログラミングコンテストはある程度できる子を伸ばすのにはいいけど、全ての子どもの育成に対する取り組みってあまりないと思ったから。なので、裾野を広げるほうを頑張ろうというコンセプトでやってます。

IT人材不足や論理的思考を鍛えるという考え方も大事ではあるんですが、実際に授業でやるときは「プログラミングを楽しむ」というのを第一にして、結果的に子どもの能力が高まるとか、社会で活躍できる人材を育てたいと考えたからです。

「国にする」とした背景は、こういう活動って東京だけ先に進んでしまって、地方との格差が生まれることが多いんですよね。その差を埋めるために地方でも活動しています。とはいえ、全ての子どもに直接教えるのは無理なので学校の先生、特に小学校の先生に対しての指導を行っています。プログラミング教育についてのシンポジウムを開催したり、地方に出向いて体系的に学んでもらったり、実際の授業で使える教材を提供したりなどですね。2017年度のシンポジウムは10都市1000名超の先生に参加してもらいました。これからはさらに拡大していく予定です。

▲一般社団法人みんなのコード 代表 利根川 裕太さん

春日井：日本マイクロソフトの春日井です。Windowsのマーケティング担当として、教育市場を見ています。HTML5 Experts.jpのエキスパートに名前を連ねているように、以前はWeb系の技術のエバンジェリストをしていたのですが、後半は学生向けのエバンジェリズム活動も兼任していて、その頃に知り合ったのが水野さん。

「Life is Tech!」は大学生が中高生を教えるというスタイルで、お互いの年齢が近いから親近感があるんですよね。子どもたちを盛り上げる趣向が凝らされていて「すごい！」って毎回感動しています。しかも、経験と知見が積み重なり、どんどんバージョンアップしてる。

利根川さんとは、彼がCode.orgの日本パートナーとして、みんなのコードを立ち上げた頃に知り合いました。Code.orgはアメリカのSTEM教育（※）の普及を支援するNPO団体で、Microsoft、Apple、Google、Facebook、AWSなど大手のIT系企業が数多くサポートしています。

STEM（ステム）教育：科学（Science）、技術（Technology）、工学（Engineering）、数学（Mathematics）の教育分野を総称する、2000年代に米国で始まった教育モデル。

Microsoftは「Microsoft MakeCode」というMicrosoftが開発した学習者向けのプログラミング環境とコンピューティング教育用教材を展開しています。最近はIoTを活かしたフィジカルコンピューティングが人気で、micro:bitというマイコンと連携できる「MakeCode micro:bit」が注目されています。USBでつないだmicro:bitをビジュアルコーディングでLEDを光らせたり、温度センサーや加速度センサーを使ったモノ作りにも使えます。理科や技術なんかの教科との組み合わせの相性もいいですよね。

ほかにも、MakeCodeはMinecraft（マインクラフト）をプログラミング教材として使うこともできて、一緒に組み合わせる「Minecraft Education Edition」というマイクラの教育版があります。Minecraftは全世界の子どもがほぼ100％やっている人気のサンドボックスゲームですね。

水野：シンガポールでも大人気で、どこのコンビニでも一番目立つ場所に置いてあります。

白石：うちの小4の息子もすごくはまっていますね。いつもYouTubeの実況を見てます(笑)。

春日井：YouTubeを見て勉強する子も多いみたいですね。古い世代は先生からの一方的な詰込み型の教育が当たり前だったんですが、お互い子ども同士が学び合おうという協働学習の学習効果に注目が集まっていて、Minecraft: Education Editionにはそんなこともできるように工夫されています。

先生が黒板に「ここに集合！」と書いたり、仮想世界にいる子どもをガイダンスしたりする機能もあって、お値段もお手頃。先生が一人、1年あたり544円払えば使うことができます。

実績としておもしろいのは、立命館小学校の事例ですね。京都には、たくさんの観光施設があることはご存じの通りですが、海外の人にもっと知ってもらおうという課題を解決する学習にMinecraft: Education Editionが使われました。

ちゃんと設計図を手に入れて、誰が屋根と庭とかを作るかなどの業務分担をし、訪れた人のアングルまで徹底的に考え、議論しながら作っています。先生はあくまで手助けするだけで、子どもたちが主体的に取り組んでいるところが素晴らしいんです。

Minecraft Education Editionはプログラミング教育だけでなく、STEM教育全般をやろうとしています。例えば、私たちの世代だと元素記号を覚えるだけだったものが、仮想空間の中で水素と酸素を合成すると水を生成するようなことを体験したりします。現CEOのサティア・ナデラの理解もあり、マイクロソフトでは全世界的にかなり教育に力を入れていますね。

▲日本マイクロソフト株式会社 Windows プロダクトマネージャ 春日井 良隆さん

白石：子どものプログラミング教育を支援するのは、Microsoftにとってどういうメリットがあるんですか？

春日井：1つは社会的な責任ですね。。第4次産業革命に向けた人材育成を引き合いに出すまでもなく、ICTのスキルを持った人材の育成は急務です。日本のマイクロソフトの人間として、日本の将来に貢献をしたい。それは、偽らざる気持ちです。

商売的な話をすれば、子どもの頃からWindowsに慣れ親しめば、大人になったらSurfaceを買ってくれるだろうという期待もあります(笑)。あとはスマートフォンに対する、パソコンの意義というのも伝えていきたいと考えています。

世界のプログラミング教育はどうなっている？

白石：続いては、世界のプログラミング教育どうなっているかについて伺いたいと思います。1月にロンドンで開催された「BETT」という教育イベント、皆さん行かれてるんですよね？

利根川：私も行ってきました。

春日井：BETTは世界で一番大きい教育系のイベントで、国を挙げてブース出しているところが多く、今年の韓国は大きかったですね。でも、日本はブース出してないんですよ。遅れをとるのではないかとかなり心配しています。

利根川：僕は課題はあるけど、単純に「遅れててやばい」という論調は一面的過ぎると思っています。例えば、グローバルでもプライベートの塾はまだあまりないし、日本の小学校でも先進的な取り組みをやっている先生もいます。

春日井：正確に言うと、プログラミングができる最先端の人材を生み出す高等教育に対する取り組みが遅れているんじゃないかと思っています。

水野：そもそもプログラミング教育の前に、まずパソコンが扱えて、パソコンでものが作れることが必要なんですが、Wifiやパソコンの設備が整っていないですね。以前シンガポールに住んでいたんですが、向こうもそれほど進んでいるわけでもなくて、やはり（プログラミングができる）先生が少ない。

英語は「できない」というマイナスの状態から、「できる」というゼロにすることだけど、プログラミングはゼロをプラスにする学びなので、ほぼ横一線。日本はものを丁寧に作るとか、ソフト面では勝っているので、まだ可能性はあると思います。

利根川：僕も横と比較して嘆くより、これからどれだけ良くしていくかの方が重要で、先に進んでるところからどうやれば前に進めるのかを学べばいいんじゃないかと。アメリカが進んでたらそこからカリキュラムを学べばいいし、悲観する必要はないと思います。

▲HTML5 Experts.jp編集長 白石俊平

白石：ちなみにどこの国が進んでるところかありますか？

利根川：アメリカは進んでますね。あとはイスラエル、イギリス。特にイングランドはコンピューティングという教科があり、小中高と授業があります。時間枠、教科書、センター式みたいな試験もあって枠組みや体制が整っています。

春日井：ちょっと前に話題になった内閣府では、諸外国の若者と比較すると、日本の中学生のスマホの所有率はあまり変わらないのですが、パソコン所有率はかなり少ないという結果になっていました。

水野：普通に向こうは小学3年生からiMovieから動画作ったりしますからね。Googleドライブで宿題出したり、リテラシーの差はかなり大きい。

白石：今の子どもたちはPCがなくてもタブレットやスマホでやっちゃうことが多いですよね。

利根川：コンテンツの消費側はそれでもいいけど、制作する側になるとまだ本格的なところはPCでないとつらいと思います。

春日井：消費は間違いなくスマホ。でも何かクリエイトする時は、PC、キーボード、大きな画面がないと難しい。

白石：ではそういう話やデータから考えると、作る力は育っていかない可能性がありますか？

春日井：なんとかしないといけないですね。

利根川：個人の家庭、学校によっても差が出てくる面もあります。

白石：そういう課題が浮き彫りになり、未来に進んでいかなくてはいけないという話になってきたので、プログラミング教育のこれからの話に進みましょう。

プログラミング教育のこれから

白石：プログラミングの義務教育化の話が出ましたが、ざっくばらんにお聞きしたい。調べたところ「コーディングを覚えることが目的ではない」とか「プログラミング的思考」が大事とか、賛否両論あるらしいですね。アンプラグドコンピュータサイエンスというパワーワードもあったりして。

利根川：よくプログラミングが2020年から必修化になるってメディアに出てるので勘違いする方もいるのですが、正確にいうと小学校、中学校、高校がプログラミングを教えないといけないんですよと指導要領は出ますが、プログラミングという教科ができたり、コードの書き方そのものの授業をやるわけではないのです。その指導要領は10年に一回しか変わらなくて、そのタイミングが小学校が2020年、中学校が2021年、高校が2022年になります。

現状どのくらいプログラミングを授業に取り入れているかというと、小学校についてはほぼなくて、たまに面白いことをやりたい学校や、2020年を見据えて先行的にやる学校がまれにあるくらい。中学校は今の指導要領でも技術課程の中で、4～8時間くらいロボット制御の計測という授業があります。ただこれも問題が山積みで、教科書には入ってはいるけど、ちゃんとやらない先生もいます。

高校は情報という教科の中に、理系よりの「情報の科学」と文系よりの「社会と情報」という科目があり、プログラミングは情報の科学の中にのみ入っています。ただし、学校ごとに開設科目は決まっていて、配分は15％：85％と情報の科学が少ないという状況です。

水野：そうですね。その15％もかなり初歩的な内容が多く、僕が衝撃を受けたのは、テストの問題で「キーボードのここはAですか？Pですか？」って問題が出てたこと。キーボードの位置を覚えることに価値はないし、問題山積みな状況です。

利根川：そして、小学校は算数とか理科の中で、多角形をプログラミングで書いてみる。書くというより、プログラミング体験してコンピュータに指示する感覚をつかみましょうというかんじですね。中学校は今の指導要領にあるロボット等の制御の内容に加えて、ネットワークを使った活動が増えて、今やっていることを倍増にするイメージです。

高校は「社会と情報」と「情報の科学」を統合して情報の科学よりの「情報Ⅰ」という必履修にして、これまで15％しかやってなかったことを100％にして、教科の中に入っていくといったかんじです。プログラミングという単独の教科はありません。

白石：小中高とプログラミングという教科は出てこないと。小学校においては、現在技術課程でやっているのを2020年以降は理科とか算数で、もうちょっと厚めにやるということでしょうか？

利根川：小学校は現時点ではゼロです。ゼロの状態から算数・理科の科目で体験というかたちでやります。ただ、一斉に始められるものでもないので、去年くらいからトライアルが始まっているというかんじです。

白石：まず授業ができるのかが気になりますね。教える科目・内容は学校や先生任せだということですがそこは変わるんですか？

利根川：最低限の基準はありますが、そこは変わらないですね。

春日井：一応教育委員会の皆さんも、変えようとはしていますけどね。

白石：学習指導要領とかって全然わからないんですけど、一応ほかの理科、算数、社会などはここまでやろうよというのは決まっている？

春日井：ざっくりしたガイダンスとかは決まってますね。

白石：たとえば高校3年生の数Ⅲとかだったら微分積分といったところまではやろうとか。

利根川：そういうのは決まってますね。小学校も算数・理科は教科書には書かれるので、多角形を書くのをプログラミングでやってみましょうとか。

白石：でも今の話だと、教科書の内容もバラバラかもしれないと。

利根川：中学校の技術課程くらいになると、あまり教科書は使われなくなるんですよね。副教材中心で、教科書は参考書くらいの扱いになっていくと思います。

白石：「プログラミング教育はコーディングを覚えることが目的ではない」といった内容がブログで書かれて話題になってましたが、どう感じてますか？

利根川：文科省としては、小学校段階からちゃんとプログラミングそのものを学習のターゲットにしようとしています。しかし小学校は全国で2万校あって、40万人の先生がいますが、そのほとんどの先生がITリテラシーが高いわけではありません。その状況から数年でプログラミングを教える環境にするのは無理なんですよね。

春日井：僕が小学生の時は書道やそろばんの塾や、授業で音楽・体育・技術とかやりましたけど、みんな音楽家や書道家になるわけじゃなくて、教養として必要だからやるというかんじでしたよね。

中には体育の授業でスケートを知って、冬季オリンピックを目指すことを決意した子もいるかも知れない。プログラミングもこれから必要になる教養、あるいは未来の可能性をひらくきっかけだと思っています。

利根川：例えば環境問題って家庭科でも理科でも社会科でも、ごみ処理や温暖化などについてはいろんな教科をかいつまんで学ぼうというのは、少しでも興味を持ってもらうために文科省がよくやるやり方です。個人的にはもっとちゃんとやってほしいという思いはありますが、現実的な第一歩としてはしかたがないかもしれません。

白石：でも、そのまま10年間変わらないというのは問題なのでは？

利根川：そうなんです。そこが問題なんですよね。

白石：IT人材を増やすという直接的な影響にはならなさそうですか？

春日井：いわゆる第四次産業革命の人材を育てると国が打ち上げたので、そこに合わせて一つの指導要項が組まれたという背景はありますね。

利根川：文部科学省・経済産業省・総務省、それぞれ動きはかなり違いますね。学校の授業の中で何を教えるのかは文部科学省、総務省は学外や部活や地域であったり、基礎スキルがある人をどうやって伸ばしていくか。経産省はグローバルに発展させるための人材の輩出だったり、このEduTechというものを産業にしていこうとか。文科省だけにとどまらない動きがあります。

学校教育、特に小学校中学校は職業教育じゃなくていろんなチャンスに気づくための機会。30～40代はプログラミングに触れたことがあるのは10％いるかいないかなんですが、この世代になると100％になるんですよね。やってみたら面白いとか伸びそうという子どもの母数が増えて、未来の仕事につながればいい。学校教育としては、そうした体験をしてもらう機会を作るというのが責務になります。

Life is Tech !のような塾・クラブ活動、CoderDojo（コーダー道場）みたいなコミュニティは、よりプログラミングをやりたいという子を伸ばすところ。学校教育にプロフェッショナルな体験を期待しすぎるのはちょっと筋が違います。

ただ政府としては第四次産業革命というムーブメントを起こし、この国をAIやIoTといったテクノロジーの力で、もう一度元気にしようという動きがあります。プログラミング必修化になったのも、ある種内閣内のバズワード、必修化するときの体制を第四次産業革命に生かすため。これらの取り組みで興味が出てきた子のスキルを伸ばし、価値を提供する側に育成するという動きが経産省でも出ています。

社会はどう変わる？子どもたちにはどう教えればいい？

白石：最後は社会がどう変わるか、子どもたちにどう教えればいいんだろうというテーマについてお聞きしたいと思います。どうやったら楽しく効率よく教えることができるのでしょうか。

春日井：白石さんは、今お子さんに何かやらせてるんですか？

白石：うちの小4の息子はHour of Codeから始めました。でもHour of Codeはわりとさくさくできちゃって、次にスクラッチやらせてみたんですが、UIがイマイチいけてないかんじがして…（苦笑）。あとは「プログラミン」をずっとやってました。

最近はビジュアルプログラミング言語で、Minecraftを題材にPythonを教えてました。でも、その辺りから興味が失ってきちゃって。原因はいろいろあると思うのですが、まずプログラミングは多少英語を知ってないとできないんですよね。

例えば、英語でimportと言われてもまったく意味がわからない。すべてがおまじない。コマンドラインをたたかなくてはいけないんですが、そういう単調作業が面倒くさくなってしまってる。親が「やりなよ～」と言うと、逆に嫌になっちゃってる状況なんです。

利根川：そもそも白石さんの「教えよう」というのは、あまり筋がよくない気がします(笑)。基本的に「やりたい」と思ったときに、すっと出す方がいい。いわゆる従来の勉強が嫌いになるのと同じことをプログラミングでもやろうとしている。それであれば教えないほうがよくて、興味を持ったときに教えてあげたほうがいい。特に家庭では子どもに押し付けるとよいことがない気がします。

水野：10歳以上になってくるとだんだん自我が芽生えてくるので、まずお父さんやお母さんがめちゃくちゃ楽しそうにやってることに食いつくんですね。それができないとしたら、僕はコミュニティだと思います。楽しく効率的に学べるかはコミュニティ。

子どもはその場の雰囲気やそこにいる人たちと学ぶことが楽しいとか、ライバルに負けたくないとか、コミュニティに所属することによって子どもたちは成長する。10歳以上になって自分たちが教えられないのなら、自我に任せつつ、そういうところに行かせたほうが伸びると思います。

春日井：でも、白石さんみたいにPython書けるお父さんがいる家庭はなかなかないですよね。

白石：子どもたちも楽しくやってたし、最初はやりたがってたんですけど、そこをどううまく育てていけばいいのかなって考えちゃうんですよね。

水野：英語もそうですよね。5歳くらいのときは楽しかったけど、親が話せなくなると、だんだん楽しくなくなってくる。例えばインターナショナルスクールに行って友だちと毎日楽しく話していると、話せるようになるのと同じことだと思います。

白石：ライフイズテックさんは子どもが「プログラミングをやりたい」って、参加するんですか？それとも親が「やってみたら？」と勧めて参加させてるかんじなんですか？

水野：基本的には子どもたちが「やりたい」と言って参加してきてくれます。僕ら教育者の仕事は、子どもがやりたいって思ってくれるようなものを作る、HPの作りもそうだし、チラシもそうです。オリンピックで飛んでたドローンやPerfumeのプロジェクトマッピングみたいに、子どもたちに作ってみたいと思わせる欲求や、キャンプに参加してみたいというワクワク感を出させることが教育者側のやるべきことだと考えています。

白石：それは子どもたちに直接アプローチしないと、Life is Tech!のキャンプの情報は伝わらないと思うんですが、どうやってるんですか？親とかならいろんなメディアを見ていると思うんですけど。

水野：学校でのクチコミや、友だちの紹介が多いです。先生も自分たちでは教えられないからと、学校単位でキャンプをやったりとか。マイクロソフトさんで、品川女子学院と聖光学院でコラボキャンプをやったこともあります。

親としてはマイクロソフトを見に行けるし、品女の子は共学の雰囲気を楽しめる。きっかけは何でも、結果的に興味を持ってくれればいいんですよね。

春日井：マイクロソフトがMinecraftを教育用にカスタマイズしようとしたのはまさにそれで、子どもたちは興味を持たないとやらない。子どもはMinecraftが大好きなので、だったら教材にしましょうと。Excelでマクロ組んでみましょうっていう授業だったら、楽しくない。

白石：でも、Education Editionは先生しか使えないとのことですが、一般家庭でやるにはどうしたらいいですか。

春日井：最近は教育機関じゃないところでもできるようになってきました。ただMinecraftをパソコンで使う場合、Java版とWindows 10 Editionの2パターンあるんですね。

白石：うちの息子はJava版ですね。

春日井：Pokect Editionは、どんどん、Java版に近づいているのですが、その、Pocket EditionのWindows10版を「Minecraft Windows10 Edition」と言います。Windows10のストアから3,150円でダウンロードできるんですが、これは最初にお話したMakeCodeとつなげられるようになっています。Code Connectionという無償のツールをインストールするだけなので、ぜひやってみて下さい。大人がやっても楽しいですよ。

白石：みんなのコードでは、プログラミング教材「プログル」というツールを作られているんですよね。

利根川：プログルは小学校の算数の授業、主に小学校5年生を対象に、学校の先生が使うために作ったプログラミング教材です。多いときだと1日1000人くらいの児童が使ってくれていて、従来の多角形の学習よりは楽しいと思います。

白石：2020年以降はが爆発的に全国の小学校で使われると。

利根川：そうなるといいですね。うちでプログラミングをやるとしたら、スクラッチとかマイクラのほうが楽しいと思いますけど(笑)。

先生がちゃんと自分が楽しいと思って授業やクラブ、学校外でもやってくれればいいなと。プログルのホームページも学校の先生向けに作っています。

白石：最後に本日のディスカッションを振り返って、ひと言お願いします。

春日井：子どもの頃にピアノを習って、その後ピアノを弾くことが喜びになる人、音楽を聴くことが喜びになる人、音楽に全く興味が持てなかった人など、人それぞれだと思います。いずれにしろピアノを習うという体験をしなかったらわからなかったことですよね。

これからの社会を考えると、プログラミングもそういった機会が与えられるチャンスが増えていくと考えています。そのための支援や活動を続けていきたいと考えています。

利根川：プログラミングを勉強することで、将来ITで価値を提供する仕事に就いたり、営業やマーケッターの仕事でも少し役立てることがあると思います。でも大事なのは、やってみて合うか、合わないと知ること。やったけど自分には合わないというのを早めに知ることはメリットになります。

一方で懸念しているのは、テクノロジーで豊かになっていく東京と、そうでない地方に国が分断されていくんじゃないかという危機感があります。そうならないように、テクノロジーの教育の場を全国に広めていきたいですね。

水野：ライフイズテックは「テクノロジーを知っている」ということを普及させるために活動していますが、プログラミング教育の本質というのはクリエイティビティを伸ばすことだと考えています。業務を効率化させたり、論理的思考を身に付けたり、テクノロジーを進化させるためのツールを作るにもクリエイティビティが必要です。

クリエイティブ力を伸ばすための教育や施策は今後ますます重要になっていきます。本質となるクリエイティビティやコミュニケーションを大事にしながらやっていきたいと思います。

HTML5 Experts.jp編集部の馬場です。毎回豪華ゲストをお呼びして、Webの現在と未来について語っていただく公開座談会企画「Webの未来を語ろう」シリーズ第3弾！

今回は検索エンジン最適化（SEO）の第一人者である辻正浩さんをお招きし、2018年のSEOを語る上で欠かせないことやWeb制作で気をつけたいポイント、「AI First」時代のSEOはどうなっていくのかなどを語っていただきました。

今回のゲスト

辻正浩さん（株式会社 so.la 代表取締役SEO）

Search Engine Optimizer。
1974年北海道生まれ。営業、広告制作、Web制作の経験の後、株式会社アイレップでSEOの専門家としての活動を開始。様々な業界・規模のWebサイトのSEOを担当する。 2011年10月に独立の後、株式会社so.laを設立。SEO専門家としてWebサービスやECサイト、企業サイトのSEOに取り組む。特に大規模サイトを得意とし日本有数の大規模サイトのSEOを多数担当している他、各地での講演にてSEOの啓蒙活動を行なっている。

SEOのエキスパート、辻さんの空前絶後な仕事術

白石：日本で検索される約5％は辻さんの顧客のサイトなのだそうですね。現在はお一人で13社のSEO支援をされているとのことですが、どうやってそれだけの仕事をこなされてるのか気になります。1日のスケジュールはどんなかんじで仕事されているんですか？

辻：だいたい規則的ですね。平日は朝8時か9時に起きて、昼くらいまではメールなどをチェックします。午後はお客様とのミーティングに出かけ、夕方帰ってきたらその日のうちの作業やメール対応などをしています。深夜0時くらいから翌日の作業の準備をして、4時か5時くらいに寝ます。

白石：えっ、朝起きる時間はそんなに早くないなと思ったら、夜中の4時とか5時まで起きて仕事してるんですか。遅くまで仕事をしすぎなんじゃ…。

辻：13社のお客様とは、月に1回か2回必ず1～2時間のミーティングを入れているので、平日の午後はほぼ埋まるんですね。そのミーティングのために、各社のSEOの分析や提案の準備で短くても5～6時間はかかります。翌日の準備をしているとどうしても朝5時くらいになっちゃうんですよ。

ツールも使っていますが、マンパワーでなんとかやってしまうので、同業のSEO業界の人に話をしてもまったく参考にならないって言われてます(笑)。

白石：クライアントワークやってる辻さんもすごいんですけど、仕事以外でも辻さんは検索結果を常に広い領域でウォッチしているイメージがあります。

辻：30万キーワードくらいは定期的にウォッチしてます。私が他社に勝っている点があるとすると、全部一人で見ていることですね。日頃の順位や流入の変化からサイト変更による変化を一人で全部見ていれば、傾向が把握できますから。

白石：辻さんを医療系サイト「WELQ」問題（※）で記憶している人も多いと思うのですが、このときの医療業界の動向はたまたま気づいたんですか？

（※「WELQ（ウェルク）」問題：DeNAが運営する医療情報のキュレーションメディア「WELQ」が、クラウドソーシングなどを使って記事を安く大量に作り、その記事が検索結果で上位表示されていた件。医療系の情報にも関わらず信頼度が低い、記事の制作過程で多数の著作権侵害が認められるなど、多くの批判を受けて現在サイトは停止中）

辻：医療・金融・法律関連といった深刻な情報の検索では、特殊なアルゴリズムが動いています。その中でも医療関連は動きが顕著ですので定期的に確認していました。医療を追っていればけば、その後の他業界がどういう動きになるか予想できますので。

例えば医療系なら一般的な薬や病名とか症状などのキーワードを、それぞれ数百づつ定期的に検索しておいて、上位表示されるサイトの傾向を見ていると面白いですね。動きが変わってきたときに、じゃあペットの病気だと同じような動きか？などとずらして比較するといろいろ見えてきて、興味深いです。

白石：すごいな…。そういった動きを調べているときは何かツールも使ってるんですか？

辻：データはツールを使って分析しています。ただちゃんと分析するときは、ツールだけではできないので、力業ですね(笑)。

白石：辻さんの大事にしているポリシーや哲学的な話も聞いてみたいです。WELQのときって「これは許せない！」という社会正義みたいな想いもあったんですか？

辻：あまり社会正義的なことはやりたいくないです(笑)。基本的に楽しい仕事しかしたくないですし、好きなサイトとか面白いサイトの仕事だけを受けています。そういうサイトだけに関わっていれば仕事も大変ではないですから。

ただ、自分の義務として検索に関わる問題提起をしていくべきとも思っています。SEOを行っている会社にとって、検索エンジンが取引先となることが多いので、おおっぴらに文句は言いづらい人が多いんですね。私は利害関係はありませんし、身軽な立場なのでいくつか話していると、いろんな人からの相談やタレコミがどんどん来るようになって、半分義務のようになってしまっているところはあります。

モバイルファーストの流れでSEOはどうなる？

白石：続いては、SEOの過去から現在までの大まかな流れと制作者向けのポイント、SEOの未来を聞いていきたいと思います。まず、モバイルファーストはGoogleのSEOにどういう影響を及ぼしているんでしょうか。

辻：2016年、2017年、2018年の今くらいまででいうと　モバイルファーストの影響は大きいと思います。Googleの仕様として大きな変化は、モバイルファーストインデックス（MFI：Mobile First Indexing）ですね。

（モバイルファーストインデックス：Googleがこれまで検索エンジンがPCサイトの内容をもとにコンテンツの質を評価していたのを、スマートフォンサイトを評価の主軸に評価し、インデックスするという方針転換のこと）

Googleはレスポンシブウェブデザインでやっているサイトについては、PCサイトのページとモバイルページのソースに違いはないので一切影響はないと言っています。レスポンシブ以外のところはどうかというと、同じURLで別のHTMLを出しているダイナミックサービングも、別のURLでPCとモバイルを対応しているサイトも、内容が同じなら影響はないと言っています。

（ダイナミックサービング：URLはPCサイトとスマホサイトで一緒だが、アクセスするデバイスによって見せるページやテンプレートを切り替える方式）

ただ、レスポンシブウェブデザイン以外では、Googleが見るページのデザインや動線が大幅に変わることになるわけですよね。おそらく経験がある方も多いと思いますが、コンテンツを変えずにデザインと導線を全部変える大幅なリニューアルをすると検索順位に大きな影響があるものです。

しかしGoogleはその影響がほぼないようにすると言っているんですよ。今までの経験上そうなるはずはないのですが、そう言い切るからには、Googleはいろいろな今までにない処理をしてくるんだろうなあと思っています。

本当にそうなればいいのですが、やはり大きな変化になるかもしれないとして、ウォッチしていく必要があると考えています。

白石：PCサイトしかないサイトはどうですか？

辻：モバイルファーストインデックスでも大きな変化はないはずです。ただ、昔からモバイル版を用意していないサイト、モバイルフレンドリーではないサイトは、モバイルからの検索では順位が大幅に落ちていますので、どうにかするべきでしょうが。

白石：スマホ用URLがあるサイトやスマホ用コンテンツが違うというサイトはいかがでしょう？

辻：そういうサイトはアノテーションなどを複雑に対応する必要があって難易度が高いですね。Googleはカンファレンスの質問などで「完璧に実装できた場合は問題ない」と回答してします。ただし「そういうサイトはめったにないし、だいたいみんなミスをする」とも言われていたそうですが。私なら早めにコンテンツの整理をお願いしますね。

このPC版とスマホ版という話は、サイトの規模によってはクロールの観点で複雑になることもあります。PC版とスマホ版でソースが違う巨大なサイトでは、PC版しかまともにクロールできていないところが多いです。

毎日数万とかページが増える巨大サイトは毎日数百万何千万とGooglebotがデータを取りに来て、Googleのためにサーバ負荷対応が必要なところも多いのですが、PC版とモバイル版の両方を取得するためには、さらに倍の負荷になってサーバ費用もかなり増えます。

そういう事情への配慮なのか、巨大なサイトではPC版を中心にクロールをかけて、スマホ版ページはパターン認識による推測ですましていることがあります。

巨大なサイトのクロールでは、かなり複雑な処理が行われているんです。モバイルファーストインデックスになるとそのあたりも変わるでしょうから、巨大なサイトではなにか特殊な変化が発生する可能性は十分にあるでしょうね。

白石：今後はモバイルクロールがメインになると？

辻：私がログを見られる巨大サイトの多くでは、PCクローラとモバイルクローラの割合が8：2くらいなんですが、今後は逆転させるそうなんです。巨大サイトではPCページは認識できていてモバイルページは認識できていないようなケースも多いので、データベースの処理も複雑になるんだろうなと。そのタイミングでは何かイレギュラーなことが起こるかもしれません。

Googleは問題ないといいますが、過去にない大規模な仕様変更ですので、どういう影響があるかはやはり分からないですね。

普通の規模のサイトや、レスポンシブウェブデザインのサイトは確かに問題は起きないと思いますが、そうではないところにとってはいろいろイレギュラーがあるかもという想定で注意して監視しておいたほうがいいと思います。

Webコンテンツの「正しさ」への流れ

白石：では、話題を変えて。最近はWebコンテンツの「正しさ」への流れがありますが、どうお考えですか？

辻：WELQ問題が端を発し、Googleは2017年12月6日にウェブマスター向け公式ブログで、日本語検索の結果について「医療や健康に関する検索結果の改善」を発表しました。医療や健康に関する部分はここで非常に大きな変化があったわけですが、この前後にGoogleはいろんなことをやっているんですよね。

明確に違法と言えないけど怪しいサイトや悪質なサイトの順位を露骨に落とした、と思える動きもありました。昨年末に逮捕者も出たようなフィッシングサイトへの対応も進んでいます。大きな社会問題になったことに対して積極的に対応するようになった、と思いますね。フェイクニュースなどインターネットへの信頼性が疑われるようになって、明らかに態度を変えたように思います。

白石：それまでのGoogleは「インターネットの自由」を優先していて、それは面白さでもありましたが…。「正しさ」が大事という方向に舵を切ったと？

辻：はい。情報の正確性を意識するようになったことはいわれています。「Googleは検閲はすべきでない」というポリシーとインターネットの自由を大切していることは確かです。Googleを含めたインターネット全体が自由だけでは問題があるという方向に流れています。いいことかはわかりませんが、どんどん加速化していますね。

白石：でも、人によって「正しさ」が違う情報っていっぱいあるじゃないですか。Googleがその「正しさ」を決めるのは、限られたことにしかできないんじゃないかなって思うんですけど。

辻：難しいですね。最近は癌について検索したら、国の医療機関などしかまともに出なくなりました。ただお医者さんの眉をひそめるような高額だったり、実績に乏しい微妙な治療方法の多くは違法ではないですよね。それらがGoogleの判断によって多くの人に知られづらくなったわけですよね。これはGoogleの検閲ともとれる行為かもしれませんが、それが受け入れられています。難しいことですよね。

個人的には、深刻な病気に悩む人が検索の情報で迷惑をかけられたという話をたくさん聞いてきたので、今の状態が悪いとはまったく思わないんです。インターネットの自由も大事だけど、その自由の中でも規制したほうがいいこともあります。ただ、これがどんどん拡大するようではまずいですよね。

白石：価値中立、道徳的に中立という言葉がありますが、Googleは今まではそこを頑張ってたんでしょうけど、あまりに誤った情報などを出してしまうのはまずいと考えたんでしょうね。ただ、Googleの一存で何が正しくて、何が間違っているのかという思想の部分を決めてしまうのはどうかという問題もありますね。

辻：本当にそう思います。ただこの問題、Googleは本当に慎重に考えていると思います。Googleの考え方は発表される声明だけではなくて、実際の順位の動きなどで大分理解できているつもりですが、今のGoogleでも表現の自由とかインターネットの自由の尊重とかは、過剰なほど慎重だと思います。

ただ、それでも対応を変えていかないと行けないほどインターネットは複雑になったということかなと思います。現状のGoogleには不安はないし、変なことはやらないと信じています。でも今後どう変わるかはわからないので、今後も動向は見ないといけないですね。

全てのサービスとGoogleが競合化する！？

白石：次のテーマ「Googleの競合化」ですが、これはどういう意味でしょうか？

辻：最近、Googleでグルメ関連の検索をすると一番上に地図が出ますよね。ユーザー評価もあるし、ローカルガイドにもなって、とても便利ですよね。あと飛行機の予約ができるGoogleフライトも、ホテルの予約もできるし、ユーザーには便利でいいサービスなんですが、これらによって奪われてしまったサービスも出てきます。

Googleマップではスマホを持ったユーザーの行動がオプトインで記録されていますが、そのあたりの独自データを激しく使い出すと、他のサービスはなかなか太刀打ちできないですよね。

白石：あらゆるサービスにGoogleが競合として参入していくわけですね。

辻：増えていることはたしかです。Googleが持てない価値を考えて作るしかないんですが、情報を集めて出すサービスは勝ち目がなかなかない厳しい状況になると思います。

Web制作におけるSEOのポイントは？

白石：ここからはWeb制作におけるSEOのポイントについて聞いていきたいと思います。マークアップなどで気をつけることとかありますか？

辻：昔は「<strong>をつけろ」とかありましたけど、最近は効かなくなりましたね。私もマークアップを変えろという指摘はほぼしなくなりました。普通にミスのないマークアップでWebサイトを作れば評価されるので、SEOのためにマークアップで何かするということが減ってしまったんですよね。

ただ、サイト設計については口を出さなくてはいけないことが、多くなってきました。Googleは公式に認めていませんが、どんなユーザーがどういうページを見ていていて、どこで離脱しているかなど、ユーザー行動を見ているんですね。

白石：まあ、肯定しにくいですよね。

辻：Googleは否定するけど、一般ユーザーがWebページ内でどういう行動をするかが検索結果に影響するようになってきました。その影響力はどんどん大きくなっています。

白石：昔は内部リンクを充実させるために、人間が踏まなさそうなリンクをフッターに大量に仕込んでたじゃないですか。あれはまだ有効ですか？

辻：2012年くらいから一切やらなくなりました。そういう人が使わないリンクをはずして順位がかわるか実験を何度もしてみたのですが、一切変わらなかったんです。それからはSEOだけの目的でリンクを張ることはあまりしなくなりましたね。

白石：クローラーのためにAタグを書いておくのはもう必要ないんですね。

辻：これからはユーザーが使いやすいページを作ることを優先した上で、どうやって検索に強くするかを考えることが有効になってきます。例えば、グローバルメニューとかカテゴリとか本来はユーザ動線として強いはずなのに、ニーズがない情報が並んでるサイトってあるじゃないですか。ユーザが好む動線に検索ニーズもある情報をまとめるとか、マークアップとかよりもユーザーの検索ニーズを意識したサイト作り、などが重要ですね。

白石：ユーザーにとって自然な導線をちゃんと作り込むようにしなさいということですね。

辻：はい、それがSEOの観点として大事になったということです。

白石：一般ユーザーはあまり気にしてないと思いますが、URLは未だに重要ですか？

辻：少なくとも日本国内ではURLの深さとかは、最近は関係なくなくなってきました。パラメータをつけるとどうこうとかありましたが、今のGoogleだけでいうなら認識するようになってきた。ただし、Google以外の検索エンジンは上手く認識できない場合が多いので、やるしかないんですが。

白石：コンテンツづくりについても聞いてみたいと思います。昔、辻さんがGoogleに好かれるための記事を書いてたじゃないですか。検索エンジンには好かれるキーワードを散りばめて、見出しをちゃんと書いて、先に結論があって、見出しの近くに重要キーワード置いてとか。

辻：それは今でもまだガリガリ効きます。SEOを考えたキーワードは大事ですね。ただし、キーワードを書かなくても、テーマによって検索ニーズがあるものはランキングが上がるという流れもあります。

白石：以前流行ったキーワードたくさん入れたSEO用の記事も効くのでしょうか。

辻：そういう何も考えてないSEO記事は大分効かなくなりましたね。Googleはユーザーを見出したということもあり、読み込んでくれる文章じゃないとユーザーは離脱するので効果はなくなっていくと思います。

白石：AMPのSEO観点は何かありますか？

辻：AMPということだけではなく、考えなくてはいけないことがあります。例えば、最近はパーマリンクの重要性がすごく高まっていると思います。3年前くらいはパーマリンクのURLを評価をするサービスは少なかったと思いますが、最近はスマートニュースやグノシーなど、評価付けする存在が増えてきました。

URL単位で評価をするサービスにとって、AMPのURLでシェアなどをされると本来の記事と価値を統合するのに時間がかかったり、されなかったりすることもあります。他にも様々なデメリットはありますが、表示スピードが上がるといったメリットもあるわけで、メリットデメリットを考えて判断するべきですね。

個人的には、ニュースなどAMPに対応すると表示枠が増えるジャンル以外は、まだ様子見をするべきだと思います。先に言いましたパーマネントリンクの問題も今後の仕様改定で解決されるようですし、AMP関連の仕様はまだまだ進化を続けています。対応の工数も大きいですし、大きな利益が見込めないならもう少し仕様が固まってからでいいのではないでしょうか。

パフォーマンス・スピードはSEOに影響しない！？

白石：パフォーマンススピードが高いサイトは評価するとGoogleが言ってますが、実際はどうでしょう？

辻：実はそれ勘違いなんですね。Googleのウェブマスターブログでは、極めて遅い体験を提供しているサイトだけを落とすと言っています。昔行った以前の実験によると、読み込み速度が25秒以上かかるサイトはだいたい順位が落ちました。

白石：辻さん、そんな実験もやってるんですね(笑)。

辻：はい！どれだけ速くしてもランキングが上がることはなく、遅いサイトが落ちます。ただ、スピードを上げることはユーザーの行動が良くなります。結果的に順位が高くなることはあります。

個人的な経験では、サーバーの速度がある程度早ければ、さらにサーバ環境を向上してもユーザー体験は目に見えて変わらないですよね。それだと順位も変わりません。ただ、速度の実測値は変わらなくてもCSSの配慮などでサクサク動いているような感覚にしたほうがランキングが上がるんですよね。

白石：ということは、本当の速度を見ているのではなく、Googleはユーザー体験の方を見ているということですね。

辻：はい、良いユーザー体験を提供すれば順位が上がります。勘違いしてはいけないのは、速度改善でユーザー行動を良くするのは素晴らしいことなんです。

白石：なるほど。ユーザーのためにやるのはいいことなのに、SEOのためにやるのは違うということですね。

白石：最後はネイティブアプリのようなUXをWebページでも提供することができるProgressive Web Apps（PWA）について。プッシュ通知がWebサイトでできたり、ホームスクリーンにアイコンが出てアプリをダウンロードしてもらえたら、以降はアプリで作ってもらえるとか、クロスプラットフォームで対応できるなど便利な機能がいろいろある上に、SEOにもいいということで盛り上がっています。

辻：Googleはアプリ内のユーザの行動はあまり把握できていませんよね。ユーザーが自社アプリに流れた結果、メインサイトのユーザ行動が減って検索順位が落ちる影響は明らかにあります。そういう観点ではPWAはアプリより良いと考えています。

白石：PWAが有望なのであれば、クロスプラットフォームでWebページからアプリ版も作れる。SEO効果もあるし、ゲーム仕様でなければ普通に作れるし、今後は全部PWAでいいんじゃないでしょうか。

辻：PWAのニーズは高まっていくでしょうね。逆に、アプリ開発しかできない開発者はPWAによって活躍の場が減っていくかもしれません。

「AI First」で変わるSEOの未来

白石：「AI First」という言葉をいままで使っていませんでしたが、未来の話もしたいですね。

辻：Googleが公式でも「AI First」と言うようになってきましたね。プロダクトの全てにAIを入れ出しているので、今後AIでいろんな判断がされるようになっていくのが一番影響されるところです。

白石：これまで、Googleがユーザー行動を見ているという話がたくさんありました。結局のところ、今までのクローラーが単純すぎたということで、普通の人間がページを見たときにいい印象を受けるかを判断をするようになる。人間の判断にどんどん近づいているということでしょうか。

辻：その通りだと思います。その状況でSEOを考えると、GoogleのAIに上質な餌をどう与えていくかを意識することが大事になっていきます。

白石：「餌付け」というのはユーザーに有益な情報を提供しようということですね。Googleに情報をあげるとAIが賢くなる。Googleはその先に何を作っていくのか考えちゃいますね。

辻：そうですね。その先に過剰な怖さを感じている話もよく聞きますが、「Google怖い」は「電気怖い」と同じような話かなとも思っています。Googleを恐れるときは正しく恐れるべきだと言っておきたいです。

白石：ただしく恐れろということですね。辻さんに大きな拍手をもって終わりにしたいと思います。ありがとうございました！

そこで今回はPC/スマホ向けにクリエイティブ業務を行っているデザイナーや、サイト・アプリ・イベントなどのプロジェクトでVRを使ってみたいと考えているディレクター向けに、マインドスケープアーキテクト・ひらやまともよ氏が「TECH PLAY CONFERENCE 2017」で語った、気軽に使えるVRの表現方法を紹介したい。

▲マインドスケープアーキテクト クリエイティブディレクター/デザイナー　ひらやま ともよ氏
グラフィックデザイナーとしてキャリアをスタートし、トヨタメディアサービス、DeNA、トランスコスモスなどの企業でデジタルコンテンツ企画、デザイン・ディレクションなど、前職のInstaVRではエバンジェリストと活躍。様々なOSでのアプリ開発、IoT、AR、VRを活用したビジネス構築、企画提案やUI設計を行っている。また、Techコミュニティのイベント運営にも参画し、VRクリエーターを増やすべく関連イベント運営やセッション登壇、講師活動も行う。

簡単にVR画像編集ができる全天周イメージ投影法

インターネットは文字の表示から始まり、写真・画像や動画、ついにVR(仮想現実)という360度の表現ができるようになった。ひらやま氏はこの表現のキャンバスが平面から360度になったことを、クリエイターとして使わないのはもったいないと考えた。

それは直視するだけの動画と比べ、まるでその場にいるかのような没入感のあるVRなら、よりコンテンツの世界観を実感してもらえるからだ。VRを使ったクリエイティブというと高機能なマシンや専門知識、コストが必要だと思われがちだが、Photoshopなどを活用したデザイナーならではのさまざまな“見せ方”があるという。

VR空間のしくみは大きく分けて、全天周イメージ投影(プリレンダリング)と、3DCG(リアルタイムレンダリング)の二つがある。3次元のイメージを常に高速でレンダリングしている3DCGは、主にゲーム制作などで使われることが多い。いろいろな表現ができるが、CGやゲームエンジンなどの専門知識やハイスペックなデバイスも必要となる。

一方、全天周イメージ投影はすでにプリレンダリングされたCGや撮影済みの画像や映像を使って仮想空間を作るので、基本的な画像や映像編集の知識・経験があれば3DCGに比べて学習コストは低い。あらかじめレンダリングされているので、リアルタイムで演算を行う必要がない分、メモリの消費が抑えられてWeb上での表示も速いというメリットもある。そこで、今回は全天周イメージ投影に絞って紹介していく。

全天周投影法では、エクイレクタングラー方式を使う。世界地図の投影法でも使われているもので、この投影方式を理解すれば簡単にVRコンテンツを作ることが可能だ。エクイレクタングラーの特性として画像中心の横線（地平線）に接する付近は正しく描画されるが、地平線から離れるにつれて、画像が歪んでしまう。

実際にTHETAで撮影された以下の画像を見てみよう。中心部分は綺麗に描画されるが、上下は歪んでいる。その歪みも柄だと目立つが、無地はわかりにくい。

例えば、地平線から離れた空や海・地面などは作りやすくなる。形のハッキリしているものを配置する場合、歪みにくい中央部に置く必要があるが、VR空間で見るとオブジェクトは思ったより大きく表示される。

上の方に配置すると頭が疲れやすく、下の方はうつむく動作を人はあまりしないので気づかれないことが多い。従って効果的に配置するためにも、小さめに画像中心を基本とした水平に配置することが望ましい。

以下のようなエクイレクタングラーの特性を理解すると、デザイン表現の幅が広がる。

• 画像の中心の横線は地平線となる
• メインのオブジェクトは画面中心に作成する
• ファーストビューで画面に切り取られるエリアを意識する
• 画像の上部と下部にオブジェクトを配置しない
• 配置オブジェクトは思ったより小さくて良い

エクイレクタングラーの特性を活かした全天周画像編集

画像の編集はPhotoshopで行うが、エクイレクタングラー形式の全天周画像・映像の360度視聴の検証を行うためのツールを活用する。PCであればGoPro VR PLAYER、スマートフォンであればジャイロでSingle/Dual表示も見れるTHETAアプリが便利だ。

実際に作ってみた画像がこちらだ。球体に壁画が立体的にレイアウトされているが、これは画像編集のみで作成しており、一切CGは使っていないという。

これらはPhotoshopで画像を作ることができる。まず、画像の中心に横線を引く。この中心がファーストビューになるので、最初に表示された時に目の前に見せたいものを作っていく。

右端と左端が円筒になるので、シークエンスするように写真をコピーなどして画像を合成していく。

上下は画像が歪んでしまうため、グラデーションで無地にする。

メインのオブジェクトを中心線の位置に置く。360度画像でも人間の目に最初に映る範囲は限られているので、ファーストビューを意識したほうが良く、画像や文字は小さくても問題ないとのこと。

ちなみに、画像内の地平線の位置をを上げたり下げたりすると、中心の自視点に対して周りの風景が上下し、見え方が変わる。地平線を下げると自分が高いところにいるようになり、上げると自分が落とし穴のような穴の中に落ちたようにも見える。

実際にVRを制作する場合は、酔いを起こさせないようにすることが大事。そのためには広範囲にコンテンツを置くのを避け、頭の動きが最低限になるようにレイアウトしたい。

特に上下の頭の振りは左右に振る場合より負荷がかかり酔いやすい。エリアをめいっぱい使わないで360度の意味はあるの？と考えがちだが、全体の世界観や没入感、空気感を表現することに360度見渡せるVRは有効なツールで意味はある。

その空間の中でユーザーが快適にコンテンツを楽しむためには見せたいオブジェクトのレイアウトする位置に留意する必要があると考える。実際、多くの人はコンテンツ内の真後ろを見ることはあまりせず、ファーストビューから離れるほど滞在時間は少なくなっている。

しかし、見る人がいることを考えて重要なものではないが、何か遊び心をあるものを置いておくと宝物を見つけたような気持ちになり、面白いかもしれない。それもVRならではの楽しみ方である。

特に画面の上下にオブジェクトをレイアウトすることを避けたいその他の理由として、全天周の球体へマッピングした時に歪んでしまうので避ける必要がある。

ただし、どうしても上下に置きたいものがある際は、Photoshopで歪みを気にせず全天周画像が作成できる「Flexify 2」というプラグインがあるので活用しよう。

▲「Flexify 2」キュービック方式からエクイレクタングラー方式に変換して出力し、上下を見せることができる。

VRの画面表示には全画面で見せるSingle Viewとヘッドマウントディスプレイ（以下、HMD）用のDual Viewがある。VRのコンテンツを作る際は、両方選べるように留意して作ったほうが良い。それぞれの特徴は以下の通りだ。

VRコンテンツの展開方法

SNSでのVRコンテンツの展開方法として代表的、かつお手軽なのは、YouTubeとFacebookだ。どちらもアップロードするだけで世界中のユーザーに簡単にリーチできる。YouTubeは動画のみのアップロードとなるが、ジャイロやSingle View/Dual Viewの表示も可能。Facebookは360度画像・動画ともにアップロード可能だが、ジャイロとSingle Viewでの視聴となる。インタラクションはつけられない。

WebはGoogleの無料フレームワーク「Google VR View」、mozillaが提供する無料フレームワーク「A-Frame」があり、どちらも数行のHTMLを書くだけでVRページができる。HTMLにあまり詳しくない人でもソースコードをコピペして埋め込むだけで簡単にVRコンテンツが作れる。回転させる動作やゲーム性を加えることも可能だ。

ソースコード例（A-Frame）

ソースコード例（Google VR View）

VRのオーサリングツールは無料から使える日本製のInstaVR、Krpanaが提供するPanotourがある。インターフェイスから操作でき、コードを見なくていいので直感的に作ることができる。

ゲームエンジンで代表的なのはUnity、Unreal Engine。無料のアセットやサンプルコードもあるので、ノンプログラマでも挑戦しやすい。

VRコンテンツの基本をまとめると、以下のようになる。

• 傾きのあるコンテンツは酔うのでNG
• 顔の縦運動より横運動をさせる
• 360度いっぱいにものを置かない
• ファーストビューを決める
• 配置オブジェクトは思ったより小さくて良い
• 全天周投影法では解像度を可能な限り上げることで没入感が増す

これらは、「酔わない、疲れない、極力頭を動かさない」ことにつながる。

Adobe Stockのような画像素材サイトで「エクイレクタングラー」と探すと素材が出てくるので、これらを上手く活用しながらVRコンテンツにチャレンジしてみよう。

今回はこのライブ配信アプリ「LIVEcommune」の開発チームにどんな技術や体制で開発しているのか、HTML5 Experts.jp白石俊平編集長が直撃インタビューしてきました！

DMMが映像配信のノウハウを活かしたライブ配信アプリ「LIVEcommune」をリリース！

白石：まずは、「LIVEcommune」がどのようなアプリなのか教えてください。

植田：今回開発したアプリ「LIVEcommune」は、配信者と視聴者を繋ぐ生配信アプリです。配信者をプレゼントで応援したり、嬉しいことや面白いことを「LIVEcommune」を通じて共有できます！一般ユーザーがスマホアプリのカメラで配信し、それをスマホユーザーが見てチャットなどでコミュニケーションをとって楽しむライブ配信アプリです。さらに、オンライン上で盛り上がっていただくスタンプ・アイテムを提供しています。

ライブ配信アプリはもうすでにレッドオーシャンになっており、日本だけでなく、中国をはじめるとするアジアでも盛り上がっている市場です。「LIVEcommune」はスピード感を持ってまずはユーザにとって絶対に必要な基本機能を厳選して開発を行いました。戦略的な機能はこれから実装をしていくといったところですが、動画広告やコンテンツ配信など各社マネタイズに工夫しているようです。

▲株式会社DMM.comラボ 植田隼人さん /「LIVEcommune」の開発リーダー、システムの取りまとめをしている

白石：この開発には何人くらい携わっているんですか？

植田：開発時はエンジニア、デザイナー、ディレクターなど、事業推進責任者含めると最大20人でした。今は10人ちょっとくらい。メンバー構成としてはリーダー、開発メンバー、サーバーサイド、iOSエンジニア、Androidエンジニア、ディレクター、デザイナーですね。

山本：iOSはXcodeと、当時の最新であるSwift 3.1で開発しました。あと、MVVMというアーキテクチャを取り入れて、RxSwiftというデータバインディングできるライブラリを使いました。RxSwiftはデータのやりとりから、コントローラーからモデルの間にビューモデルがあって、データのやり取りを簡単にすることができるライブラリです。

▲株式会社DMM.comラボ 山本修平さん / 「LIVEcommune」ユニットリーダー、iOSアプリエンジニアを務める

杉野：僕がエンジニアチームと大きく関わったのは、ぬるぬる動くスタンプのアニメーションのところです。はじめの要求としては3～4カ月くらいでiOS、Android、Webに書き出せるものを作ってほしいという要望もあり、デザイナーだけで完結できるAirbnbが出したライブラリでLottieというのを使いました。

After EffectsからiOS、Android、Webにそのまま反映できるので、ぬるぬる動くアニメーションが実現できました。データはJSON形式にしてアプリの方に送り、アニメを再生するのはRottyを使ってiOS、Androidに吐き出しています。Web版はこれから開発予定です。新しいことに挑戦したいという気持ちもあって、楽しかったですね。

▲株式会社DMM.comラボ 杉野さん /「LIVEcommune」のUIデザインとコンセプトメイキング、技術選定を担当

ロゴが変化するデザイン、ダイナミック・アイデンティティにチャレンジ

白石：デザインやロゴはどうでしたか？

杉野：今回良かったのは開発スタートしたときに、コンセプトやどういうアプリにしようというのがなかったんですね。搭載する機能だけが決まっていた。でも、コンセプトがあった方が機能を作る上での方向性も決めやすいと思ったので、デザインはコンセプトメイキングから入りました。こちらも開発と並行だったけど楽しかった。

コンセプトは「いつでもどこでも一体感を共有」「アプリを開くと新しい発見」「リアルタイムコミュニケーション」。この3つをロゴに落とし込みました。communeの語源は、親しく交わるとかコミュニティ、コミュニケーションからきています。

白石：丸くもこもこしているところがユーザーが交わっているところなんですね。

杉野：ライブアプリなので、再生を想起させるものを作りました。決めるのに2カ月くらいかかりました(笑)。イベントやメディアによってロゴの形や色が変化するダイナミック・アイデンティティという新しい概念も、これから取り入れようとしています。

▲ダイナミックアイデンティティ以外にもロゴの別案(パターン)も複数案出し、検討していったとのこと

WebのフレームワークはLaravel、データベースはAmazon Aurora、KVSはRedis

中里：僕はアプリの中でWebViewを使っているところや、API周りを担当しました。

アプリの中でユーザーが貯めたポイントを現金やiTunesカードなどの景品と交換できるのですが、そのユーザー認証や銀行口座などの入力、景品交換をする一連のページをWebViewを使って開発しています。

▲株式会社DMM.comラボ 中里勇輝さん /「LIVEcommune」Web/APIの開発を担当

白石：なぜ、WebViewで開発しようと思ったんですか？

中里：今後Web版が出たときに共有できるし、DMMの共通機能も使いやすかったからですね。

白石：APIはどの辺を使ったんでしょう。

中里：最初にフレームワークどうしようという話になったときに候補に挙がったのが、Laravel, CakePHP, FuelPHP。どれを採用してもチームの中で全員が使ったことがあるのがなかったし、どうせ学習コストがかかるのなら海外ではメジャーなフレームワークを使ってみたい。ということで、更新頻度も多く、海外ではメジャーだったのでLaravelを選びました。

白石：基本的にはPHPを使っているとのことですが、PHP7になって結構変わりました？

中里：メソッドを作る時に、引数などの型を完全に指定できるようになりましたね。指定したものと違うクラスが来たら、エラーになります。

あと、今回はAWS上に誰でも用意されたコマンドを打てば簡単に開発環境が作れる仕組みを作りました。これまで人によってバージョンが違うと動かなかったりエラーが出たりなど、ローカルで開発環境を作ってはまることが多かったんですが、今回はそういうことがなく、全員同じ開発環境がコマンド１発で作ることができました。

白石：どういうコマンドなんですか？

中里：AWS上でインスタンスを作って、ansibleでPHPやMySQLをインストールして設定するとAWS上に個人環境ができるというものです。ローカルでソースコードを書いて、シンクさせます。元を変えたら全員の環境がアップデートされます。新しいメンバーが参加しても、開発環境の準備で時間を取られることがなくなりました。

白石：反映が遅いということはなかった？

中里：ないですね。すぐに反映されます。

白石：データベースは何を使ってるんですか？

中里：AWSのAmazon Auroraと、KVSはRedisを利用しています。

データ通信のサーバーはSocket.IOで実装、言語はGoを採用

田仲：視聴中のチャットなどのデータ通信は、Socket.IOを利用しており、言語はGoを使用しています。たいていのものはSocket.IOで通信していますが、認証やセキュリティ的要件が必要なものは一回APIサーバーを挟んで通信していますね。

▲株式会社DMM.comラボ 田仲祐介さん /「LIVEcommune」配信サーバー、インフラ周りを担当

白石：重要な方はAPIを挟むんですね。

田仲：視聴者が画面をタップするとハートを送ることができるのですが、これらのデータの信頼性がそこまで重要でないものは速度を重視して、Socket.IOで完結させています。

植田：ちなみに去年くらいから、プラットフォーム上で使う言語はGoを採用するようになってきました。エンジニアが使いたい言語をチームで話し合って決めているので、自由度は高いです。

配信サーバーはWowzaで構築、チャット用サーバーはRedisで運用

白石：DMMさんがもともと自社で持っている映像配信のイメージが強いですが、そのプラットフォームを活用したのでしょうか。

植田：そうですね。社内のインフラチームにはサーバーの基礎の構築だけお願いしました。サーバーにAPIサーバーなどはの特定の情報は持たないようにして、AMIによる構築とで構築することによってオートスケーリングを組み合わせることによって、と組み合わせて障害が起きた際の復旧をインスタンスを自動化することができました。

ログはAWSのElastic SearchとKibanaを使っていて、チャット用のサーバーはRedisで運用しています。

田仲：配信サーバーの方はWowzaという製品を使って構築していて、そちらはAWSではなく、オンプレで構築しています。Wowzaは映像配信のデファクトスタンダードと言われているもので、一部モジュールの方はJavaで開発しています。

AWS Lambdaも少し使っているところがあるんですけど、そこはNode,Ruby,Pythonを使っています。

白石：田仲さんはオールラウンダーですね！配信サーバーだけはオンプレなんですか？

田仲：配信サーバーは要求されるスペックが高く、AWSで試算してみたらランニングコストがかなり高かったので、オンプレで構築しました。

田仲：当初WebRTCの採用も検討したんですが、少人数のグループでの映像配信には向いていると思うのですが、不特定多数に配信するこのサービスでは負荷対策の問題がありました。現在は、RTMPとHLSという技術を組み合わせて使用しています。

配信サーバーのリリース時は、使われていない配信サーバーから順に停止して入れ替えていくんですが、たいていの場合は人力で1台ずつリリースしていると聞きます。そこを自動化したことで、人的なコストとリリースにかかる時間を抑えることができました。

白石：配信はロードバランシングできるんですか？

田仲：視聴という意味では、配信サーバーからHLS形式でクラウドフロンドのCDNをはさんでます。配信のインプットはロードバランサーをはさむのは困難なことと、一度に大量のアクセスが来るものでもないので、振分ロジックをAPIサーバーの方で実装しました。それにより、配信負荷が均等になるように振分されます。

白石：大量のトラフィックが発生する視聴側はHLSで負荷分散をするわけですね。

ユーザー数に合わせたサーバーや開発体制の構築を

白石：最後に、今後サービスや開発の課題でチャレンジしていきたいことを聞かせてください。

田仲：当初予定していた視聴者数などの要件定義に耐えられるような構築したのですが、サービス開始直後ということもあり、まだそこまで利用されていない状態です。今後は利用状況に応じてスケーリングすることにより、ランニングコストの調整をしていきたいなと考えています。

植田：今回のプロジェクトでは、開発手法としてスクラム開発を取り入れました。社内でスクラム開発が増えてきているという背景もありますが、一番の理由は定期的に成果物を確認し合い、手戻りをなくしたいからです。

スクラム開発をやるにあたって、本やネットで調べて手探りでやってみましたが、わからないことがたくさんあったんですね。開発が一旦落ち着いてきたので、今度はもっと正規なスクラム開発をやってみようと思っています。

白石：ちなみにプロジェクト管理のツールは何を使ってるんですか？

杉野：JIRAを使っています。ドキュメント管理はConfluenceやGoogle Docsですね。あとはホワイトボードも活用しています。誰がどんな業務を抱えているのか、目で見てわかりやすいので。

山本：機能ドリブンで開発をしてきましたが、リリースしてわかったことや、自分たちが実際にユーザー側に立って使って感じたことを改善していきたいですね。

白石：DMMさんはエンジニアがチームで話し合って技術剪定をしているので、新しい技術にもチャレンジしやすい環境があって楽しそうですね。今日は興味深い話をいろいろ語っていただき、ありがとうございました！

Flashに造詣の深い池田泰延さん、沖良矢さん、轟啓介さんをゲストにお迎えし、Flashという技術の歴史、またFlashの役割を受け継ぐ新たな技術とは何なのか、とことん語り合っていただきました。

※「懐かしさ」には個人差があるので、「Flashはまだ懐かしむ段階じゃない」というツッコミもあるかもしれません。そこはどうかご笑覧ください！

今回のゲスト紹介

白石：今回ファシリテーターを務める、HTML5 Experts.jp編集長の白石俊平です。まずは皆さんのFlashとの関わりについて、自己紹介をお願いします。

池田：僕はFlash歴15年で、Flashに関する本も10冊書いています。沖さんと一緒に雑誌「Web Designing」の連載をしたり、Flashのオープンコミュニティでも活動していました。今日はなぜFlash Playerがこんなに追い込まれてしまったのか、その不満についてもぶちまけつつ、Flashが果たしてきた役割について語りたいです。

▲株式会社 ICS代表池田 泰延さん
フロントエンドのテクノロジーを紹介するサイト「ICS MEDIA」の編集長。個人実験サイト「ClockMaker Labs」やセミナー・書籍執筆などの活動を通して積極的にインタラクションデザインの情報共有に取り組んでいる。筑波大学 非常勤講師も務める。Flashに関する著書は10冊。「Papervison3D入門」「ActionScript3.0ライブラリ入門」「ProgressionによるFlashコンテンツ開発ガイドブック」「Stage3Dプログラミング」など。

沖：Flashはバージョン4.0から始めて、いまだに使っています。過去には、Adobe公式FlashユーザーグループF-siteの代表も務めていて、思い入れもいろいろあるんですが、ユーザーとして使っていた時間が長かったので、今日はユーザー視点で語りたいと思っています。

▲世路庵 インタラクションデザイナー　沖 良矢さん
1981年愛媛県生まれ。フリーランスとしてWebを中心としたテクニカルディレクション、フロントエンド開発、スマートフォンアプリ制作など様々なプロジェクトに参加する。雑誌『Web Designing』では、2009～2015年の6年間、FlashのTIPS連載を担当した。クリエイティブコミュニティDIST主宰、Adobe公式FlashユーザーグループF-site代表。

轟：僕も最初に触ったのは4.0からですね。ActionScriptが出たあたりで、アドビに入社したので、ユーザー年数としては短いかもしれません。今日は会場に猛者がたくさんいるのでインタラクティブに語っていきたいです。

▲アドビ システムズ 株式会社　Creative Cloud マーケティングマネージャー　轟 啓介さん
1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野で J2EE開発に携わるが、Adobe Flexとの衝撃的な出会いを機にリッチクライアントの世界へ。2008年4月、アドビ システムズ入社。アドビのWebツール全般のマーケティングを担当。オブジェクト指向が好きで、クラス設計やプログラミングをしている時はシアワセを感じるが、現在はプライベートプロジェクト用にやっている。デザインも好きで、デザインが適当な全てのものを憎んでいる。

白石：僕はFlashは軽く触ったことがあるくらいなので、皆さんの話を聞きながら、学ぶという立場で聞いていきたいと思います。

なぜFlashは流行ったか

白石：まずは、なぜFlashは流行ったのかについてお話を聞かせてください。

池田：Flashが盛り上がり始めたのは2000年前後ですね。

沖：個人的な認識ですが、Flashの盛り上がりには3回ピークがあったと思います。第一次ブームはまだモデムでアクセスしていた98～99年くらい。中村勇吾さんの「yugop.com」を代表とする軽量でダイナミックなアニメ―ションが話題になりました。Flash 4や5の時代ですね。

第二次ブームはFlash Player 6でビデオが再生できるようになった頃。Windows Media PlayerやReal Playerなどの重いプラグインを使わなくても再生できる便利さから、ビデオ再生プラットフォームとしていろんなデバイスに普及するきっかけになりました。

白石：その後、YouTubeやニコニコ動画が出てきたんでしたっけ。

沖：そうですね。当時はマシンパワーも非力だったし、軽量なFlash VideoがWebサイトにおける動画コンテンツの救世主になったかんじです。

轟：あと２ちゃんなどの独特の文化とFlashのシュールなコンテンツがすごくマッチしてた。そんな文化的な背景もFlashが盛り上がった理由の一つなんじゃないかと。

池田：この「まだ生きてる歴史的Flashページまとめ」は僕がまとめたものなんですが、togetterで昔のFlashページを懐かしむというものです。主に２ちゃんのFlash板に投稿されたものがまとまっています。吉野家ゴノレゴなんかはすごく人気がありましたね。

沖：第三次ブームはいわゆるフルFlashサイト。ビデオの表現力のあとにフィルターが入ったり、ActionScript 3.0で高度なスクリプティングができるようになって、Flashだけでリッチかつ情報量を備えたサイトを作れるようになった。表現力が広がったことで、広告関連や企業のコーポレートサイトなどもフルFlashサイトで作られるようになっていきました。

白石：その頃は僕でさえ、コーポレートサイトをFlashで作ってましたからねえ。

池田：当時はインタラクティブなものはだいたいFlashで作ってましたよね。今から考えると、SEO対策やアクセシビリティ的には最悪でした(笑)。

クリエイティブとFlash

白石：では、具体的にどんなクリエイティブがFlashの盛り上がりに影響を与えていったのか、お聞かせください。

池田：やっぱり広告なのかなと。特に、企業のスペシャルサイトでよく使われていました。例えば、モリサワの「FONTPARK 2.0（MORISAWA）」。ユーザーもフォントのパーツを自由に動かして、投稿できるというものです。

沖：Flashはこうしたユーザー・ジェネレイテッド・コンテンツという文化を流行らせた一因にもなっていますよね。

池田：こうしたコンテンツを見ているとわかるんですが、文字の細かいシズル感や効果音などの表現が凝縮されてるんですよね。クリエイターとして単純に憧れてました。

沖：THE ECO ZOO（ECODA!DOBUTSUEN）は3Dで作られていて、当時としてはかなり画期的なサイトでした。普通こうした3Dコンテンツを作るにはPapervision3Dなどを使うことが多いんですが、作者の城戸雅行（ROXIK）さんがすごいのは、フレームワークや仕組みの部分から全部自分で作ってしまうこと。おそらく、他のフレームワークで同じようなコンテンツを作ろうとしても、重くて動かせないと思います。

池田：当時はリアルタイムで3Dをたくさん動かすには性能的に難しかったので、プレレンダリングでボケた葉が舞う画像を先に作っておいて、そのぼかしたキャッシュを表示させるなど、相当研究されてましたね。

轟：Flashのコミュニティでは、そういった企業秘密になりそうな技術的なこともオープンに公開していたから、みんなで面白いものを作ろうぜという雰囲気になっていったんですよね。

沖：同じソフトを使っている人が集まって定期的に勉強会を開くのは、Flashのコミュニティが初めてだったんじゃないでしょうか。

池田：オープンソースの考え方が入ってきて、Flashのコミュニティが盛んになってきたのは、日本で言うとSpark projectが大きかったですね。当時高校生だった新藤愛大さんが、未踏ユースで採択されたことをきっかけに、著名クリエイターたちも参加するようになり、それまでバラバラに出ていたライブラリやフレームワークなどを集約して共有するようになった。ProgressionやFLARToolKitなんかも、このSpark projectで公開されました。

沖：まだGitHubがなかった時代に、今と同じことをやってたというのはすごいですよね。

池田：FLARToolKitは海外からの反響も大きかったですね。

白石：テレビのアニメや映画広告でもFlashが使われていたんですよね。

沖：そうですね。テレビや映画でもアニメーションツールとして使われるようになって、最近では湯浅政明監督の「夜は短し歩けよ乙女」、過去には「鷹の爪団」や「おしりかじり虫」なんかもそうですね。テレビのCG合成やPlayStationのゲームのUIなんかにも使われていました。

轟：ガラケーはFlash Liteを使ってましたね。

池田：Flashは極限まで軽量に作れるので、いろいろ工夫すれば30Kくらいまでファイルサイズを小さくできたんですよ。

沖：Flash Liteのノウハウは独特で職人技でしたよね。

池田：今では考えられないですけど、SWFファイルをサーバー側で書き換えるとか、マニアックなこともやってました。

白石：皆さんはFlashでどんなものを作っていたんですか？

沖：もう10年近く前になりますが、「地球と気象」という、気象に関する教育コンテンツの制作を担当しました。Flashはアニメーションでさまざまな事象を簡単に表現できるので、教育系の仕事には重宝していました。

池田：僕は、個人で作った作品やデモを「Clockmaker Labs」に載せています。流体表現や物理計算などを研究しながら作ってました。

沖：この時代は、小さい作品をたくさん作って自分のサイトで公開するという文化がありましたよね。今だとCodePenやQiitaで書くという人が多いんですけど。当時は素材を描くところから演出してプログラミングするところまで、全部一人で作れてしまうので、作家性が発揮しやすかったように思います。こうしたコンテンツが再生できなくなっていくのはさみしいですね。

Flashの拡がり、そして現在に至るまで

白石：続いては、ActionScript 3.0、コミュニティ、Flex、Adobe AIR、そしてiPhoneによって、Flashがどう拡がり、現在に至ってしまったのかを語っていただきたいと思います。

轟：僕はまさにAdobe Flashの頃から、ユーザーとして付き合い始めました。それまでJavaでサーバーサイドの開発をしてたんですが、業務アプリケーションとして使いたかったんですがちょっと不安定だったんです。ActionScript 3やオブジェクト指向が使えるようになって、開発環境もEclipseが使えるようになって、すごく面白くなってきた。Flexのコミュニティもかなり盛り上がってましたね。

ブラウザの互換性もあり、チーム開発もできそうということで、企業の業務系アプリケーションとしても導入のしやすさがあった。僕はその頃、サーバーサイドからフロントエンドに移ったんですが、とにかく楽しかったのを覚えています。

池田：Flash Playerのブラウザ互換性はとにかく高かったですね。MacでもWindowsでも同じように動いていた。Playerのバージョン検知も古いバージョンだと促してくれてましたね。

轟：アップデートすると、数カ月でユーザーの80％くらいはアップデートしてました。

池田：Flex Frameworkというのは、MXMLという言語で画面を生成するライブラリで、今で言うとReact.jsやAngular.jsに近い。保守性が高いため業務系アプリケーション、Rich Internet Application（RIA）なんかでよく使われていました。

轟：さっきの話にも出ていた昔のシズル感というか、ふわっとしたかんじの表現が業務アプリケーションにも入ってきた瞬間でした。ようやく業務系アプリにも作業を効率化させて、気持ちよく使おうという流れになってきた。

白石：ECMAScipt4が政治的な何かで消えたという話も聞きましたが。

池田：ActionScriptはECMASciptから派生してできたもの。ActionScript 3が出て、次はECMAScipt 4が出るというところで、いろいろあってストップしたんですよね。で、まったく別の枝からECMAScipt 5が出たんです。

白石：じゃあ、iPhoneやジョブズに関する想いはどうですか？

池田：iPhoneが最初に販売されたときはまだ性能が低かったので、Flash Playerが載らないのは仕方ないと思ってました。でも、iPadにFlash Playerが搭載されなかったのは大きかったですね。Adobe Flashのエバンジェリスト、Lee Brimelowは「Go screw yourself Apple」というブログを書いて批判していました。

轟：彼は腕にひらがなで「ふらっしゅ」ってタトゥーを入れるくらいFlashを愛していたんですよ。

池田：FlashのアプリをiPhoneアプリとして生成するサードパーティ製のツールも出たのですが、数カ月でそれもApple側が審査を通さなくなってしまった。AIRでActionScriptを変換して出せるパッケージャーも出たんですが、「Thoughts on Flash」という有名なタートルおじさんのセリフとともにすべて消えてしまいました。

轟：当時、FlashがなかなかiPhoneに載らないので、Adobe MAXという大きなイベントでAdobeのCTOがどうしたらiPhoneにFlashが載るかというのをブラックジョークなパロディ寸劇でやったんですよ。あれも刺激したんじゃないかなあ。

白石：FlashはそんなにAppleのビジネスを阻害したんでしょうか？

沖：Flash Playerはウェブブラウザ上で動いていたので、App Storeを経由しなくてもアプリを提供できてしまいます。当時、App Storeの仕組みを普及させようとしていたAppleとしては、良く思わなかったはずです。

白石：「ジョブズからの手紙」をエンガジェットさんが要約してくれていますね。

沖：バッテリーなんかは、Flashと同じものをHTML5 Canvasで作って載せたらよけい重くて動かなくなると思いますけどね。

白石：ということで、Androidでは動いていたけど徐々に動かなくなり、デスクトップのアプリケーションとなり、モバイルの隆盛とともに衰退していったということでしょうか。

池田：作る人がいなくなっていったというのも大きいですね。モバイルが中心になってきたにも関わらず、モバイルでは動かすことができず、新たな技術も生まれず、新規の作品を作る人がどんどんいなくなってしまった。

白石：Flexなんかはわりと早めの段階でApacheに寄贈していましたね。2011年の頃ですね。

池田：Adobeの決断は早かったですね。

轟：Flexに惚れて入社したので、辞めようかと思うくらいショックでした。

沖：業務アプリケーションにユーザービリティとかエンターテインメント性という概念が生まれたのは、Flash以降ですよね。

轟：Flashのコンソーシアムも立ち上がってました。企業の中にノウハウがないから、コンシューマ向けのコンテンツを作っている人たちから吸収しようといろんな化学反応が起きてましたね。

沖：Flashの勉強会は、全然違う分野の人たちが話せたのがすごくよかったですね。

今後のwebを占う

白石：池田さん、Flashの現状と今後はどうなっていくでしょう？

池田：2020年でFlash Playerのサポートは終了するんですが、Adobe AIRでiPhoneやAndroidアプリのデプロイが可能なので、Flashテクノロジーとしては継続していくと思います。サードパーティ製アプリ禁止が緩和されて、Adobe AIRは個人で開発するのには最適なプラットフォームなのですが、新たにFlashを学ぼうという人はほぼいないので、Flashがこれから盛り返していくことは、現実的に難しいんじゃないでしょうか。

白石：Flashで培われたシズル感を表現するツールのようなものが減っているような気がします。HTML5やモバイル、 WebGLといった技術の中で、今後のwebはどうなっていくでしょう。

沖：現時点のWebで何かを表現するには、HTML,CSS,JavaScriptが基本になるので、そこはしっかり抑えておきたいですね。表現力という意味ではWebGLに注目が集まっていますが、Flashのように誰でもすぐ使える技術かというと疑問は残ります。どうしても高度なプログラミングがベースとなるので、学習し始めてから成果が出るまでの時間がかかりすぎる面はあります。

池田：UnityからWebGLに書き出す機能もあるし、Unityの学習曲線もそろってきているので、コンテンツが増えないのかというのはトータルで見ていく必要があると思っています。WebGLでFlashコンテンツと同じようなものを作るとすごい容量になるので、WebGLでユーザーにストレスなく遊んでもらうにはキャッシュをうまく使うためにService Workerを覚えたほうがいいとか、周辺技術もいくつかおさえておかないといけない。ハードもスマートフォンやパソコンもあるからトータルにおさえなくてはいけない技術がたくさんある。学ぶものの多さが普及の妨げになっているんじゃないでしょうか。

轟：Adobe Edgeでいろんなアニメーションの方向性を細分化して模索してみたんですが、DOMアニメーションがきついので、結局CSSアニメーションとCanvasしか残さなかった。昔はFlash Playerのことだけ考えていればよかったのに、ブラウザやハードもたくさん増えたので、今のクリエイターは本当に大変だと思います。アドビも作り手がワクワクしながら簡単にできるツールを提供できるように頑張りますので、期待してください！

白石：では最後にひと言ずついただけますか。

池田：Flashがなぜ衰退したのかは、Flashの好き嫌いはともかく、理解しておいたほうがいいと思っています。政治的な理由やプロパガンダによって自分が使っていた技術が突然なくなってしまうこともあり得ます。Flashを教訓として、例えばHTMLが使えなくなったとしても今まで覚えた技術やノウハウを次の異なる技術でも活かしていきたいです。

沖：Flashは衰退してWeb標準のほうに傾いているけど、最近のブラウザでもFlash Player 6とか7くらいの表現はできるようになってきました。HTMLやJavaScriptだけを見るよりも、Flash時代のライブラリを振り返って学んでおくと幅が広がるし、過去の資産が生きることは結構ある。Webコンテンツやアプリ、モバイルゲームを作る人もFlash時代の本やコンテンツなんかで学んでほしいと思います。

轟：アドビの中の人として、Flashのマーケットをどうしようか悩んだんですね。でも、Flashツールじゃなくて手段であると考えた。その先のお客さんが楽しく、仕事がしやすくなるように、Flashの育てた文化やコミュニティをひっくるめて、マーケットに貢献したほうがいいなと。Flashのコミュニティのおかげで生まれたものもあるし、面白い仕事を作っている人は今も活躍している。若い人たちにもこういう面白い世界があったんだと伝えていきたいですね。

イベントの様子は「Creative Cloud 道場」もしくはYouTubeで公開されているので、興味がある方はぜひこちらからご覧ください！

LINEのニュースタブをReact.jsで開発しているフロントエンド、JavaとPerlで開発しているサーバーサイドのエンジニアの方々に、どんな開発技術や体制で開発しているのか、HTML5 Experts.jp白石俊平編集長が直撃インタビューしてきました！

今回お話を聞いた「LINE NEWS」開発チームの皆さん

LINE株式会社 前澤 春樹さん
Javaのサーバーサイド担当。200以上の媒体社様向け管理画面のコンテンツ入稿システム開発や、公式アカウントから発信されるメッセージ配信システムが主な担当。

LINE株式会社 森藤 賢司さん
Perlで作られている一般ユーザーから見えるニュースタブ、記事ページのバックエンドや社内向けの管理画面を担当。

LINE株式会社 大槻 友諒さん
フロントエンドエンジニア。WebViewでつくられているニュースタブの実装を担当している。React.jsなどの最新技術に触れることも多い。

LINE株式会社 富田 梓さん
マークアップエンジニア。デザイナーの作成したPSDをもとにしたCSSの設計と実装を行う。ニュースタブの他、PC/SPのWeb、キャンペーンページなどニュース関連全般を担当。

なぜ、ニュースタブはWebViewなの？

白石：今日は主にニュースタブにフォーカスしてお話を聞いていきますね。LINEのニュースタブは、なぜWebViewを使ったのでしょうか。

大槻：もともと記事ページはWebViewで作っていました。ニュースタブを作ろうという話になったときに、記事ページと同じ技術で作るほうが開発スピードも早いし、やりやすい。バージョンアップなども、そろえたほうがリリースしやすいということでWebViewで作ることになりました。

白石：じゃあ、ニュースタブ以外はネイティブでできているんですね。

大槻：そうです。トークやタイムラインなど、メインの機能はネイティブで実装されています。並んでるタブの中だと、ニュースタブだけがWebViewです。

白石：WebViewとネイティブといった複数の技術を混ぜるのって、大変だったんじゃないでしょうか。

大槻：ネイティブとWebView間でデータやイベントをやり取りする必要があって、そのための仕組みをアプリエンジニアと協力して実現しました。ユーザーにはLINEアプリの一部として見えるので、挙動やパフォーマンスに違和感が出ないようにするのが大変でした。

白石：WebViewだと、読み込みや表示が遅かったりしません？

大槻：いえ、結果的にそこまで遅いということはなかったです。Webだからの限界はありましたけど、WebViewだから特別つらいことはありませんでした。

LINEバイトやLINEギフトといったファミリーアプリにはすでにWebViewの技術が使われていて、知見があったことも役立ったんだと思います。

白石：React.jsを使っているとのことですが、SPA的な開発だとマークアップはそんなに必要じゃないと思うんですが、両方必要なのはどうしてなんでしょう。

富田：うちは分業体制をとっていて、僕と大槻さんが所属しているチームはフロントエンドを担当しています。案件によってJSとマークアップの両方を一人が担当することもありますが、newsでは規模の大きさもあって担当が分かれています。

デザインからHTMLを起こして、それを渡しているので、一般的に言われているReactを使うイメージとはちょっと違うかもしれません。

大槻：セマンティックなHTMLを書くとか、CSSを設計するといったところは完全にお任せしてします。一回組んだものを、パーツとして分解してJSXに落とし込んでいます。

白石：PCでも記事ページそのものは見られるんでしたっけ？

富田：記事ページは見られます。

白石：あ、レスポンシブ対応しているんですね。

富田：いえ、レスポンシブとかではなくて、PC専用に作っています。SNSなどでシェアされたURLはPCからでもアクセスできるため、PC用の記事ページを用意しています。

JavaとPerlでサーバー管理

白石：サーバーサイドでJavaとPerlという複数言語を使っているのはなぜですか？

森藤：もともとPerlで全体が作られていたのですが、社内の方針で最近はJavaで作ろうという流れになってきています。なので、最近のレポジトリとかはJavaで作ってます。まあ、歴史的背景です(笑)。

Perlはニュースタブと記事ページ、あと社内向けのCMSもPerlで作られています。

白石：へえ！CMSは自作なんですね。ちなみに、ReactはAPIを出すのに使ってるんですか？

森藤：はい、ニュースタブの部分は、全てAPIで実装されています。

白石：Reactでサーバーサイドレンダリングしているのでしょうか。

大槻：いえ、クライアント側でレンダリングしています。

APIでとってきたデータをローカルストレージにのせておいて、ネットワークがないところでも画面が真っ白にならないように工夫しています。

白石：JavaとPerlで分かれていますけど、システム間連携しているんですか？

森藤：データベースで連携しています。データベースはMySQLを使っています。

白石：MySQLをクラウド上で？

森藤：いえ、オンプレです。本番環境は、現在ほとんどオンプレのサーバーで動いていますが、最近構築したサーバーや開発環境はプライベートクラウドの「Verda」というサービスを使っています。

白石：えっ、どこかの製品を買うのではなく、自分たちで作ってるんですか。かっこいいですね。

森藤：DB周りはDBA（データベース管理者）のチームが運用しています。DBサーバーの構成は、マスター1台に参照やバックアップに使うスレーブが数台ある感じです。テキストで入稿するデータなので、データ容量が一気に増えて困ったとか、容量が足りなくなったという話も聞いたことがないですね。

白石：Javaで入稿システムを作っていらっしゃるんですよね。ScalaやKotlinなんかも使っているんでしょうか？

前澤：Javaだけです。最近のモダンな言語に比べると、やっぱりJavaは冗長というかすごいコード量を書かないといけないのは大変なんですが…。

白石：ぼくは昔Javaエンジニアだったのですごく気になるんですが、Javaのバージョンは何ですか？

前澤：Java 8です。

大槻：僕も前職では、エンタープライズ系のサービスをJavaで書いていました。その時はバージョンが古くて4でした。あと8をちょっと触ったくらい。当時はジェネリクスもアノテーションもなくて(笑)。

白石：僕はXML地獄でしたね(笑)。EclipseみたいなIDEとかは使ってますか？

前澤：Eclipseは使ってなくて、IntelliJ IDEAを使ってます。

React.jsを選択した背景は？

白石：フロントエンドのReact.jsはいつから使ってるんですか？

大槻：ニュースタブができてからなので、2017年2月からですね。

白石：苦労したこととかありますか？

大槻：React.jsだから苦労したことは特になかったんですが、どのライブラリにするかは結構検証しました。Vue.jsやRiot.jsなんかもいろいろ試してみたのですが、結局React.jsにしました。

Create React Appでベースを立ち上げた経緯もあって、最初の環境を整えるのはすごくスムーズでした。React.jsは結構書きやすくて、世の中で使われているアプリも多く、バージョンアップも早いし、安定していて信頼できました。

白石：なるほど。stateの管理とか、Reduxは使ってますか？

大槻：Reduxは最初は使おうと思ったのですが、意外と過剰なスペックがあってやめました。代わりにFlux Utilsを使っています。

足りない開発ツールはどんどん作る

白石：ほかにLINEさん独自の開発手法があれば教えてください。

大槻：フロントのアクセス解析はGoogle アナリティクスを使っているんですが、そのほかに社内で開発した「LINE Analytics」という解析ツールを使っています。JavaScriptのエラー部分もリアルタイムに収集できるので、リリース直後に増減を確認したりしています。

白石：LINEさんは結構社内で作る文化があるんですね。自分たちでも作るというのは、意思決定が必要だと思うんですが、どんなかんじで決めているんですか？

富田：その辺は結構自由にやらせてもらえる風土ですね。プロジェクトで使うツールだけでなく、たとえばメーラーやスケジュール管理といった社内システムについて内製する部署があります。既製品でもの足りなかったら、自分たちで作っちゃおうみたいな。

大槻：分業しているのでサーバーに触れること自体は少ないんですが、JSやCSSの配信ツールをフロントエンドチーム内で開発したりと、役割内で足りないものは作って配布させたりする人が多いですね。

サーバー側はCIも自前で作ってると聞きました。社内の承認フローがそれほどかたくないので、わりと気軽に自前で作ってます。

白石：CIもですか！Jenkinsとかを使わずに？

前澤：Perlでは内製のCIを使っていますが、JavaではJenkinsを使ってビルドしていて、ビルドした成果物をサーバーに配布するシステムは内製です。CDNのオリジンサーバーも自作してますね。

秒間2万のアクセスを捌くパフォーマンス

白石：パフォーマンスなんかもかなり気をつかっているんじゃないでしょうか。

森藤：はい。APIアクセスが秒間2万くらいのアクセスがあるので試行錯誤しています。APPサーバーの台数は約30台くらいなんですが。

森藤：去年の6月に高速化プロジェクトがあって、CDNを追加しました。CDNはAkamaiを使っています。クエリーをちゃんと書いてなかったりするとサービスが止まるので、SQLには気をつけてキャッシュに貯めるようにしていますね。

白石：フロントエンドのパフォーマンスで工夫した点はどうですか？

大槻：ニュースタブは縦に長いんですけど、DOMが増え過ぎるとメモリを食ってアプリがクラッシュしてしまう問題がありました。

iPhoneでは横スワイプでタブ移動できるので、左右のタブを予め描画している分よりDOMが多く、見えないDOMをいかに削除していくかなどの工夫をしています。

タスク管理・チーム間の共有ツールは？

白石：皆さんは所属する組織は違うとのことですが、「LINE NEWS」プロジェクトのタスク管理やチーム間の共有ツールはどうしていますか。

富田：ニュースチームのプロジェクトとして定例ミーティングをして、進捗管理しています。管理に使っているツールはJIRAですね。

白石：進め方はアジャイルですか？

富田：そんなにアジャイルぽくはないです。企画チームが20人くらいいて、案件ベースを作ってくれるので、早い段階で開発からもフィードバックしたり、企画と一緒に練ったりします。1週間のスプリント制でやっています。

白石：ニュースチームは全体で何人くらいいらっしゃるんですか？

前澤：企画や開発、制作、編集、アライアンス、モニタリング、PR・マーケティングなどを含めると、プロジェクトに関わっている人は100人を超えています。エンジニアは現在、バックエンドが8人、フロントエンドが4人です。

白石：大型プロジェクトですね。CIは自作されてるとのことでしたけど、DevOpsみたいな工夫ポイントはありますか？

前澤：これまでは五月雨で流動的だったけど、人が増えてきたので週1回のサイクルを整えたり、模索しているところです。

白石：ソースコードの管理やリリースのルールとかはどうでしょう。

森藤：ソースコードの管理はGitHubです。Perl側は最低2人レビュアーがいないとリリースやマージしちゃいけないことになっています。

急成長するサービスと開発体制に合った環境を構築

白石：最後に今後こうしたいという抱負や、チャレンジしたい目標を教えてください。

前澤：LINEのサービスが急速に成長して、エンジニアも増えているので、開発時期によってリポジトリやフレームワークの使い方も違ってきています。それを統一したいと思っているんですけど、結構大変そうです(笑)。

森藤：これまでのサーバーサイドはほとんどPerlだったんですけど、ここ数年みんなJavaを書くようになって、Perlを書くエンジニアが減ってきているんです。サーバー側をもっとJavaに置き換えていけたらと思ってます。

大槻：TypeScriptを導入も検討していきたいです。依存するライブラリの都合もあって、簡単ではないかもしれませんが。

富田：ニュースのプロジェクトが始まったのが2013年で、最近では更新が滞っているruby-sassやgrunt、compassといった古い環境に依存しており、日々の更新に忙しくてそういった根幹部分はなかなか手を入れることが難しかったんですが、最近のリリースで、タスクランナーに依存したコンパイルをやめたり、node-sassへの移行したりしました。

それに伴ってチームで使っている社内用のツールやsassのライブラリを更新しているので、今後も新しい技術についてそれらに生かせるか検証しつつ対応できればと思っています。

白石：LINEさんは独自の開発ツールをどんどんつくっていく行動力と技術力が素晴らしいですね。今日はいろいろ面白い話をありがとうございました！

LINEさんでは、9月28日(木) にエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2017」を開催するそうです。LINEの様々なサービスにおける技術領域でのチャレンジや開発体制などについて語られるとのことなので、興味のある方はぜひ参加してみてください。

5月23・24日の二日間に渡って開催された日本マイクロソフトの開発者向けカンファレンス「de:code 2017」。その中でも定員数をはるかにオーバーし、入場規制もかかった澤円さんのセッション「これからのエンジニアに必要な『マネジメント』の考え方」が興味深かったので、レポートしたいと思います。

マネジメントは「管理職」のことだけはない

エンジニアの世界では日常茶飯事で交わされている以下のセリフ。皆さんも聞き覚えがありませんか？

「これさ、なるはやでチャチャっと作ってよ」

「とりあえずいい感じに仕上げといて」

「なんかこれ、あんまり動かないよ」

実はこれ、澤さんいわく「マネジメントが欠けている状態」なのだとか。どんなマネジメントが欠けているのかというと…、

• なるはやでチャチャっと　→　スケジュールマネジメント
• とりあえずいい感じに　→　クオリティマネジメント
• あんまり動かない　→　リスクマネジメント

このように全ての出来事にはマネジメントがからんでいます。

マネジメントという言葉からは人事管理や人事評価といった「管理職」をイメージしがちですが、必ずしもそれだけではありません。仕事をする全ての人は、上記のようになんらかの形でマネジメントを「する側」の人であるのです。こうしたマネジメントをきちんと意識して仕事をすることが「エンジニアを救う」のだと澤さんは言います。

マネジメントという言葉は、もしドラ（※もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら）でピーター・F・ドラッカー氏とともにメジャーになりましたが、セッションではそのドラッガーの名言として澤さんが紹介したのがこちら。

テクノロジーで生活は便利になる。効率化するツールが出てくることによって、幸せになることもあれば、逆に振り回されることもある。ある人に都合のいいことは、ある人には都合が悪い場合もある。それは全てのマネジメントは常に「人」にあるからであり、エンジニアも結局は「人」だから。

「テクノロジーは人を幸せにするし、人の生活を豊かにするために存在するものですが、『Visual Studioはこういうことができます』『Windows 10にはこういう機能があります』というように、技術や製品の機能に人を合わせて説明してしまうと、だいたいうまくいかなくなります。主役は人であることを常に意識し、ユーザーサイドに立ち、主語を人にして人の立場をメインに話すとわかりやすくなります。そのために大事になってくるのは、最終的にはコミュニケーションです」

では、コミュニケーションをうまくするにはどうしたらいいのでしょうか。

「ここの色を変えて」「画面遷移を逆にしといて」

要求する側にしたら簡単にできそうに思えますが、その作業の裏側には数えきれないメソッドや作業が潜んでいたりします。なぜそう誤解してしまうのかというと、要求する側は自分の都合のいい状態で頭の中でイメージしてしまうからなのです。

「それを防ぐには、何が問題なのか、何が原因なのか、何がどう見えているのかを理解し、言語化して伝えることで、お互いの合意にもっていかなくてはいけません。しかし、日本人はそうしたマネジメントが根付いていません。どちらかと言えば、曖昧なコミュニケーションを好む傾向があります」

コンピュータの世界は、0と1のみ。「なる早でちゃちゃっと」では通じません。エンジニアがコーディングするとなれば、明確な仕様、要件定義が必要です。それを伝えるためにはわかりやすい言葉に置き換える必要があるのです。

シリコンバレーは“マインドセット”の聖地

ここで澤さんは、シリコンバレーに在住する友人の言葉を紹介。

「シリコンバレーは地名ではなく、マインドセット。マインドセットは空気を共有するのに必要不可欠」だという友人の言葉に、澤さんはすごく腹落ちしたそうです。

時間と空間を共有できる価値、カッティングエッジとパッション、優秀な頭脳はもちろんですが、マインドセットが共有されている場がシリコンバレーなのだと。

そして、このマインドセットが輸出され、最も息づいているところはインドだといいます。ただ勉強や仕事をして帰ってくるだけではなく、マインドセットを吸収し、帰国して起業する人が増え、インドはシリコンバレー化しているのだそうです。

「インド人は成長力が高くて問題解決能力が抜群であり、GoogleやMicrosoftをはじめとするグローバル企業でもインド人の優れた経営者が数多くいることがそれを証明しています」

当事者全員が「理解できる」のがマネジメント

実際にMicrosoftではどのように開発フローが進められているのか、マイクロソフトディべロプメントのトップ・安達理社長にヒアリングした話を紹介してくれました。

１）カスタマープロミス

まず最初に行うのは、カスタマーに対してどんな約束ができるのか、全員で合意すること。全員というところが大事　合意しないことに対して何かすると必ずエラーになる。

２）シナリオプランニング

具体的にどんなシーンでどんな使い方をするのかなどを考えてプランニングする。例えば「最高のエクスペリエンスとエンターテインメント機能を持つコンピュータを提供する」としたら、どんなシーンで使うのかといったことをペルソナを作りながら考えていく。

３）デリバラブル定義

実現できるかどうか　デリバリできるかどうかを検討する。

４）タスク設定

誰が何を担当するかを決めてタスク設定し、アジャイルで開発していく。

ポイントは、上の人が決めたことに対して言われた通りに開発するのではなく、みんなで合意して作っていくということ。実際の作業はこのように細分化されて開発が進んでいくといいます。

それぞれのタスクにはKPIが設定され、責任範囲や実行状況などを判断していきます。このKPI設定とタスク設定がきちんとしていないとプロジェクトはうまくいかないと澤さんは言い切ります。

「タスクは降ってくるものだという意識でいると仕事はできません。自分たちで定義して作っていくもの、権利だと考えるべきです。不得意なことは人に任せるという手もあるが、タスクを自分で定義することが大事。イノベーションは言われたことをやっているだけでは絶対に生まれません。それができていないのなら、提言してみる。それでも変わらないと思うのなら転職をしほうがいいくらい重要な権利なのです」

ちなみに、Microsoftではオーナーシップという言葉がよく使われるそうです。タスク設定した人がオーナーでボスで、責任はその人にある。だからオーナーシップをとるという考え方。案件を作った瞬間にその人は一番偉い立場となり、社内はリソース化します。たとえ社長であってもリソースの一部なので、必要であれば社長を動かすこともできるのだとか。

ただし、全てのボスには説明責任があります。構築までのステップから改変作業まで可視化して説明し、リスク、コスト、スケジュール、リソースをマネジメントする責任や、場合によっては交渉や提案する責任もあります。

「当事者全員が理解できることがマネジメント。説明責任を果たすためには、言語化が必要です。技術的に詳しいことは武器ですが、それに説明スキルを持つエンジニアはさらに無敵。論理的かつ簡単に説明する能力を磨くべきだと思います。その技術や製品に対して何も知らない人に説明するといい訓練になります」

自分で案件を生み出しマネジメントするのであれば、時間も人のリソース、働く場所も自由に選べるメリットがあります。自由と責任のバランスは大事なポイントであり、責任を果たせば自由が手に入る。責任を果たせれば、さらにもっと大きな責任を任されるようになり、世の中に貢献する場が増えるでしょう。

▲通路もステージ前も受講者で埋まっていた澤さんのセッション会場

最後にシリコンバレーの友人が教えてくれたこととして、以下の3つを挙げました。

• クリエイティブであること
• リーダーシップを発揮すること
• 起業家精神をもつこと

「AIやロボットが発達していったとしても、この3つは機械にはできないこと。そうであってほしい、そうでなくてはいけない。最前線で仕事をしているのに、置き換えられるなんてもったいない、つまらないですよね。皆さんも組織の中でも起業家精神を持ちつつ、リーダーシップを発揮してクリエイティブなことをしたいと思っている人は多いはず。
僕も文系の大学でしたが、ITは大きなものを生み出せるし、世の中を変えることができるんじゃないかと思って、IT企業に入ったんです」

ITは、人の幸せを創るために存在しています。そう信じることがマネジメントの神髄であり、ITと触れていれば、仕事のやり方も変わってきます。

「どうやったら人を幸せにできるテクノロジーを生み出せるかを考える、人がどう幸せを感じるのか見てみることは本当に大事なことです。ステキな未来を一緒に創っていくために我々はここにいます。創る権利、パワー、能力、理解など、もし足りてないものがあれば、私たちからもピックアップしてください」

そんなエモーショナルなメッセージでセッションは終了。50分間があっという間でした。澤さんのセッションはMicrosoftの動画チャンネルchannel9で公開されるそうなので、動画で見たいという方はぜひチェックしてみてください。

▲セッション前の澤さん自撮りショットから拝借。参加者の皆さん、嬉しそうですね

ゲストの皆さんたちの思い出とともに振り返り、ただただ懐かしもうという企画です。
「懐かしさ」には個人差があるので、「その技術はまだ懐かしむ段階じゃない」という技術も含まれているかもしれません。そこはどうかご笑覧ください！

豪華なゲストの皆さんはこちら！

“風呂芸人” 増井雄一郎さん

大学時代に起業し、Webサイト制作などを行う傍ら、PukiWikiなどのオープンソース開発にも積極的に参加。2008年に渡米し、iPhone向け写真共有アプリPhotoShareをリリース。2010年に帰国し、アプリSDK『Titanium Mobile』の伝道師として活動。2012年9月に退職、株式会社FrogApps(現 ミイル株式会社)を設立しiOS/Android向けにミイルをリリース。
現在は2013年に起業した株式会社トレタにてCTO。個人活動としてMobiRuby, wri.pe, Kitayonを作成。趣味はお風呂でコーディング。

“老害王” 古籏一浩さん

来月出版される「みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作」は61冊目の著書。本の執筆以外にも4K映像など、いろいろ手がけている。詳しくはこちらのWebサイト「OPEN SPACE」をどうぞ！Twitterのプロフィールによると、「古くはMZ-700な人。途中はDTPな人。その後JavaScriptな人。次は映像とか。その後は小売業」とのこと。遠方在住のため、今回はオンラインでの参加。

　　

“デスノート” あんどうやすしさん

Google Developers Expert界のジェロニモ。航空工学科を修了後、訳あって畑の違う業界に行くも一年半で退社。その後、7年ほどSI企業の下請け業務に従事したが、いろいろ辛くなりイギリスに1年ほど留学。以降は主にB2C企業を転々とし、現在は株式会社カブクで主にThree.jsを雰囲気で駆使してそれっぽいものを開発中。二つ名はGoogle Waveをデスノートしたことによる。

モデレーター HTML5 Experts.jp編集長 白石俊平

株式会社オープンウェブ・テクノロジー代表取締役。ITエンジニア向けニュースキュレーションサービス「TechFeed」の開発と運用を行う。 日本最大級のHTML5開発者コミュニティ「html5j」ファウンダーを務め、Web先端技術の啓蒙、発展に尽力。Google社公認Developer Expert (HTML5)、Microsoft社公認Most Valuable Professional (IE)を歴任。著書に「HTML5&API入門」、「Google Gearsスタートガイド」、監訳に「実践jQuery Mobile」など。

はじめてWebと関わったきっかけは？

白石：まずは、皆さんがWebと最初に関わったきっかけから聞かせてください。

増井：僕が最初にWebを触ったのは、大学生になったばかりの1994年頃。北大の研究室にインターネットにつながっているパソコンがあって、世界の情報を見ることができるという記事を新聞で見つけて、その新聞社に電話をかけたんですよね。連絡先を聞いて、研究室に行って見せてもらったのが最初ですね。

大学は文系だったけど、パソコン通信にはまってました。その当時から20年間、Webに丸一日つながなかった日は一度もないんじゃないかってくらい、Webにどっぷりな生活を続けてます。

白石：古籏さんは「JavaScriptポケットリファレンス」とか、死ぬほど本を書かれていて、Webをやっている人なら、一度は古籏さんの「OPEN SPACE」とか見たことがあるんじゃないかな。僕も大変お世話になりました。

古籏：今はもう役に立たないけどね。老害王ですから(笑)。僕はNIFTY-Serve（※）でパソコン通信をしていたんだけど、データが送れなかったので、インターネットを始めたのが最初のきっかけです。

※NIFTY-Serve（ニフティサーブ）：1987～2006年までニフティが運営していたパソコン通信サービス

白石：それっていつくらいのことですか？

古籏：1996年1月ですね。当時、Mosaic（※）よりも先にNetscapeを友だちに見せてもらって、画面がモザイク状に見えるからMosaicっていうんだねって会話をした記憶があります。なんでWeb系にいったのかというと、ゲームを作るために会社を辞めたのになかなか作る手段がなくて、手近なWeb系に走ったんですよ。JavaScriptを学んだのもゲームを作るための手段の一つでした。

※Mosaic（モザイク）：NCSAが開発したWebブラウザ

白石：古籏さんが、ゲームを作るために会社を辞めてたのは知りませんでした(笑)。ちなみに古籏さんが本を書くのが超絶早いんです。最新の書籍「みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作」は61冊目の著書だそうです。

そういえば、古籏さんがオンラインでもイベントに登壇されるのってレア感ありますよね。お仕事の関係でなかなかこっちに来れないから…って、本業のこと言っていいんでしたっけ？

古籏：はい、長野で配達業をしてるんで、なかなかそちらには行けないんですよ(笑)。

あんどう：僕もWebに関わったのは、大学の研究室に入ってからですね。20年くらい前かな。初めてプログラミングしたのはJavaScriptで、マインスイーパー（※）を作ったのが最初です。航空工学科卒業して全然違う畑の仕事したんだけど、合わなくてすぐ辞めて、SI企業の下請けでVBで作られたものをブラウザで動かすみたいな、つらい仕事してました。ここ10年くらいはBtoCの仕事してます。

※マインスイーパー：1980年代に発明された、地雷原から地雷を取り除コンピュータゲーム。

白石：プロフィールに「二つ名はGoogle Waveをデスノートしたことによる」ってありますけど。

あんどう：前に及川さんの記事で、取り組んだ技術はだいたいdeprecateされるデスノートみたいな人って書かれてたので、使ってみました。Google Waveは2010年に本を書いたら、出版の2週間前にこれから書店に並びますよってタイミングでサービスが終了したんです。本が2500部くらい刷り上がっていたのに…。そのことがネットで話題になって。

増井：あの本は売れたんですか？

あんどう：こわくて聞いてないです。

古籏：でも、本が出たときはまだサービスやってたじゃないですか。

あんどう：まあ、今なら聞きたいですけどね。編集者さんが刷り上がった本を会社に持ってきてくれたんですけど、気落ちしてるんじゃないかって心配して、菓子折りと一緒に持ってきましたから。

白石：僕はWebと関わったのはすごく遅くて、2000年代なんです。就職した2001年からJavaプログラマとして、Java ServletとかJ2EEとか使ってました。2007年に独立してWebのフリーライターとかやってて、Web2.0ブームの時代は記事や本を書いてましたね。

ということで、豪華なゲストと一緒に、1990年代と2000年代のWebを懐かしみましょう！

【90年代】当時、何してた？

白石：JPNICのインターネット歴史年表を見ながら、振り返っていきましょう。90年代後半くらいからいきますか。皆さん、90年代って何してました？

増井：僕は高校生のときからプログラミングやってました。初めてインターネットに触ったのはNIFTY-SERVEのTELNETサービスで、英語も分からないのにGopher（※）とか触ってました。

※Gopher：ミネソタ大学が開発したテキストベースの情報検索システム

白石：ゴーファー？ゴーファーって何ですか。僕、昔のことあんまり知らなくて。

増井：World Wide Web（略名：WWW）よりもっと前のプロトコルですね。NiftyのTelnet Gatewayでつないで、国立がんセンターに入ったマシン経由で、Gopherや別のサーバーのテキストブラウザが見れたので、パソコン通信とかしてました。94年頃かな。

僕は当時、国立がんセンターと理研をよく使ってました。あとはTelnetでチャットサーバーに接続するとかもよくやりましたね。

白石：Webブラウザに最初にさわったのはいつくらい？

増井：94年か95年くらいですね。さっき言ったけど、たぶん北海道大学でMosaicをさわったのが最初じゃないかな。アメリカの大学の先進的な研究所などの情報がちょっと見れたくらいですけど。

TCP/IPのスタックをパソコンに入れるのも大変でしたね。Trumpet（※）とか使ってました。

※Trumpet Winsock：Windows 3.1で、インターネットに接続するためのソフトウエア

白石：全然何いってるのかわかんない(笑)。

増井：Windows 95でTCP/IPが標準装備されたんですよ。Windows 3.1はホント大変でした。

あんどう：僕はWindows 3.1から使ってましたけど、なんも苦労してないですね。あんまり記憶ない。

増井：Windows 95になって画期的に良くなって感動しましたよ。

古籏：Windows 95、まだ持ってるよ！（と、パッケージを見せる）

増井：Windows 95は並んで買いましたねえ。そこでWindowsのビールとガムもらいました(笑)。

古籏：未開封のIE 3.0もあるよ！

全員：おおおおーすごい！

白石：今回は懐テク・ブラウザ編なので、ブラウザ周辺を中心に懐かしんでいこうと思います。

増井：僕が覚えてるのは、IEは3（Internet Explorer 3）からかな。

白石：古籏さんもそうですか？

古籏：いや…、僕は自作でしたから。

白石：えっ、自作って何を？？

古籏：MZ-2861というマシンがあって、RS-232C経由でもってきてテキストブラウザを自作してました。Software Designの2月号でMZ-2861の特集があったんですけど、あのマシンは僕のです(笑)。

MZ-2861のHTML Viewer (BASIC)でてきました。多少文字化けしてますが（これは仕方ない。mzと文字コードが違うから）、こんな具合でした。

1000 ' 1010 ' HTML viewer for MZ-2861 1020 ' Presented By OpenSpace/KaZuhiro FuRuhata 1030 ' 1040 on error goto ERR 1050 def int A-Z 1060 dim TXT$(1024) :' Max EDITOR line 1070 dim JUSTIFY(1024) :' ð¦Úû­íÃæâu (0=left,1=center) 1080 dim HLINE(1024) :' Hair Line (0=none,1=ON) 1090 dim STYLE$(1024):' STYLE (BOLD=bit0,ITALIC=bit1,UnderLine=bit2) 1100 dim LINK$(1024):' A HREF link Address 1110 dim LINK_X(1024):' A HREF link point of x coordinate 1120 dim LINK_Y(1024):' A HREF link point of y coordinate 1130 dim CSRX(1024):' Link Cursor X 1140 dim CSRY(1024):' Link Cursor Y 1150 dim CSR$(1024):' Link Cursor Link Address 1160 ERM$="MZ2500" 1170 cblock 0 1180 *ERR_MACHINE 1190 MACHINE$=ERM$ 1200 gosub *SET_SCREEN 1202 *RELOAD0 1210 gosub *GET_FILENAME 1220 *RELOAD 1230 gosub *ANALYZE 1240 for I=ML to ML+24:TXT$(I)="":next 1250 gosub *MENU 1260 goto *RELOAD 1270 ' 1280 ' žöæ­í¶ÅÉœÅÈ 1290 ' 1300 *SET_SCREEN 1310 init "crt2:640,400,16" 1320 init "crt1:80,25,1,0" 1330 cls 3 1340 BGCOLOR=1:LTX=-5 1350 ' 1360 ' °ª°j°·ª[­íð`ž 1370 ' 1380 *DRAW_MENU 1390 line (0,0)-(639,399),1,BF 1400 line (0,0)-(639,316-1),7,BF 1410 line (0,316-1)-(639,316-1),0 1420 locate 0,0:print "TITLE:";:color 5:print left$(TITLE$,70);:color 7 1430 locate 0,1:print " URL:";left$(URL$,70); 1440 cflash 1:locate 0,2:print "now loading...";:cflash 0 1450 return 1460 ' 1470 ' °t°@°C°Ñö¹­íãŸ÷ê 1480 ' 1490 *GET_FILENAME 1500 locate 0,2:print spc(79); 1510 locate 0,2:input "FILENAME:";FILENAME$ 1520 if right$(FILENAME$,4)<>".htm" then FILENAME$=FILENAME$+".htm" 1530 URL$="http:"+FILENAME$ 1540 return 1550 ' 1560 ' HTML­íÅÝÆê 1570 ' 1580 *ANALYZE 1590 '----------- Auto File Type Check -------------- 1600 if left$(URL$,5)<>"http:" then return 1610 open "i",#1,FILENAME$ 1620 line input #1,PARA$ 1630 gosub *GET_CASE 1640 FILETYPE$="HTML" 1650 if left$(A$,6)

※MZ-2861：シャープのMZシリーズに属する1987年に発売された16ビットパーソナルコンピュータ

【90年代】初めてWeb向けに書いたCGIは？

白石：じゃあ、時系列で振り返っていきましょうか。93年はMosaicとHTMLバージョン1.0が公開されてますね。ということは、93年がWebのスタート地点ということでしょうか。

94年は、Yahoo!誕生とWebCrawlerが稼働開始。NIFTY-Serveがインターネットとの接続サービスを開始して、telnetが接続できるようになり、ダイヤルアップも始まったと。

増井：amazon.comも創業してる！この時にネット通販やろうとするなんてすごいなあ。

白石：94年12月にNetscape（Netscape Navigator）も公開してますね。10月にW3C設立かあ。

増井：Netscapeもこの頃はまだCD-ROMで配布してましたね。ソフトウェアも有償で販売してた。ところで、初めにWeb向けに書いたCGIって何ですか？

あんどう：適当にカウンターとか掲示板のCGI拾ってました。

白石：羽田野太巳さんもfutomi’s CGI CafeでPerlのスクリプトCGI紹介してましたね。CGIとかPerlっていつ誕生したんでしたっけ。

古籏：Perlは80年代ですよ。

増井：僕はPHP/FIで97年くらいから使ってました。ちょうどその頃に日本語パッチが出た頃です。

白石：95年にamazon.comがサービス開始。Internet Explorer（IE）より前にサービス開始しているんですね。

増井：この頃からIPv6（※）の規格策定がうんぬんとか、議論してたんだなあ。

※IPv6：IPアドレス枯渇対策として登場したInternet Protocolの一種

古籏：たしかIEはそれまで違う名前だったはず。Spyglassだったかな。

増井：ああ、たしか買収したんですよね。Mosaicをもとに開発されたんだけど、Microsoftが買収してレンタリングエンジンだけ書き直したっていう。やばい、このままだと90年代前半だけで座談会終わっちゃう。

白石：ですね(笑)。じゃあ、96年！うわーICQ（※）だって。懐かしい。

※ICQ：Windowsベースのインスタントメッセンジャー：I seek you

増井：僕、OCNのエコノミーに月2～3万円払って入ってました。この頃はみんなテレホーダイ使ってて、夜23時くらいからWebの世界が始まってた。僕は学生だったんですけど、ネットが遅いのが嫌で、専用線引いてました。

【90年代】黒歴史ありますか？

白石：まだ全然テックな話が出てないですが、97年にはGoogle検索が登場してますね。

増井：僕の黒歴史なので出したくなかったんですけど、90年代後半くらいに作ってた僕のHPがまだWebアーカイブスに残ってるので、ちょっとだけお見せします。大学の研究室のページで、昔から技術の話はここで書いてて、メーリングリストとかチャットルームとかも作ってました。

自分でチャットスクリプトを作って、人ごとに色を変えられたりとか、かなり凝ったCGIをPealで書いてたんですよね。IE3とNetscapeで動きますって、ただし書きも書いてます。ゲストブックも自分で作ってました。ちなみにこの頃、まだ本名でやってました(笑)。
音楽関係のファンページも作ってたんで、いろんな人と仲良くなりました。いまだに付き合いがある人もいます。自分でWebサーバーも作ってたなあ。

97年からはPHPを使ってて、CGI関連のアルバイトもしてました。CGIのカスタマイズをしてほしいというかんじの。

白石：あんどうさんと古籏さんは、黒歴史ありますか？

あんどう：僕が昔作ったマインスイーパーは探したけど、もう見つからなかったです。

古籏：僕はWebアーカイブスじゃなくて、ほぼ全部残してある。作ったものを全部残すという方針なので、30年くらい前に作ったゲームのコードとかも残ってます。PDFにして売ってるのもあります。バイナリ込でね。

あんどう：そのソースコードを見て、みんなキーボード打つってかんじなんですかね。

古籏：いや、自分が作ったもののソースコードをPDFにしてました。手書きです。昔は紙に書いてから、それを入れてたので。

白石：98年はGoogle法人化、ICANN (The Internet Corporation for Assigned Names and Numbers)が設立。99年はMelissaウイルス流行、Napsterがサービスインしてますね。２ちゃんねる開設も99年。思ったよりも最近に出たサイトなんですね。

【90年代】Java Applet、Flash…懐かしの技術キーワード

増井：90年代後半の技術キーワードで忘れちゃいけないのが、Java Applet（※）とかFlash、DynamicHTMLですよね。Directorとかもありました。

※Java Applet：Webブラウザに読み込で実行するJavaのアプリケーションの一形態

白石：Directorって何ですか？ShockwaveやFlashと何が違うんでしょう。

増井：Directorはマルチメディアで、ShockwaveはFlashとDirectorの再生用プレイヤーです。この中でもFlashは結構長生きしていますよね。

白石：90年代の技術トピックで一番ホットだったのって、第一次ブラウザ戦争だったと思うんですけど。実際どんな雰囲気だったんですか？

増井：コードを書いている身からすると、互換性が低かった。このタグはIEでしか表示されないとか、プロパティでタグを指定するとどっちかではなぜか文字化けするとかよくあった。Compatible出してるところも多かった。

白石：昔はよくHPに「このサイトはInternet Explorer ＊.＊以上で見てください」とかって書かれてましたね。そういえば、Mozillaっていう名前が使われ出したのっていつくらいですか？

増井：Netscapeが最初ですね。NetscapeのコードネームがMozillaだったと思います。

古籏：たしか最初はMosaicscapeにしようとしたら、登録商標でダメでNetscapeになったんですよ。

白石：で、Netscapeが勢いを伸ばしていたら、Microsoftが対策を講じてきて、97年くらいからブラウザ戦争になるわけですね。

古籏さんは、懐かしい技術にIE3.0を挙げてましたけど、何か思い入れがあるんですか？

古籏：思い入れというか、IE3.0だけJavaScriptでローカル変数とグローバル変数のvar定義が逆だったんですよ。当時Netscapeで動いてたグローバル変数が動かないので、調べてみたら扱いが逆だったことがわかって。解決策としては、全部グローバル変数で書けば動くと。

増井：それ、最悪だー(笑)。

古籏：もっと最悪だったのは、数カ月後にIEがバージョンアップされてNetscapeに合わせたから、直っちゃったことなんですよ。

白石：古籏さんは今回あだ名を老害王にしてましたけど、そういうときに全部グローバル変数で書いたことで、コードをたたかれたからですか？

古籏：そうねえ。一番最初にJavaScriptの本を書いたときに、感想のメールが来たんですよ。いいことが書いてあるのかなって期待して開けたら「あなた方の本は買いません」っていうメッセージだったんです。老害っていうか、最初からダメだった(笑)。

白石：なるほど(笑)。あと、Server Side Includeって何でしたっけ？聞いたことはあるんだけど…。

古籏：サーバーが重くなっちゃうから今はあんまり使われないんだけど、まだ使ってるサーバーもありますよ。ページが変わってもヘッダーとフッターを同じデザインで表示させたいときなどに、1995年頃はよく使われてました。

増井：1枚ファイルを書きかえれば全ページに対応できるので便利でしたけど、今はPHPとかで作ることが多いですね。計算機能がないPHPみたいなかんじで、インクルードだけできる。今から思えば、セキュリティ概念がほとんどなかった。

白石：CSSの話もはずせないですね。CSSっていつくらいからできたんでしたっけ。

古籏：IE3.0からです。IE3.0の頃は、文字の色や背景、サイズくらいしか指定ができなかったはずです。IE4になって劇的に進化したんですよ。

増井：Netscapeとのタグの互換性がひどくて、結構アトリビュートで埋め込んでましたよね。今ならググれば出てくるからわかるけど、当時は直し方がわかんないんですよね。この頃は紙の本を買って読んでました。

白石：古籏さんはそういう本を書いてたと。

古籏：いかにバグを回避して動かすかって世界だった…（苦笑）。

増井：90年代は全部がWebになった時代でした。それまではGopherやメーリングリストとか、いろんなメディアがあったのに、全部Webに集約された。僕もRubyのメーリングリストにとんちんかんな質問をしたのがアーカイブに残ってますね。メーリングリストに質問を投げたことがきっかけで、堀江さんに誘われてオン・ザ・エッジにバイトにも行きました。

あと90年代の話題だと、htttpサーバーはApacheじゃなかったよねとか、検索エンジンは90年後半に出てくるロボット型のGoogleが登場するまで、Yahoo!とかのディレクトリエンジンの検索サイトがたくさんあったことですかね。紙のインターネット電話帳とかもあって、本屋さんで売ってました。

──会場から千里眼やODiNが懐かしいという声が上がる

白石：千里眼とかオーディエンって何の話？

増井：検索サイトです。当時Googleみたいに、大学の研究室で検索サイトを研究して試みたところがあったんですよ。千里眼が早稲田で、ODiNが東大かな。だけど、誰もビジネスの方向には向かわなかったんです。

【2000年代】Webの歴史を振り返る

増井：2000年問題って、ありましたね。僕は徹夜したけど、結局何も起こらなかったので、会社の皆で鍋食べましたけど(笑)。

白石：Wikipediaが2001年に始動していますね。

増井：この頃がCGMというか、ユーザー・ジェネレイテッド・コンテンツ（UGC）の大きな始まりでしたね。日本でWikiが流行ったのも2001年後半くらいでした。僕がPukiWiki始めたのは2002年の頭からでした。PukiWiki自体は2001年からでしたけど。

あんどう：2004年くらいがSNSの始まりでしたね。

白石：mixiとFacebookが同じ2004年なんですね。Firefox 1.0も2004年、YouTube設立は2005年かあ。現代感出てきましたね。

増井：ここまでくると最近ですよね。昨日と区別がつかない(笑)。この頃に出た「ウェブ進化論」という本で一般の人が一般認知するんですよね。ほかの業界の人がこれで知りましたからね。

あんどう：この頃テレビCMで「続きはWebで」っていうのも出てきましたよね。僕、結構感動してました(笑)。

白石：2000年頃は何をしていましたか？

あんどう：つらい仕事をしてました。

増井：ドコモのiモード公式ページを作ってました。iモードのメールがSMTPの規定に微妙に沿って結構苦労してました。@の前に.をつけられると届かないのに、その辺対応してくれなくて。この頃に写メとか、Yahoo！BBとかも出てきましたね。

あんどう：ブロードバンド時代ってやつですね。

増井：普通の人が圧倒的に使うようになってきた。出会い系サイトも流行った(笑)。

白石：Web2.0はウェブ進化論のあたりからでしたっけ。

増井：一般の人もそんな話をするようになったのは、完全にウェブ進化論からですね。新しいものができたというよりは、その時代にインターネットにつながるようになったので、Webの人口が圧倒的に増えましたよね、この時期に。

白石：この時期にみんな集合知っていうキーワードを口にしてましたよね。あとAjaxもそうだし。

増井：オープンソースという概念も一般の人に認知されるようになって、どうしてソフトが無料で使えるのかってよく聞かれました。伽藍とバザール（※）というドキュメントを読んでオープンソースってこういうにやればいいんだって理解して、それでPukiWikiをはじめたんですよ。

だからPukiWikiはちゃんとあれに乗っとってました。自分が最初に作ったものではなく、他の人が作ってるけど、作る人がいなくなったのをちゃんと探して譲り受けた。パッチを送って、チームを作って、ネットの中だけで完結させるということにこだわって作った。それなりにうまくいきましたけど、死ぬほど苦労しました。ドメインなくして、罵詈雑言だったこともありましたね（苦笑）。

※伽藍とバザール：Eric S. Raymondによって書かれたオープンソースに関するドキュメント

95年からGoogle Wave終了までを総括

白石：最後に、皆さんからまとめのコメントをお願いします。95～99年は古籏さん、2000年前後は増井さん、2003年くらいからGoogle Waveまではあんどうさんで。

古籏：95～99年は混沌として、大変面白かった時期でした。いろんなものができたし、いろんな人にチャンスもあった。発明品だったのは、Netscapeですよ。Mac,Windows,UNIXでバラバラだった改行コードや文字コードを気にせずに使えるようになり、コミックマーケット等でのマニュアルなどがHTMLに統一されて凄く便利になった。

白石：IEが出てきて、ブラウザ戦争も終わっちゃったんですよね。

古籏：NetscapeがOSを乗っ取るんじゃないかという危機感があって、Windows98はIEを組み込んだんですよね。それでIEが勢力を増して、98年にはブラウザ戦争は事実上半分くらい終わって、99年にはだいたい終わってた。それからGoogle Chromeが出てくるまで、IEの天下でした。

増井：2000年くらいからは、ブラウザの世界がモバイルに圧倒的に移ってきた時期でした。PDAやガラケーのiモードとかで、普通の人が乗り換え案内や検索を使うようになった。

2000年前半にWebの基礎的なものができてましたね。このあとはブラッシュアップが続くかんじになってるし、このあたりで参入した人や企業はだいたい残ってる。ただ、この辺から何をするにもコストがかかるようになった。趣味の世界だけではやれなくなって、個人よりも企業のほうが強くなってきましね。

あんどう：2003年くらいは、マッシュアップが流行ってた頃。何のビジネスにつながるかわかんないけど、みんなXMLでWebAPIを公開してましたね。企業が作れないものを個人と協力して作ったり、あの時代はあの時代でよかった。Googleが謎のAPIをどんどん出して面白かったし。そんな時代も、Google Wave終了とともに終わりました、と。

増井：マッシュアップは面白かったけど、その後商用やモノになったサービスってあんまり聞かないですよね。

白石：今の話は時代を象徴していて面白いですね。Google Wave終了で、みんなの夢も一旦落ち着いてきたかんじだった。Googleガジェットとか、Google Waveは終わっちゃったけど、Googleの技術の集大成でしたよね。

あんどう：終了したけど、技術的にはGoogle docsに集約されていますよ。

白石：最後は時間がなくて、かけ足になっちゃっいましたね。今度はSNS編とかCGI編とかPHP編とか、もっとテーマを絞って第二弾をやりましょう！

ということで、第二弾の開催をお楽しみに～！

こんにちは、HTML5 Experts.jp編集部の馬場美由紀です。HTML5 Experts.jp「Webの未来を語ろう 2017」の第三弾は、Webの未来を考えるコンテンツ編です。

毎回豪華なゲストをお招きして、聴講者を募り、白石編集長と一緒にお話を聞くイベント形式でお届けしてきたこのシリーズ。「メディア編」「コミュニティ編」に続く、コンテンツ編は大人気ライターのヨッピーさん、「デイリーポータルZ」編集長の林雄司さんという、超豪華なゲストにお越しいただきました！

ゲスト紹介

林 雄司さん

「デイリーポータルZ」編集長・ウェブマスター
1971年東京生まれ。ニフティ株式会社勤務。デイリーポータルZウェブマスター。主にインターネットと新宿区で活動。 編著書は「死ぬかと思った」（アスペクト）など。イカの沖漬けが世界一うまい食べものだと思ってる。個人サイトは「webやぎの目」

ヨッピーさん

フリーライター
「オモコロ」「トゥギャッチ！」など、体を張った実験記事を執筆する人気ライター。関西学院大学を卒業後、商社に就職。退職後はさまざまなWebメディアで記事を執筆。メディア運営のアドバイザーやWebライター塾の講師としても活躍中。

テーマは、コンテンツを作る・コンテンツを伝える・コンテンツで稼ぐ

白石：今回は「コンテンツを作るプロ中のプロ」であるお二人にコンテンツ作りのこだわりから、現在のWebをどう見ているか、未来はどうなると思うかなど、ちょっとシリアスな話題なんかも聞いてみたいと思っています。お二人をしゃぶりつくすために、こんな図を用意してきました。

これをもとに「コンテンツを作る」「コンテンツを伝える」「コンテンツで稼ぐ」といったテーマについて語っていただきます。

「良いコンテンツ」ってなんですか？

白石：実は事前にヨッピーさんから林さんに対して「良いコンテンツってなんですか？」、林さんからヨッピーさんに「どれくらい分業しているか？」という質問をいただいています。

ヨッピー：この「良いコンテンツってなんですか？」って質問、デイリーポータルZ（※以下、デイリーポータル）を見てると林さんはWEB界隈の中でもちょっと毛色が違う答えを出す気がしていて。例えばBuzzFeedなんかだと、彼らが作ってるコンテンツを見る限り、僕が考えてることとそんなに違わない気がするんですね。彼らは「お前と一緒にすんな！」って言うかもしれないですけど……。

だけど、林さんは違う考えをお持ちじゃないかって思ってるんですよね。

林：僕、事前に質問もらっておきながら、あんまり考えてない(笑)。

ヨッピー：自分の話でいうと、僕ってもろにウケを狙いにいくタイプなんですよ。それは林さんから見たらいやらしいというか、林さんのポリシーとは全然違うんじゃないかなって思うんですけど……。

林：うーん、なんかね。「良い」っていうと正しいみたいじゃないですか。正しくなっちゃうと困るんですよ。単純に面白くて、笑えるコンテンツがいいと思います。

ヨッピー：そういえば、こないだWEBメディア系のえらい人たちも含めて林さんと飲んだんですね。僕やそういう人たちはわりと血気盛んなタイプなんで、「悪いやつらをやっつけろー！」「ちゃんとやろうぜー！」みたいな感じなんです。でも、林さんは「誰が悪いとか正しいとか、僕らが判断するのは良くないんじゃないか」って言うんです。それで結構みんなハッとさせられたと言うか。

林：僕らが「これが良い」って認める立場になるのは恐ろしいんです。フランス革命後の恐怖政治みたいに、結局良くないことになる。インターネットなんてそれぞれ自由に任せるべきで、何が良いか悪いかなんて決められるものじゃないと思うんですよね。

「面白い」というのは、読んだあとに知識が得られて世界が変わるとか、ものの見え方が変わるのがいい。例えばかつらの見分け方を読んだら、世の中の見る目がかつらの人とかつらじゃない人に分かれるじゃないですか。もしくは、猫が面白い動きをするとか見てて楽しいコンテンツがいいです。

ヨッピー：デイリーポータルの中で素晴らしいと思ってるのは、大山さんが書いてた「マンションポエムが面白い」って記事。あの記事が出るまでは、マンションポエムなんてカテゴリは、今まで世の中に存在しなかったわけじゃないですか。今までまったく気にしていなかったのに、これは面白いとなると、電車に乗ったらついついマンションポエムがないか探しちゃうんですよね。

林：あっ、それそれ！さっきのかつらの例はあんまりよくなかった。まさにそのマンションポエムですよ、マンションポエム。これを定義すると、世界が変わるという代表例。まあ、そればっかりもできないので、お茶をにごしている記事も多いですけどね(笑)。

白石：お二人とも謙遜しているけど、面白い記事をたくさん書いているじゃないですか！世間の評価もある。何が面白いのかを言語化してみると、林さんはそれを読んだあと世界が変わる、見え方が変わるということでしょうか。

林：いや、なんかそれだと真面目な人になっちゃう(笑)。笑うって意外だから笑うんですよね。だから意外性があるものがいい。

ヨッピー：わははは(笑)。

白石：ヨッピーさんは自分の面白さを言語化できてたりしますか？

ヨッピー：僕は別にないです。そもそも僕自身は全然面白い人間ではないので、これを書いたらウケそうとか、ベタで世間的な需要がありそうなところを狙って、本当にハイエナみたいに拾ってきてるだけ。別に目新しいことって何もしてないんですよ。みんなが知ってて、ちょっと気になっていることを実際にやってみようとか、もう少し深堀りしようとか、そういうことしかやってない。あれって、世間の需要とかとはかけ離れた場所にあるじゃないですか。

林さんの「ペリーがパワポで提案書を持ってきたら」とか、「カフカ『変身』をネット通販風に描く」みたいな発想ができないんですよね。

僕の場合、AV男優のしみけんさんがどんな一日の過ごし方をしているか密着してみるとか、女優の『のん』さんを引っ張ってくるとか、誰もが既に知ってることをもう少し深く掘るようなことしかできないけど、林さんは誰も知らなかった面白さをやってる。

林：でも記事って知らないことを書く方がいいような気がするけど、「スーパーカップ美味い！」みたいな記事の方が実はウケるんですよ。ガイドブック見るときって、まずは知ってる店を探すじゃないですか。「知ってる」ということがみんな大好きなんですよね、だからヨッピーさんのやり方は正しい。

ヨッピー：そういえば、こないだ「仙台の牛タンはうまいことがわかった」って記事出してたじゃないですか。牛タン食べてるだけなのに、めっちゃウケてましたね。もちろんライターさんの力量もあるんですけど。

林：鳥貴族サイコーって記事もウケてたし(笑)。作る側としてはこれでいいのかなって思いますが、月末になってPV足りないなってときは、投入しちゃいますね。

どれくらい分業している？

白石：次は、林さんからの質問「どれくらい分業している？」の話を聞いていきたいと思います。

林：ヨッピーさんの記事は編プロが入ることが多いと思うんですけど、誰が企画立てて、取材先決めて、アポとって、写真撮ってるのかなって。

ヨッピー：企画ごとに全然違いますね。基本的に僕が企画を立てて、クライアントからOKが出たら始めるんですが、アポ取りも自分でやったり三脚立てて写真を一人で撮ったりもしますね。もちろん編プロさんが入ってる時はあれこれお手伝いしていただきますけど。

林：デイリーポータルだとライターがアポとって、自分でその辺全部やってるんですが、編集部でももっとディレクションしなきゃいけないんじゃないかと思ってて。一人だけでやるより、お膳立てしたほうが記事の広がりが出るから。

ヨッピー：それってライターにもよるんじゃないですか。僕だと、編集との息の合い方で違うんですよね。3行くらいのメッセージでやりたい企画を投げた時に、編集の頭の中で僕と同じ構成が思いついてればいいんですけど、そうでないと「なんでその企画でそこの取材先にアポインととってくるの？」みたいなことになる。

例えば、風邪の治し方をお医者さんに話を聞きたいと思ったときに、こっちとしては権威がある大学教授とかね、どっちかっていうと研究機関みたいなところに話を聞きたいのに、その辺の町のお医者さんのアポをとってくるような。もちろん町のお医者さんが悪いというわけでは全然ないんですが、この場合の説得力でいうと研究機関とかの方がいいわけで。そういう、あうんの呼吸がとれてる場合はアポも含めてお任せしますが、そうでないときは自分でアポを取るようにしてますね。

白石：じゃあ、順序として「企画を考える」⇒「アポとりなどの準備」⇒「取材」⇒「執筆」⇒「公開」ですが、ヨッピーさんはどこまでやってるんでしょうか。

ヨッピー：それも企画ごとに違いますね。オモコロというメディアだと、9割くらいできた段階で「あとはよろしく」って投げちゃいます。原稿も「だいたい書いたよ」って渡すと、アイコン入れたり、集中線入れたりとか、オモコロを運営しているバーグの社員がなんかうまい具合にやってくれるんですよ。

林：えー集中線ってバーグ（※バーグハンバーグバーグ）が入れてるの？ ヨッピーさんといえば集中線だから、自分でやってるんだと思ってた。

ヨッピー：それは彼らを信頼しているから、9割の出来上がりの段階でもまるっと渡せるんですよね。彼らから「最後までやれや！」って怒られるかもしれないけど、でも僕が最後まで仕上げるより、彼らみたいにセンスがある人に手を入れてもらった方が最終的な完成度は高いな、って気づいて。逆にそうじゃないところだと、行間が広い・狭いまでこっち指定するし、なんならCMSの入稿権限もらって自分で調節して10割まで仕上げますね。

白石：そういう行間というかスタイリングみたいなこともやってるんでしょうか。

ヨッピー：普段はほとんどやらないです。よっぽど「ここは全部自分でやらなきゃな」っていう相手と組まない限りは。

林：僕は結構HTMLいじっちゃいますね。行間あけたいなとか、改行を増やしたりとか、見やすいようにソースいじっちゃたり。

仕事を頼みやすいライターはどんな人？

ヨッピー：仕事を頼みやすいライターって、どんな人なんですか？デイリーポータルで書きたいってライターはたくさんいそう。

林：いや、そんなに来ないけど、自分の書きたいテーマが決まってる人かな。ただし、専門家タイプじゃなくて、下手でもいろいろやってるほうがいい。あとは明るくて、社会性のある人(笑)。

白石：デイリーポータルさんは、どんなフローで作ってるんですか？

林：ライターがこういうのを書きたいという企画を出してきて、前に誰か書いてないかとか、外部に出していい情報かどうかチェックして決めてます。基本は対面の企画会議が10日に1度あって、みんなで集まってお菓子食べながらおしゃべりするだけなんですけどね。来れない人はチャットとかで。

白石：それは編集部だけでやるんですか？

林：ライターも入れて40人全員です。でも自由参加だから集まって10人くらい。集まらないと3人だけ。なるべく来てほしいですね。企画として進んでる段階よりも、あれ気になってるってネタ段階の話を聞きたいから。

ヨッピー：企画って、夜中の2時3時くらいのべろべろに酔っぱらってるときが一番面白い企画が出たりしません？それで実際やってみると、ダメなパターンも多いですけど(笑)。

企画やアイデア出しのコツやノウハウはある？

白石：企画やアイデア出しで心がけていることやコツ、おすすめのツールやノウハウとかあれば聞かせてください。

ヨッピー：例えば家から会社に行くまでの間に、「1万円札が落ちてる」って情報を知ってたら必死で探すから、落ちてたら気づくじゃないですか。でもその情報を知らなければ、気づかずにそのまま歩いちゃう。普段からなんかいいネタないかなって考えてるから、落ちているネタに気づくってことなんじゃないかなって思ってます。

初詣にベビーカー持ってていいとか悪いとか論争があったときに、「初詣にベビーカー持って都内をうろうろする記事を書いたらウケるからやってみて」って、友だちのライターに言ったんですよ。実際にやってみたら、やっぱりウケるんですよね。なので、僕は今話題になってることにのっかって、地道に1万円札を集めてるだけなんです。

白石：ヨッピーさんといえば、オモコロで下ネタの帝王だったイメージがあるんですけど、最近はあんまり書いてないですね。

ヨッピー：それには悲しい歴史があるんですよ……！下ネタが好きでずっと書いてたら、僕よりひどい下ネタを書くキショ松ってやつがオモコロに入ってきたんです。そうするとオモコロの中で、下ネタの比重が上がっていくじゃないですか。オモコロ全体のためにもよくないし、僕もこんなやつと競って下ネタばっかやってたら、先が行き詰まるから「じゃあ、今後はお前が下ネタをやれよ」って譲りました。

で、体を張っていろいろ企画をやり始めたら、今度はとてつもない数字をもったARuFaというやつが入ってくるんです。僕が体張るだけじゃ彼には絶対勝てないから、別のことやろうといろいろ試行錯誤した結果が今なんですよね。負けて負けてなんとか今のポジション見つけて、しがみついてるだけなんです。

白石：林さんはどうですか？

林：時事ネタはやりますね。去年ポケモンGoが流行った時に、ポケストップのコスプレして実写する人がたくさん出ると思って、すぐやって原稿の掲載も前倒して載せたんですよ。でも、誰もやらなくて。なんであんなにあせってやったんだろう(笑)。

白石：そういう発想ってどこから生まれるんですか？

林：発想術とかそういうの期待されてると思うんですが、よくセミナーでキーワードでしりとりすると出ますとかいいますけど、実際はあんなことしないですね(笑)。間違い探しって、いかにも間違いがありそうな探し方のコツがあるじゃないですか。そんな視点で世の中見てると見つかることはあります。

白石：編集会議ではブレインストーミングとかはやらない？

林：本当にお菓子食べてるだけなんです。デイリーポータルのライターは面白がりが多いですね。お店でも見たことないメニューは頼むし、地方の変なおみやげも競い合って食べる。

ヨッピー：やっぱり好奇心が大事ですよね。

林：ヨッピーさんの記事は企画がしつこいですよね。なんか調べてそこで終わりじゃない。なんかもうひとひねりあるというか、しかも二記事に分ければいいのにって思うくらいボリュームがある。

以前、江の島ってライターが23区の清掃工場の煙突見てまわりますっていうから、面白そうな5個くらいでいいんじゃないって止めたことがあるんですよ。自分の達成感と面白さは必ずしも一致しないからって。でも、もっとやれって応援した方がよかったのかなあ。

白石：僕はヨッピーさんの変態仮面に写真がパクられた記事がすごく面白かったんですけど、どういうふうに作ったんですか？

ヨッピー：あれは今ほどキュレーションメディアやパクリ問題が表面化してなかった頃の話なんですよ。今の時代ならネタにしちゃうと怒られそうだけど、当時はそんなに問題になってなかったのでネタにしちゃえ、みたいな。変態仮面という映画が僕の写真をパクったんで、お金もらってパンツを買って渋谷で配ったら、警察につかまって終わりという。

白石：デイリーポータルで好きだったのは、地味なコスプレ企画です。

ヨッピー：あー、あれも良かった。こういう発想、僕本当にできないんですよね。「地味なコスプレをやってほしい」なんてニーズ、世の中には存在しないものじゃないですか。

林：あれは面白かったですね。この企画はハロウィンって自由に遊んでるふりしてるけど、みんなで同じ格好してて制服みたいだって皮肉なつもりではじめたんですよ。

ヨッピー：「ハロウィンの前日の人」っていうコスプレが秀逸でしたね。

白石：ARuFaさんが運動会のお母さんってやったのもこれでしたっけ。

林：そうです、そうです。

白石：なんか面白い裏話あります？

林：店員のコスプレしてくる人いるから、誰が店員かわからないとか、ADのコスプレして、あと何秒って出してくる人もいて、あんなADいたっけとか。妻の出産に立ちあう旦那とか、こういうのみんなやりたいんだなあって驚きましたね。

ヨッピーさんがブランディングできてるのはなぜ？

白石：次はコンテンツで金を稼ぐとか伝えるってことを聞いてみたいです。タイトルやバズらせるためにやってることや、SNSとか。林さんがヨッピーさんに聞いてみたいは「自身のサイトがないのにブランディングできてるのはなぜか？」とのことですが、いかがですか？

林：ヨッピーさんて自分のホームグランドがないじゃないですか。そのわりには、ヨッピーが書いた記事はどこでも統一感があるというのがすごいなと。

ヨッピー：逆にそれしかできないからかと。最初に自分の顔を出そうというのは、昔から決めてますね。結局覚えてもらわないと積み重ねができないので。

林：ホームベースのメディアがないのに、ヨッピーって名前が世の中に知られているのはすごい。

白石：オモコロをメインに書いてたときは、社員だと思ってました。

ヨッピー：やりたくないことをやってこなかったからじゃないですかね。これは僕じゃなくてもいいなと思う仕事は貧乏な頃からもずっと断ってきたから、自分らしさが出てきたっていうか。企画を進めているうちに、これ僕じゃないほうがいいなと思ったときは途中でも抜けたりもします。

白石：フリーランスって立場が不安定だし、来た仕事ってなんでも受けちゃいがちですが、ヨッピーさんは気に入らない仕事は断っちゃうと。

ヨッピー：断っちゃいますね。あと、本当はよくないかもしれないのですが、運営会社が別のメディアででも、二本の記事を若干のストーリーを含ませて出したりするんですよ。例えば、ヤフーニュース個人というサイトでPCデポのことを書いたあとに、インテリジェンスが運営しているi:EngineerというサイトでPCデポと揉めて疲れたからスマホなしで旅に出るみたいな。僕のフォロワーだったらわかるけど、独立した記事になってないんです。

サイバーエージェントの悪口を書いたときもそうなんですが、インターネットでケンカしたあとに出す記事は僕がひどい目に合う記事にしようって決めてるんです。それでバランスをとるといいますか。ケンカばっかりするやつだと思われたくないですし。ブランディングのために他のサイトにまたがって一連のストーリーに仕立てたりはたまにしますね。サイバーのときは自転車で100キロ走るというのをやりました。

林：編集から「これってヨッピーさんの別の記事の続きじゃないですか」って言われないんですか？

ヨッピー：言われます。

林：それを期待しているところもあるのかな？

ヨッピー：たぶんあると思うんですが、どうなんだろう……？本当は嫌がってるかもしれないですね。でも数字とかはやっぱりその方が良かったりするんですよ。

林：デイリーポータルはサイトとしてのブランディングを作りたいという想いがあって、どこでも読めるサイトじゃなくて、鎖国しようかなと考えてるんです。だから、スマートニュースみたいなニュース配信サイトから脱退したいと思ってて。ただ、ヨッピーさんみたいに個人のブランディングができてる人を見ていると、これからはサイトじゃなくて個人のブランド力なのかなって気もしていて。

ヨッピー：でも、デイリーポータルほどブランディングできてるメディアなんて、世の中にないからそれでいいんじゃないですか。

林：言うほど悩んでもないんですけどね(笑)。いまデイリーポータルアプリも作ってて、審査中なんです。オモコロとか面白系の記事も入れちゃおうって計画しています。

ヨッピーさんはなんで写真で笑わないのか？

白石：林さんからの質問で、「なんで写真で笑わないのか？」ってありますが。

林：ヨッピーさんの影響を受けたライターが、みんなむすっとして出てくるじゃないですか。デイリーポータルではやってないことなんですけど、あの意図はなんですか？

ヨッピー：意図はないです。ただいきなり笑顔から始まるとしんどいっていうか、毎回笑顔のやつが出てきたら嫌いになりません？

林：たしかに笑顔がうっとうしいってありますね。笑顔だと意味が出ちゃうからかな、なるほどね。

タイトル付けはどうしてる？

白石：タイトルって重要だと思うんですけど、どうですか？

ヨッピー：僕は最近やっとSEOを気にするようになって、たくさん検索されて、流入が増えるキーワードみたいなのを覚えはじめました。

白石：タイトルって編集者がつけてますか？それとも自分で？

ヨッピー：僕は全部自分でつけてます。SEOは意識してなかったんですけど、最近は観光系の記事を書くことが増えてきたので　観光記事を書くときは意識しますね。検索で、「〇〇×観光」って入れたときに上に出てくるようにしたいから。それ以外は別に考えてないです。

林：僕らはSEOとか一切気にしてないんですよ。だってタイトルがGifな時点でSEO的にはダメですよね。

──会場爆笑

ヨッピー：画像なんだ！これ(笑)。でも検索流入めちゃくちゃ多いですよね。

林：出てくることは出てくるんですが、SEOに詳しい人に聞いたら、手をつけるところがいっぱいあるって言われました。ひどいって(笑)。

タイトルは、わかりやすくするくらいしか気にしてないですよね。あまりにも変なタイトルつけてきたら変えてくれっていいますけど。個人の話として書いてくれと言ってるんですが、タイトルはそれだと引きがないから具体的な内容や固有名詞を入れてくれというお願いもしています。

きわめて個人的な話が書いてあるけど、いきなり個人の話をタイトルに入れても何の話かわからない。個人名を入れていいのは宇多田ヒカルと村上春樹だけだとライターには伝えてます。

タイトルの付け方でテクニックに走るって、メッセージ性がなくてよくない。テクニックだけだと、その先にあるのはキュレーションメディアなんです。やっぱり魂あってのテクニックなんで、まずは何を言いたいのかきちんと伝えようってことですよね。

ヨッピー：僕がつけるタイトルって、Youtuberぽいんです。でもオモコロの中だと僕の書く記事のタイトルは長いほうで、もっとみんな短いですね。「エビフライ」だけとか、わけわかんない。

林：まとめると、わかりやすく、固有名詞は入れときましょうとか、タイトルはGifはやめましょう。あ、読めない漢字は使わないこと。読めないとみんなクリックしないので、迷ったら全部ひらがなにするとかくらいかな。

林さんがサラリーマンをやめない理由

白石：ヨッピーさんから、「サラリーマンをやめない理由」を聞きたいとのことですが。

林：僕、2000年くらいに本を出してから、個人のライター仕事が増えたんですよ。雑誌の連載も何誌か書いてて月20万円ほどのお金にはなったんだけど、休みはなくなるし、すごく大変だった。こんなに苦労するなら会社で出世したほうが、勤務時間だけ働けばいいし、収入的にもあんまり変わらないかなって。

白石：ヨッピーさんはなんで聞いてみたかったんですか？

ヨッピー：僕ならやめてるかなって。デイリーポータルを50億くらいでどこかに売っぱらって(笑)。そのお金でデイリーポータルZ 2を作ったらいいんじゃないかって。

林：デイリーポータルは会社の資産だから売れないって(笑)。あんまり儲かってはないんですが、好きなことをやらせてもらって、会社から給料をもらってる。会社員もメリットあるかなって思ってます。

白石：デイリーポータルはブランディングという立ち位置なんですかね。

ヨッピー：林さんは野望とか夢とかってないんですか？よくあるじゃないですか。Webで人と人をつないでとか、地方を活性化させるとか。

林：ああいうの、嘘くさいですよね(笑)。〇〇を通じて社会に貢献とか、よくあるけど、社会に貢献したいって思ったりすることあります？ 俺はないなあ。「〇〇を通じて」に無理があるっていうか…。

白石：アイティメディアさんのインタビューではひたすらデイリーポータルを続けていきたいって話したじゃないですか。あえて言うなら続けるってことでしょうか。

林：そうですね。デイリーポータルの目的は続くこと。ひたすら続くことを考えてます。

白石：ニフティさんはこないだ二つに割れて、エンタープライズ部門が富士通、コンシューマー部門はノジマさんが買われてましたね。

林：なんでノジマがって思いますよね。でも面白いことになるんじゃないかな。意外に紳士的で経営には口を出さないって言ってくれてて、ニフティはニフティでこれまで通りでやってくれと。これからも変わりがなさそうです。

記事を書くとき、数字目標どうしてる？

白石：ヨッピーさんは数字やお金とかって関しては、記事書くときに何PV出せとか保証しろって言われますか？

ヨッピー：保証しろとは言われませんが、僕から努力目標として「どのくらい数字が欲しいんですか？」って聞いてます。欲しい数字が記事のPVなのか、ほかにもFacebookいいねとかTwitterのツイート数、はてブの数とかいろいろあります。

白石：それって欲しい数字の種類によって、コンテンツの企画にも影響してきますね。

ヨッピー：はい。それぞれに向いてる企画ってあるし、数字少なくてもいいなら安くてもいいけど、多いなら予算たくさんほしいです。

林：PVってお金かけるとある程度いきますよね、見た目が派手になるから。例えば洞窟を借りるなんてことをしたいとしたら、やっぱりお金がかかるんですよ。数字と予算はシンクロすると思います。

ヨッピー記事1本に予算10万円以上使えるWebメディアってなかなかないから、そこで差別化できますよね。僕この前、別府市の遊園地を温泉にするっていうクラウドファンティングのPR記事で、別府市の市長にインタビューに行ったんですよ。そしたら市長にヨッピーはいくら支援してくれるんだっていわれて、16万円払わせられたんですよ。ひどい話ですけど、でも見ている人からしたら痛快じゃないですか。そんな感じで単純に自分がお金ほしいというよりは、企画に予算を使いたい、派手なことがしたいみたいな感覚は結構あります。

キュレーションメディアや制作コストの話

白石：去年から騒がれてるキュレーションメディアの制作費やコスパの話ってどう考えてますか。

林：怒りしかないですね。キュレーションメディアって、SEO対策とかのテクニックだけで流入させるお金を稼ぐための方法ですよね。何か伝えたいという記事へのメッセージ性がない。

一番腹が立つのは、デイリーポータルの写真はパクられないってこと。パクられた―って怒りたいのに(笑)。デイリーポータルの写真ってライターの顔がちょいちょい入ってるからパクリにくいみたいなんですよね。美味しいケーキ屋さんの写真ならパクられるのかもしれないけど、深海魚とか煙突とかって価値がないのかなって。

ヨッピー：キュレーションメディアに僕がつっこんでいくかどうかはおいといて、いつか無理が出るだろうなって思ってたから、こうなってよかったなって思ってます。僕はパクられたから怒るというより、検索結果に上のほうに出てくるのは邪魔だなというむかつきのほうが大きかった。まわりがたくさんパクられててまずいなとは思ってたけど、キュレーションメディアにパクられたから稼げなくなる、みたいなことで焦ったりすることはなかったですね。

林：取材して書いて経験を積むから、力がつくんですよ。面白いところに行けたら見分も広がるのに、一番面白いところやんないでパクってるだけって、そんな仕事楽しいのかなって思いますね。

ヨッピー：それで時給3000円もらえるんだったらまだわかるんですけど、キュレーションメディアのライターって時給換算でも安いっていうじゃないですか。文章書く楽しみも、取材で面白いとこに行く楽しみもないってかわいそうですよね。ライターの仕事って儲からないけど、普段行けないところに行ったり、気になる人に話聞けたりする楽しみがあるからいいやってとこあるじゃないですか。その楽しみも捨てて、なんでコピペだけやってるのかなって思います。

白石：記事コストについてはどうですか？

林：普通に取材して書くとしたらだいたい取材に1日、執筆に1日、合わせて丸2日かかるんですよね。それで原稿料2万円とか、ライターが食べていけない原稿料だと構造的にいつか終わっちゃう。

なんかWebメディア業界のライターが演劇業界みたいな食えないけど楽しいからやってるじゃなくて、どっかからお金もらってきて、ちゃんとひと月暮らせるようにしなきゃなって思ってる。

ヨッピー：Webメディアも過渡期で、ここ2～3年で玉石混交でわけわかんないのいっぱい出てきましたけど、だんだん勝ち組と負け組に分かれてきてると思うんですよね。負け組はコピペから逃れられない、勝ち組はコストが使える。この差が出てくるともっと落ち着いてくると思います。

最近は取材できるライターの需要が高まっているし、高い給料でライターを集めているWebメディアも出てきたし、稼げるようになってきている。もしくはデイリーポータルみたいな人気サイトで書いているといえば、おそらくどこでも仕事くれるんですよ。PR記事の需要も増えているし、この傾向が続けば、Webメディアでも儲かるようになるのではないでしょうか。

ネイティブ広告は普段やれないことができるチャンス

白石：そういうコンテンツで稼ぐ勝負というか、ネイティブ広告についてはいかがですか？

ヨッピー：僕、めちゃくちゃ書いてます。半分くらいそうかも。なくなると困る(笑)。ネイティブ広告は普段できない企画をやらせてもらえる機会だと思ってるので、ありがたいです。

林：デイリーポータルもめちゃくちゃやってますね。

ヨッピー：僕はLINEの谷口さんや林さんがやってるの見て始めたんですよね。宣伝記事って基本嫌われるじゃないですか。でも、デイリーポータルは普段より記事が派手になるんですよね。スポンサーがいるから予算かけられるし、そうなるとユーザーも受け入れるんですよね。ここまでクオリティ上げれるんだって。じゃあ僕もそうしようって頑張って真似しているかんじです。

白石：デイリーポータルやヨッピーさんとか書いてるものを見ると、最初からPR広告だって言ってるから、すがすがしさがありますね。ちなみにネイティブ広告って作るの難しいじゃないかなって思うんですけど、アイデア出しとか、普段と違ったりしますか？

林：アイデアの出し方はテーマや商材ありきなんで、通常とは逆に発想術的なこともやりますね。あとはクライアントと仲良くなるのがいいじゃないかな。

広告って変わったことをすべき。オーソドックスなことって会社に損害を与えていると思うんです。PRみたいなことで、普通な真面目な意見って損だし、お金の無駄使い。

ヨッピー：たぶんデイリーポータルに仕事頼んでくる人って、デイリーポータルのファンでしょ。そしたら普段のテイストもわかってるし、やりやすいんじゃないですか。

林：昔からのデイリーポータルの読者が決裁権を持ち始めてきていて、最近はそういう人が発注してくれることが多くなってきました。だから、読者にはどんどん出世してくれって言ってますね。出世してデイリーポータルに発注してくれって(笑)。

白石：ヨッピーさんはネイティブ広告と普通の記事を書くときと違いますか？

ヨッピー：ネイティブ広告はやっぱ数字がモノを言うのでそれに対するハードルは上がりますね。でも、これはすべりそうとか、こんなもんいじりようがないってネタや商材のときはすぐ逃げます(笑)。「うちの社長面白いから、ぜひいじってください」っていうのは、だいたい面白くないやつ(笑)。

林：でもここ数年面白広告が多すぎて、最近ちょっと食傷気味。もう少しちゃんと伝える広告をやりたいですね。ほぼ日みたいに全部広告なんだけど、ちゃんと商品を説明しているパターンとか。

2020年のWebメディアはどうなる？

白石：最後のまとめでお聞きしたいんですが、ちょっと近未来、3年後とか2020年はこうなってますよっていうことを聞かせてください。

林：早くAIが面白記事を書いてくれないかなって思ってます。

ヨッピー：えっ！書けますか？

林：だってわりとセオリーあるじゃないですか。取材はしなきゃいけないけど、意外なことを書くとかAIの裏をかくAIとか、構造はあるから。

白石：その時ポータルZはどうなると思いますか？

林：AIに記事を書かせてのんびりしてるんじゃないですかね。取材だけするのかなあ。使われてるかんじしますね。あとはのんびりしてますかねえ。締め切りは守ってくれるし、Twitterで悪口書かないし。

――（会場から、締め切り守らないAI開発されたらどうするかというツッコミが）

林：締め切りを守らないAIいいですねえ。「書いたんですが、消えたんで」とか、「保存がうまくできなくて」とか言い訳されたりして。そしたら俺もAIで返します。自動返信で「それは災難でしたね」とか「とはいえ、締め切りはありますので」って(笑)。

ヨッピー：2020年くらいになったらインターネットの世界から飛び出す人たちがもっともっと出てくるんじゃないかな。デイリーポータルがテレビとかの番組になったりしそう。最近面白い人とかものってインターネットで探すじゃないですか。どんどん飛び出して、いろんなところで活躍するんじゃないかなと思ってます。

白石：そうなったら面白いそうですね。今日はありがとうございました！