#KNAPの校正ツール制作　自己紹介／企画編

はじめまして、KNAPの松井です。
社内ブログを書くプレッシャーを避けておりましたが、6月で入社6年目に入る今年、ようやく筆を執りました。
キッカケとしては、社内の広報に力を入れようということで、チーム分けてSNSを使って広報活動することになったのですが、我がチームは「実作業に使用出来るツール開発」を一つの軸としてテーマに制作し、こちらのnoteでは制作の進捗や成果などを月1でまとめた報告用にメンバー担当フェーズ毎に更新していきます。
ただ、弊社はデザイン会社で、Webアプリを作るのが初なのです。
なので、企画段階で出てこなかった機能や、構成で入れてなかったボタンなど後から増えてるかも？笑


開発についての共有や、それ以外のクライアントワークでの社外秘を除いたやり取りを社内のSlackでクローズドにやりとりするのではなく社内外でオープンにやり取りすること（実験的に）、また、普段から業務に携わる知識のインプット／アウトプットを積極的に行うため広報活動はTwitterを中心としてます。
合わせてフォローしていただけると喜びます。

👥 Member(Twitter)
デザイナー：松井 (@popcornstar_888)
エンジニア：櫻井 (@sakurairo_dev)
デザイナー：鈴木 (@k_suzu21)

前段はこんなところで、「実作業に使用出来るツール開発」について、深堀していきたいと思います。

📑 Contents
1：どんなツールにするのか企画発案
2：似たツールの調査

1：どんなツールにするのか企画発案

社内で数少ないエンジニア櫻井がいることやUIに興味があるデザイナー鈴木がいることで、何かWEBアプリを作ることが早々に決まりました。
実作業で困ってることは？というところから、意見出しを始めました。
その中で多くの場合が「確認作業」のフェーズに出てくることがわかりました。

💡 Point
・デザイナーが作ったデザインをディレクターが修正指示
・テストアップ後のコーディング修正指示のまとめ方
・クライアントからの指示をまとめて管理したい
等々

中でも1と3は同じツールで出来そうだなっていう点、また第一弾ということもあり、参考になるツールが既にいくつかあるものの方がわかりやすいんじゃないかということで、「校正用のWEBアプリ」を作成することに決定しました。
我々だけでなく、他の社内メンバーはもちろんですが、同業他社の方々にも使っていただきカスタマイズしてグレードアップもしてもらいたく、オープンソースで公開しようとなりました。

2：似たツールの調査

我社ではクライアント様にデザインの確認をしていただく際、最近では、サイトに動画やアニメーション入れることも多くなったので、簡単にデモを作ることもありますが、基本はPhotoshopからデザイン全面をjpgに書き出し、htmlに貼り付けて提出するのが基本です。

クライアント様からのフィードバックはもちろん様々で、我々からの一方的なデメリットをまとめると、、、

📝 Memo
・メールでテキストベースに修正指示を記入
デメリット→指示の箇所が分かりづらい。メールが埋もれていくため、振り返りがしにくい。

・紙に印刷して手書きの修正指示を記入（最近では流石に減ったかも）
デメリット→訂正指示のコピペができない。チェック自体が紙に印刷した状態でされてる？と思うことがある。修正データが増えて管理が難しい。

・ワード、エクセル、pdfにキャプチャを貼り付けて修正指示を記入
デメリット→修正データが増えて管理が難しい。指示や訂正文のデータがそれぞれ分かれてることが多い。

一般的なものでいうと、こんなところでしょうか。
クライアント様側のメリットはそれぞれ重々承知のうえでございます。

その他便利なツールも増えており、

・AUN(Webサービス)

正直これさえあればいいんじゃ、、？って思うほど理想的な構成ツールで無料で使用できます。※有料プランアリ
ページのURLをたたくとそのページ全体のキャプチャを撮ってくれて、修正したい箇所にメモ書きが出来る機能です。

・Annotate Image(Chrome拡張機能)

ブラウザの拡張機能で、キャプチャに直接書き込みができます。シンプルですが一番手っ取り早いですが、コピペが出来ないため文章の差し替えなどには向きません。

・Figma / XD / Sketch etc(デザイン制作ツール)

Adobeソフトにデザイン制作ツールとしてがメインのアプリですが、制作のデザインをクラウド上にアップして、確認用に共有が出来ます。また、コメントも出来ます。が、まだ弊社ではデザインに関してPhotoshopがメインになりますので、こちらは排除。ワイヤーフレーム作成時には一部使用してます。

などなど、いくつか代替ツールはありますが、なかなか一つの方法では完結できませんでした。
それらを踏襲し、ツールに入れたい機能がまとまってきました。

📝 Memo
・修正指示データの管理を簡単にしたい
・デザインをブラウザで確認するので、ブラウザ上で完結させたい
・テキスト差し替えの際も一つの修正指示データでしたい
・修正箇所の指示場所をわかりやすくしたい
・バージョン管理を一元化したい
・他のページの修正にすぐ飛べるように
・デザイン確認が複数あっても一つのURLで確認出来る
・デザインの追加、別プロジェクト追加は裏側管理
・確認側がログインで必要なのは初回パスワードのみ
・修正指示に対する内容の確認が出来るような簡単なチャット機能
・差し替え画像もここからダウンロード可能に
※進行状況次第で変更あるかも

次回は、これらを踏まえて設計／構成に入っていこうと思ってます。
今回、構成／デザインではFigmaを新たに導入して作成予定です。
どこまで出来るか機能的な話も出来ればなと思ってます。

---

ちょうどいいデザインを。ちょうどいいサービスを。ちょうどいい価値を。

デザイン会社 - KNAP Webデザイン - 東京（恵比寿）