Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2015/05/30 春のフロントエンド祭り
無名の会社が、
大規模サイト(スマホ対応)相手に、
構築・運用でやってること
株式会社大塚ビジネスサービス 上野裕樹
春のフロントエンドまつり
2015/05/30 春のフロントエンド祭り
この発表のまとめ
(和田あずみさんに
グラレコしてもらいましたー)
2015/05/30 春のフロントエンド祭り
上野裕樹
札幌出身~国立音楽大学~
産業技術大学院大学人間中心デザイン2012
妻と娘(2)、息子(0) 4人で暮らしてます。
メーカーとか
商社とか。
制作会社とか
コンサルとか
2015/05/30 春のフロントエンド祭り
○書籍等
サービスデザイン(翻訳)
[丸善出版]
2015/05/30 春のフロントエンド祭り
流れ
【1.準備段階】 大規模サイトをスマホ対応するために
まずはじめにやったこと。
【2.構築段階】 諦めることも重要な選択
【3.リリース】 ドタバタ劇
【4.運用開始】 でるわでるわ、次から次...
2015/05/30 春のフロントエンド祭り
【1.準備段階】
大規模サイトをスマホ対応するために
まずはじめにやったこと。
2015/05/30 春のフロントエンド祭り
【1.準備段階】
大規模サイトをスマホ対応するためにまずはじめにやったこと。
○技術の制約を確認した。
ユーザー視点、ビジネス視点、マネジメント視点も大事だが、
まず、技術視点の制約を調べた
・スマ...
2015/05/30 春のフロントエンド祭り
【1.準備段階】
大規模サイトをスマホ対応するためにまずはじめにやったこと。
○次に「実際に運用できるか?」を考えた。
・運用者のレベル感
・社内のステークホルダー状態、関係性、
・状況、状態、予想...
2015/05/30 春のフロントエンド祭り
【1.準備段階】
大規模サイトをスマホ対応するためにまずはじめにやったこと。
○ビジネス視点の要求
・サイトの品質要求の確認と、運用品質レベルとのつきあわせ
SEO,a11y,ユーザビリティ、ガイド...
2015/05/30 春のフロントエンド祭り
【1.準備段階】
大規模サイトをスマホ対応するためにまずはじめにやったこと。
○確認のため、ユーザー視点は最重要
ユーザーのサイトの利用状況が、
上記制約の中で組まれるサイトの技術要件で、満たせてい...
2015/05/30 春のフロントエンド祭り
【2.構築段階】
諦めることも重要な選択
2015/05/30 春のフロントエンド祭り
【2.構築段階】
諦めることも重要な選択
○“議論”(?)は大体延長戦。
・色々な会社と連携する上では、
コミュニケーションコストを払いきれないケースも多々。
内部でさえ、コンセンサスはとりづらい。...
2015/05/30 春のフロントエンド祭り
【2.構築段階】
諦めることも重要な選択
→スマホ対応は、
特にデジタルイミグラント・アナログネイティブ世代にとって、
本当に"想像ができない"みたい。
→制作メンバー内でさえ、スマホ対応するときの...
2015/05/30 春のフロントエンド祭り
【2.構築段階】
諦めることも重要な選択
○デッドラインがわかったら。
要件定義なんて、もうしない。切り捨てる。無理無理。
「間に合わなくていいですね?(^^)」の一言で、
全部黙らせる関係性が必要...
2015/05/30 春のフロントエンド祭り
【2.構築段階】
諦めることも重要な選択
■メモ:トリガークラス
<body>
<#wrap .トリガークラスA>
<#main-containar .トリガークラスB>
<#main>
<h1>大...
2015/05/30 春のフロントエンド祭り
【3.リリース】
ドタバタ劇
2015/05/30 春のフロントエンド祭り
【3.リリース】
ドタバタ劇
○「確認してください」というムチャブリ。
これは、ビジネス上の責任の擦り付け合い。定型業務。
制作者はなんともいえない気持ちになるけど、仕事なのでやっとく。
ただそれだ...
2015/05/30 春のフロントエンド祭り
【3.リリース】
ドタバタ劇
○エラー?「いいえ、仕様です。」と言おうと思ってたが、、
公開して、不具合ってほとんどなかった。
奇跡?いいえ、実力です。(どや)
現存のサイトを大体把握(設計視点、ビ...
2015/05/30 春のフロントエンド祭り
【4.運用開始】
でるわでるわ、次から次の難題。
2015/05/30 春のフロントエンド祭り
【4.運用開始】
でるわでるわ、次から次の難題。
○CSS一枚でやろうとして、できなかったこと。
複数プロジェクトを平行で稼働し、リリースさせるためには、
ある一定の領域毎に、切っておいた方がいい。...
2015/05/30 春のフロントエンド祭り
【4.運用開始】
でるわでるわ、次から次の難題。
○後で改修、っつったって、簡単じゃない。
コンテンツが多くて、改修もすごい大変。
新規構築ならまだいいけど、壊して作るのは、なかなか至難。
ただそれ...
2015/05/30 春のフロントエンド祭り
【4.運用開始】
でるわでるわ、次から次の難題。
○気づかなかった、不思議系コンテンツ
大体把握してても、細部まで全部記憶できる人間なんていない。
やっぱり、「ここどうするべ・・・」はあって当然。
...
2015/05/30 春のフロントエンド祭り
★ここまでのフェーズで
クリティカルにやばいこと。
2015/05/30 春のフロントエンド祭り
★ここまでのフェーズで
クリティカルにやばいこと。
コードの整合性がとれなくなる状態やとにかくやばい。
後工程でのリファクタリングが鬼畜になるし、
状況確認のための、データ解析がとてもしにくくなる。...
2015/05/30 春のフロントエンド祭り
★ここまでのフェーズで
クリティカルにやばいこと。
ルールレベルによるけれど、
CSSとかjsとか、どんなにガイドラインを定めても、
よっぽどコミュニケーションがとれて、
今までずっと一緒に仕事をし...
2015/05/30 春のフロントエンド祭り
■■最後に■■
困ったときは、ユーザーに問いかける。
技術的内容は半分、政治的内容は半分、と割り切る。
2015/05/30 春のフロントエンド祭り
ありがとうございました
株式会社 大塚ビジネスサービス 上野
Upcoming SlideShare
Loading in …5
×

20150530 無名の会社が、大規模サイト(スマホ対応)相手に、構築・運用でやってること

627 views

Published on

20150530春のフロントエンド祭り LT in 渋谷TECH LAB PAAK

Published in: Business
  • Login to see the comments

20150530 無名の会社が、大規模サイト(スマホ対応)相手に、構築・運用でやってること

  1. 1. 2015/05/30 春のフロントエンド祭り 無名の会社が、 大規模サイト(スマホ対応)相手に、 構築・運用でやってること 株式会社大塚ビジネスサービス 上野裕樹 春のフロントエンドまつり
  2. 2. 2015/05/30 春のフロントエンド祭り この発表のまとめ (和田あずみさんに グラレコしてもらいましたー)
  3. 3. 2015/05/30 春のフロントエンド祭り 上野裕樹 札幌出身~国立音楽大学~ 産業技術大学院大学人間中心デザイン2012 妻と娘(2)、息子(0) 4人で暮らしてます。 メーカーとか 商社とか。 制作会社とか コンサルとか
  4. 4. 2015/05/30 春のフロントエンド祭り ○書籍等 サービスデザイン(翻訳) [丸善出版]
  5. 5. 2015/05/30 春のフロントエンド祭り 流れ 【1.準備段階】 大規模サイトをスマホ対応するために まずはじめにやったこと。 【2.構築段階】 諦めることも重要な選択 【3.リリース】 ドタバタ劇 【4.運用開始】 でるわでるわ、次から次の難題。
  6. 6. 2015/05/30 春のフロントエンド祭り 【1.準備段階】 大規模サイトをスマホ対応するために まずはじめにやったこと。
  7. 7. 2015/05/30 春のフロントエンド祭り 【1.準備段階】 大規模サイトをスマホ対応するためにまずはじめにやったこと。 ○技術の制約を確認した。 ユーザー視点、ビジネス視点、マネジメント視点も大事だが、 まず、技術視点の制約を調べた ・スマホ対応のネック、「表と図」 他にも、 ・セキュリティ ・CMSの種類、特性 ・iso / JIS ・W3C などなど
  8. 8. 2015/05/30 春のフロントエンド祭り 【1.準備段階】 大規模サイトをスマホ対応するためにまずはじめにやったこと。 ○次に「実際に運用できるか?」を考えた。 ・運用者のレベル感 ・社内のステークホルダー状態、関係性、 ・状況、状態、予想、実績。 適切な運用技術レベルを設定する。
  9. 9. 2015/05/30 春のフロントエンド祭り 【1.準備段階】 大規模サイトをスマホ対応するためにまずはじめにやったこと。 ○ビジネス視点の要求 ・サイトの品質要求の確認と、運用品質レベルとのつきあわせ SEO,a11y,ユーザビリティ、ガイドラインなどなど・・・。
  10. 10. 2015/05/30 春のフロントエンド祭り 【1.準備段階】 大規模サイトをスマホ対応するためにまずはじめにやったこと。 ○確認のため、ユーザー視点は最重要 ユーザーのサイトの利用状況が、 上記制約の中で組まれるサイトの技術要件で、満たせているか。 →ここで大きな気づき。 結局王道な作りが、最も堅実で使いやすい。
  11. 11. 2015/05/30 春のフロントエンド祭り 【2.構築段階】 諦めることも重要な選択
  12. 12. 2015/05/30 春のフロントエンド祭り 【2.構築段階】 諦めることも重要な選択 ○“議論”(?)は大体延長戦。 ・色々な会社と連携する上では、 コミュニケーションコストを払いきれないケースも多々。 内部でさえ、コンセンサスはとりづらい。 正直、ユーザー視点、技術視点、運用視点で、 おかしいだろっていうことも、諦めるポイントは多々ある。 残念と思わない。明日への布石。 じゃないと、やってられない。。
  13. 13. 2015/05/30 春のフロントエンド祭り 【2.構築段階】 諦めることも重要な選択 →スマホ対応は、 特にデジタルイミグラント・アナログネイティブ世代にとって、 本当に"想像ができない"みたい。 →制作メンバー内でさえ、スマホ対応するときの考え方は、 追いつかない人も実際いる。でも仕方ない。難しいもの。 なので、70点目指して頑張る。 ポイントは、コンテンツ領域部分は、構造と運用ルール死守。 いや、死守できないことも多いけど。 正直、テンプレート部分は、後でなんとかなることが多い。
  14. 14. 2015/05/30 春のフロントエンド祭り 【2.構築段階】 諦めることも重要な選択 ○デッドラインがわかったら。 要件定義なんて、もうしない。切り捨てる。無理無理。 「間に合わなくていいですね?(^^)」の一言で、 全部黙らせる関係性が必要。 ただし、断固たる決意で作り上げる。 リファクタリングはできないので、、 一発で完成系をイメージし、作り上げられる技術者必須。 IAさんとエンジニアさんは、もう一蓮托生。ヒャッハー。
  15. 15. 2015/05/30 春のフロントエンド祭り 【2.構築段階】 諦めることも重要な選択 ■メモ:トリガークラス <body> <#wrap .トリガークラスA> <#main-containar .トリガークラスB> <#main> <h1>大見出し <#side> .トリガークラスA .トリガークラスB #main{} 段階に応じて
  16. 16. 2015/05/30 春のフロントエンド祭り 【3.リリース】 ドタバタ劇
  17. 17. 2015/05/30 春のフロントエンド祭り 【3.リリース】 ドタバタ劇 ○「確認してください」というムチャブリ。 これは、ビジネス上の責任の擦り付け合い。定型業務。 制作者はなんともいえない気持ちになるけど、仕事なのでやっとく。 ただそれだけ。
  18. 18. 2015/05/30 春のフロントエンド祭り 【3.リリース】 ドタバタ劇 ○エラー?「いいえ、仕様です。」と言おうと思ってたが、、 公開して、不具合ってほとんどなかった。 奇跡?いいえ、実力です。(どや) 現存のサイトを大体把握(設計視点、ビジネス視点、技術視点) していて、構築段階と構築時にやる気がある人が一人と、 その周辺に優秀な(信頼できる)仲間がいれば、なんとかなる。 そりゃそうか。
  19. 19. 2015/05/30 春のフロントエンド祭り 【4.運用開始】 でるわでるわ、次から次の難題。
  20. 20. 2015/05/30 春のフロントエンド祭り 【4.運用開始】 でるわでるわ、次から次の難題。 ○CSS一枚でやろうとして、できなかったこと。 複数プロジェクトを平行で稼働し、リリースさせるためには、 ある一定の領域毎に、切っておいた方がいい。 正直、"なんじゃこれ"も出てくるけど、後で改修。
  21. 21. 2015/05/30 春のフロントエンド祭り 【4.運用開始】 でるわでるわ、次から次の難題。 ○後で改修、っつったって、簡単じゃない。 コンテンツが多くて、改修もすごい大変。 新規構築ならまだいいけど、壊して作るのは、なかなか至難。 ただそれも慣れてくるから恐ろしい。
  22. 22. 2015/05/30 春のフロントエンド祭り 【4.運用開始】 でるわでるわ、次から次の難題。 ○気づかなかった、不思議系コンテンツ 大体把握してても、細部まで全部記憶できる人間なんていない。 やっぱり、「ここどうするべ・・・」はあって当然。 "ナニコレ珍百景"的な構えで挑む。
  23. 23. 2015/05/30 春のフロントエンド祭り ★ここまでのフェーズで クリティカルにやばいこと。
  24. 24. 2015/05/30 春のフロントエンド祭り ★ここまでのフェーズで クリティカルにやばいこと。 コードの整合性がとれなくなる状態やとにかくやばい。 後工程でのリファクタリングが鬼畜になるし、 状況確認のための、データ解析がとてもしにくくなる。 CSSやJSがどこで使われているかわからなくなるから、 コンポーネントの容量が増えて、重いし、なにより、読みにくい。 単純なミスも増えてくる。
  25. 25. 2015/05/30 春のフロントエンド祭り ★ここまでのフェーズで クリティカルにやばいこと。 ルールレベルによるけれど、 CSSとかjsとか、どんなにガイドラインを定めても、 よっぽどコミュニケーションがとれて、 今までずっと一緒に仕事をしてきている仲間じゃなきゃ、 大体難しい。 プロマネあたりが言います。 「外注して効率よく」 そんなにうまくいったら、世の中平和です。 でも、実コードを書いてないので、 内容を理解する気はさらさらないと思っていた方がよい。
  26. 26. 2015/05/30 春のフロントエンド祭り ■■最後に■■ 困ったときは、ユーザーに問いかける。 技術的内容は半分、政治的内容は半分、と割り切る。
  27. 27. 2015/05/30 春のフロントエンド祭り ありがとうございました 株式会社 大塚ビジネスサービス 上野

×