コネタ

旅モノ

【Suica ×ネット予約】えきねっと新幹線eチケットサービスを利用してみたぞ

2020年6月下旬、新型コロナの影響で移動自粛されていたものの、都道府県を跨ぐ移動が国的に解禁されることになる。

しばらく様子を見ながらという形が大事だと思うが、JR東日本地域に住む人に便利なサービスが「えきねっと新幹線eチケットサービス」というやつ。早速、これで首都圏から新潟まで往復旅行してみたので使い勝手をレポートしたい。

結論を言うと、簡単、便利、誰でも使いやすいの3拍子。

えきねっと新幹線eチケットサービスとは?

eチケット系のサービスは、スマホがそれ用の機能に対応してなかったりして、格安SIMとかSIMフリー端末だと出来なかったりする場合がある。

でも、えきねっと新幹線eチケットサービスは、PCやスマホで予約~カード決済して、手持ちの普段使っている普通のSuicaの番号を入力して関連付けるだけで使える。つまり、今このサイトを見ている人でSuicaを持っているなら、ほぼ使えるということ。スマホ完結型と違って、使える人が大幅に多いのが特徴だ。

必要なものをまとめると、

・PC、スマホなどネット環境
・クレジットカードなどの決済手段
・Suica

この3つ程度ということになる。

メリット1 新幹線を割引で予約できる

新幹線は券売機などでまともにチケットを買うと高いというのが普通。

思い立った時にすぐ乗れるという利点もあるのだが、予め旅程が決まっているなら「えきねっと新幹線eチケットサービス」を使った方が指定席分が割引になる。

割引率は予約のタイミングによるが、前日でも10%引きになるし、数日前でも15%引きになる。もっと前だとさらに割引率が上がる場合もある。但し、販売される数が限られているので、休日や朝、夕方などは売り切れている場合もあるので、早めに購入した方がよいだろう。

メリット2 券売機や窓口に一切出向く必要がない

そんなうまいこと行くのか最初不安だったが、サイト上で予約購入して結び付けたSuicaでタッチすれば新幹線で予定通り目的地に到着できた。

不安な場合はメールなどに予約表が届くし、駅の改札内に紙で座席表を発行することもできる。

デメリット1 新幹線の駅~新幹線の駅まで

このチケットの特徴はあくまで新幹線の駅から新幹線の駅までの旅程ということ。

例えば、東京駅~新潟駅までなどの購入になる。自宅最寄り駅や目的地が新幹線駅の場合は問題ないが、そうでない場合は最寄りの在来線駅~新幹線駅までは別途乗車料金が必要。Suicaに対応したエリアならSuicaにチャージしておけば乗り継ぎはスムーズだが、通常の切符みたいに〇〇圏というような扱いはないのだ。

デメリット2 払い戻しや変更に手数料が必要な場合もある

購入したチケットの条件にもよるが、旅程が変更になった場合や時間に遅れて乗れなかった場合など、払い戻しや変更の手数料が通常の切符より高額になる場合がある。

無料で変更できる場合もあるが、旅程変更が確実になった時は早めにサイトから変更手続きしよう。ここでは細かな金額は示さないが、通常より割引された商品という認識は必要。

デメリット3 新幹線+ホテルで予約した方がトータルで安い場合もある

予め宿泊地なども決めてしまえる場合は、新幹線とホテルがセットになっている旅行商品を使った方が安い場合もある。


ホテルもセットの商品だと直前に予約するのが難しかったり、朝や夕方の新幹線は追加料金がかかる場合もあるので、サクっと移動手段だけ予約できるという意味ではeチケットサービスの方が有利だったりもする。その場合はホテルは自分で予約すると良い。


予約など公式サイトはこちら

公式の細かい説明

予約画面はこちら

WEB制作

【MFI】素人でもわかる! レスポンシブとダイナミックサーベイの違い

現場では上の偉い担当者がレスポンシブとダイナミックサーベイの違いをわかっていないケースがあるので解説してみる。

どちらも一つのWebサイト、WebページをPCとスマホの画面幅に対応させる手法だが、かなり使われている技術や方向性が違う。

レスポンシブWebデザインとは

まずはわかったつもりのレスポンシブから。よくわかっていない担当者が何となくわかったつもりになっているスマホ対応やモバイルファーストインデックス対応がレスポンシブだろう。

正しくはレスポンシブWebデザインという。Webデザインという言葉の通り、デザイナー的にアプローチ方法。

URLの例としては
https://bicyclist.info/
みたいにホントにPCもスマホも全く同じURLで、内部的にもPC用とSP用のHTMLが別々にあるわけではない。

Webページというのは、現実的な最低限的にはHTMLとCSSという2つのファイルで構成されている。補足すると、ブログやCMSなんかの場合はPHPなどのプログラムやデータベースの情報から表示されたりするけど、あくまでWebブラウザが表示するのはHTMLに書き出したもののみ。

一つのURLに対して、HTMLは単一のまま、CSSというデザインを記述したファイルの記述の仕方でPCやスマホ、さらにタブレットPCなどの中間を含めたあらゆるデバイスに対応させる手法。デバイスの種類ではなくて画面幅を認識させてデザインされているのが特徴。

まぁ、GoogleがSEO的に一押しにしているけど、実務的には複雑な作りになったり、メンテナンスに難があったり、サイトによっては向かない場合もある。個人のサイトなど小規模な場合や、ブログ、LPなんかはレスポンシブが向く場合が多い。

ダイナミックサーベイ(動的配信)とは

なんちゃってWeb担当者の中にはレスポンシブと混同して区別付かない困った人もいる。

個人で手打ちで作った静的なサイトだと、よくPCとSPそれぞれのページを作ってJSとかでユーザーエージェントを読み取って分岐させたするね。

https://test.info/pc/
https://test.info/SP/

これだと完全に別々のページとしてHTMLが存在するので、適切にそれをGoogleに伝えないとよろしくない場合がある。まぁ、個人のページだとそこまで致命的にならなかったりもするが。

それに対してダイナミックサーベイはサーバー側の処理(.htaccess)の、同じURLにアクセスした時にユーザーエージェントで判断して、PCとSPで返すHTMLを別々にしている。企業が運営する大規模、複雑なサイトなどに多い。HTMLが違うということはCSSも違うわけで、ページそのものが別物ということである。

Googleのクローラーから見た時も1つのURLにしか見えず、SP用だけ拾うことことになる。PC用とSP用で内容を大きく変えている場合は注意が必要だったりする。サーバーのシステム的な記述で処理してまで実現しているということなので、多くの場合はPCとSPそれぞれが極限まで最適化されている場合が多いだろう。

まとめ ダイナミックサーベイも実務ではよく使われている

単一URLだからと言っても、レスポンシブとダイナミックサーベイの存在し、その違いがよくわかったと思うが、まとめると下記のようになる。

・レスポンシブ
Google推奨方式。
デザイナー的手法でCSSの記述を使い、デバイスの画面幅でPC、SP、中間デバイスに対応。

・ダイナミックサーベイ
一応Googleが認めてはいる方式(昔?)
サーバー、エンジニア的手法で、単一URLでありながら、PCとSPで別々のHTML、CSSを返す。
ECサイトその他、大規模で複雑な企業運営のサイトはこっちの方式が実務では多い。

WEB制作

【Photoshop】画像のフチをグラデーション的にボカす方法

こんなやつ。バナーやメイン画像とかに使う・・・のかな

よくPhotoshop初心者の人に聞かれやすいのが画像のフチをグラデーション的にボカす方法。

結果だけみると簡単そうだけど、意外とPhotoshopの基本操作全般というか、レイヤーマスクや選択範囲などの操作や概念を理解していないと難しかったりする。

だから、ホントの超初心者に教えると意外と手間取ったりする。ボタン一発でやるような機能はないので、基本操作を色々教えないといけないから大変(泣)。

つまり、単一のテクニックというよりはPhotoshopの基本操作を組み合わせて行っているに過ぎないので、ちゃんと基本操作を理解していれば少し考えば楽勝だったりする。

Webサイト用の画像なんかで、特に2013~15年くらいに流行っていたリッチデザインというデザイン手法では多様されていたけど、シンプルと言えばシンプルな見せ方なので、今でも用途によっては使う場面が結構あるかもしれない。

特定の1辺だけをボカす場合

対象の画像を開いてレイヤーパネルの下の方から「レイヤーマスク」を追加する。

レイヤーマスクは色の濃淡によって画像の一部分を隠したりするのに使う機能だが、グラデーションで塗り潰してやれば、グラデーション的に隠すことができる。

初めてやると急にプロになった気分になるかもしれない(笑)

次に、レイヤーマスクが選択状態になっているのを確認して、グラデーション的にしたい場所に選択範囲を作る。

もっと言うと、別にフチじゃなくても、この選択範囲の作り方次第で画像のどの部分でも同じことができる。

Photoshopの画像加工というのは、レイヤーパネルと選択範囲の使いこなしが全てと言っても過言ではないのだ。

選択範囲を作ったら、グラデーションツールで「白~黒」で塗り潰す。この加減でグラデーションの加減が決まるので、気に入った感じになるように調整しよう。

グラテーションを適用したら下が透けていると思うので、下に白いレイヤーを作成する。

勘が鋭い人はわかると思うが、下のレイヤーを黒にすれば黒っぽいグラデーションになる。

Web用の画像だったら、PNGで透明ありで書き出せば背景が透明になるわけだ。

このへんは味噌汁の出汁みたいに各家庭ごとに違うので応用しよう。

4辺をボカす場合

選択範囲やグラデーションツールを使いこなせば4辺をボカすこともできるだろうけど、4辺の場合は別の方法が簡単。

まずは画像全体の選択範囲を作る。

次に「選択範囲を変更」→「境界線」で適当に小さくして、選択範囲を反転する。

「境界をぼかす」で好みにボカしてDeleteキーでグラテーション的に周辺が半透明になるはず。

まとめ グラテーションも使い方次第

デザインは流行り廃りもあるし、グラテーションは使い方によっては手抜きだとか、初心者っぽく見られてしまう場合もあるので使い方が大事。

ここ数年でも、グラデーションを使ったリッチなデザインが流行ったり、一色で塗り潰したフラットなデザインが流行ったりしているけど、そのうち一周してまた戻ってくるのかもしれない。

こういう単純そうな作業でも、基本操作をマスターしていないと意外と難しかったりする。何でもそうだけど基本は大事なのだ。