こんにちは！ フロントエンドエンジニアのはっちゃんです！
さる2018年6月28日、LIGが主催するトーク＆交流イベント「LIG SHIP」の第8回目が開催されました。題して「LIGブログリニューアル解体新書」。
2018年4月2日に全面リニューアルした弊社の「LIGブログ」。そのプロジェクト中心メンバーが登壇し、リニューアルにあたって楽しかったこと、苦労したこと、こだわったポイントなどを赤裸々に語る会となりました。
今回はそんな「LIG SHIP #8」イベント当日の様子をレポートしたいと思います！
目次
メンバー紹介
登壇したメンバーは、この6名。
取締役1名、Webディレクター2名、デザイナー2名、フロントエンドエンジニア1名……と、リニューアルに携わったメンバーの大半が登壇しました。「会社の顔」とも言えるサイトのリニューアルですから、このくらいいないと語りつくせませんよね。
ちなみに、各メンバーが本プロジェクトで務めた役割は以下になります。
それぞれ、登壇前の意気込みも聞きましたよ。
俺、ファシリテーターなんだよな……。そうだな……、盛り上がるようがんばります。
赤裸々に語ります。
がんばれたらいいなぁ、と思っています。
皆さまの自社サイトのリニューアルの参考になるようなことが喋れたらいいなぁと思います。
下っ端だから意気込みはないっす。先輩に任せます。困ったらづやさんに全部振ります。
緊張ガクブル。……どうやら、あがり症のメンバーばかりが集まったようです。
LIGブログリニューアルの目的とは？
イベントスタート！ まずは、Webディレクターユニットリーダーのちゃんれみが今回のリニューアルの目的を語ります。
もともとはブログコンテンツを主軸としていたLIGですが、現在はさまざまな事業を展開しています。今回のリニューアルでは「何をやっている会社か」をよりわかりやすくし、かつ従来のブログコンテンツも活かすという意識で設計をしたそうです。
さらに、LIGならではのおもしろコンテンツの復活も。まさか役員紹介ページにまで隠し要素があるとは……！ 今回のリニューアルで改善された点はいっぱいあるそうなので、詳しくは下記の記事を読んでみてくださいね！
なぜ今リニューアルしたのか？ LIGブログリニューアルの課題とポイントとは
ちゃんれみ
パネルディスカッション
つづいては、パネルディスカッション。お題に対して各担当者が回答し、取締役のづやが質問を掘り下げたり、補足するという形式で進行しました。
サイトリニューアルで一番大変だったことは？
ちゃんれみ
普段の業務は受託制作なので、依頼主は外部の企業さまがほとんどです。でも、今回は依頼主が社内（社長）。社長は外出が多いので、スケジュールの調整が大変でした。あとは、ブログとコーポレートサイト、さらに採用コンテンツの要素を1つのサイト内で両立させることに頭を悩ませましたね。ともぞう
長く運用されているので、裏側の機能を整理するのが大変でした。何に使っていたものなのか、残したほうがいいのかなどの取捨選択ですね。よくわからない機能ってたとえばどんなの？「PC一覧には出さない」という謎のチェックボックスがあったり……。それ作ったの俺だわ（笑）。ずんこ
これまで培ってきた風土を損なわずに、”今のLIG”の雰囲気を伝えることに苦労しました。そもそもの「LIGっぽさの表現」も難しかったですね。どういうところが「LIGっぽさ」だと思った？ あと、その雰囲気をどう伝えようとしたの？飲食事業、ゲストハウス、コワーキングなど、事業が多岐にわたる中、社内のメンバーもキャラが濃いですよね。アウトプットのクオリティは高く、中はワイワイにぎやか、みたいなところを伝えようとしました。手法は「写真で伝える」、もうこれに振り切りましたね。バナーとかにも写真を多用して……。ありがとう、いいデザインしてもらったと思ってるよ。「LIGっぽさ」という、うまく言語化できてないところをしっかりデザインに落とし込んでくれて。ミシェル
今まではブログ形式で表現していた下層のページを、従来の「LIGブログっぽさ」を残しつつ、より自由度の高いデザインに改修したことです。経験の未熟な私にとっては、大変だった一方でとても勉強になりました。ハル
過去に蓄積されてきた必要か不要かわからないコードと戦いながら、レスポンシブ対応のためワンソースにするのに苦労しました。それからセブ支社のエンジニアに協力してもらったのですが、英語がしゃべれないので指示が大変でした……。SlackとGoogle翻訳を駆使してなんとかコミュニケーションを取った感じです。翻訳を使っても、技術的な指示は難しくなかった？Bitbucketでプルリクベースで指示しましたね。コードに問題があれば「☓」みたいな単純なコメントをしてしのぎました。全体的に、「前のいいところを残しつつの大幅リニューアル」というところで苦労されたようですね。また、このプロジェクトを通して新たに得た学びも多かったようです。自社サイトだけでなく従業員も成長するという、winwinなプロジェクトだったんですね！
クライアントワークと比較して大変だった点は？
ちゃんれみ
普段はクライアントの窓口がWeb担当者の方に集約されていることが多いのですが、今回同じ立場に立ってみて、その苦労がよくわかりました。また、外部からの依頼だと「お金をいただいて、対価として成果物を作って『稼いでいる』実感を得る」という明確な目標があるのですが、自社サイトの制作は会社としての売上に直接つながるわけではないので、その「稼いでいる」実感との折り合いをつけるのが大変でした。Web事業部の売上として計上できないか、社内政治の部分もがんばりましたね（笑）。精神的にくるよねー。どうやって対処したの？そこはプロジェクトメンバーに恵まれましたね。厳しいフィードバックを受けたとき、みんなで一緒に考えてくれたり……。ひとりで抱え込まないですんだのが大きいです。あとは、お酒を飲んで忘れることですね（笑）。「もう一回やって」って言ったらやってくれる？正直ホント大変で、制作中は「もう二度とやりたくない」……と思ったのですが、終わったいま、もうちょっと改善したいなという気持ちも出てきてます（笑）。ずんこ
「当事者」であることが大変でしたね。「こっちが提案したものに対してなかなか納得してもらえない」っていう普段の受託制作でもよくある葛藤に加えて、「それぞれの事業が見せたい・伝えたい部分もわかるし、でも全部は盛り込めない！」という迷いも生まれて……。クライアントの窓口の人の気持ちがわかった気がしました。普段LIGのサービスを使いすぎて当たり前になって忘れてしまった部分を、ユーザー視点に戻って取り戻すことで、「どうしたら伝わるか？」を考えて乗り越えました。普段の受託制作でも、ユーザー視点を忘れないために気をつけていることってある？私はサービスや商品をきちんと理解して、好きにならないと手を動かせないタイプなので、サービスに登録したり、飲食だったら食べたりして、実体験は欠かさないようにしています。サイトのリニューアル、もう一回やってって言ったらやってくれる？すごくつらいです……（笑）。いろんな仲間がいてやっと完成させることができたので、「また頑張ろう」って言ってくれる仲間がいれば……。社外と社内で、プロジェクトの進め方がけっこう異なるんだなあという印象でした。
クライアントが近くにいるぶんスイスイ話が進むと思いきや、イレギュラーな出張でスケジュール調整が大変だったり、頼みやすいぶんいろんな要望が出てきて、それをまとめるのが大変だったり……意外な話がいっぱいでしたね。個人的には、ずんこさんの「当事者だからこそ葛藤がある」というコメントになるほどなあと思いました。
リニューアルしたサイトの気に入っているところは？
ハル
アニメーションをいろいろと自分なりに表現できたのは面白かったですね。とくに記事詳細や一覧のような「お硬い」ページ以外の、TOPページ、404ページなどのアニメーション実装が楽しかったです。どういうふうにアニメーションを実装したの？CSSやSVGを用いました。404のふわふわした枠はSVGでアニメーションしています。ミシェル
私が作ったものに限らず、いろんなところに隠し要素があるのがLIGっぽくて好き。昔からLIGのファンだった私からすると、お気に入りのものばかりです！あの右上の「瞬獄殺」風のやつとかね。実装は俺だけど（笑）。ほかが全部実装完了していて、「あとはおもしろ要素の瞬獄殺の実装だけ」って状況でも、大事なところだからしっかり作りきってリリースしてましたね（笑）。ずんこ
メインビジュアルは4パターン提案して、実際に決まるまで2週間くらいかかったんですけど、その分とても気に入っています。あと、「要素を削りつつ動線をしっかり作る」という骨組みの設計が楽しかったですね。サムネイルで見せる部分を増やして、1つのモジュールを使い回せるようにしたところもお気に入りです！メインビジュアルは最終的にどうやって決まったの？カルーセルで事業紹介をするデザインなのですが、フロントエンドのハルくんにアニメーションを作ってもらって、見た目プラス動きで納得してもらえました！ともぞう
採用情報の募集要項で「一緒にはたらく人」の顔が見れるのは素敵だなと思います。あと、新卒と中途で分けたのもよかった。ちょっとした心遣いだけど、そういうところが好きです。その「ちょっとした心遣い」はどうやって身につけたの？普段から意識していることで「使えるものを作りたい」というのがあるのですが、細かいところでも、「もっと使ってもらえるようにするにはどうすればいい？」って考えるクセがついているのが大きいかも。最近サービス案件をやったのですが、その経験も生きましたね。「こんなの作れないよ！」って技術者に言われたことはある？んー、ないですね。みんな優秀なので（笑）。逆に、提案してくれることの方が多かったです。ちゃんれみ
登場人物検索と、メンバーページにある「この人が登場する記事」って動線が気に入ってます。LIGに入社する前からLIGのファンだった私は「この人のファンなのに、この人が書いた記事しか見られない。ほかの人が書いた記事の中で、この人が登場する記事も見たい！」っていう思いがあったので、個人的な欲望を叶えられました（笑）。
そうだったんだね。ところでこの機能、使われてるの？……是非みんな使ってください！！！見た目であったり、ちょっとした心遣いを感じる部分、ファンには嬉しい（であろう）機能など、皆それぞれ満足したものを作れた印象でした。自分で「いい！」と思えるものを作れたときほど、嬉しいことはないですよね。この意識は普段の仕事でも発揮していきたいなと思いました。
チームのやりとりやタスク管理の方法は？
チャットツールはChatWork。プロジェクト管理ツールはRedmineを使用し、チケットにタスクを記載、各担当者をアサインしてお願いするかたちで運用していました。Redmineのチケットを更新するとChatworkに通知が飛ぶようにする設定があるのですが、「コミュニケーション用」と「更新通知用」でスレッドをわけて、スレッドが荒れないよう心配りしました。それから各職種ごとの「朝会」を導入したり、とにかく定期的な情報共有の場を設けて、情報の齟齬がないように意識しました。朝会ではどんな話をしていたの？昨日やったこと、今日やること、困っていることの３つを、1分くらいで話してもらうようにしました。人数が多いプロジェクトだと、情報共有だけで大変なんだなと思いました。
時間を決めて要点だけを話すようにしたのは、時間を無駄にしないナイスな手法ですね！
どのような開発環境で制作したのか？
使用したエディタは?
Phpstormです。他のエンジニアも半分はPhpstorm、もう半分はVisual Studio Codeを使っている印象ですね。バックエンドと並行してソースをいじるので、Phpstormが便利でした。テンプレートエンジンは?
「frontplate-cli」という、前CTOが作ったボイラープレートをカスタマイズして使いました。普段は「htmlを作ってからWordPressの方にマークアップし直す」って段取りがあるのですが、今回はスピードを意識して、直接WordPressにマークアップしました。すべてGitで管理しているの?
はい、Gitで管理しています。普段は記事データが入っているSQLも管理するのですが、LIGブログの場合は過去記事のデータが多すぎるので、省かざるを得ませんでした。デザインを100%再現しているの?
モダンブラウザではデザインパーフェクトです。「Mapture」というツールを使用し、デザインをブラウザに合わせて1pxもずれないように実装しました。line-heightなどで若干デザインとズレるけど、どこまでを許容範囲としているの？
デバイスフォントは環境によって変わるので、クロスブラウザで完璧にするのは難しいですね……。基本的にデザインとの整合性はできる限りとってもらいたいですが、プロジェクトによってかけられる工数が違うことも多いので、工数的に厳しいときにはある程度許容しています。ただ、weightはちゃんと見ます（笑）。俺的に、letter-spacingはセーフかな。ハルが言ったように環境によって変わるので、クロスブラウザで完璧に合わせるのは現実的じゃないって思ってる。こんな大規模改修のフロント部分をほぼ一人で担ったハルですが、やはりスムーズに進めるために環境も工夫したんですね。デザインパーフェクトもしっかり気にかけて、忙しい中でもクオリティを落とさない意識はさすがです。同じフロントエンドエンジニアとして、僕も見習いたいと思います！
懇親会
パネルディスカッションの後は、登壇者を含むLIGメンバーと参加者との懇親会。
みなさん遠慮してあまり話さないかと思いきや、和気あいあいとした雰囲気でとても盛り上がっていました！ LIGブログがどのように変わったのか、デザインや開発手法に関してなど、技術的な質問を来場者の皆様からたくさんいただいていたようです。最後はマネージャー兼デューサーのジャックがピシッと締め、時間ぴったりに終えることができました。
さいごに
今回の「LIG SHIP #8」もたくさんの方々に集まっていただき、大盛況で終えることができました。テーマが「自社サイトのリニューアルについて」ということもあり、濃い内容でしたね。リニューアルしたLIGブログは、自社サービスに対する思いや葛藤をまとめ上げ、設計・デザインに落とし込む技術力、そしてマネージメント力など……、担当者の持てる力を全部使った力作だったのだなとあらためて実感しました。
案件を詳しく紹介しつつ、制作に対する思いを話せるイベントは、熱を具体的に伝えやすく、聞く方も理解しやすいので、両者にとって非常に有意義な時間なのではと思います。こういったイベントをもっと増やしていけたらよいですね！
ちなみにLIGではイベントを開催する際にconnpassを用いています。株式会社LIG/いいオフィスグループに登録いただくとイベント開催のお知らせなどが届きますので、ぜひ登録してみてください！
それでは、フロントエンドエンジニアのはっちゃんでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
