Goalist Design Blog

デザイン批評をはじめてみた

f:id:k-mitsui:20170725084338j:plain

 

こんにちはミツイです。

いつのまにかセミが鳴き始めていますね。

もう夏です。すでに夏バテです。頑張ります。

 

デザインの歴史シリーズ書いてましたが、今回は趣向を変えて、チームでのデザインの進め方についてです。

 

ゴーリストでは、最近デザイナーが2人増えて、デザインチームが4人になりました。

せっかくなので、個々でデザイン進めるのではなく、チーム力を活かしつつデザインしていこうかと。

「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド」という本がとても良かったので、これを参考にしつつチームでのデザイン進めています。

 

Amazon.co.jp: みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド eBook: アーロン・イリザリー(Aaron Irizarry);アダム・コナー(Adam Connor), 安藤 貴子: Kindleストア

 

一番ナルホドと思ったところについて、ざっくり説明してみます。(個人的な解釈入ってるので、ぜひ実際に本を読んでもらうことをオススメします。)

 

批評で進めるデザイン

デザイン制作を進める際に、個人で最後まで作ってレビューするのではなく、こまめに批評しながらイテレーション(反復して改善)していきます。

批評という言葉が日本語的にニュアンス伝わりにくいかと思いますが、

1.チームやステークホルダーにデザインを見せて、気になる点を洗い出してもらう

2.それを元にデザイナーが改善していく

というのを繰り返します。

批評してもらうタイミングは、定例でもデザインに迷った時でも良いですが、基本、わりとこまめにやります。

 

批評をする時のコツ

1.あくまで人ではなく、制作物に対しての批評である

あくまでデザインを良くするための批評です。

デザイナーを鍛えるためと思って「色についてもっと勉強しなきゃいけないよ」とか、個人に対しての批評はしません。こういうの言われると、萎縮します。

批評が嫌になってしまったら負けです。

 

2.批評のための基準を持つ

デザインをする際に大事なのが

目的:デザインを見る人(使う人)がしたいこと、満たしたい欲求

ペルソナ:どんな人が見る(使う)のか

シナリオ:どんな時に(前後の時間含めて)、どうやって見る(使う)のか

の3つ。

目的に関しては作る側の目的を思いがちですが、デザイナーはあくまで利用者側に立ちます。

批評する時は、上記3つにあっているかどうかが基準になります。

「男子中学生(ペルソナ)が通学中の電車で(どんな時に)漫画を読む(したいこと)ためには、トップページから漫画を読むまでの画面遷移が多すぎるんじゃない?」とか。

上記3つはデザインをする時の基準になるので、批評する全員がそれを理解していることが重要。必要な場合は、mtg前に改めて共有したりします。

 

3.して貰った批評に対して、すぐに応えるのではなく、まず聞く

これ、意外とできていないです。

「このサービスの利用者はじっくり見る時間はないんじゃないかな。今のデザインだと申し込みボタンを見つけにくくない?」

とか批評されて

「いや、そこは既に考えていて、色でアクセントつけてるんですよ」

とか即答しちゃったりしがち。

いきなり応えずに、してもらった批評に対して5秒(くらい?)考えてみて、その意味を咀嚼するのが大事です。

さらに「それはつまり、操作できる部分が多すぎて何をしていいか迷いそう、ってことです?」みたいに能動的な質問をしていきます。

相手の言ってることを理解していくには、「そうですか?」みたいに意味のない質問をするんじゃなくて、自分の言葉で言い換えて聞く。まったく理解できていなければ「すいません。もうちょっと詳しく聞いていいですか?」など、開いた質問(はい・いいえで答えられない)をする。

 

4.批評時に改善案を考えない

これもやれていないことが多いです。

上述の例だと「ボタンを見つけにくくない?」に対して、「もっとボタンを大きくしたほうがいいんじゃない?」とか「いや、色を変えた方がいいか」とか考え出してしまうと、そこで批評の時間が止まってしまいます。

さらに、次の批評(ボタンの問題以外の話題)に移った時に批評メンバーの誰かが「ボタンの配置が…」とか考えてしまうと、次の批評についてはその人が参加しない状態になります。せっかく集まっている意味がないですね。

批評は、改善が必要な点の洗い出しに終始させます。

改善案を皆で考えるとしたら、批評とは別に時間を設けます。

 

まとめ

批評でデザインを進めることで、

・複数人の視点が入ることで、より多角的に改善が必要な点を洗い出せる

・批評にとどめることで改善案をデザイナーが考えることになり、最大公約数的なデザインになるのを防げる

・前回批評時に対する改善案を見ることで、参加した全員がナレッジを貯めていくことができる

等のメリットがあります。

中でも、チームでのナレッジの共有は一番大事かもですね。

知識としてのベストプラクティス(最も効率のよい技法、手法)が増えるし、デザインすることで得られるコツのようなものを全員で共有できます。

 

あと、デザイン以外にもこの批評のやり方は有効だと思います。

チームで作業するいろんな場面で批評を使ってみて欲しいです。

 

とはいえ、“お昼なに食べる?”みたいな時に批評を始めると、非常に面倒くさい人になるのでご注意くださいw

新卒二期、ブログを書く(デザインチーム編)

こんにちは、6月からデザイン部に配属されました新卒2期生ナガタです。

3ヶ月の新人研修も終わり、早速ブログ記事を書く事がOKRの中に組み込まれました。およっ…! 

 

一瞬の動揺。こんなピヨピヨ状態で書けることあるんですか…全然出せるもの無いんですけど…。

兎にも角にも何かしらのアウトプットを、という信念をまず持つ事にします。手を動かすが善。それこそ正義。立ち止まらないことが大事です。

今後のマルチタスクや差し込み案件への肩ならしも兼ねてボコボコ倒していきたいと思います。はい。

 

自己紹介

ブログ投稿初回ということもあり、ゆるりと私自身の自己紹介も兼ねようと思います。

大学では芸術学部に所属して現代美術の分野をちょこっとかじってました。

他には休学中にレタス農家で3ヶ月働いてお金貯めたりとか、ニュージーランドで半年ぶらぶらしていたりとか。

 

f:id:e-nagata:20170707100742j:plainf:id:e-nagata:20170707100732j:plain

いちめんのれたす、いちめんのれたす、見渡す限りのいちめんのれたす

アルバイト期間中にレタスの切り口を美しく切ることができるようになったりとか。あと、レタスって若さによって緑色が全然違うんですけど、そういう違いが身体でわかるようになったのが最高に楽しかったです。何かしら自分の技術があがっていくのを実感することが好きです。若き日の良き思い出です。はい。

 

基本的に自分も周りも好き勝手生きてる人達の中にしばらく浸っていたので、就職なんて大丈夫なのかと思ってましたが案外大丈夫でした。よかった。

仕事には全然関係ありませんがオフィスで魚肉ソーセージをよく食べます。デスク周辺の方にギョっとされますが(魚肉だけに)あんまり気にしません。自由度高めです。さすがに一ヶ月くらいは遠慮して一口チョコをつまんでいました。でも最近は皆さんの優しさに甘えて食べたい物を食べています。(なんて寛容な会社だ)

就職しても奔放に生きております。

 

 

研修を終え

さて、晴れてデザイン部へと配属されたものの、ウェブデザインって何だ!UIUXって何だ!という右も左もわからないピヨピヨ状態が実情です。技術的な知識やネタなど一つも無い状態でブログなど最初から手駒がありません。困ります。

 

 

 

困りました…

 

 

 

ので、

とりあえず先月までをざっと振り返り、新人研修課題と現在取り組んでいることを中心に書いてみようと思います。新人研修が受けられるのも新卒の大特権ですよね。

 

 

~先月(2017.6)まで~

4,5月は新卒全員共通のプログラミングの基礎的な研修が行われ、6月からは配属が決まり部署別研修が実施されました。

デザイン部では「2018年(自社)新卒採用ページを制作せよ!」が最終課題として課されました。3週間でリサーチ・サイトの企画・画面のデザインまでこなします。(さすがにコーディングまでは手が届かずモックアップでのデモでプレゼンしました)

 

まあなんとかなるっしょ~と思ってたら全然そんなことなかった。まず調べる、調べる、わからないことはぐぐる。まずウェブサイト制作の段取りを把握するために諸々のサイトを参考にしました。

サイト制作の段取りはざっくりですが大きく以下に分けることができそうです。

1.目的や対象、方針の設定 

2.計画

3.制作 

 

どの工程もわからないこと多しだったんですが、今回は「なぜつくる、誰に何を届ける」を考えることが自分に一番必要なポイントだったのかなと思いました。

ターゲットがどういう人で何を知りたいのかとか、知りたい情報をどういうコンテンツとしてまとめるのかとか、想定ターゲットが欲しいであろう情報についても考えるんですが、他人の気持ちになるってほんと難しいと思いました。情報収集とか絞り込みも全然まだまだ甘かった。

 

プレゼンの質疑応答で

「(出したモックで)ターゲットに刺さる部分ってどこだと思う?」

という質問に逆にぐさぐさ刺されました。ぐっ。

要は特に誰が欲しいものでもない当たり障り無いものを作ってしまったのですね、琴線に触れるポイントが無いというか。無難だけどメインおかずの無い幕の内弁当というか。

何に特化させるのか?コンテンツを削いで削いで削ぎまくった後に残るものって何なのか?そういう絞り込みが大事なんだってことが特に勉強になりました。特化すると同時にいろんなものを切り捨てる勇気。

 

世の中のコンテンツってすごいんだなあ。(しみじみ)

 

 

 

しみじみしていたのもつかの間

6月末に一旦落ち着いた研修課題ですが、引き続き、今月と来月の2ヶ月で本腰入れて新卒採用サイトを制作することが決定しました。ちょうど昨日スケジューリングを終え、初っ端から工数足りない予感しかしませんが切り捨てる勇気を持ってバサバサなぎ倒していきたいと思います。

戦いは始まったばかりです。

 

次回のブログでは課題で制作した点から何をチェンジしていったのか?を書いていければと思います。技術よりは考え方や段取りの変化がメインになるのかな。

 

来月へ続く。乞うご期待!

続●●を参考に作ってみた。

ご無沙汰しています。シミズです。

 

先日バルセロナに行ってきました。

アントニ・ガウディ - Wikipedia

の建築物はとても綺麗でした。

f:id:goalist_432:20170612182542j:plain f:id:goalist_432:20170612182553j:plain

 

 「美しい形は構造的に安定している。構造は自然から学ばなければならない」と、ガウディは自然の中に最高の形があると信じていた(Wikipedia)そうで、貝殻や木の枝など様々な物を参考にしていたそうです。

 

と言うことで、今回は最近自然を参考に…ではありませんが、黄金比 - Wikipediaを意識しつつイラストを作ってみたので、ご紹介しようと思います。

 

以前もご紹介しましたが、ゴーリストではHRogというWebメディアを運営しています。

そのFacebookページのカバー画像をその月のイメージに合わせて変えています。

 5月、6月用に作成したカバー画像に黄金螺旋や黄金三角形といった綺麗に見える構図を参照して作成しました。

 

 

まずは5月のイラスト

5月ということでこどもの日→柏餅、こいのぼり、兜ということで、下記のようなものを作りました。

f:id:goalist_432:20170612193209p:plain

最初はこんな感じで配置しましたが、なんとなく動きがない…な?

ということで、黄金螺旋を使ってみました。

 

黄金螺旋(英:golden spiral)とは…

黄金比(英: golden ratio)は、一辺を a、b の長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b のことで、最も美しい比とされています。もっとも近い値は1:1.618になります。

 

この1:1.618で長方形から、

・短辺の長さに合わせて正方形作る

・残った長方形の部分でまた正方形部分で区切っていく

・できた正方形の対角線を曲線で結んでいく

と出来上がるのが黄金螺旋です。

 

f:id:goalist_432:20170612202706p:plain

 

この螺旋上に作成したイラストを配置してみると… 

f:id:goalist_432:20170612181227p:plain

 

f:id:goalist_432:20170612181231p:plain

こんな感じになりました。

 

 

 

Before

f:id:goalist_432:20170612193209p:plain

 

After

f:id:goalist_432:20170612181231p:plain

ちょっと構図を変えたらこう‥

躍動感が出たとか出ないとか。。

 

 

気を取り直して、続いて6月のイラスト。

6月なので紫陽花、カタツムリ、雨、傘(ト●ロみたいな葉っぱの傘持たせてみたかった…)

ということでこのようなイラストにしました。

f:id:goalist_432:20170612210559p:plain

 

こちらは最初から黄金三角形という構図に当てはめて配置をしていきました。

 

黄金三角形(英:Golden Triangle)とは…

・左下隅から右上隅に対角線を引く

・その線に対して直角に、左上隅を通る線と右下隅を通る線を引く。

と出来上がるこのような構図です。

f:id:goalist_432:20170612211050p:plain

 

この構図を元に線が交差する箇所にふろぐんとカタツムリの顔が来るように配置し、

斜めの線に合わせて紫陽花を配置していきました。

f:id:goalist_432:20170612211143p:plain

 

雨の中散歩中にひょっこり友達のカタツムリくんに出会ったふろぐん感出ていますかねぇ。

 

それにしてもカエルのふろぐんが無表情すぎますね。。

今後はもっと表情も含め動かしていきたいなと思います。

 

引き続き構図を使ってカバー画像を作成していこうと思うので、

気が向いたら素材が揃ったらまたアップしていきます。

 

コソ. |ω・`)毎月月初には更新もしているので、HRogのFacebookページもチェックしていただければと思います。

デザインの歴史(インターナショナルタイポグラフィックスタイル編)

f:id:goalist:20170609222030j:plain

こんにちは、ミツイです。

デザインの歴史、第三弾はインターナショナルタイポグラフィックスタイルです。

これがやりたくてデザインの歴史を書いてみたというくらい、好きなスタイル。

当ブログのデザインも、これを参考にしていたりします。

design.goalist.co.jp

 

例のごとくざっくりではありますが、まずはインターナショナルタイポグラフィックスタイルとは、から始めます。

インターナショナルタイポグラフィックスタイルとは

別名、国際タイポグラフィー様式、スイス・スタイルなどと呼ばれるグラフィックデザインの様式。

1920年代にロシア、オランダ、ドイツで登場し、1950年代にスイスで発展しました。

特徴としては、左右非対称のレイアウト、グリッドの利用、アクチデンツ・グロテスク(19世紀に誕生したサンセリフ書体。ヘルベチカの原型となった)の様なサンセリフ書体の使用、左揃え右ラグ組み(段落の左側の文字を揃え、右側は自然のままに不揃いにしておく)など。


スイスではドイツ語、フランス語、イタリア語など地方によって言語が違うので、複数の言語を表記する必要が多かったのが、このスタイルの名前の由来だそうです。

 

インターナショナルタイポグラフィックスタイルの先駆者として知られるErnst Kellerがチューリッヒ応用美術学院のグラフィックデザインとタイポグラフィコースで教えたのは、「美のための美」あるいは「目的の美しさの創造」ではなく、「デザイン問題の解決策がその内容から出てくるはず」というスタイルの哲学。

バウハウスの「form ever follows function(形式は常に機能に従う)」もそうですが、現代のデザインの考え方の基礎になっているように思います。

 

いつも通り、巨匠たちの紹介と所感をば。


ヨゼフ・ミューラー=ブロックマン

スイス・スタイルの典型例として引用されることの多いデザイナーです。

ノイエ・グラフィック誌(Neue Grafik)の創刊者兼編集者、IBMのヨーロッパのデザイン・コンサルタントとしても活躍してます。

 

グリッドデザインや左揃え右ラグ組みも特徴的ですが、個人的には幾何学幾図形の使い方が一番印象的でした。

形を繰り返して、そこにアクセントをつけてリズムを出す。

見ていて気持ちいいことこの上ない。


アクセントのつけ方も、ズラしたり、色を変えたり、重ねたり、折れ曲がりが線の動きに見えたり、曲線がウニョウニョと動いて見えたり、と、アイデア満載です。


ノーマン・マクラレン※1のアニメーションが好きなんですが、ブロックマンは動かない紙面で動きを感じさせます。

とにかく、めちゃくちゃ格好いいです。

 

UI・UXが全盛の昨今、グラフィックデザインは若干日陰を見ている感がありますが、やっぱりグラフィックもめちゃくちゃ大事だと思わせられます。

 

最近のデザインでいうと、繰り返しのリズムによる気持ちいい感じとか、東京オリンピック2020のロゴに近いものを感じます。

f:id:goalist:20170609221944p:plain



Josef Müller-Brockmann - Google 検索

 

※1ノーマン・マクラレンの動画「Synchromy」

www.youtube.com


※1 Neue Grafik
第二次世界大戦後の1950年代後半にスイスで発行された伝説的なデザイン雑誌。

リヒャルト・パウル・ローゼ(1902-1988)、ヨゼフ・ミューラー=ブロックマン(1914-1996)、ハンス・ノイブルク(1904-1983)、カルロ・ヴィヴァレリ(1919-1986)の4人のデザイナーにより創刊されてます。

デザインを紹介している雑誌ですが、雑誌自体が格好いいです。

http://post-books.info/new-arrivals/2015/1/12 http://www.eyemagazine.com/review/article/we-made-this-authentic-trilingual-landmark



まとめ

今回はブロックマンのみの所感とします。

もう、お腹いっぱいですw

次回は、他の巨匠たちについても書こうと思います。

「Neue Grafik」欲しい。でも高い(¥31,638 )。。

LINEスタンプ第2弾リリースしました!

こんにちは。シミズです。

つい先日、弊社が運営している『HRog』のキャラクター「ふろぐん」のLINEスタンプ発売のお知らせしましたが、

design.goalist.co.jp

 この度第2弾となるふろぐん(関西弁)をリリースしました!!

f:id:goalist_432:20170414193520p:plain

 

関西弁ネイティブ社員監修のもと本場仕込みの関西弁を話すふろぐん。

ぜひ会話を盛り上げるのに使ってみてください(´-`)

 

白くなるはずの箇所が透過していたことによるリジェクトで今回も申請からリリースまでだいぶ時間がかかってしまいました。。

次回こそはすんなりとリリースできるようにしたいです…。

 

★購入方法

・下記リンクから

・LINEストアで“ふろぐん”で検索

store.line.me

 

 

…シミズ制作分はなぜかキャラぶれがやや激しいようです。。

 

よろしくどうぞ。

 

ブログデザイン更新しました

ご無沙汰しております。シミズです。

少し前にこのデザインブログを含め現在3つあるゴーリスト各チームブログのデザインを刷新したのでご紹介したいと思います。

Developer's Blog

http://developers.goalist.co.jp/archive

Sales Blog

http://sales.goalist.co.jp/archive

 

今回は3つのブログともパロディをテーマに作成しました。

 

まずは一番最初に始まったエンジニアによるGoalist Developer's Blog。 

20170410192310

 

これが…

 

20170410192205

こうなりました。

 

メインビジュアルはエンジニアっぽいイメージということで弊社でもお世話になっている某クラウドサービスのステッカー風にしてみました。

 

他にもサイドバーも丸っと新しくしました。

 

例えば各ブログへのリンクバナー、

20170411173253 20170411173654

セールスブログは某オフィスのロゴステッカー風、デザインも某ソフトウェア会社風にしてみました。

 

 続いてセールスチームのGoalist Sales Blog

20170411175859

これが…

 

……

 

20170411180240

こうなりました。

 

セールスっぽいってなんだろうとあれこれ悩んだ結果メインビジュアルは名刺交換にしました。

最初はゴーリストが運営しているHR業界向けメディアHRogのキャラクターふろぐんが名刺交換している体にしようと思ったんですが、カエルの手が気持ち悪く…←

人の手になりました。

 

サイドバーの採用ページへのリンクも名刺入れと名刺にしてみました。

20170411182220

 

 

最後にこのGoalist Design Blog。

20170411182418

もとはこんな感じでした。

 

これが…

 

20170411183109

こうなりました。

というかこのページですね。

 

デザインっぽい感じ…ということでメイングラフィック、サイドバーのバナー共にinternational typographyというグラフィックデザインっぽくしてみました。

ここだけちょっとかっこよくなりすぎた気もします。

国際タイポグラフィー様式 - Wikipedia

 

色々試行錯誤しつつ作成した各デザインですが、それぞれのぽさを出しつつ、サイドバーの仕様やプロフィールの画像などは統一して、つながりをうっすらと持たせてみました。

 

全体的に各ブログへのバナーは割とすんなり形になりましたが、採用ページのバナー はかなり試行錯誤しました。英字だとそれなりにかっこよくなるけど、日本語だとあまりうまく行かず苦戦したので、日本語表記のかっこいい、おしゃれなデザインを参考にしつつどんどん吸収していきたいなと思います。

デザインの歴史(アール・デコ編)

こんにちは、三井です。

デザインの歴史、前回はいろいろ端折った上でのアヴァンギャルドについてでしたが、今回はアール・デコについてです。(建築や家具でなく、グラフィックのみ)

 

f:id:goalist:20170403183714p:plain

アールデコは1910年〜1930年(1925年のアールデコ博から?)に流行ったデザイン様式です。

ロシアでアヴァンギャルドが台頭しているころに、ヨーロッパ・ニューヨークなどで流行していた様式なんですが、、正直いまいち特長がはっきりわからないです。

特長としては、幾何学模様、コントラストの強い色彩設計、グラデーション、近代化による鉄道のスピード感・客船の巨大さなど。ざっくり言えば、機械をモチーフにしたデザインということですかね。

個人的にはグラデーションが一番印象的でした。

例によって、巨匠毎に所感など。

 

アドルフ・ムーロン・カッサンドル

f:id:goalist:20170403144747p:plain

Adolphe Mouron Cassandre - Google 検索

日本では沢木耕太郎の「深夜特急」の表紙に使われているのが一番有名でしょうか。

iOSアプリのアイコンにも、影響を見て取れるものがあったりします(気がします)。

「Bifur」などのフォント、イヴ・サンローランのロゴも作ってます。

 

ポール・コラン

f:id:goalist:20170403151206p:plain

 

Paul Colin - Google 検索

アールデコらしいニュアンスというか、雰囲気があります。こういうテイストはWebのデザインだとあまり見ませんが、ファッション系の広告にこういう系のデザインがありますね。

 

↓だいぶこじつけな感じですが。。グラデーションとか、アールデコっぽい、でしょうか?

f:id:goalist:20170403162141p:plain

 

シャルル・ルーポ

f:id:goalist:20170403170451p:plain

Charles Loupot; - Google 検索

 一時期、東京オリンピックのロゴ案がこれに似ているみたいな指摘もありましたね。。

dribbbleにあっても違和感ないくらい、今っぽいです。プジョーのポスター、コアントロー(リキュール)のポスターなど描いてます。

 

ジャン・カルリュ

f:id:goalist:20170403151825p:plain

Jean Carlu - Google 検索

 コラン、ルーポ、カッサンドル、ジャン・カルリュでアール・デコ期ポスターの「三銃士」と呼ばれていたそう(ダルタニアン含めて)。

ブランドイメージを定着させるには、はっきりとした線と強い色彩が大事だと主張していたそうです。確かに、印象的なデザインが多い。

 

www.chateau-mouton-rothschild.com

ジョルジュ・バルビエ

f:id:goalist:20170403153200p:plain

George Barbier - Google 検索

 アールデコっていうと、こういうイメージでした。耽美的というか、往年の少女漫画チックなデザイン。

 

まとめ

取り上げた作家に偏りがある気もしますが、、

グラデーションが印象的・幾何学的なフォルムはスキューモーフィズムからフラットデザインを経ての、ロングシャドウやグラデーションデザインへ引き継がれているんじゃないでしょうか。グラデーションうまく使って、イラストやアイコンデザインの参考にしたいと思います。