Image

Posts By Cocoa編集部

Latest Posts | By Cocoa編集部
【初級編・WordPress対応】Webサイトのセキュリティって何?
4年 ago

【初級編・WordPress対応】Webサイトのセキュリティって何?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Read More

【初心者向け】Webサイト発注指示書(ワイヤーフレーム)の項目・書き方講座
4年 ago

【初心者向け】Webサイト発注指示書(ワイヤーフレーム)の項目・書き方講座

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

この記事は、Web制作会社やコーディング、デザイン会社へWebサイト制作の発注を行う際に、発注指示書をどのように書くべきかをWeb制作会社の視点でお伝えする内容となっています。

弊社では、クライアント様から発注を受けることも、外部制作会社へ発注を依頼することもあります。

つまり、発注書を示されることも、書くこともあるわけですね。

発注者、受注者、両者の目線から「良い発注書とは何か」をお伝えしていこうと思います。

また、発注指示書というと見積書に対する金額だけが明記されたものを指すときもありますが、今回の記事でいう発注指示書とはワイヤーフレーム(ある程度の仕様を示すもの)および、要望書を指すものとします。

そもそも発注書とは何か?

Webサイト発注指示書とは、制作会社に「どんなWebサイトを作成してほしいか」を伝えるのを目的とした書類(データ)です。

発注指示書に書かれるべき内容は次の項でご説明します。

大体の場合、この発注指示書を受け取った制作会社は、その発注書をもとに「デザイン案」と「仕様書」を提出します。

「デザイン案」は、発注指示書に書かれている要件を形にするとこんなデザインになりますが、どうでしょうか?という意味合いの書類です。トップページと下層ページ、それぞれの具体的な見本といった形です。

一般的にPDFファイル、もしくは画像データで提出され、発注元がOKを出すとそのデザインでサイトが製作されていきます。

基本的にOK後にはデザインの修正は受け付けない、もしくは有料での対応になります。

「仕様書」には、Webサイトの大まかな仕様が記載されます。

例えば、

・スマホ対応(対応機種・対応方法)

・対応ブラウザ(対応するブラウザの種類)

・使用する言語(HTML、CSS、PHPやJavascriptなど、またそのバージョン)

・セキュリティ(SSL通信など)

・CMSを使用する場合はそのCMS(WordPressやMovableType、EC-CUBEなど)

・暫定納期

こんな内容になります。

こちらも構造的な部分ですので、OKを出した後の変更は受け付けない、もしくは有料での対応になるのが一般的です。

どちらも変更が効きにくい項目ですので、疑問や質問がある場合は必ずこの段階で制作会社に投げるのが良いでしょう。仕様書が提出された時点では、比較的変更が容易なケースが多くあります。

一方、仕様書が提出されない場合は、仕様書の有無、またその後の対応を確認しておくのが理想的です。

なぜ発注指示書を書く必要があるのか

発注指示書を書くなんてめんどくさい!

口頭で言えばいいのに・・・、制作会社がテンプレートを用意すればいいのに・・・

発注担当者はきっとこう感じたことがあると思います。

しかし、発注指示書を用意することは大きなメリットがあります。


Read More

ドミノ・ピザがウェブ注文に配達員追跡システムを導入。コンテンツはUIからFUNの時代へ。
4年 ago

ドミノ・ピザがウェブ注文に配達員追跡システムを導入。コンテンツはUIからFUNの時代へ。

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

さて、私なんですが好きな食べ物は何ですか?と聞かれたときにすぐピザが出てくるほどのピザ好きです。

イタリアンが好き、という訳ではなくピザが好きなんです。

薄めのクリスピー生地に、たくさんのトッピング。オリーブオイルにたくさんのとろけるチーズ。

家から出るのがめんどくさい時に、頼んでから40分くらいで家に届く便利さ。常に何らかのクーポンを使ってお得感が味わえるのも私のような堕落人間にとっては素晴らしい限りです。

メニューも迷うほど多く、決めきれない気持ちをあざ笑うかのようなクオーターピザやハーフ&ハーフ。まるでこちらの迷う気持ちを読まれているかのようです。

ピザを食べながら、スポーツ中継を見たり、インターネット動画を見たりするのもいいですね。

普通のご飯を食べながら何かをするのはマナー的に良くない感じもしますが、なぜかピザだと悪い感じがしません。

まぁそんなこんなで前置きが長くなりましたが、筆者はピザが大好きなので結構宅配ピザを頼む、という事です。

日本におけるデリバリーの歴史

ピザについて語る前に、日本におけるデリバリーの歴史を振り返ってみましょう。

実は日本のピザデリバリーの文化は非常に浅いんです。 今より約30年前、1985年に東京の恵比寿にドミノ・ピザがオープンしたのが始まりです。

そもそもデリバリーピザはアメリカで生まれました。アメリカのように国土が広いと、ちょっとレストランに行くのも大変です。雨や雪のような悪天候下ならなおさらです。

日本のように国土が狭いと、わざわざレストランに行く抵抗感は薄いと考えられていたのですが、テレビの普及やスポーツ中継などの増加によって、わざわざ外出する必要がなくピザが食べられるのは大きな利点となっていきました。

人々のライフスタイルの変化に伴い「外出するのが嫌だ」という状況が増えてきたとも言えます。

また、日本にはもともと「出前」という文化が江戸時代より定着していたのもあります。

日本でいえば、そばやうどん、中華料理に寿司、どんぶりものなど注文をもらってからすぐ作り、出来立てを届けることが出来る、という意味ではピザはデリバリーとの適合性も高かったと考えられます。

また従来の出前と違い、洗った容器を玄関先に置いておいて、再回収してもらうお互いの手間がないのもピザデリバリーの良いところですね。

電話注文からインターネット注文へ

私が子供のころから宅配ピザはすでに文化として日本に定着していました。

今も大きくは変わっていませんが、「ピザーラ」「ドミノピザ」「ピザハット」の三大巨頭に加えて、地方に根付いた中堅ピザチェーン店があり、通常のイタリアンレストランが宅配も承っている、という構図です。

郵便受けをひらくと宅配ピザのチラシが入っていて、その中からクーポンを見て電話で注文する、電話口で電話番号を言うと、すでに頼んだことのある店では住所情報などが登録されていて少し待つと家まで届けてくれる。といった感じでしたね。今でもほとんど変わっていませんが。

20年前当時と今で大きく変わった点でいうと、

・インターネット注文ができるようになった

・チラシの投函数が昔よりは減った

・現金以外の決済方法が選べるようになった (クレジットカード、TポイントやYahoo!ウォレットなどの電子決済サービスなど)

といったところでしょうか。

ピザデリバリー各社がインターネット注文を導入し始めたのは、2000年ごろです。


Read More

【初心者向け】Webデザイナーがレベル別におすすめするWordPressの教本
4年 ago

【初心者向け】Webデザイナーがレベル別におすすめするWordPressの教本

弊社、Cocoa株式会社ではWordPressによるサイト制作、納品をはじめて約4年になります。

それまではHTMLコーディングによりサイト制作をしていたわけなのですが、時代の流れとともに静的HTMLからCMSへ移行していったほうがより効果の出るウェブサイトになっていく、と感じて移行したわけなのですが、その流れとともにWordPressも大きく進化していきました。

当時とはWordPressの構造も、コーディングルールも大きく異なりますし、当時はWordPressの教則本もブログサイト構築用の書籍が多く、現在のようにCMS的使い方を指導してくれる書籍は少なかったように感じます。

そこで、WordPressをコーポレートサイトやブログサイト構築に利用しようと考えている初心者向けに、役立つ書籍をご紹介しようと思います。

また、教則本のレベルはHTML、CSSを理解している方と全く触れたことがない方によって大きくお勧めが異なりますので、レベルによって分けています。

以下で紹介する書籍は、すべてWordPress4.x(2016年現在のバージョン)に対応したものとなっています。

HTML、CSSは理解できている方向けの教則本

「ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩」

秋元 英輔  (著), 清野 奨 (著), プライム・ストラテジー株式会社 (監修)

HTMLでトップページを作成できるレベルの方向けです。

どちらかといえば既にデザインされている、HTMLページをWordPressでコーディングしていくイメージの教則本です。

上記の観点から言えば、非常に丁寧に、かつ多くのトラブルシューティングに対応した内容で、WordPressの知識は皆無でも、レスポンシブデザインのサイトが出来上がるくらいまでたどり着けると思います。

一般的な内容が多く、初心者入門用、復習用として最適ですが、一方で応用やテクニック習得にはあまり向いていないといえます。

HTML、CSSすら全くわからない完全初心者向けの教則本

「はじめてのWordPress入門[最新版] (BASIC MASTER SERIES) 」


Read More

WordPress4.5が公開。「デバイスプレビュー」が意外と便利。
4年 ago

WordPress4.5が公開。「デバイスプレビュー」が意外と便利。

2016年4月12日、WordPressの最新バージョンである「WordPress 4.5」が公開されました。

WordPressは定期的に新バージョンが出ており、最新版にアップデートするとセキュリティも強化されていきますので必ずアップデートをするようにしましょう。

先日の「パナマ文書流出」も、古いバージョンのWordPressとプラグインを利用し続けていたことが原因と言われているほどです。

ところで、今回のバージョン4.5ではセキュリティのアップデートだけでなく、いくつかの便利な機能が搭載されているようですので、普段の仕事に大きく影響してきそうな部分を簡単にご紹介していきます。

デバイス(PC、スマホ)ごとの表示をチェックできる機能の追加

今回のバージョンより、サイトがPC、タブレット、スマホでどのように表示されるかWordPress内の機能でチェックできるようになりました。

レスポンシブ対応のサイト(今やほとんどがそうだと思いますが)を作成している場合などは非常に便利。今までは閲覧しているブラウザの幅を縮めたり、手元にあるPC、タブレット、スマホでその都度チェックしていたのが、一回でできるようになりました。

使ってみたら地味に便利だった機能です。

WordPressメニューの「外観」>「カスタマイズ」を開き、カスタマイザーコントロールの一番下にあるデバイスプレビューの3つのアイコンを押します。

これにより、現在作成中のサイトが各デバイスでどのように表示されるか直感的にチェックできます。

もちろん、同じPCやタブレットでもOSやブラウザによって表示は地味に異なりますので、最終的なチェックは必要ですが、作成中の手間ははかどることでしょう。

ロゴを追加できる機能がとうとう実装

Twenty Sixteenなど、WordPressの公式テーマの最新バージョンで、サイト名上部にサイトロゴを合配置できるようになりました。

こちらもWordPressメニューの「外観」>「カスタマイズ」から行います。

これに関しては「やっとか・・・・」という声が多いのではないでしょうか?

今までは、公式テーマをカスタマイズする際にまずロゴを配置するためにheader.phpを書き換えるのが最初の入り口といってもよいレベルでした。

なお、これによって追加したロゴはレスポンシブ対応となっています。

ビジュアルエディタのアップデート、その他

テキストリンク挿入時などのダイアログが微妙に変化し、使いやすくなっています。

特にブログサイトなどただURLを張り付ける場合などはひと手間へって便利ですね。

その他、細かいアップデートもいくつか行われています。

 

ぜひ新しいWordPressをインストールして、より安全かつ便利なWordPressを送りましょう。

古いバージョンのWordPressを長く利用していて、現在のテーマが対応していないなどの問題でアップデートができない場合はぜひご相談下さい。