Goalist Design Blog

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

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

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

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

 

ゴーリストではよく守破離という言葉を聞くのですが、

今回は守破離をして作成したものをご紹介したいと思います。

 

 と、その前に守破離とは…

まずは師匠に言われたこと、型を「守る」ところから修行が始まる。その後、その型を自分と照らし合わせて研究することにより、自分に合った、より良いと思われる型をつくることにより既存の型を「破る」。最終的には師匠の型、そして自分自身が造り出した型の上に立脚した個人は、自分自身と技についてよく理解しているため、型から自由になり、型から「離れ」て自在になることができる。

守破離 - Wikipedia

 

それでは今回の師匠をご紹介します。

f:id:goalist_432:20170302180715j:plain

パッと目を引くと謳っているだけあってパッと目を引くデザインの表紙ですね。

 

ゴーリストでは、書籍購入や外部研修、セミナー参加など、成長に必要な取り組みに対して、費用の一部を会社から支給されます。

今回もその制度を活用して購入してもらいました。

 

内容としては、

シンプルにスッとタイトルやコピーを示すレイアウトから、視線を勝ち取るためのキャッチーなデザイン表現まで、様々なシーンにおける、目を引き、内容をわかりやすく伝える、タイトルまわりのデザインを多数収録!

 と、紹介でもあるように全編フルカラーで様々なデザインが項目ごとに載っています。

使用フォントも合わせて掲載してくれているのが嬉しいです。

 

そして、こちらに載っていたアイディアを元に作成したのが

こちらの2点。

 

f:id:goalist_432:20170302141918p:plain

 これと…

 

 

f:id:goalist_432:20170302141942p:plain

 これ。

 

ゴーリストが運営するHRの情報に特化したメディアHRogでのオリジナルコンテンツのアイキャッチです。

hrog.net

 

まず1つ目のアイキャッチ

f:id:goalist_432:20170302141918p:plain

 

こちらはという項目を参考に作成しました。 

f:id:goalist_432:20170302173243p:plain

掲載されていたデザインの雰囲気はこんな感じ。

 

本書曰く、

帯は写真などを前面に使用する場合など、シンプルに文字を目立たせたいときに効果的です。 

とのこと。

 

新サービスの紹介記事だったので、そのことを目立たせたくサービスカラーを用いて

帯をつけてみました。

 

ただ、元のイメージでは文字が段々になっていたり、左上のロゴ部分がアクセントになっていたりといった要素も含めてのデザインだと思うので、今後は細部にまでこだわれればなぁと思います。

 

2つ目のアイキャッチ

f:id:goalist_432:20170302141942p:plain

 

こちらはケイ線という項目と囲むという項目を参考につくりました。

f:id:goalist_432:20170302173355p:plain

掲載されていたデザインの雰囲気はこんな感じ。

 

本書曰く、

 ケイ線は部分的に強調したい箇所を目立たせたり、ブロック分けしたり、座りを良くします。

囲むは視認性を高め、情報をブロック分けします。

四角・円で囲むことによりロゴ的な存在に。

とのこと。

 

写真の都合上 横文字は見づらいかもなぁと、縦文字にしてみました。

そこでこのイメージのケイ線が使えると思い、トラッキングでテキストの長さを整えケイ線を引きました。

 

最初左側も縦書きにしようと思いましたが、こちらは収まりがあまり良くなく横文字に。

 

別レイヤーであるということで囲んでみました。

 

 

ご紹介した以外にも使ってみたいアイディアがたくさんあったので、今後も色々と試して機会があればご紹介していこうと思います。

 

 

ちなみにですが、、

ご紹介したアイキャッチのコンテンツが載っているHRogというメディアのキャラクター、ふろぐんのLINEスタンプを現在制作しています。 

design.goalist.co.jp

 

良い感じの仕上がりになったと思います。 

現在申請中ですので、お楽しみに。

 

f:id:goalist_432:20170302171332p:plain 

LINEスタンプ、作りました。

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

この度、弊社の運営するメディア『HRog』から生まれたオリジナルキャラクター「ふろぐん」のLINEスタンプを出すことになりました。
※ちなみに「ふろぐん」は弊社のサービス全体のキャラクターでもあり、八面六臂に活躍中です。

 

f:id:k-mitsui:20170222122728p:plain


実はまだ申請前なのですが、申請を早めるという噂もあり、今回のスタンプ作成にからめたことを書こうと思います。
(審査担当者様、よろしくお願いしますm(_ _)m)

 


『HRog』誕生当初から「ふろぐん」はいたのですが、今回「ふろぐん」に脚光を浴びせるということでリニューアルを機にキャラクターについて色々考えました。
まず行なったのは参考キャラクターの分析。
いろいろキャラクターを集めて、仮説を元にマトリックスを作成しました。

 

f:id:k-mitsui:20170222123108p:plain

 

その中のどこに、ふろぐんを落ち着かせるか検討。
制作したマトリックスは著作権上ぼかしてますが、、今回のマトリックス軸としては「リアル/抽象」「顔が大きい/首がない」というのにしてます。
顔が大きいのでいうと“キティちゃん”や“スヌーピー”、“アンパンマン”など王道ともいえるキャラクター。
かたや首がないキャラクターは“スーモ”、“ぐでたま”、“ふなっしー”、“くまもん”(ちょっと首がありますが)など新しめのキャラクター。
時代は、首がない方に向いているのではないか!?という仮説のもと、「ちょっとだけ首あり」に落ち着いてます。

 

 


話は変わりますが、カエルキャラと言えば日本最古の漫画と言われる「鳥獣戯画」のカエル。

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

キャラクターのデフォルメ具合は、まさに「漫画」。日本人の根っこには抽象化好きな気質があるんだと思います。


動物学者のデズモンド・モリスの著書で、「赤ん坊は大人に比べて目が大きい→目が大きいものを可愛いと感じる→目が大きいのをデフォルメするとなお可愛い」的なことを書いていた気がするんですが、キャラクターはまさにそれ[要出典]。
さらに同著には「デフォルメすると(可愛いなどの)反応を強くする「何か」の法則性はけっこう分からない」的なことが書いてあって、それをなんとなく感じて描けるのが芸術家なのだそうです[要出典]。


デフォルメ、奥が深いです。


(少女漫画のキラキラ目とか、そう考えると、かなり面白い。目が大きい→光の反射が大きい、なのでしょうか。)

 

カエルを崩さず、適度に可愛く、など考えつつ作成した新生「ふろぐん」。
ふろぐんLINEスタンプ、スタンプショップに並んだ際は、見るだけでも見てってください。

 

f:id:k-mitsui:20170222134629p:plain