Recommended
Recommended
More Related Content
Similar to ザ・ノンフィクション - 僕…コントロールパネルつくりました。～新卒２年目の苦闘～ -
Similar to ザ・ノンフィクション - 僕…コントロールパネルつくりました。～新卒２年目の苦闘～ - (20)
ザ・ノンフィクション - 僕…コントロールパネルつくりました。～新卒２年目の苦闘～ -
- 1. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ ザ・ノンフィクション 2018年7月28日 GMOインターネット 田中 草 僕…コントロールパネルつくりました。～新卒２年目の苦闘～
- 2. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ 自己紹介 田中 草 GMOインターネット株式会社 UX開発部 IAプロダクトチーム アプリケーション開発エンジニア（３年目） ConoHaなどの会員販売管理基盤の開発・運用 最近は仮想通貨マイニング系の開発に従事 C# / Visual Basic / .Net Framework
- 7. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ アジェンダ ① ことのはじまり ② ワイヤーフレーム ③ ユーザーテスト ⑤ コンテンツ ④ デザインカンプ
- 8. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ アジェンダ ① ことのはじまり ② ワイヤーフレーム ③ ユーザーテスト ⑤ コンテンツ ④ デザインカンプ
- 9. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 10. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 2015年5月リリース
- 11. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ペルソナ いたいけな25歳 新卒 １年５ヶ月 ・右も左もわからず、とにかくタスクをこなす毎日 半年間のカスタマーサポートチームを経てクラウド戦略チームへ ・VPSとか使ったことないです ・飲み会など何かと雑務をふられる ・UI・UX？ きいたことはあるよ？ ・PL補佐的なお仕事中心
- 12. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ (上司)に呼ばれる とある９月、 偉い人
- 13. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 偉い人 ConoHa をリニューアルするから コンパネをつくれ 期限は開発がはじまる11月な 僕 はい。
- 14. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ コンセプト シンプル 機能追加 ・ユーザフレンドリーなコントロールパネル ・ユーザテストにもとづいたUX設計 ・わかりやすい料金体系 ・かんたん操作な申し込み画面
- 15. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ コンセプト シンプル 機能追加 ・旧ConoHaの機能はそのままに ・アプリケーションサーバーの追加（PaaS） ・DNS・Public APIなど機能の追加 ・多言語対応
- 16. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ アジェンダ ① ことのはじまり ② ワイヤーフレーム ③ ユーザーテスト ⑤ コンテンツ ④ デザインカンプ
- 17. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ え？ まず何すればいいの？
- 18. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ バカなりに読んでみた ・ユーザビリティとは ・ユーザエクスペリエンスとは ・テスト方法 ・分析方法 参考文献：「ユーザビリティエンジニアリング」樽本 徹也 著(2005年発行) ※画像は第2版
- 19. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ テストにもとづいた 論理的な設計が 大事なのはわかった Don’t feel. Think !!
- 20. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ユーザー定義・コンテンツの定義 プロトタイプ制作＆ユーザーテスト デザインの策定 モックアップでのテスト＆微調整 いざ、開発
- 21. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ユーザー定義もコンテンツも リニューアルなので 大きく変更はなさそう
- 22. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ でも、 の作り方わからん なにより時間もない プロトタイプ
- 23. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ とりあえず、やってみよう まずは からメニュー配置
- 24. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 一般的なUIから オマージュ Twitter facebook Google Drive
- 25. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ・グローバルナビゲーション（GN)はページ上部のバーで表示する ・GN左端はサービスロゴ（コンパネTOPへのリンク付） ・右上にアカウント名表示 表示形式はすべて（アカウント名▼） ・表示されているアカウント名は 任意のID or メールアドレス ・アカウント設定はGNからアクセス可能になっている ・TOPページにはサービス追加ボタンがある ・お知らせがある場合、TOPページに表示されている（アイコンも含む） ・通知アイコンのあるものは、必ずPush通知機能がついている ・ピクトグラムのみの表示にはツールチップ（補足情報）が表示される 共通点を抽出
- 26. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ グローバルメニューのみでテスト
- 27. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ カテゴリ ページ 機能 カテゴリ 機能 カテゴリ 機能 プランの選択 専用申込みURLの表示 リージョンの選択 ラベル名変更 Twitterへの投稿ボタン SSH Keyの登録・作成 コンソール URLのクリック数 SSH Keyの選択 シリアルコンソール URLからの申込み数 OSの選択（Linux/Windows） キーマップ設定 至サービス利用者数 ミドルウェア選択（Paasのみ） IPv4アドレス確認 リファラルプログラムで得た報酬分 テンプレート選択（VPSのみ） IPv6アドレス確認 電話認証 ISOファイル選択（URL） サブネットマスク確認 登録情報の確認 root/Administratorのパスワード設定 デフォルトゲートウェイ確認 登録情報の変更 ホスト名の設定 DNSサーバー1 確認 コンパネログインパスワードの変更 ラベル名の設定 DNSサーバー2 確認 ログアウト ローカルネット申込み ローカルネットワークの追加 サーバーステータス確認 コントロールパネル操作履歴 IPアドレス申込み IPアドレスの追加 起動 支払方法の変更 LB申込み ロードバランサー申込み 再起動 チャージ OBS申込み オブジェクトストレージ申込み シャットダウン チャージ残高の確認 DNS申込み DNS申込み（サービス利用ない場合のみ） 電源OFF 請求情報 請求情報 請求情報の確認 専用サーバー削除 クーポン登録 CPU確認 クーポン利用履歴 サービス一覧 サービス一覧 サービス一覧 ディスク容量確認 FAQ FAQ ラベル名変更 スケール 外部リンク ガイド VNCコンソール 逆引きホスト名設定 問い合わせ お問い合わせ シリアルコンソール リソース情報 利用履歴 お知らせ キーマップ設定 OS再インストール 障害情報 IPv4アドレス確認 ISOイメージ挿入（URL選択） メンテナンス情報 IPv6アドレス確認 メモ帳 メモ帳 サブネットマスク確認 コンテナリスト コンテナリスト デフォルトゲートウェイ確認 ディスク容量設定 ディスク容量設定 DNSサーバー1 確認 利用履歴確認 利用履歴確認 DNSサーバー2 確認 IPアドレス追加 サーバーステータス確認 IPアドレス削除 起動 追加IPアドレスリスト 再起動 割当先サーバーリスト シャットダウン グローバルNIC追加 電源OFF グローバルNIC解除 VM削除 グローバルNIC変更 リソース情報 利用履歴 ローカルネットワークセグメント追加申込み 現在のOS確認 ローカルネットワークセグメント削除 OS再インストール ローカルネットワーク割当先リスト ISOイメージ挿入（URL選択） ローカルNIC追加 バックアップデータ確認 ローカルNIC解除 スナップショット取得 ロードバランサー追加申込み スナップショットロールバック ロードバランサー削除 コンバート ロードバランサーリスト スナップショット削除 バランシング先IPアドレスリスト ビデオデバイス設定 ロードバランサーのIPアドレス確認 Virtio設定 接続設定 バランシング設定 逆引きホスト名設定 ヘルスチェック設定 CPU確認 メールアラート宛先設定 ディスク容量確認 利用履歴 利用履歴 スケール Aレコード追加 ブロックストレージ追加 AAAAレコード追加 メモ帳 メモ帳 MXレコード追加 リソース専有・共有の変更 TXTレコード追加 バージョン変更 SRVレコード追加 メールアドレス作成 NSレコード追加 ウィルスチェック設定 レコード削除 迷惑メールフィルター設定 ドメイン管理 管理ドメインの追加 メール転送設定 メール転送設定 keyリスト FTPアカウント追加 Keyを使用しているサーバーリスト FTPアカウント削除 Keyの登録 SFTPアカウント作成 Keyの削除 アクセス解析 アクセス解析設定 初期画面 APIユーザーの作成 ドメイン（サブドメイン）変更 API情報の表示 ドメイン（サブドメイン）削除 パスワード変更 データベース削除 SSL証明書登録 データベース追加 GlobalSignへのリンク データベース削除 SSL サーバー証明書インストール 付属情報 ヘルプ 告知 ネットワーク 追加IP LAN ロード バランサー 専用 サーバー アカウント設定 リファラル プログラム アカウント 情報 クーポン DNS SSL サーバー申込み サーバー設定 スペック メールアドレス作成 申込み VPSトップ イメージ バックアップ VPS ヘルスチェック レコード管理 共用 （PaaS） サービス 専用サーバートップ スペック イメージ オブジェクト ストレージ サービス 接続設定 IPアドレストップ FTPアカウント プラン データベース ドメイン管理 サーバー 申込み その他 支払関連 リファラル プログラム アカウント 情報 支払関連 クーポン 過去の告知 Key管理 Keyリスト SSH Key API API管理 SSL ローカルネットトップ 接続設定 ロードバランサー トップ 大量の機能を カテゴリー分け
- 28. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 操作頻度から 並び替えれば～♪
- 29. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ なんかイケるんじゃん！？
- 30. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ アジェンダ ① ことのはじまり ② ワイヤーフレーム ③ ユーザーテスト ⑤ コンテンツ ④ デザインカンプ
- 31. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 各画面の導線をテスト
- 32. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 33. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ プロトタイプをつくっては
- 34. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ユーザテスト
- 35. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 36. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ つくっては・・・
- 37. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ユーザテスト!!
- 38. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 39. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ つくっては・・・!!!
- 40. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ユーザテスト!!!!!!!!
- 41. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ そして、被験者にも罠が・・・
- 42. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 対象は エンジニア
- 43. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ by ラリー・ウォール氏 怠惰（Laziness） 短気（Impatience） 傲慢（Hubris）
- 44. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 想定外その１ 説明文は基本的に読まない
- 45. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 想定外その２ とりま言ってみる精神旺盛 このボタンわかりづらい このはちゃん ハァハァ このアイコンはわかりづらい！ このはちゃん ハァハァ このカテゴリ分けには違和感あるなあ
- 46. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 問題はもう 初めての後輩問題 つ1
- 47. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 新卒１年目の後輩 が パートナーとなることに
- 48. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ イメージ上の僕の後輩 パイセン マジスゲェっす
- 49. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 実際の僕の後輩
- 50. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 僕後輩ちゃん とても真っ直ぐで すべてを完璧にしたがる子 でもぉ～
- 51. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 僕後輩ちゃん 理想とスケジュールに 折り合いがつけられない
- 52. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ こんな スケジュール は 嫌だ
- 53. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 54. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ アジェンダ ① ことのはじまり ② ワイヤーフレーム ③ ユーザーテスト ⑤ コンテンツ ④ デザインカンプ
- 55. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ なんとかワイヤーフレームは できたので、次はデザイン
- 56. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ところが デザイン策定でも一波乱
- 57. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 超偉い人(取締役)の登場
- 58. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 59. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 他人心あり、予之を忖度す by 『詩経』（小雅・巧言）
- 60. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 61. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 62. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 63. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 64. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 65. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 66. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 67. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 68. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 紆余曲折を経てこの形に
- 69. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ
- 70. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 終わりじゃありません これだけで
- 71. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 必要なパーツデザインを詰める
- 72. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ メニューアイコン 歯車っぽいってなんですか・・・？
- 73. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 吹き出し
- 74. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ エラー表示
- 75. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ フィルター
- 76. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ ポップアップ
- 77. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 一覧表示
- 78. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 追加動作
- 79. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 初期設定ウィザード
- 80. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 申し込み画面
- 81. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 申し込み画面
- 82. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 申し込み画面
- 83. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 申し込み画面
- 84. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 申し込み画面
- 85. おかげさまで5周年、ご愛顧感謝いたします https://www.conoha.jp/ アジェンダ ① ことのはじまり ② ワイヤーフレーム ③ ユーザーテスト ⑤ コンテンツ ④ デザインカンプ
- 86. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 押し寄せるグローバルの波
- 87. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 言語に対応するよ 超偉い人 ・日本語 ・英語 ・中国語 ・韓国語 ４
- 88. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 文言リソースは後回しだった 開発を最優先で
- 89. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ フレーズ1100日本語 約
- 90. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 翻訳後のリソース(x3言語)を入力 日本語(1100フレーズ)を埋める ＋
- 91. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ データ投入は 手動オペレーション 1フレーズずつ
- 92. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 最古の戦術思想に頼る
- 93. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 人海戦術
- 94. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ とりわけ大変なのが 入力内容のチェック
- 95. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 英語 → わかる
- 96. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 中国語 → わかる…?
- 97. ① ことのはじまり ② ワイヤー ③ テスト ④ デザイン ⑤ コンテンツ 韓国語 → 全然わからん…