vol.52 「選ぶ」だけじゃない!自分で作るWordPressのオリジナルテーマ

f:id:BOEL:20160725152947j:plain

 

こんにちは、エンジニアの佐藤です。
今や主流となったブログソフトウェア、wordpress
wordpressには無料で使える多くのテーマがありますが、
自分で作るオリジナルのテーマを使いたい・作りたいと思う方も多いはず。

HTML・CSSの知識があること、wordpressのインストールが済んでいる(もしくは問題なくできる)ことを前提に、今回はサンプルとしてシンプルなテーマを使い簡単なテーマ制作の手順をご紹介します。

 

基本構造

以下が、ブログとして基本的なファイル構成です。
必要に応じてjsなど他のファイルを追加していきます。

index.php
header.php
footer.php
sidebar.php
single.php
style.css
functions.php

webページの見た目としての構成は以下になります。
それぞれのファイルで各パーツを作る、phpの特徴的な形です。

f:id:BOEL:20160725154026j:plain


上の画像には入っていないファイルがいくつかありますが、
残りのファイルについてはのちほど各項目にて説明します。

wordpressテーマのディレクトリ構成が以下になります。

- wordpress
 - wp-content
  - themes
   - sample(今回作ったテーマのディレクトリ)

「themes」の中にフォルダと、その中にファイルを入れるとwordpress管理画面の外観→テーマのページに今回作るテーマが表示されています。
サムネイル画像は任意ですが、あればオリジナルテーマ感が増すかと思います。

 

テンプレートタグ

wordpressにはいわば専用のPHP関数、テンプレートタグというものがあります。
この関数の存在が、PHP初心者にも比較的簡単にテーマ制作ができる理由だと思います。
もちろん専用タグなのでwordpress以外では使えません。

今回、wordpressテーマを制作するうえで使用したテンプレートタグをご紹介します。

 

<?php wp_head(); ?> … 記述したファイルがヘッダーであることを示す

<?php wp_footer(); ?> … 記述したファイルがフッターであることを示す


<?php get_header(); ?> … ヘッダーを呼び出す(表示する)

<?php get_footer(); ?> … フッターを呼び出す

<?php get_sidebar(); ?> … サイドバーを呼び出す


<?php wp_nav_menu(); ?> … 固定ページのメニューを呼び出す

<?php echo get_stylesheet_uri(); ?> … スタイルシートのURLを呼び出す

<?php echo get_site_url(); ?> … サイトのURLを呼び出す


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><?php endwhile; endif; ?>
 … 投稿記事を呼び出す

<?php if ( is_active_sidebar( 'widget_footer' ) ) : dynamic_sidebar( 'widget_footer' ); else: ?><?php endif; ?>
 … ウィジェット(カテゴリーやアーカイブ一覧など)を呼び出す

<?php if(is_home()): ?>トップに表示するもの<?php else: ?>トップ以外に表示するもの<?php endif; ?>
 … トップとそれ以外で違うものを呼び出す

<?php bloginfo(); ?> … ブログタイトルを呼び出す

<?php the_title(); ?> … タイトルを呼び出す
 (ページのタイトル、記事のタイトルなど記述場所によって呼びだすタイトルを判断してくれる)

<?php echo get_the_date(); ?> … 投稿日時を呼び出す

 

テーマを作成する

さて、ようやくテーマの作成に入ります。
テーマを作るのに、最初からphpを混じえて…というのは難しいので、
先にHTMLとCSSで全体の形を作っておきましょう。

今回サンプル用に作成したページがこちらです。

sample

このHTMLを元に、パーツごとに分割してテーマを作っていきます。

 

ヘッダー、フッターを作る

どのページにも、必ず同じものが表示されているであろうヘッダーとフッター。
これが入るだけで中身がまだ何もなくてもページができた気分になります。

まず、ヘッダー部分のコードを header.php に、
フッター部分のコードを footer.php にコピー&ペーストしましょう。
そして貼り付けたHTMLのコードに、テンプレートタグを当てはめていきます。

 

ヘッダー

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<header>
<nav class="menu>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</nav>
<h1 class="index_ttl">タイトル</h1>
</header>
</div>
<div class="main">



<!DOCTYPE html>
<html>
<head>
<title>
<?php if(is_home()): ?><?php bloginfo('name'); ?>
<?php else: ?>
<?php the_title(); ?>|<?php bloginfo('name'); ?>
<?php endif; ?>
</title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
<div class="container">
<div id="header">
<header>
<?php wp_nav_menu(); ?>
<h1 class="index_ttl"><a href="<?php echo get_site_url(); ?>">タイトル</a></h1>
</header>
</div>
<div class="main">

 

フッター

<div class="foot_bar">
<div class="ft_bar">
<div class="widget">
<ul>
<span class="widgettitle">Category</span>
<li>orange</li>
<li>yellow</li>
</ul>
</div>
<div class="widget">
<ul>
<span class="widgettitle">Archive</span>
<li>1082'13</li>
<li>1082'12</li>
</ul>
</div>
<div class="widget">
<ul>
<span class="widgettitle">New</span>
<li>13/0</li>
<li>13/0</li>
</ul>
</div>
</div>
</div>
<footer>
<div id="footer">
<p>copy right</p>
</div>
</footer>
</div>
</body>
</html>



</div>
<div class="foot_bar">
<div class="ft_bar">

<?php if ( is_active_sidebar( 'widget_area' ) ) : dynamic_sidebar( 'widget_area' ); else: ?>
<div class="widget"><h2>No Widget</h2></div>
<?php endif; ?>

</div>
</div>
<footer>
<div id="footer">
<p>copy right</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

 

文字量が増えたり減ったりして少し複雑になりました。
しかし、これでヘッダーとフッターができたはずです。
index.phpに、<?php get_header(); ?> と <?php get_footer(); ?> だけ記述して見てみましょう。
以下のようにヘッダーとフッターが表示されます。

f:id:BOEL:20160725154038j:plain


お気づきと思いますが、ウィジェットの部分が表示されていませんね。
wordpressの管理画面にも、ウィジェットの編集のメニューは見当たりません。
ここで、functions.php を使います。

以下を、functions.php に記述してみましょう。

 

<?php
register_sidebar( array(
'name' => 'ウィジェットエリア',
'id' => 'widget_area',
'description' => 'ウィジェットエリアです',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
) );
?>

 

この記述をしたあと、worpressの管理画面を見てみてください。
左メニューの「外観」を選択すると、「ウィジェット」の項目が追加されているはずです。
ここで、カテゴリーやアーカイブなど利用したいウィジェットを設定します。
設定したら、もう一度 index.php を見てみましょう。
これで、以下のように設定したウィジェットが表示されます。 

f:id:BOEL:20160725154252j:plain


メイン部分を作る

次はブログのメインになる記事の部分を作ります。
こちらも、最初に作ったHTMLコードを元にテンプレートタグを当てはめていきます。

 

<article>
<h2 class="article_ttl">記事タイトル<span>1082' 13/0</span></h2>
<div class="article_text">
<p>
ここに記事内容
<div class="continuation"><a>more »</a></div>
<p class="hide_txt">
ここに続きの記事内容
</p>
</div>
</article>



<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h2 class="article_ttl"><?php the_title(); ?><span><?php echo get_the_date(); ?></span></h2>
<div class="article_text">
<p>
<?php the_content('more »'); ?>
</p>
</div>
</article>
<?php endwhile; endif; ?>

 

記事の部分はこれで完成です。
真ん中のあたりに、先ほどの一覧で見覚えのないタグが入っていますね。
<?php the_content('more »'); ?>
これは記事(コンテンツ)内容を呼び出すためのテンプレートタグですが、
いわゆる「続きを読む」の文字列をカッコの中で指定することができます。

これで一度見てみましょう。
以下のようにサンプルの投稿記事が表示され、
最初に作ったHTML通りのページができあがりました。 

f:id:BOEL:20160725154304j:plain

 

さて、indexページはできあがりましたが
「続きを読む」で移動した先のページと、メニューの固定ページが真っ白の状態です。

次は「続きを読む」で移動した先の記事のページを編集しましょう。
これは single.php に記述しますが、index.php の中身を丸ごとコピー&ペーストしてしまいましょう。

 

<?php get_header(); ?>
<div class="top_main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h2 class="article_ttl"><?php the_title(); ?><span><?php echo get_the_date(); ?></span></h2>
<div class="article_text">
<p>
<?php the_content('more »'); ?>
</p>
</div>
</article>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>

 

これで、「続きを読む」の先が表示された状態で、ひとつの記事が表示されていれば完成です。
同じテンプレートタグが流用できるのでとても簡単ですね。

f:id:BOEL:20160725154642j:plain

 

次はメニューの固定ページを編集しましょう。
これは page.php に記述しますが、こちらも index.php の中身を丸ごとコピー&ペーストしてしまいましょう。

固定ページのsampleページを見て、タイトルや内容が表示されていれば問題ありません。
日付などがそのまま残っているかと思いますが、不要な要素のタグは消してしまって、CSSなどで好みに調整すれば、固定ページが完成です。 

f:id:BOEL:20160725154616j:plain

 

さて、これでブログが一通りできあがりました。

 

サイドバーを作る

ここまでに作ったのはヘッダーや記事、フッターなどの要素が縦に並んだレイアウトのページです。
次はブログによくあるサイドバーを表示させて、カラム数を増やしてみましょう。

※サイドバーを表示させるためには、各々ブログのレイアウトにあわせた形でCSSの編集をする必要があります。

ここで使うのは sidebar.php です。
サイドバーに表示させるウィジェットの記述は、フッターに使ったものと同じになります。
footer.php に記述したウィジェットの部分を sidebar.php にコピー&ペーストしましょう。

 

<?php if ( is_active_sidebar( 'widget_footer' ) ) : dynamic_sidebar( 'widget_footer' ); else: ?>
<div class="widget"><h2>No Widget</h2></div>
<?php endif; ?>

 

これでサイドバーにウィジェットを表示させるための準備ができました。
index.php の任意の場所に、<?php get_sidebar(); ?> を挿入して見てみましょう。
CSSでの編集が済んだ状態なら、以下のように横に並んで表示されます。

f:id:BOEL:20160725154739j:plain

 

まとめ

いかがでしたか?
PHPが詳しく分からなくても、テンプレートタグを使って意外と簡単にテーマ作成ができたと思います。
今回はブログサイトとして最低限の要素だけを使ってサンプル用テーマを作りましたが、wordpressではもっと多くの機能を追加することができます。
そういった様々な機能を使って、自分の理想のオリジナルテーマに近づけていけることがwordpressの醍醐味だと思います。

 

今回サンプル用に作成したテーマは配信いたします。
テーマ編集の練習などにご活用ください。

sample download

 

vol.51photoshopでここまでできる!ビデオタイムラインのアニメーション

f:id:BOEL:20160701153210j:plain

こんにちは。イラストレーターの西山です。

比較的簡単なショートアニメの作り方をご紹介しましたが、今回はBOELアニメーション「shimeji」をもとに、専門の動画編集ソフトで作るような複雑でカット数の多い動画をphotoshopのビデオタイムラインを使って作る方法をご紹介します。

 

photoshopの使い方に慣れていれば、動画編集ソフトに慣れていない方も比較的簡単に作ることができます。

※今回photoshopのバージョンはCCを使用しています。CS5でもビデオタイムラインは使用できます。

 

ビデオタイムラインでできること

・複数の要素を一度に動かせる

・レイヤーの管理がしやすい

f:id:BOEL:20160701152922j:plain

フレームアニメーションで複数の要素を動かす場合はフレームごとに動きを描く必要がありました。そのためレイヤーが膨大な量になり、管理が大変でした。

しかしビデオタイムラインでは要素ごとにスマートオブジェクトに変換できるようになり、一目で動きを確認できるようになりました。

 

またスマートオブジェクトのため、レイヤーの情報を保つことができます。

ビデオタイムラインに変換してもフレームアニメーションに変換して画像を編集できます。

 

基本的な使い方

f:id:BOEL:20160701152855j:plain

コマ取りで作成した画像をフレームアニメーションでつなげる

まずフレームアニメーションで作成したgifアニメを2つ用意します。

タイムラインウィンドウの右下にある「ビデオタイムラインに変換」をクリックして、フレームアニメーションからビデオタイムラインに変換します。

 

f:id:BOEL:20160701152835j:plain

変換後レイヤーをスマートオブジェクトにする

背景など統合予定のPSDにも共通する画像はスマートオブジェクトに含める必要はありません。

フレームアニメーションで動かしたレイヤー全てを選択、1つのスマートオブジェクトに変換します。

また統合予定のPSDにも同様の処理をしておきます。

 

複数のアニメーションを1つのデータにまとめる

f:id:BOEL:20160701152722j:plain

統合したいPSDにスマートオブジェクトをドラッグ&ドロップします。

レイヤーウィンドウとタイムラインにスマートオブジェクトが表示されます。

これで統合は完了です。

スマートオブジェクトは普段photoshopで画像を編集するのと同じで、レイヤーの順番が上にあるほど画面では手前に表示されます。

そのため、背景は一番下に来るよう調整しましょう。

 

タイムラインを調整する

タイムラインでは、アニメーションを表示させる順番を調整します。

ドラッグしてきたスマートオブジェクトを従来のPSDにあったスマートオブジェクトの次に来るようスライドさせます。

 

最後に再生ボタンを押して、つなぎに問題がないかプレビューを確認します。

つなぎ目に余白ができるときの対処法

再生するとつなぎ目に何も表示されない画像が入ることがあります。

意図していない余白がある時は右下1のバーを右にスライドさせます。

f:id:BOEL:20160701152557j:plain

アニメーションに効果をつける

キャラクターに対して背景を動かしたいときはオブジェクトに効果をつけることで実現できます。

タイムラインからメニュー内の「位置」をクリックし画像を動かす設定を行います。

f:id:BOEL:20160701152519j:plain

1:「時間インジケーター」をタイムラインの左端まで移動させ、ストップウォッチのアイコンをクリックします。

 

2:時間インジケーターを移動させたい時間まで動かします。

移動ツールに切り替えて画像を任意の位置まで移動させます。

エンターを押すと時間インジケーターの位置にキーフレームが追加されます。

 

3:再生して確認します。設定した時間までに画像が移動できているか確認しましょう。

 

細かくキーフレームを作れば左右に限らず様々な位置に動かすことができます。

 

アニメーションを書き出す

映像形式(mp4)で書き出す

メニューバーのファイル>書き出し>ビデオをレンダリングを選択します。

設定を「Adobe Media Encoder」に変更し、「範囲」を全てのフレームにして「レンダリング」ボタンをクリックします。

 

フレームレートについて

フレームレートは1秒間に使用するコマ数を設定するものです。

枚数が多いほど動きは滑らかになりますが、その分ファイルサイズも大きくなります。 25〜30fpsで調整します。

 

gifアニメとして書き出す

フレームアニメーションのgifアニメと同様web書き出しで書き出すことができます。

容量が重く書き出しに時間がかかる場合があるため注意が必要です。

 

まとめ

いかがでしたでしょうか。

ビデオタイムラインを使えば書き足す作業を大幅に減らせるだけでなく、レイヤーを見やすい状態で管理できます。

長編のアニメーションを作る場合は従来の動画編集ソフトと同じくデータ容量やphotoshopが重くなりがちです。

長編を作る際はビデオタイムラインでアニメーションをつけたデータはgifアニメに変換してカットをつなぎあわせると、スムーズに作業ができます。

また、「アニメーションを書き出す」でお話したフレームレートも調整してみましょう。

vol.50メジャーアップデート! 高速化したjQuery3.0の特徴

f:id:BOEL:20160630131642j:plain

 

こんにちは。エンジニアの毛利です。

jQuery3.0がリリースされました。

2.x系からのメジャーアップデートで、マイナーアップデートにはない大きな変更を伴います。

また、今までInternet Explorer 8(IE8)の下位バージョンに対応するための1.1x系とIE9以上、Google ChromeFirefoxSafariをはじめとしたモダンブラウザ用の2.x系2つにわかれリリースされていましたが、マイクロソフトはIE8のサポートを2016年1月12日で終了する方針をたてたことにより、jQueryもIE8以下のブラウザをサポートを打ち切りました。

よって最新版のjQuery3.0はIE9以降のモダンブラウザのみを対象としています。

 

今回はアップデートによる変更点に関連して大きな影響が懸念されている箇所のポイントと、使われているAPIの変更、修正方法をご紹介します。

 

jQuery3.0の利点・改善点

今までjQuery後方互換を優先度の高い事項として開発されていました。

新しいjQuery3.0は軽量化、高速化をコンセプトにして開発が進められているため処理の高速化が図られている他、軽量化を軸としたバージョンが新たにリリースされています。

また、モバイルのアニメーション描画を改善するための「requestAnimationFrame」がAPIをサポートしているブラウザで利用可能となりました。

 

スリムビルド版のリリース

今回のjQuery3.0では通常版の他に、機能を制限し軽量化したスリムビルド版が同時にリリースされています。

ajaxやアニメーションエフェクトなどの機能を削減しています。

また、現時点で非推奨となっているAPIも削除されています。

CSSのみでアニメーションを制御するときやajaxを使う必要が無い場合などはこちらを利用するとファイルの読み込みサイズを大きく削減できます。

 

変更点

変更点の全容は下記サイトから確認できます。

※翻訳サイトなので意訳的な部分がありますが、日本語で解釈できます。

http://qiita.com/fmy/items/345a264a1cf2e2a73f62

 

変更点で表記されている「破壊的な」変更については自身が書いているコードが該当すると動作しなくなってしまうため、修正が必要です。

しかし、自身が書いたコード、プラグインなどから動かなくなったコードを自力で探し、置き換えるのは大変です。

そこで移行ツールを使います。

 

移行ツールによる修正方法

今回バージョンアップのためにjQueryから移行ツールが用意されています。

jQuery Migrate

http://qiita.com/fmy/items/345a264a1cf2e2a73f62

 

jQuery Migrateを利用することによって、今回変更、廃止となり動かなくなってしまうコード該当箇所をConsole上で出してくれます。

また、変更、廃止があったAPIを復元してくれるため、エラーが起こらず意図している動作を実現しながらデバッグすることができます。

 

使用方法

jQuery読み込み記述の直後に書きます。

 

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

 

変更、廃止となりjQuery3.0本体だけでは動かないコード箇所をブラウザのconsole上で表示してくれます。

f:id:BOEL:20160630132016j:plain

console上に表示されたものを1つずつ確認して、jQuery3.0で適切なコードを置き換えていきます。

この過程で引っかかりやすい廃止APIをご紹介します。

 

$(window).load()

$(window).load(function(){})  //廃止コード

ページが読み込まれた後、イベントを実行するタイプの記述で様々なサンプル紹介などでよくみかけるコードです。

このコードの$(window).loadに変更があり、この使い方は廃止となりました。jQuery3.0からはエラーとなります。 上記の廃止コードは次のコードに置き換えることができます。

 

$(window).on("load",function(){}) //代替コード

onを使います。onはさまざまな使い方ができ、任意のイベントをバインドすることができます。

ここではロードイベントをバインドする、ということになります。

このコードは下記のような使い方もできます。

 

$(window).on("load scroll",function(){}) //イベントを複数バインドできる

スペース区切りで他のイベントも複数設定することができます。この場合、「ページの読み込みが完了したとき」と「スクロールイベントが発生したとき」に実行されます。

 

$("selector").bind()

$("selector").bind("click",function(){}) //廃止コード

こちらもサンプルコードやプラグイン内でよく見かけるbindです。

これもonに置き換えることで代替できます。

onはbindが機能拡張して置き換わったような扱いとなっています。

よって書式を維持しながら単純な置き換えで元の動作が可能です。

 

$("selector").on("click",function(){}) //代替コード

 

show() hide() toggle()の仕様変更

今まで、CSSでdisplay:noneを指定し、ある要素をクリックしたらshowで表示させる、などといった表示、非表示処理が可能でした。

しかし、このコードには大きな変更が加えられており、上記の方法では表示非表示を行うことができなくなりました。

上記のような方法を実装する場合はdisplay:noneのクラスを作成し、addClassやremoveClass、toggleClassなどでの切り替えで表示、非表示を制御することを推奨しています。

これらを多用した古いのプラグインやサンプルコードなどはjQuery3.0ではうまく動かない可能性がありますのでjQuery3.0での利用はなるべく避けたほうがよいでしょう。

 

まとめ

手軽かつ直感的に書けるjQueryがメジャーアップデートし、いくつかの変更が加えられました。

これに伴い、よく使っていたり、見かけるコードに変更が加えられましたがプラグインなども豊富で便利なjQueryがより軽量化し機能的に使い勝手がよくなっているので積極的にアップデートすることで画面描画や、パフォーマンス改善が見込めるのではないでしょうか。

バリデーションツールを使えば、比較的簡単に簡単に移行ができると思います。

サイトをよりよくするために、jQuery3.0を導入を検討してみてはいかがでしょうか。

 

参考URL

jQuery3.0

http://qiita.com/fmy/items/345a264a1cf2e2a73f62

jQuery 3.0リリース候補版が登場。jQueryはバージョン3.0に一本化へ

http://qiita.com/fmy/items/345a264a1cf2e2a73f62

【翻訳まとめ】jQuery 3.0 アップグレードガイド

http://qiita.com/fmy/items/345a264a1cf2e2a73f62

vol.49 子どものUX 子どもを惹きつけるデザインのポイントとは

 f:id:BOEL:20160608194036j:plain

 

こんにちは。デザイナーの野中です。

突然ですが、みなさんは携帯電話やスマートフォンをいつから使いはじめましたか?
近年スマートフォンタブレット端末の普及が急速に進み、
幼児期からデジタルコンテンツに触れる時間(スクリーンタイム)が増えているといわれています。

米国小児学会(APP)が2013年に発表したガイドラインでは、「子どものテレビやゲームなどの視聴時間は1日2時間まで、2歳児未満の乳幼児であれば視聴しないほうがよい」とされていました。

ですが2015年のガイドラインでは、「問題なのは時間ではなく、コンテンツの質である」と改訂されています。

それでは、乳幼児期から身近にPCやスマートフォンタブレットなどの端末がある現代の子どもにとって、どのようなコンテンツ内容・デザインが「質がよい」とされるのでしょうか。

子どもの特徴をふまえながら、
子ども向けデザインと大人向けデザインではどういった点が違うのか見ていきましょう。


 UX(ユーザーエクスペリエンス)という考え方

子どもは遊びをとおして学び、成長していきます。
子ども向けのコンテンツを制作する際、コンテンツに触れた体験がダイレクトに成長過程につながっていくことを意識して作る責任が制作側にはあります。

 

そこで重要になってくるのが「UX(ユーザーエクスペリエンス)」です。
UXとは「ユーザーが製品・サービスを通じて得られる体験」を指します。

 

たとえば子どもが野菜の名前を覚える知育アプリで遊ぶとき、
アプリを通して野菜の名前を覚え、嫌いだった野菜が食べられるようになるかもしれません。
子どもにとって好ましいデザインや操作性はアプリ自体を楽しませることを前提としてコンテンツを軸とした一連の体験や感情はUXに含まれています。

 

質の高いUXを子どもたちに届けるためには、ターゲットとなる子どもについての深い理解と考察が必要です。


大人とは異なる子どもの特徴

ここから、具体的な子どもの特徴を見ていきましょう。

1.子どもは段階的に成長していく

f:id:BOEL:20160608194238j:plain

子どもは短い期間の中でもめざましく成長していきます。
教育分野の先駆者であるスイスの心理学者ジャン・ピアジェの認知発達理論によると、子どもの成長段階は次の4段階に分けられます。

 

・感覚運動段階:誕生~2歳 
自分と周囲のモノが別々であることをしだいに理解する。

 

・前操作段階:2~6歳
自分の視点からのみ、物事をとらえるようになる。

 

・具体的操作段階:7~11歳
少しづつ論理的に考えられるようになる。

 

・形式的操作段階:12歳以上
論理的に物事を考え、抽象的な概念も理解できるようになる。

 

子どもの成長には個人差がありますが、12歳ころになるまでに少しづつ論理的な思考能力を身につけ、アイコンやシンボルなどの抽象的な概念も大人と同じように認識するようになります。

 

2.大人より手先が不器用

f:id:BOEL:20160608194317j:plain

成長過程にある子どもは、大人ほど手先が器用ではありません。
指先を使った細かい動作ではなく、子どもでも簡単にできる動きを考える必要があります。

難しい動き:フリック(払う)、ピンチ(つまむ)、タップ

やさしい動き:スワイプ(滑らせる)、グラブ(つかむ)、スマッシュ(叩く)

 

3.マウスオーバー時の音やアニメーションなど、自分の動作へのフィード・バックを求める

f:id:BOEL:20160608194505j:plain

ふだん私たちがアプリを使っていると、エラーや問題が発生したときに警告として音が鳴ったり画面の色が変わったりすることがあります。
これは特定の目的を持ってアプリケーションを使っている大人にとっては、自分のミスを教えてくれる重要な機能です。
一方で、アプリの操作そのものを遊びとして楽しんでいる子どもは、1つ1つのアクションに対するフィードバックを好みます。
メールチェック時にボタンをタップするだけで毎回音が鳴ったり、キャラクターが飛びだしてきたりと、
大人にとっては必要性の薄い仕掛けも子どもには喜ばれます。

 

4.保護者の視点も意識する

f:id:BOEL:20160608194532j:plain

子ども向けコンテンツではコンテンツを使うのは子どもですが、購入するのは保護者です。
内容が子どもにとって魅力的でも、保護者が「子どもには使わせたくない」と判断する場合もあります。
そのため、保護者の視点も考慮してコンテンツ内容を考え、デザインしていく必要があります。

 

おすすめ知育アプリ

数多く配信されている子どもの知育アプリの中でも、
おすすめのアプリを3つご紹介します。

 

タッチ!あそベビー

f:id:BOEL:20160608202516j:plain

waochi.wao.ne.jp

 

・おすすめ年齢0~3歳

音・色・形の変化を通して、日常モノへの興味を育むアプリです。
Google Playの2015年ベストアプリの一つとして選ばれています。

f:id:BOEL:20160608202602j:plain

電話の番号を押してみたり、目玉焼きを焼いてみたり、タンポポの綿毛をとばしてみたり、すべての操作は乳幼児でもタッチするだけで簡単にできるようになっています。

 

画面を見てみると、色づかいは子供でも認識しやすいはっきりとした色ですが、タッチで操作する部分が目立つよう背景はシンプルに作られています。
また、一つの操作ごとに効果音が鳴ったり文字が飛び出してきたり変化があるため、アプリの内容がわからない乳幼児でもタッチする操作そのものを楽しむことができる作りになっています。


変化があるごとに「変わったね」「音が鳴ったね」などと保護者が反応することで、
操作している子どもはより達成感がわき、親子で楽しむことができます。

 

Mr.shape(ミスターシェイプのタッチカード)

f:id:BOEL:20160608202618j:plain

 

www.g-mark.org


・おすすめ年齢4~6歳

絵カードを触ることで、ものの仕組みや名前、色、形を自然に学ぶことができるアプリです。
2013年度にグッドデザイン賞を受賞しています。

 

まずトップ画面を見てみると、ボタンが動いています。
とくに乳幼児は画面上のアイテムが3次元ではなく全てフラットに見えてしまう特徴がありますが、動きを加えることによってボタンが背景とは区別され、子どもに触りたいと思わせる仕掛けになっています。

 

f:id:BOEL:20160608202637j:plain

「あそぶ」ボタンからプレイをはじめると、遊び方や操作の説明がないことに気づきます。
決められた手順やステップもないため、まだ字が読めない幼児でも好きなように遊びはじめることができます。
さらに、絵カードでウクレレを弾いていたと思ったらいきなり弦が切れたり、スイカの中からカブトムシが出てきたりと、大人もにも子どもにもちょっとびっくりな仕掛けが散りばめられています。

 

Toca kitchen 2

f:id:BOEL:20160608202648p:plain

 

tocaboca.com


・おすすめ年齢 5歳〜

アメリカで親が選ぶアプリ賞の受賞歴も多いToca Boca社から配信されているお料理アプリです。
Google Playの2015年ベストアプリの一つとして選ばれています。

 

このアプリのおもしろいところは、料理の手順にルールがないところです。
三人いるキャラクターから一人選ぶと、そこからの調理時間はプレイヤーの自由。
冷蔵庫にある好きな食材をフライパンで焼いたりミキサーにかけたり、意外な組み合わせの調味料をかけたりもできます。
作った料理の出来ばえによって、食べたときのキャラクターの反応も違うので、毎回どんな顔をするか試してみたくなる仕組みになっています。

 

f:id:BOEL:20160608202712p:plain

f:id:BOEL:20160608202718p:plain

アプリ画面を見てみると、操作できない背景の要素(壁側に並んでいる調理器具、時計、窓など)が操作のメインとなるアイテム(食材、調理器具、キャラクター)と同じくらい作りこまれています。


こうしたにぎやかなデザインは画面上のすべての要素が平面的に見えてしまう乳幼児にとっては複雑なので、特別な区別(大きさが目に見えて異なる、重要な部分だけ色付き、触らなくても動いているなど)がなくても要素の重要度がある程度判別できる5歳児以降におすすめです。


5歳頃になると、ルールに沿うよりも自分のやり方で遊びたがる傾向があるので、好きなように奇想天外な料理を作れる点でもおすすめです。


おわりに

いかがでしたでしょうか。
子どもにとって遊びであり学びにもなるデジタルコンテンツ。
単に大人向けのデザインを簡略化すればよいのではなく、子どもの行動を綿密に観察して作られていることがわかります。

 

子どもたちに楽しんでもらえることはもちろん、成長への影響にも十分に考えて質の高いUXを届けられるよう、デザインを工夫していきたいですね。

 

参考

APP(米国小児学会)の子供のスクリーンタイムの調査

lifehacker.com


APP(米国小児学会)の新たなガイドライン

www.lifehacker.jp


デブラ・レヴィン・ゲルマン、『子どものUXデザイン』ビー・エヌ・エヌ新社 2015年

山崎和彦 他『エクスペリエンス・ビジョン』丸善出版 2012年
『こどもとデザイン』ビー・エヌ・エヌ新社 2015年

 

タッチ!あそベビー | 子ども向け知育アプリ『ワオっち!』シリーズ

スマホ/タブレット用アプリ [Mr.shapeのタッチカード] | 受賞対象一覧 | Good Design Award

Toca Kitchen 2 | A new way to play | Toca Boca

vol.48 リスティング広告を始めるなら Google AdWords

f:id:BOEL:20160606124657j:plain

ディレクターの白子です。


リスティング広告」という言葉を聞いたことはありますか。

Yahoo!Googleなどの検索エンジンであるキーワードで検索した際に、そのキーワードの検索結果に関連して表示される広告です。

検索結果の上の方や右の方に「広告」と出ているテキストやバナーのことです。

f:id:BOEL:20160606124729j:plain


インターネット環境が広く普及しWebの閲覧が世界的に標準となり、インターネットを通じたビジネスが主軸となる企業が多くなってきています。
そのためリスティング広告を始めよう、利用しようと思っている方は年々増えてきています。


今回はリスティング広告の中でGoogle AdWordsアドワーズ)をご紹介します。

 

Google AdWordsとは

Google AdWordsアドワーズ)は、Googleの検索結果ページに検索キーワードと関係性が高い広告を表示することができます。


広告主が指定したキーワードの検索結果に広告主のサイトやコンテンツ、商品などの広告が掲載されるので、サービスや取り扱いのある商品を探している人に限定して広告を表示できます。
また広告配信にかかる費用は、実際に広告テキストや広告バナーが、ユーザーにクリックされたときにだけ発生します。


検索結果に表示されているだけでは費用は発生しません。
検索ページの上位位置に表示され、費用も自分でコントロールできるため、注目度や費用対効果が高いサービスとして、さまざまななビジネスシーンにおいて利用することができます。


これから以下の点についてご紹介していきます。


1.Google AdWordsのアカウント作成


2.キャンペーン作成


3.広告グループ、広告の内容の作成


4.便利な機能「キーワードプランナー」


※この記事は2016年6月3日時点の情報です。

 

Google AdWordsのアカウント作成

◎事前準備

Google AdWordsを始めるには「Googleアカウント」が必要です。事前にGoogleアカウントを登録しましょう。
Google AdWords用に専用アカウントを作成してもよいですし、今まで使っているアカウントを使用しても構いません。

 

◎申し込み

Google AdWordsのページにある「今すぐ開始」をクリック


http://adwords. google.co.jp


◎アカウント情報入力


Googleアカウントで使用していないメールアドレスでアカウントを作成する場合は、


[他のサービスを利用していません。]を選び、使用したいメールアドレスとパスワードを入力し、画像に表示されている文字を入力して、[アカウントを作成する]をクリックします。


f:id:BOEL:20160606124912j:plain

 

1. Googleアカウントのメールアドレスとパスワードを入力し、「次へ進む」をクリック。
2. 国・地域は「日本」、タイムゾーンは「(GMT+9:00)東京」、通貨は「日本円(JPY\)」を選択し、「続行」をクリック。
3.「AdWordsアカウントにログインします」をクリック。

AdWordsアカウントが作成できると、Googleから登録アドレスにメールが届きます。


※メールが届かなかった場合は、入力したメールアドレスに誤りがある能性があります。

 

Googleアカウントで使用しているメールアドレス以外でアドワーズアカウントを作成した場合は、 Googleから届いたメールのURLをクリックすることで、メールアドレスの認証を行うなど、手順が異なるためページの案内に沿いましょう。


◎お支払い情報入力


アカウントが作成でき、Adwordsにログインできたら右上の歯車アイコン「設定」から「料金」をクリックし、お支払い情報を設定します。

f:id:BOEL:20160606124947j:plain


お支払方法を前払い(銀行振込、クレジットカード払い、コンビニ払い)、もしくは後払い(クレジットカード払い)から選びます。


前払いから後払い、また後払いから前払いへ変更することはできません。


(どうしても変更したい場合は、一度アカウントをキャンセルする必要があります)


・前払い


事前に支払った料金から広告料金が差し引かれます。


(支払い方法のいずれの場合でも、アカウント 残高が不足すると自動的に広告掲載が停止します)


支払い方法を銀行振込、コンビニ払いに指定すると、入金確認に1〜3営業日かかります。広告をすぐ出稿したい場合はクレジットカード払いを選択しましょう。


・後払い


広告費が発生した後に請求が行われます。

※「課金」そのものは、クリックごとに行われます。
支払い方法はクレジットカード払いのみです。

すぐに広告を出稿したい場合、後払いを選択しても、すぐ出稿できます。


請求は30日後、もしくはアカウントの支払い上限に達した時点のいずれか早い方で行われます。


広告を出稿する<キャンペーン作成>

実際に出向するために広告を作っていきます。

広告作成の一連の流れは以下になります。


 

1. キャンペーンを作成


2. 広告グループを作成


3. 広告の内容を作成


4. 広告の出稿


「キャンペーン」「広告グループ」はサイトの構成に合わせ作成していきましょう。


例えばキャンペーンはサイトのグローバルメニューで使用している名称、広告グループはその中でカテゴリ別の名称となります。


今回は作成が一番身近な「テキスト広告」を作成していきます。


◎キャンペーンを作成


・上のキャンペーンタブをクリックします。

f:id:BOEL:20160606125111j:plain


以下のようにタブが表示されます。キャンペーンのタブをクリックします。

 

f:id:BOEL:20160606125126j:plain

・タブの下の「+キャンペーン」の赤いボタンをクリック。


キャンペーンタイプの「検索ネットワーク(ディスプレイネットワーク対応)」を選択します。


この時点でどのキャンペーンタイプを選択しても、次の画面で再度選択し直すことができます。

f:id:BOEL:20160606125147j:plain

◎キャンペーン設定

以下の項目を入力します。


・キャンペーン名


自分が分かりやすい名前に設定。

あとでキャンペーンを増やしたとき、どのキャンペーンがどの広告内容かが判別しやすくなります。


・タイプ 


今回は「検索ネットワーク(ディスプレイネットワーク対応)」を選択。

f:id:BOEL:20160606125712j:plain


・地域


広告を表示する地域、または表示しない地域を選択。


例)サービスなどを首都圏のみで展開している場合、そのほかの地域には広告を表示させないように設定できる。


・ターゲット言語
日本語を選択。

例)日本にいる人に広告を出すなら日本語を選択、日本にいる英語圏の観光客向けに広告を出すなら英語を選択。


・入札戦略


自分で上限クリック単価を変更するため「個別クリック単価」を選択。


・デフォルトの単価


広告がクリックされたとき「1クリックに最大何円をかけるか」を設定。


・予算


1日にかける予算。
月予算は設定できません。日予算×30を計算し、月予算がだいたいどれくらいかを把握して、日予算を決めます。


・広告表示オプション


広告の内容、サービスなどによりオプションを設定するかどうかを選択。


以上の項目を入力したら「保存して次へ」をクリック。これでキャンペーンの設定は完了です。

 

広告グループ、広告の内容の作成

次に「広告グループ」また「広告の内容」を作成します。


・広告グループの名前
・広告見出し、広告文1・2、表示URL、最終ページURL


表示URLは広告が表示されるときに一緒に表示されるURL、最終ページURLは広告を押した後にリンクするページのURLです。この2つは違うURLでも設定できます。

f:id:BOEL:20160606125325j:plain


・キーワード


設定したキーワードが検索されると、広告が表示される仕組みです。

キーワードは2〜3くらいの複数の単語を1つのキーワードとして設定します。


最初に設定するものでも10〜20個を設定しましょう。


キーワードを設定するときに「マッチタイプ」を設定することができます。


 

マッチタイプとは、キーワードが検索されたときに、どこまで設定したキーワードと一致させるかを設定するものです。


・部分一致(デフォルトで設定されているため特に設定なし)

設定キーワードと検索キーワードが完全に一致しなくても広告が表示されます。より多くのユーザー向けに広告を表示したいときに選択します。

 


・完全一致(半角[ ]でキーワードを囲む:例)[BOEL サイト 制作])


設定キーワードと検索キーワードが完全に一致した場合のみ広告が表示される。広告を表示するユーザーをより正確にターゲットを絞ることができる。


 

・フレーズ一致(半角” ”でキーワードを囲む:例)"BOEL サイト 制作")


設定キーワードと検索キーワードのキーワードの順序が同じ場合、検索キーワードに他の単語が含まれていても広告が表示される。


以上の項目を入力して「広告グループを保存」をクリックします。
これで広告グループの設定は完了です。


キャンペーンタブに戻ると左メニューの「すべてのキャンペーン」に、今回設定したキャンペーン名が表示されます。


キャンペーンが「有効」になっていれば広告が配信されます。 必要に応じて「一時停止」「削除」を選択することもできます。

f:id:BOEL:20160606125430j:plain


便利な機能「キーワードプランナー」

f:id:BOEL:20160606125445j:plain


新しいキーワードや広告グループを作成する際や、既存のキャンペーンを拡充させる場合に役立つ無料のツールです。

Google Adwordsのタブ「運用ツール」からでも利用できます。


https://adwords.google.co.jp/keywordplanner


新しいキーワードを検索して候補を取得できたり、広告グループの候補を作ってくれます。
また推定入札単価や競合性、検索ボリュームなどを表示してくれるため広告を新たに作成する際や、既存の広告を質のよいものにするために役立ちます。


キーワードプランナーで検索したキーワードや広告グループはcsv形式でダウンロードできます。

 

おわりに

いかがでしたか?


今回はGoogle Adwordsで広告を出稿するにあたって必要最低限のことをご紹介しました。


「広告を出稿しても、費用がかかるのは広告がクリックされたとき」というのが始めやすい最大の点かと思います。


今回書いた以上の機能がAdwordsではできます。すごく便利な機能がたくさんあり、正直使いこなせていない私は日々勉強中です。

Google Adwordsの広告を出稿に際し、この記事がお役に立てれば幸いです。

vol.47 游ゴシックの魅力と和文書体の歴史

vol.43 動画コーデックをマスターしよう

こんにちは。デザイナーの寺田です。

今回は「游ゴシック」の魅力と和文書体の歴史についてご紹介します。

游ゴシックはここ最近、Webフォントとして使用しているサイトをよく見かけます。 BOELのサイトも最近「Noto Sans」から「游ゴシック」に変更しました。

 

MacWindowsの標準フォントとしてインストールされています。 そのため、外部からフォントを呼び出すよりもサイトの表示スピードを早く表示することができます。 Windows 8.1から配布され、2015年10月のWindows 10よりシステムフォントとして採用されました。 なぜ「游ゴシック」が綺麗に読みやすいフォントとして使用されるのか分析をしています。 「游ゴシック」の魅力を紹介する前に、和文書体の歴史からご紹介します。

いくつ知ってる?和文書体の分類

和文書体の分類をみなさん、いくつ知っていますか。

明朝体」や「ゴシック体」の2つはよく耳にすると思いますが他は、頑張って「教科書体」がでるかでないかでした。

 

大きく7種類に和文書体を分類することができます。

明朝体

・ゴシック体

・楷書体(かいしょたい)

・教科書体

隷書体(れいしょたい)

宋朝体(そうちょうたい)

・篆書体(てんしょたい)

書体の特徴と違い

明朝体

・10世紀中国の木版印刷(彫刻)の分業化によって生まれた近代的な書体

・横画(よこかく)※1の右端に三角状のウロコがある

・筆で書いた時の終筆での止めを形にしている

・縦画(たてかく)※2が横画より太い

 ※1:漢字の横の線のこと

 ※2:漢字の縦の線のこと

 

◎ゴシック体

・ウロコがない

・縦画(たてかく)も横画(よこかく)も同じ太さに見えるように設計されている書体が多い

・起筆や終筆の先端が角張っている「角ゴシック体」と丸みを帯びている「丸ゴシック体」にわかれる

 

◎楷書体(かいしょたい)

・7世紀ごろに中国に現れた「真書体」の流れから来ている

・毛筆による楷書体の名筆を手本に設計された書体

・線は柔らかく、縦画(たてかく)と横画(よこかく)の太さの差が少ない

・起筆は斜めで、右角は軽く止められ、払いはゆったりとして、終筆は軽く抑えられている

◎教科書体

・中国の楷書体の毛筆による勢いを抑えて、日本で教育用図書のため設計された書体

・毛筆の穏やかな動きが様式化されていて、均質で明るく明瞭な書体

・線は柔らかく、縦画(たてかく)と横画(よこかく)の太さの差が少ない

隷書体(れいしょたい)

・篆書体(てんしょたい)から発展し、紀元前3年以降の中国で整えられた書体

・中国の国家標準書体として、約800年使われ民衆化した

・竹簡(ちくかん)や木簡(もっかん)に書かれ、限られたスペースに多くの文字を書くために文字が平べったくなった

・横画(よこかく)の終筆部分に見られる波のようにうねる「波磔(はたく)」がある

宋朝体(そうちょうたい)

・17世紀の清から現れた木彫りの特徴を残す書体

・鋭く彫った造形を持つ

・横画(よこかく)はやや右上りで、はらいが鋭い

◎篆書体(てんしょたい)

・紀元前8〜9世紀中国の戦国時代から現れた象形文字的な要素が濃厚な書体

・曲線が絡み合い、線の太さの差がない

象形文字的な「大篆(だいてん)」と、大篆(だいてん)が簡略化された「小篆(しょうてん)」に分けられる

・「小篆(しょうてん)」は奏時代に公共の文字として規格化される

 

書体の分類の7つをご紹介しました。
7つを比べると「ゴシック体」がシンプルな書体であるとわかります。
こらからは「游ゴシック」の背景についてご紹介します。

游ゴシックは游明朝と一緒に使うことを想定して作られた

游明朝体

2002年に游明朝体が発売されました。字游工房初の独自書体です。

コンセプトは、新しい本格的な本文明朝を作り、藤沢周平の小説を組める書体を基本しました。

そこで、活版印刷に立ち返ることにしたそうです。

長文縦組みに適合し、ベタ組みを基本としました。

伝統的な形を継承しつつ、抑揚のあるしっかりしたものを目指しました。

仮名は秀英書体をベースにデザインをしています。

字游工房の設立メンバーさんの鈴木勉さんが制作をしていましたが病に倒れ、途中から鳥海修さんと字游工房の社員によってつくられました。

 

◎ちょっと横道。「ベタ組み」って?

ベタ組みとは、文字の全角に当たる正方形の枠(ボディ)に隙間なく並べて構成する組み方のことです。

このボディが正方形であることで日本語は、縦にも横にも組むことが可能になっています。

 

◎游ゴシック

2008年に発売されました。

長文でも読みやすいことをコンセプトに、游明朝をベースに游明朝と一緒に使うことを想定して作成されました。

英数字はFranklin Gothicを手本にデザインされています。

こぶりなゴシックとよく似ていますが、游ゴシックはすべての角が丸くなっており、より大人のデザインになっているそうです。

 

スタイリッシュかつ暖かみを与える游ゴシックを分析

今回、游ゴシックとNoto Sans Japaneseを比べて、游ゴシックを分析します。

Noto Sans JapaneseはGoogleAdobeが共同に開発したフォントです。

世界のあらゆるフォントをサポートすることを目標に作られました。

フォントウェイトの数が多く、使いやすいフォントです。また、無償で配布されています。

 

游ゴシックとNoto Sans Japaneseを比べてわかったことは4点あります。

 

・ゴシックだけど、角に丸みがある(ウロコに似た丸みを持つ)

・独特なはらいの形を持っている

・他の文字よりカーブの丸みが緩い

・他の文字より余白がコンパクト

・ゴシックだけど、角に丸みがある

起筆部分にウロコのような丸みがあります。ウロコのような丸みを入れることで、ゴシック体にも関わらずどこか暖かみを与えていますね。

Noto Sansはウロコのような丸みをつけず、角張り少し無骨な印象です。

 

・独特なはらいの形を持っている

終筆時のはらいのような形をしています。線の中央部分が少しえぐれていますね。

Noto Sansも少し終筆部分がえぐられているように見えますが、よくよく目を凝らしてみないとわからない程度です。

終筆部分の塗りを少なくすることで線が鋭く見え、シャープな印象を与えます。

 

ここまでは、游ゴシックって明朝体の形を継承しているゴシック体なんだ。と感じました。

残り2つを細かく見ていくとなぜ游ゴシックがスタイリッシュな印象を与えるのかがわかるとおもいます。

 

・他の文字よりカーブの丸みが緩い

これは「ラ・シ・フ」を見てみましょう。

Noto Sansに比べ、カーブが緩いです。

丸みを出す部分を直線的にすることにより、エッジの効いた印象を与えています。

ゴシック体が丸みをつけないところに丸みをつけ、丸みの出す部分を直線的にするなんて、ギャップが激しいです。

 

・他の文字より余白がコンパクト

これは「コ」を見てみましょう。

游ゴシックは他の文字より、小さめに作られていることもありますが、「コ」に注目すると 「コ」の中の余白がNoto Sansよりも小さいのがわかります。

白の空間が小さいため、ひとつの文字がコンパクトでシャープに見えます。

おわりに

いかがでしたか?

和文書体の歴史や游ゴシックのコンセプトを取り上げました。

欧文書体については、前回のTIPS「vol.37識別性、可読性の高いGill Sansの歴史と特徴」と「vol.1古くから愛されるフォント“TRAJAN"の魅力」で取り上げてましたが、 和文書体についてあまり考える機会がありませんでした。

みなさんはどうでしょうか。

当たり前ですが気づいたことは和文書体は本来、縦組みを想定して作られているということです。ですが、縦組みと横組みどちらも綺麗に見ることができます。それは、日本の書体デザイナーがフォントの使うシーンをよく考えて制作しているからだと感じました。

この記事がデザイン制作の参考になればとおもいます。

 

参考サイト

http://www.macotakara.jp/blog/report/entry-21860.html

http://n-t-n.jp/category-01/009.html

vol.46夏の伝統色と文様

f:id:BOEL:20160524125911j:plain

こんにちは。イラストレーターの西山です。

新緑の若葉の季節になりました。

仕事でも季節に合わせてデザインやイラストを作ることがあります。飲料やアパレル系のwebサイトを見ても春から夏らしい雰囲気になっています。

 

今回は夏をあらわす日本の伝統色や文様、夏にぴったりの配色をご紹介します。

 

夏にまつわる色、夏を感じさせる色とは?

日本では自然の色が伝統色に深く関係しています。夏といえばどんなイメージを想像しますか?

真夏の太陽に照らされたようなビビットな色だけではありません。暑さを避けるように涼しげな色を使うこともあります。

夏といっても「暑さ」「涼しさ」など印象が分かれます。

どちらも夏のイメージとしてぴったりですね。

 

次は夏の暑さや涼しさを色で表現する方法をご紹介します。

 

夏の暑さを感じる伝統色

夏の強い日差しによって、花など高い彩度の色はより鮮やかに見えます。夏の花や植物からとった色をご紹介します。

f:id:BOEL:20160524125754j:plain

 

配色例

日本では重色(かさね色)という、衣装を重ねて着るときに季節の色を参考にしていました。

重色(かさね色)をそのままデザインの配色として使用するには色同士の彩度が強いため扱いづらい場合があります。

この場合は彩度対比の効果を考えて配色します。

 

彩度対比とは彩度の異なる色が影響しあい、色の鮮やかさが変わって見えることです。

彩度が高い色はより鮮やかになるのに対し、彩度が低い色はよりにぶくくすんで見える対比効果です。

彩度の高い色がよりはっきり見えるため、さし色などポイントで使用すると効果的です。

また、白を組み合わせることで夏の日差しを表現できます。

f:id:BOEL:20160524130002j:plain

 

参考サイト

f:id:BOEL:20160524130018j:plain

ANA鳥取美人物語」

http://www.uttori-tottori.jp/#

 

f:id:BOEL:20160524130028j:plain

「御菓子所 泉寿庵|株式会社 いづみや本舗」

http://www.1238h.com

 

涼しげな伝統色

暑いときほど冷たい海や水、強い日差しをさえぎる木など寒色をイメージしたりしませんか?

涼しげな色というと青色のイメージがありますよね。

その他に若竹色(わかたけいろ)や小鴨色(こがもいろ)を使った高原の夏を思わせる配色をご紹介します。

f:id:BOEL:20160524130101j:plain

 

配色例

全体を寒色系にまとめて涼しさを出したり、白を加えて清潔で爽やかな印象になります。

f:id:BOEL:20160524130123j:plain

f:id:BOEL:20160524130128j:plain

 

参考サイト

飲料系のサイトでは涼しげな色をグラデーションさせて清涼感を出しています。

 

f:id:BOEL:20160524130321j:plain

「冷やして愉しむ 夏の日本酒 「日本酒がうまい!」推進委員会」

http://www.ozeki.co.jp/reisyu/

 

f:id:BOEL:20160524130329j:plain

「綾鷹(あやたか)」

http://www.ayataka.jp

 

写真から色を抽出する

夏に撮影した写真から色を抽出するのもよいかもしれません。 写真から抽出する際は実際にスポイトツールでとった色と、実際に目で見た色を比較すると 写真よりも彩度が高くなったり、同じ色に見えない場合があります。 その際は実際に目で見て調整します。

f:id:BOEL:20160524130346j:plain

 

夏ならではの文様

夏の色と組み合わせて風物詩である文様)を一緒に配置すると夏らしさがさらに際立ちます。

今回は金魚など水辺の生き物の文様をご紹介します。

 

麻の葉文(あさのはもん)

麻の葉を連想することから名付けられた模様です。

まっすぐに伸び成長する縁起物として古くから親しまれ、現代でもwebサイトや商品のパッケージに多く使われています。

シンプルな幾何学文様で構成されており、着物のように全体に敷き詰めても落ち着いた印象を与えます。

f:id:BOEL:20160524130653j:plain

f:id:BOEL:20160524130718j:plain

「和果ごこち 日向夏サイダー」

https://www.dydo.co.jp/corporate/news/2015/150318.html

 

青海波(せいかいは)

自然の波を意匠化した文様です。

古くから雅楽の装束や工芸品に用いられる伝統的な文様です。

麻の葉紋と同じく幾何学的な文様は背景やちょっとしたアクセントとして使用できます。

f:id:BOEL:20160524130727j:plain

f:id:BOEL:20160524130730j:plain

「組子文様デザイン 青海波 日本伝統装飾|組子のタニハタ」

http://www.tanihata.co.jp/monyou/seikaiha.htm

 

金魚文(きんぎょもん)

模様としての歴史は浅いですが、華やかな姿が人気の高い文様です。

一匹だけでも作品にインパクトが出るだけでなく、流水や水草と合わせて涼しく見せられます。

f:id:BOEL:20160524130800j:plain

f:id:BOEL:20160524130803j:plain

Web Designing 2012年7月号

http://book.mynavi.jp/wd/2012/07.html

 

朝顔文(あさがおもん)

夏に咲く代表的な花です。浴衣や着物の文様として使われることが多く、暑さをしのぐアイテムや涼しげなデザインの中に使用されます。

f:id:BOEL:20160524130818j:plain

f:id:BOEL:20160524130824j:plain

「染の安坊 通販店(手ぬぐい 朝顔更紗 色)」

https://www.anbo.jp/shop/

 

紫陽花文(あじさいもん)

紫陽花は雨のイメージを連想させ、涼しげな印象を与えます。

暑い日に用いるグッズの柄としても多く使われます。

f:id:BOEL:20160524130846j:plain

 

f:id:BOEL:20160524130858j:plain

「nugoo 【拭う 鎌倉】 本染め手拭いの通販ページ(あじさい小道 折りたたみ日傘)」

http://nugoo.hd.shopserve.jp

 

まとめ

いかがでしたでしょうか?

日本の身近な景色から生まれた伝統色だけに、季節の微妙な変化にも対応した色が揃っています。 浴衣や着物も季節のものを文様とともに表しているので、配色の参考になります。 また身近なものにも伝統色を使ったものが増えているため、伝統色を使ったデザインやイラストを作る楽しみが増えますね。

 

出典:和柄商用フリー素材【wargo pattern】

出典:粋屋-日本の伝統文様と伝統色

出典:ANA鳥取美人物語

出典:大阪のお土産は御菓子所 泉寿庵|株式会社 いづみや本舗

出典:冷やして愉しむ 夏の日本酒 「日本酒がうまい!」推進委員会

出典:http://www.ayataka.jp

出典:ニュースリリース|企業情報|ダイドードリンコ

出典:組子文様デザイン 青海波 日本伝統装飾|組子のタニハタ

出典:Web Designing: 2012年7月号

出典:染の安坊 通販店

出典:nugoo 【拭う 鎌倉】 本染め手拭いの通販ページ

参考:和の用語の全てを集約した総合着物辞書 - きもの用語大全

参考資料:伊達千代「配色デザイン見本張」

参考資料:佐野 敬彦「日本の配色