高齢の方向けウェブサイトデザイン 8つのポイント

f:id:BOEL:20171004171556j:plain


こんにちは。デザイナーの那須です。
最近は、ご高齢でもパソコンやスマートフォンでインターネット(※)を利用する方が増えていますね。
総務省によると、2016年には60歳以上の方の約60%、60~64歳の方に限定すると80%以上が、インターネットを利用しています。
(※)パソコン、スマートフォンタブレット型端末、携帯電話・PHSスマートフォンを除く)、インターネット対応型家庭用ゲーム機、インターネット対応型テレビ受信機の合計

これからさらに増える高齢の利用者の方にも、快適にウェブサイトを見ていただきたいですね。
そこで、高齢の方にとって利用しやすいウェブサイトデザインのポイントをまとめました。

 

アルファベット・片仮名は使わない

表記は「ログイン」→「会員の方はこちら」、「Access」→「交通案内」など、漢字や平仮名にしましょう。
アルファベットや片仮名表記で示される外来語に馴染みがない方にも言葉の意味が伝わりやすいよう、配慮が必要です。

 

フォントは大きく

一般的に、高齢の方が読みやすいフォントサイズは16px以上です。文字の読みやすさは書かれている情報の理解度に直結するため、対象となるユーザーに応じた適切な設定が必要です。

 

行間は広めに

フォントサイズ同様気をつけたいのが、行間です。
line-heightが160~180%が読みやすいです。
行間が狭すぎると、行を移るときに次に読む行を見失いますし、反対に広すぎると、視線の移動距離が大きくなり疲れてしまいます。
フォントサイズはブラウザの表示設定などで変更できますが、行間はユーザー側での調整ができません。作る側がしっかり配慮しましょう。

 

色のコントラストに注意

テキストと背景は、しっかり色のコントラストをつけましょう。
日本工業規格「JIS X 8341-3:2010」では、テキストと背景のコントラスト比を4.5対1以上とするよう推奨しています。
白内障などにより視界がかすみ黄色味を帯びてくると、パステルカラーなどのペールトーンや彩度の低いカラーが識別しにくくなります。
特に黄色と白は識別しづらいので注意が必要です。

また、表示する色合いを変えられる機能を入れると更に利用しやすくなります。

参照:東京都 http://www.metro.tokyo.jp/moji.html

f:id:BOEL:20171004172352p:plain


無料のコントラスト確認ツールもあるので活用しましょう。

miChecker Ver.2.0
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

ColorTester
https://alfasado.net/apps/colortester-ja.html

 

ボタンは大きく、立体感を

ボタンやテキストリンクは大きくしましょう。主要なボタンは、幅が32px以上あるとよいです。
入力フォームなどにあるチェックボックスやプルダウンも、適切な大きさに設定する必要があります。
カーソルを数ミリ動かしたり、小さなボタンをタップしたりするなどの細かい動作が必要ないよう、手先が不自由な方の利用も前提とした設計が必要です。

また、フラットデザインのボタンは、単に背景が塗りつぶされたテキストに見えてしまいます。
薄い影を入れるなどして立体感を出し、心理的に「押したくなる」ボタンにしましょう。

参照:資生堂 プリオール https://www.shiseido.co.jp/pr/question/

 

f:id:BOEL:20171004172428p:plain

 

アイコンにはテキストを添える

アイコンがなにを意味するか、テキストで補足を入れましょう。
アイコンは文字分のスペースを節約でき便利ですが、普段からWebサイトを利用していない場合、アイコンの意味がわかりにくく感じられる方や、アイコンをクリックすると詳細な情報が表示されることが理解しにくい方もいます。

参照:近畿日本ツーリスト http://www.knt.co.jp/

f:id:BOEL:20171004172645p:plain


「表」で比較しやすく

ウェブサイト上で数種類の商品やサービスを比較したいとき、主要な情報をまとめた一覧表があると便利です。
ページの行き来が多いと、今いるページや元のページへの戻り方がわかりにくくなるため、同じページで複数の情報を比較できると親切です。

「LIFULL介護」のページでは、違いのわかりにくい老人ホーム・介護施設が一目で比較できる表が掲載されています。

参照:LIFULL介護 https://kaigo.homes.co.jp/manual/facilities_comment/list/

f:id:BOEL:20171004172619p:plain


問い合わせ電話番号はファーストビューに

問い合わせ対応用の電話番号がある場合、ファーストビューの範囲内に設置しましょう。
高齢の方にとって「困った時にすぐ電話で直接相談ができる」ことは心強いものです。メールや問い合わせフォームの利用に不慣れな方にとっても、電話番号はすぐ見える場所に入れると親切です。

 

まとめ

いかがでしたでしょうか。
ウェブサイトを作る時、自分では見やすいと思っても、様々な方に見ていただくことを十分考慮してデザインしたいですね。
先に挙げたような小さな工夫をすることで、幅広い年代の方にとってわかりやすい、快適なウェブサイトを増やしていきましょう。

 

参考サイト

総務省「平成29年版 情報通信白書」
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc262120.html

Web担当者Forum

「シニアフレンドリー最適化=SFO」の背景と重要性を認識しよう(全6回の1)」
http://web-tan.forum.impressrd.jp/e/2015/10/02/20679

「ネットはまだアヤしい場所? シニアの心理的ハードルを下げ安心してもらう6つの方法(全6回の2)」
http://web-tan.forum.impressrd.jp/e/2015/11/06/20680

「シニアの認知能力でも快適にサイトを使えるようにする7つの“技”(全6回の3)」
 http://web-tan.forum.impressrd.jp/e/2015/12/01/20681

「文字サイズだけでは不十分! 老いた眼や手でも使いやすいサイト作り7つのポイント(全6回の4)」
http://web-tan.forum.impressrd.jp/e/2016/01/21/21867

hi-posi Front-End blog「50代以降をターゲットにしたWebサイトのUI事例」
http://hi-posi.co.jp/tech/?p=330

WebA11y.jp「各チェックツール」
https://weba11y.jp/tools/testing_index/

LIG「デザイン上達の秘訣は「文字の扱い方」!テキストを読みやすくする5つのポイント」
https://liginc.co.jp/225369

長野県建築士会諏訪支部青年委員会「高齢者にやさしい色彩計画」(PDF)
http://www.arcsuwa.com/committee/seinen/koureisyaniyasasii.pdf

UI向上に必須。マイクロインタラクション10選

f:id:BOEL:20170928121452j:plain

こんにちは。デザイナーの寺田です。
TIPS vol.59で「WebライティングでUIデザインの品質を高める」をご紹介しました。
今回は、ライティングとともにWebサイトの品質を高めるために、ぜひこだわりたい、
マイクロインタラクションについてご紹介します。
Googleが薦めるマテリアルデザインの出現から、マイクロインタラクションを用いたWebサイトがほとんどです。

マイクロインタラクションをWebサイトに取り入れることでUIの向上につながります。
ただ、単純に動きを入れたらUIが向上するということではないので、 マイクロインタラクションの実装のポイントや実例をこれからみていきましょう。

 

マイクロインタラクションとは

ハンバーガーボタンをクリックした時のアニメーションなど、 ユーザーの行動に対して起こるアクションのこと。
以下の内容は、UIを高めるに当たって必要なアニメーションです。
また、PANTONEが2017年秋におすすめの10色を発表しました。いずれも落ち着いた素敵な色なので、デザインに取り入れてみてはいかがでしょうか。
・状況を伝え、フィードバックを提供する
・ユーザーに、より直接的な操作を行っていると感じられるようにする
・ユーザー自身が行ったアクションの結果を分かりやすくする

 

使ってみたいインタラクション例10選

Webサイトの状況を伝える

Webサイトの状況を伝えるとは、Webサイトで今何が起きているかをユーザーに発信し続けるということです。 ユーザーは早いレスポンスを期待しますが、ユーザーの環境などでWebサイトが反応を返すまでに時間がかかる場合があります。 その際には、ローディングを表示させましょう。状況を伝えることでユーザーのストレスは軽減します。
普通であれば、ストレスとなる状況でもアニメーションを使って ユーザーにWebサイトの体験を良いものにしていけたらベストですね。

f:id:BOEL:20170928122354j:plain

参考サイト
https://codepen.io/khadkamhn/pen/ORVNrW

 

CTA(Call To Action)/コールトゥアクション

CTAとは日本語では行動喚起とされています。
魅力的なアニメーションを実装することで、ユーザーの興味を引き、次のアクションへと誘導することが可能になります。

f:id:BOEL:20170928122513j:plain

参考サイト
https://codepen.io/Schlipak/pen/vXkYpp?q=micro%20interaction&limit=all&order=popularity&depth=everything&show_forks=false
https://codepen.io/aarongrieve/pen/KqxRWY?depth=everything&limit=all&order=popularity&page=5&q=micro+interaction&show_forks=false

 

強調する部分を伝える

CTAとは日本語では行動喚起とされています。
スペースを節約するために、必要に応じてアプリ内のボタンを別のものに置き換えることがあります。
その際にアニメーションはユーザーを引きつけ、伝えたい情報を見落とさないようにします。

f:id:BOEL:20170928122823j:plain

 

参考サイト
https://bootsnipp.com/snippets/featured/material-toggle-button
https://codepen.io/andreasstorm/pen/OmBdpO

 

インタラクションのルールを統一する

スマホやスマートウォッチという小さい画面において、たくさんの情報を表示させることは難しい場合があります。インタラクションでユーザーが今いる場所を把握でき、ユーザーの行きたいページへすぐに行くことができます。

f:id:BOEL:20170928122945j:plain

参考サイト
http://significa.pt/labs/css-only-slider/
https://codyhouse.co/demo/stretchy-navigation/index.htmlhttps://tympanus.net/Blueprints/PageStackNavigation/

 

データ入力を視覚的にする

データ入力のクオリティーを高めることで、Webサイトの質はグッと高まります。
ユーザーにとってデータ入力はめんどくさい作業ですが、マイクロインタラクションを取り入れることで、ユーザー体験が向上します。

f:id:BOEL:20170928123043j:plain

参考サイト
https://codepen.io/wicek3d/pen/xRyrmP?depth=everything&limit=all&order=popularity&page=3&q=micro+interaction&show_forks=false
https://tympanus.net/Development/TextInputEffects/

 

まとめ

いかがでしたでしょうか。
UIの向上のためにインタラクションは今では、必須の項目となっています。 サンプルのソースも探せば、たくさん出てきますので 試したりアレンジしたり、インタラクションを使うことの自分なりの答えを出してみてください。

参考サイト
http://uxmilk.jp/3553
http://www.seleqt.net/design/micro-interactions/

https://www.webprofessional.jp/animations-using-easings-to-craft-smarter-interactions/
https://webnaut.jp/design/1134.html 

https://techacademy.jp/magazine/11670

gulpを使って ファイルの徹底効率化をはかる

f:id:BOEL:20170919122430j:plain

HTMLでサイトを構築するとき、デザインや見栄え等をチェックすることはもちろんですが、
成果物をより良くするために、ソースやファイルにチューニングを加えることがあります。
HTML、CSSソースコード見直しや、整理、画像のファイル圧縮やHTMLのバリデーションチェック。 また、作る過程で要素が多くなったり、ページが増えたり、ヘッダーやフッターなど共通部分が何ページにも渡るケースがでてきます。
調整の過程で共通部分に修正が入ったとき、その部分に該当する全てのHTMLを編集して調整…などと言ったケースが発生することも稀ではありません。
テキストエディタで一括変換ができる場合もありますが、構造そのものに変更が入ったり、変更箇所が多岐に渡ると置換では要件を満たせないこともあります。
CMSフレームワークを入れるほどではないけど、柔軟なソース管理ができてかつ、面倒な手間を省きたいとき、gulpが役に立ちます。

 

gulpとは

Node.jsをベースとしたビルドツールです。
sassやcoffeescriptコンパイルなどを自動化するなどさまざまな手間を省いてくれるツールです。
ビルドの設定が簡単にカスタマイズできるため、いろんなプロジェクトに応じて臨機応変な対応できます。
設定のためのサンプルも、npm公式サイト(https://www.npmjs.com/)などを始め、第三者のデベロッパーが記事を載せているため、情報は比較的充実しています。

設定をJS構文で書くことになるため、多少難しいイメージがありますが、自分の目的さえはっきりしていればサンプルが見つかるため、すぐに設定することができます。
今回はWEB上の情報を集め、BOELで行う開発フローに当てはめて、
少々カスタマイズを加えながら設定をまとめていきます。

gulpをインストール

今回はmacの環境をベースに行っていきます。
macOS Sierra 10.12.6

node.jsをインストール

gulpを使うにはnode.jsのインストールが必要です。
下記サイトから実行ファイルがダウンロードできます。

https://nodejs.org/en/

アプリケーションをインストールする感覚で行えます。dmgを開き、手順に従ってインストールしてください。
node.jsをインストールした後、npmコマンドが実行できることを確認します。


npm -v
5.3.0

 

バージョンが出てくればインストールに問題ありません。

またnode.jsについては、TIPS「node.jsアプリをLinuxサーバーで公開してみよう」でも紹介しています。

そちらもぜひご覧ください。

 

グローバルインストール

gulpはグローバルインストール、ローカルインストール二通りが必要です。まずグローバルインストールを実行します。

 

sudo npm install gulp -g
 

プロジェクトフォルダ内にpackage.jsonが生成されているのを確認してください。

プロジェクトフォルダ内でgulpのローカルインストールを行います。

 

npm install --save-dev gulp

 

インストールが完了したらgulpが実行できるか確認しましょう。

ざっくりGulp.js入門(Mac向け)

http://qiita.com/kazukichi/items/884a1379eea5918689ed

gulpとかnpmのこととか

https://protean.cc/getting-started-with-gulp-and-npm

 

gulpの実行

gulpを実行するためにはgulpfile.jsというファイルが必要になります。
プロジェクトフォルダに作成しましょう。

 

gulpでプロジェクトの設定

設定を進めていきます。

基本的には下記サイトを参考にさせていただいています。これを軸に、プロジェクトの特性に合わせ調整を加えていきます。

 

EJSの基本 – EJSでサイト制作効率化

https://www.to-r.net/media/ejs-01/

gulp-ejsHTMLの共通部分を分割化

gulp-sassscssコンパイル

gulp-plumbergulp-notifyでエラー強制停止の防止を行う。リアルタイム通知

gulp-autoprefixerでベンダープレフィックスを自動で付与

gulp-webserverでローカルサーバーを立ち上げ。

 

※gulp-webserver

gulp-webserverで開発用Webサーバーを立ち上げる

http://labs.septeni.co.jp/entry/2015/10/26/233737

 

※gulp-plumbergulp-notify

これからはじめるGulp6):gulp-plumbergulp-notifyを使ったデスクトップ通知

https://whiskers.nukos.kitchen/2014/12/06/gulp-notify.html

 

追加で下記にも対応します。

imagemin-pngquantgulp-imageminで画像圧縮

gulp-html-validatorHTMLバリデーションする

 

参考サイトのサンプルとあわせて下記のようなコードになります。

 

//package.json
{
  "name": "ejs-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-ejs": "^2.2.1",
    "gulp-html-validator": "^0.0.5",
    "gulp-imagemin": "^3.3.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.0.0",
    "gulp-webserver": "^0.9.1",
    "imagemin-pngquant": "^5.0.1"
  }
}

-------------------------------------------

//gulpfile.js
const gulp = require('gulp');
const ejs = require('gulp-ejs');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const autoprefixer = require('gulp-autoprefixer');
const webserver = require('gulp-webserver');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const htmlValidation = require('gulp-html-validator');


gulp.task('ejs',()=>{
return gulp.src("./src/ejs/*.ejs")
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(ejs('', {"ext": ".html"}))
.pipe(gulp.dest("./dist"));
});

// sass
gulp.task('sass',()=>{
return gulp.src("./src/scss/*.scss")
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest("./dist/css"));
});

// localhost
gulp.task('webserver', ()=>{
gulp.src("./dist")
.pipe(webserver({
host: 'localhost',
port: 8000,
livereload: true
}));
});


const imagePath = {
src: './src/images/',
dist: './dist/images/'
};

gulp.task('optimizeImage', ()=> {
return gulp.src(imagePath.src + '**/*').pipe(imagemin({
use: [
pngquant({
quality: 60 - 80,
speed: 1
})
]
})).pipe(gulp.dest(imagePath.dist));
});

gulp.task('valid', () =>{
return gulp.src("./dist/*.html")
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(htmlValidation())
.pipe(gulp.dest('./validout'));
});

gulp.task('watch', ()=>{
gulp.watch('./src/scss/**/*.scss', ['sass']);
gulp.watch('./src/ejs/**/*.ejs', ['ejs']);
});

gulp.task('default',['watch','webserver','optimizeImage','valid']);

 

パッケージをインストールします。package.jsonを編集したら下記コマンドを実行します。

npm install

 

必要なパッケージが追加され、gulpfile.jsに書いた内容が実行できるようになります。
実際にどんなことができるか見ていきましょう。

 

ejsを軸にHTMLをテンプレート化

ejsではHTMLをテンプレート、分割化できます。
srcフォルダを作成し、パーツを作っていきます。

 

ejsフォルダを作成

index.ejs(コアファイル)を作成します。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>構築のテスト</title>
</head>
<body>
<% include _partial/header %>
<main>
<p>テキストエリア</p>
</main>
<% include _partial/footer %>
</body>
</html>

 

ヘッダーとフッターを外部化

<% include _partial/header %>
<% include _partial/footer %>
これらはHTMLでは見覚えのない書き方です。 これはヘッダーとフッターのテンプレートを読み込む記述になります。
実際に_partialフォルダを作成し、header.ejsとfooter.ejsを作成します。

 

<!- header.ejs ->
<header>
外部化したヘッダーパーツ
</header>

-------------------------------------------

<!- footer.ejs ->
<footer>
外部化したフッターパーツ
</footer>

 

これでHTMLとなるファイルの準備はOKです。

scssのコンパイル

scssをコンパイルし、cssファイルにすることができます。
srcににscssのフォルダを用意し、scssのファイルを作成します。
下記のようにscssの形式で書いてみます。

 

/*common.scss*/
body{margin: 0;
p{margin: 0;}
}

 

画像の圧縮

gulpfile.jsには画像を圧縮する設定を行っています。
srcにimagesフォルダを作成し、画像を用意しておきます。

HTMLのバリデーション

生成されたHTMLのバリデーションを行った結果をファイルに書き出す設定をしています。
結果はvalidoutフォルダが自動生成され、その中に結果が表示されます。

gulpを実行してみる

上記の準備ができた段階でgulpを実行してみましょう。

 

gulp

 

distフォルダが自動生成され、成果物ファイルが構築されます。

 

<!- index.html ->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>構築のテスト</title>
</head>
<body>
<header>
外部化したヘッダーパーツ
</header>

<main>
<p>テキストエリア</p>
</main>
<footer>
外部化したフッターパーツ
</footer>

</body>
</html>

 

-------------------------------------------

/*common.css*/
body {
margin: 0; }
body p {
margin: 0; }

 

画像も生成されていることを確認します。
元の画像とファイルサイズを比較してみてください。
HTMLのプレビューを下記URLから確認することができます。
http://localhost:8000/

gulp実行中は上記URLからプレビュー閲覧すると、HTML、CSSを変更したときにブラウザがリフレッシュされ、リアルタイムで更新確認できます。

 

まとめ

以上gulpの基本的な使い方を実務ベースで構築してみました。
HTMLの外部分割化、scssの自動コンパイル、画像の圧縮、変更のリアルタイムプレビューなどひとつひとつ見ると細かい部分ではありますが試行、プレビューは制作の際に何度も繰り返す処理です。
小さいことでも積み重なれば、時間と労力を大きく節約することができます。
また、これらの設定はほんの一部の機能に過ぎず、他にもカスタマイズ方法は多々あります。
今度はプロジェクトにjsファイルもインクルードした想定でより使いやすくカスタマイズしていけたらと思います。

参考サイト
HTMLバリデーション

https://www.npmjs.com/package/gulp-html-validator

画像圧縮

http://blog.tsumikiinc.com/article/20150226_gulp-imagemin.html

秋を感じさせるデザインのポイント

f:id:BOEL:20170919110134j:plain

 こんにちは。デザイナーの那須です。 9月に入り、秋を感じる涼しい日も増えました。 今回は、これから増えてくる「秋らしいデザイン」の要素を、実例と共にご紹介します。
※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイトも含まれており、一定の期間を過ぎるとクローズする可能性がありますので、ご了承ください。


カラー

秋には、オレンジ・赤・黄色・茶色などの紅葉をイメージさせる色や、さつまいもの赤紫など秋が旬の食べ物を連想する色を用いたデザインをよく見かけます。深緑やマスタードなど、暗いトーンの色も多く見られますね。 ハーゲンダッツのサイトでは、かぼちゃの背景に深緑や暗い赤を使って秋らしさを強調しています。
また、PANTONEが2017年秋におすすめの10色を発表しました。いずれも落ち着いた素敵な色なので、デザインに取り入れてみてはいかがでしょうか。


参照:PANTONE Fashion Color Report, Fall 2017 

http://www.pantone.com/fashion-color-report-fall-2017

ハーゲンダッツ パンプキンプディング&パンプキン

http://www.haagen-dazs.co.jp/pumpkinpudding_pumpkin/

f:id:BOEL:20170919110214p:plain

 

モチーフ

紅葉や楓の葉を秋を代表するモチーフとして思い浮かべる人も多いのではないでしょうか。 他にもどんぐりやコスモス、りんご・栗・かぼちゃ・ぶどうなどの秋の食材、リス・鹿などの動物が、秋のモチーフとしてよく用いられています。

このKITTEの広告では、柿・きのこなどの秋の味覚のイラストが使われ、色合いも手伝って秋らしさが演出されています。 

KITTE 秋のメッセージフェスタ

http://jptower-kitte.jp/topics/413.html

f:id:BOEL:20170919110233j:plain

 

イベント

秋に催されるイベントに関連したデザインも、季節感を出すのに効果的です。 ほろ酔いのサイトは、ハロウィンをテーマにデザインがされています。 背景にかぼちゃやお城、コウモリのシルエットを入れて少し不気味な雰囲気を出しつ、季節感を表現しています。
サントリーほろよい ほろよいエリカのほろット占い

http://www.horoyoi-cp.com/horotto/?_ga=2.84744857.1896721724.1505358504-1728864343.1505358504&__utma=198440237.1728864343.1505358504.1505358504.1505358508.2&__utmb=198440237.16.7.1505376419305&__utmc=198440237&__utmx=-&__utmz=198440237.1505358504.1.1.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)&__utmv=198440237.|25=FOID=RGAIztkf514SOWQvpS7lY4uH60c=1^26=FOSG=%2210323%22%2C%2212448%22%2C%2213095%22%2C%2230250%22%2C%2230293%22%2C%2247646%22%2C%2261855%22%2C%2263470%22%2C%2263482%22%2C%2263603%22%2C%2263648%22%2C%2263730%22%2C%2271121%22%2C%2298771%22%2C%2299056%22%2C%22165=1&__utmk=98355679

f:id:BOEL:20170919110251p:plain

 

日本文化

日本ならではの文化、お月見も秋を感じさせます。 マクドナルドの広告では、満月とうさぎ、ススキのモチーフを使って、秋の行事のお月見を表現しています。

マクドナルド 月見バーガー

http://www.mcdonalds.co.jp/campaign/tsukimi2017/

f:id:BOEL:20170919110440p:plain

 

テクスチャ

清涼感のあるデザインが多い夏とは反対に、表情のあるテクスチャでデザインに暖かみを出すことで、秋らしさを表現する方法もあります。

伊藤園のサイトでは、和紙風のテクスチャを背景に用い、紅葉のイラストと組み合わせて秋らしい暖かみを演出しています。

伊藤園「TEA SHOP ITOEN」 御予約限定まろやか熟成秋旬新茶

http://teashop.itoen.co.jp/shop/e/eyoyaku/

f:id:BOEL:20170919110532p:plain

 

加工・処理

文字・イラストの線を鉛筆やクレヨンで描いたような質感にすると、枯葉のカサカサした質感や秋らしい暖かみを出すのに効果的です。

「秋のグリーティング」切手は、手書き風の質感の文字や女の子のイラストが落ち葉などの柔らかなテイストと合わさって、秋らしさを感じるデザインになっています。

日本郵政 グリーティング切手「秋のグリーティング」の発行

https://www.post.japanpost.jp/kitte_hagaki/stamp/tokusyu/2017/h290823_t.html

f:id:BOEL:20170919110629j:plain

 

フォント

元気いっぱいなイメージの夏に比べ、秋は落ち着いた、大人っぽさを押し出した広告も多い気がします。フォントも、カジュアルなゴシック体より上品な印象の明朝体や筆文字を選ぶと、落ち着いた雰囲気になります。

キリン「秋味」のサイトでは、全体を通して明朝体を用いており、「おとなの秋」にふさわしい品のあるビジュアルになっています。

キリン 秋味な旅プレゼントキャンペーン

http://www.kirin.co.jp/products/beer/akiaji/campaign/index.html

f:id:BOEL:20170919110731p:plain

 

まとめ

いかがでしたでしょうか。 これから秋をテーマにした広告や商品などを見かける機会が増えると思います。 「これは秋らしいな」と思ったら、なにを見て秋を感じたのか、またその広告などには、どんな秋を感じさせる工夫がされているのか、考えてみると楽しいかもしれません。

線や塗りなど描画が美しいSVGアニメーションの作り方

f:id:BOEL:20170908145312j:plain

ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。
SVGには、gifのように画像をアニメーションさせることができます。
gifや動画などと違い、ベクター形式であるSVG特有の滑らかな動きを表現できます。

今回は、XML形式とCSS3でアニメーションをつけて
ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。

 

SVGについて

SVGについての詳しい説明や作り方に関しては、こちらの記事をごらんください。

SVGの作り方 | TIPS | BOEL Inc. ボエル

これでもうアイコンがにじまない!SVGのデータ作成で気をつけるポイント | TIPS | BOEL Inc. ボエル

 

SVGベクター形式の画像。
jpgやpngなどの形式の画像と違いパスデータで構成されており、
そのパスの情報をXML形式で持っているためコード上での編集が可能です。

そのため、XML形式のアニメーションタグを使ってアニメーションをつけたり、
パスごとにクラス名をつけて細かくCSS3のアニメーションでSVG画像に動きをつけることができます。

 

描画アニメーション

ペンで描画するような線の動きと、塗りを変化させる動きを組み合わせたSVGアニメーションです。

 

CSS3

サンプルコード

#boel{stroke:#000; stroke-width:1px; fill:transparent; stroke-dasharray:1425px; stroke-dashoffset:1425px; animation:anim 2s ease-in 0s forwards;}
@keyframes anim{
0%{stroke-dashoffset:1425px;}
30%{fill:transparent;}
60%{stroke-dashoffset:0;}
100%{stroke-dashoffset:0; fill:#000000;}
}

 

サンプルコード解説

stroke パスの線、また図形を縁取る線の色を指定。

fill 図形の塗りの色を指定。
stroke-width 線の太さを指定。単位はpx、em、remなどが使用可能。
stroke-dasharray 線の長さ・線と線の間隔を指定。
stroke-dashoffset 線の開始位置を指定。
animation CSSアニメーションのプロパティ


stroke-dasharray、stroke-dashoffsetについて

stroke-dasharray
 図形の線を破線形にし、一区切りの線の長さ・線と線の間隔を指定します。
stroke-dashoffset
 線の開始位置を指定します。
 数値を入れると、もとのパス情報の位置から指定した数値分、位置が移動し、もとのパスの位置からズレた分は非表示になります。

 

stroke-dasharrayで線の長さを、図形の縁に隙間がないよう全体を覆う長さにし、
stroke-dashoffsetで同じ数値を入れることで、図形を縁取っている線の長さ分位置が移動して図形が非表示のように見える状態になります。

 

XML

サンプルコード

<svg style="stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;">
<!-- ここにpath情報などの要素 -->
<!-- 以下、アニメーション設定の要素 -->
<animate attributeType="css" attributeName="stroke-dashoffset" dur="4s" values="1425px;0px;0px;0px" repeatCount="indefinite" keyTimes="0;0.3;0.6;1" />
<animate attributeType="css" attributeName="fill" dur="4s" values="transparent;transparent;#000000;#000000" repeatCount="indefinite" keyTimes="0;0.15;0.5;1" />
</svg>


サンプルコード解説

<svg> SVGを格納するための要素
style=”stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;” 縁取り線を描画するためのCSS要素。XMLで動かす際にも、ベースとなる線の情報が必要になるため入れておく必要があります。
<animate> SVGに動きをつけるための要素
attributeType アニメーションさせる対象の属性の種類を指定。XMLCSS、autoが指定できる。autoでの優先順位はCSSXML
 上記サンプルでは、変化させたい属性がCSSプロパティのためCSSを指定しています。
attributeName アニメーションさせる対象の属性を指定。x・yなど座標や、width・heightなどが指定できる。
 上記サンプルでは、線の位置を指定するstroke-dashoffsetと、図の塗りを指定するfillをアニメーション対象に指定しています。
dur アニメーション1回の時間を指定
values アニメーションの属性値を指定。セミコロンで区切ることができます。
keyTimes アニメーションを開始するタイミングを指定。0(開始)〜1(終了)で指定する。keyTimesで指定した時間区分はvaluesと連動するため、valuesの属性値の数と、keyTimesの時間区分を同じ回数にする必要がある。
repeatCount アニメーションの繰り返し回数を指定。
 繰り返しの回数(数値)、もしくはindefinite(ずっとループ)が指定できる。

 

変形

図形のパス情報を変化させ、変形させるアニメーション。
パス情報はCSSで変化をつけることができないので、XMLでの方法のみを紹介します。

 

XML

サンプルコード

<svg>
<path>
<animate attributeType="XML" attributeName="d" dur="5s" repeatCount="indefinite"
values="M88,140.9c34.7-6.6,56-41.7,52.7-65.7s-56.7-79-94-48.7s-49.3,69.7-17.7,96.3S63.4,145.6,88,140.9z;
M113.4,135.2c34.7-6.6,33.7-68,30.3-92s-50.7-13-88,17.3s-60.3,42.7-28.7,69.3S88.7,139.9,113.4,135.2z;
M60.6,145.4c34.7-6.6,90.9-63.8,87.5-87.8S118.3-6.8,81,23.5S-5.7,42.5,25.9,69.1S35.9,150.1,60.6,145.4z;
M80.7,109c34.7-6.6,8.1-55.9,4.8-79.9s-16.8-41-54.1-10.7s-20.9,89.8,10.7,116.4S56.1,113.7,80.7,109z;
M121.3,148.5c34.7-6.6,32.4-98.7,29.1-122.7S106,69.7,68.7,100s-74,5.8-42.4,32.4S96.7,153.2,121.3,148.5z;
M95,142.1c34.7-6.6,56.1-62.2,52.8-86.2S82.8-17.3,45.5,13s-7.9,36.2,23.7,62.8S70.4,146.8,95,142.1z;
M88,140.9c34.7-6.6,56-41.7,52.7-65.7s-56.7-79-94-48.7s-49.3,69.7-17.7,96.3S63.4,145.6,88,140.9z" />
</path>
</svg>

 

サンプルコード解説

<path> 図形のパスデータを格納するための要素
attributeName アニメーションさせる対象の属性を指定。
 サンプルでは d、パス情報をアニメーション対象にしています。

 

変形アニメーションの注意点

illustratorなどで図形を作成する際、変形元の図形から、変形した図形を作るときにパスの数を変えてしまうと滑らかな動きが実装できません。

 

動きをつける

要素に回転や拡大縮小をさせたり、位置を移動させるなどのアニメーションです。

 

CSS

サンプルコード

#tonton circle{fill:#000000; transform:translate(0,0); animation:animT 2s linear 0s infinite;}
@keyframes animT{
0%{transform:translate(0,0);}
12.5%{transform:translate(80px,130px);}
25%{transform:translate(160px,20px);}
37.5%{transform:translate(240px,130px);}
50%{transform:translate(300px,20px);}
62.5%{transform:translate(240px,130px);}
75%{transform:translate(160px,20px);}
87.5%{transform:translate(80px,130px);}
100%{transform:translate(0,0);}
}

 

XML

サンプルコード

<svg id="tonton2" width="300px" height="150px" viewBox="0 0 300 150" style="enable-background:new 0 0 300 150;" xml:space="preserve">
<circle cx="0" cy="0" r="20">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0;80 130;160 20;240 130;300 20;240 130;160 20;80 130;0 0" keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1" dur="2s" repeatCount="indefinite" />
</circle>
</svg>

 

サンプルコード解説

circle 円形パスの要素
animateTransform animate要素では使用できない、CSS3のtransform属性を使用するための要素。 基本的な使い方はanimateと同じ


注意点

animateタグは、動かしたい要素内に記述する必要があります。
svg画像全体を動かしたい場合は、<svg></svg>の間に記述しますが、上記サンプルではsvg内のcircle要素のみを動かしたいので<circle></circle>の間にanimateタグを記述しています。

 

パスに沿ってアニメーションする

上記、「動きをつける」で紹介したのは基本的にCSSを使った動かし方ですが、パスの線に沿ってアニメーションすることもできます。

 

サンプルコード
<svg id="tonton3" width="300px"height="150px" viewBox="0 0 300 150" style="enable-background:new 0 0 300 150;" xml:space="preserve">
<path id="stroke" fill="none" stroke="#dddddd" stroke-width="0.1rem" d="M0,0c0,0,10.2,108,62.7,129.7s111.5-48.1,153.7-84.1c39.9-34,60-21.7,60-2.2c0,28.8-31.1,58.9-97.6,46.7
C113.5,78.1,0,0,0,0z"/>
<circle cx="0" cy="0" r="20">
<animateMotion dur="3s" calcMode="linear" repeatCount="indefinite">
<mpath xlink:href="#stroke" />
</animateMotion>
</circle>
</svg>

 

サンプルコード解説

<path id=”stroke”…> 動きの軌道となるパスの線要素。mpath要素でid参照をするため、idの設定が必須です。
animateMotion パスデータでのアニメーション処理を行うための要素
mpath animateMotionの子要素。xlink:href属性で軌道となる線要素のidを指定し、参照します。

 

まとめ

いかがでしたでしょうか。
今回は、SVGアニメーションの基本的な要素やCSSXML上での動かし方を紹介しました。
ちょっとした動きや、アイコンや文字の簡単なアニメーションの実装ならあまり難しいコーディングが必要ではないと感じていただけたのではないかと思います。

もっと複雑なパスの図版などをアニメーションにするにはCSSXMLでは難しいですが
簡単にSVGにアニメーションをつけることができるJavaScriptプラグインも多くあるので、うまく組み合わせてSVGを効率的に使えるようになると良いと思います。

Google AdWords 管理画面
 リニューアル版を試してみよう

f:id:BOEL:20170829182822j:plain

2017年8月ごろからAdWordsの管理画面リニューアル版が公開され、新しいデザインにて使用できるようになりました。


グラフが増えたり知りたい情報が大きくなっていたり、トップ画面をみるだけでも視覚的なデザイン・レイアウトになったことがわかります。


見やすくなったことで、膨大な項目の中からキャンペーンなどの編集したい箇所がすぐに見つけやすくなり、作業時間の節約や効率アップにつながっていくでしょう。


 

今回はAdWordsの管理画面のリニューアル内容、そしてリニューアルによるメリットをご紹介していきます。


リニューアル内容


自動的にリニューアル版に移行

 

Google AdWordsをこれまで使用していたアカウントでは自動的に順次リニューアル版に変更されていくようです。

f:id:BOEL:20170829182920j:plain

 

「開始」ボタンをクリックすると、リニューアル版のチュートリアルが始まります。
ガイドに沿ってどんどん進んで、新しくなったAdWordsを見てみましょう。
チュートリアルで一通りの案内をしてくれます。

 

以前のAdWordsに戻したい場合

f:id:BOEL:20170829182958j:plain

今回のリニューアル版はまだベータ版のため、一部使用できない機能もあります。
順次以前のAdWordsと同じ機能が使えるようになっていきますが、以前のAdWordsに戻したい場合は、メニュー内から戻すことができます。
また以前のAdWordsから、リニューアル版に切り替えたいときは、歯車のメニュー内から「新しいAdWordsを試す」をクリックします。

 

※2017/08/21時点で使用できない機能

 

・価格表示オプションの作成、管理、レポート作成、広告表示オプション(自動)レポート


・高度な編集(例:自動化ルール、一括アップロード)


・AdWordsラボ


・ビジネスデータフィード


・一部のページでの機能のダウンロード


・カスタマイズした表示項目


・下書きとテスト


・地域別レポート


・互換性:右から左に表記する言語との完全な互換性、Edgeブラウザのサポート


・動画キャンペーンのショッピングサブタイプ


・ディスプレイネットワークキャンペーンのGmail広告サブタイプ


・カスタムリマーケティング/アフィニティ

 

 

リニューアル内容


キャンペーンまたは広告グループを切り替える

 

f:id:BOEL:20170829183136j:plain

キャンペーンや広告グループの表示は、左側のナビゲーションパネルから切り替えることができます。

小さい画面を使っている場合、最初はナビゲーションパネルが非表示になっています。


ナビゲーションパネルを開くには、ページの左側にカーソルを合わせるか、三角の矢印をクリックします。


パネルに表示するキャンペーンの種類を絞り込むには、ナビゲーションパネルのその他アイコンをクリックします。

絞り込みの機能は管理画面の作業全体に反映されています。

 

画面に表示される項目を切り替える


広告グループや広告・設定など、画面に表示される項目を切り替えるには、常に左側に表示されているページメニューの項目をクリックします。


ページメニューに表示する項目は、現在の表示単位によって変更することができます。


アカウント全体なのか、特定のキャンペーンや広告グループなのかによって変更されます。


ページメニューに表示されるのは、選択しているキャンペーンや広告グループに関連する項目のみです。


 

分析情報の確認

Adwordsにログインすると一番最初は概要ページが表示されています。
アカウント全体や特定の広告グループといったさまざまな項目で、自動的に生成された分析情報を確認できます。
期間の変更や特定のキャンペーンのみの選択、また詳細情報をクリックすると、より詳しい分析情報を確認できます。

f:id:BOEL:20170829183211j:plain

 
広告の新規作成

 

キャンペーン・広告グループ、広告・キーワードを作成して、ターゲット地域や広告のスケジュール設定などを追加するには、ページメニューで作成するアイテムをクリックし、表示されるページでプラスボタンをクリックします。


f:id:BOEL:20170829183253j:plain

 

レポートを使う

 

掲載結果レポートにアクセスするには、アカウントの右上にあるレポート アイコンをクリックし、「レポート」、または「ダッシュボード」を選択します。

f:id:BOEL:20170829183317j:plain

 

アカウントツールを使う

 

キャンペーンの最適化やプランニングに使えるさまざまなツールを利用するには、アカウントの右上にあるその他アイコンをクリックします。

f:id:BOEL:20170829183332j:plain

 

重要なアラートを確認する

 

重要なアカウントの通知は、以前のAdWordsと同じようにアカウントのどのページでも右上のベルアイコンをクリックして確認できます。


2017/8/21時点では、重要な通知と、すべてのアラートを確認する場合は以前のAdWordsを利用してください。

f:id:BOEL:20170829183355j:plain

 

支払いとアカウントの設定を管理する

 

支払い、アカウント管理、通知などの設定ページに移動するには、アカウントの右上にあるメインのその他アイコンをクリックします。


2017/8/21時点では、支払いは以前のAdWordsの新しいタブで開けます。


設定が完了したら、タブを閉じて AdWords リニューアル版に戻ります。

 

フィードバックを送信する 

f:id:BOEL:20170829183415j:plain

GoogleAdWordsリニューアル版についての意見を送りたい場合、アカウントの右上にあるヘルプアイコンをクリックし、「フィードバックを送信」を選択すると、AdWordsリニューアル版の効果や改善点を送信できます。


リニューアルによるメリットとは


キャンペーンの新規作成

 

広告それぞれの目標・目的に合わせてキャンペーンを新規作成・改善できます。
作業時間を節約し、作業効率をアップして、よく使う機能に簡単に移動できます。

f:id:BOEL:20170829183443j:plain

 

成果向上に役立つ分析情報

 

新しいグラフとこれまでよりも高度なレポート機能が追加されました。
様々なデータが視覚化されて、より分かりやすいレポートを見ることができます。
また概要ページでは好みの項目を表示することができます。

f:id:BOEL:20170829183457j:plain

 

まとめ


今回はリニューアルされた点について簡単にご紹介しましたが、いかがでしたでしょうか。


管理画面のデザインが見やすくなるだけで、より直感的に作業を進めることができます。
それは作業効率をアップするだけでなく、人為的ミスも少なくしてくれるのではないでしょうか。


これからもどんどん変わっていくそうなので、こまめにチェックしましょう。


参考URL

AdWords リニューアル版について


https://support.google.com/adwords/answer/6306932 
AdWords

リニューアル版の操作方法

http://
https://support.google.com/adwords/answer/6306925?hl=ja&ref_topic=6346221 

構造化データをお手軽に データハイライターを使ってみよう

 

f:id:BOEL:20170804112810j:plain

検索エンジンの最適化において、SEOの対策は欠かせないものとなっています。
サイト集客の方法はスマートフォンの普及、SNSの一般化など様々な要因から多様化しています。
最新の傾向としてはデータ最適化をするだけでは十分とはいえず、コンテンツの内容・有用性・価値が重要視されています。
だからといって、データ最適化が軽視されるようになったわけではなく、むしろ当たり前に入れなくてはならないもの、必須で設定する基本項目、マナーともいうべきものとなっています。
まず第一歩として「自分のサイトがこういう内容ですよ」とGoogleなどの検索エンジンに教えてあげることが大事です。
従来通りのTitle・Description・Alt属性などもそれに該当しますが、これだけではサイトの名前・サイトの概要・画像の代替テキストの情報のみです。
そのWebページが記事なのか、ブログなのか、企業のオフィシャルページなのか、はたまた商品を買うことができるページなのか、Title・Description・Alt属性だけでは検索エンジンは理解してくれません。

Webページの価値を判断する基準「このWebページではどんな情報が載っている、どこの組織が運営している」などを伝える手段の一つとして、構造化データをマークアップする方法があります。
schema.org

 

構造化データを「マークアップ」する。
つまり、HTMLなどのソースコードを編集したり、コーディングする必要があります。

HTMLに親しみのある人やマークアップエンジニアにとっては、その方法を理解し、編集することは容易かもしれません。
ですが、そうでない人にとってはどう書けばいいかわからなかったり、とっつきにくさから、対応したいと思ってもなかなか実行に移せない事が多いかと思います。

そこで、Googleが提供しているデータハイライターをつかってみます。
データハイライターについて

 

今回はわたしたちが運営しているTIPS記事を材料に、データハイライターの設定を実践していきます。

準備

Search Consoleを設定する前に

Googleでサイトを管理していることが前提となります。
Googleアナリティクスアカウントでサイトを管理していると連携がスムーズに進みます。
もし、Googleアナリティクスを利用してない場合、Googleアナリティクスを利用することを強くおすすめします。
※本記事では設定をしていることが前提の紹介になります。
弊社TIPSでもアナリティクスの設定の仕方は紹介していますので、ぜひそちらをご覧ください。

知ると便利なWEB解析ツール Google Analytics

 

サイトの設定

f:id:BOEL:20170804112815j:plain

 

Search Consoleを初めて使う場合、まずサイトを登録します。
「プロパティを追加」をクリックすると下図のように入力欄がポップアップします。

f:id:BOEL:20170804112819j:plain

 

「ウェブサイト」を選択し、「http://」または「https://」から開始するURLを入力し「追加」をクリックします。
次に出てくる画面で、所有者の確認を行います。WEBページを本当に自身が所持しているかの確認となります。
「別の方法」をクリックし表示します。

f:id:BOEL:20170804112758j:plain

Googleアナリティクス」を選択し「確認」をクリックします。

 

問題なければこれでアナリティクスと連携し、所有権の確認が完了します。
※問題がある場合、他の手段も試してみてください。
最も簡単なのはHTMLファイルをドメインのルートディレクトリ(TOPページのファイルが置いてある場所など)にアップロードし、それを確認する方法です。
※タグを入れる場合、HTMLを編集します。
※タグマネージャはGoogleアカウントを持っている必要があります。

 

データハイライターの設定

プロパティが追加されたらサイト設定をはじめます。
初めて登録する場合、他にも設定する箇所がありますが、今回はデータハイライターのみにフォーカスします。

SearchConsoleのホーム画面からドメインURLをクリックします。下図の画面が開きます。

f:id:BOEL:20170804112806j:plain

 

検索での見え方をクリックしメニューを開き、データハイライターをクリックします。

f:id:BOEL:20170804112825j:plain


「ハイライト表示を開始」ボタンをクリックします。クリックすると以下のようなポップアップが表示されます。

f:id:BOEL:20170804112831j:plain


データハイライターでサポートされるウェブサイトの内容は以下の通りです。
・記事
・イベント
・地域のお店やサービス
・映画
・商品
・レストラン
・ソフトウェア アプリケーション
・テレビ番組のエピソード

 

この説明ではTIPSを例に設定を進めます。
TIPSは「記事」で設定を進めます。だいたいブログやコラムなどが「記事カテゴリ」に該当するでしょう。
タグ付けしたいURLを入れて、「OK」をクリックします。
「このページをタグ付けし、他のページも同様にタグ付けする」を選択するといくつか自分タグ付けすると、Search Consoleが自動で他のページをタグ付けしてくれます。
ページによって細かい指定がなければこちらを選択します。

 

「OK」を押すと入力したURLのページが表示されます。
文字などをクリックすると選択できるようになります。
キャプチャーでは「知ると便利なWEB解析ツール Google Analytics」をクリックしました。
クリックするとこの選択したテキストは何かを決める選択肢が出てきます。

f:id:BOEL:20170804112835j:plain

 

タグ付け

「記事」以下の選択肢が存在します。
・タイトル
・著者
・公開日
 日時(自動)
 詳細設定(手動入力)
・画像
・カテゴリ
・平均評価
 評価
 詳細設定
  スコア
  最高
 評価数

 

タイトルを選択し、タイトルのタグ付けをします。
設定をすると右側のリストにタグ付けした内容が表示されます。

f:id:BOEL:20170804112839j:plain

 

次に画像をタグ付けします。
画像を複数タグ付けすると、そのコンテンツ内の画像が全て自動的にタグ付けされます。
自動でタグ付けされない場合は、1つづつタグ付けしていきましょう。
もし不要な画像があれば右のリストから手動で削除します。

f:id:BOEL:20170804112845j:plain

 

他にもタグ付けできるものにどんどんタグ付けしていきましょう。
文字、リンク、画像などサイトに表示している要素であればどれでもタグ付けできます。
TIPSではタイトル、日付、画像、カテゴリにタグ付けができました。

任意のタグ付け

サイトの表示にない任意のタグを自分で設定できます。
右上の鍵マークから「指定されていないタグを追加」をクリックします。
ポップアップが表示するので、選択します。
ページ内には著者の情報が無かったので「BOEL」を追加しました。

f:id:BOEL:20170804112851j:plain

 

タグ付けが済んだら、「完了」をクリックします。
ポップアップが表示します。
類似するページが自動でタグ付けされます。
名前を任意でつけて「ページセットを作成」をクリックします。

f:id:BOEL:20170804112851j:plain

 

自動タグ付けの調整

次に自動でタグ付けされたページのタグの確認と修正を行います。
間違や不適切なものがあれば修正をしましょう。
もし該当しないページや不要なページが混在している場合は「ページを削除」を行います。
いくつかのページを設定していくと、パターン化されていき、自動化されます。
手順通りに設定を進め、最後にデータ確認をします。
データ確認が済み次第、「公開」をクリックします。

f:id:BOEL:20170804112902j:plain

 

データが公開されると下のような画面に遷移します。
これで全て完了しました。後は反映されるのを待ちます。
公開したデータの内容はいつでも編集できます。公開を止めたい場合は非公開にすることも可能です。
変更したい点があれば適宜変更しましょう。
※反映には何日か時間がかかる場合があります。

f:id:BOEL:20170804112908j:plain

 

まとめ

データハイライターはHTMLやschemaのことがわかなくても、直感的な操作でウェブサイトの内容を設定し、検索エンジンに伝えることができます。
決められた選択肢の中で設定を進めていくのでschemaのような細かい指定は難しいですが、少しでも検索エンジンに内容が伝えられるのでやらない手はないかと思います。
ハイライターの設定をするためにサイトを見直したとき、あまりタグ付けができない、などに陥った場合はサイトに表示している要素がもしかしたら不足しているかもしれません。
改めてサイトの要素やコンテンツを検討するきっかけにもなるかと思います。
SEOに少しでも役に立てば幸いです。