アーカイブ: コラム

「webデザイン トレンド」で検索すると今年はこれがイケてるという記事をよく目にします。
個人のホームページやトレンドに敏感な業種は常に新しさを求めているため、最新のトレンドが重要になってくるかもしれません。
しかし採用サイトはどうでしょうか？
応募する人はきっと「その企業らしさ」を見たいのではないでしょうか？
そこで今回は「企業らしさ」が十分に伝わっていると個人的に感じた採用サイトをまとめてみました。

1.採用サイト紹介

1-1.読売新聞採用サイト

新聞社という業種がひと目でわかり、「らしさ」がタイポグラフィで表現されています。
「読売新聞社を形成するもの」、「読売新聞社でできること」ページでは、歴史ある業界でこれからのデジタル社会の中でどのような仕事ができるのかが説明されています。応募者の興味のある分野がいくつかのハッシュタグデザインでリンクされており、どの仕事がしたいのかが見つけやすくなっています。

> 読売新聞採用サイト

1-2.SMBCグループ採用サイト

「いい子になるな、いい個になれ。」というキャッチコピーが印象的なサイトです。
銀行の個性が表現されていて、他の銀行との差別化を感じることができます。
PC版でも右上のハンバーガーメニューにメニューが集約されており、ファーストビューがスッキリとしたデザインになっています。

> SMBCグループ採用サイト

1-3.TOMORROWGATE採用サイト

みた瞬間に「なんだこれは？」と惹きつける力のある採用サイトです。
「終電ギリギリまでの仕事」というページもありブラック企業感満載の見出しですが、内容を確認すると完全自由出勤制をアピールするための見出しだということが分かります。
1ページ構成になっておりアンカーリンクで各見出しに移動することができます。右のサイドバーに見出しが書いてあるのでわかりやすくなっています。

> TOMORROWGATE採用サイト

1-4.秋川牧園採用サイト

ファーストビューを動画にし、牧園で何を育てているのかがすぐにわかるようになっています。
初めて牧園で働いてみようと思ってる人が見てもわかるように動画や写真が豊富に使われています。
TOPページには線画イラストのアニメーションがスクロールで動き、写真だけでは伝わらないアットホームさが表現されています。

> 秋川牧園採用サイト

1-5.BEAR HUG採用サイト

「BEAR HUG」という名前とマッサージをしている店舗ということでサイトの色使いがぴったり合っています。
優しい雰囲気の色合いなのでお店の雰囲気が想像しやすいデザインになっています。
右上に「ENTRY」ボタンがありすぐに応募ができるのでどこから応募するのか迷うことなく応募ができます。

> BEAR HUG採用サイト

1-6.SHE採用サイト

女性の活躍を応援するコンセプトが表現されている採用サイトです。
シンプルで見やすさもあり、おしゃれで読みやすいフォント遣いがとても工夫されているサイトだと思います。

> SHE採用サイト

1-7.博報堂プロダクツ新卒採用サイト2022

「こしらえるって、無敵だ。」のコピーに合った動画がさしこまれておりファーストビューを見るだけで会社が求めている人材が想像できる採用サイトです。
シンプルな作りですが、伝えたいことがファーストビューに詰まっていてとても見やすいサイトだと思います。

> 博報堂プロダクツ新卒採用サイト2022

1-8.KUMON採用サイト

ファーストビューに縦書きのテキストでメッセージが書かれており、伝えたいことを読ませる工夫がされているサイトです。白をベースとしたシンプルなデザイン構成になっています。幅広い仕事内容も部門ごとにまとまっており、とても見やすく掲載されています。

> KUMON採用サイト

1-9.星野リゾート採用ページ

1ページ構成で短いですが、エントリーボタンを押してみたくなるワクワク感を演出しているページです。非日常を演出している星野リゾートらしいストーリー性のあるメッセージで一緒に働く仲間を探しているような親近感のあるページだと思います。

> 星野リゾート採用サイト

1-10.Choki Peta採用サイト【DOL制作物】

イメージカラーの緑を中心にデザインした採用サイトです。
仕事を知るページでは仕事内容はもちろんのことキャリアや教育制度についてなどを詳しく説明しています。
応募する人に興味を持ってもらうだけでなく、応募することへの不安をできるだけ取り除くことのできる採用サイトが作れたのではないかと思っております。

> Choki Peta採用サイト

2.おわりに

いかがでしょうか？
今回は「その企業らしさ」が伝わる採用サイトを紹介しました。素敵な採用サイトはたくさんありますがその中でも10選させていただきました。色々なサイトを見ることによって表現方法を勉強することができます。この記事が日々のデザインワークにお役立ちいただければ幸いです。

 
デザインスキルを磨くには、日頃から多くのクリエイティブに触れて、アイデアを蓄積しておくことが大切です。
 
私は今までインスピレーションの元になりそうなWebサイトを、ギャラリーサイトなどで検索してはEvernoteやPinterestにまとめて管理していました。しかし、数が増えてくると管理することが難しくなり、いざ参考にしたい時に目当てのデザインを見つけることができなくなっていました。
 
画像管理に向いている便利なツールがないか探していた所、「Eagle」という画像収集＆管理アプリを見つけました。無料体験版を使用してみた所、その便利さに「Notion」と同じくらいの衝撃を受けたことを覚えています。
 
今回はWebデザイナーのデザイン学習に最適な「Eagle」について紹介いたします。

1. Eagleとは

【 Eagle公式サイト 】
 
対応環境：Windows / Mac
価格：$29.95（3,423円 … 2021年11月現在）
1ライセンスで2台のデバイスまで利用可能。
 
Eagleはオンライン上の画像収集と管理をするアプリです。画像収集とはいっても動画や音声、フォント、テキストファイルなどにも対応しており、デザイン制作に必要な素材をまとめて管理することができます。サブスクリプションサービスではないので、一度購入すれば費用は発生しません。

2. Eagleをオススメする理由

2-1. 保存作業が楽

 
EagleはChromeの拡張機能「Eagle for Chrome」を利用することで、サイト上の画像をドラッグ＆ドロップするだけで保存できるようになります。また、ページの一部または全部のスクリーンショットもショートカットで実行することができます。Eagleを使うとアイデア収集のスピードが早くなることを実感できます。
 
・バッチ保存　…　サイトに使用されている画像をまとめて保存できます。（選択することも可）
・エリアをスクショ　…　ページの一部を選択して保存することができます。
・ビジブルエリアをスクショ　…　ブラウザ上で見えている部分だけを保存します。
・ページ全体をスクショ　…　ページ全体を保存します。
 

2-2. 素材管理が楽

 
保存した画像はタグで管理することができます。また、タグ以外にも画像の「形」「カラー」「タイプ」「サイズ」などを自動で判別して、絞り込み条件として使用することができます。これらの条件を「スマートフォルダ」機能で設定することで、目当てのデザインを簡単に整理することができます。
表示形式も「ウォーターフォールレイアウト」や「整列レイアウト」など、いろんな見せ方があり、管理するフォーマットに合わせて切り替えできるのも良いです。
 
私は保存した画像の参考にしたい要素（配色、レイアウト等）や使用されているフォントをタグに登録しています。フォントを登録しておくと、和文フォントと英文フォントの組み合わせや、女性向けに合うフォントなど、現場で使われるパターンを知ることができてデザイン制作に役立っています。
 

2-3.　コメントが書ける

 
画像の任意の箇所に感想やコメントを書くことができます。
 
私はただ画像を保存するだけでなく、なぜこのデザインが良いと思ったのか、その理由を書いておくようにしています。良いと思った理由を言語化しておくことで、自身がデザインしたものをプレゼンする際にも役立ちます。また、これを繰り返すことで、今多く使われている表現や、デザインの規則に気付くこともあります。
 

2-4.　対応フォーマットが豊富

 
Eagleは画像だけでなくフォントや音楽、動画まで管理することができます。様々なファイル形式に対応しているため、デザインの素材管理にも最適です。特にWebデザイナーは様々なフォントをPCにインストールしているケースが多いので、どんなフォントを入れていたかを確認するにはEagleは非常に便利なアプリです。
 

３. おわりに

今回はWebデザイナーにオススメの画像収集＆管理アプリ「Eagle」を紹介しました。
 
私はこのEagleとNotionを併用することで、デザインとコーディングに関するノウハウを蓄積して、現場で活かすことができるようになったと実感しています。Webデザイナーでデザインの学習法に迷っている方は、ぜひ「Eagle」を試してみてください。（30日間の無料体験版があります）
 
Eagleでデザインのアイデアを収集して、いつでもアウトプットできる環境を整備しておきましょう！
 

Webデザインの配色を考える上で何気ない配色の法則を知っていると迷うことなく配色ができます。表題にもありますが、今回は自然に見える配色と自然に見えない配色をご紹介します。

1.ナチュラルハーモニーとコンプレックスハーモニー

山の景色や海の景色をみて「色彩が乱れてるな」とは感じないですよね？それは、今まで生きてきた中で見慣れている色彩だからです。
色彩用語では下記のように言います。
・見慣れていて自然に見える色の組み合わせ＝ナチュラルハーモニー
・見慣れていなくて違和感を感じる色の組み合わせ＝コンプレックスハーモニー

自然の色ってなぜ自然に見えるんでしょうか…?
下記の写真を見てみましょう。そうすると次のように説明することができます。
・日の光が当たっているところ＝明るい
・日の光が当たっていないところ＝暗い

つまり・・・
黄色に近い色が明るく、青紫に近い色が暗い色の組み合わせが「ナチュラルハーモニー」の組み合わせになります。
※明るい＝明度が高い（白を多く混ぜた色）

「コンプレックスハーモニー」は黄色に近い色が暗く、青紫に近い色が明るい色の組み合わせになります。

ナチュラルハーモニー例

コンプレックスハーモニー例

2.Webデザインにおける活用例

2-1. ナチュラルハーモニーの活用例

上段に黄色寄りの赤、下段に赤を配置しました。
黄色に近い色を明るくすることで自然な色使いに見えます。さらに下段の赤を暗く(黒を混ぜる)ことによって下に重量感が出て、安定感のある色使いになります。

2-2. コンプレックスハーモニーの活用例

見慣れない色の組み合わせなので、違和感を感じる方が多いと思います。
webデザインにおいて、コンプレックスハーモニーの配色を使うメリットは、少し違和感を感じるので目に留まりやすくなります。

3.実際に使われている活用例

3-1. ナチュラルハーモニーの活用例

資生堂PRIOR

商品に合うピンク色の文字が黄色の明るい黄色を背景にすることで、商品のよさを十分に伝えられている配色になります。

資生堂PRIOR

株式会社真面目

優しい黄色ベースの背景により赤色の社名がより映える配色になっています。

株式会社真面目

はまだ歯科・小児歯科クリニック

黄色の薄い背景と黄緑の文字がクリニックの清潔さやナチュラルさを表現しています。

はまだ歯科・小児歯科クリニック

3-2. コンプレックスハーモニーの活用例

DOL制作物 – Cherishホームページ
右下のPAGE TOPのボタンが目立つように配色されています。

Cherish

Choco-ne

黄色寄りの赤に黒を混ぜた茶色の文字がチョコレートをうまく表現しており、さらにラムネフレーバーを連想させる爽やかな青を薄く背景にすることによって洗練された配色になっています。

choco-ne

道路標識

日常の中で見られる標識は誰にでも見やすいように設計されています。こちらの標識は赤に青の配色で目に止まりやすく運転手に注意して見てもらえる配色になっています。

道路標識一覧 – 国土交通省

おわりに

配色を意識することで効果的な色使いにすることができるようになったり、知識として知っておくことで時短で配色ができるようになると思います。この記事を参考に少しでも日々のデザインワークや業務の役に立てていただけたら幸いです。

Webサイト制作においてスライド表示は欠かせないと言っても過言ではありません。
例えばメインビジュアルやバナーリンクをスライド表示にすることは良くありますよね。
そんなときに便利なのが「slick」というプラグインです。
導入方法や使い方もとても簡単なので、今回はスライダープラグイン「slick」をご紹介します。

1. slickとは

冒頭でも説明した通り、スライダーを作成するプラグインです。

公式HPはこちら

2. slickの使い方 ~導入~

2-1. slickをダウンロードする

公式HPより「get it now」をクリックし、zipファイルをダウンロードします。
ダウンロードしたファイルの内、使用するのは下記の2つです。

・slick > 「slick.css」
・slick > 「slick.min.js」

上記２つをcssフォルダ、jsフォルダに格納します。

2-2. htmlに記述する

htmlの<head>内に下記記述します。
slickはJQueryで動いているので、JQueryのCDNも忘れずに追記しましょう。

<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

3. スライダーの作成

3-1. 完成サンプル

5枚の画像を使ってスライダーを作成しています。

3-2. htmlを記述する

<ul class="slick">
 <li><img alt="画像1" src="img/img1.jpg" /></li>
 <li><img alt="画像2" src="img/img2.jpg" /></li>
 <li><img alt="画像3" src="img/img3.jpg" /></li>
 <li><img alt="画像4" src="img/img4.jpg" /></li>
 <li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>

3-2. cssを記述する

デザインによってcssは変更して下さい。

.slick {
 width: 40%;
 margin: auto;
}
.slick li img {
 width: 100%;
}

3-2. JQueryを記述する

$(function() {
 $('.slick').slick({
  autoplay : true,autoplaySpeed : 1000,
  dots: false,
　arrows:false
 });
});

4. カスタマイズ方法①

4-1. 完成サンプル

左右にある画像を少し見えるように作成しています。

4-2. cssを記述する

.slick {
 width: 100%;
 margin: auto;
}
.slick img{
 margin: auto;
}

4-3. JQueryを記述する

$(function() {
 $('.slick').slick({
  autoplay : true,
  autoplaySpeed : 1000,
  dots: false,
  arrows:false,
  centerMode: true,
  centerPadding: '25%'
 });
});

<ul class="slick">
 <li><img alt="画像1" src="img/img1.jpg" /></li>
 <li><img alt="画像2" src="img/img2.jpg" /></li>
 <li><img alt="画像3" src="img/img3.jpg" /></li>
 <li><img alt="画像4" src="img/img4.jpg" /></li>
 <li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>
<ul class="thumbnail">
 <li><img alt="画像1" src="img/img1.jpg" /></li>
 <li><img alt="画像2" src="img/img2.jpg" /></li>
 <li><img alt="画像3" src="img/img3.jpg" /></li>
 <li><img alt="画像4" src="img/img4.jpg" /></li>
 <li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>

.slick {
  width:100%;
  margin: 0 auto 20px;
}
.slick li img{
  width:100%;
}
.thumbnail {
  width:100%;
  margin:auto;
}
.thumbnail li img{
  margin:auto;
}

$(function() {
 $('.slick').slick({
  asNavFor:'.thumbnail',
  slidesToShow:1,
  arrows: false,
  autoplay : true,
  autoplaySpeed : 1000
 });
});
 $('.thumbnail').slick({
  asNavFor:'.slick',
  focusOnSelect: true,
  arrows: false,
  centerMode: true,
  centerPadding: '25%'
 });
});