Goalist Design Blog

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

はじめまして

ゴーリスト シミズです。

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