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

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

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


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


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

201603_00

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

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

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

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

201603_01