夫婦でやってるWeb屋です。

2018-09-16

デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その1

こんにちは、みみです。

当日の朝は、楽しみ過ぎて朝四時に起きてしまったほどですが、満員電車が大の苦手な私、平日のコントリビューターデイなんて本当、誰が言い出したのもう二度と参加しないぞとギュウギュウの丸ノ内線から吐き出された時には思っておりました。

…結果、頑張って参加して良かったと心底思ったのでこれを書いています。

今年は初めてのデザインチームがありました

コントリビューターデイでは、様々なジャンルのチームに分かれて作業をします。

雑食な私、CLIに行って色々教えて貰っちゃおうかな、とかプラグインやテーマをみんなで作るの楽しそう、とか色々浮ついていたのですが、直前に決まったデザインチームが面白そう過ぎて英語喋れないにも関わらず参加しました。

そう、2日目の目玉スピーカーでもあるタミーさんがデザインチームのリーダー。デザインチームをやるのはWordCamp Tokyo では初の試みだそうです。

WordPress のデザインはどうやって作られているのか

世界シェア3割越えの WordPress ですが、そのデザインがどのように作られているかは余り知られていない気がします。

基本はココから

Make WordPress Design – A Better User Experience

WordPressのデザインチームのオフィシャルページ。

First steps – Make WordPress Design

Handbookに最初のステップがまとめてあります。

SlackやTrello、Githubその他いろんなツールを使って、いろいろなフィードバックがあっていろいろな貢献方法があるのですが、その一つとしてデザインのトリアージをする、という作業をしてみました。

そのために、作業はまず各種ツールのアカウント作成から始まりました。

コントリビューターデイの作業フロー

1. 付箋に名前とメールアドレスを書きます。

まずは付箋が配られて、名前とメールアドレスを書いてホワイトボードに貼ります。

似顔絵とかさらっと入っているところが流石デザインチーム!

2. WordPress.org 及び Slackのアカウント作ります。

ここのページを見ながらアカウントを作成します。

作成したら、#Design チャンネルへ移動。

ここからはSlack 上でやり取りします。これ、後から見直せるし、英語でもすぐググれるし、シャイな日本人でも発言しやすくてオススメ。

この日のやり取り( https://wordpress.slack.com/archives/C02S78ZAL/p1536889396000100 )もSlack上に残っていると思うので(バックアップどうしてるのかは不明、見れなかったらごめんなさい)よかったらチェックしてみてください。

3. デザインチームのブログを購読(メール登録。無料です。)

ブログの通知がメールへ届くようにします。

PCで見ると右側にあるココ

4. Trelloのアカウントを作成します。

さらに、 Trello にアカウントを作成します。たぶん、様々なフィードバックをココでまとめて、視覚化しているのだと思います。

5. Gutenberg をダウンロード・インストールします。

ローカル環境にWordPressおよびGutenbergをダウンロード・インストールします。デザイナーさんが多いのでローカル環境がない人も多々みられました。そのために、http://poopy.life (Poopy.lifeはWP Sandboxによる無料のWordPressテスト用サービス、みたいです)への案内もありました。

6. Triageのシミュレーション

5までで作業準備の完了です。

ここからSlack上で毎週行われているという「triage」と呼ばれる作業のシミュレーションをしました。トリアージなんて医療関連でしか聞いたこと無かったけれど、確かにやることはトリアージです。

ココで言うトリアージとは、基本的には、Core Tracと呼ばれているWordPress本体に寄せられたデザインフィードバックの一覧に古い順から片っ端に目を通して正しいラベルをつけたり、テストをしたり、モックアップを追加したり、何らかのアクションを起こすことです。多分。

この日は、

40199 (Customize: collapse suggested and previously uploaded header images with accordions) – WordPress Trac

このチケットを例にやってみました。カスタマイザーの中の、サイトヘッダーの画像(動画)の表示について議論しています。

…最初から結構なボリュームの議題でびびりました(だからこそ古いのでしょう)。チケットの内容を把握し、コメント履歴を読み話の流れを掴んで問題点を理解していきます。この作業、日本語でも結構難しいと思うけれど、英語だからほんと大変!でもみんなでやると、何となく理解が進んで意見が出せました。

そして、デザインだしモックアップ(絵)があるから、普通のチケットよりも分かりやすいかも、とも思いました。参加された皆さんも結構手応えを感じた方も多かったようです。

この日はシミュレーションということもあり、内容が大きいこともあってこのチケットは即解決とはなりませんでしたが、その後、他のチケットについてモックアップを作成する人もいらして有意義なセッションでした。

7. 3チームに分かれて作業…

この後、お昼を挟んで3チームに分かれて作業をしたのですが…すみません、長くなったのでその2に分けます!これは私の悪文のせいだけではなくて、それだけセッションが充実していた証拠 … なはず!

 コントリビューターディは200人超えの参加!
今回が初めてという方もたくさんいらっしゃいました!(私もだよ!)

他のチームの人たちも興味津々!

というわけで、午後の部へ続く…。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter