読者です 読者をやめる 読者になる 読者になる

sekaie engineers' blog

セカイエ株式会社が主催するエンジニア勉強会について

なんとなくこの色じゃあかん part2(実践編) ~配色に必要な4つのポイント~

WEBデザイン

どうも。会社の忘年会のカラオケ大会のレベルが半端なくて唖然とした寺田です。

アドベントカレンダーの21日目を担当します。ちなみに全然関係ないですが12月21日はバスケットボールの日だそうです。

qiita.com

前回「なんとなくこの色」っていう言葉を使うWEBデザイナーから脱却したくて、 色彩の基本に関して簡単にまとめてみましたが、

sekaie.hatenablog.com

いよいよその知識を活かしていこうという編です。

「なんとなくこの色にしました。」→「〇〇だからこの色にしました。

という風に言語化できるところまで持っていくのが目標となります。

さてうまく言語化できるのでしょうか。

今回は前回の基礎的な配色の知識を生かしつつ、どういう工程から自他ともに満足のいく配色へ近づけていけるかを4つのポイントを通じてまとめさせていただきます。

1.調和を意識しよう

前回の色相、明度、彩度等の知識を生かして、調和のとれた配色をしていきましょう。

色相、彩度を揃える

一定の色相間で彩度を揃えて配色すると、非常に調和のとれた印象を演出することができます。

トーンを揃える

トーン(色調)とは彩度と明度から色を分けたものの事をいいます。 これは非常にバラバラでまとまりのない配色に調和を持たせるときに非常に役に立ちます。 トーンをある程度何も見ずに揃えられるようになればカッコいいですよね。

また逆にトーンを満遍なく散らばしてあげることで調和を保ちつつ派手な印象を演出することも可能です。

それから豆知識として、彩度が低い方が調和がとれやすいといわれてます。

無彩色の活用

WEBページでは多く活用されておりますが、色と色との間に無彩色(グレーや白や黒等)を持ってくることで、 非常に調和のとれた印象になります。

メインの色達を柔らかく包み込んでくれるイメージです。

f:id:sekaie:20161221105825p:plain

アップルも上手にグレーを活用して他の色を際立てていますね。

2.対比を活用しよう

色の印象って1つの色だけでは決まらないことが多いです。

必ず隣接する色の組み合わせとかで大きく印象が異なってきます。

ここで対比というキーワードが非常に重要になってくるのですが、 その対比を考えていくにあたって前回軽くご紹介させていただいた知識が役に立ちます。

明度対比

f:id:sekaie:20161221152922p:plain

まずは明度の対比です。

強調したい要素に明度の差が強い状態の組み合わせを持ってくることで、非常に視認性が高まり効果的な表現をすることが可能となります。

色相対比

f:id:sekaie:20161221152921p:plain

それから色相です。こちらも対比で効果を得られます。

色相で対比ってことは、、、、そうです!補色を活用すればいいわけです。補色を上手に活用して色相対比を生み出すことでその要素を効果的に強調することができます。

彩度対比

f:id:sekaie:20161221152920p:plain

明度、色相ときたら次は彩度ですね。 彩度も対比を活用します。極端にいうと彩度が高い色は黄色とかになるわけですがそういった色と彩度が低い色、例えば白とか黒との組み合わせで強調させるという方法です。

3.面積の配分

配色には面積が大きく関与してきます。使用する面積によって印象がグンと変わってしまうんです。

色は大きく分けて重要な役割をする色を

メインカラー、サブカラー、アクセントカラーの3種類に分けることができます。

これらに関して簡単に説明すると、

メインカラー

サイトに対して最も大きな印象を与える色です。一番広い面積で使用されます。

サブカラー

メインカラーに続き重要な役割を担う色です。こちらもやや広範囲で使用されます。

アクセントカラー

こちらは面積的に非常に小さい箇所で利用されますが、全体の中では最もユーザーに印象を与える影響力のある色になります。

f:id:sekaie:20161221111101g:plain

同じ色を使っていても、使用する面積を変えるだけでこんなに印象に差が出てしまいます。

4.言葉にしよう

言語化することって大事

やっぱり他の方と色のイメージを共有したい時にそれを言語化できるスキルって重要になってきますよね。

でもなかなか初っ端からそういったことをやるのは難しいと思います。

そこでちょっとずつ練習をしてイメージを言語化することが必要になってくると思います。

例えばこういった配色の場合だと

f:id:sekaie:20161221064538j:plain

・ガーリーなカラフルで可愛い配色

・スイーツ的な甘くふんわりとした配色

・柔らかくて優しい配色

みたいな感じで言語化したりもできます。

そういったイメージを言語化することでイメージを具体化することができ、 配色をより効率よく行えるようになります。

配色の流れ

それでは今までの配色の流れをまとめてみましょう。

1.調和を意識する
2.対比を活用する
3.面積を割り振る
4.言葉で表現する

この4つのポイントを上手に活用していくことで今までの配色がより明確化して、配色を言葉にして説明することも簡単になってくるのではないかと思います。

補足

ただ、もちろん言葉にするのって大切ですが、 他の方とのイメージに大きなギャップがあっては大変ですよね。

そういったことにならないためにも他の方と意見を交換したりしてある程度認識が合うようにしておくことも大切です。

またこういった資料も活用できると思います。

イメージスケール

f:id:sekaie:20161221081732j:plain

日本カラーデザイン研究所(NCD)が開発した「心理軸上に感性語と配色を体系化したシステム」

言葉と配色を組み合わせてたくさんの人にアンケートをとったものです。

こういうものも参考にしながら、

このイメージを言葉で表すとどうなるだろう。。。。。 パッと感じたイメージを言語化していく。

また、他の人が言語化したものをみたり聞いたりするのも非常に力になると思います。

Kuler

AdobeのKulerというツールがありますが、これは使いこなすと非常に重宝すること間違いなしです。

color.adobe.com

f:id:sekaie:20161221081916j:plain

unguis.cre8or.jp

また、このツールの利用者が設定した色のパターンをAdobeのソフトで検索し活用することも可能なので、このツールを活用することで非常に配色の幅が広がります。

なんでその色?どんな効果?

そういったことをスラスラと言いながら説明できるとかっこいいですね。

私もそうなるように頑張ります。

ほな!

エクセル大好き人間がよく使うエクセルショートカット10選

はじめまして。セカイエの横山です。

WEBデザイナーとして入社後、今はSEOを担当してます。

これはセカイエアドベントカレンダーの16日目になります。
qiita.com

毎日色々なツール上で数字を見ていますが、

結局最後はエクセルに数字を入れ込んでゴニョゴニョしてしまう、エクセル大好き人間です。

f:id:sekaie:20161215212428p:plain

きっかけは当時の上長がマウスを使わずに、

軽快な指先のステップだけでエクセルを操る姿に感動し、

エクセルショートカットの世界に足を踏み入れてしまったのでした。

ということで、

今回は個人的に使用頻度が高い、

エクセルショートカットを10選をご紹介します!Windows、excel2016使用時

"移動" を快適に

この3つを覚えればセルの移動はキーボードだけで完結できます。

1. データ範囲の先頭行、末尾行に移動

Ctrl + 矢印キー

f:id:sekaie:20161215220946j:plain

2. シートの先頭行、末尾行に移動

先頭:Ctrl + Home / 末尾:Ctrl + End

f:id:sekaie:20161215221327j:plain

3. ワークシートを移動

前のワークシート:Ctrl + PageUp / 次のワークシート:Ctrl + PageDown

f:id:sekaie:20161215222731j:plain

"編集" を快適に

4. 行・列を選択

行:Shift + Space / 列:Ctrl + Space

f:id:sekaie:20161215223124j:plain

5. 行・列を挿入、削除

挿入:Ctrl + + / 削除:Ctrl + -

f:id:sekaie:20161215224220j:plain

6. 値・書式・数式を貼り付ける

セルをコピー(Ctrl + C)し、貼り付けたいセルを選択後、

値 :Alt → E → S → V (セルの中身のみ貼り付け)

書式:Alt → E → S → T (文字・背景色、枠線などを貼り付け)

数式:Alt → E → S → F (数式を貼り付け)

f:id:sekaie:20161216205053j:plain

※コピー元のセル内には「=500✕2」の式が入っています。

7. 列幅を貼り付ける

セルをコピー(Ctrl + C)し、

f:id:sekaie:20161216210746j:plain

貼り付けたいセルを選択後、

幅 :Alt → E → W → F (列幅を貼り付け)

f:id:sekaie:20161216210755j:plain

8. 検索・置換

「トマト」をすべて「りんご」に置換。

検索 :Ctrl + F (トマトを検索)

f:id:sekaie:20161216212253j:plain

Alt + P (置換タブに移動)

f:id:sekaie:20161216212624j:plain

「りんご」と入力!

Alt → A (すべて置換)

f:id:sekaie:20161216212804j:plain

"ソート" を快適に

9. フィルタを掛ける

貼り付けたいセルを選択後、

フィルタ :Alt → D → F → F

f:id:sekaie:20161216214058j:plain

フィルタ項目表示 :Alt + ↓ (フィルタを選択した状態で)

f:id:sekaie:20161216214338j:plain

10. ソートをかける

大きい順に並び替える :O (フィルタ項目表示している状態で)

小さい順に並び替える :S (フィルタ項目表示している状態で)

項目のチェックイン・アウト :Shift (フィルタ項目表示している状態で)

f:id:sekaie:20161216215326j:plain

と、まだまだあるんですが今回はこんな感じで!

ほな!

サイト内のグラフを統一化しようと改善を試みたけど挫折した話

こんにちは。

セカイエの田中諭です。 「田中」という苗字は多いので、よく下の名前で呼ばれます。 ちなみに諭(さとし)と呼びます。 よろしくどうぞ。

これはセカイエアドベントカレンダーの13日目になります。

qiita.com

さて、今回は、サイト内のグラフを統一化しようと改善を試みたけど挫折した話をします。

話の顛末はこうです。

リノコでの、サイト内のグラフを統一化しようと改善を試みましたが、途中で挫折してしまいました。

ブランチで作成してたものの、そのブランチはリリースをすることなく、そのままクローズです。

そもそも、なぜグラフを統一化しようと改善を試みたのか。

大きく3つの問題点。

f:id:sekaie:20161214110320p:plain

ひとつは、リノコサイト内にはグラフが多々あるけれども、 画像だったりcssのグラフライブラリを使っていたりとグラフの生成方法が複数ありました。 複数の方がデザインされるため、画像でもデザインが微妙に違っていたりしていました。

f:id:sekaie:20161213103222p:plain

ふたつめは、「全体の件数に対する割合」なのにグラフが適切ではありませんでした。 もちろん割合を表示する際に、縦棒グラフで作成されることはあります。 ただ、最適かといわれるとどうでしょう。 全体の総和が円グラフの丸で表現できているため、円グラフの方が最適かなと思います。

f:id:sekaie:20161214110830p:plain

みっつめとして、画像で作成されているため、パソコンとスマートフォンで画像を二つ用意する必要がありました。 「二つ用意すればいいじゃないか」という声が聞こえてきそうですが、、、はい。そのとおりです。 しかし、運用性のことや更新のことを考えると、数字の方が更新しやすいと思ったからです。 また、画像を扱わないエンジニアの方でも修正できるようにしたかったというのもあります。

問題点を解決することで。

こういった問題点を解決することで、開発効率をあげたいと考えました。 プラグインのchart.jsを使うことで、3つとも解決でき、かつ今後、相場のグラフを使うことがあっても、デザインによるブレは発生しません。 開発はなんといっても、やはりスピードと正確性が求められます。

、、、デザインももちろん必要ですが。。。

で、、、、なぜリリースできなかったのか。なぜぽっしゃったのか。

f:id:sekaie:20161213110251p:plain

正直いうと、、いろいろな方々に指摘をいただいたのですが、 そのひとつひとつをつぶして、それでもやりたいっていうモチベーションが自分にありませんでした。 これに関しては、絶対にやれと言われているものではありませんでしたし、これをやってもやらなくても数字は変わらないと言われていたので、ならやめようと判断しました。もちろん、こう言われたからやめるとか、人のせいにしているつもりはありません。 ただ、誰にも求められないものを作成するには、時間がもったいないなと思いました。 せっかく、確認してくれて時間をとっていただいたのに、申し訳ないなとも。。 指摘された内容も、いいかげんに指摘をしているものではありませんでしたので、余計に思います。

  • サイト内でのグラフがバラバラになってきそう。
  • 頻繁に更新しないなら画像の方がいい。(ページパフォーマンスに関して)
  • デザインがわかりにくい。(プラグインなので、細かいデザインの変更が手間)

などなど。 指摘の内容は、的を得ていました。

もうちょっと工夫すればよかったものの、諦めてしまいました。

上司に相談させてもらい、そっとそのブランチをクローズしました。

反省点として、、、

事前の調査不足だったり、自分の認識不足だったり至らないことが多かったです。 また、やはり改善するにあたり、関係者の方達との連携が不十分だったことはいなめません。 指摘されたり、批判されたりすることは、特に気にはならないのですが、やはり少し止まって考えることも必要なんだと思います。 モチベーションしかり、それで左右される自分の未熟さも再発見です。 自分でも win-win でありたいと思ってはいるものの、つい自分が折れたらいいかなんて lose-win を選択してしまうことがあります。 あまりよろしくありませんね。

この反省点を踏まえてどうすべきだったのか。

やはり、関係者の方々への周知をもっとする必要があったと考えています。 今、何が問題点としてあり、なぜこういったことをするのか。 そして、改善を行うことでどういったメリット・デメリットがあるのか。 チームの方への配慮が足りてなく、その説明を怠っていました。 それでは、不満もでます。

モチベーションに関しても、モチベで仕事をするなって話しですよね。 まぁ正直、単に言い訳しているにすぎません。 めんどくさいからやりたくないことを、、いや、モチベが、、なんて。 勝手に自分の中でやめる理由を作っただけです。 恥ずかしい話そんなものです。 やめる理由を作る前に、もっと建設的に話し合いをすればぽしゃることはなかったかもしれません。

まぁこれを機に、人間的にも精神的にも成長していければいいなと。

次回は15日の佐々木さんです。

ほな。

1つのKPIの向こうに

おはようございます。こんにちは。こんばんは。

佐々木です。

当初の予定ではエンジニアとデザイナーの開発環境を紹介するエントリーを書こうと思っていたんですが

予定を変えてKPIのあり方について書きたいなと思います。

これはセカイエアドベントカレンダーの9日目になります。

qiita.com

ちなみに小学生の時、授業でうけた「一本の鉛筆の向こうに」という題材を覚えているでしょうか?

ボディマハッタヤさんは、日本で一番有名なスリランカ人だと思います。

このタイトルは、この間飲んでるときにその話がでて真似てみました。

KPI と KPI ツリー

KPI

そもそもKPIとは何でしょうか

重要業績評価指標(じゅうようぎょうせきひょうかしひょう、英: Key Performance Indicators, KPI)は、組織の目標達成の度合いを定義する補助となる計量基準群である[1]。KPI はビジネスインテリジェンスにおいて、現在のビジネスの状態を示すものとして使われ、今後の対応策でどうなるかを予測するのに使われる。

重要業績評価指標 - Wikipedia

KPI をざっくり抜粋してみましたけど、どの企業や部署でもKPIに近しいものは設定されているんじゃないでしょうか?

ちなみにボク個人のKPIは今年10kg痩せるでした。あと20日で15kg痩せる必要があります()

KPIは何のために設定されるのでしょうか?

経営的な視点からすると、「売上をあげる」などと言ったことが多いと思います?(ラブアンドピースとかみたいな会社としての理念とは別な話です)

これは僕が就職活動をしているときに何処かの企業が言ってたのを今でも覚えています。

KPI ツリー

では、KPIツリーとはなんでしょうか。

大目的のKPIはどのKPIから構成されているのかを、ツリー式に細分化しKPIの一覧を設計することです。

【決定版】アプリ事業のKPIツリー! | Growth Hack Journal

注目してもらいたいのは、KPIツリーはルートとなるKPIはそのブランチのKPIに依存している(形成されている)ということです。

上記ページでも「売上」をKPIツリーのルートに持ってきて、そのブランチに「アクティブユーザ」と「平均単価」を設定しています。

売上はアクティブユーザと平均単価の両方から形成されているので、この2つのKPIのどちらかが減少すると、当然親の「売上」も減少します。

KPIを設定する上で気をつけなければいけないこと

クォーターや半年、一年といった長いスパンでKPIを設定するのがもうじきやってくるでしょう or 締めの時期が迫っているでしょう。

実際にKPIを設定し実現する。工程をしてみていかがでしたでしょうか。

これらKPIに対して、各部署がそれらKPIを達成すべく施策や対策などを練る。などといったことを行うことが多いと思います。

この時に気をつけなければいけないことがあります。

特に部署のメンバーである人たちが心に据えておかなければいけないことだと思います。

それは、

一社員に与えられたKPIは飽くまで各部署に細分化されたKPIを、更に細分化されたKPIであって、そのKPIの向こう側には大目的である企業としてのKPIが設定されている。

ということです。

自分たちに課せられた課題、KPIは部署の目的を達成するためだけでなく、その向こう側の会社の目的を達成するための1つの目標であるということです。

これを吐き違えて、自分に課せられた課題を達成するために、他の事を疎かにし、会社としての目的を忘れてしまっては本末転倒です。

今一度、この時期に自分個人に課せられた課題は部署の目的を達成する為のどの要素であるのか。

そして自分が所属している部署の目的は会社にとっての目的を達成する為のどの要素であるのか。

考えてみてはいかがでしょうか!

おわりに

セカイエアドベントカレンダー9日目でした。

次回は13日の田中さんです。

ほな!

チーム開発で生産性をあげるためにやってみたこと

セカイエ株式会社 Advent Calendar 2016 - Qiita の8日目の記事です。 

まいどどうも、恋ダンスが気になっいるエンジニアの中島です。
今回は、チーム開発で生産性をあげるためにやってみたことをいくつかご紹介したいと思います。
詳細なコードの例などは、Qiita の方にまとめているので是非。

管理画面

コンテンツの作成、公開、非公開など一部の操作を管理画面を通して操作できるようにしました。これにより、エンジニア以外も更新作業を安全かつ迅速に対応できるようになりました。また、RailsVue.js など本番環境とは違うフレームワークなども試すことによって、技術的な知見も得れるようになったことも個人的には良かったかなぁと感じています。

qiita.com

GithubSQL管理

とはいっても、諸事情により管理画面を作ることが困難なDB操作、運用もまだまだたくさん残っています。 ここは、実行するSQLをすべてGithub のPRベースで行うようにしてみました。

  • Github でのPRにより、確認と実行が非同期で作業できるようになった
  • ログが残るようになった(問題の特定がはやくできるようになった)
  • エンジニア以外も、クエリを書くようになった

などのメリットがありました。
このような運用が1番良い方法ではないと思いますが、以前よりは改善できていると考えています。

レビューをリマインドするように

リノコでは、Github Flow を用いてチーム開発を進めています。 "レビュー" や、"レビュー後の修正のレビュー" など毎回メンションが飛んでしまうと、その都度個人の作業が止まうのでどうにかできないかなぁと感じていました。 もちろん、早急に対応するべきものもありますが、PRで、"レビュー中" のラベルが付いているものを定期的に確認して、チャットに流すようにしました。

f:id:sekaie:20161208022502p:plain

他の人の作業もおおまかに把握するこもできて、導入してみてよかったと思っています。 運用してみると、2時間おきくらいの感覚でチャットに流すようにするとちょうどいいなという感じです。

qiita.com

さきほど、発表された機能を使ってレビューのフローを考えてもヨサソウですね。

誰でも祈りが送れるように

社内で管理しているサービス(リポジトリ)に対して、誰でも issue が作成できるようにしてみました。これは主に非エンジニア向けのためのものです。 カジュアルに思ったことをエンジニアに伝えることによって、解決できたこともあってよかったなぁという感じです。

f:id:sekaie:20161208095127p:plain

名言を流してみた

毎朝、チャットに偉人の名言を流すようにしてみました。個人的に、名言が好きで励まされることが多くてモチベーション管理に役立ちました。

おわりに

今回は、チーム開発で生産性をあげるためにやってみたことをいくつかご紹介してみました。参考にしていただけたら幸いです。 今後も、「試せることは試してみて、よかったら継続してやっていく」というスタンスでやっていきたいと思います。

明日は、佐々木さんがエンジニア・デザイナーの机周り・開発環境をご紹介してくれます!
たのしみですね!

ほな!

なんとなくこの色じゃあかん part1(基礎知識編)

WEBデザイン

どうも。最近は忘年会のことで頭がいっぱいの寺田です。

アドベントカレンダーの7日目を担当します。ちなみに関係ないですが、9月7日が誕生日です。

qiita.com

今まで何となくWebデザイナーという職種を捉えて、ひたすら納期に間に合うように業務していた感がありましたが、立派な上司や先輩方に囲まれてもう少し自分の職種に対して深掘りしていかなければならないと反省している今日この頃です。

そこで、まずはデザインをしていく上で避けては通れない「色」についてちょっとまとめてみました。

「色」って正直言葉じゃ説明難しいですよね〜 今まで漠然とこういうイメージだとか、こういう雰囲気とか、さらっとした感覚で説明することが多かったんですが、

やっぱプロとしてデザインをやって行くのであればもう少し深い説明ができないとあかんなって思ってます。

なんとなくこの色にしました。から→〇〇だからこの色にしました。

って言えるにはどうしたらいいんかな。。 そもそも「色」って言葉でうまく説明できんのかな。

色ってセンスじゃね?

とか色々考えてましたが、

一応配色にもセオリーがあるので、それをかなり基本的な部分から分析して考えながらデザインする方法に関して焦点をおいて記事を書いてみようと思います。

配色のセオリー

そもそも配色とは

感覚面での個性をふまえると同時に、色相・明度・彩度(色の三属性)の異なる色の無限の組み合わせに挑戦し、選択するという意味 by wikipedia

むむむ。。難しい。大変そう。

だが要するに色の組み合わせを考えるってことですよね。 その為にセオリーを学べば「色」を言語化して伝えるっていうことに繋がるかもしれない。

色の表現

色を言葉で表現するにはどういった方法があるのか。 ってことを色相・明度・彩度の色の三属性ごとに考えてみましょう。

【色相】

f:id:sekaie:20161207061128p:plain

このようなパターンでAとBは補色の関係にあります。 それと同時にAとBは色相という言葉を使って説明すると、 色相が遠いとか離れてるって表現になるわけです。 (逆に近いのは隣接する色になります。)

【明度】

f:id:sekaie:20161207062837p:plain

明度は高い低いっていう表現になります。 暗いとか明るいとかっていう表現は厳密にはあまりよろしくないみたいです。

【彩度】

f:id:sekaie:20161207064224p:plain

彩度は高い低いの他にもこういった表現があります。 確かに鮮やかとかはよく使ってますね。

※注意しておいてほしいのが、明度と彩度は必ずしも平行して高くなったり低くなったりしないってことです。

f:id:sekaie:20161207065424p:plain

あとは色を表現する方法ってないのかな。。 って考えた時に、名前がついてる色ってあったなって思いました。

例えば、桜色とかからし色とか黄金色とかです。 こういうのって赤黄色青とかと違って厳密に色を表現できるものですよね。 でもそこまで多くはないでしょって思ってたのですが、 思ってたよりかなり数が多くてびっくりしました。

www.colordic.org

これらをさらっと覚えておくだけでも結構プロっぽいですよね。 伝える時に色やイメージに深みが出てくるのではないでしょうか。

色の働き

ここが結構肝心な部分だと思います。

色って心理的にも様々な効果とか働きがあって、それが科学的にも証明されています。 その色の働き的な部分を紐解いて行くことが、 配色をする上でも説明する上でも重要になってくるわけです。

例えば色の効果や機能として代表的なものはこのような感じです。

【赤】

f:id:sekaie:20161207073058p:plain

赤はやっぱり暖かく感じる効果がありますよね。 あとは危険なイメージもあります。 気持ちを高ぶらせる効果や、 食欲増進効果もあるとされています。


【青】

f:id:sekaie:20161207073322p:plain

青は逆に寒く感じる効果がありますね。 あとは集中力を高めたり、冷静にさせる働きもあります。 食欲減退効果もあるのでダイエットグッズに活用されたりもしています。


【緑】

f:id:sekaie:20161207073629p:plain

緑は疲れを癒す効果があるとされています。 穏やかな気持ちになったり癒しや安心感を与えることができるので、 非常に様々なシーンでその効果を活用されていますね。


【白】

f:id:sekaie:20161207073934p:plain

白は純粋さや、清潔な印象を与えることができます。 また軽く見えるような効果があります。


【黒】

f:id:sekaie:20161207074243p:plain

黒は恐怖感や暗い気持ちになるといった効果はもちろんのこと、 重く見えたりする効果もあります。

他にも様々な効果や機能がありますので配色をする知識の一部として知っておくのもいいと思います。

それから先ほども少し出てきましたが、 暖色と寒色に関して少し考えてみましょう。

f:id:sekaie:20161207123301j:plain

このタコヤキの写真を見てもわかるように、 背景が暖色(赤)の方は美味しく見えて、 背景の寒色(青)の方はまずく見えるような効果があります。

厳密に言えば寒色の方が美味しく感じるような食材もありますが基本的には上の写真のような効果があります。

それから色は重さを持っているという点です。

下の画像をごらんください。

f:id:sekaie:20161207123737j:plain

白っぽい箱と、黒っぽい箱、2種類ありますが、どっちが重そうでしょうか。

黒ですよね。

これは単純に明度が高いと軽く見えて、低いと重く見えるという性質があるからです。

また、注意を引く色としては赤が非常に大きな効果を発揮します。

f:id:sekaie:20161207124244j:plain

こういったことが色の機能の基本的なことです。

視認性

こちらをごらんください。

f:id:sekaie:20161207124716j:plain

どちらが見やすいですか? 理由はなんだと思います?

これは文字の色が違うだけなのですが、 かなり見やすさに差が出ていますよね。

見やすさ、視認性は明度の差で決まります。 視認性はWEBデザインでは非常に重要な要素になります。

見やすいということはもちろんのこと、どこを目立たせて人に注目してほしいか。 そういった部分を明らかにさせる時には明度の差を意識しましょう。

ちなみに白黒の差が一番明度の差が大きいので、一番視認性が高いのは白と黒の組み合わせとなります。

誘目性

f:id:sekaie:20161207155502p:plain

誘目性の高い色の組み合わせは「赤、黄色、黒、白」等によって表現できます。 もちろん、あまり多用すると派手になってしまってダサくなってしまいます。

また、暖色、寒色は進出色、後退色とも言えます。 進出色は要素が飛び出て見えたりする効果があります。 逆に後退色は奥行きのある空間を演出したりする効果があります。

f:id:sekaie:20161207133832j:plain

与える印象が全然違いますね。

特定の目立たせたい部分で利用したり。 ページ全体に大胆に進出色を使って圧倒するようなイメージがいいのか、 後退色を活用して人を引き込むようなイメージかとか。

そういったことを考えながら色を使い分けるとクライアントやチーム内で説明ができて業務が円滑に進みそうですね。

part2(実践編)に続きます。。。

明日はナチュラルイケメンの中島さんが記事書きます!

ほな!

セカイエのアラート監視周りについての雑多書き

おはようございます。こんにちは。こんばんは。

佐々木です。

キリスト教ではありませんが、アドベントカレンダーの1日目を担当します。どうぞよろしくお願いします。

サンタさんに何買ってもらおうかなあ。。。

qiita.com

今日はセカイエのアラート周りについて書きます。

まあまずはじめに

セカイエでは AWS を使ってサービスを展開しています。主にEC2です(ほぼEC2です)

AWSには CloudWatch というサービスがありますね。

aws.amazon.com

RDSやEC2のメトリックも AWS CloudWatch を使って取得しています。

ただ EC2 で展開しているサービスのエラーログ (PHP LOG) とかの監視が難しいです。

エラーがあったよ。くらいのアラートを飛ばすことは簡単にできるんですが、何のアラートなのかを把握することが出来ません(多分)

この辺をどうにか CloudWatch + α な修正で解消したいと思ってまとめてみたのが今回の記事の内容になります。

CloudWatch のインストール

EC2を使っていればインストールは難しくありません。↓のドキュメントがそのままになります。

docs.aws.amazon.com

サービス (EC2 側) のログを整形する

サービス側のログは↓みたいな感じにテキストでガーガー出力されています。

F, [2016-12-01T16:23:29.405110 #2634] FATAL -- :
ActionController::RoutingError (No route matches [GET] "/apple-touch-icon.png"):
  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:38:in `call_app'
  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:22:in `call'
  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/request_id.rb:21:in `call'
  vendor/budnle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/methodoverride.rb:22:in `call'
  vendor/budnle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/runtime.rb:18:in `call'
  vendor/budnle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/static.rb:116:in `call'
  vendor/budnle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/sendfile.rb:113:in `call'
  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/engine.rb:518:in `call'
  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/application.rb:165:in `call'
  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:580:in `process_client'
  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:674:in `worker_loop'
  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:529:in `spawn_missing_workers'
  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:140:in `start'
  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/bin/unicorn_rails:209:in `<top (required)>'
  vendor/budnle/ruby/2.2.0/bin/unicorn_rails:23:in `load'
  vendor/budnle/ruby/2.2.0/bin/unicorn_rails:23:in `<main>'

CloudWatch では Log を json で出力しておくと何かと都合がいいです。

docs.aws.amazon.com

なので、このテキストログを td-agent で json に整形しましょう

<source>
  type tail
  path /var/log/hogehoge/production.log
  pos_file /var/log/td-agent/production.log.pos
  tag log.hogehoge
  format multiline
  format_firstline /^.,/
  format1 /^., \[(?<time>[^\.]+).+\][ ]+(?<severity>[^ ]+) -- :(?<message>.*)$/
  time_format %Y-%m-%dT%H:%M:%S
</source>

<match log.hogehoge>
  type file
  format json
  path /var/log/hogehoge/production.log.json
  symlink_path /var/log/hogehoge/production.log.json
  buffer_type file
  buffer_path /var/log/hogehoge/production.log.bufffer
  include_time_key true
</match>

こうすると先程のテキストログが↓のようになります

{"severity":"FATAL","message":" \nActionController::RoutingError (No route matches [GET] \"/apple-touch-icon.png\"):\n  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'\n  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'\n  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:38:in `call_app'\n  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/rack/logger.rb:22:in `call'\n  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/request_id.rb:21:in `call'\n  vendor/budnle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/methodoverride.rb:22:in `call'\n  vendor/budnle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/runtime.rb:18:in `call'\n  vendor/budnle/ruby/2.2.0/gems/activesupport-4.2.3/lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'\n  vendor/budnle/ruby/2.2.0/gems/actionpack-4.2.3/lib/action_dispatch/middleware/static.rb:116:in `call'\n  vendor/budnle/ruby/2.2.0/gems/rack-1.6.4/lib/rack/sendfile.rb:113:in `call'\n  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/engine.rb:518:in `call'\n  vendor/budnle/ruby/2.2.0/gems/railties-4.2.3/lib/rails/application.rb:165:in `call'\n  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:580:in `process_client'\n  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:674:in `worker_loop'\n  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:529:in `spawn_missing_workers'\n  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:140:in `start'\n  vendor/budnle/ruby/2.2.0/gems/unicorn-4.9.0/bin/unicorn_rails:209:in `<top (required)>'\n  vendor/budnle/ruby/2.2.0/bin/unicorn_rails:23:in `load'\n  vendor/budnle/ruby/2.2.0/bin/unicorn_rails:23:in `<main>'\n\n","time":"2016-12-01T16:23:29+09:00"}

あとはこの出力した jsonaws logs agent で cloud watch に送ります。

log_group name とかは適宜設定してください。

[/var/log/hogehoge/production.log]
datetime_format = %Y-%m-%d %H:%M:%S
file = /var/log/hogehoge/production.log.json
buffer_duration = 5000
log_stream_name = {hostname}
initial_position = end_of_file
log_group_name = /var/log/hogehoge/production.log

cloud watch にはログが json で貯まるようになりました。 f:id:sekaie:20161201174610p:plain

CloudWatch でフィルタリング

Cloud Watch には WARNING / ERROR / FATAL など複数のレベルのログがたまります。

この中で、アラートとして監視したいログをフィルタリングすることが出来ます。

この辺も CloudWatch の標準機能なのでドキュメントをみながら設定しましょう。

今回は ERROR / FATAL をフィルタしました。

f:id:sekaie:20161201175454p:plain

CloudWatch でアラート設定

フィルタしたログを今度はアラートの設定を掛けます。

これも CloudWatch の機能なので説明は割愛します。

docs.aws.amazon.com

RDSなどのメトリックと違って、ログの行数でアラートをかけるのが大きな違いかと思います。

設定はそんな難しくありません。

アラートを設定すると、はじめにの項で説明した「エラーログが出力されたよ」っていうアラートが飛ぶようになります。

ログアラートを監視出来るようにする。

ここまでは AWS CloudWatch を使った設定でしたが、ここからは AWS APIRuby を使います。

rake task になっている部分を抜粋してみました。

AWSAPIで定義してあるアラームをチェックして、ALARM状態になっていたら、そのアラートのログフィルタされているログを出力してチャットワークに出力するスクリプトです。

  desc "Monitoring"
  task :check => :environment do
    chatwork = ::Chatwork.new
    aws = ::Aws.new

    aws.alarms.each do |alarm|
      next unless alarm.state_value == 'ALARM'
      alarm_name = alarm.alarm_name
      metric_name = alarm.metric_name
      log_alarm = ::Monitoring::LogAlarm.find_by({
        alarm_name: alarm_name,
        metric_name: metric_name,
      })

      log = aws.log_events({
        log_group_name: log_alarm.log_group_name,
        filter_pattern: log_alarm.filter_pattern,
        start_time: (Time.now - 300).to_i
      }).reverse.first

      chatwork.error(log.message)
    end
  end

これを定期的に動かしておけば、アラートがなったタイミングでチャットワークに↓のようにエラー文を出力してくれるようになりました。

f:id:sekaie:20161201183456p:plain

今後の展望とかまとめ

今回は CloudWatch + αでアラートを監視する仕組みについて紹介しました。

これは自分が担当している分析基盤ツールのアラート監視には取り入れていてテスト段階ですが、これを他のサービスにも展開していきたい所存です。

あわよくばOSSあたりで開発できればいいなと思っております。

セカイエアドベントカレンダー1日目でしたー。

ほな!