研修旅行 報告!!

飛行機から1歩出た瞬間から、身に覚えのある気温と独特の湿度のおかげで「沖縄に来たんだ」と実感しながら預けた荷物を受け取り外へ。
沖縄の抜けるような青空と日差しに、数時間前まで肌寒い新潟に慣れていた体が驚いてるのを感じながら”ゆいレール”に乗ってホテルへ。
今回の研修旅行では、沖縄の”端から端まで”行き、歴史や文化を体験する事が目的で、
普通の旅行では行く事が稀な『沖縄最北端の辺戸岬』から南は『ひめゆりの塔』、『平和記念公園』まで、4日間と限られた日数ですが体感させて頂きました。

※Safariで写真が表示されない場合は下記の手順で『WebGLを有効』にして下さい。
(1)safari→環境設定→詳細→『メニューバーに”開発”メニューを表示』にチェックを入れる。
(2)メニューバーに表示された『開発』のメニューからwebGLを有効にする。


1日目

初日は、なんと言っても首里城。
首里城の形状、色使い。その周りにある円鑑池の佇まいに文化や感覚の違いを感じる事ができました。


2日目

二度目となる『美ら海水族館』。
メインの巨大水槽でゆったりと泳ぐ巨大なジンベイザメは見入ってしまって、時間の経つのを忘れてしまいそうです。
その一角に、食い込むかたちの観覧席があり、そのジンベイザメを見上げて見る事ができます。


天候に恵まれた『古宇利ビーチ』。
その砂浜は珊瑚が砕かれ細かくなった物だそうで、その細かくなる前のサンゴも棒状の物や枝分かれした物なども混ざっていました。ガイドの方によると色付けして箸置きなどにする人がいるそうですが、その珊瑚どうしがぶつかると小気味の良い金属のような音がするので、いくつか紐で吊るしてウィンドベルにしても良い感じ。
古宇利大橋もビーチからも見応えがあります。


3日目

朝からの晴天。
こちらも再びの万座毛。沖縄の海は天気しだいで色が変わると言われる通り、晴天の海は以前来た時よりも澄んでキレイなブルーやエメラルドグリーンで染まっていました。
ゾウに見える岩は以前来た時よりも浸食が進んでいた気がしますが…どうなんでしょう。


この日。日曜日は国際通りが午後から18時まで歩行者天国(歩行者優先のトランジットモール)と言う事で、車道から一枚。
観光としての国際通りですが、店の看板、色使いなどなど町並みだけでも違いと言う物が見えてきます。


4日目

最終日となる四日目。
平和記念公園、ひめゆりの塔へ。
再び訪れましたが、胸を締め付けられる思いがします。


全四日間、ガイドさんが言っていましたが『一度も雨に打たれずに観光できるのは本当に珍しい』との事。
移動中は雨に若干降られたりしましたが目的地に着くと『晴天』と言う不思議な天気で、本当に『おかげさま』でイロイロな文化、自然に触れる事ができました。
そして、また新たに興味を持っ事も個人的にはできました。

こういった経験をさせて頂ける研修旅行に行かせて頂いた事に
心から感謝します。

この記事の写真は全て弊社で撮影・掲載をしております。
普通の写真では『表現できない』『伝わりづらい』、そんな時に360度撮影をお勧めさせて頂いています。
撮影の際は三脚等で設置し撮影をしますので雰囲気を損なう事が少ない状態で掲載ができます。
お困りの際は、ぜひお声がけ下さい。


Google Analyticsで時間毎のアクセス数を見る。

先日、弊社管理サイトのサーバーを変更することになり、移転タイミングを決めるため、なるべく訪問者数を少ない時間を調べることになりました。
たしか、Google Analyticsでは標準で、時間別のアクセス数をグラフで見られたはず、と思っていたのですが、無いです。バージョンアップの際に消えたらしいです。しかも結構昔に。

単純にユーザーサマリーで「時間別」を選ぶと↓のようになります。

20160515ga00
今回は「何時のアクセスが1番少ないか?」を知りたいので、これでは用を為しません。
(CSVを落として、集計すればわかりますが、もっと手っ取り早く知りたい。)

そこで、時間別の数字を見るには、カスタムレポートを使います。20160515ga01

上部メニューから「カスタム」のリンク→「新しいカスタムレポート」のボタンを押す。

20160515ga02 各項目を埋めていきます。
・タイトル … 任意です。適当に分かりやすい名前を。
・レポートタブ名前 … 任意です。ここも分かりやすい名前を。
・指標グループ … 「ページ別訪問数」を選択。
・ディメンションの詳細 … 「時」を選択。
・ビュー … 複数のビューを設定している場合には、目的の物を選択。

「保存」を押して、実際にレポートを見てみましょう。

20160515ga03無事0時~24時の時間毎の訪問者数が「ぱっと見で」わかるようになりました。
例では、午前4時が最も少なくなる時間帯で、何かやるに箱の前後が好都合、と言うことになります。

何らかの理由で、閲覧者の多いサイトを一時的にでも止めなくてはならない時や、逆にアクセスが多い時を狙って新規コンテンツをアップするなどの判断に使える基本的なデータになります。


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…ぜひサイトにいってその変化をみてほしいです。
多数使用していても、そこまでチカチカしない配色は参考になります!

 

終わりに…弊社の採用情報


ちなみに弊社ホームページでも、採用ページを公開中です。




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


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

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

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

続きを読む カタログから物撮りを”作る”


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

ss_yamazakirie

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

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

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を使ってスライドの サムネイルの位置を切り替える

160423blog

 

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

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

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

【DEMO】


HTML




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

Javascript




Javascriptで大事なところは、

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

になると思います。

CSS




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



ここだけなんですよね。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サイトよりお問い合わせください。


コンタクトフォーム7のエラー(警告)を取る

みんな大好き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ページのカバー画像が増えたから一挙公開します!!