Webサイト制作ワークショップ｜コーディング・デザインからWordPress・運用まで

ワークショップの概要とカリキュラム

Webサイト制作のワークショップを各所で行いたいと思います

都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何かしらの方法でご連絡ください。さまざまなニーズにあわせて内容を組み替えますが、およそ以下のような方のお役に立てるかと思います。

これからWebまわりを強化していきたいグラフィックデザイナー/アートディレクターの方
スキルのアップデートや情報交換をしたいと考えているWebディレクターの方
Webのことがいまいちよくわからないので色々教えて欲しい、企業やブランドのWeb担当者の方
いっそのことMacの使い方から全部教えて欲しいという方
まったくWeb制作の知識がないので、とにかく基本的なことから教えて欲しい方

ワークショップの規模としては、10人以下を想定しています。参加してもらったすべての人に、一定のクオリティを上回るくらいに出来るようになって欲しいので、そのような内容を組み立てています。

1人｜お互いのスケジュールを合わせやすいので、短期間集中して進行できます。
2〜4人｜参加者全員がノートパソコンを持ち寄って、実際に手を動かして進めていける人数です。
5〜10人｜テレビやプロジェクターに映し出した内容を元に進めます。すべての人の手元を確認することはできませんが、ノートパソコンを持っている人は実際に手を動かし、無い人は脳内作業で進行します。

ワークショップの環境については、Wi-Fi環境にあることが好ましいです。それ以外は何も条件はありません。

会議室やセミナールームで
コワーキングスペースの一角で
カフェでノートパソコンを並べて
軽くビール飲みながら

など、出来るようになってもらうことが目的ですので、場所や形式はまったく問いません。大人数で場所の確保が難しい場合は、都内だとおしゃれなレンタルスペース/貸し会議室も多いので、こちらから何かご提案させていただければと思います。

ワークショップを行う期間としては、3ヶ月間をひとつの目安としていますが、もっと長期間や短期間での内容も組めますので、柔軟に対応させてください。

初回〜3ヶ月｜基礎を習得してもらう
3〜6ヶ月｜簡単な実務を行いながら進行する
6ヶ月以降｜実務を行う中でサポートを行う

など、進行具合にあわせて調整いたします。

ワークショップの料金は、内容によって都度お見積いたします。以下はおよその価格感です。

基本的な内容のみ｜￥3,000〜10,000/1回2時間程度
Web制作全般｜￥10,000〜30,000/1回2時間程度

このワークショップが気になったら、何かの縁ですのでまずは打ち合わせしましょう。お互いの業界同士、何か情報交換できればそれはそれで楽しいので。

――仕事に笑顔を。enjoy!

以下にリストアップした内容は、ワークショップの一例です。

概論

【理解】Webサイトに関する全体的な雰囲気を理解する。

【内容】Webに関する概論をお話します。

コーディング 1

【理解】HTML/CSS/JavaScript の基本的な役割をザックリと理解する。

【内容】まずは一緒にサンプルページをコーディングしてみる。

HTML/CSS/JavaScript
特殊なテキストエディタを使う理由
Emmet の使い方
ファイルを開くアプリを設定する
html の基本構造
html 基本タグ
id と class
CSS でのスタイリング
reset.css でリセットしているもの
擬似クラス
SmoothScroll の使い方
コメントアウト

コーディング 2

【理解】スマホの特性と、レスポンシブWebデザインの基本的な仕組みを理解する。

【内容】コーディング 1 のおさらいと、サンプルページのスマホ対応を行う。

スマホのスクリーン
Phone6/7 Plus のスケーラーについて
レスポンシブWebデザインのブレークポイント
画像形式
ファイル名
相対パスと絶対パス
URL とディレクトリ
http と https
スマホサイトの自動リンク
チェッカーツール

Photoshop で Webデザイン

【理解】Photoshop で Webデザインをする際に抑えておくポイントを理解する。

【内容】まずは Photoshop で簡単なワイヤーフレームを作り、次にデザインカンプへと作り込んでいく。ショートカットや Tips など。

単位はピクセル
グリッドデザイン
制作フロー
ワイヤーフレームでモックアップをつくる
モジュール/コンポーネント化
どんなUIがあるか
Device Preview
Photoshop の Tips

Webサイト制作

【理解】Webサイト制作に必要なスキルを理解する。

【内容】Webサイト制作でのタスク/スケジュール管理の基本など。

Webディレクター
プロジェクトマネジメント（PM）について
WBS（Work Breakdown Structure）
Webの職種
スキルのアップデート
純度の高いものに触れる
間違いの多い用語
これはWebページです

Webマーケティング

【理解】Webマーケティングの具体的な方法を理解する。

【内容】Google Analytics で取得できるデータをみる。ネット広告や分析方法など、それぞれの手法をみてみる。

Google Analytics
コンバージョン
Webと紙の相乗効果
ネット広告
LP（ランディングページ）
キャンペーンサイト
オウンドメディア
ペルソナの設定
SWOT分析
RFM分析
ABC分析

マルチデバイスへの対応とモバイルファースト

【理解】さまざまなデバイスへの対応方法を理解する。

【内容】スマホの特性や、数年前とは大きく変わってきたWeb制作の流れをみる。

ブレークポイントで可変するサイト
画像のピクセルパーフェクト
高解像度スクリーンに対応するための1x、2x
モバイルファースト
スマホ特有の機能
Google の検索エンジン
スマホ専用サイト
タブレットへの対応
スマホアプリ
アプリ内ブラウザへの対応

Webサイトの構造

【理解】Webサイトのコンテンツ設計について理解する。

【内容】どのようにコンテンツ設計をするべきか、その理由など。

主な構造5種類
コンテンツ設計
より個人へとシフトしていく
スマホが使われる場所と状況
ファーストビュー
アフォーダンス

ブラウザ

【理解】ブラウザによって表示の差異があることを理解する。

【内容】ブラウザの種類を知り、OS とブラウザの対応など。

ブラウザの種類
対応するべきブラウザとバージョン
Windows と対応ブラウザのバージョン
reset.css
シミュレーター/エミュレーター
Safari の開発メニュー
スマホのデフォルトブラウザ
ブラウザの歴史

フラットデザイン

【理解】フラットデザインとは何かを理解する。

【内容】UI デザインの意味など。

Webデザインの流れ
そしてフラットデザインへ
スマホの操作を理解する
フィードバックとモーダルウインドウ
ガイドライン
UI - ハンバーガーの位置は右か左か

フォント

【理解】Webサイトで指定できるフォントや調整できる箇所を理解する。

【内容】フォントの調整方法など。

macOS と iOS のデバイスフォント
Webフォント
すべてのデバイスで使えるバリアブルフォント
FontAwesome
フォントサイズと行間
フォントのウエイト
font-smoothing
改行について

カラー

【理解】カラー指定の方法や、色の意味を理解する。

【内容】Webにおけるカラーについて。

配色
Webセーフカラー
Adobe Color CC（旧 Adobe Kuler）
魔法の文字色
テキスト色や装飾の意味

アニメーション

【理解】Webサイトで表現できることを理解する。

【内容】アニメーションの種類と扱い方の違いなど。

Flash から HTML5 へ
動画の埋め込み
スマホでのインタラクティブ表現

Webサイトの公開

【理解】Webサイトの公開方法を理解する。

【内容】サーバーの特性やファイル名について。

ドメイン
FTP でサーバに接続する
ファイル名
Google Analytics と Search Console
ファビコン

SNSとの連携

【理解】WebサイトとSNSの連携方法について理解する。SNSボタンを設置するだけでなく、マーケティングに使用するための仕組みづくりを理解する。

【内容】Webサイトに埋め込めるボタンや、仕組みづくりなど。

OGP（Open Graph Protocol）
Facebook
Twitter
仕組みの連携
SNSの使い方

ライブラリとフレームワーク

【理解】ライブラリやサブプラグインの種類を理解する。

【内容】各ライブラリでできること。

jQuery
Node.js
Bootstrap
Foundation
CSSのライブラリ
CSSメタ言語
html5shiv
よく使われるUIのライブラリ
Font Awesome

CMS（コンテンツ・マネジメント・システム）

【理解】CMSでできることを理解する。

【内容】実際の管理画面をみてみる。

WordPress
EC-CUBE

WordPress

【理解】WordPress の機能やプラグインを理解する。

【内容】ローカル環境の設定方法や、テーマの作成方法など。

MAMP
テーマ
プラグイン

ネットショップ

【理解】ネットショップの種類や法律を理解する。

【内容】実店舗とネットショップの運営は、同じエネルギーを注ぎ込む必要があることなど。

独自ドメインでのサイト運営
メール/メルマガ
メール作法
特定電子メール法
決済方法

電子書籍

【理解】電子書籍の仕組みを理解する。

【内容】必要書類の申請方法など。

epubとは
EINの取得
Amazon への申請
Apple への申請

セキュリティについて

【理解】セキュリティについて理解する。

【内容】8桁の大小英数字および記号を含むパスワードも、数十日で破られること。その対策など。

1Password
総当たり攻撃（ブルートフォースアタック Brute-force attack）
ソーシャルエンジニアリング

ページの読み込みスピード

【理解】Webサイトのチューニングの必要性を理解する。

【内容】具体的なチューニング方法など。

Google のチェックツール
ページの表示は5秒以内
チューニング

ルーター

【理解】ルーターの基本的な設定を理解する。

【内容】実際のルーターの設定画面など。

SSIDを変更する
パスワードを変更する
ステルスとは
MACアドレスフィルタリング
ルーターのユーザ名/パスワード

Macやその他アプリのTips

【理解】Finder やアプリのTipsなど。

【内容】効率的に仕事を行うためのTipsなど。

コーディング1｜HTML・CSSの基礎

頭で理解するよりも手で覚えることが大切。たとえば普段使っている Photoshop のショートカットを口で説明しようとすると、すぐには出てこない。手の形で覚えているため。エディタの基本的なショートカットを使いながら、サンプルデータを使ってまずは写経のようになぞっていく。

HTML/CSS/JavaScript

ざっくりいうと…

HTML はコンテンツの構造
CSS はデザイン
JavaScript は動き

特殊なテキストエディタを使う理由

html は単なるテキストファイルなので、そもそもどんなエディタでも編集できる。わざわざコーディングに適したエディタを使う理由は…

コード補完の機能があるので高速なコーディングが可能。
要素によって色分けされるシンタックスハイライトによって、コードが読みやすくなる。
ディスプレイは発光しているので、白いウインドウだと目が疲れる。自分好みのテーマを設定できる。

主なテキストエディタ/オーサリングソフト。

など。ここでは ATOM を使っていく。

ATOM｜インストールと基本的な設定

Emmet の使い方

コーディングを効率化するためのプラグイン。コマンドを打って［tabキー］でコードを展開できる。以下はリストタグの展開例。

ul>li*3［tabキー］

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul>liテキスト$*3 ［tabキー］

<ul>
  <li>テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

ul#menu>li*3 ［tabキー］

<ul id="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

ul.menu>li*3 ［tabキー］

<ul class="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

ファイルを開くアプリを設定する

Finder で html ファイルを選択して、「情報を見る（command＋I）」から、「このアプリケーションで開く」に割り当てられているアプリを ATOM に変更する。同じく css/js/その他ファイルも同じく変更する。

html の基本構造

head｜メタ情報、css、js など外部ファイルの読み込み
body｜コンテンツ
nav｜ナビゲーション
header｜ヘッダー
footer｜フッター

html 基本タグ

主な html タグ。内容に合った正しいタグでマークアップしていく。開始タグと終了タグがセットになっているものと、img や br のように終了タグのないものもある。

header｜ヘッダー
footer｜フッター
nav｜ナビゲーション
article｜コンテンツ
section｜コンテンツ内の1ブロック
aside｜サブコンテンツ、サイドメニューなど
h1 - h6｜見出し
p｜段落｜paragraph
br｜改行｜break
ul｜順序のないリスト｜Unordered List
ol｜順序のあるリスト｜Ordered List
li｜リスト｜list
table｜表組み
img｜画像
a｜リンク
div｜ブロック要素
span｜インライン要素

id と class

id｜ページ内にひとつだけ｜header、footer など
class｜ページ内に複数｜再利用してページ内でデザインを統一する場合｜見出しなど

id/class の名前は自由に決められるが、wrapper、container など一般的に使われる名前がある。red-text のようにデザイン要素は記述せずに、warning-text のように要素の役割がわかる名前をつける。red-text にすると、デザインや色が変わった場合に矛盾が発生するため。

CSS でのスタイリング

InDesign のスタイルシートと同じように、同じスタイルの要素がすべて同じデザインに統一される。
上から下へと内容が上書きされるので、後に書いたものが優先される。
class よりも id が優先される。

カラー指定

16進法が基本
例）#ccc（#cccccc）

RGBA（Aは透明度）
例）rgba(204,204,204,1)

配色ツール
Adobe Color CC

width で幅を指定する

幅を指定する width プロパティは、ピクセルとパーセントの指定を組み合わせられる。

width: 100%;｜通常の幅
max-width: 1200px;｜幅の上限
min-width: 960px;｜幅の下限

ul と ol のリストの違い

ul｜順序のないリスト｜Unordered List
ol｜順序のあるリスト｜Ordered List

リストのスタイリング

ul｜list-style: square inside;
ol｜list-style: decimal inside;

リストの字下げ

margin: 0 0 0 1em;
list-style: disc outside;

要素の float

内包する要素が float している場合、float を解除する clearfix を親要素に追加する。

.cf:before,
.cf:after
content:"";
display:table;
}
.cf:after
clear:both;
}
.cf
zoom:1;
}

css の margin と padding

margin｜ボックスの外側の余白
padding｜ボックスの内側の余白

margin: 20px;｜上下左右
margin: 20px 20px; ｜上下、左右
margin: 20px 20px 20px; ｜上、左右、下
margin: 20px 20px 20px 20px; ｜上、右、下、左

box-sizing

CSS3 からの対応。padding と border によってボックスサイズが変わるのではなく、常にボックスサイズを固定できる。padding と border の分だけボックスサイズの内側が小さくなる。

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

reset.css でリセットしているもの

html {
	color: #000;
	background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
fieldset, img {
	border: 0
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal
}
ol, ul {
	list-style: none
}
caption, th {
	text-align: left
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal
}
q:before, q:after {
	content: ''
}
abbr, acronym {
	border: 0;
	font-variant: normal
}
sup {
	vertical-align: text-top
}
sub {
	vertical-align: text-bottom
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit
}
input, textarea, select {
	*font-size: 100%
}
legend {
	color: #000
}

擬似クラス

li:first-child｜最初の子要素
li:last-child｜最後の子要素

<ul>
  <li>最初の子要素</li>
  <li>2番めの子要素</li>
  <li>最後の子要素</li>
</ul>

li:nth-child(even)｜偶数
li:nth-child(odd)｜奇数

<ul>
  <li>奇数</li>
  <li>偶数</li>
  <li>奇数</li>
</ul>

SmoothScroll の使い方

ページ内リンクのアニメーション。「このページのトップにもどる」をクリックした際に、スムーズに移動する。ページ内の id を指定する。

<a href="#top">top</a>

公式 Git

jQuery Easing Plugin の動作サンプル

jQuery 3

1系と2系に分かれていたが、サポート終了したIE8を動作対象から外すことで、3系に統一された。とはいえ、jQuery のプラグインの対応状況もあるので、必ずしも3系だけで大丈夫とは限らない。

jQuery 3 の変更点

このように書く必要はなくなった。

<!-- JQuery -->
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--[if !IE]>-->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<![endif]-->
<!-- /JQuery -->

これだけでよくなった。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

ライブラリ（外部ファイル）は可能な限りサーバーには置かず、CDN（Contents Delivery Network）を利用することで、ページ読み込み速度の向上につながる。

コメントアウト

html や css に過度なコメントタグはいらない。美しいコードは語る。

宿題

iOS ヒューマンインターフェイスガイドライン（HIG）は、デベロッパー向けのガイドラインというよりは、UIデザインのバイブルです。ぜひ読んでみてください。

これはWebページです。
数年前にバズったページです。

iOS ヒューマンインターフェイスガイドライン
iOS のアプリを作るデベロッパーに向けたガイドラインです。iPhoneがどんな考えのもとに設計されているか書かれています。

コーディング2｜スマホ対応とファイル構成

サンプルデータを使ってスマホ対応（レスポンシブWebデザイン）を行う。スマホの仮想ウインドウサイズの横幅を取得して、CSSで表示を振り分ける。Webで扱える画像形式やファイル名、ディレクトリ構造を理解する。

スマホのスクリーン

スマホ向けに viewport に関する記述をする。スマホでアクセスした際にデバイスの横幅100％でコンテンツが表示されるようになる。

<meta name="viewport" content="width=device-width">

iPhone 7の実際のデバイス解像度の幅は 750px だが、ブラウザ上での仮想ウインドウサイズ（device-width）は 375px として認識される。

デバイス名	デバイス解像度 (px)	仮想ウインドウサイズ (px)
iPhone SE	640×1136	320×568
iPhone 6/7	750×1334	375×667
Phone 6/7 Plus	1080×1920（1242×2208）	414×736
iPad Pro 9.7	1536×2048	768×1024
iPad Pro 12.9	2048×2732	1024×1366

Phone 6/7 Plus のデバイス解像度は 1080×1920px だが、スクリーンショットを撮ると 1242×2208px となる。これは、内部のデータサイズから0.87倍にダウンスケーリングされてスクリーンに表示されているため。

iPhone/iPad解像度(画面サイズ)早見表

レスポンシブWebデザインのブレークポイント

現状、768px をブレークポイントとして、768px以上がPC/タブレット、768px以下がスマホというように振り分けができる。MediaQuery の max-width を利用して、デバイスによって適用する CSS を振り分けていく。

#selector {
	/* PCで読み込むCSS */
}
@media screen and (max-width: 768px) {
	#selector {
		/* スマホで読み込むCSS */
	}
}

この記述方法によって、「スマホで読み込むCSS」はスマホでのみ読み込めるようになる。CSSは上から下へと順番に読み込まれ、同じセレクタに対する記述があった場合は、より下に書かれている内容に上書きされる。これらを利用してPC/スマホそれぞれに対してCSSを書いていく。

「PC｜スマホ」という分け方ではなく、「PC｜タブレット｜スマホ」のようにタブレット用のCSSも記述する場合は以下のようにする。

#selector {
	/* PCで読み込むCSS */
}
@media screen and (max-width: 992px) {
	#selector {
		/* タブレットで読み込むCSS */
	}
}
@media screen and (max-width: 768px) {
	#selector {
		/* スマホで読み込むCSS */
	}
}

画像形式

画像によって使い分ける。

jpg｜フルカラー｜非可逆圧縮なので、圧縮するとノイズが出る
png-8｜256色（8bit）｜透明可｜可逆圧縮
png-24｜フルカラー（24bit）｜透明可｜可逆圧縮
gif｜256色｜透明可｜可逆圧縮｜アニメーション可能
svg｜フルカラー｜透明可｜ベクターデータ｜IE8/Android 3.0までの標準ブラウザは未対応

ファイル名（画像ファイル/フォルダ名/CSSのセレクタ名も同じく）

ファイル名に使用するのは半角英数とアンダーバー/ハイフンにとどめておく。ファイル名に日本語やスペース、機種依存文字は使わない。

a - z｜英字小文字
A - Z｜英字大文字
0 - 9｜数字
_｜アンダーバー
-｜ハイフン

アンダーバーやハイフン、大文字/小文字で区切る。

content_main_menu
content-main-menu
ContentMainMenu

相対パスと絶対パス

ファイルの位置を指定する方法が2つある。相対パスは、そのファイルからみた位置。絶対パスはトップディレクトリからの位置。

img/img.png｜相対パス（同じ階層のimg/img.png）
../img/img.png｜相対パス（1つ上の階層のimg/img.png）
/img/journal/img.png｜絶対パス（一番上の階層のimg/img.png）

相対パスの「../」は「1つ上の階層」という意味。「../../」は2つ上の階層。一例として、ページ数の少ないWebサイトでは相対パス、規模が大きく全ページを通して共通パーツが多いサイトの場合は絶対パスを使うなど。

URL とディレクトリ

URLの「/（スラッシュ）」は、フォルダのディレクトリ構造と同じ。基本的な構造として、トップディレクトリ直下には

index.html
img｜このページで使う画像
css｜全体で使う style.css
js｜jQuery のライブラリなど
common｜サイト全体で使う画像など

を置く。

第2階層には

index.html
img｜このページで使う画像

となる。

index.html について

http://www.ドメイン名.com/ にアクセスした場合、まずは index.html が読み込まれる。これはサーバーで読み込み順が決まっている（もしくは .htaccess で記述して設定する）。

読み込みの優先順位はこのようになる。

index.html
index.htm
index.php

同一階層に index.html と index.php の両方を置いた場合は、index.html のみ読み込まれる。ファイルに直接アクセスした場合はその限りではない。

http と https

URL のプロトコルには http と https（SSL）がある。たとえばネットショップの場合、ショッピングカートが https でそれ以外のページは http など。

スマホサイトの自動リンク

電話番号やメールアドレスが自動的にリンクされるので、これをオフにする。必要な箇所だけ手動でリンクを設定する。

<meta name="format-detection" content="telephone=no,email=no">

チェッカーツール

デザイン意図や構成などは考慮せず、まくまでもコードとしての評価なので目安として。

html基本タグ

HTML5リファレンス

html は本やサイトで見るだけだとなかなか覚えられないので、実際にコーディングして手で覚えるのが最も近道。自分のWebサイト（blog）を作成して、htmlタグで文章をマークアップする習慣をつけるとすぐに覚えられる。

htmlタグとdiv/spanの違い

div と span 自体は意味のないhtmlタグ。css でデザインするためにマークアップするもの。

div｜ブロック要素｜htmlタグでマークアップしたブロック。
span｜インライン要素｜ここだけ。テキストの一部など。

id と class の違いは、再利用する（使いまわす）かどうか。

id｜そこだけ｜1ページ内に1つだけ存在してOK
class｜いくつかの箇所｜1ページ内にいくつ存在してもOK

同じ id名を1ページ内に2つ以上置かない。1クラスに同姓同名の鈴木さんが2人以上いると区別ができないため。

div id｜ページ内に1つだけのブロック要素
div class｜ページ内に複数のブロック要素
span id｜ページ内に1つだけのインライン要素
span class｜ページ内に複数のインライン

CSS で呼び出す場合、id と class で書き方が違う。id はシャープ（#）、class はドット（.）。

id｜#id名
class｜.class名

PhotoshopでWebデザイン

Photoshop で Webデザインする場合、文字組みや画像配置など、Illustrator でグラフィックデザインをする操作に近い。シェイプレイヤー（ベクトルマスク）、スマートオブジェクト、テキストレイヤー、レイヤースタイルなどを使い、ピクセルに依存しない柔軟な作り方をしていく。

単位はピクセル

PCのディスプレイだけに限定しても、画像の表示サイズは異なる。100×100px の画像を等倍で表示した場合、見た目のサイズはディスプレイによって違う。ディスプレイによって1インチ四方あたりのピクセルの数（ピクセル密度）は違うし、ディスプレイ解像度の設定によっても変更される。

いま自分がみているディスプレイ上で「何センチ」と言っても、相手が見ているディスプレイに表示されている大きさとは異なる場合がある。

グリッドデザイン

960pxを12分割したテンプレート。3分割や4分割、2カラムのレイアウトのグリッドとして使いやすいサイズ。
960 Grid System

制作フロー

あくまでも一例。

コンテンツ/ターゲットの設計｜目的の設計
サイト構成/サイトマップ作成｜手段の設計
ワイヤーフレーム/モックアップをつくる｜UXのテスト
プロトタイプ｜必要に応じて、動きの確認するためのサンプル
デザインカンプ制作｜デザイン
コーディング｜ブラウザでの動作
テストアップ｜動作チェック/ブラウザチェック
公開｜Google Analytics/Search Console の設定

デザインの前段階で使用するツールは、PowerPoint や Keynote、Illustrator など、使い慣れているもので良い。あらかじめUIキットが揃ったアプリもある。そのまま Photoshop でデザインを進める場合であれば、Photoshop でワイヤーフレームをつくった方が効率的。

Adobe XD は、遷移フローを簡単に作成できるプロトタイピングツール。UIキットも揃っているので、ワイヤーフレームの作成も効率的に行える。こういったツールは必要に応じて柔軟に取り入れていきたい。

モジュール/コンポーネント化

Webサイトはいくつかのコンポーネントで構成される。ヘッダー/フッターの要素、グローバルナビゲーション、パンくずナビ、見出し、段落、ボタン、サイドメニューなど。

この後のコーディングにも影響してくるのだが、再利用可能な派生コンポーネント（亜種）を使っていくこと。デザインも統一され、一定のトーンマナーを守ることにもつながる。

具体的には、ボタンの形はサイト全体を通して共通のデザインにする。グレーのボタンもブルーのボタンも、形やマージンなどは揃えておく。グレーのボタンに対してCSSで色だけを上書きすることでブルーのボタンにする。CSSを上書きすることで、グレーと青のボタンをそれぞれCSSで作成する必要はなくなり、さらに他の色のボタンが必要になっても、同じフローで追加することができる。また、ボタン自体の形やマージンを調整する場合でも、もととなるコンポーネントを1箇所修正するだけですべての色のボタンを変更することが可能となる。

どんなUIがあるか

それぞれのUIの特性を理解しておく。
uikit

Device Preview

Photoshop で開いているデータをスマホでプレビューできる。Photoshop の「ウインドウ > Device Preview」を表示させ、iPhone で「Adobe Preview CC」を起動する。PCとスマホが同一 Wi-Fi にいることが条件。スマホサイトをデザインする際に使用する。

Photoshop/Illustrator

最近では、Illustrator でも Webデザインを行える環境が整備されてきた。ピクセルでのサイズ指定や、ピクセルグリッドにピクセルが正しく乗っていることなど気をつければ、Illustrator で作業も可能かも。ただ、Webデザインでは Photoshop を使うというのが多くの現場での世界基準ではあるので、データの受け渡し、コーダー/プログラマーへの引き継ぎなどが想定される場合は、Illustrator はやはりNG。

Photoshop の Tips

カラー設定

「編集 > カラー設定（command＋shift＋K）」から、「Web・インターネット用 - 日本」を選択する。

カラープロファイルは

RGB｜sRGB IEC61966-2.1｜一般的なPCディスプレイのカラースペース
グレー｜Gray Gamma 2.2｜一般的なPCディスプレイのガンマ値（明るさ）

となる。

単位

環境設定の「単位・定規」タブの「定規」と「文字」を pixel にする。制作データが2xの場合はテキストサイズの数値が2倍になる。ちなみに point だと画像解像度が変わってもテキストサイズの数値は変わらない。

ワイヤーフレームを作成する

長方形ツールのシェイプとパス選択ツールを使ってワイヤーフレームを作成する。ピクセルでの塗りを使用しないのは、リサイズを繰り返すうちに境界がぼけてしまうため。

その後、画像を配置してクリッピングマスクする。レイヤー間を option＋クリック（command+option+G）。複数のレイヤーがある場合は、マスク付きレイヤーグループにする（フォルダにマスクをかける）。

スマートオブジェクト

「ファイル > 埋め込みを配置」もしくは「ファイル > リンクを配置」で画像を配置する。

基本は「埋め込みを配置」。ヘッダー/フッターなど、全ページ共通のモジュールは「リンクを配置」が便利。スマートオブジェクトは拡大縮小しても画像が荒れない。取り消し可能なスマートフィルターも使用可能。環境設定の「一般」で、「配置時にスマートオブジェクトを常に作成」をオンにしておく。

同じ位置に配置する

ファイル間でレイヤーをドラッグ＆ドロップする際、レイヤーを「shift＋ドラッグ＆ドロップ」で同じ位置に配置できる。

画像の拡大縮小

スマートオブジェクトのリサイズは、環境設定の「一般」タブの「画像補完方式」を変更しながら行う。画像補間方式を間違うと画質が悪くなる。

拡大｜ニアレストネイバー法
縮小｜バイリニア法

スクラブズーム

ズームツール使用時、クリック連打するのではなく、「command＋space＋左右にドラッグ」でスマートに拡大縮小できる。ズームツールのオプションで「スクラブズーム」にチェックを入れておく。

ピクセルグリッド

好みで「表示 > 表示・非表示 > ピクセルグリッド」のチェックをオフにする。

グリッド表示

環境設定の「ガイド・グリッド・スライス」タブの「グリッド」の数値を変更する。

グリッド線：100px
分割数：10

必要に応じてcommand＋＠でグリッドを表示させる。

スナップ

「表示 > スナップ」オンで、ガイドやレイヤーにスナップするようにする。

テキストの確定

テキストを打って確定するときは、command＋enter（escキーを押すと打ったテキストが消えてしまう）で確定できる。Photoshop CC 2017 からは、環境設定の「テキスト」タブの「ESC キーを使用してテキストを確定」のチェックをオンにすることで、escキーでも確定できる。

文字組みのショートカット

基本的には Illustrator と同じショートカットが使える。

テキストの拡大縮小
command＋shift＋>
command＋shift＋<

行間
option＋↓↑
option＋command＋↓↑

ベースライン
option＋shift↓↑
option＋shift＋command↓↑

カーニング/トラッキング
option＋←→
option＋command＋←→

文字パネルの設定

それぞれの効果を理解して、日本語を打った時に表示がおかしい場合は文字パネルの設定を変更する。

欧文合字のオン/オフ
前後関係に依存する字形
任意の合字
スワッシュ字形
デザインのバリエーション
タイトル用字形
上付き序数表記
スラッシュを用いた分数

文字パネルを軽くする

「書式 > フォントプレビュー」のサイズを「なし」にする

ツール切り替えのショートカット

よく使うツールの1キーショートカットを覚えておく。

T｜文字ツール
V｜移動ツール
A｜パス選択ツール
D｜描画色と背景色を初期設定に戻す
X｜描画色と背景色を入れ替え
F｜スクリーンモードを切り替え
0-9｜レイヤー選択時に不透明度の変更、ブラシツール使用時にブラシの不透明度変更

ブラシのショートカット

ブラシサイズの変更
control＋option＋左右ドラッグ

ブラシのボケ足変更
control＋option＋上下ドラッグ

レイヤーの描画モードを変更

よく使うレイヤーの描画モードのショートカットを覚えておく。

乗算｜option＋shift＋M
スクリーン｜option＋shift＋S
オーバーレイ｜option＋shift＋O
差の絶対値｜option＋shift＋E
通常｜option＋shift＋N
順番に変更｜option＋shift＋プラス/マイナス

差の絶対値は、データ間の差異を調べるために使用する。

自動処理

「ファイル > 自動処理 > バッチ」
フォルダ内にアクションを実行する。画像ファイルの一括リサイズなど。

「ファイル > 自動処理 > コンタクトシート II…」
フォルダ内の画像一覧をプリントするなど。

Photoshop Generator

環境設定の「プラグイン」タブの「Generator を有効にする」をオンにする。
「ファイル > 生成 > 画像アセット」をオンにする。
レイヤーフォルダ名/レイヤー名を「○○.jpg」のように「ファイル名＋拡張子」に変更する。自動的に assetsフォルダが生成されて、画像が書き出される。

パラメーターを記述することで、出力画質やサイズを設定できる。
レイヤーからの画像アセットの生成

マスク/ベクトルマスクの複製

レイヤーのマスク/ベクトルマスクを option＋ドラッグで複製。
レイヤーのマスク/ベクトルマスクを option＋クリックでマスクビュー。

パネルを隠す

Tabキー

塗りつぶし

描画色で塗りつぶし｜option＋delete
背景色で塗りつぶし｜command＋delete

シャドーチェッカー

調整レイヤーのトーンカーブで、ギザギザの山をつくる。トーンの流れを確認するのに利用する。

選択範囲の複製

command＋J
Illustrator でいう、command＋C、command＋F と同じ。選択範囲が無い場合はレイヤーが複製される。

パペットワープ

選択範囲をつくって、「編集 > 変形 > ワープ」
ビルの歪み修正や、顔のレタッチなどで使える機能。

制作環境｜macOS Sierraの設定

macOS Sierra の基本的な設定から、少しマニアックな設定までまとめました。

MacBook Pro TouchBar モデルで、常にファンクションキーを表示させる

「システム環境設定 > キーボード」から、fnキーを押した時に TouchBar にファンクションキーを表示させるのは、ここの設定でできます。

さらに、「ショートカット」タブの「ファンクションキー」からアプリを登録することで、fnキーを押さなくても常にファンクションキーを表示させることができます。

ディスプレイの解像度を変更する

「システム環境設定 > ディスプレイ」から「スペースを拡大」を選択。

マウスの設置を変更する

「システム環境設定 > マウス」から変更。

トラックパッドの設定を変更する

「システム環境設定 > トラックパッド」から変更。

マウスポインタをシェイクすると大きくなるのをオフにする

「システム環境設定 > アクセシビリティ」の「ディスプレイ」から変更。「マウスポインタをシェイクして見つける」をオフにする。

アピアランスを変更する

「システム環境設定 > 一般」から「アピアランス」を「グラファイト」に変更。「強調表示色」はファイル名を選択した時などの色。

Siri のショートカットを変更する

「システム環境設定 > Siri」から、「ショートカット」を「切」にする。もしくは他のものに変更。MacBook Pro は Touch Bar に Siri ボタンがあるので必要ない。

Caps Lock キーを Option キーに変更する

「システム環境設定 > キーボード」の「装飾キー」ボタンから変更。Caps Lock キーを使わないのでオフにすると同時に、「Command＋Shift＋Option＋S」などのショートカットを押しやすくするために、Caps Lock を Option キーに変更する。

メニューバーに日時を表示させる

「システム環境設定 > 日付と時刻」の「時計」タブから、「メニューバーに日付と時刻を表示」にチェックを入れる。

Mission Control のショートカットをオフにする

「システム環境設定 > Mission Control」から、ショートカットをオフにする。マウスやトラックパッドのジェスチャで対応するのでショートカットは必要ない。

ライブ変換をオフにする

「システム環境設定 > キーボード」の「入力ソース」タブから、ライブ変換をオフにする。好みで「句読点で変換」をオンにする。

ファイルの拡張子を表示する

Finder の環境設定の「詳細」タブから、「すべてのファイル名拡張子を表示」にチェックを入れる。

Finder でのファイル表示順序を変更

Finder の環境設定の「詳細」タブから、「名前で並べ替えるときにフォルダを上部に表示」にチェックを入れる。

Finder のサイドバーに表示する項目を変更

Finder の環境設定の「サイドバー」タブから変更。

Finder の表示オプションを変更

Finder のメニューバーから「表示 > 表示オプションを表示」（command＋J）を選択。表示順序を「グリッドに沿う」に変更。

Finder でステータスバーを表示する

Finder のメニューバーから「表示 > ステータスバーを表示」を選択。

Finder で開く新規ウインドウを変更する

Finder の環境設定の「一般」タブから、新規ウインドウで開くフォルダを変更。

デスクトップに表示する項目を変更する

Finder の環境設定の「一般」タブから変更。サイドバーに表示されていればよいので、チェックをオフにする。

Mac のログイン時に、アカウントを1つだけ表示させる

「システム環境設定 > ユーザとグループ」から、ログイン時の表示を「ユーザのリスト」にし、「ゲストにこのコンピュータへのログインを許可」をオフにする。

コンピュータ名を変更する

「システム環境設定 > 共有」から、コンピュータ名を変更する。

音量を変更するときのフィードバック音をオフにする

「システム環境設定 > サウンド」の「サウンドエフェクト」タブから、「音量を変更するときにフィードバックを再生」のチェックをオフにする。

スペルの自動変換をオフにする

「システム環境設定 > キーボード」の「ユーザ辞書」タブから変更。「英字入力中にスペルを自動変換」と「文頭を自動的に大文字にする」のチェックを外す。Google日本語入力など、デフォルト以外の日本語入力システムを使っていても、ここの設定は影響するので注意が必要。

ショートカット追加

「システム環境設定 > キーボード」の「アプリケーション」タブからショートカットを追加する。アプリケーションを選択して、「メニュータイトル」にメニューバーのテキストを正しく入力してショートカットを設定する。

ショートカットをオフ

「システム環境設定 > キーボード」の「アプリケーション」タブから、使用しないショートカットをオフにする。

使わないネットワーク設定を削除する

「システム環境設定 > ネットワーク」から、必要ないネットワーク設定を削除する。VPN接続などが必要になった時に都度設定を追加する。

ファイアウォールを設定する

「システム環境設定 > セキュリティとプライバシー」の「ファイアウォール」タブから、ファイアウォールをオンにする。さらに「ファイアウォールオプション」の「ステルスモードを有効にする」のチェックをオン。

FileVaultを設定する

「システム環境設定 > セキュリティとプライバシー」の「FileVault」タブから、FileVault をオンにする。

開発元が未確認のアプリケーションを開く

外部サイトからダウンロード＆インストールしたアプリケーションは、そのままでは開けないので、アプリケーションをControl＋クリックで表示される「開く」から開き、表示されたアラートから開く。

Control＋マウススクロールで画面をズームする

「システム環境設定 > アクセシビリティ」の「ズーム機能」から、Control＋マウススクロールで画面をズームできるようにする。「オプション」ボタンから、「ポインタと一緒に連続的に移動」を選択する。

Safari.app の設定｜URL表示と開発メニュー

「環境設定 > 詳細」タブから、「スマート検索フィールド：Webサイトの完全なアドレスを表示」のチェックをオン。正しいURLが表示されるようになる。同じく「環境設定 > 詳細」タブの「メニューバーに“開発”メニューを表示」のチェックをオン。Webサイト制作に必要な開発メニューをメニューバーに表示できる。

Safari.app の設定｜ファイルを自動的に開かない

Webサイトからダウンロードしたファイルを自動的に開かないようにする。「環境設定 > 一般」タブから、「ダウンロード後、“安全な”ファイルを開く」のチェックを外す。

メール.app の設定｜メールのフォーマットを変更する

Mail.app の環境設定の「作成」タブから、メッセージのフォーマットを「標準テキスト」に変更する。

メール.app の設定｜最新のメッセージを一番上に表示する

Mail.app の環境設定の「表示」タブから、スレッド表示のときの「最新のメッセージを一番上に表示」をオンにする。

カレンダー.app の設定｜時間帯のサポートをオンにする

カレンダー.app の環境設定の「詳細」タブから、「時間帯のサポートを有効にする」をオンにする。

1Passwordの設定｜ショートカットを追加する

1Password の環境設定の「一般」タブから、ログインのショートカットを設定する。

Webサイトのテキストとフォント

デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めるとまだ完全ではない。Webサイトでのテキストは、あくまでも情報であり、デザイナーの意図した見え方に固定できるものではなく、改行位置も異なる。グラフィックデザインのようにデザインの一部として扱う場合はテキストを画像にする。

フォントサイズのサンプル

テキストサイズは、本文で14/16/18px。行間は1.5em〜1.8emをひとつの基準とする。ユーザー側でテキストサイズを変更できるように、px ではなく em/rem で指定する。

px（ピクセル）｜絶対指定｜固定サイズ
em（エム）｜相対指定｜親要素を基準として計算したサイズ
rem（ルートエム）｜相対指定｜常にroot（html）を基準として計算したサイズ

html {
 font-size: 62.5%;
}

ブラウザのデフォルトサイズ 16px を 62.5％に縮小することで 10px となる。 root（html）のサイズを 10px にすることで、フォントサイズを直感的に指定できるようになる。

1.8rem｜18px｜本文として決して大きすぎるとはないサイズ
1.6rem｜16px｜ブラウザのデフォルトサイズ
1.4rem｜14px｜サブ扱いの短いテキストとして使えるサイズ
1.2rem｜12px｜日本語のテキストサイズとしては厳しい。欧文はCopyright表記などに使えるサイズ。
1rem｜10px｜読むテキストとしては厳しいサイズ

スクリーンによってピクセル密度が違うので、同じ 18px でも実寸は違う。制作側のPC環境でデザインが固定されるのではなく、テキストは常に可変されるものであることを認識しておく。テキストサイズが変われば、その親要素のボックスサイズも変更されるので、デザインレイアウト自体も常に変わっていく。

魔法のテキストカラー

たとえばWebサイトのロゴがブラックの場合、テキストカラーもブラックに統一した方がトーンマナーを統一できる。そういった場合をのぞいて、テキストカラーがブラック「color: #000」では少し重いので、「color: #555」を指定する。白背景とのコントラストが弱まって印象が少し軽くなる。

日本語のWebフォント

Webフォントという、サーバーからフォントデータ自体を読み込んでしまう方法もある。そうすればどのデバイスでも同じフォントで表示される。

欧文はデータ量が少ないが、日本語は漢字などを含めると数万文字以上のデータ量を必要とする。スマホで10MBのWebフォントのデータを読み込むのは、Webサイトの表示時間の足かせとなる。

多くのWebサイトで同じWebフォントが使われるようになれば、Webフォントのデータはローカルにキャッシュされるので、再度読み込む必要がなくなる。他のWebサイトでキャッシュされたフォントデータを自サイトでも利用できるということ。

フォントに限らず、ライブラリデータは CDN（コンテンツ・デリバリー・ネットワーク）を使って読み込むのがベター。

Google と Adobe の共同フォント。1ウエイト10MBほど
Noto Sans CJK JP

欧文のWebフォント

欧文のWebフォントは比較的充実している。Adobe の「Typekit」や Google の「Google Fonts」がベター。

すべてのデバイスで使えるバリアブルフォント

現在、Adobe、Apple、Google、Microsoft が共同でバリアブルフォントを開発中。文字の骨組みから自由に肉付けを行って、さまざまなウエイトを作れるというもの。

Webセーフカラー

スクリーンによって色温度やカラープロファイルが違う。個体差もある。Windows/Mac で色味が変わらないとされていた216色のWebセーフカラーは、8bit（256色）時代のこと。16bit（65,536色）以上の環境では、セーフカラーは関係ない。CMYKと同じように、パステルカラーやペールトーンは色転びしやすい傾向がある。

テキスト色や装飾の意味

ブルーのテキストや、アンダーラインがついたテキストはリンクを意味する。グレーはグレーアウト（クリックできない箇所）の意味。

WordPressのインストールと基本操作

あらゆるWebサイトで CMS（コンテンツ・マネジメント・システム）が導入されており、その中でも WordPress が多くの割合を占める。WordPress を使用することで、通常の html（静的サイト）では実現不可能な動的サイトを構築できる。

WordPress はブログを作るためのものではなく、クライアント側で簡単にコーポレートサイトのお知らせ更新を行うなど、カスタマイズによって色々な使い方ができる。

データベースを作成する

WordPress では、コンテンツの内容をすべてデータベースに保存している。それによって、Webサイトのデザイン（テーマ）とコンテンツ（データベース）を完全に切り分けて管理できるので、デザインを変更してもコンテンツ自体が失われることはない。

まずはレンタルサーバーの管理画面でデータベースを作成する。この後 WordPress のインストールで必要になるので、データベースサーバ（データベースのホスト名）、データベース名、ユーザ名、パスワードがわかるようにしておく。

MySQL｜データベースの種類（他に PostgreSQL など）
phpMyAdmin｜管理ツール

MySQL 接続の照合順序は多くの場合「utf8_general_ci」にする。「utf8_general_ci」の特徴は、アルファベットの大文字小文字は区別しない。全角半角は区別する。

WordPressをダウンロードする

WordPress には「WordPress.com」と「WordPress.org」がある。WordPress.com は無料ブログサービス。WordPress.org はレンタルサーバーにインストールするソフトウェア版。後者の WordPress.org のものをWebサイト制作では使っていく。

FTPソフト

FTP は File Transfer Protocol - ファイル転送の通信規約。サーバーと接続してデータを転送するための通信方式。他の通信方式として、Webサイトを閲覧する時に使う http（Hypertext Transfer Protocol - ハイパーテキスト・トランスファー・プロトコル）のような通信方式がある。こちらはデータを閲覧するためのもの。

FTPソフトを使って、ダウンロードした WordPress のデータをサーバーにアップする。Mac のおすすめFTPソフトは Transmit。無料で使える Cyberduck も FTP/SFTP/Amazon S3/WebDAV 等の接続に対応しているので機能的には問題ない。両方試用してみて決めるのもOK。

Transmit（公式サイト｜App Store）
公式サイトは¥3,400、App Store は￥4,100。

Cyberduck（公式サイト｜App Store）
公式サイトは¥0（寄付することは可能）、App Store は￥2,900。

FTP｜サーバーに接続するためのプロトコル（通信規約）。もっともよく使う方式。
SFTP｜サーバー側の公開鍵とPC側の秘密鍵を使って、お互いに認証して接続するプロトコル。セキュアなFTP。
Amazon S3｜AWS（Amazon Web Services）が提供するオンラインストレージのWebサービス。AWSはクラウドサービス。
WebDAV｜ファイル共有できるストレージ。

WordPressのインストール＆設定

サーバーにアップロードしたディレクトリにアクセスするとインストール画面が表示されるので、手順に沿って設定を進める。

データベースの情報を入力する。

データベース情報が問題なければインストールに進む。

WordPress のログイン情報を設定する。「検索エンジンでの表示」は、テストサイトや制作中のサイトの場合はチェックをオンにして、検索結果に表示されないようにしておく。

先ほど設定したログイン情報で管理画面にログインする。

WordPressの基本的な使い方

作成できるページは、「投稿」と「固定ページ」の2種類ある。

投稿｜ブログのように常に作成されていくページ。
固定ページ｜コーポレートサイトの「About」など、常に固定で存在するページ。
外観 > テーマ｜テーマの変更を行うことができる。オリジナルで制作したテーマのデータもここに表示される。
外観 > ウィジェット｜サイドメニューなどのウィジェットを編集できる。
プラグイン｜Similar Posts（関連記事を表示させるプラグイン）などをインストールすることで、Webサイトに様々な機能を追加できる。
ユーザーの追加｜様々な権限でユーザーを追加できる。たとえば「投稿者」の権限でユーザーを追加すると、テーマやプラグインの編集メニューは表示されず、基本的なメニューのみが表示される。

WordPressを使用したWeb制作は、総合的なスキルが求められる

ドメイン｜ドメイン取得とネームサーバーの設定
レンタルサーバー｜ドメイン設定やメールアドレス作成、データベース作成、WAF（Web Application Firewall）
FTP接続｜サーバー接続
WordPress｜CMS
データベース｜MySQL、phpMyAdmin
PHP｜プログラム言語
HTML、CSS｜マークアップやデザイン

Webデザインを学ぶための本

WebサイトのUI（ユーザーインターフェイス）デザインには、ビジュアルで感性に訴えかける「ビュー」と、ページ移動などのナビゲーションを行う「コントロール」という2つの要素が共存します。Webデザインはビジュアルデザインを主導に進行されるものではなく、あくまでもユーザーの行動をデザインする所に重きを置きます。

そして、目的の情報へとたどり着いてもらうためのスムーズな動線づくりを行い、「成功体験」へと結びつける。Webサイトは、そこにアクセスした人に「成功体験」を提供するためにあるべき。大切なことだから2回書きました。

Webデザインの概念理解への近道

Webサイトで使われるUIには、主なものにボタンがあります。ボタンとは、それを押すと何か変化が起こるということを人はリアルの世界で学習しています。その学習した体験をWebの世界に取り入れることで、リンク先のページに移動したり、データにアクセスしたりできるように設計されました。つまり、ボタン、スイッチ、レバー、ハンドルなど、リアルの世界にあるもののメタファーであれば何でも良かったのです。

ここで紹介する2冊の本はとても純度の高いものであり、どちらも概念的な内容です。具体的なデザインの解決法を示したものではなく、認知心理学（認知科学）というジャンルの本です。まずはここから触れてみて、気になる部分を掘っていくのが近道だと思います。

続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針
インターフェースデザインに必要な視点を十分に理解できる内容です。通報「オライリー本」と呼ばれる、オライリー社から出版されている本です。デザイン関連のオライリー本はいくつかありますが、どれも純度の高い内容です。

誰のためのデザイン？　増補・改訂版　―認知科学者のデザイン原論
認知心理学といえばノーマンです。第1版から25年後に増補・改訂版が出版されたことで、今後もバイブルとして読み継がれていく本です。

Webサイト制作の進行とマーケティング

Webの世界は動いて賑わっていて、常に過渡期。

プロジェクトマネジメント（PM）について

膨大な作業工程（タスク）を「制御」することが大切。どんな作業工程があってそれぞれどのくらいの時間がかかるのか。スケジュールが詰まってきた場合に、どのスケジュールを調整して良いか/してはいけないかを理解しておく。

OmniPlan はスケジュール管理に特化したアプリ。

WBS（Work Breakdown Structure）

すべての作業工程を細かいタスクに落とし込んでいく。以下の3つに分けてスケジュールを組む。

同時進行できるタスク｜商品データの登録など
他のタスクの完了を待って、進行できるタスク｜デザイン→コーディング
点で存在するマイルストーン｜公開、申込み、チェックなど

WBSでのスケジュール管理は、全体のスケジュールや進捗を見渡せるメリットがある反面、管理が面倒で柔軟性に欠ける部分もある。ひとつひとつのタスクへと切り離して、そのタスクチケットを発行/完了というように進めた方が効率が良い場合がある。

最近はタスクをチケットとして扱う手法が主流。

Backlog（プロジェクト管理ツール）
Slack（ビジネス向けチャット）

仕様書

内部用の仕様書を作っておく。カスタマイズ箇所の説明や、使用しているライブラリなどを記入しておく。更新やカスタマイズの効率化ができ、同じやりとりを防ぐことにもつながる。

Webの職種

Webディレクター（デザイン/エンジニア/マーケティング系）
Webデザイナー
コーダー
プログラマー、エンジニア（フロントエンド/バックエンド）

作業の分業が、コミュニケーションの分断につながる場合がある。Webデザイナーがコーディングもできるなど、各職種のスキルが交差していることが重要。それぞれが共通言語持つことや視野の広さが大切。

スキルのアップデート

常に自分のスキルの少し上のことをやり続ける。自分ができる範囲を少し超えたことをやる。時間的余裕のある案件は新しいツールを試すチャンス！

後発のサービスが、既存サービスのいいとこ取りでリリースしてくる。Webの面白いところ。

純度の高いものに触れる

UI（ユーザーインターフェース）デザインの根っこを自分のものにしておくことで、未来的にスクリーンがなくなってもデザインの視点がぶれない。

特に間違いの多い用語

ホームページ｜ホームページとは、ブラウザでウインドウを開いた時に開かれるページのことを指す。一般的にホームページと呼ばれているものはWebサイト。単一ページの場合はWebページが正しい。
シミュレーション/コミュニケーション｜シュミレーション/コミニュケーションは間違い。
ヘッダー/フッター｜header/footer なので、へッター/フッダーは間違い。

Webサイトの原型はテキストリンク

Webサイトで使われる http（Hypertext Transfer Protocol）の Hypertext はテキストリンクのこと。Webサイトの原型はテキストリンクでマークアップされたテキスト情報だった。
これはWebページです

Webマーケティング

アクセス数や広告結果など、結果が数字でみえる場合がほとんど。商品を購入した率や、お問い合わせを受けた率のことを転換率（コンバージョン）という。

Google Analytics

Google が提供しているアクセス解析ツール。アクセス数やどこからやってきたのかを知ることができる。特別な理由がない限り、制作したWebサイトには設定するべきもの。

Webと紙の相乗効果

Webではこれ、紙ではこれ、あわせてこういう結果を生み出すというように、得意分野に振り分けていけるのが両方できる強み。相対するものではない。

ネット広告

バナー広告、リスティング広告など。LP（ランディングページ）とセットで行うことが多い。

LP（ランディングページ）

公式サイトのコンテンツとしてはふさわしくないトーンマナーでも、広告の受け口として使うことができる。ターゲットを絞ったLPを複数用意するのが一般的。

キャンペーンサイト

一般的には、付加価値（インセンティブ）をつけて集客を行い、転換率を上げる仕組みづくり。

オウンドメディア

自社メディア。公式サイト。最終的にブランディングを行うべき場所。SNSは情報が蓄積していかず、SNSがなくなればコンテンツがゼロになるため、SNSはあくまでも手段として使っていくべき。

Google のサイト評価の仕組み

ドメイン継続年数やオーサー（著者）ランク、コンテンツの質や情報量など、総合的に評価される。昔のように検索エンジン最適化（SEO）という視点ではなく、正直にクオリティの高いコンテンツ作りを継続して行ってきたWebサイトが評価される。

ペルソナの設定

具体的な人物（お客様やタレントなど）を設定して、その行動を設定する。1日どんな行動をとるか、どこで何を食べるかなど。そして、その人に買ってもらえる商品をつくる。

ダサピンク現象｜たとえば男性ビジネスマンの間で流行ったペンを女性向けにも展開しようとすると、だいたいダサいピンクになる。
年配向け商品｜多くの場合は先入観から地味なアースカラーが選ばれるが、実はビビッドなビタミンカラーが求められていることもある。普段あまり身につけない色を取り入れてエネルギーを得たいと考えている人もいる。

こういったことを、ペルソナの設定によって改善できる場合がある。

SWOT分析

Webサービスを立ち上げる時、最初に聞き出すべき内容。まずは強み/弱み/機会/脅威を書き出す。

	プラス要因	マイナス要因
内部環境	強み（Strength）	弱み（Weakness）
外部環境	機会（Opportunity）	脅威（Threat）

次に、強み/弱み/機会/脅威が交差する部分で、積極的戦略/差別化戦略/改善戦略/致命傷回避などの解決策を書き出していく。

	機会	脅威
強み	積極的戦略	差別化戦略
弱み	改善戦略	致命傷回避

RFM分析

ネットショップなどで、顧客の属性による絞込を行うための手法。

最終購入日（Recency）
購入頻度（Frequency）
購入金額（Monetary）

の3つの指標で顧客データを並べ替える。また、ライフタイムバリュー（顧客生涯価値）という視点も大切。直近のキャンペーンの結果や商品の売上だけでなく、生涯に購入してもらえる総金額でマーケティングを行う。

ABC分析

ネットショップなどで、売上高ごとに3段階に商品をわける。常に在庫を持つべき商品か、受注生産にするべきかを振り分ける場合に使う分析法。ただ、ネットショップの場合は売れ筋商品だけでななく「死に筋商品」という、その商品があるからこそ他の商品が選択されるということも起こる。

マルチデバイスへの対応とモバイルファースト

あらゆるWebサイトへのアクセスが、PCよりもスマホからのアクセス数の方が多くなった。そういった背景にあわせてWebサイト制作の順番も素早く変えていく必要がある。

マルチデバイスへの対応とモバイルファースト

iPhone 7/7 Plus/SE（4.7/5.5/4）、iPad Pro 9.7/12.9、MacBook Pro 13/15、MacBook 12、iMac 21.5/27、Windows、Android など、さまざまなスクリーンサイズを持ったデバイスがある。他にもテレビ、ゲーム機器など、ネットにつながるデバイスは多い。

ブレークポイントで可変するサイト

1つのWebページを異なるスクリーンサイズに柔軟に対応させるため、デバイスのスクリーンサイズによって表示の仕方を変える。デバイスのスクリーンサイズにあわせて表示を最適化していく手法を「レスポンシブWebデザイン」という。

画像のピクセルパーフェクト

データ上の1ピクセルと、スクリーン上の1ピクセルとが一致する「ピクセルパーフェクト」が意味を失った。スクリーンの解像度にあわせて、100pxなら100pxのデータを1px＝1pxで表示するのがピクセルパーフェクトという考え方。

たとえば iPhone にはスケーラーという機能が働いていて、割り切れない拡大率でもジャギーがでることなくキレイに画像やテキストを表示する。RertinaDisplay のような高解像度なスクリーンでもピクセルの存在を感じさせない。

いずれスクリーンからピクセルという概念が無くなると考えた方が早いかも知れない。

高解像度スクリーンに対応するための1x、2x

それぞれ1x（ワンエックス）、2x（ツーエックス）と読む。1xの画像データを2倍にしたものが2x。高解像度のスクリーンでは2xを表示させ、それ以外のスクリーンで1xのデータを表示するように、読み込む画像データを振り分けることが可能。

Photoshop でWebデザインする際にも幅960pxの2x、つまり幅1,920pxで制作しておき、必要に応じて1xと2xの画像を書き出す。960pxの2x（1920px）であれば、A5サイズの実データ（350dpi）ほどのデータが必要となる。Webは低解像度で良いというのは過去の話。ただし、無駄に大きいサイズの画像を縮小して使うのはデータ読み込みに時間がかかるだけでなく、デバイスのメモリを消費するので、ブラウザのフリーズにもつながる。あくまでも最適なサイズを利用する。

モバイルファースト

スマホサイトを最初にデザインし、次にPCサイトをデザインしていくという流れ。スマホが出始めた頃は、これのまったく逆のPCファーストだった。PCで自由な表現でサイトを作り、そこから情報を省いていったものがスマホサイトだった。また、フィーチャーフォン全盛期やスマホ初期には、PCサイトとモバイルサイトを分けることが多かった。

http://www.ドメイン/｜PCサイト
http://www.ドメイン/sp/｜スマホサイト
http://www.ドメイン/m/｜モバイルサイト

のように、PHP や.htaccess で振り分けていた。

そこから数年で立場が逆転した。どのサイトもスマホでのアクセス数が増え、ついにPCを抜いた。特にネットショップでは、スマホ対応なしに今後も売上を伸ばし続けていくことはできないと考えて間違いない。

スマホサイトからデザインしていくことで、構造がシンプルになる。スマホは基本的に1カラムのレイアウト。PCサイトのように常にサイドバーが表示されることはない。

もしPCファーストでデザインするとどうなるか。PCは大きな画面サイズのためより多くの情報を入れ込めるので、自由な表現が可能。ある意味では、無駄な装飾が増えることになる。それをスマホに対応させていく段階で、要素が引き算されることになる。そうすると、スマホサイトの機能が絞られ、やはり最終的にPCサイトを開かないとダメだということになる。スマホサイトが登場したときは、このような経験が多かった。過度な装飾は、スマホでは情報のノイズにしかならないので気をつけたい。

スマホサイトの重要な要素として、構造がシンプルであること。ページ分けするよりは、1ページの中でスクロールして見せたほうが効果的。メニューをタップするよりも、指をスワイプさせてコンテンツをスクロールする方が圧倒的に簡単な動作となる。ページの読み込み時間も発生しない。メニューをクリックして次々とページを移動していくのは、マウスのクリックが得意とする動きだ。それよりも、スクロールだけで要点を魅せるデザインの方が、成功体験に結びつきやすい。Webサイトで伝えるべきことをうまく整理するということでもある。

コンテンツファースト

コンテンツファーストという考え方もある。ユーザーが求めている情報がはっきりとしている場合に、その情報へ最短の方法でたどり着ける構成であるべきという考え方。
例）Amazon、Wikipedia

スマホ特有の機能

GPS、ジャイロセンサー、カメラ、マイク、気圧計など。Macにも搭載されている機能もある。これらの機能は、HTML5でコントロールすることが可能。

Google の検索エンジン

Google の検索エンジンが、PCとスマホそれぞれ切り分けられると発表された。PCとスマホは一緒になるのではなく、それぞれ影響を与えながらも独自の進化を遂げていく。

最近は Twitter で検索する人も少なくない。リアルタイムな情報を得られるからというのが理由。

スマホ専用サイト

PCサイトは作らずに、スマホ専用サイトのみを制作するメリットもある。Webサイトが利用される場所が屋外に限られている場合など、スマホでの操作に特化したデザインを行える。また、スマホには比較的新しいブラウザ（モダンブラウザ）が載っているので、PCのように古いブラウザ（レガシーブラウザ）に対応させるための制作コストを抑えられる。PCでアクセスした場合にはサービスの案内のみにとどめて、あくまでもスマホから利用してもらう動線を作る。

タブレットへの対応

スマホよりもPC寄りのレイアウト。PCサイト（フルサイト）を表示させる。クリックでは点を狙えるが、タップは押し間違いが発生するのでマージンのとり方の違いがある。そもそも、この違いを理解していれば、PCサイトのWebデザインを行う際にマージンのとり方が広くなり、タブレット表示時のマージンを想定してデザインすることができる。

スマホアプリ

アップデートのスピードは、Webサービスに比べると遅い。こちらのタイミングで好きなようにアプリのアップデート公開を行えるわけではない。アプリ内に、ただWebページを読み込んでいるだけのものもある。操作すると必ずWebにアクセスするので操作性が悪い。スマホがオフラインの場合にコンテンツの表示が可能かどうかは、アプリとして大切な要素。

アプリ内ブラウザへの対応と、ページの高速表示

アプリからスムーズなコンテンツ閲覧を可能にする仕組み。Webサイトからデザインなどの要素を省いた、従来のRSSのような概念に近い。

AMP（Accelerated Mobile Pages）｜Google が推進する
instant article｜Facebook が推進する

Webサイトの構造とコンテンツ設計

Webサイトはいつどんな状況で使われるか、そこで何を感じているか。無意識で使われることの多いWebサイトでは、SN比のチューニングが大切な視点となる。

SN比とは、シグナルとノイズの比率のこと。伝えるべき必要な情報要素か、装飾として存在する要素か。

Webサイトの構造

主な構造5種類

直線型｜スタートからゴールまでステップを追っていく。
例）ランディングページやお問い合わせフォーム
ハブ＆スポーク型｜中心から、目的にあわせて分岐していく。
例）Facebook
Web型｜スタートもゴールもない、永遠と続く構造。
例）Amazon
階層型｜トップページから、より深い階層へと進んでいく。
例）コーポレートサイト
ファセット型（一覧＆詳細型）｜商品一覧ページで条件を次々に追加して絞り込んでいく。
例）ECサイト

Webサイトは必ずしもトップページから順を追ってアクセスしていくものではない。ネットショップであれば、検索エンジンからいきなり商品詳細ページへとたどり着く。そこからカートに進んで必要な情報を入力して購入を済ませる。その一連の動線の中に必要な情報（たとえば信頼感や配送に関する情報など）をシンプルに組み込む必要がある。

やたら情報を詰め込み過ぎてしまうと、そのエリアはまったく読まれなくなる。情報のSN比を考えて常に情報を整理していく必要がある。

何か調べようとするとき、何か買おうとするとき、ほとんどの場合は頭に浮かんだいくつかのフレーズを打ち込んで検索する。そこから目的のページにたどり着く。その際に、ロゴが浮かんでいるだけのトップページには何も用は無い。

スマホに最適化されたWebサイトは絵巻物のようなもの。巻物を少し開いてみて、興味がなければ他の巻物を手に取る。同じく少し開いてみて、興味をもったらさらに巻物を開いてみる。そのまま最後までみてもらえる巻物はどういった構成やデザインが必要だろうかと模索することが重要。

コンテンツ設計

同じ素材でも、情報をどんな視点で束ねるかでまったく違うWebサイトになる。

ネットショップで、商品ライン、商品の色やサイズ、価格帯などの条件を選んで絞り込む機能を追加されることがある。この絞り込み検索は、多くの場合ユーザーに実際使われることは少ない。

スマホが使われる場所と状況

たとえば北海道に住んでいる人が「カフェ」と検索して、都内のカフェの情報ばかりでてくるようではよろしくない。PCサイトではカフェのコンセプトやオーナーの情報がメインだとしても、スマホサイトの場合は地図や店内イメージをメインに表示するなど、サイトが使われる状況を意識することは必要。どうでもいい情報ではないが、「今は」どうでもいい。スマホサイトは、クリエイターが制作する時と、ユーザーが使う時とのテンションが大きく違う。本当に使いやすいUIとはどういうものか。ひとつの例えとして、酔っ払っていても大きなミスをせずに目的を達成できるもの。

ファーストビュー

ファーストビューは、カタログの表紙のような概念ではない。どんなにキャッチーで美しいファースビューを作ってそのページにアクセスしてもらっても、成功体験に結びつかないと次にアクセスされることはない。Webサービスでは、成功体験の積み重ねが重要。

チラ見せで動線をつくる。少しだけ見えているアイコン、これによって左右にスクロールできることがわかる。タップできることがわかるアイコンなど、視覚的に動線がみえていることが重要。

アフォーダンス

インターフェイスデザインの基本的な考え方。たとえば山頂にある切り株。イスのような高さであれば、人はそれをイスとして座る。「これはイスです」や「イスはこちら」とか書く必要はない。

Webブラウザと表示の検証

ブラウザによってWebサイトの表示が変わるというのは、昔ほどではないが今でも存在する。理由はブラウザに使われているレンダリングエンジンがそれぞれ異なり、新しい技術への対応がそれぞれ異なるため。

ブラウザの種類とレンダリングエンジン

Chrome｜Blink
Safari｜WebKit
Firefox｜Gecko
Internet Explorer｜Trident
Windows Edge（Windows 10）｜EdgeHTML

Windows Edge は他のブラウザと同じく、メジャーバージョン表記（IE9,IE10など）が廃止された。独自仕様ゴリ押しでWeb制作者を苦しめていた Microsoft は、近年では業界標準に沿うようになった。

最近のWebサイトは「HTML5+CSS+JavaScript」で制作されることが多い。ブラウザによる表示の違いというのは、HTML や CSS の解釈の仕方に少しづつ差があるために起こる。一例として、まずは基本となるコードを書いて、その後に各ブラウザで動作するようにベンダープレフィックスを使って記述していく。

Windowsと対応ブラウザのバージョン

Windows XP｜IE 6, 7, 8
Windows Vista｜IE 7, 8, 9
Windows 7｜IE 8, 9, 10, 11
Windows 8｜IE 10
Windows 8.1｜IE 11
Windows 10｜IE 11, Edge

対応するべきターゲットブラウザとバージョン

IE10 以下がサポート終了しているため、対応するべきブラウザは以下のようになる。

Chrome
Safari
Firefox
Internet Explorer 11
Edge

やはり問題になるのは IE のバージョン。サポートが終了している IE10 以下のブラウザに対してどこまで対応するかはアクセスログなどから検討するべき。ただ、サポートが終了しているバージョンというのは、少なくとも仕事で使ってはいけないものであり、いかなる致命的なバグやセキュリティーホールがあってもそれを修正するアップデートが提供されないということ。そのため、ネットショップで古いバージョンのブラウザからのアクセスを推奨することには問題がある。

reset.css

ブラウザによって、デフォルトのテキストサイズやマージンの解釈などが異なる。各ブラウザの表示差異をなくすために、すべての表示をリセットするCSSを読み込む。

CSS Reset - YUI Library

シミュレーター/エミュレーター

実機が用意できない場合は、シミュレーターを使って表示テストを行う。

iOS｜Xcode
Android｜Android Studio
Windows｜VirtualBox

Safariの開発メニューを表示する

Safari の「環境設定 > 詳細タブ > メニューバーに”開発”メニューを表示」のチェックをオンにすると、メニューバーに「開発」が表示される。どのファイルの読み込みに何秒かかっているかを確認したり、ユーザエージェントを変更できるので、PCではアクセスできないスマホサイトを表示できる。

スマホのデフォルトブラウザ

iOS｜Safari
Android｜Chrome

スマホの向き

縦｜Vertical｜Portraitモード
横｜Horizontal｜Landscapeモード

iPad の Split View では、5:5 や 7:3 の表示ができる。

ブラウザの歴史

ウェブの進化

フラットデザインとUIの操作

リアルな世界に存在するボタンのメタファーをWebに取り入れることで、ボタンを押すとページが移動するという操作を直感的に行えるようにした。こういった操作を多くの人が学習してきたことで、もはやボタンである必要がなくなった。

Webデザインの流れ

立体的なボタンやリアルなアイコンデザインなど、人はリアルの生活にあるものと結びつけて、その操作方法や機能を想像することができた。

それまでのテーブルレイアウトから、正しい構造でWebサイトを作る「Web2.0」で多くのWebサイトが整備された。多くのAPIの開放やライブラリの提供、オープンソースのCMSなど、お互いに技術やスキルを提供しあうことで、Web全体の底上げが行われた。

「Web 2.0」という言葉は秀逸だった。「これからは2.0だよ」ということで、これまでのWebサイトがすべて古くなった。と同時に、これは未来へと継続していく進化であることを伝えた。

そこからインターネットやアプリの可能性が模索され、過渡期としてリッチなデザインのアイコンが使われた。Mac OS X（現macOS）のアイコンがまさしくスキュアモーフィックデザインだった。いまでもいくつかのアイコンにその名残はあるけれど。

そしてフラットデザインへ

フラットデザインとは、立体感のないシンプルなデザインを指すだけではなく、スクリーンに表示されるUIの進化の過程。

「押すとへこむボタン」というUIによって、押せるボタンであることを伝え、Webサイトを見るだけのものではなく、人が操作してインタラクティブに動くものになった。多くの人がその体験から学習をして、今はもうタップできる部分を大げさに表現する必要がなくなった。UIのビューとコントローラの境界が溶けていった。現実世界のメタファーとしてのビジュアルもあまり使われなくなった。

フラットデザインを取り入れたUIでは、「奥行き」が重要な概念となる。コンテンツが一番奥にあって、たとえばその上に白くて薄い1枚のシートが重なり、さらにその上にUIアイコンが置かれる。画面の推移は、上へ上へとシートをかぶせることでもある。

この「奥行き」という概念は、リアルな空間の中に浮かび上がるUIのシートのようなもの。一番奥にリアルがあり、手が届くところにUIが浮かぶ。リアルとUIの境界を鮮明にするために、1枚の薄いシートがある。

スマホの操作を理解する

スマホでのジェスチャーの種類を理解しておく。これ以外のジェスチャーをユーザーに強要しないこと。スマホはPCのようにカーソルがないので、マウスオーバーという概念はない。

タップ｜押す
ドラッグ｜スクロールまたはパン
フリック｜素早くスクロールまたはパン
スワイプ｜隠れたビューを引き出す
ダブルタップ｜二度押し
ピンチ（ピンチイン/アウト）｜2本指で拡大/縮小
タッチ＆ホールド｜長押し
シェイク｜取り消し
ピーク｜軽くプレス
ポップ｜深くプレス

フィードバックとモーダルウインドウ

ログイン後に「ログインしました」とモーダルウインドウが表示されて、「OK」を押すまで次の操作を受け付けない。こんなWebサイトやアプリがある。本来モーダルウインドウは、重要な選択をユーザーに行ってもらう以外に頻繁に使用しないこと。

ガイドライン

特に Apple の HIG は必読。

UI - ハンバーガーの位置は右か左か

｜スマホサイトでよくメニューとして使われているこのアイコンをハンバーガーという。

統計的に、スマホを右手で操作する人が圧倒的に多いらしい。左手2：右手8の割合。右手で操作する場合、ハンバーガーは右にあった方が指が届きやすくて操作がしやすい。また、常にハンバーガーをページ上部に固定表示させる場合にもやはり右が好ましい。テキストを読むページなど横組みのWebサイトにおいて行頭にUIが重なっているというのは非常に文字が読みにくい。

セキュリティ意識とパスワード管理

様々なアカウントを管理するために 1Password.app を使う。パスワードは、自分で覚えることができて手入力できるようなものは使用しない。「N2hmvfQJTXtwLMrhtkHqcpZ;vVvj/m6t」のように強固なパスワードを使い、手入力せずに 1Password から自動入力かコピペしてログインする。

1Password

強固なパスワードを生成して、安全に管理するためのアプリ。ブラウザの機能拡張として連携できるので、ブラウザ上で 1Password を呼び出すことができる。

1Password でできること。

強固なパスワードを生成する
ブラウザで開いてるページにあわせて、ユーザー名/パスワードを呼び出してログインする
iCloud を介して Mac と iOS でパスワードを同期する
メモや画像を保存する
免許証やパスポート、銀行口座などの情報を管理する
メールアカウント、データベース、サーバー、ライセンスなどの情報を管理する

アカウントの乗っ取り

アカウント乗っ取りに使われる手段のひとつに、総当たり攻撃（ブルートフォースアタック Brute-force attack）がある。
総当たり攻撃 - Wikipedia

4桁のパスワードだとしたら、0〜9、a〜zまでをすべて総当りに試していく方法。

0001｜0002｜…｜9999
aaaa｜aaab｜aaac｜…｜zzzz
aaa1｜aaa2｜aaa3｜…｜zzz9

8桁の大小英数字および記号を含むパスワードだとしても、数十日でクラックされる計算となる。16〜32文字など、可能な限り長いパスワードを生成する。

最近のやり口が巧妙なのは、たとえば Twitter のアカウントが乗っ取られて「このアカウントを乗っ取ったぜ！うへへ！」と投稿されればすぐにわかり対策を取れるが、実はすでに乗っ取られていて、そのパスワードを元に他のアカウントへの乗っ取りを試されているかも知れない点。すぐに被害にはあわないが、より大きな被害へとつながる可能性がある。

アカウントのゾンビ化

パスワードの使い回しやパターン化してはいけない。

Facebook のパスワード｜password@facebook
Twitter のパスワード｜password@twitter
LINE のパスワード｜password@line

このようなパスワードで Twitter のアカウントが乗っ取られた場合、他のアカウントも乗っ取られるのは時間の問題。そうやって本人が乗っ取りに気がついていないゾンビアカウントが潜んでいる。

特に Facebook は、本人が二段階認証を設定するなどどんなにセキュリティを強化していたとしても、その友達のアカウントのいくつかが乗っ取られている場合には、為す術がない。信頼できる連絡先として登録された3人以上の友達の許可でアカウントにログインすることができる仕様のため。

CMSの管理画面

あらゆるWebサイトの管理画面で日常的に総当たり攻撃が行われている。WordPress で構築されたサイトなど、ドメイン名に一定のディレクトリ名を追加すれば、簡単に管理画面にアクセスすることができる。そういった方法で総当たり攻撃を行うロボットからサイトを守るために、いくつかの手法を組み合わせる。

管理画面のURLを変更する｜管理画面にアクセスされるのを防ぐ
アクセス認証｜｜管理画面にアクセスされるのを防ぐ
CAPTCHA｜ロボットによる総当たり攻撃を防ぐ
数回ログインを失敗すると数時間アクセスできないようにする｜ロボットによる総当たり攻撃を防ぐ

ソーシャルエンジニアリング

パスワードはリアルなやりとりでも盗まれる。ビジネスマナーとして「失礼になるから」ということを悪用している。

過去に実際にあった話で、会社にかかってくるしつこい営業電話をずっと断っていた社長がいた。ある日、社長がいない時間帯にその営業から電話があった。「ケータイが壊れてしまって、社長のケータイ番号がわからなくなってしまったので教えてください」この電話を受けた人は、そういった事情であればと教えてしまった。

このようなビジネスの現場であることを利用したソーシャルエンジニアリングにも十分に気をつける。

Macの制作支援アプリ

必要最低限のアプリだけを入れているので、そのほとんどがスタンダードなものです。Web制作に使える便利アプリをいくつか紹介します。

制作系アプリ

Webデザイン/グラフィックデザイン

Photoshop｜Webデザインや画像処理
Illustrator｜グラフィックデザインや素材制作
Lightroom｜写真の現像
InDesign｜エディトリアルデザイン

Web制作

Dreamweaver｜コーディング時に複雑な table を作成するために使用
Animate｜HTML5 アニメーション作成
Character Animator｜キャラクターアニメーション作成
Experience Design｜Webサイトのプロトタイプ作成

動画制作

Adobe系

Premiere Pro｜動画編集
After Effects｜動画編集
Media Encoder｜動画エンコード

Apple系

Final Cut Pro X｜動画編集
Motion｜動画編集
Compressor｜動画エンコード

動画編集アプリは Adobe系と Apple系を何度も行き来していて、いまは Apple系を使っている。1080/60p や 4K/30p の編集を行う場合、Premiere はプレビューでもたつくことがあるけど、Final Cut Pro はびっくりするくらいサクサク動いてくれる。Premiere に不具合があるのと、Final Cut Pro が Mac に最適化されていることの両方が影響しているように思う。

音楽制作

Logic Pro X｜音楽制作

SNSとの連携とOGP

SNSとの連携というのは、WebサイトにSNSボタンを埋め込むという技術的なものだけではなく、マーケティング的な意味合いとしてWebサイトとSNSがうまく回っていく仕組みづくりのこと。

SNSの基本的な考え方

Webで起こったことはWebで盛り上がってWebで完結する。Webの出来事が人のリアルな行動にまで繋がっていくことは非常にまれ。

Facebookの投稿はFacebookの中でのみシェアされ、TwitterのツイートはTwitter上でリツイートされる。プラットフォームごとのSNS運営が大切。

人は一番近くにある簡単な方法で目的を達成する。SNSボタンを設置して動線づくりをすることで、情報を共有したいという目的を達成しやすくする。

投稿のわかりやすさは大切。伝わる言葉を選んで投稿する。カタコトのクールな投稿はNG。コメントへの返信も、その対応の仕方を多くの人が見ている。あらゆる接点でSNSアカウントは評価されている。

投稿の内容は正直に。ネガティブなコメントも共感を呼んでリアルさが出ることもある。

SNSは何かしら共通点を持った人同士がつながっているが、自分のFacebookのニュースフィードと友達のニュースフィードの内容は全く雰囲気が違うことがある。

「雑誌に掲載されました」「ポータルサイトに取り上げられました」というだけのアカウントは、純粋なファンに対してもゴールを示せていないためNG。ここでも成功体験が重要。成功体験のないところに人はリピートしない。

OGP（Open Graph Protocol）

WebページがSNSでシェアされた場合に、こちらの意図した画像やテキストが表示されるようにするための設定。主にFacebookとTwitter用。

シェアデバッガー/カードバリデータ

実際にシェアされた場合にどんな表示になるかを確認できるツール。

シェアデバッガー｜Facebook for Developers

Card validator｜Twitter Developer

OGPの記述方法

html の headタグ内に metaタグを記述する。

// 共通項目
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの概要" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:type" content="ページのタイプ｜article、website など" />
<meta property="og:sitename" content="サイト名" />

// Facebook用
<meta property="fb:appid" content="App ID" />
<meta property="article:publisher" content="FacebookページのURL" />

// Twitter用
<meta name="twitter:card" content="Twitterカードの種類｜Summary Card、Photo Cardなど" />
<meta name="twitter:site" content="@Twitterアカウント名" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの概要" />
<meta name="twitter:image" content="サムネイル画像のURL" />
<meta name="twitter:url" content="ページのURL" />

Facebook用OGPでサムネイル画像の注意点

画像サイズはW:1,200×H:630px以上
データ容量は5MB以内
画像が切れてしまわないようにアスペクト比を「1.91:1（Width:Height）」にする
画像が表示される場所によっては正方形で表示されるので、画像内にテキストは追加しない

Facebook/Twitter ともに頻繁に仕様が変わるため、最新情報を入手しておく。

Open Graph - オブジェクトのプロパティ｜Facebook for Developers

Cards Markup Tag Reference｜Twitter Developer

Facebookプラグイン

いいね！ボタンやコメントプラグインを追加するためのコードを生成する。
ソーシャルプラグイン｜Facebook for Developer

Twitterプラグイン

ツイートボタンやフォローボタンを追加するためのコードを生成する。
Twitterボタン

仕組みの連携

例として、カメラを購入しようと検討している人を対象をしたキャンペーンサイト。エントリーして「期待のコメント（このカメラに期待すること）」を書いてカメラを購入することで、もれなくキャッシュバックを受けられる。コメントの内容はSNSにも投稿される。

EOS M5 新発売キャンペーン｜キヤノンEOS M5

ページの読み込みスピード

Webサイトの読み込みスピードは非常に重要な要素。PCのネット回線は高速化したが、スマホはまだまだ回線速度が貧弱。

ネットショップの場合、読み込みスピードによって購入率が変わる。Amazonの公表データでは、読み込みスピード0.1ms（0.001秒）の違いで売上が1％変動する。

データの圧縮方法

画像を最適化/再圧縮することで、わずかではあるがデータサイズを圧縮できる。1ファイルあたり数KBの圧縮だとしても、1ページあたり1MB以上のデータ量を減らせることもある。
html/JavaScript/CSS の余計なスペースやコメント、改行やインデントを削除する。
JavaScript の読み込み順を最適化することで、レンダリングを早くする。
ページ構成や、html のマークアップを見直す。
サーバーを移行してパフォーマンスをアップさせることも方法のひとつ。
AMP（Accelerated Mobile Pages）対応をして読み込みを高速化する。

Google のチェックツール

ページのパフォーマンスを測定するためのツール。
PageSpeed Insights

ページの表示は5秒以内

ページの表示にかかる時間が5秒を超えると離脱率が上がる。さらには3秒以内を目標とし、1秒以内までいきたい。ms単位でチューニングを行っていく。

スマホを手に持って次の画面が表示するのを待っている状態。この状態で5秒以上何も表示されない場合は、ほどんどの人が待てずに離脱する。

すべての読み込みが完了しなくても、スクロールせずに表示される部分の読み込みが完了するまでの時間。

そもそもページ読み込みスピードを考慮したコンテンツ設計であることが前提。

1秒以内の表示を達成するにはAMP対応が必須。

ワークショップの概要とカリキュラム

Webサイト制作のワークショップを各所で行いたいと思います

概論

コーディング 1

コーディング 2

Photoshop で Webデザイン

Webサイト制作

Webマーケティング

マルチデバイスへの対応とモバイルファースト

Webサイトの構造

ブラウザ

フラットデザイン

フォント

カラー

アニメーション

Webサイトの公開

SNSとの連携

ライブラリとフレームワーク

CMS（コンテンツ・マネジメント・システム）

WordPress

ネットショップ

電子書籍

セキュリティについて

ページの読み込みスピード

ルーター

おすすめWebサービス/アプリ

Macやその他アプリのTips

コーディング1｜HTML・CSSの基礎

HTML/CSS/JavaScript

特殊なテキストエディタを使う理由

Emmet の使い方

ファイルを開くアプリを設定する

html の基本構造

html 基本タグ

id と class

CSS でのスタイリング

カラー指定

width で幅を指定する

ul と ol のリストの違い

要素の float

css の margin と padding

box-sizing

reset.css でリセットしているもの

擬似クラス

SmoothScroll の使い方

jQuery 3

コメントアウト

宿題

コーディング2｜スマホ対応とファイル構成

スマホのスクリーン

レスポンシブWebデザインのブレークポイント

画像形式

ファイル名（画像ファイル/フォルダ名/CSSのセレクタ名も同じく）

相対パスと絶対パス

URL とディレクトリ

index.html について

http と https

スマホサイトの自動リンク

チェッカーツール

html基本タグ

htmlタグとdiv/spanの違い

PhotoshopでWebデザイン

単位はピクセル

グリッドデザイン

制作フロー

モジュール/コンポーネント化

どんなUIがあるか

Device Preview

Photoshop/Illustrator

Photoshop の Tips

カラー設定

単位

ワイヤーフレームを作成する

スマートオブジェクト

同じ位置に配置する

画像の拡大縮小

スクラブズーム

ピクセルグリッド

グリッド表示

スナップ