社内ドキュメントのフォーマットづくり
入社当時、社内ルールや過去案件の資料、共有ドキュメント的な整備がない状態でした。 仕事の依頼は主に口頭か Chatwork で行なわれ、資料は Dropbox で共有していました。
▼入社月に契約（もしくはダウンロード）したソフトやサービス類
- Adobe CC
- Office 365
- Dropbox
- Chatwork（連絡用）
- メールクライアント（Thunderbird）
- FTPソフト（Transmit）
- 社内スケジュール（iCloud カレンダー）
- テキストエディタ（Sublime Text）
私が入ってしばらく経ったタイミングで「trello」というタスク管理を使いはじめ、 現在では、Chatwork から slack をメインで使用、trello は redmine に変わりました。
私が情報を共有する上で、フォーマット化が必要だと思ったのは、 入社日に「何をどこにどうやって保存（連絡）するか」を迷ったことがきっかけです。
ふだん、自分一人だけで作業していれば、ルール化とまで大がかりな対応の必要ないかもしれません。 しかし、複数人が非同期・多発的にファイルやフォルダを、それぞれが個々人の好きなように作ってしまったらどうでしょう。いざ自分が他の人が作ったファイルを確認しようにも、どこになにがあるかを探し出すもしくは見つけられず聞かなければいけない状態になります。また、自分で作った場合でも年月が経つと「あのファイルどこだっけ？」というのもよく見かける光景です。
これは聞いた話ですが、人は1日10分、成人人生の3680時間、実に153日間を探し物に費やしているといいます。 いつでも・誰でも・迷わず資料を探しやすい環境を整えたいと考え、試行錯誤をしました。
フォルダ構成をフォーマット化
Dropbox には、既存クライアントごとにフォルダが作成されていて、いくつか中身を確認しました。 ただしフォルダやファイル構成にルール化が見えず、確認してみると「自由にやってよい」と。
なので、クライアントフォルダ下の構成を下記のように作り、また案件以外の社内用の資料も混ざってしまうと探すのが手間だったので、名前を工夫して上位にくるようにしました。
また、進行中なのか、完了なのか状況がステータスが変わった案件も乱立してきたため、Finder をスクロールして見つけるまでが少しストレスだったので、失注案件・運用案件・完了案件フォルダを作り、振り分けることで社内で進行中の案件（フォルダ）がわかりやすい構成にしました。
運用面での失敗
上記から特に変わらないまま、2年程経った頃に改めてフォーマットを見直すタイミングがありました。
これは私の配慮不足だったのですが、担当外のフォルダを勝手に完了フォルダに移動したことで、追加修正が入った時に探させてしまったことがあったようで、私としてはルール化していたつもりだったのですが、個々人でやっていたにすぎず、他のルールもない状況下で定着できていなかったこと。また、フォルダ内の下層フォルダのルール化も必要だという声が上がりました。
完了前の作業段階では、ローカルで保存していたデザインファイルや資料を、都度 プロジェクトフォルダ内の下層で分けて共有すること、また、ステータス分けも改めて意図を説明しましたがわかりにくいということで廃止し、フォルダからすべての案件を出し並列になるような元の構成に戻しました。
フォルダ構成の今
プロジェクト内の下層フォルダ構成は、以下のよう制作のフェーズが見える化できるよう工夫しました。 また、更新対応は、ある程度該当箇所が決まっていることもあり、資料フォルダ下層のフォルダを用意し、依頼日 依頼番号 該当ページ 概要で名前をつけるほか、フォルダからも詳細な情報を辿れるように「チケット番号（#0000）」を付けました。
フォルダ名を一定にすることで
- 過去どれくらいの頻度（依頼番号）で依頼が入ったか
- どこのページにどういった更新依頼が入るか
- 具体的にはどういったフローで対応したか
かが、わかるようにしています。
チケットだけではなく、フォルダからもチケットを確認できる導線を用意することで、チケットを読まずとも（特にデザイン要素が強い更新の場合）ある程度の対応内容が掴めるようにして、もし自分が不在でも自分以外の誰でもアクセスしやすい状況になるよう工夫をしました。
もちろん、主軸であるチケットに、テキストで書き起こされたドキュメントは欠かせません。 次回、プロジェクト管理ツールの Redmine とドキュメントとしても併用して Dropbox Paper についてまとめます。
打ち合わせや会議の無駄を無くす4つのポイント
チャットやメールなど文章でのやりとりだけでは難しい「他対他」の意見交換や決めごとの場として、打ち合わせや会議への出席は皆さん少なからず経験があると思います。
例えば、このような経験はないでしょうか？
クライアント「ちょっと相談があり打ち合わせお願いします、◯/◯はどうでしょう。」
Aさん『了解です』
Aさん『◯/◯の打ち合わせ、Bさんも参加してください』
Bさん「承知しました」
◯/◯ ---
Aさん『今日はよろしくおねがいします。』
クライアント「こちらこそ、よろしくおねがいします。メールの操作を教えて下さい。」
A・Bさん「？！！」
メールの操作方法のレクチャーかと思いよくよく聞いてみると「送信できるがここ数日受信されない」というメールサーバーの容量の問題でした。 容量制限が原因説明と容量変更をしてその会は終了となりました。
もう少しクライアントも相談の概要を伝えてくれることが多いため、若干脚色していますが、この会話の流れに違和感がない方もいらっしゃるとおもいます。
しかし、私は会開催当日になって「何のための会か」がわかること、わざわざ時間を作って会わずとも「メールや電話で解決できる内容」だった点に違和感を感じました。 大人数が膝を突き合わせる「時間」をどうすれば有意義にできるかを考え、事前の情報共有がとても重要だという結論に至りました。
今回は、会議や打ち合わせの際に気をつけているポイントをまとめてみました。
議題を明確にしよう
「議題」とは、何について話し合うかという「お題」です。
先般の例で言えば、クライアントから「打ち合わせをお願いします」と連絡を受けたタイミングで、概要について触れられないのであれば、日程の連絡と合わせて、自分から聞いてしまうのがベターだと考えます。
事前に聞いておくことで、当日のお互いの共通認識をもって話がスタートできる他に こちらから予想される質問への回答や類似事項への対応、与件など下調べすることで、当日はさらにスムーズな話し合いができます。
また、わざわざ合わずとも「メールで済む話だった」という事もなくなります。 議題（用件）はクライアントも伝えてるつもりになっていたり、合わなくて済む話し合いなのか判断が難しかったりします。自分からリード（先回り）して目的を明確にしましょう。
出席メンバーを知ろう
出席者は人数や名前だけではなく、役割も明確にしておきます。
人数が把握できていれば、お茶出しや資料不足でのバタつきを防げますし、参加者の役割が明確だと、進行役や発言の際の最低限のルールなども共有しておけば、当日いきなり進行役を任せられる（社内で経験として任せられる等は別）、発言が多方から飛び交いまとまらないなどの問題を軽減できると思います。
以前、クライアントの担当部門へ改めて受注内容の説明のために伺ったはずが、ドアを開けると先方の役員・クライアント社外メンバー含め20名程の会議への参加だったという経験があります。
ここで伝えたいのは、人数よりも出席者同士の「役割」についてです。「誰がどういった視点でなぜそう発言されたのか」は、その人の役割がわかっていれば更に深く理解できると考えます（もちろん「あなたは誰ですか」と根掘り葉掘り聞くのではなく、要望の背景や意図を「認識に違いがないか」と要約して聞き返すだけでも十分に思います）。
また、先方の想定してる全体の体制図と自分の役割（タスク）を確認すると、プロジェクトがうまく回らないものが少なくないため、また「誰かがやるだろう」「そっちがやってくれるのでは」という勝手な思い込みや認識のズレを無くす目的もあります。
メンバー紹介は当日開始の軽い挨拶の際、プロジェクト期間中に初めての参加者がいれば、紹介タイムを設けるなどしています。もちろん、自分と一緒に誰かに参加をお願いする際は、会の概要を説明し、聞いているだけでいいのか、今後どの役割を任せるつもりだから、特にそのフェーズについて気になる点があれば発言しても大丈夫など事前に打ち合わせておくとベターだと思います。
資料やレジュメを共有しよう
打ち合わせや会議で話し合う議題や出席メンバー、日時や場所など情報は1箇所にまとめて事前共有しておきます。共有ツールは WordやExcel でもいいと思いますが、私は Dropbox Paper を使っています。
また、議題の重さやボリューム、開催日時によりますが、資料は「開催の2日前」、最低でも「前日の午前中までに共有」がベターと考えます。 前日の午後や会議直前だと、双方に確認する時間が少なく、当日まずは資料を読むことから始まるからです。
事前に共有する内容が重要と思います。
- 議題
- 出席者/進行役
- 日時/場所
- 決定予定事項
- いくつかの質問と提案
何についての会か、誰が出席するのか、日時や場所はどこかのほか、会議の主題から話が反れないよう「決定予定事項」として、議題の結果（ゴール）となる内容や指針を明確にしておきます。
また、時間があれば、要望への確認事項や提案など予め共有します。 先方の意図の取り違えがないか確認の目的以外に、こちらのスタンスやをキチンと伝え、課題解決の主軸を早めに掴むのに有効と考えています。
誰が進行するか/共有するか
以前は打ち合わせや会議の依頼側が会を進行、レジュメなどを共有するものと思い込んでいましたが、相手がクライアントであれ、代理店であれ誰であれ、自分から進行/レジュメ作成・共有しています。
自分が知りたい情報や進め方は自分がよく知っているからです。
依頼主がクライアントの場合、打ち合わせには慣れていますが、あくまでも社内でのこと。社外の会社に、詳しくはない業務外の依頼に慣れていない方が多く、社内調整以上に難しいと思います。
それならば、依頼内容の与件について、理解や提案ができる自分がボールを持って先頭に立ってしまう。会後のアクションプランまで整理することで、その場の時間短縮以上にクライアントの負担を軽くし、その後のプロジェクト全体進行までも主導権をもって進められると考えます。 以上が、私が会議や打ち合わせの際に気をつけているポイントです。
この他に資料作成についても、レジュメや議事録のフォーマットを作成しておけば1から作る時間が短縮でき、共有フォーマットを数回使えば、どこに何が書いてあるか目が慣れるので負担なく探せるなど細かいことや、会の具体的な質問や進め方などの話は別にまとめようと思います。
これまでに参加した打ち合わせや会議がわかりやすかったかどうかのフィードバックを得ることがないですが、これまでの経験を振り返ってみました。
ここまで読んでくれた方、ありがとうございました。
ヘンゼルとグレーテルの白い石
最近、何かをしたり見たりしながら、 次こうしようとかアレってこういうことなんじゃないかとか 自分なりにいろんなことに対して、一つの答えを出したくらいに、 同じようなテーマや考えの本や記事を目にすることが多くて、 自分の頭にはっきり意識して思い浮かんだから、もう世にでてる同じものや言葉が目に入るようになったのかと思うと、見ているようで見ていないし、考えているようで考えてないことがいっぱいあるんだと思うと、身の回りのあらゆることが求めている答えのヒントかもしれない。
考察して判断し、実行する力
周囲の環境や人"ある時"の言動をなぜそうしてるのか(してないのか) その根本を理解したり、はたまたそれが正しいかは疑った方がいいと思う。
「この場合こう対処したらいいのか」と端的に捉えるのは楽だけど、 自分ならどうするか「判断軸」を作っていくと、 イレギュラーなことがあっても自分を助けてくれる「柱」になる。
なぜそうしたのか、その背景は何か、過去にどうしてきたのかを予測して、 プラス自分の判断軸を添えて、相手に伝えると "当たり前"だったことが、意外にも「なぜだっけ？」と振り返ったり、 "当たり前のアップデート"のきっかけになったりもする。
そうやって「自分の判断軸」もアップデートしていくと、 なお良いかなと思う。（オチはない）
当日たくさんツイートする枠を担当した所感
1/25土 の SaCSS にツイッター係(代打)で参加しました。 https://connpass.com/event/160091/
続きを読むGoogle Chrome に入れている11+αの拡張機能
新しく入れた拡張機能は、入れたまましばらく利用しないと「これなんだっけ？」と思い出せなかったり、似たような拡張でもっと良さそうなものを調べたい時のために、2020年1月現在でインストールしている拡張機能をメモっておきます。
1. Awesome Screenshot
ブラウザ画面を画像で書き出したり、書き出した画像にテキストや図を描いたりもできます。ブラウザ以外だとMacでは「プレビュー機能」で同じことができますね。
2. The QR Code Extention
https://chrome.google.com/webstore/detail/qr-code-generator/ebpgklajhmppeobdbgnmdicladcjgakk?hl=jachrome.google.com
ブラウザで表示しているページのURLをQRコードで表示してくれます。 「パソコンで見てるページをスマホで確認したいけど、URLを打つのが面倒・・・」という時に、URLを手打ちする手間が省けて便利です。 他にも同種の拡張機能や、ウェブを制作工程であれば、タスクランナーや BrowserSync でも可能ですが、サッと確認したい時などに使います。
3. Respoisive viewer
最近知りました。 普段は Win/Mac、Android/iOS 対応範囲すべて実機確認してるので、複数スマホのレイアウトの確認が一度にできるようなので、試してみようと思い入れてみました。 （Safari の拡張のように、実は実機では崩れていただと残念ですが、、、） 他にも、Sizzy・Responsive Web Design Tester（Firefox、Opera対応）・Emmet Re:view があります。
4. Dimensions
ブラウザからWebページ内にある各要素の距離などを測ることができます。 最近入れたばかりでまだ出動機会が少ないですが、数値を指定して依頼する時に便利そうです。
5. Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkmechrome.google.com
表示されている画像やブラウザの幅などを定規で測るように簡単に計測できるようです。最近入れて、イマイチ使い方がわからず・・・もう少し使ってみよう・・・！
6. CSS Peeper
サイト内の色アセット一覧がわかるだけでなく、サイト内で使われている画像のダウンロードもできるます。 デザインもオシャレで見てキモチがいいです。
7. Site Palette
CSS Peeper に似ていますが、指定したページからPhotoshopやSketchのカラーパレットを生成できるようです。配色パターンも作れます。 最近入れました、デザイン提案の際に使おうと思いました。
8. PerfectPixel
デザインデータを透かしで配置して、ピクセル単位の精度でWebサイトを開発する時に便利そうです。昔は自前でやっていました。。便利な世の中になったものです。
9. Spectrum
表示しているページに対して、ワンクリックで色覚多様性をシミュレートできる拡張機能です。最近入れてまだちゃんと試していません。アクセシビリティのことも考えて他にも同類の拡張があるのでまず試してみようと思います。
10. Window Resizer
ウィンドウの各サイズを1クリックで変更してくれます。レスポンシブ表示の確認の際に便利です。
11. Fonts Ninja
ページで使われているフォントを教えてくれます。フォントがフリーか、画像フォントの検索などできたりします。デザイン検証や確認の時に便利です。
Ecosia
番外編「検索するたびに森林が守られる」という検索エンジンの拡張機能？のようなもの←のようです、検索するたびに発生する収益の一部で森林を守ることができるようです。本当なのかどういう仕組みなのかわからないですが、検索するたびに右上に木がカウントアップされると、目に見えて楽しいです。
以上が主に使っている・使おうとしている拡張機能でした。 半年に1回くらいは見直しできたらいいなと思います。
ではでは。
デザイン依頼時に伝えている29+1個のこと
依頼時に伝えている情報
プロジェクト情報
- クライアント情報（業種業態/営業範囲/事業内容/URL/SNS利用の有無 etc）
- 目的（新規/リニューアル/追加）
- 媒体（ウェブ・紙・広告・アプリ）
- 主要コンテンツと主なターゲット
- ターゲットの利用シーン（閲覧前後でどう気持ちが変わって欲しいか）
- 競合他社
デザインマップ（方針・土台となるルール）
- サイトマップ
- ワイヤーフレーム
- イメージボード（ウェブサイトやパンフレット、写真やカラーパレットなど）
- 逆イメージボード（これは違うよねーも）
- キーワード（イメージボードでも利用）
- アクセシビリティへの配慮
- ページ要素（JSで動作する箇所・CMS出力箇所）
- 利用デバイス（最小サイズ幅・ブレイクポイント）
- デザインツールの要望
デザインパーツ（道具）
- フォント（ウェブフォント可否/イメージボードから相談）
- カラー（ベース・メイン・アクセント他）
- ロゴ
- インターフェイス（ワイヤーや競合などからも相談）
- 写真/原稿素材
- イラスト作成の有無（テイスト相談）
制作工程
- 公開日までの着手から完成日
- 現在の全体進行状況
- 優先度の案内
- 連絡手段（ツール）と方法
- 最優先ページの案内
- 質疑応答
- 日程確認と見積のお願い
- 見積もり提出希望期間
普段、受託案件のウェブサイト制作（新規・リニューアル）がほとんどですが、
デザイナーさんに依頼する際、伝いたい情報量が多くなってしまいます。
受け取った相手が必要な情報の読み取りが難しいんだなと気づかされた出来事があり、もう少し依頼書自体を見やすくし、パッと見通しがきいて見落としがないようデザインしなければ…！と、改めて依頼時に伝えている情報をざっと書き出してみました。
と、箇条書きだけどこれに補足説明が加わると、さすがに見た目が混雑しすぎて、
冗長になりすぎるから「表」にしたらどうだろうか。が現状の答え。
プロジェクト毎に内容は違えど、お伝えする情報はほぼ変わらないのに、
これまでなぜ雛形を作ろうと思わなかったのか…
次回のプロジェクトでやってみよう。
（自分用のは手書きで「情報をA4用紙一枚にまとめる」もやってみたいが、現実まとめる時間が取れない…）
