ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。

コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などをコンバージョンにする場合が多いです。コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことをコンバージョン率（ CVR）といいます。コンバージョン率は、コンバージョン数÷ 訪問数で算出することが出来ます。

ゴールの設定

ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。

ストーリー性

「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。

AIDAの法則

Attention：注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ！と思わせることが重要です。

Interest：興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。

Desire：欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。

Action：行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。

CTA

CTAとは、Call To Action(コールトゥアクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。

kataokadesignmarketing.net

twitter.com

2022-04-19

PDFをIllustratorから書き出す

Illustrator ポートフォリオの制作

4-16

ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。
IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまうので、をPDFで書き出す場合は用途別に適切なプリセットを選ぶようにしましょう。

PDFで書き出す際のデフォルトのプリセットである「Illustrator 初期設定」は相手もIllustratorで見る事を前提としたプリセットなので、自然とデータサイズも大きくなってしまいます。
面接先への提出であれば、相手は表示して確認するだけなので、プリセットは「最小ファイルサイズ」形式で保存して大丈夫です。「最小ファイルサイズ」形式で書き出せば、データは非常にコンパクトになり、扱いやすくなるので、面接先への提出であればプリセットは「最小ファイルサイズ」で保存するようにしましょう。

また、aiファイルからPDFに保存する際も「複製を保存」で行う方が「別名で保存」よりもトラブルが起こり難いので、必ず「複製を保存」でPDF形式に保存しましょう。

www.dtp-transit.jp

2022-04-19

Illustratorでロゴを作る

Illustrator

4-16

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらをうまく利用することで、簡単で見栄えの良いロゴを作ることができます。

今回使用するブラシ

ドライブラシ9「アート_ペイントブラシ」
クイックブラシ1「アート_ペイントブラシ」
銀河「アート_インク」
飛散1「アート_インク」

今回使用するカラー
塗り「C100%／M20%」
線1「C100%／M30%」
線2「C80%」
線3「C50%」

オブジェクトを変形させる

ステップ１
まずテキストを入力します。ブラシをイメージしたロゴにするため「丸ゴシック系」のフォントを利用し、大き目のサイズに設定します。フォントの指定やサイズの設定は、コントロールパネルから行なうと便利です。

ステップ２
テキストを入力後、書式メニューから「アウトラインを作成」を実行し、テキストオブジェクトからパスオブジェクトへ変換します。アウトラインを作成した直後はオブジェクトがグループにまとまった状態になっているので、「オブジェクト＞グループ解除」を実行して、それぞれのオブジェクトが個別に選択できるようにしておきます。

ステップ３
バウンディングボックスを表示させ、バウンディングボックスの四隅にあるポインタにマウスカーソルを近づけるとカーソルの形状が変わり、オブジェクトの変形が可能であることを示します。このバウンディングボックスを利用して、それぞれのオブジェクトを変形させ、全体のバランスを整えます。

オブジェクトにアートブラシを設定する

ステップ１
まずは、オブジェクトに設定するアートブラシを用意します。ウィンドウメニューから「ブラシライブラリ＞アート＞ペイントブラシ」を実行すると、さまざまな種類のアートブラシが用意されています。

ステップ２
つぎにオブジェクトの「塗り」と「線」に対してカラーの設定を行ないます。オブジェクトを選択した状態でアピアランスパレットを開くと、「塗り」と「線」のふたつの項目が存在しています。ここで「塗り」の項目を選択し、カラーパレットで「C100%／M20%」のカラーを設定します。

ステップ３
続いて、「線」の項目を選択した状態で、コントロールパネルから「ドライブラシ９」を選びます。すると線にアートブラシが適用されるので、線幅を「0.85pt」に設定し、カラーを「C100%／M30%」設定して一つ目の線の設定は完了です。

アピアランスの項目を追加し、ブラシを重ねる

ステップ１
まず、「新規線の追加」ボタンをクリックし、線の項目の上に追加します。新しく作られた線の項目を選択した状態でコントロールパネルから「ブラシ（ドライブラシ９）」を選択します。続いて「カラー（C80%）」と「線幅（0.5pt）」を設定します。

ステップ２
同様の手順で、線２から線４までを作成します。ひとつのオブジェクトに４つの線が重なっていることになります。ここまでの作業で、ひとまず水彩画風ロゴの設定が完了しました。

他のオブジェクトへグラフィックスタイルを適用する

ステップ１
グラフィックスタイルパレットを開き、アピアランスが設定されているオブジェクトを選択した状態で、「新規グラフィックスタイル」アイコンをクリックします。グラフィックスタイルパレットにアイコンが追加されました。これで登録は完了です。他のオブジェクトをすべて選択し、さきほど登録したグラフィックスタイルのアイコンをクリックします。すると、すべてのオブジェクトに対して同じアピアランスの内容が設定されます。

ステップ２
ペンツールを使い、短めのパスを描きます。「塗り」を透明に設定し、「線」に「C100%／M20%」のカラーを設定しておきます。ブラシライブラリの中から「アート＞アート＿インク」を開きます。さきほど描いたパスを選択し、散布ブラシの中から「飛沫」を選択します。すると、インクがハネたようなパスを描くことができます。

カラーバリエーションを作成する

ステップ１
色を変更したいオブジェクトを選択し、コントロールパネルから「オブジェクトを再配色」アイコンをクリックします。するとダイアログが表示されるので、その中から「編集」ボタンをクリックします。

ステップ２
ハーモニーカラーを維持するためのリンクをチェックし、カラーホイールの中にあるスライダーをドラッグします。すると、オブジェクトに設定されたカラーの深度を維持した状態でカラーを変化させることができます。それぞれのオブジェクトのカラーを変更し、今回のブラシ風ロゴの完成です。

blog.adobe.com

helpx.adobe.com

2022-04-19

Gitを使う

git

4-15

Gitとは？

Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機能追加で更新するファイルは、どれとどれか？」といったことです。
例えば、Aさんがトップページの修正を行っている間に、Bさんがアクセスページの修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、AさんのデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正したアクセスページのみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。

backlog.com

GitHubとは

Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub（ギットハブ）とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ます。

github.com

SourceTree

GitのGUIクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。

Gitで使う用語

初めてGitを触る人にとって、解り辛さの原因の１つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。

リポジトリ

リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。

ステージング

gitの作業スペースには「ワーキングツリー」と「インデックス」があります。ワーキングツリーは作業している最中のスペース、インデックスはコミットするためのファイルを登録しておくためのスペースです。ステージングとは、「インデックスにコミットするファイルを登録する」ということです。

kray.jp

コミット

コミット(commit) ：ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。

プッシュ

プッシュ(push) ：ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。

プル

github上のデータをダウンロードする操作です。

基本的な作業の手順としては

「ローカルリポジトリ」のデータを変更させて
変更したファイルをステージングして
コミットしてから
プッシュする

といった感じです。

ブランチ

ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。

diff機能を使ってvs codeで差分をチェック

vs codeのcompare機能を使って、ファイルの差分を簡単にチェック出来ます。

shift+control(command)+pでコマンドパレットを出し「Compare」と入力すると、下の画面のように選択できるので実行する。

次に差分をチェックしたいファイルを開きます

2022-04-14

4月14日作業データ（パーティクルその2）

webサイト制作

4-14

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>particles.jsその2</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/particles.css">
</head>
<body>
<header>
<h1>particles-js</h1>
</header>
<div class="bg-box"></div>

<div class="particles-wrapper">
<div id="particles-js">
<div class="txt-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolorem explicabo quaerat nemo ea reiciendis fuga nostrum. Excepturi in minima at eligendi possimus, libero repudiandae, voluptas, eveniet maiores repellendus deserunt!</p>
</div><!-- /.txt-box -->
</div><!-- #particles-js -->
</div><!-- /.particles-wrapper -->
<div class="bg-box"></div>
<footer></footer>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<script src="js/particles.js"></script>
</body>
</html>

style.css

@charset "utf-8";

header{
width: 100%;
height: 100vh;
background-color: #FFF;
}
.bg-box{
width: 100%;
height: 100vh;
background: url(../img/bg-1.jpg) no-repeat center center/cover fixed;
}
.bg-box:nth-of-type(3){
background: url(../img/bg-2.jpg) no-repeat center center/cover fixed;
}
.particles-wrapper{
width: 100%;
height: 60vh;
}
#particles-js{

}
.txt-box{
position: absolute;
top: 50px;
left: 0;
right: 0;
margin: auto;
width: 50%;
background-color: rgba(255, 255, 255, 0.324);
font-size: 20px;
padding: 30px;
line-height: 2;
border-radius: 10px;
}
footer{
width: 100%;
height: 200px;
background-color: #a19653;
}

2022-04-14

srcsetを使って画像を切り替える

webサイト制作 HTML

4-14

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

srcsetとは

srcsetはHTML5で策定された新属性
この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
IEでは使うことが出来ない(http://caniuse.com/#search=srcset)

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。

media属性(メディアクエリ)
srcset属性
sizes属性

srcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。

sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例：ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"

size属性を省略した場合

bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
bodyが1200px~768pxの時はpc用画像をフルードで表示
bodyが767px以下の時はsp用画像をフルードで表示

<picture>
<!--768px以上の時に表示したい画像の指定-->
<source media="(min-width:768px)" srcset="https://placehold.jp/2f90a8/ffffff/1200x350.jpg?text=pc 1200w">
<!--767px以下の時に表示したい画像の指定-->
<img srcset="https://placehold.jp/6edb4c/ffffff/800x450.jpg?text=sp 767w" alt="">
</picture>

size属性を指定した場合

bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
bodyが1200px~960pxの時はpc用画像をフルードで表示
bodyが959px~768pxの時はタブレット用画像をフルードで表示
bodyが767px以下の時はsp用画像をフルードで表示

※imgにフルードイメージの設定を必ず指定

<body>
<picture>
<!--960px以上の時に表示したい画像の指定-->
<source media="(min-width:960px)" srcset="https://placehold.jp/2f90a8/ffffff/1200x350.jpg?text=pc 1200w" sizes="1200px">
<!--959~641pxの時に表示したい画像の指定-->
<source media="(min-width:641px)" srcset="https://placehold.jp/db4ca2/ffffff/960x450.jpg?text=tablet 960w" sizes="100vw">
<!--640px以下の時に表示したい画像の指定-->
<img srcset="https://placehold.jp/6edb4c/ffffff/640x450.jpg?text=sp 640w" sizes="100vw" alt="">
</picture>
</body>

レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。

ics.media