JBUG(ジェイバグ)とは

JBUG（ジェイバグ：Japan Backlog User Group）は、Backlogユーザーによるコミュニティです。

プロジェクト管理は、全ての業種/職種において必須のスキルである一方、そのノウハウが学べる場はあまり多くありません。Backlogは国内最大級のプロジェクト管理ツールであり、すでに100万人を超えるユーザーがいることから、「プロジェクト管理」「仕事のうまい進め方」に関する知識やテクニック、ノウハウを学び合うことをねらいとして、JBUGが発足されました。

実体験から学んだ知見やノウハウのシェアを通し、より「働くを楽しくする」を実現したいと思っています。

https://jbug.connpass.com/event/132479/

当日のハッシュタグは #JBUG と #JBUG神戸 があります。

セッション

【セッション1.】書籍執筆プロジェクトでBacklogを使ってスケジュール通りに終わらせた話

このブログでも取り上げた、「WordPressのやさしい教科書。」の執筆スケジュールを管理するためにBacklogを採用した話です。

Backlogをいれてないとメールのやりとりが重なって進捗把握が難しいですよね。
特に、メンバーがたくさんいると個別のやりとりなんかも入って余計ややこしくなります。

BacklogにはGit機能があるので、それで執筆を管理してたそうです。
推敲もプルリクエストで管理できるので、こういう本の原稿だったりドキュメントだったりをBacklogのGitで管理するのはよいですね。

原稿の編集者チェックは、別途Brushupというサービスをつかったそうです。（編集者さんが柔軟に取り入れてくれたというのがすごいな…こういうのめちゃくちゃ渋るイメージがあった）

サービスを使用することでフィードバックの方法が統一されて、もとはちさんは無事以前から計画してた旅行に旅立てたそうです。

【LT 1.】コミュニケーションツールをBacklogに置き換えた時に起きた抗争の話

未だに電話でやりとりするクライアントを絶滅させたいという野望を秘めたLT。
JBUGやBacklog Worldをやって、Backlogを導入したいという相談がくるようになったそう。

Backlogの使い方がわからないというIT系の会社は、だいたい「プロジェクトマネジメントが定着していない」そう。じゃあどうやって管理してるの？と聞くと、エクセルとかで管理している…と。（めちゃあるあるだ…）

Backlogを導入したいという相談を受けて

電話ベースの案件進行をしているのなら、「誰が」「誰に」「何を」言ったのかを記録する。みんながBacklog（正直記録するツールだったらなんでもいい）を使えるようにするというところからスタートする。

ツールを使うときはみんな同じ意識で使うことが大事、というおはなしでした。

【LT 2.】初心者向けPM話とメンバーの巻き込み方

初心者向けのプロジェクトマネジメントのLT。

1. プロジェクトの目的を明確にする
2. 期限を決める（なるはやはダメ）
3. 予算を立てる（予算を立てずにスタートすると、あれもしたいこれもしたいとボリュームが増えていって迷走しがち）
4. 役割分担をする
5. 会議を定義する（コミュニケーションルールを最初に決める）

プロジェクトを進める上では「曖昧にしないこと」「決めきること」が大事！

タスクを細かく分解する

「課題を完了するまでに3ヶ月！」とかになると、もっとタスクを細分化して、数時間で終わるレベルに落とし込むのが重要。細分化したタスクはもちろんBacklogの課題へ！

「プロジェクト」って言うと大それたものに感じるけど、日常のいろんなことは「プロジェクト」になるって仰っていて、確かに！！と思いました。

プロマネなんてむり〜むずかし〜ってなりがちですけど、例えば家族旅行だったり、もっと小さくするなら今日の買い物、も十分プロジェクトになりそうなので、練習になりそうでですね。

「考え抜いて、決めて、課題が出てきて、考え抜いて、決めて…これを繰り返すことがプロジェクトマネジメント」！！

【LT 3.】起業から五年間、Backlogとずっと一緒だった話(受託・自社サービス・営業管理)

会社のBacklogの付き合いの歴史を紹介されていました。

1期目

（当初は）小規模だったためGitも導入せずに開発をすすめていたけど、規模が大きくなってきてタスク管理がないと厳しくなり、Backlogを導入！

2期目

Backlogのルールを徹底化するように。

• 1作業1チケット
• 担当者は必要な人にだけ
• Slackに通知がきたものだけ見る（メンバーが開発されたそう！）

受託開発の方はより粒度を細かくして、自社開発はもっとゆるい使い方をするといった使い分けもしていたそうです。

3期目

3期目は既存の使い方を継続！

4期目

使い方はやはり継続！
ただ、案件相談が膨大になってきたので、営業管理もBacklogに移行。

まとめ

いろんな人のBacklogの使い方を発表されていたんですが、本当に十人十色な使い方をされていたのが印象的でした。

あと、初めてイベントのブログ書く枠で参加したんですが、聞くのと書くの一緒にやるのめちゃめちゃ難しいですね！！聞いてたら手が止まるし書いてたら聞けないジレンマ・・・。

とはいえ、あとでまとめると絶対書かないというかどういう話だったか忘れちゃうから書かないといけないという。もうちょっとこういう速記系スキル磨こうかな！

投稿 JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸 は chiilog に最初に表示されました。

ということで、私が普段やっているレタッチをまとめました！

今回つかう写真はこちらです。

んああぁぁぁ〜〜〜〜〜〜！！！！！かわいいですねえ！！！！！
このまんまるいおめめにかしげた首。最高か。

袋が大好きな我らがジル姫です！！！！！

何はともあれスマートオブジェクト化

レイヤーの上で右クリックでメニューが出るので、この中で「スマートオブジェクトに変換」を選択します。

スマートオブジェクトとは、要するにスマートオブジェクト化した中身をそのままに、拡大・縮小はもちろん、ゆがませたりフィルターをかけたりできるものです。

一度50%に縮小した画像を再度100%に戻すと画像が荒れますよね？でも、スマートオブジェクトにしておくと、50%にしたあと100%にしても画質は元のまま！
画像をたくさんあれやこれやと触るときにはスマートオブジェクト化しておくと便利ですよ。

Camera Raw フィルターをあてる

[フィルター]→[Camera Raw フィルター]（ショートカットだとShift+cmd+A ※Mac）でフィルターをあてます。
ここからが本番！！

まずは明るさの調整

右側になんか調整項目がありますね。
白枠のバーをいじって調整するのもいいですが、私は最近は赤枠のヒストグラムみたいなのを触っています。

ヒストグラムの左側から「黒レベル」「シャドウ」「露出量」「ハイライト」「白レベル」があり、カーソルを乗せると何を触っているのかがわかります。

ちょっと触ってみました。ハイライト、白レベルを抑えめにしつつ露出をあげて、写真を明るくしました。
黒は流石にちょっと残りますね。でも元々黒いところなのでそこまで気にしなくていいかなと思って残しています。

ちなみに、赤枠のところをクリックすると青いハイライトが消えます。（反対側の色違いマークは赤いハイライトが消えます）

一度ここで保存した画像がこちら。

あぁぁぁ〜〜〜〜〜〜！！！！！！かわいい！！！！
明るくなってよりしっかり見えるようになりましたね！かわいいぞ〜〜〜！！！

ホワイトバランスの調整

レイヤーにひっついた、「Camera Raw フィルター」をダブルクリックすると、先程やった明るさ調整から続けて調整ができます。次はホワイトバランスを調整します。

ちょっと本物に比べて赤みが強いので、青と緑に寄せました。
これだけで結構本物の色味に近づいてきた気がします。

明瞭度と彩度を調整する

明瞭度を下げると、輪郭がちょっとずつぼけていくので柔らかい印象の写真になります。
逆に、明瞭度を上げると輪郭がカチカチになります。

ここの設定具合は好みだと思いますが、私は大体10〜20くらいで設定しています。

続いて彩度ですが、ここは読んで字のごとく画像の彩度の調整をします。
私は大体10までくらいでちょっとだけ触るか、どちらも0のままかのどちらかです。

※青のハイライトがうるさいので消しました。

トーンカーブを調整する

Camera Raw フィルター内のタブを移動して、Photoshopおなじみのトーンカーブを調整します。
こちらはバーを動かして調整しています。（グラフ？みたいなところで調整したいときは、「ポイント」タブに移動すればOK）

トーンカーブを入れるとちょっと画像がしゃっきりしますね。

ノイズを低減する

更にタブを移動し、ノイズ低減をします。これは画像がの表示が100%以上じゃないと全然何がどうなっているのかがわからないので、ぐぐっと写真をズームします。わあ、かわいいですね。

この状態でノイズ低減の「鮮度」のバーを右に左にすると、じゃぎじゃぎしているところがなめらかになります。
ここの値は写真によって変わります！あんまりじゃぎじゃぎしてなければそんなにたくさんはかけないです。

鮮度を調整した後は鮮度のコントラストを調整しますが、こちらも画像を見ながら数値を選んでいます。

HSL/グレースケールで特定の色味を調整

まだまだ本物より赤みが強いので、ここで特定の色味に絞って調整をします。（本物がじっとしていないので勘と半々でお送りします）

色味を絞って調整するときは、HSL/グレースケールのタブに移動します。

上の画像ではオレンジの色相・彩度・明度を触りました。
本物（が近くにいるときに）と見比べて、近い色味を探します。（だいたいいない）

こんな感じで調整を加えていき、色合わせを行います。

ここで色相・彩度・明度を触ってると、「明瞭度下げすぎたな・・」とか「暗すぎるな（or明るすぎるな）」というのが出てくるので、これまでに設定したものも再調整を加えます。

色味を調整して、今までの設定もちょっと変えたのがこちら。

だいぶん変わりましたね！本物と比べるとまだちょっとオレンジみが足りない気がしますが、最初に比べると随分近づきました！レタッチのコツはやりすぎないこと。（友達談）

最後に明暗別色補正

結構やり忘れることも多いんですが、ここを設定するとちょっと足りない色味が足されるので、いつもほんのちょっとだけ足しています。

ここで彩度をあげるとそれだけ適応される量が多くなります。何事もほどほどに・・・。

仕上げにスポット修正ブラシツールでゴミ取りして完成！

スマートオブジェクトをダブルクリックすると元画像の編集画面が開くので、袋のちょっとした穴とか写り込んだゴミをスポット修正ブラシツールでちょいちょいと消して保存し、できあがりです！

はぁ・・・天使かよ・・・。かわいいですね。おめめまんまるがたまらないです。（2回目）

ちなみにレタッチ前の写真がこちら。

可愛さは変わらないけど画像の質が全然ちがいますね！！

私は本当はここで一旦1日レタッチ画像を1日置きます。
なぜなら、翌日見たら色味変！！って思うことが結構あるから・・・。

特に人のレタッチだと、肌色がちょっとはつらつとしすぎてたり、と思えば顔色が悪かったり・・・。
まだまだ安定しません。

あと、今回の内容程度であればLightroomのほうがやりやすいんだろうな〜と思います。
仕事では人の写真を上の工程で調整したあと、更に服単位で色の調整をしないといけないのでPhotoshopのほうが使い勝手がよかったりします。

まだまだレタッチ初心者なので、「ここはこんな使い方のほうがいいよ」とか「Lightroom解説すんぜ！」という方は教えてもらえるとうれしいです！

投稿 ベンガル猫を使ったPhotoshopレタッチ術 は chiilog に最初に表示されました。

最低限確認したいところ

フォントを使用するにあたり、業務で使う場合は「個人利用のみ」のフォントは使ってはいけません。なので、最低限「商用利用可」、英語であれば「Commercial Use」と書かれているかどうかをチェックしてください。

もしフォントのまとめ記事などであっても、公開された当初と規約が変わっている可能性があるので、元ページの確認もきちんとするべきです。

その手間も惜しい人はフリーフォントはやめておきましょう

Adobeを契約していれば、Typekitが使えます。Typekitで使えるフォントはすべて同一のライセンスなので、フォントのライセンスについてのページを確認して、違反する用途でなければOKです。1つ1つフォントのライセンスを調べなくてよいので、フリーフォントに比べると気軽に使えます。
別途費用がかかりますが、MORISAWA PASSPORTやLETSなども大変よいですね。

制作には困らない素晴らしいフォントが揃っているので、とにかく制作に集中したいんだ！という人には特におすすめです。

商用？個人利用？

会社のWebサイトやECサイトで使う場合は、どんなページでも商用サイトになります。よって、個人利用のみOKのフォントは使えません。

例えば「アフィリエイトサイトは商用にあたるのか？」とか、「個人的に作ったフォトブック（本の中でフォントを使用）を友達にあげる場合なんかは個人なのか？」とか…こういった商用と個人利用の線引もフォントによってまちまちです。
この辺はページをしっかり熟読するか、書いてなければフォント作者さんに問い合わせる必要があります。

英語はハードル高い？じゃあTypekitにしましょう。私もそうします。

商用利用なら何してもOK？

普通にサイトのバナーやパーツを作る分にはOKですが、何してもOKという訳ではありません。最もわかりやすい例だと、商標登録はしてはいけないとか、Webフォントとして利用してはいけないというのがあります。（※フォントによってOK、NGはまちまちです）

あと、Typekitにこういう例がありますね。

顧客が Typekit のフォントを使用して私が販売する製品をカスタマイズできるようにすることはできますか。

いいえ。同期フォントライセンスまたは Web フォントライセンスのいずれでも、お客様の顧客がデザインの一部として独自のテキストを作成するときにフォントを使用することはできません。これは、グリーティングカード、Tシャツ、コーヒーカップなどのデジタルならびに物理的な製品のいずれにも適用されます。

顧客のために 1 つずつカスタムデザインを作成することはできますが、顧客自身が Web サイトやその他のサービスを通じて Typekit のフォントを使用し、製品をカスタマイズできるようにすることはできません。お客様の顧客が独自のコンテンツを作成できるようにするには、フォントベンダーまたは公認の販売元から直接、カスタムライセンスを購入する必要があります。

引用元：フォントのライセンス – Typekit

ちょっとわかりにくいかもですが…要するに、「HAPPY NEW YEAR」と書かれたはがきデザインを販売する分には問題はないけど、「HAPPY NEW YEAR」の部分をユーザーそれぞれ自由に書き換えて作成するサービスなんかにフォントを組み込むのはいけませんよ、という感じだと思います。

これはTypekitのみにかかわらず、モリサワでも同様のようです。

図解するとこんな感じでしょうか。

クリエイティブをつくるにあたり、ライセンスをしっかり確認するのは義務だと言えます。
「英語だから・・・」とか「どこに書いてあるのかわからないし・・・」と言うのなら、フリーフォントの利用は本当にやめておきましょう。

「誰かの作ったものに敬意を払う」。だから、作者さんがこれはやめてね！と書いていることはしない。ということを守りましょうね、というお話でした。

（というか作者だろうとなんだろうと人が嫌がることはしないのは当たり前のことじゃん・・・！と書いてて思ったのはひみつ。）

投稿 Webデザイナーは最低限意識しておきたい、フリーフォントのライセンスの話 は chiilog に最初に表示されました。

この記事は旧ブログ（mellowchanter）からの移植記事です。

結構WordPressはやってきているのですが、使い始めた頃から我流で、テーマテリトリー・プラグインテリトリーなどの考え方なんてもちろんなくて、全部テーマファイルにベタ書きするような使い方をしていました。

ですが、初めて関西で参加したWordCamp Kobe 2013でWordBenchの存在を知って、たくさんの人と知り合って、だんだんWordPressの機能を活用できるテーマの作り方が出来るようになってきました。

メニューはカスタムメニューを使って、サイドバーにはウィジェットを使って。時にはプラグインで機能を拡張して。
そんなこんなで「WordPressの機能を活用できる」サイトを作るように心がけていたのですが、テーマカスタマイザーの機能はあまり触ったことがなくて、ようやくしっかり触る機会があったので、「これは最初に詰めておいたほうがいいな」と思ったことを、配色を例に書いてみました。

テーマカスタマイザーとは？

管理画面の[外観]→[カスタマイズ]から、テーマの編集が出来る機能のことです。
何を編集できるのかは、その有効化しているテーマによりますが、

• サイトの基本情報（サイト名や、サイトのディスクリプション、ファビコン）
• 固定フロントページの選択（最新の投稿か、特定の固定ページにするのか）

この2点については、おそらくどのテーマでも[外観]→[カスタマイズ]から変更できます。

テーマカスタマイザーが充実しているテーマでは、テキストや背景色はもちろん、SNSのURLを管理したり、レイアウトのカラムを選択したりする機能をもつテーマもあるようです。

また、WordPress4.5からロゴを設定する機能がコアに実装されました。

WordPress 4.5 から追加されたカスタムロゴを使用する方法 | VisuAlive – 埼玉県蕨市で活動するWeb制作者

テーマカスタマイザーをつけるのは簡単？

日本語版CodexのテーマカスタマイズAPIのページにはこうあります。

この記事は、あなたが WordPress のテーマやプラグイン作成について説明しているテーマの作成、プラグインの作成を読んでいることを前提としています。また、オブジェクト指向プログラミングについての理解も必要です。WordPress の Settings_API に精通しているなら、より理解しやすいでしょう。

端的に言うと、難しいです。コードだけならサンプルテーマカスタマイズクラス（英語はこちら）の項目からコピーしてくればいいのですが、ただコピーしたからといって動かないのが難しいところ・・・。

わたしもまだ全貌を掴みきれていないので、具体的なテーマカスタマイザーの使い方は今回は書けませんが、いずれ使用方法をまとめたいなと思います。

テーマカスタマイザーをつけるときに考えたいこと

まず、デザインをするときに「どこをカスタマイズできるようにするのか」を考える必要があります。

色だけでも

• 背景色
• リンクの色
• テキストの色
• ボタンの色
• 見出しテキストの色

などなど、考えられるところはたくさんあります。たとえば、こんなデザインがあるとします。

あえて全て違う色にしてみました。こういうデザインだと、考えうるテーマカスタマイザーで変える箇所は、下図のようになると思います。

1. 全体の背景色
2. カテゴリー名の背景（必要であればカテゴリー名のテキスト色）
3. テキストの色
4. 見出しについているボーダーの色（紫の箇所と灰色の箇所）
5. シェアボタンの背景色
6. この記事の関連記事の背景色

必要であれば、の項目を含めると計8色。ここまで細かすぎると、逆にありがた迷惑な感じもしますね。
かといって、背景だけを変えれるように想定すると、5番のシェアボタンの背景など、設定された色によってはサイトがちぐはぐな感じになってしまいます。

基本的に、使用する色は3色＋無彩色に

3色とは、「ベースカラー」「メインカラー」「アクセントカラー」の3色のことです。Webの基本的な配色ですね。
必要に応じて、「サブカラー」も追加してよいと思いますが、あんまりに増えすぎると「これはどこの色？」となってしまいます。

では、今回のサンプルの場合の配色を考えてみます。

配色はPaletton.comから生成してみました。これをベースに考えてみます。色を整理するとこうなりました。

コンテンツエリアの背景は、白の透過グラデーションにしました。
見出しのボーダーも、有彩色は変更ができるようにして、グレーを薄くしてどんな色が設定された場合でもなじむようにしています。

これで、テーマカスタマイザーで変えた場合はこうなります。

配色の考え方の参考サイト

• 配色を考えやすくするための様々なルール  ｜YATのBLOG
• 単色カラー配色をマスターする！鉄板デザインテクニック9個まとめ（参考パレット25個収録） – PhotoshopVIP
• 人気デザイナーが明かす！カラー配色の秘密テクニック10個まとめ – PhotoshopVIP
• 配色が苦手なひとも大丈夫！瞬速でウェブ用カラーパレットを作成する方法 – PhotoshopVIP

まとめ

わかりやすいのは何かなと思ってデザイン寄りの話になりましたが、例えば

• SNSアカウントへのリンクをカスタマイザーで管理するのか（or プラグインを使うのか）
• No Imageの扱いはどうするのか（アイキャッチが登録されなかったら何も出さないのか、テーマカスタマイザーで設定した画像を出すのか）
• 1カラムや2カラムにするボタンをつけてみる

などなど、テーマカスタマイザーを使って出来ること、したいこと、あえてしないこと、用途はかなり広いです。

多機能・高機能にすると、かえって管理画面が煩雑になって使いづらくなってしまったりすることもあるので、この辺りは要件と要相談ですね。

投稿 WordPressのテーマカスタマイザーを使うときに考えておいたほうがいいなと思ったこと は chiilog に最初に表示されました。

この記事は旧ブログ（mellowchanter）からの移植記事です。

発端はTwitterなのですが、「こういうの困るよねー」というのをまとめました。

※ちなみに私自身はマークアップエンジニアで、デザイナーではありません。

乗算などの特殊描画モード

まずは画像をば。
私は自分でデザインするときはPhotoshopなのでPhotoshopで例をあげます。

よくありそうなデザインですよね。猫かわいいです。
画像はぱくたそさんから拝借しました。

これをWebで表現するなら、「にゃんこかわいいよー！」の文字の下の紫＋白斜線の背景を画像として書き出す必要があります。
（斜線だけ書き出して色指定などやりようは他にもありますが、今回は画像書き出しを想定しています）

そのためには、背景は透過させなければいけません。するとどうなるか・・・

これは明らかに透過ではなくなってしまいましたね。なぜこんなことになるのか？それは乗算レイヤーだからです

乗算は上のレイヤーと下のレイヤーを掛けあわせて描画するので、
掛け合わせる相手がなければ乗算は有効になりません。

背景と一緒に書き出すタイプのデザインであればとても有効ですが、今回のように、単一で書きだす場合は不適当かと思います。

ではこの場合どうやって作るの？というと・・・

カラーオーバーレイで対処するなど、今回の場合なら「塗り」を調整するのが一番早そうです。
乗算ではなくなるので、紫自体の色味も少し濃く調整が必要ですが・・・これで透過PNGとして書き出すことは出来ます。

とにかく「透過PNG想定の乗算（その他描画モードも含む）はやめてほしい」、切なる願いです。

透過での色調整

普段の業務がFireworksなので、今度はFireworksで。例はこんな感じ。

ピンクの背景に文字。別に問題なさそうですよね。では組んでみます。

まずは色をとってきて・・・

このサイトについて

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

おや？デザインよりピンクの色が濃いですね。よくよく色を見てみると・・・

透明度が65％になっていました。気になる人は少数なのかもしれませんが、色が取りにくいのです・・・。
この場合だとスポイトツールで色を取って、更にカラーパレットを選んで・・・と地味に手間がかかります。

※もし単色ではない背景があって、このボックスを透過させたいのなら、この設定は間違っていないと思います。

rgbaという色指定の単位がありますが、これはIE9以降しか指定出来ないので、IE8だと原色の色が表示されてしまいます。
指定の方法は色々とあるのでしょうが（教えてください・・・）、通常のコーディング時にこれをぽんと飛び出してくると正直、「またか・・・」と思うのです。

まとめ

なぜこういうことが起こるのか、それはマークアップエンジニア、デザイナーの相互理解が足りないのが原因ではないかと思います。
ちょっと「こういうのが不便」だったり「これはこれでいいの？」とお互い日常的に話し合えればハッピーですよね。

投稿 マークアップエンジニア（コーダー）が地味に困るデザインデータの話 は chiilog に最初に表示されました。