2016年4月 – AGN Web team

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

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

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

GMOペパボ株式会社

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

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

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

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

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

中央電力株式会社

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

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

エイム株式会社

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

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

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

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

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

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

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

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

株式会社LITALICO（りたりこ）

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

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

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

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

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

株式会社ニチイ学館

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

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

株式会社クラーチ

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

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

ソニーミュージック

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

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

カタログから物撮りを”作る”

まず、ほとんど「ありえない」事があった時に役立つであろう
「イレギュラーな注文へ答える」ための記事です。

商品を掲載する際に、『品物が手元にない』『生産中で製品が１つもない』…などなど、写真が用意できなくて困る事があります。
そんな時に、掲載に耐えられるようなサイズのカタログなどの原稿があれば何とか…何とかしましょう!!

制作事例　ヤマザキライス様

■コンテンツ追加とプチリニューアル

クライアント名：ヤマザキライス様

URL：http://www.yamazaki-rice.com/

制作内容：

メインビジュアルをスライダーから背景動画に変更しました。
ドローンで撮影した動画をご提供いただきました。
※弊社撮影ではありません。弊社へドローンの撮影をご希望される場合はこちらをご覧ください。

また、あらたな取り組みにチャレンジされるとのことでコンテンツの追加をいたしました。

制作事例　社会福祉法人わかば福祉会様

ãã£ããã£2

新発田市を中心に幼稚園と保育園を展開している法人様です。
2016年4月1日にオープンした新しい認定こども園です。

公開　2016年4月25日
URL　http://www.wakaba-net.ed.jp/aoba/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入

制作事例　社会福祉法人わかば福祉会様

ãã£ããã£
新発田市を中心に幼稚園と保育園を展開している法人様です。
2016年4月1日にオープンした新しい保育園です。

公開　2016年4月25日
URL　http://www.wakaba-net.ed.jp/konoha/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】

以前書いたslickの記事が比較的に読んでいただけているようなので、調子に乗ってもう一つ書きます。

前回記事
レスポンシブWebデザインに対応！Slick.jsを使ってスライドのサムネイルの位置を切り替える



現在(2016年4月)弊社では求人を募集していまして、求人ページを作った時に使ったパターンです。
→　この個所(INTERVIEW)です

今回はカルーセルスライダーで、真ん中の写真だけちょっと拡大させて見せるやつです。
カルーセルスライダーでたくさん写真があるぞっていうのを示しておいて、その中でウェイトを付けてあげることで目を引いてもらうパターンですね。
公式のサンプルの中のセンターモードで紹介されているやつ何ですが、普通にセンターモードにするだけだとこうならないし、特に公式では拡大させる方法が紹介されていないんですよね。※見つけられていないだけかもしれません…

ということで求人ページのやつをもう少しシンプルにしたデモを作ってみました。

【DEMO】

HTML

<div class="slider container">
    <div class="slider-for">
        <div class="slide-item"><img src="images/160423/01.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/02.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/03.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/04.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/05.jpg" alt=""></div>
    </div> 
</div>

</div>

.containerはmax-width： 960px;で画面のセンターに寄せている、個人的に使っているクラスなので無視してください。
あとは比較的普通です。

Javascript

$(window).load(function(){
    $('.slider-for').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        centerMode: true,
        infinite: true,
        autoplay: true,
        centerPadding: '100px',
        arrows: false,
        responsive: [                    
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '0px',
                    slidesToShow: 1
                }
            }
        ]
    });

    // ナビゲーション用
    $('.slick-dots').find('li').eq(0).addClass('slick-current');
    // On before slide change
    $('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){     
        $('.slick-dots').find('li').removeClass('slick-current');
        $('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');
    });
});

$(window).load(function(){

$('.slider-for').slick({

slidesToShow: 3,

slidesToScroll: 1,

dots: true,

centerMode: true,

infinite: true,

autoplay: true,

centerPadding: '100px',

arrows: false,

responsive: [

{

breakpoint: 480,

settings: {

arrows: false,

centerMode: true,

centerPadding: '0px',

slidesToShow: 1

}

]

});

// ナビゲーション用

$('.slick-dots').find('li').eq(0).addClass('slick-current');

// On before slide change

$('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){

$('.slick-dots').find('li').removeClass('slick-current');

$('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');

});

Javascriptで大事なところは、

centerModeをtrueに設定すること。
slidesToShowは奇数にすること。
centerPaddingで画像間の余白の調整

になると思います。

CSS

.slider{
    overflow-x: hidden;   
}
.slick-list{
    overflow: visible;   
}
.slick-slide{
    text-align: center;   
}
.slider-for img{
    max-width: 280px;
    height: auto;
    box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);
    display: inline-block;
}
.slider-for .slick-current img{
    transform: scale(1.10);
}  
/* ページャー */
.slick-dots{
    text-align: center;
    margin-top: 50px;
}
.slick-dots li{
    display: inline !important;
    margin: 0.5em;
}
.slick-dots button{
    display: inline !important;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    text-align: center;
    overflow: hidden;
    text-indent: 2em;
    border-radius: 100%;
}
.slick-dots .slick-current button{
    background-color: aqua;
}
/* スマートフォンの場合 */
@media(min-width : 480px){
    .slider-for img{
        max-width: 300px;
        border: 10px solid #fff;
    }
    .slider-for .slick-current img{
        transform: scale(1.15);
    }
}

.slider{

overflow-x: hidden;

}

.slick-list{

overflow: visible;

}

.slick-slide{

text-align: center;

}

.slider-for img{

max-width: 280px;

height: auto;

box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);

display: inline-block;

}

.slider-for .slick-current img{

transform: scale(1.10);

}

/* ページャー */

.slick-dots{

text-align: center;

margin-top: 50px;

}

.slick-dots li{

display: inline !important;

margin: 0.5em;

}

.slick-dots button{

display: inline !important;

width: 1em;

height: 1em;

background-color: #ccc;

text-align: center;

overflow: hidden;

text-indent: 2em;

border-radius: 100%;

}

.slick-dots .slick-current button{

background-color: aqua;

}

/* スマートフォンの場合 */

@media(min-width : 480px){

.slider-for img{

max-width: 300px;

border: 10px solid #fff;

}

.slider-for .slick-current img{

transform: scale(1.15);

}

ちょっと長いですけど、拡大させるのに重要なポイントは

.slider-for .slick-current img{
transform: scale(1.10);
}

.slider-for .slick-current img{

transform: scale(1.10);

}

ここだけなんですよね。slickの場合、センターモードにすると、currentスライダーがセンターになり、.slick-currentが付与されるので、.slick-currentの中の画像のscaleを大きくしてあげています。
さらにslick側で用意する.slick-listにoverflow: hidden；がslick.cssで設定されていて拡大したときに画像が見切れてしまうので、overflow: visible；にするか、paddingで上下に余白をとってあげれば大丈夫です。

基本的にはこれで何とかなると思います。
画面いっぱい画像を並べるのであれば、.containerではなくてwidth： 100%;にしてカルーセルスライダーを画面のセンターに絶対配置してあげるとよいと思います。
あとは大きさや画像ふちを付けたり、影を付けたりと装飾して見た目を整えます。

slick使いやすくて好きです。前回のとはちょっと毛色が違いますが、こんな使い方もできますね。(というか、こちらの方がslickっぽいですね)
ほかにもこんなことできたーとか出てきたらまた紹介しますね。
もしくはこんなんはできないのか？ってのがあれば、挑戦してみますのでコメントください。

というわけで、弊社ではただいま求人募集中です。

求人募集中

求人の詳しい内容はこちらから
事業紹介はこちらから

※この情報は2016年4月現在の情報です。詳しくはアートグラフィック新潟Webサイトよりお問い合わせください。

コンタクトフォーム７のエラー（警告）を取る

みんな大好きcontact form 7。WordPressにお手軽にフォームを設置でき、カスタマイズも自在な人気プラグインです。私も長いことお世話になってます。
バージョン4.4に上げたあたりから、警告がダッシュボードに出るようになりました。
blog_cf7_01
設定は何も変えてないのに出た場合は、このまま利用してもちゃんとメールは届きます。
暫く放置してましたが、やはり気になるので、きちんと対処してみました。 blog_cf7_02
今回の例では、エラーが2個ありました。というか書いてありました。 blog_cf7_03
実際の設定画面を開いてみると、赤字の警告が該当項目の下に書いてあります。
それぞれ対処しましょう。
blog_cf7_04
題名の方はカンタンな話で、フォームからの送信時に題名が入ってないと、題名無しのメールになってしまうので、警告が出ます。ここは、題名が空欄の場合でも何らかの文字が入るように、分かりやすく「件名：」と入れてみました。

送信元のエラーですが、例としてあげたWordPressはドメインsample.com/test/と言うフォルダに構築しているため、ドメインが違うと認識されたようです。（もしかしたら違う理由かもしれませんが、それしか心当たりが無いので。）サブドメインを使っていても同じエラーが出るようです。
このような同じドメインのはずなのにエラーが出る場合はタグを使わず、
直接test@sample.comのように、アドレスを書き込んでください。 blog_cf7_05
[]を取るのを忘れずに。構文エラーで怒られます。 blog_cf7_06
この状態で保存をすると、エラーが無くなり警告も表示されなくなりました。スッキリです。
用法として正しいメールを送るように警告しているので、送信に支障が無くても折を見て対処した方が良いでしょう。

Facebookページのカバー画像が増えたから一挙公開します!!

こんにちは！
みなさんのところの桜はいかがですか??新潟の桜はそろそろ散り始めています。

さて、AGN Web Teamではこのブログの他にFacebookページもやっています。（Twitterもありますよ♪)

Facebookページでは、毎月担当を換えてカバー画像の更新をしてきました。
そのカバー画像がたくさんたまったので、列挙してみようと思います。

カバー画像は、デザイナーだけでなくディレクターやコーダーも日頃の息抜きと、とても前向きな協力(~~と言う名のプレッシャー~~)にてみんなで作っています。
それではいってみましょう！

続きを読む Facebookページのカバー画像が増えたから一挙公開します!!

Windows10でXAMPPを使ってApacheが立ち上がらない

ãã£ããã£3

先日、半強制的にWindows7からWindows10にアップグレードしたのですが、
OSのバージョンが変わると、どこに何があるか、わからなくなりますね。

Windows10にアップグレード後、初めてローカルサーバーを起動しようと
XAMPPを立ち上げたら、何やら赤文字でエラーが表示されています。

？？？？

よくわかりませんが、どうやらApacheが立ち上がらないようです。

正直、エラー内容がわからなかったので、google先生に聞いてみることにしました。

参考サイト
http://personal-studio9.com/xampp-windows10/

どうやら80番ポートがWindowsによって使われているから
Apacheを起動できません。と言われているので、
使われているWindowsのIIS（インターネットインフォメーションサービス）をオフにします。

IISを無効にするためにはプログラムのアンインストールと変更＞Windows の機能の有効化または無効化を立ち上げなければ
いけないのですが、Windows10にアップグレードしたばかりで、
コントロールパネルがどこにあるかわかりません。

いろいろ探してみたら、スタートメニュー＞すべてのアプリ＞Windowsシステムツール＞コントロールパネル
にありました。

コントロールパネル＞プログラムと機能＞Windows の機能の有効化または無効化を立ち上げます。

ãã£ããã£5

ãã£ããã£4

インターネットインフォメーションサービスが起動していますのでここをオフにします。

ãã£ããã£2
オフにして再起動して設定完了です。

再起動後、無事にApacheが立ち上がりました。

制作事例　アートグラフィック新潟採用ページ

AGNkyuzin

自由人募集します。

やりたいことがあるのなら、その自由な発想でどんどんチャレンジできます。
アクティブに動ける人であれば、どんなことでも実現できます。
私たちは、あなたの「自由」を受け入れることができます。
アートグラフィック新潟はそれができる会社です。
URL　http://www.agn.co.jp/hp/information/recruit.php

GMOペパボ株式会社

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

中央電力株式会社

エイム株式会社

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

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

株式会社LITALICO（りたりこ）

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

株式会社 ニチイ学館

株式会社クラーチ

ソニーミュージック

HTML

Javascript

CSS

求人募集中

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

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

株式会社ニチイ学館