【星海社サイト編】シナップエンジニアのお仕事紹介

2015.02.18

エンジニアの池田です。

シナップでは現在、Webエンジニア、テクニカルディレクターを募集しています。と、突然言い出しても、シナップのエンジニアがどんなだか、まるで分かりませんよね。そこで今回から、できれば何回かに分けて、仕事の内容などをご紹介していきたいと思います。

はじめに

まずはじめに、この連載でお伝えしたいまとめを書いておきます。

シナップでは、エンジニアを含む各職種メンバーを募集しています（採用情報）
シナップのエンジニアは、クライアントと直接検討しながら納得のいくまで制作します

<シナップエンジニアのおしごと紹介シリーズ>
第1回：「【星海社サイト編】シナップエンジニアのお仕事紹介」
第2回：「【モリサワ TypeSquare編】シナップエンジニアのお仕事紹介」
第3回：「【自社プロジェクト編】シナップエンジニアのお仕事紹介」

事例紹介星海社の場合

さて、さっそく事例紹介の話にうつりましょう。今回は、サイトの制作・運用をお手伝いしている星海社様の例からエンジニアの関わり方の例をご紹介します。

星海社様は、近年環境が大きく変化する出版業界において、これまでの「出版」の概念に挑み、ネット、イベントなどを活用した新しい「出版」の形を模索する会社として講談社100%出資で設立された会社さんで、『最前線』『ジセダイ』といったメディアを展開しています。

コーポレートサイト

最初に星海社様のお手伝いをしたのは、そのコーポレートサイトでした。こうした企業サイトの制作プロセスは、企画 → 設計 → デザイン → 実装というウォーターフォール型の流れをとることが一般的だと思いますが、このプロジェクトの場合、サイトの詳細がまだ固まっていない段階から、デザイン、実装の制作にも入り、実装部分に至ってはエンジニアの松島が自由に考えてプロトタイプを造り始めました。そして出来上がったサイトがこちらです（もちろん、始めに作ったそのままが公開されているわけではありませんが）。
http://www.seikaisha.co.jp

少し触ってみてください。

特徴としては、

各ページを表示する際に動きが付いている
トップページではコンテンツがオーバーラップしており、マウスを右上に持って行くと、奥のコンテンツが手前に出てくる
リンクをクリックした時に画面全体は遷移しない
HTML5でマークアップされている

といった点が挙げられます。

今では当たり前に感じられるかも知れませんが、このサイトを制作した当時はHTML5で作られた企業サイト自体が珍しく、「HTML5でここまでダイナミックなことができるんだ」と、少し話題になるほどでした。実は社内でも、明確にHTML5を使おうと言って取り入れたわけではなかったのですが、次世代を目指す星海社様の姿勢を示すに相応しいのではないかと提案しました。結果、クライアントである星海社様にも受けがよく、HTML5は後続のサイトでも使われるようになりました。

エンジニアからの、実装を伴った提案がうまく実を結んだ事例です。

レッドドラゴン

レッドドラゴンというのはテーブルトークＲＰＧリプレイを連載する企画です。ＲＰＧリプレイについての詳細はレッドドラゴンページの紹介を参照してください。
http://sai-zen-sen.jp/special/reddragon/

現在は連載が終了していますが、とても人気がある企画で、コンテンツとしても面白いので、ぜひ本を読んでみてください。

さて、レッドドラゴンでは、リプレイを読み進める際にユーザーの読み進めに合わせて、複数のBGMを切り替えながら流すといった試みをしています。プレイの際に会場で実際にBGMを流していたこと、その楽曲制作が、多くのゲームミュージック制作を手がけている崎元仁さんということもあり、ウェブサイトで公開するリプレイでも、ぜひそれを使おうということになったのです。（現在公開中の話でも、読み進めていくと体験することができるので、ぜひ「SOUND ON」にして試してみてください。）

リプレイで流す曲のタイトルやタイミングについては、プレイ時の物が原稿に書き込まれていました。しかし、ＲＰＧのプレイとウェブでの閲覧ではやはり環境が違うことなど、作品の世界を盛り上げる読書体験を作り出すには、ただ流すというわけにはいかず、いくつかの課題がありました。こうした課題解決のために、シナップのエンジニアは実際に原稿を読み、読者が読んでいる箇所に合わせて細かく曲が変わるタイミングをチューニングしました。上から下にスクロールするか、下から戻ってくるのか、またスクロールのスピードはどの程度かといったことに合わせて、再生位置やクロスフェードなどの処理を細かく調整、実装したのです。

完成したサイトは「新しい読書体験を産み出した」とクライアントである星海社様にも、読者の皆様にも大変評判のよい物になりました。

このように、エンジニアはある意味でプロジェクトの末端ではありますが、それでも自分でいいと思ったものを提案できますし、何よりそれを汲み取ってくれるクライアントが多いので、ありがたい環境で仕事ができています。

会社紹介 - 求められる人物像、仕事内容

後半では、シナップという会社の特徴を紹介していきたいと思います。今回はエンジニアとして求められる人物像、及び仕事内容についてご紹介します。

一人でも積極的に技術を伸ばしていける人

シナップは大きい会社ではありません。エンジニアもそれ専門の会社と比べると多くなく、一人一人がよくも悪くも「替えの利かない」存在です。それぞれがプロフェッショナルであることを掲げていて、少人数で構成されながらも、それぞれの担当分野、得意分野を持ちながら仕事をしています。

例えばわたしの担当はサーバー構築などであり、フロントエンドの実装やインタラクションのデザインでは、上で紹介した松島に遠く及びません。各人の得意分野・専門分野に特化して日々研鑽を積み、その分野で高いレベルでのソリューションを提供できるよう努めています。

逆に自分の得意でない分野では、社内に誰か相談できる相手がいるということでもあります。各人がそれぞれの分野に特化することで、少人数ながらもシナップ全体としては広い範囲をカバーできるようになっています。

そんな環境なので、見方を変えれば、シナップのエンジニアは、社内に自分の得意分野については他にあまり相談したり、切磋琢磨できる相手がいません。そこは人によってはネガティブかもしれません。他人に頼らず、一人でも積極的に技術を伸ばしていける人が求められていると言えます。

新しい技術へのキャッチアップ

「各人の得意・専門分野に特化」とは言っても一つのことしかやらない、という態度では会社としての技術の幅が狭まってしまいます。この業界のエンジニアであれば当たり前だとは思いますが、仕事で使えるかどうかはともかく、積極的に手を動かして新しい物を体験するという姿勢も歓迎されます。

シナップでもNode.jsやWebSocket、Leap Motion Controllerなど、その時の新しい技術を自社プロジェクトなどで取り入れ、その後、ソリューションを考える際に検討対象に入れられるようになった物もあります。（この辺りは、次回以降、社内プロジェクトの紹介としてもう少し触れたいと思っています。）