Goalist Design Blog

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

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

 

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

アントニ・ガウディ - 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 検索

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

 

まとめ

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

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

LINEスタンプリリースしました!

以前ブログでも書かせてもらった、弊社の運営するメディア『HRog』から生まれたオリジナルキャラクター「ふろぐん」のLINEスタンプがリリースされました!

 

f:id:goalist:20170321150916p:plain

 

申請時に英語表記のStickerをStampと間違えてリジェクトされ、結局12日間かかってようやくのリリース。。逆に感慨深いです!

 

LINEストアで、「ふろぐん」で検索してもらうと出てきます。

人材業界の人に送ると、割とうけるかもしれません。

ご興味あれば、よろしくお願いします!

 

store.line.me

デザインの歴史(アヴァンギャルド編)

こんにちは、三井です。

デザインの歴史というとウィリアム・モリスやらアールヌーボーやらが出てきますが、 個人的な趣味で飛ばします。

 

で、いきなりアヴァンギャルドです。

「アヴァンギャルド」は、前衛、先駆け、革新的という意味。

「アヴァンギャルドだねぇ」と言われると、ちょっと皮肉のニュアンスがあるのは新しいデザインの運動は起こらないだろうという認識を反映しているんでしょうかね。 デザインは新しいものを作るのではなく、今あるものに0.5ぐらい足すものだと言われますし。

 

ムーブメントとしてのアヴァンギャルドはちゃんと調べたことなかったんですが、調べてみるとだいぶ興味深いです。

 

ロシア・アバンギャルドは、1910年代〜1930年代初頭までの、構成主義を中心とした芸術ブームの総称です。 メッセージ性が強く、行動を促すようなデザインが特長。 1910年代〜というと、日本で言うと大正時代ですね。

 

ロシア・アヴァンギャルド

ロシア・アヴァンギャルド - Wikipedia

 

ムーブメントに関わった巨匠ごとに感想。

エル・リシツキー

f:id:goalist:20170309185625j:plain

エル・リシツキーはグラフィックデザインの祖的な人だそうです。

ロシア・アヴァンギャルド全体にいえますが、リシツキーのテーマは「鑑賞するものに行動を促す」だったそうで。

今で言えば広告の考え方に近いですね。

プロパカンダと広告では意味はだいぶ違いますが。。

斜めの構図が多く動きがあるので、その辺が行動を促す、に繋がっているように思います。

今見ても、めちゃめちゃ格好いいです。

Эль Лисицкий - Google 検索

 

アレクサンドル・ロトチェンコ

f:id:goalist:20170309185720j:plain

ロトチェンコはグラッフィク・デザインの父だそうです。父とか祖とか。。

ロトチェンコのポスターも、かなり動きを感じる構成になっています。

そして一番印象的なのが、フォトモンタージュ。

フォトをモンタージュしたロトチェンコ風デザインは、今でもよく見ます。

フランツ・フェルディナンドのジャケットはまさにですね。

フランツ・フェルディナンドは、ちょっと懐古的な音楽(ロックンロールリバイバルブーム)なのでデザインとも合ってます。

Алекса́ндр Миха́йлович Ро́дченко - Google 検索

 

 

「行くぜ、東北。」のポスターも、ロトチェンコのオマージュだと思います。

行くぜ東北 - Google 検索

 

パウル・レンナー

f:id:goalist:20170309185847p:plain

みんな大好きFutura(フーツラ)も、アヴァンギャルドに影響を受けて、パウル・レンナーによって作られています。

futuraはラテン語で「未来」という意味。

1920年代に作られたフォントが今なお先端をゆくのは、名は体を表す、ですね。

 

webdesignmagazine.net

 

fontsinuse.com

 

↓異常に愛されていたりもします。

matome.naver.jp

 

バウハウス

f:id:goalist:20170309190031j:plain

かの有名なバウハウス(ざっくりいえば、芸術・デザインの学校です)もアヴァンギャルドの流れで生まれてます。

バウハウスはドイツ語で「建築の家」。

「Less is more(より少ないことは、より豊かなことだ)」

「form ever follows function(形式は常に機能に従う)」

などの名言が表すとおり、現在のデザインの考え方はバウハウスの影響を強く受けています。

と言うか、バウハウス無しには今のデザインは語れないでしょう。

 

wired.jp

 

さいごに

ロシア・アヴァンギャルド。

現在のデザインに与えている影響は半端ないです。

企業ロゴにしろ、紙面やWebのデザインにしろ、アヴァンギャルドの流れのデザインは、もはやデファクト。

「このデザインは何でこのデザインなのか?」というのを理解するには、非常に参考になるんじゃないでしょうか。

 

【参考】

99designs.jp

 

ロシア・アヴァンギャルドふたたび | 美術情報2016

 

nostos.jp

 

bulan.co