読者です 読者をやめる 読者になる 読者になる

バナー模写8

作成したバナーの数が少ないので、もう少し練習したいと思います。

Photoshopで「ゆこゆこ」のバナーを模写します。

 

f:id:develog:20161231233631j:plain 元バナー

 

f:id:develog:20170101013711p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20170101013035p:plain

 

 

Google search consoleの検索アナリティクスを使ってみる

Google search consoleの検索アナリティクスによってクリック数、表示回数、CTR、掲載順位について、それぞれを「検索ワード」、「閲覧ページ」、「検索に使用された端末」別に見ていきます。

 

以下の用語説明は、Googleの検索アナリティクスレポートからのコピーです。

  • クリック数 - ユーザーが Google の検索結果ページをクリックしてサイトに移動した回数です。詳細
  • 表示回数 - Google の検索結果に表示されたサイトへのリンクの数です。ユーザーがスクロールせず、リンクが実際には表示されなかった場合でもカウントされます。ただし、ユー ザーが 1 ページ目しか表示しなかった場合、2 ページ目に以降に表示されるはずだったリンクは表示回数としてはカウントされません。カウントは、サイト別またはページ別に集計されます。画像検索のようにスクロールが無限に続くページは、スクロールされて実際に表示された項目のみが表示回数としてカウントされます。詳細
  • CTR - クリック率(CTR)は、クリック数を表示回数で除算したものです。表示回数のデータがない行の場合、CTR の計算は 0 で割ることになるので、CTR の値にはダッシュ(-)が表示されます。
  • 掲載順位 - 検索結果におけるサイトの「最上位」の平均掲載順位です。たとえば、あ る検索クエリの結果でサイトが 3 か所に掲載され、それぞれの掲載順位が 2 位、4 位、6 位だった場合、そのサイトの掲載順位は 2 位となります。次に、別の検索クエリでも 3 箇所に掲載され、それぞれの掲載順位が 3 位、5 位、9 位だったとします。この場合、サイトの平均掲載順位は (2 + 3)/2 = 2.5 で 2.5 位となります。表示回数のデータがない行の場合、掲載順位はないので、ダッシュ(-)が表示されます。詳細

 

support.google.com

 

Webサイト「ケーキの店 モニカ」の状況

集計の期間は12月4日から12月28日までです。

 

f:id:develog:20161230155408p:plain

 

検索ワード

「久喜 モニカ」、「モニカ 久喜」、「ケーキの店モニカ」など的を絞った検索ですから、久喜周辺の方が検索されていると予想できます。

また、掲載順位が1位であっても、それがクリックにつながっていないことがわかります。

 

f:id:develog:20161230155631p:plain

 

アクセスされた ページ

トップページの他のページでも、検索されて直接表示されています。「素材へのこだわり」(/ingredient)のページが特に多いことがわかります。

4、5、6、7番目はリプレースする前のページです。集計期間にはWeb上に存在していないはずですが、なぜか表示されています。

 

f:id:develog:20161230160236p:plain

 

 検索に使用された端末

PCとモバイルでは大差はありませんが、モバイルからのアクセスの方が少し多いという結果になりました。やはりモバイルへの対応は必須です。

 

f:id:develog:20161230160256p:plain

 

 

 

Photoshopによるgifアニメを使ったバナー制作

過去に授業でPhotoshopを使って動きのあるバナーを制作しましたので、忘れないように手順を記しておきます。

 

作成したバナーです。

f:id:develog:20161230130938g:plain

 

 作成手順

 2種類のタイトルと4種類の色のシューズを準備しました。

f:id:develog:20161230125857p:plain

 

「ウィンドウ」メニュー内の「タイムライン」を選択します。

f:id:develog:20161230125905p:plain

 

「フレームアニメーションを作成」を選択します。

f:id:develog:20161230135736p:plain

 

1フレーム目

1フレーム目はタイトル「Air Max 90iD」と、「シューズ青」を選択します。

ディレイは2秒を選択しました。

f:id:develog:20161230125911p:plain

f:id:develog:20161230143151p:plain

 

2フレーム目

2フレーム目は1フレーム目をコピーします。

f:id:develog:20161230125920p:plain

f:id:develog:20161230144336p:plain

 

「NIKIiDでカスタマイズ」と、「シューズ緑」を選択します。

f:id:develog:20161230130051p:plain

 

3フレーム目 

3フレーム目は2フレーム目をコピーします。 

f:id:develog:20161230125953p:plain

 

タイトル「Air Max 90iD」と、「シューズ茶」を選択します。

f:id:develog:20161230130128p:plain

 

4フレーム目

4フレーム目は3フレーム目をコピーします。

f:id:develog:20161230130136p:plain

 

「NIKIiDでカスタマイズ」と、「シューズ桃」を選択します。

f:id:develog:20161230130140p:plain

 

 

gifファイルを作成する前に繰り返し回数を「無限」にしておくと、gifファイルを表示しているときには無限に繰り返します。

f:id:develog:20161230140922p:plain

 

 

これは元にしたバナーです。

f:id:develog:20161230130553g:plain

バナー模写7

楽天バナーの模写です。

 

楽天スーパーセールのバナー

f:id:develog:20161228114224p:plain 元バナー

 

f:id:develog:20161228114214p:plain 模写バナー

 

Photoshopのレイヤー

f:id:develog:20161228114249p:plain

 

 

PHPでデータベースを検索する

PHPを使用してデータベースを検索して表示するプログラムを学習しました。

 

実行画面

 

f:id:develog:20161226190638p:plain

 

 

「お問い合わせ内容一覧」の結果

f:id:develog:20161226190641p:plain

テーブルに登録されている全データを表示しています。

 

 

お問い合わせ内容検索

f:id:develog:20161226190644p:plain

No.(プライマリキー)を入力します。

 

 

「お問い合わせ内容検索」の結果

f:id:develog:20161226190647p:plain

No.1のデータをすべて表示しています。

 

 

ソース

menu.html(管理メニュー)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>管理メニュー画面</title>
<style>
html,body,h1,ul,li {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 20px 30px;
}
ul {
  list-style: none;
}
li {
  margin: 20px 50px;
}
a {
  text-decoration: none;
  color: #000;
}
a:hover {
  text-decoration: underline;
}
</style>
</head>

<body>
<h1>管理メニュー</h1>
<div id="result">
<ul>
<li><a href="list.php">お問い合わせ内容一覧</a></li>
<li><a href="search.html">お問い合わせ内容検索</a></li>
</ul>
</div>
</body>
</html>

 

list.php(お問い合わせ内容一覧)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせ内容一覧</title>
<style>
html,body,h1,ul,li {
  margin: 20px;
  padding: 0;
}
ul {
  list-style: none;
}
li {
  margin: 20px 50px;
}
</style>
</head>

<body>
<?php
  // データベースとの連結
  $dsn = 'mysql:dbname=mydb;host=localhost';
  $user = 'root';
  $password = '';//dbでパスワードを設定していなければカラ
  $dbh = new PDO($dsn, $user, $password);
  $dbh -> query('SET NAMES UTF8');

  //データベースのテーブルからデータを取得
  $sql = 'SELECT * FROM form WHERE 1';
  $stmt = $dbh -> prepare($sql);
  $stmt -> execute();

  //データがあるだけ全部取得
  while(1){
    $rec = $stmt -> fetch(PDO::FETCH_ASSOC);

    //もうデータがなければ「break」でループから抜ける
    if($rec == false){
      break;
    }

  //stmtから取得したデータを表示
  echo $rec['id'].':&nbsp;';
  echo $rec['name'].':&nbsp;';
  echo $rec['email'].':&nbsp;';
  echo $rec['blood'].':&nbsp;';
  echo $rec['message'];
  echo '<br>';
  }

  $dbn = null;
?>
<ul class="back01">
<li><a href="menu.html">メニューに戻る</a></li>
</ul>
</body>
</html>

 

search.html(お問い合わせ内容検索)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせ内容検索</title>
<style>
html,body,h1,ul,li {
  margin: 0;
  padding: 0;
}
input {
  margin: 20px 20px 0;
}
ul {
  list-style: none;
}
li {
  margin: 20px 50px;
}
</style>
</head>

<body>
<div id="inquiry">
<form action="result.php" method="post" id="search">
<input type="text" name="code" size="20" id="code">
<br>
<input type="submit" value="検索">
</form>
<ul>
<li><a href="menu.html">メニューに戻る</a></li>
</ul>
</div>
</body>
</html>

 

result.phpお問い合わせ内容検索の結果表示

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせ内容検索の結果表示</title>
</head>

<body>
<div id="inquiry">
<?php
  //前のページで入力したID番号を変数化
  $code = $_POST['code'];

  // データベースとの連結
  $dsn = 'mysql:dbname=mydb;host=localhost';
  $user = 'root';
  $password = '';//dbでパスワードを設定していなければカラ
  $dbh = new PDO($dsn, $user, $password);
  $dbh -> query('SET NAMES UTF8');

  //変数化したIDをDBのカラムIDと紐づけ
  $sql = 'SELECT * FROM form WHERE id='.$code;
  $stmt = $dbh -> prepare($sql);
  $stmt -> execute();

  echo '<table>'."\n";
  echo '<tr><th>No</th><th>お名前</th><th>メールアドレス</th><th>血液型</th><th>お問い合わせ内容</th></tr>'."\n";

  while(1){
    $rec =$stmt ->fetch(PDO::FETCH_ASSOC);
    if($rec == false){
      break;
    }

  //stmtから取得したデータを表示
  echo '<tr>';
  echo '<td>'.$rec['id'].'</td>';
  echo '<td>'.$rec['name'].'</td>';
  echo '<td>'.$rec['email'].'</td>';
  echo '<td>'.$rec['blood'].'</td>';
  echo '<td>'.$rec['message'].'</td>';
  echo '</tr>';
  }
  echo '</table>';

  $dbn = null;
?>
</div>
<p><a href="search.html">検索画面に戻る</a></p>
</body>
</html>

 

 

バナー模写6

JALのバナーをPhotoshopで模写しました。

 

f:id:develog:20161225150951g:plain 元バナー

 

f:id:develog:20161225160337p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20161225160346p:plain

 

背景画像

f:id:develog:20161225152911j:plain

 

ロゴ画像

f:id:develog:20161225160356j:plain

バナー模写5

ANAのバナーをPhotoshopで模写しました。

 

f:id:develog:20161225111740j:plain 元バナー

 

f:id:develog:20161225111745p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20161225111755p:plain

 

旅客機の加工

旅客機の背面が暗いので、その部分だけトーンカーブで少し明るくしました。

f:id:develog:20161225111818p:plain

 

旅客機の元画像

f:id:develog:20161225111833j:plain