無料メルマガ送付ソフト「acmailer(エーシーメーラー)」の簡単な設定方法【基本設定編②】

こんにちは。
暑い日も増えてきて、お出掛けした陽気になってきましたね♪

さて、今回は
1.「acmailer」の簡単な設置方法【設置編】
2.「acmailer」の簡単な設定方法【基本設定編①】
に続いて、「acmailer」を設置・設定する方法【基本設定編②】です♪

これで初期設定は終わりです!
メルマガを送付する準備が整いますよ~!!

①送信サーバー設定

【送信モード】

ノーマル

通常配信を行います。
ノーマルで大規模なメール配信を行うと、メール配信が完了するまではブラウザを閉じたり、他ページへ移動する事ができません。

分割送信

分割配信を行います。
たとえば「分割送信件数10件」 「分割待ち時間10秒」と設定した場合
10件の送信ごとに10秒間、配信をストップします。
携帯電話のアドレス等へは一度に大量のメールを送信するとスパムと扱われる事もある為、ある程度時間を分割して送信する事でこれを対策する事ができます。

バックグラウンド送信

バックグランド送信を行うと、送信の命令を受け取った後は、バックグラウンドで配信を行います。

【送信サーバーの選択:ローカルサーバー】

sendmailパス

サーバーのメールプログラム(MTA)パスを入力します。
「サーバー上のパスと一致しました。」となっていれば送信できる状態となります
「サーバー上のパスと一致しません。」となっている場合MTAがないか送信パスが間違っている可能性があります。
詳しい技術情報はサーバーにより異なります。

【送信サーバーの選択:外部サーバー】

認証方法

サーバーが対応している認証方式を設定します。
テスト送信ではメールアドレスを入力する事で、そのメールアドレスに対してメールの送信を行う事で設定のテストを行えます。

ホスト名

外部送信サーバーのホスト名とポート番号を記述します。

ユーザー名

認証が必要な場合ユーザ名を入力してください。

パスワード

パスワード 認証が必要な場合パスワードを入力してください。

空メール設定

空メール設定とは、用意したメールアドレスへ空メール(タイトル、本文がないメール)を送信するだけで登録・解除が可能な機能です。
ただし、実際にこの項目を変更しても空メール設定はされません。
空メールの利用には、サーバー側の対応が必要となります。

・メールアドレス作成権限
・メールアドレスにパイプ処理の出来る権限(シェル、SSH操作)
が必要となります。

予約配信設定

あらかじめメールを作成しておき、指定した時間にメールを配信します。
有効にする事でメール配信カテゴリーの
「テキストメール配信」「HTMLメール配信」「デコメール配信」にて、「配信日時」という項目が追加されます。

予約中のメールの詳細は「配信履歴」のページより確認でき、ここから予約中のメールの内容編集やキャンセルを行う事もできます。複数のメールを予約する事も可能です。

不着メール管理

不着メール設定にて不着メール管理の「使用する」にチェックを入れているとき、有効になります。
メール配信後、不着メール管理にて不着データを更新する事により不着メールがカウントされます。この作業はログイン時に自動的に行われますが、メール配信後、不着メール件数がすぐに知りたい場合などに便利な機能です。

①不着データを更新
メール配信後、最新の配信履歴10件より不着だったメールの件数を計算します。
不着データを更新すると、不着だった件数が配信履歴の不着件数に即座に反映されます。

不着メール設定

不着メールの一覧の表示やカウントが可能です。
acmailerがメールを送信する際のエラーメールの送信先を明示的に指定しエラーメールをacmailer側で把握させる機能となる為、acmailerの設定を有効にした後にサーバ側のパイプ処理(qmail等、プログラムへデータを渡す処理)の設定が必要です。
不着メール用メールアドレスはacmailerを設置したサーバーへMXレコードが向いているドメインの物を使います。メールアドレスの生成方法は、サーバー管理者にお問い合わせください。

トップページメモ

トップページに表示されている文字は自由に編集する事ができます。

携帯ドメイン設定

登録されているメールアドレスの中で「携帯のメールアドレス」であると判断するドメインを登録できます。
デコメール配信の為に送信メールを絞り込むなどする際に便利です。
@より右の部分を記述します。

設定エクスポート / 設定インポート

acmailerの各種設定内容やメールアドレスの一覧などをエクスポート(バックアップ)、インポート(再設定)することができます。(新しいacmailerへのデータ移行時など)

ライセンス登録

発行されたライセンスキーの登録を行います。
※acmailerDB版/CGIライセンス 申込み時に設定を行ってください。

サブアカウント設定

通常のログインで使用するメインアカウントとは別の「サブアカウント」を作成する方法です。
「各種設定」>「サブアカウント設定」>「新規作成」ボタンより、追加を行うことができます。
サブアカウントでのメール送信の実行について、承認設定を行うことができます。
・「承認あり」にチェックを入れた場合・・・メインアカウントの承認を得ないと、サブアカウントでのメール送信を行えないようになります。
・『承認あり』『承認不要』両方にチェックが入っていない場合・・・メール送信の権限がない状態(表示のみ)となります。
各種権限設定・・・各画面へのアクセス、および機能の実行について、利用制限を行うことができます。チェックを入れている項目のみ、サブアカウントでの利用が可能となります。

メールアドレス一覧

「検索」で一覧を絞りこんだり、配信先のメールアドレス情報の編集等が行えます。
配信する/しないの設定等も行う事ができます。

メールアドレス登録

1件ずつ登録・一括登録が行えます。
登録の際は【各種設定 > 自由項目設定】の項目設定で「必須」にチェックが入っている項目は、登録の際に指定をしなければエラーになります。

【メールアドレス一括登録】

・メールアドレス一覧をcsvファイルで準備しておきます。
①「ファイルを選択」準備したcsvファイルを選択。使用している文字コードを選択します。
正しい文字コードを選択していないと、文字化けなどが発生します。
②「登録データ詳細表示」にチェックを入れると登録データを一覧で表示させてから登録となります。
③「登録」ボタンクリックで一括登録されます。

【メールアドレス一括削除】
・削除したいメールアドレス一覧をcsvファイルで準備しておきます。
①「ファイルを選択」で準備したcsvファイルを選択し「一括削除」をクリックします。
②確認画面が表示されます。「削除される入力内容」と「エラーにより削除されない入力内容」の一覧が表示されるので、確認し削除します。

【メールアドレス個別削除】
①「テキスト貼付」欄に、削除したいメールアドレスを入力します。
1行ずつ複数のアドレスを入力すると一括削除も行えます。
登録されているアドレスと一致したもののみ、削除されます。
アドレスが存在しない場合はエラーになります。

無料メルマガ送付ソフト「acmailer(エーシーメーラー)」の簡単な設定方法【基本設定編①】

今回は、前回の「acmailer」の簡単な設置方法【設置編】に続いて、「acmailer」を設置・設定する方法【基本設定編①】をです♪
長いので2回に分けてご紹介します。
マニュアル通りに設定すれば、あっという間に終わりますよ~!

メール設定

配信したメールマガジンの「差出人」「送信元メールアドレス」として表示される項目です。

自由項目設定

メールアドレス管理の「自由項目」について設定する事ができます。
必須にチェックを入れると、メールアドレス登録時にこの項目が未入力であった場合はエラーになります。

システム設定

acmailerの動作に対する設定を行います。
①・②ログインID・PW
管理画面へログインするためのID、PWを変更します。

③タイトル
acmailerの管理画面のタイトルを変更します。

④カウンター表示
acmailerのカウンター表示のON/OFF設定。

⑤バックナンバー
バックナンバーの公開について ON / OFF の設定。
また公開設定(ON)とした場合に1ページに表示する件数を設定。

⑥メルマガ登録・削除メール設定
メルマガの登録時、削除時にユーザーへ自動返信メールを送信するかどうかの設定。
また、管理者にメールを送るかどうかも設定する事が出来ます。

⑦ダブルオプトイン
ダブルオプトイン機能を使用するかどうかを設定できます。
※ダブルオプトインとは、メールマガジン登録の際に、一度ユーザーに確認メールを送付する事でいたずらや間違いによる登録を防ぐ機能です。登録はユーザーへの確認メールの手続きに従う事で正式に登録されます。

⑧削除時の動作
ユーザーがメールマガジンへの登録を削除(退会)する際に
acmailerでの動作の設定です。
「削除」では退会したユーザーの情報を削除します。
「配信停止」ではユーザーの情報は削除されず、配信停止となります。

⑨再登録拒否設定
チェックを入れると、メルマガの登録を一度解除したユーザのメールアドレスを
自動で登録します。こちらに登録されたユーザが再び登録を行った場合、
『一度退会されているため、登録を受け付けることができません。』という内容の
メールが自動で返信され、登録を行うことが出来なくなります。
※「拒否時間」では再登録を行えなくする期間を1時間単位で設定可能です。
※初回登録限定の特典を用意している場合などに便利です。

⑩重複データの登録
チェックを入れるとメールアドレス等が同じデータでも登録する事が出来るようになります。デフォルトでは重複データの登録は出来ません。

⑪機種依存文字チェック
機種依存文字をチェックすることによりメールの文字化けを防ぐことができます。
このチェックをはずした場合はメール本文・履歴一覧にて文字化けが発生する可能性が起こります。

⑫CGI設置URL
CGIを設置しているURLです。
インストール時にプログラムが自動的に取得しますので、変更がない限りは特に設定する必要はありません。

⑬CGI設置パス
CGIを設置しているパスです。
インストール時にプログラムが自動的に取得しますので、変更がない限りは特に設定する必要はありません。

⑭アンインストール補助
アンインストールを行います。

⑮システム情報
クリックすると、「sysinfo.txt」が自動でダウンロードされます。
acmailerのシステム情報(バージョンなど)を確認できます。

以上が設定編①です!
いかがだったでしょうか。
次回は「メールアドレス一括登録」など、設定編②をご紹介します!

無料メルマガ送付ソフト「acmailer(エーシーメーラー)」の簡単な設定方法【設置編】

今回は無料で簡単に複数のメールアドレス宛にメールマガジンを送付できる「acmailer」を設置・設定する方法を簡単にご紹介します♪

acmailerは、ケータイ、iPhoneなどにも対応していて、HTMLメールも送付できます。
そして、csvファイルでメールアドレスを簡単に一括登録することが可能です。
手軽にメルマガ配信を始めてみたい人にはおススメのソフトです。
※フリーライセンス(無料)版はリンク付の著作権表示をすることで使用可能です。

◆ダウンロード

まずは以下のサイトからファイルをダウンロードしてください。

http://www.acmailer.jp/download/index.html

※事前に、お使いのサーバがacmailerに対応しているかを確認しましょう!
インストーラーには「DB版」「CGI版」の2種類があります。
今回は「CGI版」でインストールしていきます!

◆インストーラーをアップロード

任意の名前(acmailerなど)でフォルダを作成して、ダウンロードしたインストーラーファイルを保存、サーバにアップロードします。

パーミッション(属性)は

 ・フォルダ・・・「777(またはプロバイダ推奨値)」
 ・インストーラー・・・「755(またはプロバイダ推奨値)」に設定します。

パーミッションの設定が間違っていると500サーバエラーになります。

◆インストール

インストーラーにアクセスし、説明に従って進めてインストールします。

◆インストール完了

インストールが完了すると、acmailerの管理画面が表示されます。

次回は引き続き【設定編】として設定方法をご紹介します!!

Photoshopでガイド線をガッチリ正確に引く方法

こんにちは。
GWですね。今週は2日稼働。自然と鼻歌が出てしまうような気分です♪

さて、今回はガイド描画の数値指定方法をご紹介します。
デザインカンプを作る際に、まず全体のサイズを決めるのですが、画像の自動書き出し機能を使用することを考えると1px単位で正確なガイド線をひきたいですよね。
でも、手動だと大抵すごく微妙な位置になってしまいます。


↑手動で引くと微妙な位置に。
1px、単位でガッチリ確実にガイドを引きたい!という私のような方は、ぜひご覧ください。

◆Photoshopでガイド線をガッチリ正確に引く方法

ガイドの単位を確認する

「表示」メニュー→「定規」を選択して定規を表示させ、x.yの交わる左上の部分で右クリックします。
webデザイン用であれば「pixel(ピクセル)」にチェックを入れます。

新規ガイドメニューを選択

「表示」メニューの「新規ガイド」を選択します。

ガイド設置場所をピクセル指定

縦方向→「垂直方向」横方向→「水平方向」を選択。位置は左上からの距離を入力します。

指定の位置にガイドが引かれました。気持ち良いですね!!

慣用色名の一覧をつくってみた②

こんにちは。
もう4月も終わりですね。
あっという間に1年の3分の1が終わってしまいました~。

さて、前々回「慣用色名の一覧をつくってみた①」という記事を書きましたが、第2段です!!
今回は緑系の色名をまとめてみようと思います。
若竹色、青竹色、老竹色など、自然の世界の色を表す色名は面白いですね。
それでは行きますよ~。

◆カーキー

 

「ちり、ほこりのような」という意味。ミリタリーカラー。

◆オリーブ

 

「黄の色相の暗い色調」を分類するための基本色名のひとつ。

◆クリームイエロー

 

乳製品のクリームの色。

◆ベージュ

 

フランス語で「未漂白」「未染色」「未加工」の毛織物の色名。

◆セピア

 

イカが墨を出す墨汁嚢(ぼくじゅうのう)を乾燥して粉末にした古代の絵の具の名前。

◆萌黄 もえぎ

 

春に芽吹く若葉のような色を表す伝統的な色名で「萌葱(もえぎ)」ともかく。

◆うぐいすいろ

 

鶯の羽毛のような色。

◆オリーブグリーン

 

オリーブのつく色名は、「イエロー」「ブラウン」「グリーン」「グレイ」など。

◆コバルトグリーン

 

18世紀の終わりにコバルトグリーンという色名が誕生。

◆若竹色

 

「若い竹」の色で成長した竹の「青竹色」、くすんだ緑色の「老竹色」とともに竹の色の3点セット。

◆青竹色

 

成長した青竹の幹のような青みの冴えた明るく濃い緑のこと

◆老竹色 おいたけいろ

 

年を経た意味の灰味をおびた老竹のような、ややくすんで灰色がかった緑色

◆エメラルドグリーン

 

エメラルドの宝石のような色。

◆青磁色 青磁色

 

中国の唐の時代に作られた磁器の色。

◆ビリジアン

 

「クロームグリーン」とともに緑を代表する絵の具の色名

JIS(日本工業規格)で定められている色名について

こんにちは。
急に暖かくなりましたね。
衣替えで洋服の整理・補正・洗濯・収納・入れ替えなどの作業をすることがとても好きなのですが、今年は思い切って断捨離をしてみようかなと考え中です♪

さて、前回「慣用色名」について少しまとめましたが、続きを書く前に「色名」の表示方法について簡単にまとめてみます。

JISの基本色名

JIS(日本工業規格)で定められている基本色名。
有彩色(赤・青・黄・緑などの色味のある色)10種類、無彩色(色味を感じない彩度がない色)3種類。

有彩色の基本色名(10種類)

◆赤

 

◆黄赤

 

◆黄

 

◆黄緑

 

◆緑

 

◆青緑

 

◆青

 

◆青紫

 

◆紫

 

◆赤紫

 

無彩色の基本色名(3種類)

◆白

 

◆黒

 

◆灰色

 

JISの系統色名

系統色名は、基本色名に明度や彩度、色相に関する装飾語をつけて色表示したものです。様々な色の違いを表示することができます。
例)「こい(明度・彩度に関する装飾語)」「赤みの(色相に関する装飾語)」+「赤(基本色名)」

JISの慣用色名

親しみやすく、イメージしやすい色名「固有色名」の中でも、比較的よく知られている色名。
JISの慣用色名は現在「269色」(和色名:147色、外来色名:122色)制定されています。
「系統色名」は無機質な表現で、雰囲気やイメージが伝わりにくいことがあります。慣用色名の方は、色名からイメージが伝わりやすくなっています。
例)「つよい緑(系統色名)」→「エメラルドグリーン(慣用色名)」、「暗い黄赤」→「煉瓦色」など

慣用色名の一覧をつくってみた①

こんにちは。

ぬこ飼いデザイナー佐竹です。
新学期もスタートして、毎日お弁当をせっせと作っているのですが、マンネリ化してきたので新しい簡単レシピを探しています♪

さて、今回からしばらく「慣用色名(かんようしきめい)」についてまとめていきたいと思います。
色のイメージ(RGB値)は大まかなイメージなので参考までにご覧ください。
個人的には芥子色は良い色だな~としみじみ眺めてしまいます。
少しマニアックですが、色名を知るのも面白いですね!!

◆朱色 しゅいろ

 

硫化水鉄を原料とする鉱物顔料「銀朱」の色。現在の印鑑の朱肉の色。

◆バーミリオン

 

東洋と同様に西洋でも古くから硫化水銀の朱の原鉱と知られていた。人造朱は9世紀頃のアラビア錬金術師の発見といわれる。

◆珊瑚色 さんごいろ

 

さまざまな珊瑚色の中で西洋でも東洋でも装飾などで珍重されたのがピンク系。

◆茜色 あかねいろ

 

日本最古の植物染料の一つで、温帯アジア原生のアカネの根を原料とする濃い赤。

◆ワインレッド

 

赤ワインのような色を表す英語の色名。

◆紅梅色 こうばいいろ

 

紅梅の花のような色で平安時代、冬~春にかけての色として愛好された。

◆サーモンピンク

 

18世紀にできた英色名で「鮭の切り身」の色。

◆芥子色 からしいろ

 

カラシナの種子を粉にして練った練り芥子の色。英語では「マスタード」や「マスタードイエロー」と呼ぶ。

◆桜色 さくらいろ

 

山桜の花のような色で「紅染め」のなかで最も淡い色調。平安時代最も愛好された色名。

◆ボルドー

 

フランスの「ボルドー産赤ワイン」の英語の呼び方。19世紀には国際的に通用する色名に。

◆煉瓦色 れんがいろ

 

代表的な色は赤煉瓦の色で英語のブリックレッドにあたる。

◆ピーチ

 

16世紀の終わり頃から用いられた色名で英語の「ピーチ」、仏語の「ペルシャ」はどちらも「桃の果実の色」

Photoshopで共通パーツをリンク配置する方法

こんにちは。
すっかり暖かくなりましたね。
ぬこ飼いデザイナー佐竹です。

今日は、Photoshopでパーツごとにファイルを分けて、リンク配置する方法をご紹介します。(ccからの新機能です!)
Fireworksで言うところの「ページ」機能のようなもので、全ページ共通項目を別の1つのファイルで管理してリンク出来る便利な機能です。

それでは、早速操作方法です。

リンク配置用のファイルを作成

デザインカンプのヘッダー部分をグループ化して、「header」などの任意の名前を付けます。
そのグループレイヤーを選択して、右クリック→「グループを複製」でドキュメントの「新規」を選択します。
作成した新しいファイルに「header.psd」などの任意の名前を付けて保存します。

リンクを配置

挿入したいファイルのメニューから「ファイル」→「リンクを配置」を選択

×マークがついた部分がheaderです。

リンクされたスマートオブジェクトとして配置されました。

リンク先データに自動で反映

リンク元のデータを変更すると、リンク先データに自動で反映されます。
タイトル文字の色を茶色に変更したところ、リンク配置先も茶色に代わりました。


↓ ↓

空白のレイヤーをサクッと削除する方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
花粉シーズンも折り返しですね。
毎年この時期、子供と某マラソン大会のファンラン(1Km)に参加して、マスクをして走り、窒息寸前になってヒイヒイでゴールするのですが、今年は花粉がすごいので、マラソンはさすがに諦めました~。

さて、今日はPhotoshopの地味な機能を2つほどご紹介します。
一通りデザインカンプが整ってきて、レイヤーを整理しようと思ったときにバババッと使える便利な機能です。

Photoshopで空白のレイヤーを削除する方法

「ファイル」メニューの「スクリプト」→「すべての空白レイヤーを削除」

Photoshopでレイヤーの位置だけを固定する方法

レイヤーパネルの「ロックボタン」左側の十字のボタンをクリックします。
位置だけ固定した状態でマスクや効果をつけることができ、とても便利です。

いかがだったでしょうか。
空白のレイヤーは、私のように性格上気になって気になってしょうがないという方がいるのでは?と思います。
一発削除できたらスッキリしますよね!
レイヤーのロックは、動かさずにオブジェクトを編集出来て、かなり使える機能だと思います。
さっそく次の制作から使っていきたいと思っています。
これからもこのような便利機能をちょこちょことご紹介させていただきます♪

「トーンカーブ」で特定の個所のみの色調補正

こんにちは。
ぬこ飼いデザイナーの佐竹です。

娘がTVの影響で「カカリチョウ」を覚えました。
「シャチョウ」なら会社にいるよ。お母さんは「ヒラ」だよ。
と教えたらたいそう喜んでいましたよ。
しばらく会社ごっこが続きそうな予感です・・・

さて、今日は「トーンカーブ」の新機能(cs6以降)について簡単にご紹介します。

「トーンカーブ」機能は、ざっくり言うと線を上にカーブさせると画像が明るくなって、下にカーブさせると暗くなく機能です。
「明るさ・コントラスト」などの補正よりも自由度が高いです。
ざっくりすぎてすみませんっ!

今回は、特定の個所のみの色調補正をする方法です。
今までは特定の個所を補正するにはマスクする必要があったのですが、簡単に出来るようになりましたよ~!
それでは、操作方法です。

(1)「トーンカーブ」を選択

「レイヤー」→「新規調整レイヤー」→「トーンカーブ」を選択します。
「属性」パネルに「トーンカーブ」が表示されます。

(2)ターゲット調整ツールを選択

「トーンカーブ」パネルの左上の「ターゲット調整ツール」をクリックしてオンにします。

(3)明るくしたいポイントを選択

今回はイチゴの断面だけを少し明るくします。
断面の一番明るい箇所を「ターゲット調整ツール」でポイントします。
続けて断面の一番暗い箇所をポイントします。
「トーンカーブ」パネルのポイント2点の間(四角く囲った部分)が明るくしたい色の範囲になります。

(4)ググっとカーブを調整

ポイント①~②の間の個所をマウスで選択して、「エイッ」と上に持ち上げます。

これで断面部分が明るくなりました。

いかがだったでしょうか?少しおいしそうになりましたでしょうか(^^)
ちょっと変化が分かりにくかったかもしれませんが・・・
いろいろ試しながらリアルタイムで確認ができますので、エイエイッと試してみてください!

焦点領域選択でサクッと選択範囲

こんにちは。
ぬこ飼いデザイナーの佐竹です。
今年は花粉が多いですね~。
思い切ってゴーグルを買おうかと思い詰める今日この頃です。
その前に耳鼻科へ行こうよって話ですが・・・

さて、今日はPhotoshopCCの新機能を一つご紹介します。

画像の中で、ピントの合った部分だけ素早く選択する方法です。

従来のやり方では「自動選択ツール」で範囲選択していましたが、「焦点領域」という機能を使うと時間短縮が出来、後から細かく修正することも可能ですよ~。
それでは、操作方法です。

(1)「選択範囲」メニューから「焦点領域」を選択

「焦点範囲」で数値を変更しながら焦点範囲を調整する。
大まかな選択が出来たところで「OK」をクリック。

(2)選択範囲の調整

「選択範囲」メニューから「選択範囲を保存」を選択。
アルファチャンネルに保存されます。
「チャンネル」パネルから保存したアルファチャンネルを選択し、範囲を微調整します。
微調整ができたら、「チャンネルを選択範囲として読み込む」をクリックして選択範囲を追加保存します。

「レイヤー」パネルに戻ってマスクを追加したり、色調補正をします。

いかがだったでしょうか。
焦点の合っている部分があって、そこだけを色調補正・抜き出し等したい場合にとても便利ですね!

Googleアナリティクスのコンバージョン設定方法

こんにちは。まだまだ寒い日が続いていますね。ぬこ飼いデザイナーの佐竹です。

Googleアナリティクスには、お問い合わせや資料請求など、「サイトの目標」に対して、データを取得する「コンバージョン設定」という便利な機能があります。
平たく言うと、〇〇のページを閲覧したら(ページに到達したら)1カウント~として到達数、到達率を取得できる仕組みです。

Googleアナリティクスで設定可能なコンバージョンは、4タイプあります。

1、目標URL
2、訪問の滞在時間
3、ページ/スクリーンビュー数
4、イベント(サイト内での行動)

今回はこのうちの「目標URL」設定についてご紹介します。
設定の前に、お問い合わせ完了ページ(フォーム送信後に表示されるページ)を作成しておいてくださいね。このページのURLが「目標URL」になります。

1、Googleアナリティクスの「すべてのウェブサイトのデータ」メニューから【管理】を選択

2、アナリティクス設定の「目標」を選択

3、【+新しい目標】ボタンをクリック

4、【目標設定】で「テンプレート」ーお問い合わせを選択


※「テンプレート」を選択すると、標準的なビジネス目標を参考にできるため、具体的なコンバージョンを設定するのに便利です。

5、【目標の説明】で「目標の名前(リストに表示される名前)」「タイプ(到達ページ)」を設定

6、【目標の詳細】で[到達ページ]のURLを設定

7、[目標到達プロセス]を設定する

※必須ではありませんが、「完了までのステップ」として入力画面のURLを入力しておくと、離脱率も計測できます。

※Googleアナリティクスの「リアルタイム」-コンバージョンで、正しく設定されているか確認することが可能です。

Photoshopのスマートオブジェクトを使おう①

こんにちは。

昨日子供の作った紙でできたタンバリンを思いっきり踏んでしまい、どうごまかそうか悩み中の、ぬこ飼いデザイナー佐竹です。

今日はPhotoshopユーザーにはすでに常識になりつつある「スマートオブジェクト」について簡単にご紹介します。

取り込んだデータを、「やっぱりちょっと大きくしよう」と思うことってありますよね。

そのデータを、すでにいい感じに加工した後だった場合、また元画像を取り込んで処理しようと思いつつ、遠い目になる…Photoshopユーザーあるあるだったと思います。

既に配置済みの画像を大きくできないのはなぜか?と言いますと、取り込んだ画像が「ラスター形式」画像なのが理由になります。

デジカメで撮影した画像なども「ラスター形式」になります。
四角いドット(ピクセル)で作られたファイル形式なので、画像を縮小したときにドット数が減って、拡大しても元のドット数を再現できないのが原因なのです。

CS3からは、「スマートオブジェクト」登場によりそんなあるあるも過去のものとなりました。

スマートオブジェクトとは

スマートオブジェクトは、配置またはペーストされた画像を、元の画質を保持したまま編集や拡大・縮小、回転、ワープが可能な機能です。
ccの最新機能も含めて、このスマートオブジェクトについてあれこれ、ご紹介していきます。

—————

それでは、まず配置したい画像を
(1)、はじめからスマートオブジェクトとして配置
(2)、配置後にスマートオブジェクト化したいとき

この二通りの操作をご説明します。

(1)はじめからスマートオブジェクトとして配置

1、「ファイル」メニューから「埋め込みを配置」を選択
図のようにレイヤーにアイコンが表示されればOK。

(2)配置後にレイヤーをスマートオブジェクト化したいとき

1、「レイヤー」パネルを開きます
2、スマートオブジェクト化したいレイヤーを右クリックして「スマートオブジェクトに変換」を選択(図参照)

※元データの容量が非常に大きい場合は、「これ以上大きくすることはない」というサイズまで縮小した時点でスマートオブジェクト化することでデータ容量をコンパクトにすることが出来、おすすめです。

Fireworksのデータをレイヤーを保持したままPhotoshopに引き継ぐ方法

弊社デザイナーの多くはFireworksで長年デザインカンプを作成していましたので、サイトのリニューアル等で図やテキストを引き続き使用したい案件も多いです。

Fireworksでデザインされたサイトのリニューアルは、Fireworksでやればいいかな、と思っていましたが、Photoshop cc の便利さに気付いてからは出来ればデータも引き継いでPhotoshopで作業したい!と思うのであります。

そういうわけで、以下、手順です。
※Fireworks CS6の機能です。

(1)Fireworksで引き継ぎたいファイルを開く

(2)「別名で保存」を選択

(3)「保存」ダイアログでファイル名を指定。ファイル形式は「PhotoshopPSD(*.psd)」を選び「オプション」ボタンをクリック。

(4)図のように設定し、OK→保存ダイアログでも「OK」

これで、Photoshop用データに変換されました。
ちなみにページ機能を使っていた場合は、各ページごとに別名保存します。

FireworksからPhotoshopへ


もう何年も前になりますが、Fireworksの開発終了が発表されました。
webデザインカンプ作成の作業効率がとても良く、長年Fireworksを愛用してきた身としては少なからずショックを受けました。

元々PhotoshopユーザーでしたがFireworksを使うようになってからは、ほとんどPhotoshopは使う必要がありませんでした。
しかし、Photoshop ccを使用してwebデザインカンプを作成するようになりしばらく経ちましたが、webに特化した機能を色々調べてみると、「もうFireworks要らない」というレベルで圧倒的に使いやすく進化していたのです。

Photoshop ccは、スライスも必要ないのです。なんということでしょう。
しばらく使っていない間に、地味に着々と進化を遂げていたようです。

こんな素敵すぎるPhotoshopの便利機能を次回から少しずつご紹介してきます。

UDフォント

漢字・ひらがな・カタカナを組み合わせる日本語は他に類を見ない複雑な言葉で、日本語フォントも様々な書体が販売されています。

日本語フォントをデザイナー目線で大まかに分類すると、二種類に分類できます。

1、読みやすいフォント(可読性)。
2、見やすいフォント(視認性)。

何が違うのかな?と思いますよね。
1は、長文を読んでいて疲れないような「文字を読ませる」時用の文字。
2は、看板やページタイトル・見出し用、パッと目につきやすい印象に残る文字。

という考え方になります。
2の「見やすくわかりやすいフォント」の、今とても人気がある文字を簡単にご紹介します。

***

UDフォントとは?
UD(ユニバーサル・デザイン)のコンセプトに基づいたフォントのことをUDフォントと言います。モリサワUD書体やイワタUDフォントなどが有名です。

特徴を挙げると…
  ・高齢者や障害のある方にも見やすい
  ・読み間違いしにくい、小さくしても潰れにくい
  ・シンプルで美しい


フトコロを広く、シンプルに。アキを確保して潰れを少なく。(下)

などです。
単純に、きれいな文字であるという点でも人気がありますが、個々の文字がしっかり検証されているという安心感がありますよね。
ただ、視認性(見やすさ)と可読性(読みやすさ)を両方満たすのは難しことなのだそうです。
そのため、UDフォントは「視認性」の方を重視して作られているそうです。
実際に使われているのは、例えば公共交通機関・商業施設のガイド表示や、商品のパッケージなどで使用されているそうです。

そんなにきれいな見やすい文字なら、自社のwebサイトにUDフォントを使いたい、と思われる方もいらっしゃると思いますが、ブラウザで表示できるフォントについては、語りつくせぬ複雑なお話があれやこれやありますので、次の機会に書かせて頂こうと思います。

グリッドデザイン

グリッドデザインとは、平たく言うと「グリッド」(格子)を使って「画面を縦横に分割し、要素や余白を配置するデザイン」です。

グリッドに沿って配置された画像や文字は、色々なパターンで配置されていたとしても規則性を持っている為、統一感があり、読みやすくなります。
印刷にはグリッドは反映されませんので、ぱっと見ではラインに沿って文字や画像が配置されていることは分かりませんが、構成に明確な「理由」を持つことになるのです。

明確な「理由」を持つことで、デザイナーは迷わず効率的に作業を進めることができます。
ボリュームのある印刷物など、複数人数で制作している場合にも、統一感が保たれて作業もしやすくなります。

WEBのデザインはもちろん、構築にも「グリッドカラムレイアウト」という手法があります。
今やweb業界の常識となった「レスポンシブサイト」作りを効率化させることができる優れものです。
cssという言語で記述して、画面の幅によって柔軟にレイアウトを変えていくことができます。

良い事尽くめのグリッドデザイン・グリッドレイアウトですが、当然のことですがデザイナーが適切な配置をすることや、見る人の視線の運びを計算することなど、しっかり考えなければならない部分もあります。何も知らないで、見た人に「なんか落ち着くレイアウトだな~」と感じてもらえることが最終的な目標なのです。

黄金比

「ものの形、デザインはセンスとか感覚によって生み出されるもの…」
一般的によく言われる言葉です。
しかし、デザインを勉強すると、「基礎知識をベースに、ある一定のルールやセオリーを活用して作り出すべきもの」などと言われることが多々あります。

私自身も「法則」「セオリー」のような言葉は大好きです。例えば「シンメトリー」なんて言葉は大好物です。
今回は、そのなかでも代表的な「法則」である【黄金比】を少しだけご紹介します。

***

「1:1.618」という近似値で表される自然界の中から発見された数学的法則です。「自然界」というのは…例えば、ひまわりの種・松ぼっくりのかさ・オウム貝、さらには台風、DNAなどの螺旋形などに見られるそうです。

「数学的」と言われた時点で読み飛ばしたくなりますが、つまりは「なんかすごく美しいらしい比率」です。古代から使われ、ダ・ヴィンチの「モナ・リザ」などの絵画の構図や、ピラミッドや凱旋門など多くの歴史的建造物に使われたとも言われています。

現代では、Twitter・アップル・ペプシなどのロゴデザインに使われているらしいです。
黄金比ちょっと長いな…と思った場合は「白銀比」というものもあります。コピー用紙のA4、B4などのサイズがこれに当たります。白銀比のそのほかの例としては「法隆寺」の構図と言われています。

「調和を生み出す比率」。何か神秘的でさえあります。
いつか…私自身もデザインに取り入れてみたいような気がします。
佐竹作のデザインで気になる構図があったら、ぜひ「もしや」と深読みしてみてください…。