BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。Acrobatで縦長の画像を横に並べて印刷する方法ディレクターにチェックしてもらうとき、クライアントとの打ち合わせのとき、Webサイトの文字校正...などモニターごしで見るWebデザインでも、紙に印刷してチェックを行う機会って結構多いものです。Webページのデザインって大体縦に長いんですよね。ランディングページなどの1ページ完結型のサイトになると、それはもう、もう!ひたすら長い!それをA4やA3用紙1枚に全体を収めようとすると、文字も読めないくらいに小さく、左右の余白もたくさん出てしまって...ちょっと残念な仕上がりになってしまいます。なんとか収まっている...というような状態です。Acrobatを使い、縦に長い画像を見やすいサイズに分割し、横に並べて印刷する方法をご紹介します。A4用紙にこんな感じに並べて印刷していきます。Proでの出力手順です。データの準備AIデータ、PSDの場合は、jpg、pngなどAcrobatで扱える画像形式で書き出します。Acrobatでの設定データを開くAcrobatで印刷したいデータをドラッグ&ドロップで開きます。複数データをまとめて入れると、このようなモーダルウィンドウが開きます。↓のように複数ページを続けて印刷したい場合は「はい」をクリックし、この段階でデータをひとつのPDFに統合しましょう。※あらかじめIllustratorやPhotoshopで、ひとつのPDFに書き出しておいてもOKです。↓のように、データをそれぞれ別ページで印刷したい場合は「いいえ」をクリックし、個別のPDFとして印刷をしていきます。⌘+Pまたはメニューバーのファイル→プリントからプリント設定を開きます。「ページ設定」をクリックし用紙サイズを設定します。次に「ページサイズ処理」で「ポスター」を選択します。今回は2分割したものを横に並べたいので、プレビューを参考に、2枚に収まる倍率を設定します。境界で印刷されない部分が出るのを想定して、「重なり」も若干つけときましょう。今回のデータでは倍率:35%/重なり:10mmで設定しました。※複数ページ印刷する場合は、他ページのプレビューも合わせて確認しましょう。!注意!倍率によっては、このようにプレビュー上で、用紙の向きが横方向になる場合があります。このまま印刷すると、このように印刷されてしまいます。イメージ通りのレイアウトになるように、プレビューは印刷前に再度確認しましょう。「プリンター」をクリックし「レイアウト」をタブから選択。ページ数を「2」にし、横方向に並べます。「レイアウト方向」ではページの順番を変更できます。左右を入れ替えるときはこちらで設定しましょう。「プリント設定」にもどり「印刷」をクリックしたら、完了です!こちらも便利ブラウザ上で分割印刷できるWebサービスもあるようです。ツールを介せずサクッとできるのがいいですね!モバイルデザインの印刷の場合は、こちらもおすすめです。コメントを残すMacの立ち上げ時、Evernoteアプリを自動起動させないようにする方法ノートアプリとして定番の「Evernote(エバーノート)」。ビジネスではもちろん、プライベートでも活用されている方はたくさんいらっしゃるかと思います。ブラウザ版の他に、Macにインストールできるアプリ版もあるのですが、このEvernoteアプリの初期設定では、Macのシステム起動時に自動的にアプリが立ち上がるようになっています。個人的に使用頻度が高いのはブラウザ版の方。アプリ版はネット環境に不具合があったときの予備程度のものだったので、起動のたびに立ち上がってしまうのは結構煩わしい。自動起動をオフにしようと試みてはみたものの、なかなか長いこと解決策が見当たらなかったのです。今回その悩んでたものが解消されたので、小ネタではありますが記事にしてみました。設定箇所は「Evernote」と「システム環境」の2つ。詳しい手順(とはいっても、簡単な方法なのですが。※以下は2017/5/10現在の情報です。Evernoteアプリの設定まずはEvernoteアプリからの設定です。Evernoteのメニューバーの「Evernote」から「環境設定」を選択します。「環境設定」の「全般」から「コンピューターにログインした時にEvernoteを起動」のチェックを外します。これでEvernoteでの設定は完了です。システム環境の設定デスクトップのメニューバーの「アップルメニュー」から「システム環境」を選択します。「システム環境」内の「ユーザーとグループ」を選択します。「ログイン項目」のタブをクリックし、一覧の中から「Evernote」を選択した状態で下の「-」ボタンをクリックして完了です。終わりにアプリの自動起動の設定は、通常「システム環境」からだけでできるものがほとんどなのですが、Evernoteはアプリ自体に設定項目があるため2箇所の設定の見直しが必要です。どちらかがオンになっていると、自動起動はオフにはなりません。設定自体は簡単ですが、私自身それに長らく気づかず、なぜだろう?と首をひねっていました。同じようにお悩みの方は、ぜひおためしください。固い業種のイメージをやわらげたり特色や個性をより強調したり意外な組み合わせでインパクトを出したり...とイメージの印象付けに効果的なイメージキャラクター。そんなキャラクターをうまい具合に取り入れている、9つのWebサイトをチェックしてみました。※2017/03/31のサイトの情報です。コメントを残すIllustratorで手描き風【水彩画風の塗り】ブラシを使用した線を使った手描き風の表現や「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。今回はIllustratorだけでできる、水彩画風の表現方法です。とある案件のデザインをしていたときのこと。基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。様のこちらの記事で紹介されていた方法がとても参考になりました。自分なりに試してみたものを、覚書として今回記事として残しておきます。Vivaldiを使ってみてる常時立ち上げていたいチャットツールやメモツール。進めている案件の関連サイト。勉強用のWeb系ブログ。いろいろなWebサイトをみていると、いつのまにかブラウザのウィンドウやタブがデスクトップに散乱してしまう、sakaiです。複数立ち上げていると、探す手間がかかったり、他のタブに気を取られて作業が中断してしまったりとあまりいいことはありませんよね。今回は、タブの整頓にとおすすめしてもらった「Vivaldi(ヴィヴァルディ)」というWebブラウザをご紹介します。Technologiesによって開発されているウェブブラウザである。Technologiesは、オペラ・ソフトウェアの創設者の一人でありCEOであったヨン・スティーブンソン・フォン・テッツナーによって設立された。friends”(私たちの友人のための新しいブラウザ)をスローガンとしており、技術者、インターネットのヘビーユーザ、OperaのレンダリングエンジンがPrestoからBlinkへと変更されたことに伴い多くの機能が削除されてしまったことに不満を抱いているかつてのOperaユーザを主な対象としている。(引用:Wikipedia)以前のOperaの機能を世襲したブラウザなんですね〜。Operaを一時期使用し使用レビューを書いたこともありましたが、残念ながらメインで使用することなく、結局Chromeに落ち着いてしまった経緯があるのですが、また縁あってOpera由来のブラウザにお世話になる日がくるとは。いうことで、期間にして2ヶ月ほど。Vivaldiをメインブラウザとして使ってみて、ぜひおすすめしたいところ、逆に残念に思ってしまったところをあげてみました。長くなってしまったので、ご興味のあるところからどうぞ。2016ハロウィンが終わったと思ったら、次はもうクリスマス!一大イベントに向けて、早くもクリスマス仕様のWebサイトやページが続々公開されています。普段よりも華やかにドレスアップしたWebサイト。魅力的なデザインを一足お先に、チェックしてみました。クリスマスサイトhttps://www.mikihouse.co.jp/christmas/赤・白・ピンクのベースカラーのグリッドが、ぎゅっと詰め込まれたギフトボックスのよう。子ども服のブランドですが、贈る側の大人もぐっとくるシックなデザインですね〜。コペンハーゲンのある風景とともにクリスマスギフトを紹介されています。メインカラーのグリーンを基調に金色をアクセントとした、全体的に高級感のあるデザイン。キャッチコピーのリボンのアニメーションが、可愛らしいアクセントになっています。※レスポンシブデザイン三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」http://cp.miguide.jp/christmas-journey/闇に浮かぶオレンジ色の「スカイランタン」が印象的。明朝体のコピーも力強く、目を惹きつけられます。クリスマスを「こころに太陽を呼ぶ、祝祭。」とし、太陽をモチーフとしたあしらいや色彩でページを彩っています。バックを暗色にさせていることで、より光が引き立っているところもまたすてきですね。コンテンツの開閉も、ちょっと楽しいアニメーションになっています。※レスポンシブデザイン土屋鞄のクリスマスギフトサイト|土屋鞄製造所http://www.tsuchiya-kaban.jp/c/2016xmas.phpシンプルなツリーに、星座がきらめくシンプルなメインイメージがすてき。クリスマスまでのカウントダウンにもわくわくしてきますね!取り扱っているギフトは、鞄や財布などの革製品。革の絶妙な光沢が映えるような、濃紺や深緑などの落ち着いた配色でまとめられています。大切なひとへ、ツリーを贈ろう。|土屋鞄製造所http://www.tsuchiya-kaban.jp/event/2016xmas_yourtree.phpこちらも土屋鞄製造所さんのクリスマスサイト。ランダムで作られるツリーに添えて、ちょっとユニークな一言メッセージを送れるサービスです。MAGIChttp://crystalmagic.jp/s/tokyu/ラインと絶妙な濃淡で表現された、クリスタルのイメージが美しいです。ボタンやページトップのホバーアニメーション、ゆっくりと変化するクリスタル調の背景など、細かいところまでこだわりを感じるデザインです。マザーハウスのクリスマス2016|MOTHERHOUSEhttp://www.mother-house.jp/event-campaign/xmas/町に立ち並ぶ家が、なんとギフトボックスに。広がる灯りの表現や、微妙な濃淡が重なる淡い色彩が、とてもやさしいサイトです。他にもタイトルロゴやワンポイントのツリーなど、すみずみまで可愛らしいあしらいに溢れています。HOLIDAY|PARCOhttp://parco.jp/gift/油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。agetehttp://www.agete.com/2016christmas/セピア調の繊細なタッチで描かれたイラストが美しいです。ウィンドウ内でページが完結するレイアウトで、メニューの配置がちょっと珍しく感じました。商品ページも同じくセピア調でまとめられ、ゆっくりと降る雪のアニメーションやラインの飾り枠が、華奢で繊細なアクセサリーにとてもマッチしています。ジャパンhttp://www.starbucks.co.jp/holiday/動画で進んでいく、スクロールアニメーション。描くように表示されるボタンやコピー、手描き調のあしらいや、ちょっとコミカルなコマ撮りアニメーションなど。木目調の背景と相まって、全体的にほっこりと暖かいデザインイメージです。トマム【公式】http://www.snowtomamu.jp/special/xmas/雪原に広がるキャンドルの灯りと、満天の星空がとても幻想的ですね...!フルスクリーンと降雪のさりげないアニメーションで、その地の魅力をシンプルに演出しています。※レスポンシブデザイン西武・そごうのクリスマス|西武・そごうhttps://www.sogo-seibu.jp/christmas2016/縦組み&明朝体のキャッチコピーが印象的。した曲線と交わるロゴタイプもすてきです。イラストで埋められたバックと、プレゼントを結ぶリボンを思わせるような赤色のバックがとてもにぎやか。2016https://www.kaikan.co.jp/special/xmas/左右2分割されたメニュー。こちらはケーキやレストランの問い合わせ先が複数あるのですが、こうして入り口から分けられていると動線がシンプルでわかりやすいですね!赤・白・金で落ち着いた彩度の色どりで、華やかな大人のクリスマスといったイメージです。2016http://www.lupicia.com/shop/e/eX16/お茶のオンラインショップ「ルピシア」のクリスマスサイト。クリスマスの限定ギフトに描かれたキャラクターたちが登場する、絵本「アルチザンたちの物語」が楽しめます。メインビジュアルはパララックススクロールで、奥行きのある演出がされています。※レスポンシブデザインサンリオクリスマス特集2016https://shop.sanrio.co.jp/special/xmas2016/クリスマスカラーにまとめられた、シンプルなキャラクターイラストがメインビジュアル。ツリーのオーナメントになったキャラクターたちも、パララックススクロールで背景を彩ります。Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。2016ここ数年で、日本でもすっかりおなじみのイベントとなってきたハロウィン。会場参加型のイベントの他にも、ハロウィン限定のグッズやSNSでのキャンペーンなど、手軽に参加できるものも増えてきました。時期はいよいよハロウィン目前。サイトまるごとハロウィン仕様の特設サイトも続々と公開されています。おどろおどろしかったり、ポップだったり、ゆるかったり...いろいろ見てみると、それは意外と多種多様。この時期ならではのハロウィンサイトを、ぜひお楽しみください。※以下は2016年10月26日現在の情報です。みんなでしちゃってみハロウィン|グリコアイスhttp://cp.glico.jp/icenomi-calendar/halloween/Twitterハッシュタグで参加する、アイスの実のレシピ投稿イベント。スクロールに合わせて回るジャック・オー・ランタン(アイスの実)や、がくがく不気味に揺れる写真フレーム、ぶるるっと震えるボタンなど、楽しい動きがたくさん。普段のサイトだと、使うのにちょっと躊躇してしまうような動きも、このようなイベントサイトだと賑やかな演出にとてもいいですね。サンリオのハロウィーンパーティスペシャルサイトhttp://www.sanrio.co.jp/special/halloween/2016/サンリオキャラクターたちが仮装でお出迎え。アメリカンコミック調の雰囲気が可愛らしいです。ちなみに10/25にサイトを訪れたら「クロミちゃん」のサイトジャックのイベント開催中でした。ハロウィン当日まで、こういったお楽しみがあるのがいいですね。ショッピングhttp://topics.shopping.yahoo.co.jp/special/halloween/ところどころにパララックススクロールを適用し、立体的な演出がされています。覗いてるようなリアルなモチーフは、ちょっとホラー...。仮装をまとったメインビジュアルのお二人の、ビフォーアフターがまた楽しいです。TOKYO|東京ブランド公式サイトhttps://andtokyo.jp/halloween/ジャック・オー・ランタン柄のゴミ袋を片手に行われる、東京のクリーンイベント。去年はきゃりーぱみゅぱみゅさんが広告塔となって開催されていました。黒とオレンジのハロウィンカラーを基調としたシンプルなデザインで、ジャックのアイコンが可愛らしいアクセントになっています。コメダでフォトコン|珈琲所コメダ珈琲店http://www.komeda.co.jp/halloween/こちらは、TwitterまたはInstagramのハッシュタグで参加するフォトコンテスト。コメダ珈琲のロゴでおなじみのキャラクターも、ハロウィン仕様...!なんだかとてもしっくりきています。みるキャラクターの別の顔に出会えるのも、ハロウィンイベントの楽しみのひとつかもしれませんね。KAKIで今夜はPARTY|JAグループ和歌山http://kakine-chan.com/halloween/かぼちゃではなく、あえて「柿」をテーマにしているのが、インパクト抜群です。(確かに大きさやお値段を考えると、手軽でいいのかも...?)和歌山のキャラクターと、「DJみそしるとMCごはん」さんの織りなす、ゆる〜い雰囲気のハロウィンサイト。柿のパーティーレシピや「KAKI知識」なる柿情報を、これまたゆる〜く紹介されています。2016http://www.mon-cher.com/halloween2016/堂島ロールでおなじみ、モンシェールのハロウィン特設サイト。暗いオレンジのグラデーションがとても上品で、しっとりと大人向けなハロウィンです。ギザギザのラインや手書きの英字を取り入れた、ハロウィンらしい遊び心も。男梅サワー妖怪カメラ|サッポロビールhttp://otokoume-youkaicamera.com/こちらは浮世絵と妖怪をモチーフにした、和製ハロウィン。写真をアップロードすると、般若や化け猫などの妖怪に変身できるというコンテンツです。変身後の写真はマウスに合わせてグリグリ動くので、ちょっと人に見せたくなるかもしれません。マルイのハロウィン|マルイhttp://www.mon-cher.com/halloween2016/ファッションモールマルイの、イベント情報特設サイト。暗めの配色にもかかわらず、絵本のようなタッチのイラストで、どこか暖かな印象のデザインです。終わりにいかがでしたでしょうか。Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。コメントを残す【引き出しを増やそう!】WebデザインのインプットWebチームでデザイン担当をしていますsakaiです。デザインを任せていただけるようになって早数年...にも関わらず、まだまだ勉強が必要だなんて日々感じているこの頃です。発想の幅を広げるべく、Webデザインの引き出しを増やすために見ているもの、していることを今回はあげてみました。最近はコーディングの方もすこーしずつ勉強しているところ。初心者向けではありますが、その勉強でお世話になっているところも合わせてご紹介します。1件のコメントWixの新機能を試してみました無料で使えるWebサイト作成ツール「Wix」。自由度の高いレイアウトや、アニメーションなどの目を引くデザインが、コードをいっさい書かなくても簡単に実装できてしまいます。Wix.comhttp://ja.wix.com/数ヶ月前にWixでWebサイトを作ることがあった時にも、その簡単さに驚いたのですが、それからもどんどん新しい機能が追加され、より多岐にわたったデザインを作ることができるようになりました。その新機能の中でも特に気になった2つ。8月に実装されたばかりの新しいスクロールエフェクトと、全画面に対応したカラムレイアウトについて、今回はご紹介します。コメントを残す【Gmailのメールをチャットワークにも投稿!】Zapierを使ってみた社内で使用している連絡ツール、チャットワーク。日本語でのUIが使いやすくて、ちょっとした記録なんかにも活用している今日この頃です。出社するとまず立ち上げてチェックするツールでもあるのですが、受信した内容が、チャットワークにも投稿される「メール確認ツール」としても使えないだろうかと、ふと思ったのです。Gmailでは複数アカウントがあるため、それを都度確認していくのはちょっと面倒...。来る、でも目は通しておきたいメルマガなんかのチェックができたらいいなと思ったのが始まりでした。チャットワークとGmail。違うサービスの連携ができるハブツールとして、真っ先に思いついたのがIFTTT。いろいろなサービスを対象としているこのIFTTTですが、残念ながらチャットワークはサポート外。ほかにチャットワークが使えるハブツールはないかと、探してみたらありました!その名もZapier!今回は、そのZapierというWebサービスについてご紹介したいと思います。Zapierって?以前ブログでもご紹介しているIFTTTやmyThingsのように、異なるWebサービスなどを連携させることができるツールです。何かが起こったとき(トリガー)に何かが起こる(アクション)。このサービスの組み合せを「ZAP」といい、無料プランでは5つまで作成することができます。対象アプリはなんと500以上!もちろんチャットワークも入っています。ZapierでGmailとチャットワークをつなげようということで、さっそくZapierでZAPを作ってみました。今回はGmailで特定のラベルがついたメールがくると、チャットワークのグループチャットにメールの内容が投稿されるという、ZAPを作成してみます。APIが必要なのですが、それを発行してもらうのにチャットワークへの事前申請が必要です。API申請ページへアクセスし、発行を申し込みます。ChatWorkでのご利用の方は、管理者経由でのみ申請が可能です。※申請からAPIの発行に3~5営業日かかるそうです。発行完了のメールがきたら、チャットワークの「動作設定」で「API発行」というタブが新たに表示されるので、チャットワークのpassを入力し、APIを確認します。Zapierでの操作でこのAPIが必要になりますので、コピーをしておきましょう。Zapierに登録Zapierからアカウントを登録します。登録には名前・メールアドレス・パスワードが必要です。ZAP!」をクリックし、トリガーとなるアプリ「Gmail」を選択します。次に、Gmail上でトリガーにしたいできごとを選択します。Email」をチェックします。Account」をクリックし、対象となるメールアカウントを選択します。Continue」をクリックして次に進みましょう。Gmail上に該当ラベルがあるかどうかがZapier上でチェックされ、問題なければ、これでトリガーのGmailの設定は完了です。「Continue」でさらに続けます。次にアクションとなるチャットワークを選択します。チャットワーク上でアクションにしたいできごとを選択します。Message」をチェックします。Account」をクリックし、次の表示画面でコピーしておいたチャットワークのAPIを入力し、アカウントを設定します。投稿するグループチャットと、投稿するメッセージの内容を設定。Data)」を選択しました。設定した内容で、実際にチャットワークへのテスト投稿が行われます。テストに問題がなければ下記の画面が表示され、「Finish」をクリックするとZAPの完成!名前をつけて、保存しましょう。変更がある場合は、サイドメニューから変更箇所を選択し、再度設定します。終わりに今回はチャットワークと連携できるという点に着目しましたが、他にもZapierでできることはたくさんあるようです。ZAPのエラーチェックや、2つ以上のサービスをつなげられるマルチステップ(有料プランのみ)、複数のアカウントの切り替えなどなど...無料プラン内では制限がありますが、シンプルに2つのサービスをつなげるIFTTTなどのハブツールと、良い具合に使い分けができたらと思っています。