vol.41 ハンバーガーボタン実装で学ぶJSの基礎
こんにちは。デザイナーの寺田です。
Webサイトでよくみる三本線のメニューボタン。
海外でハンバーガーに見えると言われ 「ハンバーガーボタン」という名前になっています。
「ハンバーガーボタン 実装」で検索すれば ソースを公開しているサイトはヒットしますが、
ソースの中身を理解していないと実装しても不具合が出たり、 そもそも動きが実現できないことも。
今回は、Webサイトのメニューとしてよく使われる
ハンバーガーボタンをもとにJSの基礎をご紹介します。
デザイン上で長所と短所
◎長所
メニューの内容をWebサイト上に表示させなくとも、コンテンツリンクを実装できるハンバーガーボタンは、画面の表示領域を広くもつことができます。
そのため、ゆったりとしたデザインや大胆なレイアウトをスマートフォンでもできることが魅力です。
◎短所
コンテンツリンクを押すために1動作増えたことから、ユーザーエンゲージメントが半減したという記事もあります。
そのことは、Webサイトのユーザー離脱へとつながる可能性が高まります。
（ユーザーエンゲージメントとは、実際にアクションが取られたかどうかの指標。）
日頃、サイトに慣れ親しんでいるユーザーはハンバーガーボタンを認識していますが、 使用頻度の低いユーザーにとってはメニューを押すのに 1回動作が増えることは無意識的にストレスを感じているのかもしれないです。
作るサイトのターゲットによって、ハンバーガーボタンを使用することが合っているのかは考える必要があると思います。 ハンバーガーボタンだけでなく、デジタルの技術やWebの開発の進化が進んでいった際に、 サイトをつくる側の考えとつかう側の考えにすれ違いがないのか考えることが 最適なUIになると考えています。
苦労した下積み時代から、JS全盛期へ
JavaScriptの誕生は「1995年」。
意外と昔からある技術です。
1996年にマイクロソフトのInternet Explorer 3.0に搭載され、普及しました。
ですが、当初はプログラミングの知識がなくても手軽に始められる言語ということから、 素人が使うものとして扱われました。
また、無駄な動きを入れてページの読み込みを遅くするものとして敬遠されていたそうです。
Googleが2005年にGoogle MapでAjaxを使用。
ページの再読み込みをすることなく、Webサイト上で自分の位置が リアルタイムに移動する機能は多くの人が驚きました。
Ajaxを通してJSが注目され始めました。
現在、手軽にちょっとした動きをつけられたり、
簡単に面白いことができるJSはWebサイトで必ず使用されている言語ですね。
まずソースを見てみよう
今回はボタンを押したら、メニューが順に表示されるハンバーガーボタンを実装します。
※HTMLとCSSの基本的な知識があることを前提に説明を進めます。
jQueryも使用しているためこちら（jQueryサイト）からソースのダウンロードをお願いします。
今回JSで記述する内容はこれだけです。
$(document).ready(function() {
$(".menu-trigger").click(function () {
$(this).toggleClass("active");
$(this).next().toggleClass("onanimation");
$('ul li').hide();
$('ul li').each(function(i) {
$(this).delay(80 * i).fadeIn(500);
});
});
});
htmlの内容はこちら
※オレンジ色の文字は注釈のため記述しないでください。
<div class="gblnv_box">
<a class="menu-trigger" href="#"> ←ハンバーガーボタン
<span></span>
<span></span>
<span></span>
</a>
<div class="gblnv_block">
<ul class="gblnv_list"> ←ハンバーガーボタン内、グローバルメニュー
<li><a href="">グローバルメニュー1</a></li>
<li><a href="">グローバルメニュー2</a></li>
<li><a href="">グローバルメニュー3</a></li>
</ul>
</div>
</div>
JSの基本構造について、プログラムでは一つの処理ごとに「 ; 」で区切ります。
下記ソースの説明を進めます。
$(document).ready(function(){});
このソースの内容は、WebページのDOMの準備ができたら内容を実行することができます。 JavaScriptはDOMを手軽に扱える言語で、Webぺージの要素をDOMとして読み取り WebぺージをDOMを通して書き換えることができます。
DOMは「Document Object Model」の略で、Webサイトの構造をツリー状のデータとして扱うことができます。
ソースを細かく見てみよう
$(".menu-trigger").click(function (){});
上記の記述は、ハンバーガーボタン「.menu-trigger」をクリックした時に処理を実行させるものです。 この中に実行したい内容を入れることにより、ハンバーガーボタン内のメニューを表示させます。
$(this).toggleClass("active");
「toggleClass」は指定したclassの追加と削除の切り替えを行います。
これにより、ハンバーガーボタンのクリックに合わせてメニューの表示・非表示を行っています。
$(this).next().toggleClass("onanimation");
「next()」は、「次」にあたる要素を選択します。
ここでは、「.menu-trigger」の次の要素
「.gblnv_block」にtoggleClassでクラスを追加しています。
$('ul li').hide();
$('ul li').each(function(i) {
$(this).delay(80 * i).fadeIn(500);
});
上記記述は、ハンバーガーメニューリンクを表示をさせるときに、
各要素を遅延表示させるものです。
「hide()」は英語の意味通り、表示を隠します。
「fadeIn(500)」で要素を表示させています。
「fadeIn(500)」の500という数字は、 アニメーションが行われる秒数を表しています。
500の場合、0.5秒かけてアニメーションが行われます。
「each」は、繰り返し処理を行っています。
なぜ、繰り返し処理を行っているのかというと、各要素がそれぞれに遅延させるためです。
繰り返し処理を行わないと、全部のハンバーガーメニューリンクの表示が遅れてしまいます。
1番目のliが表示されたら2番目のliの表示処理の遅延を行っています。
「each(function(i){}」の「i」は、変数になります。
繰り返しの指定では「i」を用いることが多いです。
「delay(80 * i)」で各リストを80ミリ秒ずつ表示開始時間を遅延させ、
その後、「fadeIn(500)」で500ミリ秒かけてフェードイン（徐々に表示）させています。
ハンバーガーメニューボタンの動きについて
今回ハンバーガーメニューの参考としたサイトは下記です。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋
css3の「transform」と「@keyframes-animation」を使用して、ハンバーガーメニューの動きを入れています。
上下の線は、「transform:rotate()」を使用して、回転させています。
真ん中の線は、「@keyframes-animation」を使用して、移動とフェードアウトをさせています。
最後に
いかがでしたでしょうか。
Webは技術の進歩が早く、追いついていくので精一杯な分野かもしれません。
ですが、Webは今ある知識を発想次第で 新しいものを作れる可能性がたくさんある分野でもあると思います。
可能性が広い分、楽しいことがたくさんできる。
進歩と可能性に満ちたWebの勉強は続けていきたいですね。
vol.40 デジタルイラストで毛の質感を表現する
こんにちは。イラストレーターの西山です。
今回はBOELの2016年賀状のイラストをもとにphotoshopで動物の毛を表現する方法をご紹介します。
photoshopで緻密に動物の毛を描くとき、線を一本一本描くだけではうまくいきません。
とくに失敗に陥りやすい点が2つあります。
・立体感がなくなる
・毛の生え方にムラが出てまとまりがない。
この2点に注意して毛の細かいイラストを描いていきます。
ベースを決める
まずは、毛を生やすためのベースを作成します。
作成した線画とは別に新規レイヤーを作成します。べた塗りで良いので色を塗ります。
色を塗るときは塗った輪郭がはっきり出ないぼかしブラシを使います。
質感のあるぼかしブラシで影を塗る
ベースの後は毛のことは考えず、まず質感があるブラシで影を大まかに塗ります。
今後毛を書くときにどこに影を落とすかわかりやすくするためです。
この手順を踏むと立体感を意識して毛を描きやすくなります。
今の段階でも毛が生えたときのイメージがつくようにしたい…ここで便利なのが質感のあるブラシです。
輪郭がガサガサしたブラシを使って塗れば毛がついたときの輪郭に近づけます。
今回は墨汁を習字紙に飛ばしたしぶきを使用して作ったブラシを使ってます。
紙へ自然にじんだ輪郭が細かい毛先に似ていたため使用しています。
水と混ぜてしぶきに濃淡が出るようにしておくと、よりリアルなブラシが作れます。
ベースからスポイトで
色を取りながら毛を描く
描きたい位置の色をスポイトで選択します。ベースで作った陰影を保ちながら描いていきます。
ペンのサイズは3〜4px程度。
最小サイズは仕上げで使う。
1px～2pxのペンは最後の仕上げに使うため、この段階では3px～4pxのペンで毛の流れを意識して描きます。毛を描く際は新規作レイヤーに描いていきます。
柔らかい毛の質感を作る
線と線の間にムラができるため、一通り毛を描いたら、柔らかい毛の質感になるよう加工します。
1 まずベースと毛を描いたレイヤーを複製し、結合します。
2 複製したレイヤーの描画モードを変更します。初期設定だと「通常」になっているので「スクリーン」に変更します。
スクリーンは色を重ねるほど白くなるモードです。
毛と毛の間や不要な影を自然と明るくして、ふわりとまとまった質感を出してくれます。
細いペンで細部を書き込む。
加工をしたことで柔らかい印象になりましたが、毛一本一本の質感は落ちています。
そのため、再度潰れた箇所を新規レイヤーで描き込みます。
毛を描き分ける
・体のキワは極細のペンで描く
・中央に行くほど一本を長く描いて毛の流れを強調する
・毛の流れに逆らった毛も入れる。
全て同じ毛の流れにしないで異なる色や流れの毛を体のパーツごとに2、3本程度描く。
最後にスクリーン効果を弱くかける
細部を書き込んだところで今度は新規レイヤーのみ複製し、描画モードをスクリーンにして馴染ませます。
細部を書き込んで描画モードをスクリーンする工程を、自分が納得する毛並みになるまで行います。
まとめ
いかがでしたか。
今回の描き方はデジタルイラストの参考書より、実は日本画の画集や参考書をもとに考えました。
媒体は違いますが、アナログ（日本画、油絵、水彩など）の描き方はデジタルイラストでも有効に使えます。色々な描き方に挑戦して、デジタルイラストに応用してみてはいかがでしょうか。
vol.39 CentOS7にハイパフォーマンスな Webサーバーをインストールしよう！ 準備編
こんにちは。Webエンジニアの毛利です。
今回はサーバーの構築のお話です。
ウェブサイトを公開したいと思ったとき、Webサーバーの環境が必要になります。
その時、共用レンタルサーバーがもっともお手軽で、わかりやすいです。
しかし、簡単である反面、本格的にやってみたい、カスタマイズしてみたいと思ったときに難しいことが多く、汎用性に欠けます。
また、同じ環境内に他ユーザーがサーバーを共有している状態のため他ユーザーのサイトトラフィックの影響を受け、他ユーザのサイトがアクセス過多となったとき、リソースがそちらに割かれるため自分のサイト動作が重くなってしまうなどが起こり得ます。
自由にカスタマイズしたい場合、OSのroot権限が必要になり、OSそのものをフルで操作できる環境が必要になります。
以前までは専有サーバーが選択肢にあがっていましたが共用サーバーに比べ料金が高く、気軽に利用できるようなものではありませんでした。
しかし最近では、OS単位で環境を利用できる、安価なサービスが続々と登場しています。
VPSやクラウドサーバーなどによってサーバー環境を提供するサービスが多様化し、思い描くサーバー機能を実現できる環境を気軽に利用できるようになりました。
今回はLinuxディストリビューションの1つ、CentOSでWebサイトを公開するための環境を構築していきます。
サーバー設定を始めよう
Webサーバー構築の作業はMacからリモート接続で行います。
サーバーのOSはCentOS7で設定を進めます。
サービスによって使えるOSは多少異なりますが、大きくWindows系サーバー（Hyper-V）かLinux系サーバー（KVM）であることが多いです。
また、Linuxの場合、OSのディストリビューションやバージョンが自由に選べ、サービスによってはOSのISOのイメージをそのままマウントし、インストールして使うことができる場合もあります。
※OSバージョンによってはサービス側でテクニカルサポート対象外としている場合があるので要注意です。
ターミナルからSSH経由でリモートログインし、設定を行っていきます。
他にもSSHリモートログイン用のソフトはありますが、操作的には直感的でターミナルがシンプルで使いやすいと感じていますのでターミナルで行っていきましょう。
ディストリビューションとは
Linuxには様々な種類があります。
Linuxはオープンソースのため、OSの開発者が多数いるため、その幅は無数です。 国によって人気のディストリビューションに特色があります。
日本ではサーバー構築に特化して利用者数が多いのがCentOSです。
また、Ubuntuも有名です。 サーバーの選定基準としては、安定性、堅牢性、更新頻度（開発が続けられている）などあり、シェアが多いものを選ぶのが最適です。
SSHでログイン
まず以下の設定を済ませておいてください。
・公開鍵認証の設定（サーバー側）
・秘密鍵の取得と配置（ローカル側）
VPSやクラウドサービスではSSHでのログインのみを許可している場合が多いです。
その場合サーバーのコントロールパネルから鍵ファイルをダウンロードできます。
ユーザールート/.ssh/
.sshディレクトリのパーミッションを700に変更します。
$ chmod 700 ~/.ssh
秘密鍵のパーミッションを600に変更します。
$ chmod 600 ~/.ssh/（自分でつけた秘密鍵の名前）
ここまで設定を済ませたら、ログインを試してみます。
$ ssh -i 鍵のディレクトリ/鍵ファイル ユーザー名@サーバーホスト（IPアドレス、ドメイン）
例えば下記のようになります。
$ ssh -i ~/.ssh/id_rsa user@example.jp
ログインが完了したら早速インストールしていきます。
Nginxのインストール
WebサーバーNginxをインストールします。
インストールは下記コマンドで行います。
# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
# yum install nginx
rpmコマンドでnginxのリポジトリを追加し、yumコマンドでインストールをしました。
PHP-FPMのインストール
続いてphp関連パッケージをインストールします。
インストールするバージョンは最新版のphp7系にします。
# wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
# rpm -Uvh remi-release-7.rpm
標準リポジトリからは最新バージョンのphpがインストール出来ないため、remiリポジトリを 追加しました。
# yum --enablerepo=remi --enablerepo=remi-php70 install php php-fpm php-mysqlnd php-gd php-mbstring php-pdo
必要であれば依存関係パッケージも一通りインストールします。
これでphp関連のインストールは終了です。
MariaDBのインストール
続いてMariaDBをインストールします。
MariaDBはMySQLをフォークして立ち上げられたプロジェクトによって開発が進められているため、MySQLと互換性があります。
基本的にMySQLと同様の運用が可能と思って良いでしょう。
Wordpressを動かすのに支障はありません。
最新版をインストールするにはリポジトリを追加します。
# vi /etc/yum.repos.d/mariadb.repo
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.1.10/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1
保存したら下記のコマンドを実行しインストールします。
# yum install mariadb mariadb-server
これで基本的なインストールは完了となります。
まとめ
今回「準備編」ではターミナルでSSHログインをし、各種Webサーバーに必要な各種機能をインストールしていきました。
CentOS標準のパッケージだと最新版をインストール出来ない場合が多く、任意でリポジトリを追加してインストールする必要があります。
今回はyumでインストール可能な最新版のものに焦点を当てました。
ソースからビルドする方法もありますがそれはまたの機会にご紹介できればと思います。
次回「設定編」ではそれらを実際に設定し、Webサイトを見れるようにしていきます。
参考URL
CentOS 7 でLAMP(Apache+MariaDB(MySQL)+PHP)インストールからWordPressを動かすまで(Apache編)
vol.38 知ると便利なWEB解析ツール Google Analytics
ディレクターの白子です。
Google Analyticsは、Googleが提供するアクセス解析ツールです。
「どのページがユーザーに見られているか」「どこからのアクセスがあるのか」
「離脱率が高いのはどのページなのか」など、
Webサイトのアクセスに関連するさまざまなデータを分析することができます。
今回は、Webサイトを作成したらぜひ始めたいGoogle Analyticsについてご紹介します。
1.Google Analyticsのアカウント作成
2.トラッキングコードとGoogle Analyticsの導入
3.Google Analyticsの基本的な使い方
※この記事は2016年1月22日時点の情報です。
1.Google Analyticsのアカウント作成
01.事前準備
Google Analyticsを始めるには「Googleアカウント」が必要です。
事前に「Googleアカウント」を登録しましょう。
02.Google Analytics アカウント登録
「Googleアカウント」を取得後、Google Analyticsの公式サイトへアクセスします。 Google Analytics 公式サイト 右上の「アカウントを作成」をクリックします。
Googleアカウントのログイン画面が表示されます。
Google Analyticsで使用するGoogle アカウントのメールアドレスとパスワードを入力し、 「ログイン」をクリック。
次のような画面が表示されます。
「お申し込み」をクリックします。
これで現在ログインしているGoogleアカウントで、Google Analyticsが利用できるようになります。
次にGoogle Analyticsアカウントを作成します。
1つのGoogleアカウントで複数のGoogle Analyticsアカウントを関連づけできるため、 たくさんWebサイトを運営している人は、同じGoogleアカウントで作成すると管理しやすいです。
次に項目が出るので、それぞれ記入します。
1.トラッキングの対象（ここではウェブサイトを例にしていきます）
アクセス解析をおこなう対象を選択
2.アカウント名
Google Analyticsを利用する際のアカウント名を設定
3.ウェブサイト名
Google Analyticsを設置するWebサイトの、Webサイト名を設定 Webサイト名と「ウェブサイト名」は同じ名前に設定すると分かりやすいです。
4.ウェブサイトのURL
アクセス解析したいサイトのURLを記入
5.業種
サイトに該当する、または一番近い業種を設定 26種類の業種が選択できるようになっています。
6.レポートのタイムゾーン
「日本」を設定
ここまで記入が終わったら、「トラッキングIDを取得」をクリック。
利用規約の画面が表示されるので、国を「日本」に設定、「同意する」ボタンをクリックします。
これでGoogle Analyticsへの登録は完了です。
2.トラッキングコードとGoogle Analyticsの導入
次はGoogle Analyticsを導入していきます。
導入するには「トラッキングコード」をWebサイトに設置する必要があります。
■「トラッキングコード」とは？
WebサイトにアクセスするとGoogle Analyticsのプログラムが動作し、
アクセスのデータをGoogleのサーバーに送信しデータが蓄積されます。
そのデータを集計し分析できるのがGoogle Analyticsです。
このプログラムがトラッキングコードです。
このコードを、Google Analyticsを導入したいWebサイトに設置しましょう。
コードをWebサイトに設置したら、アクセス解析が可能になります。
すでにGoogle Analyticsの登録が済んでいる方は、 Google Analyticsにログイン→画面上部「アナリティクス設定」をクリック→ アナリティクス設定画面の「プロパティ」→「トラッキング情報」→「トラッキングコード」 から確認できます。
Webサイトへのトラッキングコードの設置場所はソースの＜head＞～＜/head＞タグ内です。 アクセス解析の対象となる全てのページに設置します。
設置したソースファイルをアップロードすればトラッキングコードの設置は完了です。
※Google Analyticsにトラッキングコードが反映されるのには、多少タイムラグがあります。
設置してから24時間以上経ってもデータがレポートに表示されない場合は、トラッキングコードが正しく設置されているか確認してください。
3.Google AnalyticsでWebサイトの情報をみる
Google Analyticsの公式サイトへアクセスします。
Googleアカウントとパスワードでログイン。
アクセス解析をしたいWebサイトの「すべてのウェブサイトのデータ」をクリック。
するとGoogle Analyticsのメイン画面が表示されます。
画面上部「レポート」をクリックすると Webサイトのアクセスに関するデータを見ることができます。
「レポート」の5つの項目
画面の左部分にあります。各項目を押すとさらに細かい項目が出てきます。
・リアルタイム
現時点でWebサイトにアクセスしているデータ
・ユーザー
ページビュー（Webサイトが閲覧された回数）やセッション（Webサイトへアクセスしてから離脱するまでの一連の行動）など「ユーザーの情報」が分かる
・集客
「どのWebサイトから、アクセス数がどれくらいあるか」など「どうやってアクセスされているかの情報」が分かる
・行動 「どのページにアクセスが多いか」や「ユーザーがどのページからどのページへ移動しているか」など「ユーザーの行動」が分かる
・コンバージョン
ビューに対して目標を設定し、目標達成率を計測できる
基本的な情報を見る
「分類や項目が多すぎて、どうやって見たらいいか分からない…」ことに陥り、 せっかく登録してもGoogle Analyticsを見なくなってしまうことも…。
そこで、よくある「Webサイトのこの情報を知りたい」内容の確認方法を次にまとめました。
01.「訪問数やページビュー数を確認したい」
画面の左の項目「ユーザー」→「サマリー」を開きます。
ここで訪問数やページビュー数がどれだけあるかなど、確認できます。
画面右上に表示されている日付を変更すると「期間を指定する」ことができます。
アクセス数を確認したい期間を指定すると、該当のデータが表示されます。
02.「アクセスしているユーザーの性別や年齢を知りたい」
画面の左の項目「ユーザー」から「ユーザーの分布」→「サマリー」を開きます。
ここでユーザーの年齢や性別が確認できます。
ターゲットの分析などに役立ちます。
03.「どこからのアクセスが多いか知りたい」
画面の左の項目「集客」から「サマリー」を開きます。
どうやってこのWebサイトにアクセスしたか分類され、 セッション率、直帰率、平均セッション時間など確認できます。
■「上位のチャネル」とは？
「organic」：検索エンジンからアクセス
「referral」：どこかのWebサイトからリンクをたどってきたアクセス
「Social」：ソーシャルメディアからのアクセスです。
下記のようなアクセスを指します。
・Twitter
・Facebook
・Hatena
・Pixiv
・Tumblrなど
「Direct」：Directアクセスは下記のようなアクセスを指します。
・URLを直打ちしてのアクセス ・ブックマークからのアクセス ・RSSリーダーからのアクセスなど
04.「Webサイトがどういうキーワードで検索されているか知りたい」
画面の左の項目「集客」から「キャンペーン」→「オーガニック検索」を開きます。
「検索に使われたキーワード」が一覧で確認できます。
※「(not provided)」とは…キーワードを特定できなかったもの
05.「どのページでユーザーがWebサイトから離れているか知りたい」
画面の左の項目「行動」から「サイトコンテンツ」→「離脱ページ」を開きます。
ここで「離脱ページの一覧と、各ページの離脱数や離脱率」が確認できます。
■離脱ページとは？
「ユーザーが、Webサイトから離れたときのページ」です。
ユーザーがあなたのWebサイトのAページを見て、同じあなたのWebサイトのBページに移動しました。
その後、あなたのWebサイトではない全く別のWebサイトへ移動したりして、あなたのWebサイトを離れました。
このときのBページが「離脱ページ」です。
おわりに
いかがでしたか？
知ると、もっとWebサイトの分析をしたくなってきませんか？
Google Analyticsは今回ご紹介したことよりも、もっと多くのことを解析できるツールです。
少しづつ知って、Webサイトの運営に役立ててもらえればと思います。
vol.37 識別性、可読性の高いGill Sansの歴史と特徴
こんにちは。デザイナーの寺田です。
今回はvol.1 古くから愛されるフォント TRAJANフォントの魅力に続いてフォントの歴史について紹介します。
今回紹介するフォントはGill Sans（ギル・サン）です。
グラフィックデザイナーであれば一度は耳にしたことがあるフォントではないでしょうか。
可読性が高いとして有名なフォントでもあります。
ではさっそくGill Sansについて見ていきましょう。
フォント名の由来は人の名前から
Gill Sansは「Eric Gill (エリック・ギル)」が1930年前後に造った書体です。 フォント名は人の名前に由来します。
Eric Gillは、書体デザイナーであり、かつグラフィックアーティスト、また彫刻家として有名でした。
もともとは建築を学んでおり、教会建築の専門家であるW.D.カロエ（W.D. Caroe）の下で建築を学びますが、研修が嫌になり辞めてしまいます。
その後、中央美術工芸学校（Central School of Arts and Crafs）でカリグラフィーのクラスを受講します。 Gill Sansは、彼が受講していたクラスの先生Edward Johnstonがロンドン地下鉄のために造ったJohnston(フォント)から着想を得ています。
Edward Johnstonとの出会いが、Gill Sansの誕生の大きなきっかけだと言えます。
可読性が高いとして有名なGill Sansですが、
彼自身も究極の可読性をもつサンセリフ体のフォント製作を試みていたそうです。
Eric GillとBBC（英国放送協会）
引用：http://jamielove2.exblog.jp/22023217/
Eric Gillは「Prospero and Ariel」という彫刻群をBBC（英国放送協会）のために製作しています。
写真のモチーフになっている人物はシェイクスピアの最後の作品と言われているテンペストに出てくるキャラクターだそうです。
また、BBC（英国放送協会）はGill Sansを制定書体として使用しています。
※制定書体とは、企業や団体などで使用する書体を統一すること。
代表例として日本の企業では、資生堂やサントリーが制定書体を採用している。
タイポグラファーヤン・チヒョルトも使用
引用：http://typolayout.eek.jp/2011/07/100-2011.html
タイポグラフィに精通した技術者として有名なJan Tschichold（ヤン・チヒョルト）。
彼は、イギリスを代表するペーパーバックの出版社ペンギンブックス社の タイポグラフィ、ブックデザインの専属アドバイザーとして 1947年〜49年まで就任していました。
ペンギンブックス全ての書物のリデザインを行い、 また、良質な量産本を仕上げるためのシステムの構築など作業の工程まで 見直していきます。
彼の働きが、イギリス全体の書籍の質の向上と、書籍におけるタイポグラフィの重要性を世界に認知させました。
前置きが長くなってしまいましたが、今までペンギンブックスの社名は、「Bodoni Ultra Bold」を使用していたのをJan TschicholdはGill Sansに変更します。
ペンギンブックスの装丁といえば、これ！と思う人は多いのではないでしょうか。
古代のセリフ体を元に作られたサンセリフ体
Gill Sansはサンセリフ体で、四角の枠に綺麗に収まっており、一見するとHelveticaやFuturaのような幾何学的なフォントと似ているように見えますが、どこか柔らかみを感じるフォントです。
また、フォントのウェイトのバリエーションが豊富で、使いやすくそれぞれ違う表情を持っています。
HelvetivaとFuturaでGill Sansを比べてみると「C」や「O」、「S」などのカーブが特徴的だと思います。
Gill SansのデザインのベースにTrajan（トラジャン）やBaskerville（バスカヴィル）など、 古代のセリフ体を元に作られているため他の幾何学書体とは違う雰囲気を感じるでしょうね。
それでは、「C」を例に見ていきましょう。
Futuraの「C」のカーブは正円に近くて、Helveticaは楕円に近いです。
どちらも正円と楕円と全く同じではないですが、幾何学の形に極めて近い曲線です。
Gill Sansの場合、馬の蹄のように独特な曲線を描いています。
また、文字に中心線を引くとHelveticaの場合、左右対象で整頓された印象です。
小文字で一番形の違いが出ているのは「g」と「t」です。
「g」は、サンセリフ体とは形が異なっており、モデルに使用していたカロリング小文字体の影響がでています。
カロリング小文字体はフランク王国の国王「カール大帝」の庇護の元に作成された字体であり、 こちらもTrajan（トラジャン）と同様に気品の高い字体を元にGil Sansが作られていることがわかります。
「t」の文字については、サンセリフ体には無いセリフ体の特徴的な飾りがついています。
最後に
いかがでしたでしょうか。
一般的に大文字より小文字の方が、文字自体のコントラストがはっきりしているため 文章が読みやすいと言われていますが、Gill Sansの場合、 サンセリフのすっきり整然とされた印象と合わせてセリフ体やカロリング小文字体の独特なカーブを描くことにより 整然とされすぎず文字一つ一つが印象的になり、瞬時に文字を識別できるのではないかと思います。
フォントを比較してみると、それぞれのフォントの特徴が見えてきます。
また、フォントが生まれた背景や製作者の思想を知ることでそのフォントのどこを見るべきかわかってきます。 これは、フォントのディテールを知る上に重要な知識だと思っています。
わたしはGill Sansのようにサンセリフ体なのにデザインの元に使用しているフォントが
セリフ体やカロリング小文字体というのがおもしろいと思いました。
文字の歴史や特徴を知ることで、デザインの参考になればとおもいます。
参考書籍：「Jan Tschichold」公益財団法人DNP文化新興財団
「Penguin By Design: A Cover Story 1935 To 2005」Phil Baines
vol.36 11年ぶりのアップデート！ PHP7の導入方法
こんにちは。Webエンジニアの毛利です。
2015年12月4日、プログラミング言語のPHP7がリリースししました。
メジャーバージョンが更新されるのは実に11年ぶりとなるPHP7。
大きな改修となるメジャーバージョンのアップデートではプログラムの骨組みから見直され、様々な改善がされており、パフォーマンスがPHP5系の2、3倍以上との噂もあります。
また、HHMVと比較され、PHP7の方が優れている面がベンチマークで証明されたりと、Webアプリケーションのサーバーサイドスクリプトの大きなパフォーマンス向上が期待できます。
新しくなったphp7のポイント
・メモリ消費などパフォーマンスの向上
・処理速度の向上
・スカラー型宣言などの新機能の実装
・5.6時点で廃止予定機能の削除
・下位互換のない変更
など
機能について詳しい解説はPHPのリファレンスに情報がありますのでこちらを参照してみてください。
参考サイト
Webサイト、Webアプリケーションの大きなパフォーマンス向上が見込まれるPHP7。
早く体験したい！いても立ってもいられなくなったのため、早速サーバーに導入することにしました。
今回使用する環境では開発バージョンRC6をインストールしていため、それらをいったんアンインストールし、再インストールします。
導入したバージョン PHP 7.0.0
導入する前のLAMP構成環境
OS（Linux）： CentOS7.1
Webサーバー：nginx1.8.0
データベース：MariaDB 10.1.8
phpのアンインストール
今回使用する環境には既にPHPがインストールされており、今回はいったんアンインストールしてから再インストールすることにしました。
アンインストールにはyum removeを用います。
関連する依存パッケージも削除されます。
今回、今までの構築で外部リポジトリを使っい無理矢理デベロッパーバージョンを導入しており、このコマンドで削除することが出なかったため下記コマンドで試しました。
# yum --enablerepo=remi-php70 remove php\*
アンインストールはrpmコマンドで確認することができます。
phpのバージョンを確認する方法でも確認してみます。
#php -v
いずれもバージョン情報が出てこなければOKです。
これでphpがアンインストールされていることを確認できました。
PHP7の新規インストール
最新版をインストールするにはまず外部リポジトリを追加します。
最新のremiリポジトリをダウンロードし、rpmコマンドでリポジトリをインストールします。
# wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
※rpmコマンドの-Uvhはオプションであり、Uは「アップデート」vは「詳細情報の出力」、hは「インストール状況の表示」となります。
新規インストールでもUオプションを付けても構いません。
yumコマンドでインストールを行います。
# yum -y install --enablerepo=remi-php70 php php-mbstring php-mysqlnd php-fpm
※yumコマンドの中に-yを入れるとインストールの有無の意思確認を行わず、ファイルのダウンロードを終えるとすぐに開始します。
インストールが完了したら確認を行います。
# php -v
それぞれを実行したとき、以下のようなコードが表示されればインストール完了です。
# php -v
PHP 7.0.0 (cli) (built: Dec 1 2015 17:53:27) ( NTS )
Copyright (c) 1997-2015 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2015 Zend Technologies
Webサーバーの動作を兼ねてphpinfoをサーバーにアップロードし、確認します。
おまけ
PHP6はないの？
PHP7が最新であることがそもそも前提となっている本記事ですが、比較される旧バージョンがPHP5なのにお気づきでしょうか？
PHP6はどこに行ってしまったんだろう？
結論からいうと、PHP6は破棄されたようです。
PHP6の開発では「内部的に文字列を全てUTF-16で実装する」との方針があったようなのですが、実装が複雑になる割に機能改善が見込まれないため、プロジェクト自体が頓挫したようです。
方針を転換して、新しく開発されたためバージョンが6ではなく、7になりました。
内容を要約した記事がありますので詳しくはこちらを参照してみてください。
参考サイト
PHP6開発 UTF-16化を断念、5.3へロールバック | マイナビニュース
マスコットキャラクター「elePHPant」
PHPのマスコットキャラクターの「elePHPant」です。
あまり有名ではありませんが...
そもそもなぜゾウさんなのでしょう？
それは「PHP」の文字を崩してみるとゾウっぽいという理由からだそう。
フローを見てみると、確かに、そう見えてきます。
下記に参考サイト載せましたのでelePHPantが生まれる変遷を詳しく知りたい方は参照ください。
参考サイト
PHPのマスコットキャラクター「elePHPant」が象である理由
The PHP Mascot's Birth - Creator Of The elePHPant Vincent Pontier Reveals The True Story!（英語）
Elroubio（「elePHPant」のページ）
まとめ
PHPは当初の予定から少し延期して12月3日にリリースしました。
サーバーへの導入の手順はそこまで難しいものではありません。
大きなパフォーマンス向上が見込めるPHP7ですが、PHP5から仕様変更した部分もあり、本環境への導入は、現在運用しているCGIプログラム、Webアプリケーションの仕様を確認し慎重にアップデートすることをお勧めします。
PHP7と比較されるHHMVは、今までのPHP5系との互換性も高いようです。
PHPベースで処理を高速化したいと考えるときに、PHP7へのアップデートではない1つの選択肢として考慮できると思います。
当環境ではPHP7を導入し、wordpressの動作テストを行いましたが、
現状サイトが全く表示されない等の大きな不具合はなく、通常の動作には支障がありません。
ただ、プラグイン等を導入している場合、対応できない場合がありますのでアップデートを待つか、自身でプログラムを修正する必要があります。
当環境でも検証を続けており、何かあればまた別の機会にご紹介しようと思っています。
次回はWebサーバーの環境の構築ってどうやるの？に注目し、現在構築している環境の構成や手順についてご紹介します。
参考URL
パッケージの削除
rpmコマンドでインストール有無を確認する方法
yumによるRPMパッケージのアンインストール - 逆引き集 - Fedoraで自宅サーバー構築
rpmコマンドのオプション
RPMコマンドを使いこなしたい - ITmedia エンタープライズ
PHP7インストールの手順
vol.35 2016年申年の年賀状に使いたい紙、10選
こんにちは。アートディレクターの中野です。
今年も残すところ、あとわずか。
街を歩けば軽快なクリスマスソングが聞こえる季節になりました。
さらに自宅に帰ってTVをつけると、チキンやケーキの映像に混ざって、早くも年賀状のCMがながれています。
ほんとうに時間の経つのは早いものです。
みなさん、年賀状の準備は進んでいますか？
来年は2016年、干支は申（さる）です！
「もう今年はLINEとかFacebookで送ればいいかなー」なんて、SNS時代の潮流にのって「あけおめ」の4文字とお正月っぽいスタンプで、カンタンにすませたい。
そんなかたも多いのではないでしょうか。
でもやはり、一年の計は元旦にあり。
心のこもった挨拶状がポストにとどくからこそ、相手の心にひびくものがある。
たった1枚のハガキで、年始のコミュニケーションが円滑にスタートするなら
こんなコスパの高いうれしいツールはありません！
そこで、他とはちょっと差のでるオリジナルの年賀状にするために、今年は「紙」の印象も考えるというのはいかがでしょうか？
ツルツル、ザラザラ、しっとり、ふんわり…などの手触りの他にも重さ、色合い、輝きなど紙独自の個性があり、既製年賀ハガキの束に混ざったとしても、その存在感がきわだつことは間違いありません。
今回は「もらって嬉しい年賀状」づくりを、紙選びの視点からアプローチしていきます。
それではみていきましょう！
【ご注意】
今回ご紹介する紙は、正式にはファインペーパーと呼ばれるもので、 家庭用プリンタ（インクジェット/レーザー）での印刷に向かないものも多くあります。
なぜかというと、風合いを重視した紙はわざと表面加工をラフにしているため
凹凸があったりインクが染み込みやすかったりと、「にじみ」や「かすれ」が起きる場合があります。
店頭で購入する際は、商品パッケージの裏などに記載された「印刷適性」を確認してみてください。
プリンタ適性に対応した製品も出ている場合がありますので、諦めずに一度メーカーに問い合わせてみましょう。
印刷適性のない紙に、印刷をしたい場合は、以下の対応をオススメしております。
宛名面… 宛名ラベルに住所を印刷して、貼りつける。
表面… 希望の用紙の取り扱いがある印刷会社さんに、印刷を依頼する。
年賀状の紙オススメ10選
アラベール｜スノーホワイト｜200kg
BOEL Inc.の絶対的エース！アラベールの登場です。けして派手さはありませんが、バランスの良いファインペーパーです。
繊細で優しい質感と、非塗工のため同じく我がエースの「ヴァンヌーボ」より
若干のラフさもあり、和の雰囲気をそこはかとなく感じさせることができます。
写真は「スノーホワイト」ですが、少し黄みのある「ホワイト」にするとさらに印象が柔らかくなり、選ぶ際に悩むところです。
敷居の高過ぎない上品さと、優しいたたずまいが魅力です。
気包紙U-FS｜ディープラフ｜215.5kg
エアリーな質感ながらしっかりと硬めの仕上がりで、ハガキの用途にはオススメです。
パッケージ用紙として位置付けられているので、エンボスや折り加工などの、
加工適性も優れていそうです。
表面仕上げも塗工・非塗工、風合いもディープラフ・ミディアムラフ・ライトラフの3パターンと、豊富にバリエーションが用意されています。
紙の風合いが強く感じられる非塗工のディープラフがオススメです。
マーメイド｜白｜210kg
人魚のさざ波という、たいへんロマンチックな由来を持つマーメイド。
表面に穏やかな波模様を思わせる凹凸模様が広がります。
キャンパスのキャンソン紙にも似ている気がします。
デザイナーの原弘氏が開発から携わり、1960年代から一般に普及したことで、
包容力のある優雅なたたずまいは装丁など広い用途で使われています。
そんな伝統ある用紙と、伝統的な年賀状の相性が悪いわけがありません。
パルパー｜ホワイト｜210kg
今回セレクトした中では、もっともゴワゴワ感のあるファインペーパー。
ランダムなうねりと高低差があり、厚手の手漉き和紙のような力強さがあります。
強い意志を感じさせるこの用紙では、中央に日の丸だけを描くだけ！など
武士のようにいさぎよい年賀状はいかがでしょうか。
玉しき さしこ（刺子）｜ゆき｜200kg
伝統的な和風のパターンが敷き詰められたファインペーパーです。
刺し子というのは、弱くなった薄い布を何層にも重ねて、刺繍で繋ぎあわせ
強い布へ生まれ変わらせる、生活の知恵です。
また、そのエシカルな精神や刺繍自体の芸術性の高さからも、注目が集まっています。
もともとの価値を技術により向上させる、古くなったものを大切に使う、
弱い素材でも重なることで強くなれる。
近いコンセプトを持つお店や個人の方に、今年の抱負と合わせて使っていただくのも良さそうです。
また、色を重ねて、動物の毛並みに見せることもできそうです。
ペルーラ｜スノーホワイト｜180kg
みんな大好きキラキラ系!の代表格、ペルーラです。
語源は真珠を意味するスペイン語の「Perla」からきています。
質感は少しザラザラしていて、密度がつまったように硬く、kgに対してやや薄いため、
鉱物のようなクールな印象があります。
薄いとはいえ硬さやハリ感がありますので、ハガキ用途には180kgで十分と思われます。
耐水性も高いため、水がついてもすぐ拭けば問題ないです。（個人の感想です）
パール系は大体そうですが、印刷面は乾きづらいので、よく乾燥をかけてから裏面を印刷するようにしてください。
エッグシェル、ラスターなど表面加工に違いのあるバリエーションも登場してきています。
シャインフェイス｜ゴールド｜220kg
全体的にマットで上品な印象のパール感。
ペルーラの粒子感のあるキラキラとは異なり、真珠の表面に似たスムースな光沢です。
紙見本が古いため記載が違いますが、写真はゴールドに分類され、新しくシルバーが登場しています。
光があたるとゴールド（シルバー）の光を放ちます。
また、裏面の質感が異なるという特徴があります。
裏面は光沢がなく、上質紙のようなサラッとした手触りになっています。
裏表で印象に差をつけたい場合にオススメです。
スタードリーム-FS｜アンティークゴールド｜209kg
まだまだ続くキラキラ系！
こちらは名前の通り星空をイメージした輝きを放つエレガントな印象の紙です。
豊富なカラーバリエーションがあるため、選ぶ楽しみが広がります。
ブラックやネイビーは本当に星空のようです。
セレクトしたのはアンティークゴールドという色です。
年代や性別を超えて愛されるシックなゴールドが祝祭ムードを高め、さらに干支の申（さる）の毛の色とも関連づけられそうなことから、工夫しだいで面白い年賀状となりそうな気がします。
プライク｜オレンジ｜243kg
驚くほどしっとりしたマットな手触りが印象的なファインペーパー。
BOEL Inc.の名刺もこのプライクの白を使っていますが、独特の手触りに驚かれるかたも多いです。
特殊なコーティングにより印刷適性は低いですが、ここはふんぱつして箔押しで今年の抱負を小さく刻むのはいかがでしょう。
色は目にも鮮やかなオレンジを選んで、晴れやかな新年をお祝いしましょう。
クラフトリプロライナー｜240.5kg
段ボールの表面に使われる紙を原紙として作られたファインペーパーです。
クラフト紙といえば、ザラザラの表面でカジュアルな用途に限定されがちですが、こちらはスムースで凛とした風合いのためか、高級感さえ感じられます。
あえて単色カラーで申（さる）のイラストを印刷して、ちょっとノスタルジックな年賀状にしてみてはいかがでしょう？
年賀状はお年玉付きがいい！というあなたには...
引用：https://www.post.japanpost.jp/kitte_hagaki/stamp/tokusyu/2014/h261030_02_t.html
私製はがきでも、「お年玉付年賀郵便切手」を使えばお年玉付年賀はがきと同様、くじ付きのワクワク感をおとどけすることができます。
ただし切手の場合、3円の寄付金がプラスされ、1枚当たり55円となるようです。
ハガキの厚さの目安とは？
紙の厚さの目安として、kgという単位を使います。*
「180kg」はハガキや名刺でよく使われる厚みですので、160kg〜200kgあたりを選択したいところです。135kgは厚めのチラシ、90kgはプリンタ用紙のイメージですので、薄すぎてハガキには向いていません。
*… 空気が多く含まれた紙・原料が軽い紙などは同じ重さでも厚くなるため、厳密には、同じkg数の紙 = 同じ厚さにはなりません。
ちなみにBOELの年賀状の紙は？
2015年は未（ひつじ）年にちなんで「羊毛紙」をセレクトしました。
紙に50%も羊毛が混ざっていて、ふんわり、かつ、しっかりとした量感の紙です。
それに贅沢に全面にエンボス加工をして、セーターの網目模様を表現しています。
2015年の羊年に実は竹尾「あの紙、この紙」でも紹介していただきました！
株式会社BOEL 年賀状 羊毛紙｜あの紙、この紙｜竹尾のウェブストア
※2015.2.9の日付までスクロールするとみられます。
あの紙、この紙。 用途をおしえていただきました│約9,000種類の紙が買える竹尾のウェブストアtakeopaper.com
実物を見て購入できるお店はココ！
今年6月、銀座・伊東屋新本店7Fに「竹尾見本帖 at Itoya」がオープンしています。
「竹尾見本帖 at Itoya」
http://www.takeo.co.jp/reading/collection/19.html
紙の専門商社である竹尾が手がけるお店なので、間違いありません！
店内にグラデーションでディスプレイされている正方形の紙見本サンプルは、おもわず持ち帰りたくなってしまいます。いろいろ迷ってしまったら、ペーパーコンシェルジュにイメージを相談しながら購入できます。
竹尾が扱う用紙は9,000種類以上あるようですが、その中でもセレクトされた1,000種類以上の用紙を取り扱っています。
ただし、購入できるサイズは4切洋紙（254×305mm）にかぎられるようです。
ハガキサイズにするためには自宅でカット、または取り寄せという形でオーダーになります。
彩現シリーズ…ポストカード用紙- 彩現｜紙・ステーショナリー 販売｜PCM竹尾
http://www.pcmtakeo.com/SHOP/16113/38332/list.html
ペーパーパレット…洋2封筒 - ペーパーパレット｜紙・ステーショナリー 販売｜PCM竹尾
http://www.pcmtakeo.com/SHOP/5429/153255/list.html
その他にも、東急ハンズ、世界堂、伊藤屋の文具コーナーなどでも
種類はかぎられますが、取り扱っていたと思います。
最後に
いかがでしたか？
紙をきっかけに想像をふくらませるのも、なかなか楽しいと思いませんか？
年賀状を出す習慣がなくなっていたけど、もう一度始めようかな？ と思っていただけたら光栄です！
