ご存知でしたか？俳優の阿部寛さんのホームページが、ウェブ制作業界で時々話題になるってこと。
アクセスしてみると昔懐かしいデザインが表示されるため、公式なのか疑ってしまいますが、本当に公式サイトなのです。Wikipediaによると元々ファンサイトだったものだとか。
ファンが作ったサイトをそのまま公式にするというストーリーもまた、情報拡散のネタになっているようです。俳優のウェブサイトとして情報更新はしっかり行っているため、話題性による集客、来訪者に対しての情報発信はバッチリ。
ということでウェブサイトの形としてある意味正解なのだと私は思っていますし、ウエブサイトに必要なものって何なのだろうかと考えさせられます。

阿部寛さんのサイトは今のままで良いと個人的には思いますが、会社のウェブサイトの場合は話が別です。ページデザインが古いままだと、就職活動中の学生にも印象が悪くなってしまいます。一度社内で自社サイトについて意見を集めてみたら面白いですよ。

下記は、私の思う「昔っぽい」ウェブです。

・サイト幅がやけに狭い
・TOP画像がフラッシュ表示されている
・動きが全くない
・アクセスカウンタが設置されている
・写真が小さい
・文字が小さい
・スマートフォン対応がされていない
・リンク文字が真っ青
・文字が流れている（いわゆるマーキー）
・2重罫線の表組（いわゆるテーブルデザイン）
・当ページはリンクフリーです。という文言の表記
・「●●のホームページ」というタイトル
・勝手に電子音が流れる

こうやって箇条書きにしてみると、昔っぽいというのは閲覧側の端末の進化やネットワーク自体のスピードアップに対応していないということがわかります。
見た目上の問題だけならまだしも、作り方が古いとGoogleなどの検索エンジンにも評価されづらくなってしまうので、その点はご注意ください。

▼阿部寛のホームページ

”スマホ対応”のリニューアル案件が増えています。今日は、制作サイドとして気を付けている点をご紹介しますので参考にしてください。

★タップしやすいか

何といってもパソコンとの違いは「画面をタップして操作する」ことです。タップできると思ったのにタップできなかったり、タップできるところがどこなのかが瞬時で判断できなかったりでは困ります。
タップ可能な、リンクがはられているもの（ボタン、テキスト、アイコン）の色はなるべく統一するなどデザインを工夫しています。
また、スマホのディスプレイは小さいので、要素を詰め込み過ぎると、各セクションやパーツが小さくなりすぎて、タップミスに繋がります。行間、ボタン間のマージンをしっかりとらなければなりません。
Appleガイドラインには「タップのターゲット：コントロール要素は44×44ポイント以上の大きさで…」とあります。

★ターゲットユーザーに合わせて

たとえば、ヘッダー右上の三本線でメニューだと分かる人はどれくらいいるでしょうか。三本線の下にmenuと入れたほうが良いかもしれません。
タップすると詳細コンテンツが開く、いわゆる「アコーディオン」。「∨」と書いてあればタップしてもらえるでよしょうか。「詳細をみる」と書いておいたほうが良いでしょうか。
ターゲットユーザーに合わせた設計・デザインが大切です。

同じように、フォントサイズに注意を払う必要があります。弊社の場合、本文テキストのフォントサイズは14px未満にはしないようにしていますが（このサイトのフォントサイズは15px）、年齢層が高い場合は、16pxかまたはそれ以上にすることも多いです。

日本では誰もが自由にインターネットでいろいろなサイトを閲覧することができますが、北朝鮮や中国ではいくつか制限がかけられていることをご存知でしょうか。

まず北朝鮮ではパソコンを購入するにも政府に許可を得なければならず、パソコンの販売価格は平均給与の3倍相当とのこと。そのため、インターネットにアクセスできる人口は1万人にも満たないそうで、しかも利用者がどのようなサイトにアクセスしたのかまで記録されてしまうのだとか……。

また中国では、特定のサイトに対して中国政府が規制をかけています。例えば日本でおなじみの検索エンジン「Google」や、動画サービスの「Youtube」「ニコニコ動画」は見ることができませんし、「Facebook」「Twitter」「Instagram」といったSNSや、「LINE」までもが利用できないのです。

どうしてこのような制限がかけられているのか理由は明らかにされていませんが、この2ヶ国は共に情報規制をしているとされているため、国民に知られてはまずい情報を隠す目的でインターネットの規制をしているのではないかと言われています。

自由にインターネットができるのは、結構ありがたいことなんだなぁと思ってしまいますね。

SNSのタイムラインでレシピ動画をよく目にするようになりました。
早回しになっていてテンポよく見れ、しかも分かりやすいです。料理動画の専用サイトや専用アプリも出てきています。ある料理研究家が「従来のレシピだけじゃ情報が少なすぎて、料理は再現できない。その点動画は情報量が多いので、各工程で何をどうやってやっているのかがかなり分かる。そのうちレシピ本がなくなってもおかしくない。一番良いのは実際に作っているのを見ることだけど」と言っていたのを思い出しました。

さっき私のfacebookのニュースフィードを見たら、3スクロールして動画広告や動画がアップされている投稿が3本ありました。絵が動いて目がそっちにいってしまう、ということもあって、結構見てしまいます。

実際に弊社でfacebook広告の運用をお手伝いさせていただいている案件で動画の広告を出してみたところ、広告のクリック率が上がりました。動画については制作をどうするかが課題ではありますが、SNSとの親和性が高いので、動画を活用したコンテンツや広告はまだまだ増えていくでしょう。

仕事終わりの居酒屋で、とりあえずの生ビールを頼みました。
運ばれてきたジョッキの下にQRコードが記載されたシートが置いてありました。
「注文はQRコードを読み込んで頂き、ご自身のスマホから注文してください」と店員さん。
一緒に飲んでいた全員が言われた通りにQRコードを読み込んで、専用アプリをダウンロードしました。
アプリを開くとメニュー画面が表示されて、刺身をタップすると詳しい画像や産地まで書かれていました。

なるほどなるほど。

スマホなら各自で画面を見られるから、タッチパネル式の注文端末のように仲間内で回す必要がない。
会計時の割り勘計算も常時確認できます。
支払いが終えると、次回来店割引のクーポンが表示されました。何と効率的な仕組みなんでしょう。

店側のメリットは、専用端末の初期投資は不要だしホールスタッフのオペレーションも軽減されること。
さらに、ひとりひとりの注文データの蓄積から得られる情報が、メニュー開発やキャンペーンなどに役立てることができるようです。

このシステムに味気なさを感じてしまったことも書いておきます。

テレビや新聞のニュースとインターネットのニュースの最も大きな違いのひとつは、読者が記事に対してコメントを寄せられることです。テレビや新聞のニュースは発信者からの情報を読者が一方的に受け取るだけですが、ネットニュースでは読者からのコメントをあわせて読めるサイトが多く、他の読者がニュースに対してどんな感想を持ったのかを知ることができます。読者の生の声を知ることができるのはネットニュースの大きな特長だと言えるでしょう。

ただし、このコメントを「国民の総意」のように信じ切ってしまうのは良くありません。なぜなら、同じ内容のニュースでも、サイトによってコメントの傾向がまったく異なるからです。

例えばFacebookと連動したコメント欄を設置しているサイトでは、基本的に実名でコメントが投稿されるため、比較的良心的で柔らかいコメントが寄せられることが多いです。一方、匿名でコメントができるサイトでは特に過激な批判のコメントが付きやすい傾向があります。それだけを読めば「日本人はみんな怒ってるんだな」と思えても、他のサイトやSNSなどでの反応も見てみると、批判的なのは一部のニュースサイトのコメント欄だけだった、なんていうこともよくあるのです。

インターネットでは誰でも簡単に情報が発信できる分、本当に正しい情報なのかどうかは自分で見定めなければならないというわかりやすい例だと思います。

今週、あるサイトのサーバー移管をしました。
経費削減のため、お客様の方でデータセンターでホスティングしていたサーバーから、エックスサーバーというレンタルサーバーに変えました。

サーバーが変わると、SSLサーバー証明書を新たに発行して設定する必要があります。SSL通信や、SSLサーバー証明書についての詳細はここでは省きますが、簡単にいうと、ブラウザとサーバー間の通信を暗号化してくれるものです。ブラウザのアドレス欄にhttpsと表示されていて、鍵マークが表示されていたら、そのサーバーにはSSLサーバー証明書が設定されていて、通信が暗号化されている、ということになります。

SSLサーバー証明書を発行している会社はさまざまあり、価格もバラバラです。
有名なところでは、シマンテック社（旧日本ベリサイン）のものが81,000円/年〜219,000円/年。弊社でもよく使っているのがジオトラストのクイックSSLというもので、31,300円/年です（価格は定価で、購入するサイトやサーバー会社によって値段が変わります）。

この価格の違いは何かというと、発行している会社の認証方法の違いで、価格が上がるほど審査のハードルが上がります。一番価格が高いものは、登記事項証明書が必要だったり、担当者の在籍確認があったり、登録住所が実在するかの確認が書類で行われたり、という形になります。

ここまで違うと、暗号化の仕方や強度も違いがありそうですが、ないのです。
ということで、価格の高い証明書を使うことによって「ウチは厳しい審査を通過したサイトです」ということを示すことになります。対外的な信頼度の違いと言えばよいでしょうか。クレジットカードのブランドの違いで考えれば分かりやすいかもしれません。

しかし、通常インターネットをしていて「このサイトはどこのSSLサーバー証明書を使っているのかな？」と気にすることは…まずありませんね。なので、特に理由がない限りは無料で使えるSSLサーバー証明書（Let’s Encryptなど）で十分ではないか、と思います。
既に書いた通り、暗号化の強度に違いはないのですから。

仕事中、大学時代の先輩から突然、「いま暇？」とFacebookメッセージが届きました。
なんだかいつもと語り口が違うと思ったのですが、そのままやり取りが始まりました。

先輩「近くにコンビにある？」
わたし「ありますよ」
先輩「コンビニでBitCash（※）カードを何枚か買ってほしいんだけど」
わたし「仕事中なので後でいいですか？」
先輩「今急ぎで必要なの。すぐ買ってきて」
わたし「なんでですか？」

こんな感じです。実際はこのあとも「なんでですか？」「忙しいからあとで」というようなやりとりが続きました。
途中で、あっ先輩アカウント乗っ取られたんだって気づきました。
「（BitCashを）購入したら、ＩＤの写真を送って」と言われて確信しました。

数時間後に、乗っ取られていました、という本人からのメールが来ました。わたしに被害が無かったことを知って先輩もひと安心したようですが、乗っ取りって他人事ではないなと改めて思いました。

今回はFacebookでしたが、LINEもGoogleもすべてアカウントは乗っ取られてしまう可能性があります。各サービス共通のパスワードを使っていると次々と乗っ取られてしまう可能性も大きいです。

先日「サイバー防災訓練」というサイトが公開されました。そこではLINEの乗っ取りを疑似体験できるようになっています。突然自分のアイコンや友達リストが出てきて、ドキッとさせられますけど、スマートフォンから「サイバー防災訓練」と検索して体験してみてください。

乗っ取りに対する一番の対応策は「2段階認証」です。
設定方法については各サイトに書いてありますので、被害を受ける前に設定することをお勧めします。

※BitCashとは

近年、スポーツでITやデータを活用しているというニュースを目にする機会が増えてきた気がします。

サッカーではGPSデータを使用して、選手の走行距離やボールが侵入したエリア頻度などのデータを取得できるようになり、解説者の言葉にも説得力が増しました。「デジタルブラジャー」なるGPS装置を選手に装着させ、細かいコンディションの変化や体の曲がり具合などを計測し、怪我の予防に役立てているサッカークラブもあるそうです。

野球ではピッチャーが投げた球の質を数値化し、「この投手の球はこう打てば飛ぶ」という理論づけを可能にしたとされる最先端の分析機器がメジャーリーグの全球団で導入され、日本のプロ野球チームでも2014年頃から普及し始めました。現在では中日ドラゴンズと千葉ロッテマリーンズを除く10球団が導入済とのことですが、今年のプロ野球の順位に目を向けてみると、この機器を導入していない2球団はともに大きく負け越し、逆に最も早くに導入したとされている東北楽天イーグルスは首位を独走中。結果に如実に現れているのでなかなか面白いです。

これから先、サッカーや野球に限らずさまざまなスポーツでITやデータが導入されていくことでしょう。データの活用によって競技の質がガラリと変わり、新たな面白さが生まれていく。そんなことが起こってもおかしくないのかもしれません。

「世にも奇妙な物語」「笑うセールスマン」「アウターゾーン」が好きな方におすすめのドラマシリーズが、Netflixの「Black Mirror」です。1話完結で気軽に見られるのですが、内容は非常に重い。
公式サイトの説明では”急速な進化を遂げたテクノロジーがもたらす歪みと人間の醜い業が交わる時、そこに広がるのは世にも不思議で奇妙な世界…”とあるのですが、近未来の描き方が絶妙で、本当に起こるのではという作り込まれた世界観に1話見て引き込まれました。とくにシーズン3がおすすめです。
ちなみに、基本はバッドエンドなので、見終わった後には気持ちがどーんと沈みます。ですが、私の場合は、見た事自体の後悔はありませんでした。

シーズン3の「秘密」は、防犯カメラをハックされた少年がハッカーに脅される話を描いているのですが、近未来ですらなくて、現在のテクノロジーを駆使した犯罪を描いていて底知れぬ恐怖を感じました。

最近、スマホで確認できる監視カメラの普及が進んだため、屋内、屋外ともにカメラがたくさんあります。ドラマを見た後は、屋外で買い物をするときは、後ろに監視カメラがないか確認するようになってしまいました。

世界中の監視カメラの映像を見る事が出来るウェブサイトが数年前に話題になりましたが、今もまだ残っています。サイトをみると少し気分が悪くなるので、見る事はお勧めしませんが。
見られているかもしれない、ということを意識して生活しないと危ないなと思っています。Webにつながる、ということは、良い意味でも悪い意味でも世界中に一瞬で広まること。そして、広まった情報は消去しきれない事、というのは常に意識しておきたいことです。

以前のECサイトのタイプ紹介の記事で、レンタルショッピングカートを使えば、機能の制限はあるものの、初期費用も月額も抑えられるということを書きました。
それでもお金がかかってしまうのも事実で、始めるのに躊躇してしまったり、お試し運用ができればいいのにと思うこともあるかもしれません。

そんな人にピッタリのサービスがあります。BASEとSTORESです。

BASE
https://thebase.in/
STORES
https://stores.jp/

それぞれ、機能に制限はありますが、決済手数料も含めて費用なしで使うことができます。
ECに関して迷いがある方は、どちらかのサービスでひとまずアカウントを作って、まずやってみるのも良いかもしれません。

たとえば、アマゾンの商品ページで最寄り図書館の在庫情報を表示する。なんていうことができるブラウザ拡張機能。とても便利なのですが、周りを見てみると使っている人が少ないのです。
WEB制作に関する仕事をしている人にとって便利なものが多いのですが、今回は制作者ではなくても便利な拡張機能を5つ紹介します。

1.その本、図書館にあります。
今見ている商品が、近くの図書館にあるかをチェックできる機能です。
図書館派の方や、買うほどではない本、高価な本を試し読みしたいときに使うことをオススメします。
https://goo.gl/rGZPoh

2.Keepa – Amazon Price Tracker
プライストラッカーの名前の通り、現在見ている商品のアマゾンでの金額推移が見られる拡張ツールです。
値段指定での通知も出来るので、この値段だったら買うのになぁという金額で設定しましょう。
https://goo.gl/1WqXFo

3.Undo Closed Tabs Button
Webサイトを見ていて、間違ってタブを閉じてしまうことありますよね。閉じたタブを復活させるだけですが、便利です。
https://goo.gl/rK12v4
ちなみに閉じたタブの復活は各ブラウザでショートカットキーも設定されているので、ショートカットキーを覚えておくと不要なツールではあります。

4.Smart QrCode Generator
今パソコンで見ているページをスマートフォンですぐに見たい。というときに便利です。
https://goo.gl/ieZjrP

5.Search Preview
グーグルの検索結果にサイトのスクリーンショットも表示するだけですが、使ってみるとかなり便利です。
https://goo.gl/wWKmf5

拡張機能をおいている「Chromeウェブストア」ですが、探し出すと面白くてあっという間に時間が過ぎてしまいます。
https://goo.gl/e4L7el

今回はGoogle Chromeの拡張機能を紹介しましたが、Safari、Firefox、Internet Explorerのそれぞれで拡張機能ダウンロードサイトがあるので、ぜひご覧ください。
ちなみに、Androidのアプリ同様、スパムアプリなどもあるので、使用については自己責任にてお願いします。

インターネット上で資料のやり取りをするときはPDFファイルを活用することが多いですよね。PDFは最新のパソコンであれば問題なく閲覧できますし、フォントやソフト等の有無に関わらず同じデータを閲覧できるため、データを共有するのにはとても便利なファイル形式なのです。

しかし、PDFを編集するのにはAcrobat DCなどの有料の専用ソフトが必要で、「1ページだけ送れたら十分なのに、PDFを編集できないから10ページ分のファイルを送らなければならない」というような悩みもつきもの。データが重いとメールなどでも取り扱いにくく、いいことは何もありません。

そんなときに便利なのが、ウェブ上でPDFの編集ができるサービスです。
僕はI LOVE PDFというサービスを愛用しているのですが、不要なページがあるPDFを分割したり、複数のPDFを統合したり、PDFのサイズを圧縮したりといった編集作業をとても簡単に行なえるのです。こちらの他にもいくつか同様のサイトがありますが、個人的には直感的に操作できるI LOVE PDFがおすすめです。

サイズの大きなファイルをメールで送ってしまうと、サーバーで弾かれてしまう可能性が非常に高いです。「データを送ったつもりが届いていなかった」なんてことがあれば、思わぬトラブルに発展してしまってもおかしくないです。PDFのやり取りをする場合は、送る前にファイルのサイズやデータの中身を気にしてみてはいかがでしょうか。