消せるボールペンもカワイクなくちゃいけない理由

先日、「筆記用具、好きでしたよね」といって嬉しいプレゼントをいただきました。ありがとー。

PILOTのFRIXion製品で、フリクション ボール ビズ、フリクション ボール替芯、そしてフリクション イレーザーです。

消せるボールペンとして一世風靡したパイロットのフリクションは機能的には優れていると思いつつも、如何にも事務用品といった感じが好きになれず使う機会はありませんでした。

筆記用具にはこだわりたい

事務用品ではなく、筆記用具です。いつも使うものであればこそ、こだわりを持ちたいし、センスのいいモノ、かわいいと思えるモノを使うべきです。また遊び心や無駄も大切です。フリクション ボール ビズ ブラックは、メタルボディの質感もよく、黒色なのでイレーザーのラバー部も目立たたないので持ち歩ける筆記具です。本体もスリムで、0.5mmというペン先は、Traveler's note book にピッタリです。

しかし、折角、消しゴムとして フリクション イレーザー を独立させたのであれば、本体にイレーザー（ラバー）部がないモデルがあってもいいのではないかと思ったら フリクション ボール ノック ビズ というシリーズがありました。こちらは消しゴム部のラバーがキャップで隠れるタイプとなっています。

これなら大人のボールペンとして使えますね。値段も定価2,000円（税別）とお手ごろです。

パイロット フリクションボール ビズ 0.5mm ブラック

PILOT(パイロット)

楽天市場で調べる

Amazonで購入

フリクションボールノックビズ ブラック

PILOT(パイロット)

楽天市場で調べる

Amazonで購入

また、いただいた フリクション イレーザー は、グレーでしたが、いくつか色の種類があります。こういう遊び心は好きです。

ということで早速使ってみました。書き心地も悪くありませんし、消しゴムみたく消せるのが楽しいです。

替え芯の互換性は？

フリクションの替え芯は、フリクション ボール ビズ も フリクション ボール ノック ビズ も共通の替え芯ですが、リフィルサイズの記載があります。

	全長	最大径
リフィルサイズ	111mm	6.0mm

この形状があうボールペンがあれば、他社のボールペンでも消せるボールペンとして使えます。日本筆記具工業会が 筆記具お役立ち情報-ボールペン という中で ゲルインキボールペン 中しん（替しん）各社互換性調査結果一覧表 というのを掲載していますので参考にしてみてください。

各社とも全長11cm台、外径6mm前後というタイプのものがあります。若干のサイズの違いであれば使えると思いますが、上記のサイトにレフィルの互換に関する注意事項があるので、一読してからお使いください。

（注意）上表は各社レフィルの互換性表ですが、寸法バラツキが各社微妙に異なるので、下記のような不具合が発生するおそれがあります。なるべく純正品をお使い下さい。

1. 先軸からのチップ出寸法の長短バラツキ
2. 繰り返し使用における軸へのダメージ
3. 空気置換が充分に行われない為に生じるチップ先端からのインキの漏れ出し
4. 空気置換が充分に行われない為に生じる筆記不良
5. ノックの作動不良

パイロット フリクション リフィル 黒 0.5mm

PILOT(パイロット)

楽天市場で調べる

Amazonで購入

オリジナル 消せるボールペン

自宅にあった木軸ボールペンがちょうど上記のレフィルサイズに当てはまったので交換してみました。

似非、FRIXion 木軸ボールペンの出来上がりです。フリクション イレーザー と組み合わせれば、素敵な筆記具になりました。もとから使っていたボールペンなので愛着もあります。

なぜボールペンで書いた文字が消せるのか

フリクションインキは、熱で消えるインキなので、ラバーで擦った摩擦熱でインキを消すことができるようです。逆にいえば60℃以下の環境であればゲルインキと同じ程度の長期保存ができると「フリクションで書いた筆跡は長期保存可能ですか？ | よくある質問 | PILOT」にあります。

フリクションインキの秘密については解説動画がありますので、こちらをご覧になってください。

インキの秘密

最後に、消せる色鉛筆

最近、フリクション シリーズもスタンプや蛍光ペンなど色々なものが発売されているようですが、「フリクションいろえんぴつ」という製品が見た目もカワイイ。マインドマップの作成では色鉛筆は必需品なので実用的でもあります。

摩擦熱による温度変化によって筆跡を無色にするフリクションインキの色素をワックスで固めた新開発の芯を搭載。消去用ラバーで擦ることで筆跡をきれいに消す ことができる色鉛筆です。

フリクションいろえんぴつの特徴

と、いうことなので、通常の色鉛筆同様に鉛筆削り器やナイフで削ることができます。ステッドラー 消せる色鉛筆 など消しゴムで消せる色鉛筆もありますが、削りカスもでず、大人的な色鉛筆です。

パイロット フリクションいろえんぴつ 12色セット

PILOT(パイロット)

楽天市場で調べる

Amazonで購入

5年後（2020年）のいまは

象と散歩: バタフライボード Notes（ノーツ）は手帳型ホワイトボードではない！で写真をアップしましたが、まだ木製のボールペンにフリクションのリフィルを入れて使っています。自分でもびっくりするぐらい気に入った筆記用具は長く使い続けています。

そしてここ数年のお気に入りは、伊東屋とパイロットがコラボレートして発売された。ITOYA 110（イトーヤ ワンテン）イレーサブルボールペンです。息の長い商品でいまでも販売されています。カラーは4種類ありますが、白がシンプルなデザインとマッチしていて気に入っています。適度な重さもあり、とても書きやすいボールペンです。

ITOYA110 イレーサブルボールペン

伊東屋

楽天市場で調べる

Amazonで購入

Googleが提供するツールでモバイルのエクスペリエンスを向上させる

約半数がモバイルからのアクセス

スマホの普及によりモバイルからのアクセスは増加しています。このブログへのアクセス（UUベース）も2013年1月には10％に満たなかったモバイルユーザーが、2014年下期には45％と、半数近くがモバイルからのアクセスとなっています。

ブログのモバイル対応について考えてみた | 象と散歩 でモバイル（スマホ）でYoutubeと表を見やすくするための方法について記載しましたが、今やスマホで見やすいサイトであることは必須条件となってきています。

Googleではモバイルに対するユーザビリティに関してのレポートやツールを提供していますので、これらを有効活用してモバイル・ユーザーフレンドなサイトにしましょう。

モバイル対応を求めるGoogle

Googleはモバイルに対応したサイトを望んでいます。 下記はモバイル・ファーストインデックスの動画です。日本語字幕で見られます。

Google にとっては、モバイル フレンドリーなサイトが増えることが、結果、モバイルでの検索の増加、広告収入の増加に繋がるので当然ですが、利用者にとってもモバイル ユーザフレンドなサイトが望まれているのは利用者の立場からみて間違いありません。

[スマホ対応] ラベルって何？

2014年11月14日付のGoogleウェブマスター向け公式ブログの 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために の中でモバイル版の検索結果に［スマホ対応］ラベルが表示されるという発表がありました。［スマホ対応］ラベルは下記の条件に合致する場合に適用されるとあります。

• 携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
• ズームしなくても判読できるテキストを使用していること
• ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
• 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

【引用】検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

日本語（左図）では[スマホ対応]、英語（右図）は[Mobile-friendly]と表示されます。

そして、「Googleではモバイル・フレンドリーの条件をランキング要素として使用することも実験中です。」という記載がありますので、近い将来には、”見やすさ” だけではなく、検索結果のランキングに影響しそうです。

モバイル対応を始めよう

Googleでは、サイトやブログのモバイル対応のガイダンスとして、 ウェブマスター向けモバイルガイド を提供してくれています。

モバイル フレンドリー テスト

この中にサイトやブログがモバイルに最適化されているかを確認するために モバイル フレンドリー テスト が用意されています。自分のサイトやブログをGoogleがモバイルに最適化されていると判断しているかを確認しましょう。

確認は簡単で、下記画面でURLを入力して「分析実行」ボタンをクリックするだけです。

問題がなければ下記のように「問題ありません。このページはモバイル フレンドリーです。」と表示されます。またGoogleがこのサイトを実際にどのように見ているのかがイメージとして表示されます。

このモバイル フレンドリー テストでお墨付きがもらえれば、前述したGoogleモバイル検索の結果で、[スマホ対応]ラベルが付加されます。

PageSpeed Insights でモバイルの操作性を向上させる

モバイル フレンドリー テスト で問題がなかったとしても、まだ改善できることは見つけられます。そのひとつが、PageSpeed Insights です。

PageSpeed Insights は、ページのパフォーマンス（表示速度）を測定し、改善点を指摘してくれるツールですが、PCとモバイルと両方の表示で測定を行ってくれます。（Google ウェブマスター向け公式ブログ: PageSpeed Insights を使ってサイトのモバイル操作性を向上させましょう）

1) PageSpeed Insights の実行

「ウェブページのURLを入力」欄にURLを入力して「分析」をクリックします。

2）PageSpeed Insights の実行結果

ブログのモバイル対応について考えてみた | 象と散歩 でチェックしてみましたが、58/100 点と思ったより点数が高くなりません。

改善できる点はないかと詳細を確認すると、「次のスクリプトの非同期バージョンを使用してください」という中に Google +1 のスクリプトが含まれていましたのでこちらを改善します。

Google +1のJavaScripitを非同期にする

Google +１のJavaScripitを非同期にする方法については、+1 ボタン - Google+ Platform の JavaScript の非同期読み込みに記載がありますので こちら を参考にしてください。

ヒント: パフォーマンスを最高にするには、このコードを最後の +1 タグの直後に配置します。

とありますが、</Body>タグの直前に記載すれば大丈夫です。

3) 修正後の再チェック

Google +1のJavaScriptを変更して再度、PageSpeed Insights で確認すると、58/100 → 60/100 へと2ポイント改善されました。

PageSpeed Insights のルール に日本語での解説もありますが、Bloggerを利用している場合には、これ以上の改善はできなそうです。

４）ユーザーエクスペリエンス

PageSpeed Insightsでは「速度」以外にも「ユーザーエクスペリエンス」についても評価してくれます。こちらは 96/100 で修正が必要な項目はありませんでした。

ウェブマスターツール

Googleウェブマスターツールでもモバイル ユーザビリティのチェックができます。チェックできる内容は以下の６点です。

• Flash が使用されています
• ビューポートが設定されていません
• 固定幅のビューポート
• コンテンツのサイズがビューポートに対応していません
• フォントサイズが小です
• タップ要素同士が近すぎます

詳細は、モバイル ユーザビリティ - ウェブマスター ツール ヘルプ で確認できます。

まとめ

Googleが強く推奨するだけではなく、モバイルからのアクセスは増え続けていますので、モバイル ユーザ体験の向上は今や必須です。

スマホで検索して、開いた途端に見る気が失せるサイトもまだ少なくありません。折角、Googleが無償でモバイル ユーザビリティ、表示速度など各種チェックツールと変更方法まで教えてくれているので、是非、修正可能な範囲で対応しましょう。

【おまけ】モバイル・ユーザの実態調査（Our Mobile Planet)

Googleが提供するモバイル向けのレポートとして、各国のモバイルユーザの実態をまとめた Our Mobile Planet があります。2013年のレポートなので鮮度は落ちてしまいましたが、モバイルユーザーの動向としては参考になります。

自分でグラフも作れる Our Mobile Planet

また Our Mobile Planet では、2011～2013年のデータを使って自分で簡単なグラフを作成することができます。

例えば、下記はスマホでどのくらいの頻度でウェブにアクセスをしているかを示したグラフで、83％のスマホ・ユーザーが毎日ウェブサイトにアクセスしていることがわかります。

各国との違いも比較できるので、2014年のデータも追加されることを願います。

ブログのモバイル対応について考えてみた

ここ数年でモバイルのアクセス数も随分と増えたと思い、Googleアナリティクスで確認をしてみると、1年の間でもモバイルは増加し、デスクトップとタブレットのカテゴリが減少しています。直近1ヶ月では4割がモバイルからのアクセスになっています。



自分がブログで使っているBloggerは、モバイルテンプレートを選択すればある程度は整形して表示してくれます。しかし、直近でエントリーした「検索エンジンでブログを検索対象とする方法」をiPhoneで閲覧すると画像は自動的にリサイズされていますが、Youtubeと表は、はみ出して、かなりカッコ悪い状態です。モバイルユーザーの経験価値を高めねば。

  

と、いうことで ”Youtube” と ”表（table）” のレスポンシブル対応について調べてみました。

Youtubeのレスポンシブル対応

参考にしたのは、下記のサイトです。タイトルはまさに「Youtube（その他iframeを使った動画）をレスポンシブにする方法」です。

How to make a YouTube (or other iframe) video responsive

スタイルシートの設定で簡単にYoutubeをレスポンシブルにできるとありますので早速試してみました。

Step1

サンプルではクラス名が ”video-container” でしたが、Youtube以外の動画も使わないので ”youtube” にしました。コツは56.25％です。56.25％は、5625/10000 となりますが、この比率は5で割っていくと 1125/2000 → 225/400 → 45/80 → 9/16となります。そうです、HD動画の16:9の比率なんですね。と、How do you convert a percentage (56.25%) into a fraction? にて説明されていました。

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bloggerの場合

上記のスタイルシートがそのまま使えます。どこに記述すればよいかは、引用（blockquote）を格好よく表示する | 象と散歩 を参考にしてください。

Step2

Youtubeから取得した埋め込みコードを上記で作成したクラス名で囲むだけです。



これがサンプルのコードです。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/R_PWp3dEsmI" frameborder="0" allowfullscreen></iframe>
</div>

スマホでのYoutubeの表示確認

「検索エンジンでブログを検索対象とする方法」を修正して確認します。下図左がiPhone（Safari）で右がSurface（IE11） で表示しています。



素晴らしい、レスポンシブになった。

表のレスポンシブ対応

表（table タグ）は配置を変えられないのでレスポンシブにはならないと分かりつつも、世の中には賢い人がいるに違いにない、と、見つけたのが、「10+ Solutions for Responsive Data Tables 」という中にあった方法です。

The Basics

ベーシックで紹介されているのは、すごく簡単な方法でtableタグで表の幅（width）を設定せずにブラウザの表示にまかせるという方法です。

Before

<table border="1" cellpadding="2" cellspacing="0" width="720"><tbody>
<tr>
<td width="360">テスト１行目テスト１行目テスト１行目</td>
<td width="120">テスト２行目</td>
<td width="120">テスト２行目</td>
<td width="120">テスト２行目</td>
</tr>

After

<table border="1" cellpadding="2" cellspacing="0"><tbody>
<tr>
<td>テスト１行目テスト１行目テスト１行目</td>
<td>テスト２行目</td>
<td>テスト３行目</td>
<td>テスト４行目</td>
</tr>

しかし、幅を指定しないと、列が多い場合や文字が多い場合などは、フォーマットが崩れて反って読みづらくなってしまいます。

Mobile-Frendly Table

レスポンシブルではないけど表のフォーマット崩さない方法が、”Mobile-Friendly Table（モバイルにやさしい表）” で紹介されています。モバイルの場合に表を横にスクロールさせる方法です。

しかし、無知な自分にはサンプルコードの使い方がわかりません。

@media screen and (max-width: 640px) {
table {
overflow-x: auto;
display: block;
}
}

そこで似たようなことを試めされている方はいないかと探し、「tableをレスポンシブでも破綻しないようにする簡易的な手法 | webutubutu」 を参考にさせていただきました。

しかし、上記で紹介されているサンプルのスタイルシートではうまくいきませんでした。確かにスマホで、表の横スクロールが可能になりましたが、PCでもスクロールバーが表示されてしまいます。またメディアスクリーンで指定した「表は左右にスクロールできます」が表示されてしまいます。

下記がtableをレスポンシブでも破たんしないようにする簡易的な手法から引用したCSSの記載例です。

.table-wrap{overflow: scroll; position:relative;}
@media screen and (max-width: 1410px) {
.table-wrap:before{
content: "\008868\00306f\005de6\0053f3\00306b\0030b9\0030af\0030ed\0030fc\0030eb\003067\00304d\00307e\003059"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}
}

スマホで表がはみ出してしまう場合の対応【完成形】

と、いうことで、先人たちの知恵を融合してtableのレスポンシブル対応の完成です。tableのスタイルでoverflowをautoにして、display block を追加することで、スマホだけで表をスクロールできるようになりました。

またメディアクエリの max-widthを640pxにすることでスマホだけで表上にメッセージを表示させることができました。640pxにする理由がわかりません。iPhoneでは350pxの表までははみ出さずに表示できたので max-width の値を350px前後にも変更してみましたがうまくいきませんでした。

スクロールを示唆する文言は、スマホ対応なのでスクロールではなく、「表は左右にスワイプ可」としました。

下記がサンプルのスタイルシートになります。

.table {
overflow: auto; display: block; position:relative;
}
@media screen and (max-width: 640px) {
.table:before{
content: "\08868\0306f\05de6\053f3\0306b\030b9\030ef\030a4\030d7\053ef"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}

iPhoneでの表示は下記のようになります。

まとめ

今回は、ちょうど気になったYoutubeと表のレスポンシブル対応でしたが、スマホからのアクセスは、これからも増え続けていくと思います。適宜ユーザビリティ強化は図っていきたいと思います。

先ずは、モバイルでのアクセスが多いコンテンツから少しずつ修正していきたいと思います。