2014年12月の記事一覧



●Noto Sans Japaneseの指定方法はDTP Transitを

新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ〜」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。


実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。

  • DTP Transit

  • でも、この指定の方法って正式なモノなのか?って思ってしまいました。

    (見たい人は http://www.dtp-transit.jp/css/styles.css の中で「Noto」を検索してね)

    念のため正式な指定の方法をGoogle Fontsのページで確認しておくことは制作者として正しいことかなと。



    ●正式ドキュメントを探してみる

    なぜかって?

    「Noto Sans」で検索して、検索結果で出てきた最初のページを見てみます。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-01

    画像出典:google font noto sans(Google 検索)



    以下のページが出てきます。

    なんかごちゃごちゃ書いてありますけど、右上に「Open Noto Sans in Google Fonts」って書いてあるのでクリック!

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-02

    画像出典:Noto Sans(Google Fonts)



    するとGoogle FontsのNoto Sansのページが出てきます。「勝ったッ! 第3部完!」って思うじゃないですか。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-05

    画像出典:Google Fonts


    記事の続きを読む




    お客様への情報発信は内容もさることながら情報配信する時間も大切、と言われていますが、様々な時間に情報配信して、反応が良かった時間を元に「この時間帯が適切だろう」として最適化が薦められると思います。

    これらの最適な配信時間を導き出すのに結構な労力が掛かるように思えますが、売れるネット広告社の加藤 公一 レオさん監修のマンガで、誰でもすぐに最適な時間の候補を出せる技をズバッと書かれていたので紹介します。


    掲載されていたのはネットショップ担当者フォーラムの連載「ツーステップマーケティングのコツはフォローメールにあり(連載第5回) 2,980円の商品だけど500円で売っちゃう! ツーステップマーケティングに挑戦よ!」です。


    記事の続きを読む



    楽天Koboのサイト(楽天ブックスの電子書籍のページ)で「あ、これ便利かも…」って機能があったので紹介します。

    それは「シリーズまとめ買い機能」です。


    どんな機能かを紹介します。

    以下の画像は楽天ブックスの電子書籍のコーナーで「アイドルマスター」で検索した結果です。

    20141222-楽天Koboでアイドルマスターのコミックを購入-01

    画像出典:アイドルマスター の検索結果(楽天ブックス)


    コミックでは既に何巻か出版されている場合がありますよね。アイドルマスターのコミックも上の画像の様に何巻か出版されているものがあります。

    では、コミックの表紙をクリックして詳細を開いてみます。

    すると、商品の詳細ページに「シリーズ商品」という欄があります。

    この欄を見ると、REXコミックスの「THE IDOLM@STER」で現在発刊されている3巻分がすべて掲載されています。

    この「シリーズ商品」の欄ですべてにチェックを入れて「チェックした商品をかごに入れて買い物を続ける」という黄色のボタンを押すと、カートに一気に入ります。コレは便利!

    20141222-楽天Koboでアイドルマスターのコミックを購入-02

    画像出典:THE IDOLM@STER(1) - まな - 5591203486080(楽天Kobo電子書籍ストア)

    記事の続きを読む



    楽天の電子書籍koboの新刊・セール情報を発信している「Koboでいいのだ。」というサイトがあります。

    20141221-コボでいいのだTwitterアカウントをフォローしたら…-02

    画像出典:Koboでいいのだ。


    こちらのサイトではTwitterアカウントも開設しています。


    私は重度の電子書籍ユーザーではありませんが、少なくともKindleよりはKoboで購入しているので、Twitterアカウントをフォローしてみました。

    Twitterは他のアカウントをフォローすると、フォローしたアカウントに基づいたオススメ情報を送ってくるのですが、その内容がちょっと酷かった(笑)ので紹介します。

    そのメールがこちら。

    記事の続きを読む



    今回もフォームの最適化について書いていこうと思います。


    先日の「【Web制作】フォームの最適化しようと、いくつか表現を変えてみたテスト【初心者向け】(画像あり)」という記事の引用の中で紹介した「こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由」(マミオン有限会社)のページで以下のアドバイスが書かれていました。

    シニアのフォーム入力操作を観察していると、誤ってページから離脱してしまい、再びフォームのページに戻ったら最初から全部やりなおし…という悲しいシーンによく遭遇します。フォームからフォーカスが外れた状態なのに気付かず、文字を修正しようとしてbackspaceキーを押してしまうのです。

    こうした悲劇を防ぐためには、上記のHOME’S介護のように確認メッセージを出す方法がよいでしょう。実装方法も簡単なので、費用対効果が高い対策ですね。

    [jQuery] ページを離れる際に確認メッセージを出す方法(18th Tech Note)

    こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

    なるほど。Backspaceキーが「前のページに戻る」のショートカットキーになっていることに気がつかずに、または、意図せずショートカットキーの機能が有効になってページを移動してしまうというわけですね。


    これは確かにストレスになります。


    早速紹介されていたページを見て、jQueryのスクリプトを見てみました。

    これはこのままでも使えるので、皆さん使ってみると良いと思います。

    ページを移動しようとすると、以下の様な「このページから移動しますか? 入力したデータは保存されません。[このページから移動する][このページに留まる]」という確認用のダイアログが出てきます(画面はFirefox)。

    20141218-jQueryでフォームページを移動する時に確認する-01


    ですが、個人的な見地から、もう少し修正すると更に良くなると考えたので、修正版を公開します。

    記事の続きを読む



    小杉聖さんのFacebookの投稿を見て、自分が関わっているサイトのフォームを直してみようかなと思ってみた。


    シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さすが・・・!

    エラー項目の見せ方が素敵で目から鱗が落ちた。

    こういうのってプラグインに頼ってるとなかなかできないよね。

    入力欄は統合したほうがいいのも同意。

    今は色々なjsライブラリあるし。

    「名前と名字」って文言は、わざとなのかなあ?

    こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

    小杉 聖 - シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さ...
    投稿 by 小杉 聖.


    一気に変えるのではなく、少しずつ変えてみて、何が良いのか考えてみようと思います。


    ●とあるCMSの標準フォーム

    まずはとあるCMSから出力される標準の形。

    20141217-フォームの表示のさせ方-01

    これって今でも見る形ですけど、「*」が何を表しているのか分かりづらい!! わかるかこんなの!

    知っている人なら知っているでしょうけど、「*」は「必須」を意味しています。申し訳程度に「*は入力必須項目です」とフォームに書いてあるけど(それもフォームの末尾に!)、普通の人は分かりませんわ。

    記事の続きを読む



    ●videoタグは複数ソースが設定できて便利

    HTML5のvideoタグでは以下のように書くことで複数のファイルソースを指定することができます。

    <video>
        <source src="example.mp4">
         <source src="example.webm">
        <img src="example.gif">
     </video>


    上記の例だと、

    • 最初に「example.mp4」の再生をトライ
    • 「example.mp4」を再生できない場合、「example.webm」の再生のトライ
    • 「example.webm」を再生できない場合、「example.gif」を表示

    となります。

    簡単な書き方で、再生できない場合の複数のソースの指定(フォールバック)ができて便利ですね。


    でも、複数のソースの指定そのものが面倒ではないですか?

    ファイルも複数用意しなければなりませんし…。今回の例の場合、MP4形式の動画・WebM形式の動画・アニメーションGIFの3種類と、常に時間がないWeb制作者には大きな負担です。

    記事の続きを読む



    20141214-雪道の自動車運転-01

    新潟もかなりの大雪が降ってきた。本格的な冬到来だ。

    雪が降ってきた/積もっている時の自動車での運転で安全運転のために実行すべき3つのことを書いておきたい。


    ●昼間でもライトを点けろ

    雪が降り始めると、とにかく道が見えない、車も見えないということになりがち。

    特に田んぼの真ん中にある道は、降り積もった雪に風が加わると、地吹雪になって視界が無くなくこともしばしば。

    そんな状況の時は昼間でもライトをぜひ点けて欲しい。


    なぜか。

    ライトを点けると、テールランプも点く。そのテールランプの赤が真っ白な景色の中では目立つからだ。

    20141214-雪道の自動車運転-02

    昼間ライトを点けることをしない人の言い分はこうだ。

    「ライト点けなくても前が見えるでしょ?」

    !? 何を言っているのかと。

    事故というものは自分が起こすものと、他人が自分に起こすものがあって、いわゆる「もらい事故」を防ぐためにライトを点けるのである。

    自分の車がここにいますよ!とアピールせずに、存在を認識してもらわなければ後ろや前から突っこまれても仕方がない。存在がないと思われているのだから。

    自分が事故を起こさないようにするのは当然だが、事故を起こされないようにするのも重要だ。

    記事の続きを読む



    20141212-Adobe-Media-EncorderでWebM動画変換をする-05

    WebM形式の動画って需要があるのでしょうか…といきなりネガティブな書き出しですが、直近のお仕事でWebM動画があった方がいいかもしれない案件があったので(主にFirefox方面)、WebM動画を作ってみることにしました。



    ●WebM形式動画に対応しているブラウザー

    WebMってどのブラウザーで対応しているの?という疑問がありますが

    • Chrome
    • Firefox
    • Opera

    が対応しています。SafariやInternet Explorerは対応していないです。

    デスクトップOSの標準ブラウザーが未対応です(^-^;

    なぜこうなっているのかは以下のページを読むと分かります。


    記事の続きを読む



    20141209-Surface-Pro-2でPhotoshop-CC-2014を使う-01

    今さらですが、Surface Pro 2でPhotoshop CC 2014を本格的に使い始めました。今まではPhotoshop CS4がメインだったもので。


    そこで問題が発生。Photoshop CC 2014をSurface Pro 2で起動すると何か遅い。

    それも起動時に「ディスプレイドライバーの評価待ちを中断しました。グラフィックハードウェアを使用する機能拡張が無効になっています。メーカーのWebサイトで最新のソフトウェアを確認してください。」と表示されてしまいます。

    Surface Pro 2はきちんとWindows Updateして、グラフィックチップのディスプレイドライバーがMicrosoft製の最新なのですが…(Intel製の最新とは言わない)。

    20141209-Surface-Pro-2でPhotoshop-CC-2014を使う-02


    環境設定のパフォーマンスでも「グラフィックプロセッサーの設定」の設定ができない状態です。

    20141209-Surface-Pro-2でPhotoshop-CC-2014を使う-04

    記事の続きを読む




    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索