HTML・CSS

こんにちは、Cocoaウェブディレクターの中島です。

昨今、ウェブサイトやお問い合わせ、クレジットカード入力フォームなどの暗号化が大きなウェブサイトのトレンドとなっています。 SSL化（通信の暗号化）、サイトのHTTPS化を進められたウェブ担当者の方も多いのではないでしょうか。

それもそのはず。情報を盗み見られてしまう！セキュリティやコンプライアンスだという問題もあるのですが、昨年GoogleがSSL化を推し進めようと検索順位に差を設けることや、Chromeをはじめとするブラウザで警告表示を出す、と発表したからです。

GoogleChrome、HTTPS非対応サイトにアクセス時に警告表示へ

検索順位に影響する、世の中全体が情報漏洩に敏感になってきている、とあれば企業はこぞってサイトやフォームのSSL化を進めます。 2017年は、多くのサイトがSSL対応化されると予想されています。

さて、そんな中ですが、実はSSL通信にも3つのレベルがあることはご存知でしたでしょうか？

それを知るためには、まずSSL通信の仕組みについてざっくりと理解する必要があります。

SSL通信のおおまかな仕組み

いびつな図で恐縮ですが、大まかにいうとこんな感じになります。

ユーザーはHTTPSというセキュアなウェブサイトの閲覧によって情報をSSL証明書に基づいた暗号化で送信します。

受け取るサーバーは暗号化された情報を、SSL証明書に基づいて暗号を解除します。

暗号化の方法、および解除方法は中間に立つSSL認証局がSSL証明書という形で発行します。

この3者方式によってSSL通信は成り立っています。

SSL証明書には３つのランクがある

通信の安全性のレベルはどのSSL通信も変わりません。

証明書のランクが影響するのは、通信している先の相手が正しい相手かどうか、です。

例えば、詐欺師などの悪い奴がSSL証明書を取得していたらどうでしょうか。いくら情報を暗号化して送ったところで、意味がないですよね？

以下がSSL証明書の３つのランクになります。

・DV　（Domein Validation）　★ランク

ドメインが存在しているかどうか、Whois情報などによってドメイン取得者が公開されているかどうか

・OV　（Organization Validation）　★★ランク

DVに加えて、電話などによる企業が実在しているかどうかの確認

・EV　（Extended Validation）　★★★ランク

OVに加えて、さらに登記簿などの書類提出が必要

…
Read More

こんにちは。Cocoaウェブデザイナーの中島です。

いよいよ、PS4の拡張モデル、PS4NEOが発表になりましたね。 このPS4NEO、360度仮想現実のVR、4Kディスプレイへの高解像度コンテンツに対応するPS4の拡張追加デバイスです。性能アップによるフレームレートの向上も期待されます。

徐々に、ゆっくりではありますが、ハイエンドユーザー向けの4Kコンテンツが普及しつつあるのを感じます。

もちろん、大多数のユーザーに4Kコンテンツが当たり前のように進むにはまだまだ課題が山積していますが、いずれは4Kが当たり前のようになるのでしょう。東京オリンピックあたりがそのピークになるのかもしれません。気が早すぎますかね？

今回は、その4Kコンテンツがウェブサイトやクリエイティブにどのように影響してくるかを、中島の主観と予測でお伝えしていきたいと思います。

ウェブサイトにおける4Kの意義とは何か

そもそも、テレビなどの動画配信における4Kとウェブサイトの4Kでは持つ意味が大きく違うと考えています。

動画配信における4Kでは、「美しい画質」や「臨場感」、またフレームレート向上による動画の滑らかさに4Kの主目的が置かれています。単純なるスペックの向上です。

DVDからブルーレイ画質へ、地上アナログから地上デジタルへ。ブラウン管から液晶、有機ELディスプレイへ。

コンテンツ画質の向上は、ユーザーへたくさんの臨場感や満足感をもたらしてきました。

しかし、私としてはウェブサイトに関する4Kは別の意味を持つと思います。

もちろん、ウェブサイトといえども、YouTubeやHulu、Netflixなど動画配信メディアでは、画質の向上はポジティブに影響してくると思います。今回は、通常の情報ウェブサイトの話だと思ってください。

私は、ウェブサイトの背景画像が、従来のフルHD画質から4Kになっても、基本的な価値は変化しないと思っています。

なぜなら、画質やクオリティの意味で劣るモバイルデバイスが急速に成長し、PCのシェアが大きく下がっていることから大半のユーザーは現状のスマホやタブレットの画質解像度レベルで十分と感じていると思われます。

しかし、仕事などではいまだにPCによる作業が主流。これはなぜか。

やはり操作性や、１画面内での情報量、処理速度、セキュリティがPC優位だからでしょう。

私は、１画面内での情報量と操作性に注目しています。 この２つのポイントには４Kの意義を十分活かせるからです。

現在のウェブサイトは、最大の横幅が1000px～1500px位を想定し、スマホにも自動対応するレスポンシブデザインが主流です。しかし、4Kディスプレイが普及してくるとどうか。

画面いっぱいまでウェブサイトを拡張するのではなく、複数のブラウザを開き、大きな画面内にいくつものウェブサイトを同時表示するのではないでしょうか。

なぜなら、従来のウェブサイトでは画面内に拡張表示しても余白が増えるだけで、情報量は増えないからです。

ウェブサイトの最大幅を4K標準である横4000pxに最適化すれば、高解像度ディスプレイでも無駄がなく情報を多く整理し、ユーザーを満足させるダイナミックなウェブサイトになります。

ただ４K対応させるだけでは意味がない

じゃあ、従来のレスポンシブデザインのように、横幅4000pxまで対応させればいいのか？

と思われるかもしれませんが、私はそれは危険な考え方だと思っています。

従来のレスポンシブデザインの主流は、1000px程度のPCサイトをスマホでも見やすく、という下位の解像度へ対応するための考え方が中心にありました。

これを上位の解像度（4K）へそのまま適応させてしまうと、ウェブサイトのユーザビリティを大きく損なうことになってしまうと思います。

4Kウェブサイトの基本は、大量の情報を整理して、使いやすく配置することです。

従来よりも一画面内の情報量が増える以上、ユーザーの混乱も今まで以上に増えることとなります。

…
Read More

皆様、こんにちは。Cocoaのウェブデザイナー・ディレクターの中島です。 猛暑と言われていた割に、7月はあまり暑くない日が続きましたね。（東京の話ですが） どうやら8月は強烈な暑さが続くそうですので、お盆休みの脱水症状には十分お気を付けください。 ポケモンGOによる熱中症も非常に増えそうで、不安です。

さて、今回はWebサイト（ホームページ）のセキュリティについて触れておこうと思います。

よく、セキュリティやら保守やら、アップデートやら耳にする機会があると思いますが実際のところWebサイトのセキュリティとは何なのでしょうか。 何となくよくわからないものに不安になったり、コストをかけたりしていませんか？

これより、Webサイトのセキュリティとはいったい何なのかについて、複数の目線より解説していきたいと思います。まずは、ユーザー（利用者）から。

ユーザー側から見たセキュリティ

セキュリティと一概に言っても、大きく分けるとユーザー（利用者）から見たセキュリティと、オーナー（管理者）から見たセキュリティがあります。

ここでは、ユーザー側から見たセキュリティリスクの一例を挙げてみます。

・ クレジットカード情報が流出する

・ 個人情報が不正に取得される

・ 変なウイルス（マルウェア）などに感染させられる

と、上記のようなリスクがあります。

近年はセキュリティの甘いサイトの場合は、ブラウザより警告が出たりしますので、セキュリティの甘いサイトを運営している場合、アクセスが急激に下がったりもしてしまいますね。

また、暗号化通信（SSLなど）を採用していないWebサイトの場合はクレジットカード情報の入力を避けたりする場合もあります。

ユーザーに安心感を与えるセキュリティ対策を行っていないと、当然ユーザーは不安になりそのWebサイトから去ってしまいます。一定のセキュリティを維持する必要があるでしょう。

次に、ユーザーに配慮したセキュリティ対策方法の例を挙げてみます。

ユーザーに配慮したセキュリティ対策

ユーザーサイドのセキュリティ対策の場合、本質的なセキュリティ導入と同じくらい重要なのは、不安感の払拭です。 ユーザーに安心感を与える、という事を優先にしましょう。

・ 個人情報入力ページへの暗号化通信の導入

SSLを導入することで、サイトURLがHTTPSになります。これにより、セキュリティ保護されているページかどうかが一目瞭然になります。主に、決済ページやお問い合わせフォームに設定すると良いでしょう。

・ 個人情報入力ページの入力項目を必要最低限にする

…
Read More

日本でインターネットをする人の中で、スマホのみでネットを閲覧する人は約1/4にも上る（ニールセン調べ）そうで、益々Webサイトをスマホ対応する重要性は増してきています。

そんな中、Web制作の現場では、Webサイトをレスポンシブ Web デザインでリニューアルしたいという要望を受ける機会が非常に多くなってきています。 弊社でも、ここ数年Webサイトのリニューアルはレスポンシブ Web デザインの案件がほとんどです。

そこで、あらためてレスポンシブ Web デザインとは何なのか、ということや、そのメリットやデメリットについて、Web制作の現場の目線から考えてみたいと思います。

また、今回の企画の特徴として、広告代理店や印刷会社の営業担当者の方の様に、Web製作が専門領域ではないものの、クライアントからは相談を受けることが多い方々にもレスポンシブWebデザインの本質が理解できる様に、あくまでわかりやすさを優先して、現場の感覚でお話ししたいと思います。

そもそも、レスポンシブ Web デザインとは何なのか？

まずは前提から再確認しましょう。 そもそもレスポンシブ Web デザインとは何なのでしょうか？

Googleによると

”レスポンシブ Web デザイン（RWD）は、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定です。”

と定義されています。

いきなりよくわからない単語が多いですね…（笑）。 IT業界の人は、横文字使いすぎですよね、もっとわかりやすい日本語を使ってくれないものか…。

ものすごくわかりやすく言い換えると、

”レスポンシブ …
Read More

大きい地図画像や、解像度の高い美しい画像をホームページに追加したはいいけど、スマホで見ると縮小されて非常に見づらい・・。

レスポンシブデザインの普及した現在、スマホとPCそれぞれで見せたい画像が違うせいで困った、という方はたくさんいるかと思います。

今回は、Wordpressで作成したサイトで、スマホ、PC、タブレットなどそれぞれで表示させたりさせなかったりする方法をお伝えします。

function.phpを利用する

このTIPSは、Wordpress3.4から実装された、「wp_is_mobile関数」を利用する方法です。お手元のWordpressのバージョンが3.4以上であることを確認してください。

3.4以下の場合は、使用中のテーマが対応しているかをご確認の上Wordpressを最新版へアップデートしてください。

そして、テーマのfunctions.phpを開いてください。

メニューの「外観」＞「テーマの編集」より選択が可能です。

「PC」と「スマホ・タブレット」を分岐させる

PCだけで表示させて、スマホ・タブレットでは表示させない。 また、PCでは表示させず、スマホ・タブレットでは表示させる場合です。

// 以下、PC or スマホ・タブレット条件分岐 // PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( …
Read More