2017年度版 素敵な新卒採用サイトのまとめ

各企業がそれぞれに趣向をこらした採用サイト。それは普段目にするベーシックなコーポレートサイトとはひと味違い、個性的で見応え抜群です。
今年も2017年度の新卒採用が続々と公開されています!
その中でも特に印象的だったサイトをまとめてみました。

※以下は2016年4月28日現在の情報です。

GMOペパボ株式会社

04_201604

新卒採用2017 | GMOペパボ株式会社
https://pepabo.com/recruit2017/

シミュレーションゲーム形式で、実際の社員さんの一日を楽しく体験することができます。(はじめに「さようなら」を連打してしまった人は私以外にもたくさんいるはず)
この臨場感のあるサイトは、リアルな一日の流れを知りたいという、昨年の内定者の声から生まれたそうです。
そんなサイト作成の裏側が↓で公開されていますので、こちらもぜひ合わせてどうぞ!
ペパボの新卒サイトはこうして作られた!

加藤憲ホールディングス 株式会社

03_201604

2017年度新卒採用情報 -加藤憲ホールディングス株式会社
http://www.ktk-hd.com/recruit/

ちょこちょこと動く文房具モチーフの遊園地が可愛い!
マウスオーバーのアニメーションなど、細かいところまでこだわりを持って作られているのを感じました。
色使いもカラフルで、キャッチコピーのとおり「ワクワク」したサイトになっています。

中央電力株式会社

02_201604

MAKE | 中央電力株式会社 採用サイト
http://www.denryoku.co.jp/recruit/

直線的な幾何学模様で、一見シャープに見えがちですが、ロゴカラーの「緑」や「黄色」をベースにした配色や、手書き文字を使用することで、ほどよい柔らかさのある親しみやすいデザインになっています。

エイム株式会社

06_201604

エイム株式会社新卒採用サイト
http://www.aim-info.co.jp/recruit/

紺色を基調とした、シンプルでシャープなデザイン。
マウスオーバーなどのアニメーションからスピード感も感じました。
業務の1つとして自動車開発があるので、そこから派生した「動きのデザイン」なのでしょうか。

NTTデータ先端技術株式会社

11_201604

新卒採用情報 | NTTデータ先端技術株式会社
http://www.intellilink.co.jp/recruit/index.html

斜めのラインを用い、こちらもシャープなイメージのデザインです。
メインに使用されている写真が影が強調されているもので、まさに「GEEK Fiters」という「仕事人」のかっこよさが出ています。
短いのであっという間ですが、トップ表示時のアニメーションもかっこいい!

株式会社東急エージェンシー

05_201604

東急エージェンシー 2017採用サイト | Tokyu Agency Inc.
http://www.tokyu-agc.co.jp/recruit/2017/special/top.html

三角形を組み合わせで、文字やあしらいを表現。
くしゃっと崩れて再生される文字が、みていて気持ちいいです。

株式会社LITALICO(りたりこ)

01_201604

株式会社LITALICO 新卒採用情報2017
http://litalico.co.jp/recruit2017/

こちらも三角形をモチーフにしたデザイン。カラフルな色使いで全体的にポップな雰囲気になっています。

株式会社 アサツーディ・ケイ

08_201604

ADK RECRUIT 2017
https://www.adk-recruit.jp/

本来選ばれる方の応募者が、逆に面接官を選んでしまうという「相棒採用」なる、ユニークな採用方法がとられています。
写真を隙間なく配置したトップは、インパクト大!

株式会社 ニチイ学館

10_201604

ニチイ学館 新卒採用サイト
http://nichii-saiyo.com/2017/

サイトのコンセプトになっている矢印はトップはもちろん、ページのいたるところに用いられています。
トップのだんだん接近していく、スクロールでのページ変化はダイナミック!
ほぼ全てのページがそのページ独自のレイアウトになっているので、すみずみまで見応えがありました。

株式会社クラーチ

09_201604

株式会社クラーチ | 2017年度新卒採用 | Kuraci Recruit 2017
http://www.kuraci.co.jp/recruit/

金と紺をポイントに使用した、上品なイメージです。
コンテンツの背面に淡い色をさりげなく引いてあるのも素敵。
枠にとらわれていない文字や写真のレイアウトは、まるで「動く雑誌」のようです。

ソニーミュージック

12_201604

ソニーミュージック新卒採用2017
http://saiyo.sme.co.jp/graduate_17/#(´-`).。

ちょっと変わったURL…ぜひサイトにいってその変化をみてほしいです。
多数使用していても、そこまでチカチカしない配色は参考になります!


Photoshopでスピード感・躍動感をプラス!

201603_00

いよいよ今日で3月も終わりですね。
全国では桜が咲き始めていて、新潟でも開花が待ち遠しい今日この頃です。

さて、今回はPhotoshopの小ネタのご紹介。

先日のとあるデザイン案件で、スピード感のあるイメージを出したいものがあったのですが、その時にしたPhotoshopの加工をメモがわりに残していこうと思います。

サンプルとして、今回使用するのはこちらの写真。

201603_01


モバイルアプリに!Webサイトに!Marvelで簡単プロトタイプ作成

WebサイトやアプリUIなどの、設計やデザインの共有に役立つデザインカンプ。
弊社ではまず、一枚絵の状態のカンプ作成から始めるパターンが多いのですが、大まかなページの動きも合わせて伝えられたら…というのを常々思っていました。

コードを書くのがあまり得意ではない、私のようなデザイナーでも簡単に使える
プロトタイピングツールを探していたのですが、
そんな中、先日Webクリエイタ―ボックス様で無料で使えるモバイルアプリ制作用のプロトタイピングツールというまさにタイムリーな記事が!

その中でも、おすすめされていたMarvelというブラウザアプリがなんだか使いやすそう…。

実際に試してみて、わかりやすく、そして本当に簡単にプロトタイプができましたので、今回はMarvelの基本的な使い方をご紹介したいと思います。

01

Marvel

https://marvelapp.com/

基本無料で

  • プロジェクト無制限作成
  • 共有URL発行
  • 埋め込み用コード発行
  • コメント機能

などが可能です。

その他、有料プランでできること

  • パスワード認証
  • 複数メンバーでの作成
  • PDF、アプリファイルでダウンロード

続きを読む モバイルアプリに!Webサイトに!Marvelで簡単プロトタイプ作成


Illustratorで手描き風【塗り編】

以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。

今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。

13

 

まずオブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。

11

 

右側の黒い四角形をクリックし「不透明マスクの編集」モードに。
「クリップ」のチェックを外します。

12

できるだけガサガサしたブラシを選択し線の色を黒(K100)にした状態で
オブジェクトの上をなぞります。

今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。

01

 

なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。

05

透明パネルの左側の四角形(オブジェクトが表示されている方)をクリックすると
編集完了です。

04

 

イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。

10

簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどに
ぜひお試しください。