Goalist Design Blog

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

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

 

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

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

 

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

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

守破離 - 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

 

採用ページリニューアルしました

はじめまして

ゴーリスト シミズです。

f:id:goalist_432:20170216182333p:plain

ゴーリストに来てからちょうど1年経ちました。

普段バックオフィスと兼務でデザインの仕事もしています。

 

デザインに関しては、ゴーリストに来てからはじめたので、だいたい7、8ヶ月ぐらい。

本当にひよっこ中のひよっこ。ただいま絶賛勉強中です。

 

なのでデザインとは…などと語れるような知識はないため、当面は作ったものの紹介なんかをしていこうと思いますので、生暖かく見守っていただけますと幸いです<(_ _)>

 

ということで、つい最近採用ページを大幅リニューアルしたので、今回はこちらを簡単にご紹介したいと思います。

 

 

ゴーリストは私が入社した頃は10名ちょっとでしたが、今現在21名います。

そしてまだまだ仲間を募集しています。

 

www.wantedly.com

 

採用に力を入れていくにあたり、もっとゴーリストのことをよく知ってもらうためのツールになるようにということで、リニューアルすることになりました。

  

リニューアルにあたり、他社さんの採用ページを見ながら情報収集し、改善点や伝えたいメッセージなど検討した結果、個性、リアリティが伝わるページにしようということになりました。 

 

f:id:goalist_432:20170215194416p:plain

これは前の採用ページ。

 

 

 

f:id:goalist_432:20170215194434p:plain

 こんな感じでワイヤーを作って…

あ、今後は手書きのワイヤー最終版を描くときは裏紙使わないようにしようと思いました。← 

 

 

f:id:goalist_432:20170215195045p:plain

 こんな感じで配色もしてみて

 

 

……

 

f:id:goalist_432:20170215195133p:plain

はい。

こうなりました。

 

実物は下記からどうぞ。

recruit.goalist.co.jp

 

ワイヤーからだいぶ雰囲気が変わりましたが、、

実はタイトル部分は最初はカテゴリーごとに色を変えるだけのもっとシンプルな作りにする予定でした。

 

f:id:goalist_432:20170215195155p:plain

  

ただ、実際にサイトとして見てみると、あまりにもシンプル過ぎてしまったので、グラデーションもうまく使えばカッコ良くなるのでは…ということで取り入れてみました。

 

f:id:goalist_432:20170215195213p:plain

 コンテンツ順にどんどんゴーリストカラーである赤に近づくように色を設定しています。

 

さらには動画背景ブームもまだまだあるようなので、少しでも求職者の方々にゴーリストの雰囲気が伝わればということで、TOPページは動画にしました。

 

f:id:goalist_432:20170215195224p:plain

 

この動画用に撮影も行いましたが、欲しいカットがなかなか撮れず難しかったです。

デジタル一眼ももっと使いこなせるようになりたいです。

 

ちなみにコーディングの方は少しだけやってみましたが、ほぼほぼ三井さんです。

これもガンバラネバ…。

 

こんなひよっこでも結構大きなことをやらせてもらえるのが、ゴーリストの良いところかもしれません。

知識も経験も足りなすぎて、本当に毎回必死なんですが…。

 

 

と、まぁゆるっと採用ページリニューアルについてご紹介してきましたが、

こんな感じで今後もゆるっと作ったもののご紹介等々していこうと思いますので

どうぞよろしくお願いいたします<(*_ _)>

 

あ、おすすめの勉強方法などあれば是非教えていただければ嬉しいです[壁]д・)チラッ

ゴーリストのデザインブログはじめました。

はじめまして。
ゴーリストでデザイン担当している、三井です。

 

f:id:goalist:20170206175845p:plain


ゴーリストのサービスUIや、HP、LPとかデザインしてます。

 

 

f:id:goalist:20170206175909p:plain

 

こんなのやら

 

 

f:id:goalist:20170206175924p:plain

 

こんなの

 

今日から、ゴーリストのデザイナーによるブログを
始めることになりました。
ゴーリストのデザインについて
(そしてそれを作っているデザインチームについて)、
雰囲気だけでも伝えていきたいと思います。

自己紹介

第一回なので、自己紹介がてら好きなフォントについて。

 

Avenir

※macのシステムフォントとして入ってます。

f:id:goalist:20170206180041p:plain

英字だと「Avenir」が好きです。
どちらかと言うと幾何学的なのが好きなんですが、
Avenirは程よく幾何学で、かわいくて好きです。
Gとかjとか。

f:id:goalist:20170206180136p:plain

 

 

Futura 

※macのシステムフォントとして入ってます。

 

f:id:goalist:20170206180259p:plain

「Futura」は良く使います。
Goalistの幾何学的なロゴと相性がいいので、タイトル文字などに。
弊社の採用ページのタイトル(各ページの英字タイトル部分)は、Futuraです。

 

recruit.goalist.co.jp

 

Noto Sans(源ノ角ゴシック) 

※どちらでダウンロードするのが正しいのか。。

Google Noto Fonts

GitHub - adobe-fonts/source-han-sans: Source Han Sans

f:id:goalist:20170206180401p:plain

日本語フォントは、「Noto Sans」をよく使うんですが、
名前ややこしいですよね。
「Source Han Sans」やら「源ノ角ゴシック」やら「Noto Sans」やら。。

 

Source Han Sans(源ノ角ゴシック)/Noto Sansがリリースされました - DTP Transit

※ややこしいのは大人の事情らしいです。

 

webフォントとして使う時は、サブセット化してサーバーに置いてますが、
CDNの方が速いのか、そのへんもちょっと調べてみたいですね。

あと、aiファイルを共有すると、フォントがないってよく怒られます。
チーム内で派閥が分かれているようです。どっちでもいいけど。

 

コーポレート・ロゴ

「コーポレート・ロゴ」フォントのダウンロード – LOGOTYPE.JPの転職サイト情報

f:id:goalist:20170207083704p:plain

「コーポレート・ロゴ」は弊社サービスのロゴタイプに使っています。
「HRogリスト」「HRogチャート」「HRogメール」「HRogトーク」のカタカナの部分です。
「HRog」の部分を幾何学的に作ったので、それに合うものとして選ばせてもらってます。

HRogチャート

HRogリスト

HRogメール | 求人情報アラートサービス

HRogトーク | ちょうどいいテレアポ管理ツール

 

その他

もちろん「ヒラギノ角ゴ Pro」「メイリオ」は使います。物凄い頻度で。
他にたまに使うのが「新ゴ」。

 

番外編としては、「Material icons」

Material icons - Material Design

Bootstrap内の「Glyphicons」もお世話になってます。

Components · Bootstrap

 

Noun Icon使うことが多いんですが、アイコンフォント、楽ですよね。

Noun Project - Icons for Everything

 

さいごに

しかし、自社サービス(LPとか含め)のデザインばかりしていると、
使うフォント偏りますね。
たまには、セリフ体も使ってきたいです。

こんな感じで、ゴーリストのデザインについて、など書いていきますので、
よろしくお願いします。

 

f:id:goalist:20170206181209p:plain