
## TL;DR

少し前に<a href="https://commte.net/4415" target="_blank">サイト制作でさりげなく使われている CSS テクニック</a>をまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。

Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができる<code>background-blend-mode</code>プロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。

```css
.blended {
  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;
}
```

効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard-light／soft-light／difference／exclusion／hue／saturation／color／luminosity

<ul>
	<li><a href="http://hyper-text.org/2013/12/background-blend-mode_property.shtml" target="_blank">background-blend-mode プロパティで背景をブレンドしてみよう | WWW WATCH</a></li>
	<li><a href="http://css-tricks.com/basics-css-blend-modes/" target="_blank">Basics of CSS Blend Modes | CSS-Tricks</a></li>
</ul>

#### ２．表示範囲

プロパティ<code>clip: rect(上, 右, 下, 左 )</code>を使うとコンテンツや画像の表示範囲を指定することができます。position プロパティの値は absolute にします。

例：<code>clip:rect(60px 150px 130px 40px); position:absolute;</code>

<ul>
	<li><a href="http://c-brains.jp/blog/wsg/13/04/26-230906.php" target="_blank">clip使ってみた &amp; アニメーションサンプル作ってみた | バシャログ。</a></li>
</ul>

#### ３．透過＋合成

background の値に<code>cross-fade()</code>を指定すると２枚の画像を合成し表示することが可能となります。「％」のパラメータは透過度です。参考：<a href="http://peter.sh/files/examples/cross-fading.html" target="_blank">CSS Images Level 4 cross-fade() example</a>

```css
#img {
  background-image: cross-fade(url(''logo-box.png''), url(''logo-bare.png''), 50%);
}
```

<ul>
	<li><a href="http://blog.webcreativepark.net/2012/09/26-104641.html" target="_blank">クロスフェードを実現するCSS4のcross-fade() - to-R</a></li>
</ul>

#### ４．半透明

CSS3 では<code>filter</code>プロパティでフィルタをかけることができます。<a href="http://kojika17.com/2013/02/ordering-vender-prefix.html" target="_blank">ベンダープレフィックス</a>と一緒に使用してください。例：ぼかす場合は<code>-webkit-filter: blur(10px);</code>、白黒にする場合は<code>-webkit-filter: grayscale(1);</code>など。

<ul>
	<li><a href="http://hyper-text.org/2013/09/css_filter_translucent_glass.shtml" target="_blank">CSS filter プロパティで 「半透明ガラス」 効果を再現してみる | WWW WATCH</a></li>
</ul>

### エフェクト

#### ５．マウスオーバーアイデア一覧

js を使わない、画像にマウスを乗せたときのエフェクト一覧。<a href="http://www.htmq.com/css3/transform_translate.shtml" target="_blank">translate3d</a>は X 方向と Y 方向と Z 方向の距離で 3D 移動を指定することができます。例：<code>-webkit-transform: translate3d(0,-7%,0);</code>で上に動かします。

<ul>
	<li><a href="http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/" target="_blank">Ideas for Subtle Hover Effects | Codrops</a></li>
</ul>

#### ６．CSS のみでメニューアイコン

画像を使わないシンプルなメニューアイコンの作り方。三本の線をクリックで回転・消去・位置を変更させ「×」に変更します。<code>-webkit-transform: rotate(-135deg);</code>で角度を変更、<code>background-color: transparent;</code>で透過させています。

<ul>
	<li><a href="http://codepen.io/andredomrod/pen/clKtu" target="_blank">CodePen - A Pen by André Rodrigues</a></li>
	<li><a href="http://codepen.io/kyleHenwood/pen/Alayb" target="_blank">SVG CSS3 Menu / Burger Button - CodePen</a></li>
</ul>

### 段組み

#### ７．マルチカラム

<code>column-count</code>を使うとボックス内のコンテンツを段組することができます。以下のように値を 2 と指定したときは、２カラムのボックスが構成されます。

例：<code>column-count: 2;</code>

<ul>
	<li><a href="http://www.htmq.com/css3/column-count.shtml" target="_blank">column-count－CSS3リファレンス</a></li>
</ul>

#### ８．段の表示順

float の解除を気にしなくていい flexbox を使うことにより横並びや並び順の変更など柔軟にレイアウトを変えられるようになりました。order を使うとフレキシブルレイアウトで段組みする際、アイテムの表示順を変更することができます。

例：<code>-webkit-order: 2; order: 2;</code>

<ul>
	<li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">CSS flexible box の利用 - Web developer guide | MDN</a></li>
</ul>

#### ９．コンテンツ流し込み

流し込みたいコンテンツを<code>flow-into</code>プロパティで指定し、レイアウトを<code>flow-from</code>で指定します。リージョンを使うとボックスにコンテンツを流し込みできます。

```css
article {
  -webkit-flow-into: myThread;
}

.region {
  -webkit-flow-from: myThread;
}
```

<ul>
	<li><a href="http://www.slideshare.net/keisuke322/css-regions-css" target="_blank">CSS Regionsを使った新しい CSSレイアウトを作る方法</a></li>
</ul>

#### １０．数値の計算

<code>calc()</code>は計算結果を値として利用できるファンクションです。少しめんどうな計算を CSS 単独で実現することができます。

例：<code>width: calc(100%/2);</code>

<ul>
	<li><a href="http://mbdb.jp/hacks/css-calc-function.html" target="_blank">CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法 | mbdb (モバデビ)</a></li>
</ul>

### 文字

#### １１．アウトライン

<code>text-stroke</code>プロパティで、文字のアウトラインを表示することができます。ベースの文字の色を color を白に指定して、以下のように黒のアウトラインをひくとわかりやすいです。

例：<code>-webkit-text-stroke: 1px black;</code>

<ul>
	<li><a href="http://css-tricks.com/adding-stroke-to-web-text/" target="_blank">Adding Stroke to Web Text | CSS-Tricks</a></li>
</ul>

#### １２．透過＋アウトライン

今度は<code>text-fill-color</code>プロパティで文字を透明にしつつ、アウトラインを表示します。<code>transparent</code>で文字の色を透明にしています。

```css
div {
  color: white;
  -webkit-text-stroke: 1px white;
  -webkit-text-fill-color: transparent;
}
```

<ul>
	<li><a href="http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20376120/2/" target="_blank">文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - page2 - builder by ZDNet Japan</a></li>
</ul>

#### １３．文字詰め＋リガチャ（合字）

トラッキングは複数文字間（テキストブロック全体）を調整することですが、<code>text-rendering</code>の値を<code>optimizeLegibility</code>にすると文字詰め処理を行います。<code>optimizeSpeed</code>は使わないときの処理です。

例：<code>text-rendering: optimizeLegibility;</code>

<ul>
	<li><a href="http://css-tricks.com/almanac/properties/t/text-rendering/" target="_blank">text-rendering | CSS-Tricks</a></li>
</ul>

#### １４．iPhone 文字を調整

これは皆さんご存知だとは思いますが、<code>text-size-adjust</code>でスマホを横にした際に、文字サイズをそのまま変わらないようにします。文字サイズ拡大ができなくなるので<code>none</code>は指定しないように。

例：<code>-webkit-text-size-adjust: 100%;</code>

<ul>
	<li><a href="http://zero.css-happylife.com/property/-webkit-text-size-adjust.shtml" target="_blank">-webkit-text-size-adjust｜プロパティ｜CSS HappyLife ZERO</a></li>
</ul>


知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック


## TL;DR

先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。

### レイアウト

視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。

#### １．アクティブ・ホワイトスペース

小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。

- [余白の美](http://hail2u.net/documents/ala-whitespace.html)

> 空白により読者のコンテンツの読み進めを制御することができます。このような視線誘導を目的とした余白のことを「アクティブ・ホワイトスペース」と呼びます。

上記のサイトではダイレクトメールを例にとった余白を使った比較を解説。余白が少ない方は貧相な印象、余白を取った方は高級感をかもしだしています。

#### ２．造形

関連する項目をグループ化する近接、ページ上のものを意図的に配置する整列、特徴を繰り返す反復、２つの要素をはっきりと異ならせるコントラスト。この４つの基本原則について解説してあります。

- [【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう – WP-E（仮）Web Professional Education](http://wp-e.org/2014/03/09/995/)

\[amazonjs asin="4839928401" locale="JP" title="ノンデザイナーズ・デザインブック フルカラー新装増補版"\]

あらゆるデザイン作品で使えるデザインの基本原則を示してある超有名な書籍。Web サイトだけじゃなく、名刺・チラシ・ニュースレターなどを制作する前にも読んでおきたい。名刺データ作成時に熟読しました。

#### ３．ジャンプ率

ジャンプ率とは本文を基準にし、最も大きな見出しとの時幅・高さで計算した比率。簡単に言うと「大小差」です。ジャンプ率を低くして高級感を出したり、高くして元気さをアピールしたり。以下参考になる記事です。

- [文字のジャンプ率を工夫する](http://design.graphic.jp/static/howto_design/topics_007.html)

#### ４．図版率

図版率（写真と文章の面積比）について。図や写真の面積比率がどれくらいあるか。小説は図版率が０％、絵本は図版率が高くなります。ターゲットの年齢層が高いほど図版率が低くなりやすいです。

- [誌面に対する文字と図版の割合｜いまさら聞けない!? 印刷・DTP の基礎知識｜クリエイターズ広場｜ OKI データ](http://www.okidata.co.jp/creators/tips1/tips10d.html)

### タイポグラフィの基礎

文字の見た目をよくするために、文字の左右の空間（アキ）を揃えます。文字と文字の間に何も入れずに並べた「ベタ組」の状態を詰めて文字のバランスを調整します。

#### ５．カーニングとトラッキング

カーニングは隣り合う２つの文字間を調整すること、トラッキングは複数文字間（テキストブロック全体）を調整すること。Photoshop／Illustrator なら`alt(Opt)+矢印キー`で出来ます。

- [カーニング（文字詰め） - Web デザインテクニック](http://technique.eweb-design.com/0401_kn.html)
- [デザイナーならこだわりたい文字詰め - デザイン雑学](http://ggdesign.blog48.fc2.com/blog-entry-39.html)

以下はイラストレーターを使った「自動カーニング」の設定方法。文章などをまとめて調整したいときに。手順は、`１．OpenTypeの「プロポーショナルメトリクス」にチェックを入れ、２．カーニングを自動、３．約物半角`を選択すれば簡単に文字詰めができます。

- [知っているのと知らないのとでは、ぐぐっと差がつく！文字組みの基礎](http://lab.sonicmoov.com/design/typesetting/)
- [Illustrator/InDesign の自動カーニングあれこれ - DTP Transit（Illustrator, InDesign）](http://www.dtp-transit.jp/adobe/illustrator/post_1411.html)

こちらは Photoshop 文字詰めの手順。

- [ワンランク上のデザインにはかかせない Photoshop の文字詰め「カーニング・トラッキング」のまとめ](http://creativememomemo.com/phtoshop_kerning_and_tracking/)

#### ６．文字の高さを揃える

文字にはすべてベースライン（仮想的な線）が存在します。和文のベースラインは縦組（中心）、横組（下のほう）と異なります。

住所や時間で使用するコロン（：）やハイフン、もしくは日付(○ 月 ○ 日)を組み合わせると数字に対して記号(：)や月日などが上下にずれてしまいます。イラストレーターを使ってベースラインを揃えるには、［文字］パレットのパレットメニューから`［文字揃え］→［欧文ベースライン］、もしくは「ベースラインの調整」`で調整します。

- [Illustrator CS 以降の文字組み - DTP Transit（Illustrator）](http://www.dtp-transit.jp/adobe/illustrator/post_542.html)

#### ７．文字の行間を揃える

行と行の間隔である行間。2/3 ～全角くらいが読みやすいです。行間を詰めるほど情報あふれる感じになるが読みにくい、広げ過ぎる（全角以上）と上品になるが間延びしてしまいます。

イラストレーターの文字パレットの行送りアイコンをダブルクリックで行間（100%）を詰めることができます。Illustrator で行間を調整するときは、`alt(Opt)+↑↓`で調整できます。

- [行間（行送り）を調整するニッチな Tips - DTP Transit（Illustrator）](http://www.dtp-transit.jp/adobe/illustrator/post_1162.html)

#### ８．Web での理想的な行間

Web は高速で文章を読んで行く場合が多いので、紙よりも読みやすくしたいところです。こちらのサイトでは、Web の理想的な行間や行長は、なぜレイアウトによって変化すべきなのか書かれてあります。

- [Web においての理想的な行間とは？ | 株式会社アクトゼロ／バイラル動画広告・ソーシャルメディアマーケティング](http://www.actzero.jp/developer/report-3439.html)

#### ９．綺麗に見える見出しのサイズ

見出しのサイズは本文の黄金比の(×1.61)倍で設定すると綺麗に見えます。Web では 16px の本文なら、見出しは 25px くらい。

- [デザインの基礎、黄金比から大和比、第 2 黄金比まで | Web Design KOJIKA17](http://kojika17.com/2011/08/type-of-ratio.html)

#### １０．書体の使い方

日本語と英語が混ざった資料、データを作成する場合に注意すること。英文には等幅フォント・和文フォントを使わない、和欧混植で注意することなど勉強になる知識をわかりやすく解説してあります。

- [書体の使い方｜伝わるデザイン](http://tsutawarudesign.web.fc2.com/yomiyasuku2.html)

### ＋約物（やくもの）を調整

約物（やくもの）とは、文章に使用する記号類(。、「」・…)の総称。他の文字と同じく全角に収められているので、普通に使うと文字間が空いたように見えます。タイトルなどのキャッチコピーなど目立つ箇所で使う場合は、アキをつめて調整。

#### １１．「」（かぎ括弧）を綺麗に見せる

括弧を見栄え良く見せるには、縦棒と横棒の長さが揃うように、正方形を分割して配置します。以下はタイトルなどで使う括弧を軽く見えるように作成する方法。

- [ポスターなどでのタイトルの文字の調整の実際 - DTP Transit（Illustrator, チュートリアル）](http://www.dtp-transit.jp/adobe/illustrator/post_1288.html)

#### １２．禁則処理

「」、。？！などの約物(やくもの)を行頭に並ばないように処理すること。追い込みは行頭に句読点が並ばないように前行に入れ、追い出しは行頭に句読点が並ばないように、次行の先頭に送ります。ぶら下がりは句読点を本文フレームの外に出すこと。

- [禁則処理 - Wikipedia](http://ja.wikipedia.org/wiki/%E7%A6%81%E5%89%87%E5%87%A6%E7%90%86)

#### １３．CSS で禁則処理をする場合

自動改行の設定を行う word-break プロパティと、禁則処理の設定を行う line-break プロパティについて。通常は`word-break: normal;`を使うといいですね。

- [CSS 3 におけるテキストの自動改行と禁則処理の定義 - builder by ZDNet Japan](http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20381014/)

#### １４．入手しておきたいフォントセット

Web 制作会社でも使っているところは多いですが、DTP で標準的に使われているフォントはモリサワかと思います。その他持っておきたいフォントは、和文と欧文のバランスがいい AXIS フォントなど。[AXIS のタイプテスターはこちら。](http://typeproject.com/fonts/axisbasic#typetester)

- \[AXIS\] [AXIS font | アクシスフォント](http://www.axisfont.com/)
- \[モリサワ\] [MORISAWA PASSPORT モリサワ パスポート | フォント製品 | 株式会社モリサワ](http://www.morisawa.co.jp/font/products/passport/)
- \[大日本スクリーン\] [SCREEN ｜ヒラギノ／千都フォント](http://www.screen.co.jp/ga_product/sento/)
- \[フォントワークス\] [FONTWORKS](http://fontworks.co.jp/)
- \[ダイナフォント\] [DynaFont 製品 | トップページ | ダイナコムウェア株式会社](http://www.dynacw.co.jp/dynafont/tabid/93/Default.aspx)

### 印刷と色の知識

実際に印刷をせず、データ作成までしかやらないとしても印刷の知識は必要だと感じたので最低限知っておきたいことを書いておきます。

#### １５．印刷用は CMYK

Web 上や写真データでは[RGB カラー](http://lowlife.jp/yasusii/static/color_chart.html)（光の色）で作成されていて、そのまま印刷物に使用できません。Web 上とは違って、カラー印刷物は、シアン・マゼンタ・イエロー・ブラックの４色で刷られることが多いので、カラーモードは「CMYK（光が紙などに反射し、目に届く色）」で制作します。印刷でくっきりした黒を出すため K（ブラック）の存在があります。[Photoshop によるカラーモードの変換はこちら](http://helpx.adobe.com/jp/photoshop/using/converting-color-modes.html)。

- [カラーモード(RGB カラーと CMYK カラー)とは?｜データ作成の前に｜印刷通販の【WAVE】](http://www.wave-inc.co.jp/data/basic/color.html)

CMYK で作れない色（蛍光色やゴールドやシルバーなど）を表現するときに、通常の４色以外を使った特色インキを使います。有名なところでは PANTONE や DIC 等だと思いますが、印刷会社によっては受け付けてくれないところもあります。その場合は CMYK で入稿します。

- [特色 (印刷) - Wikipedia](<http://ja.wikipedia.org/wiki/%E7%89%B9%E8%89%B2_(%E5%8D%B0%E5%88%B7)>)

#### １６．スミベタ／リッチブラック／4 色ベタの違い

スミベタ（K100%）はブラックインキのみで黒を表現。文字や細い線に適しています。

スミベタより深みのある黒を表現したいときは 4 色をかけあわせて作成したリッチブラック（例：C40% M40% Y40% K100%）。小さな文字や細線には適しません。合計値を 300%を超えると、裏写りの原因になります。

4 色ベタ（C100% M100% Y100% K100%）は大量のインキを使うので乾きが遅く裏写りの原因となることがあるので、あまり使いません。

- [印刷の黒:スミベタ(K100%)/リッチブラック/4 色ベタ｜印刷・DTP の基礎知識｜印刷通販の【WAVE】](http://www.wave-inc.co.jp/data/dtp/black.html)

#### １７．オーバープリント

K100%に対し、版ズレがおきないように処理を行うことをオーバープリントといいます。他の版に対して色を乗せる指定です。白のオブジェクトにオーバープリントを使用すると印刷されないことがあるので、自動でオーバープリント処理になっていないか確認します。[オーバープリントを無効にする方法はこちら](http://helpx.adobe.com/jp/illustrator/kb/235839.html)。

- [オーバープリント | DTP 全般 | テクニカルガイド - 印刷通販 ユアプレス](http://www.yourpress.jp/tech/dtp/overprint)


先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web関係の知識だけでは、綺麗な制作物は出

デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ


## TL;DR

コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。

### IA（情報アーキテクチャ）

#### １．基礎知識

情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。

- [\[スライド\] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof.jp](http://www.future-proof.jp/?p=2911)
- [IA Basic Learning Kit を公開しました - kamihira_log](http://blog.kmhr-lab.com/2012/08/ia-basic-learning-kit.html)

#### ２．サイトストラクチャ

サイト全体の情報を構造化した文章をサイトストラクチャ、もしくはサイトマップと呼びます。Web サイト全体像を目に見えるようにすることが目的。

ナビゲーションをデザインする時やファイル配置などの構造を設計する際にサイトストラクチャが必要になります。

- [5 つのサイトストラクチャ（Web サイト情報構造）を実際のサイトと照らしあわせて考える - YAT の BLOG](http://wp.yat-net.com/?p=3121)
- [サイトをつくる前の情報分類の手法について書いてみる | web ディレクターアシスタントが色々書いてくブログ アソビスイッチ](http://asobiswitch.com/?p=783)

#### ３．ナビゲーション設計

IA のお仕事であるナビ設計。ユーザーの負担にならないために、目的の情報へスムーズに辿り着けるようナビゲーションを設計します。ナビの目的は、ゴールと、ゴールまでの手順を示すことです。

- [ASCII.jp：Web サイトの使い勝手を決めるナビゲーション設計｜ Web ディレクション最新キーワード](http://ascii.jp/elem/000/000/638/638797/)
- [効果的なナビゲーションを設計する 5 つの大切なポイント | コリス](http://coliss.com/articles/build-websites/operation/work/how-to-design-effective-navigation-by-usabilla.html)

#### ４．画面設計

画面設計が中途半端になるとデザイナーに引き継がれたとき修正や見直しが発生してしまいます。IA のタスクは、どの位置にどういった情報を配置するのか、画面遷移、画面内の機能の決定になります。

デザインカンプになる前のワイヤーフレームは情報アーキテクチャの成果物ともいえます。一般的にはフォントや配色を盛り込むことは少なく、書体やサイズまで考慮された試作品のようなものをプロトタイピングと呼びます。

- [Web サイト設計図 – ワイヤーフレームの作り方 | Web クリエイターボックス](http://www.webcreatorbox.com/tech/basic-wireframe/)
- [WEB ディレクターなら参考にしたい手書きの画面設計書｜ designaholic -Creative Column-](http://designaholic.cc/2011/02/post-82.html)

#### ５．IA ツール

情報設計する際に便利なツールをまとめました。

- [WEB ディレクションで使うＩＡツール](http://www.u-ziq.com/blog/2007/10/web_12.html#more)
- [IA 関連のツール／リソース類](http://iaaj.org/tool_and_resource/)
- [keynote でプロトタイプをつくるためのテンプレ集](http://keynotopia.com/)
- [ワイヤーフレームを抽出してくれるブックマークレット](http://www.wirify.com/)
- [Yahoo!で使われている要素のデザインパターン](http://developer.yahoo.com/ypatterns/)

### UX（体験）

#### ６．基礎知識

情報アーキテクチャは UX の一部です。UX（ユーザーエクスペリエンス）とはユーザーが製品やサービスに触れたときの「心地よさや楽しさ」などの感情を引き起こすなどの、一連の操作から得られる体験を意味します。

- [\[スライド\] UX をみっちり基礎から教わることができた「モバイル UI/UX のキホン」って勉強会のレポート！ - 酒と泪と Ruby と Rails と](http://morizyun.github.io/blog/mobile-design-ui-ux-basic-benkyokai/)
- [\[スライド\] UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!](http://www.slideshare.net/ao_bascule/uiux-ui-ux?ref=http://www.find-job.net/startup/god-slides-of-ui-ux)
- [\[スライド\] UX のための UI デザイン](http://www.slideshare.net/hironobuaoki/uiux-13149154)

#### ７．ペルソナ（人物像）

ペルソナとは設計を支援するために定義する「仮想のユーザ像」のことです。プロトペルソナでは、製品を使うのは誰か？その理由は何か？などターゲットがどうすれば喜ぶのか考えて設計します。ペルソナは、ユーザー エクスペリエンス (UX) 設計のための基本的なツールの 1 つです。

ペルソナ作成後はペルソナの行動をシナリオとして書き出します。ユーザーのニーズを整理し、行動の流れを可視化します。

- [Web サービスとペルソナ（後編） - Think Social Blog](http://www.coprosystem.co.jp/marketingblog/2012/01/17.html)
- [World Wide Windblue: (追記) UX デザインのプロセス その 1](http://www-indblue.blogspot.jp/2012/05/ux-1.html)

#### ８．仮説作成

アイデアとペルソナを見ながら、「誰のために、どんな機能を、どんな成果を実現するのか」仮説表を作ります。ある程度決まったら、アイデアの優先順位と捨てる部分を決定します。仮説表をつめたらデザインです。

- [IMJ | ラピッド UX 手法　第 3 回　～ UX 指向アンケートでカスタマーエクスペリエンスを可視化するデータをサクッと集めよう～ - IMJ Report](http://www.imjp.co.jp/report/column/20131031/001018.html)
- [優れた UX デザイナーが持つ資質・マインドセットとは？【インタビュー】ホワイトハウスも注目の UX デザイナー Janice Fraser 氏（後編） | freshtrax | btrax スタッフブログ](http://blog.btrax.com/jp/2012/10/01/to_be_good_ux_designers/)

#### ９．スタイルガイド

デザイナーと非デザイナー共同で創造的な活動を行う場合、面白いアイデアが生まれることがあります。デザインに関してチームを同じ方向へ導くために、スタイルガイドを作成します。

- [» 日本語限定 UI、UX ガイドラインとその他まとめ | Webnoborder](http://webnoborder.jp/uiux/)
- [問題解決のためのスタイルガイド入門 : could](http://www.yasuhisa.com/could/article/frontend-styleguide/)

アプリやサービスの場合は、この後テストを行い、フィードバックとリサーチします。

### UI（表現）

#### １０．UI と UX の違い

最も簡潔に言えば UI（表現）と UX（体験）。UI とは人間と物の接点、人間の目の前に表示される操作体系のことを指します。ユーザーが UI を通して体験することが UX です。ユーザビリティとは「使いやすさ・理解しやすさ」を表したもの。

- [UX のための UI デザイン](http://www.slideshare.net/hironobuaoki/uiux-13149154)
- [UX is not UI!](http://www.slideshare.net/nicolasdemange/ux-is-not-ui-10294039)
- [UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!](http://www.slideshare.net/ao_bascule/uiux-ui-ux)

#### １１．インタラクティブ（リッチコンテンツ）

インタラクションとは JavaScript などを使って、ユーザーの入力に応じて適切な応答や画面遷移を伴うインターフェイス設計。画面遷移を伴わずに画面状態を変更したり、音楽や映像を使ってリッチな表現をしたり。「相互作用」と訳されます。

- [“リッチ”で変える - 第 9 回 UI デザインの基礎知識：操作の流れに気を配ったインタラクション：ITpro](http://itpro.nikkeibp.co.jp/article/COLUMN/20071012/284459/)
- [【海外事例に学ぶ】インタラクティブな UI でコンテンツを見せる際の注意点 (ユーザビリティ実践メモ)](http://www.bebit.co.jp/memo/2008/11/ui.html)

### アクセシビリティ

#### １２．基礎知識

アクセシビリティとは情報への「アクセスのしやすさ」の度合い。身体的なハンデや高齢者だけじゃなくて、健常者を含めた多くの環境に対しても使い勝手や情報のアクセスがしやすくなるよう考慮。すべての人が問題なくコンテンツや機能を利用できることです。

- [コンテンツからみる Web アクセシビリティの課題と提案 : could](http://www.yasuhisa.com/could/article/content-webaccessibility/)
- [Web アクセシビリティ・ファースト](http://web.a11y1st.jp/)

#### １３．ガイドライン

WCAG2.0 の理解や実装に関する情報。日本では Web サイトのアクセシビリティは JIS(日本工業規格)によって[JIS X 8341-3](http://waic.jp/docs/jis2010/understanding.html)が定められています。

- [\[解説書\] WCAG 2.0（W3C 勧告）日本語訳　\[原題：Web Content Accessibility Guidelines (WCAG) 2.0\]](http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/index.html)
- [\[実装方法集\] WCAG 2.0 実装方法集（Techniques for WCAG 2.0 日本語訳）｜ WCAG 2.0 実装方法集](http://waic.jp/docs/WCAG-TECHS/Overview.html)

#### １４．ファインダビリティ

ユーザビリティが使いやすさを示す概念、ファインダビリティは「発見されやすさ」を示します。コンテンツはアクセシブルな状態が必要で、その次にファインダビリティが問われます。

- [アテンションエコノミーとファインダビリティってなんだ？ | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2006/07/24/30)
- [ユーザビリティとファインダビリティの関係 - YAT の BLOG](http://wp.yat-net.com/?p=3104)

### スタートアップで成功する

#### １５．リーンスタートアップ

無駄を省きスタートアップを成功に導くための考え方。こちらのサイトによるとサービスから作るのではなくて、顧客を見つけ、サービスを聞き、最後にアイデアをサービスにするという考え方。ビジネスモデルで成功するには、優れたアイデアをもとに優れたビジネスモデルを開発すること。

- [\[スライド\] はじめてのリーンスタートアップ](http://www.slideshare.net/leanstartupjp/ss-8602991)
- [リーンスタートアップまとめ - NAVER まとめ](http://matome.naver.jp/odai/2131171854325173701)

#### １６．リーン・アナリティクス

書籍。以下のサイトによると「スタートアップのための実践的なデータ分析において、どう見るか、どう改善につなげるか」を解説してある本の名称。効率的に良い品質を提供する考え、またスタートアップのための書籍だということですが、スライドがあったのでチェック。

- [\[スライド\] 10 分でわかったつもりになる Lean Analytics_10min lean analytics](http://www.slideshare.net/shintokeimail/10min-lean-analytics)
- [「Lean Analytics」は全てのスタートアップ関係者が読むべき良書 - SELECT \* FROM life;](http://yuku-tech.hatenablog.com/entry/2013/10/28/001924)
- [Lean Analytics: KPI にしてはいけない 8 つの指標 - Hive Color](http://hivecolor.com/id/103)

#### １７．Pivot（ピボット）

Pivot とは事業の見直し。成功するまで方向性を修正していきます。フィードバックループといったところでしょうか。以下サイトによると事業や製品の方向性を起業時から徐々に旋回し、市場のニーズと一致するプロダクトを見い出す行為に使用されるとのことです。

- [ケーススタディ３「成功するスタートアップの事業方向転換手段 “Pivot” YouTube, PayPal,そして Facebook では」 | "Lean Startup Japan"](http://leanstartupjapan.org/?p=99)
- [リーンスタートアップで小さく始めよう | Social Change!](http://kuranuki.sonicgarden.jp/2011/06/post-28.html)


コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる

UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ

受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランス

Web制作フローが「完璧」にわかる資料や流れのまとめ


## TL;DR

先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強してみたんですが、基礎がダメだったんですね。基本をしっかり勉強せねばと思いました。今回は配色やカラーマネージメント、３属性など基本的なことを復習を兼ねてまとめました。

### 基本

#### １．配色用語

筆者、記憶力と理解力が悪いので、色の勉強をする前に使用頻度の高い基本用語をおさらいしておくことにします。「一言でいうと何？」と聞かれた時用に、簡潔にまとめました。

- [三原色](http://tomari.org/main/applets/iro/gen.html)／色を表現する基本３色。色料(CMYK)と色光(RGB)がある。
- [CMYK](http://www.aquageographic.com/sato/dslr/theory_cmyk.html)／印刷物に使う。藍・紅・黄・黒。重ねるほど暗くなる減法混色。
- [RGB](http://ja.wikipedia.org/wiki/RGB)／PC モニタ・テレビ。赤・緑・青の３色。混ぜるほど明るくなる加法混色。
- [減法混色](http://www.trickprint.com/trickprint/cmykrgb-color.html)(げんぽうこんしょく)／CMY を使った混色。印刷やフィルムに応用
- [加法混色](http://www.japanlink.co.jp/dtpjiten/ka/kahokonshoku.html)／赤・緑・青を混ぜて明るくする。全て混合すると白になる。
- [カラーマネジメント](http://photo-studio9.com/color_management/)／PC・デジカメ等どの機器でも同じ色に管理すること
- [キャリブレーション](http://www.atmarkit.co.jp/fwin2k/win2ktips/1272dccw/dccw.html)／PC モニタの色を調整すること
- [色相](http://www.blind.co.jp/styling/w_color/c01_sys.html)／虹に見られるような、赤み・青み・黄みなどの色合い。
- [色相環](http://rock77.fc2web.com/main/color/color1-2.html)(しきそうかん)／色と色の関係や変化をまとめたもの。
- [マンセル色相環](http://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%B3%E3%82%BB%E3%83%AB%E3%83%BB%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)／黄/黄緑/緑/青緑/青/青紫/紫/赤紫/赤/橙の 10 色配置
- [オストワルト色相環](http://www.dic-color.com/knowledge/081024.html)／黄/橙/赤/紫/藍/青/青緑/黄緑の 8 色を 3 分割した 24 色。
- [PCCS 色相環](http://check-p.com/shikisai/2_pccs.html)／マンセルとオストワルト両方の特徴と[トーン](http://www.sikiken.co.jp/pccs/pccs04.html)という概念を持つ。
- [混色系](http://mrk1869.com/blog/Paletta/)／色の混ぜあわせを数値化。機械が使うのに向いている。
- [顕色系](http://www.slideshare.net/saucerjp/ss-14902681)／色相、彩度、明度で数値化。人間の知覚に近いかたちで表現。
- [ドミナントカラー](http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page02.html)／カラーを同一・類似した色相でまとめる方法
- [スペクトル](http://iro-color.com/episode/rainbow.html)／人間の目で見ることが出来る色の範囲。円にすると色相環になる。
- [スプリットコンプリメンタリー](http://czx1.fc2web.com/color_hai205.htm)／ある色とその補色の両隣の色を用いた３色の配色
- [補色](http://www.tagindex.com/color/color_wheel.html)／色相環で真反対に位置する色。赤と青緑など。
- [類似色](http://d.hatena.ne.jp/asakichy/20121206/1354745070)／色相環の中で隣り合う色。赤なら橙など。
- [明度](http://momiage.net/5-meisai.shtml)／色の明暗を表す度合い。白が一番明るく、黒が一番暗い。
- [彩度](http://www.hm.h555.net/~irom/g_about/color_03.htm)／色の鮮やかさ、色の強弱。低いと暗く地味、高いと派手。
- [無彩色](http://sweetlovexx.seesaa.net/article/40602386.html)／黒・灰・白など明度だけ持つ色みがない色。
- [有彩色](http://www.sipec-square.net/~mt-home/students/miyazono/project/bunrui/page01.html)／黒・灰・白以外の色。
- [トーン](http://iro-color.com/colorchart/tone/)／明度（明るさ）と彩度（鮮やかさ）とあわせてできたもの。
- [視認性](http://czx1.fc2web.com/color_toku03.htm)／色の見えやすさ。明度の差が高いと視認性は高くなる。
- [面積効果](http://www.isop.co.jp/main/sinri.htm)／面積の大小で色の見え方がかわる。面積大きいほど明度が高く見える
- [色相対比](http://www.sipec-square.net/~mt-home/students/miyazono/project/sakkaku/page01.html)／隣に配置する色次第で、本来の色と違ってみえる現象

### 三原色

#### ２．RGB

RGB は PC モニターやテレビ・カメラなどデジタル画像全般に使用されるカラーモード。相当拡大すると分かるみたいですけど、赤・緑・青の３色光点に強弱をつけ発光させ色を表現します。３色を全て混ぜると白になりますよね。なおかつ彩度が高くなりやすいです。色を混ぜるほど明るくなるので、加法混色と言われています。以下は CMYK と RGB の関係を簡単に解説してあります。

- [紙デザイナーのための RGB カラー超入門 - saucer](http://graphicartsunit.tumblr.com/post/48824825718/rgb)

#### ３．CMYK

CMYK は印刷用で、シアン・マゼンタ・イエローに黒を加えた４色で、全て重なると黒に近くなるので、減法混色と言われます。絵の具の色を重ね続けると黒くなりますが、これと同じ感覚で表現されてます。

- [カラーモード(RGB カラーと CMYK カラー)とは?｜データ作成の前に｜印刷通販の【WAVE】](http://www.wave-inc.co.jp/data/basic/color.html)

#### ４．カラーマネージメント／CMS

CMYK と RGB は色の見え方が異なるので、印刷物の色と PC モニタ上の色と違って見えてしまいます。この問題を解決するために、色の管理方法であるカラーマネージメントがあります。Web 屋さんでも、リーフレットを作ったりするときがあると思うので要チェックです。

- [カラーマネージメントとプロファイル変換](http://w3.kcua.ac.jp/~fujiwara/infosci/colorman/color_manage.html)
- [モニタの見た目とプリントの色を合わせる方法！\[写真カラーマネジメント\] | studio9](http://photo-studio9.com/color_management/)

### 色の３属性

#### ５．色相

色相は虹などに見られるような赤み、青・黄などの色合いです。色と色の変化をまとめたものを色相環といい、虹色を順序良く並べたようなものです。色相環で真反対に位置する色は補色、補色の周囲に位置する色を反対色、隣り合う色で共通の色調を類似色といいます。

- [色相環 │ 色彩学講座](http://rock77.fc2web.com/main/color/color1-2.html)

#### ６．明度

色の明暗を表す度合い。明るいのは白、暗いのは黒。明度を上げると白になっていきます。明度は白黒フィルム写真、白黒コピー、グレースケースで考えると理解しやすいですね。

- [色彩と配色｜伝わるデザイン](http://tsutawarudesign.web.fc2.com/miyasuku2.html)

#### ７．彩度

色の冴え方、鮮やかさ、強弱ですね。自然界で見られる葉・花の色などに含まれる色を有彩色。墨汁のような色みのない色は、白・黒・グレーなので無彩色となります。彩度は発色や発光している感じ、派手だなと感じたら彩度が高いです。

- [IROMSOFT（色の属性～色相・明度・彩度）](http://www.hm.h555.net/~irom/g_about/color_03.htm)
- [RGB 色の調整 COLOR NOTE](http://desperadoes.biz/color/color02.php)

#### ８．トーン

明度と彩度をグループ化したもの。男性的だとか、明るい・暗い・強い・弱い・深い・浅いなどの色の調子のこと。色のイメージや配色を考えたり、色を正確に表現するのに必須で、リズム感・メリハリ・感情などを表現する役割があります。柔らかい雰囲気なら、リズミカルならこの色調かなとか。なお、配色バランスを考えることを配色設計といいます。

- [トーン別の色相カラーチャート | 色カラー](http://iro-color.com/colorchart/tone/)

### 色相環

#### ９．マンセル色相環

人間の心理や近くを前提にしたもの。顕色系なので人間向きということですね。彩度が程よい感じて抑えられていて、調和のとれた色を選びやすいです。色相・明度・彩度にもとづいて定義。赤・黄・緑・青・紫の５色の中間に、橙・黄緑・青緑・青紫・赤紫を加えた 10 色を配置したもの。

- [マンセル・カラー・システム - Wikipedia](http://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%B3%E3%82%BB%E3%83%AB%E3%83%BB%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)
- [マンセル表色系を使って視覚化の配色を改善する - kaiseh のブログ](http://d.hatena.ne.jp/kaiseh/20090427/1240835692)

#### １０．オストワルト色相環

赤・青緑・黄・藍の中間に橙・青・紫・黄緑を入れ、更に３分割した 24 色。混色系なので美的なものを選ぶのには向いてないかもです。

- [COLOR KNOWLEDGE DIC Color Design, Inc.](http://www.dic-color.com/knowledge/081024.html)

#### １１．PCCS 色相環

顕色系。マンセルとオストワルト表色系の特徴を両方とも持ちあわせていて、トーンという概念も持っています。トーンは明るい・暗い・強い・弱いなど色の調子のこと。

- [日本色研事業株式会社　 HomePage](http://www.sikiken.co.jp/pccs/pccs04.html)

### DTP 出力する場合の注意点

#### １２．リッチブラック

印刷独自の表現にリッチブラックがあります。ブラックのインキ（通称スミ）にプロセスカラーの他の色を混ぜて深みを出した黒です。スミベタとは K=100%のこと。ブラックインキに他のインキを混ぜるときは、掛け合わせ合計値。この値が高いとムラになったり、裏写りなどのトラブルに発展することがあります。

- [K100%はグレー？？？いいえ、「黒」です。それでもリッチブラックを使うなら…（更新） | やもめも](http://www.iwashi.org/2768)
- [「K=100 は濃い灰色！」「リッチブラックは C90% M90% Y30% K100%」で印刷関係者が騒然](http://dtp.jdash.info/52017720.html)

#### １３．特色インキ

カラー印刷は CMYK のプロセスインキで印刷されますが、それだけでは表現できない蛍光色や金色などは「特色インキ」を使います。再現性は高くなるし、印刷コストを下げることも可能なので頭に入れておきたいですね。

- [印刷では再現できない色もある｜いまさら聞けない!? 印刷・DTP の基礎知識｜クリエイターズ広場｜ OKI データ](http://www.okidata.co.jp/creators/tips1/tips02d.html)
- [DIC グラフィックス株式会社](http://www.dic-graphics.co.jp/color/search.html)

#### １４．CIE カラー

カメラやスキャナ、プリンタなどは再現性が異なります。そこで異なる機器でも同じ色に見えるように「CIE カラー」と呼ばれる正確な表色系を共通して使うことで色の違いをなくすことが可能。カラーマネージメントの一つです。

- [2-6 CIE 表色系](http://rock77.fc2web.com/main/color2/color2-2-6.html)

### 配色に困ったとき

#### １５．配色のアイデア

サイト制作前に参考になりそうな色見本・アイデア。女の子向けなら、どういった配色が良いのか、子供向けなら明度を高くした色相など、様々なパターンを分かりやすく分類してあります。

- [カテゴリー別配色アイデア 100 | Web クリエイターボックス](http://www.webcreatorbox.com/inspiration/colour-scheme-ideas-100/)

#### １６．複数の色をまとめる

複数の色を使うときは明度・彩度を揃える、暖色・寒色で揃えるとバランスが良くなります。こちらは色々なカラーを使うときに、違和感なく配色する方法です。

- [複数の色を使うときにバランスよく配色する方法 | Handy Web Design](http://handywebdesign.net/2012/11/if-you-want-to-use-many-colors/)

#### １７．ベースカラー・メインカラー・アクセント

メイン・サブ・アクセントに関する記事。ベースカラー・メインカラー・アクセントは 70%/25%/5%に割り振るとバランス良く見えます。もう一つ興味深かったのが「60 – 30 – 10 」ルール。生活に関わる色選びでのポイント。

- [配色の基本。メイン・サブ・アクセントカラーを極める！](http://creators-manual.com/main-sub-accent/)
- [配色センス０でも大丈夫！？服、インテリア、デザイン、様々な“色使い”を改善するかもしれない『60-30-10 Rule』！ | バンクーバーのうぇぶ屋](http://webya.opdsgn.com/webdesign/60-30-10coloringcule/)
- [インテリア・ファッションなど使える色のコーディネート！色の基本の考え | 賃貸店舗・貸し店舗などの店舗物件情報は店舗パーク](http://www.tenpopark.com/%E8%89%B2%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8D%E3%83%BC%E3%83%88/)

#### １８．色彩感情

色が持つ印象を色彩感情といいます。こちらは 12 色が持つ象徴や連想するものを分かりやすくまとめてあります。進出色、視認性、配色ポイントなどのハウツーなども。

- [色と人の感覚とウェブデザインのはなし |　バニデザノート](http://vanidesign.blog.fc2.com/blog-entry-17.html)
- [１２色の色が与える印象について。配色に困った時のいろいろ。 | Handy Web Design](http://handywebdesign.net/2012/07/12colors-give-you-the-impression/)

#### １９．雰囲気とテーマカラー

テーマカラーを決めて、メインカラーにどういった色を持ってきたときに、どんなイメージになるのか、統一感を出すにはどうすれば良いのか。実際のサイトを例にとって解説してあります。

- [配色初心者でも効果的なカラーデザインが出来るようになる 4 つの工程 / Maka-Veli .com](http://maka-veli.com/ColorDesign.html)
- [同色系でまとまりのある配色、Web デザインにするための Tips](http://webdesignrecipes.com/monochromatic-website-designs-tips/)

#### ２０．ドミナントカラー配色

配色に統一感を出すことが出来るドミナント・カラー。色を類似した色相でまとめる方法です。トーン・オン・トーンは明度差で色の変化をつけたドミナント・カラー配色のことです。注意点としては変化が少なくなるために、平坦になること。反対色を入れてワンポイントとしてバランスをとりましょう。

- [配色に悩んだときに、きっと役立つ 7 つの配色技法【基本】](http://creators-manual.com/color_scheme7/)


先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強し

色に関する基本と配色に困ったときの知識まとめ


## TL;DR

クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。

### 企画／提案

#### １．企画書

企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。

- [\[保存版\] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ](http://sekailog.com/2012/04/plan/)
- [“通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2008/09/09/3786)

#### ２．提案書

提案書を作るときはヒアリングした課題をもとに顧客が望んでいる効果、解決したい内容を明確にして、何をすべきか記載していきます。改善点、改善後のイメージ、どれくらいの売上が見込めるか、概算金額・スケジュールなどを記載したり。以下は提案書のサンプルや配所の使い方です。

- [ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識](http://www.slideshare.net/sogitani_baigie/ss-13129487?ref=http://creive.me/1967/)
- [ネットで見られる提案書のまとめ | Web デザインのタネ](http://oshare.jugem.cc/?eid=757)
- [スクロールでめくれる提案書](http://piccsy.com/investors/)

#### ３．企画資料

クライアントさんの競合が分かったら、ツールなどを使って調査し、統計を準備出来ればグンと提案しやすくなります。以下のツールまとめは競合サイトのトラフィック、流入傾向、どのサイトが競合か、自然検索のキーワードの自社競合比較など。

- [競合他社のウェブサイトはどうなってるんだ？ を簡単に調べる無料ツール 3 選＋ α](http://media.looops.net/ginzametrics-shimizu/2013/06/13/competitive-analysis-three-tools/)
- [マーケティング・企画書に使える統計サイトまとめ - NAVER まとめ](http://matome.naver.jp/odai/2135026817490601701)
- [フリーランスのための全国 Web サイト制作料金表 - W3Q - Web 制作者のお悩み解決サイト](http://w3q.jp/t/137)
- [私はこうやってマーケティングデータを集めています。 : LINE Corporation ディレクターブログ](http://directorblog.jp/51248663.html)
- [社会実情データ図録 Honkawa Data Tribune](http://www2.ttcn.ne.jp/honkawa/)

### 打ち合わせ

#### ４．ヒアリングシート

ヒアリングでは、クライアントさんが理解しやすい言葉を使って、簡潔に質問していきます。例えばサイト関係であれば、サイトの目的、ターゲット、サーバー環境、スケジュール、予算など。

- [WEB サイト制作前やデザイン制作時に欠かせないヒアリングシートを作り直してみた | WEB とかデザインとか | アスパラブログ | アスパラガス](http://www.asparagus.jp/blog/web_hearing_sheet/)
- [ウェブ制作で使えるヒヤリングシート｜ Kamiya Consulting, Inc.](http://www.kamiya.com/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%92%E3%83%A4%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%B7%E3%83%BC%E3%83%88/)

#### ５．議事録

開始から納品まで、社内やクライアントとの打ち合わせが沢山開かれます。議事録ではその記録をまとめて共有します。以下は議事録に必要なこと、例など。

- [議事録作成が早くなると仕事が少しは楽しくなる（かもしれない）話 - インターネットの備忘録](http://d.hatena.ne.jp/hase0831/20130511)
- [新社会人のための「UX から考えた議事録の書き方」 : DeNA Creator(クリエイター) Blog](http://creator.dena.jp/26899240.html)
- [議事録の書き方 基礎講座 : LINE Corporation ディレクターブログ](http://directorblog.jp/50986750.html)

#### ６．提案依頼書

外部の業者に対して、具体的になにをしてもらいたいかの提案要求を伝える際に必要となる提案依頼書。以下は Web サイト構築に関わる RFP の作り方。

- [はじめての RFP――発注時に意思疎通をスムーズにする提案依頼書の作り方 | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2008/02/04/2370)
- [サンプルでわかる提案依頼書（RFP）作成 6 つのポイント、発注内容の伝言ゲームは失敗の第一歩／第 3 回 | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2013/03/15/14724)

#### ７．要件定義書

要件定義書は Web サイト制作の仕様をまとめたものです。画面遷移や管理画面イメージ、システムに関することなど。以下は要件定義書に必要な流れや構成です。

- [「要件定義書のアウトライン作成」完全マニュアル － ＠IT 自分戦略研究所](http://jibun.atmarkit.co.jp/lskill01/rensai/writing04/01.html)

### 契約

#### ８．秘密保持契約書

取引を行う際などで締結する、営業秘密や個人情報など業務に関して知った秘密を開示しないとする契約。([秘密保持契約 - Wikipedia](http://ja.wikipedia.org/wiki/%E7%A7%98%E5%AF%86%E4%BF%9D%E6%8C%81%E5%A5%91%E7%B4%84))[契約書の作り方（体裁編）はこちら。](http://www.master-gyosei.com/category/1410196.html)

- [秘密保持契約書　サンプル](http://kaisha-seturitu.net/contract/sample13.htm)
- [ビジネス文書・書式・契約書ダウンロードの決定版！経営者のためのコミュニティポータルサイト「ビジプラ」](http://www.busipla.net/busi_sample.html)
- [契約書の製本・契印のやり方](http://www.master-gyosei.com/article/14098565.html)

#### ９．業務委託契約書

業務の一部をまかせる時に、委託者と受託者のとの間で結ぶ契約。以下は種類や作成方法です。

- [業務委託契約書》雛形/ひな形/印紙/収入印紙/印紙税/書式/様式/文例/解除](http://www.jp-guide.net/businessmanner/keiyaku/gyoumu_itaku.html)
- [業務委託契約書](http://homepage2.nifty.com/houmu/page002.html)

### 証票

#### １０．見積書

見積書は Web サイトを制作・公開するために必要なディレクション、デザイン、システム関連、ランニング費用をまとめたもの。ヒアリング後の提案書で方向性を決め、要件定義書で確認。

- [わかりやすい見積書の書き方 / Maka-Veli .com](http://maka-veli.com/mitsumori.html)
- [フリーの web 屋な人が、見積や注文書、請求書を発行する際の注意点。 | たけのおしごと](http://take-a-job.info/779)
- [見積書サンプル&プロが教える見積書 7 つの極意 ①――1 社見積もりと相見積もりを極める | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2008/02/07/2372)
- [Zoho インボイス：無料で使えるクラウド型請求書作成ソフト](http://www.zoho.jp/invoice/)

#### １１．注文票／発注

商品や制作を注文する書類を指します。以下は「発注書って何」ってところから解説してあります。

- [発注書・注文書》書き方・書式様式・テンプレート例・雛形・見本・保存期間](http://www.jp-guide.net/businessmanner/tool/hacchusho.html)
- [Excel テンプレート 注文書テンプレート](http://excelman.blog73.fc2.com/blog-entry-10.html)

#### １２．納品書

見積もりから納品、請求書までの一連の流れが書いてある上に、一番下にテンプレートがあります。

- [15 秒でわかる！「見積書 → 発注書 → 納品書 → 受領書 → 請求書 → 領収書」の役割と流れ | MakeLeaps](http://www.makeleaps.jp/%E8%A6%8B%E7%A9%8D%E6%9B%B8%E2%86%92%E7%B4%8D%E5%93%81%E6%9B%B8%E2%86%92%E8%AB%8B%E6%B1%82%E6%9B%B8%E2%86%92%E9%A0%98%E5%8F%8E%E6%9B%B8%E3%81%AE%E5%BD%B9%E5%89%B2%E3%81%A8%E6%B5%81%E3%82%8C/)

#### １３．検収書

購入者が販売者に対して、「その製品は問題無いッス」という意味で発行します。注文を受けた側に送る書類。

- [検収書 : フリー テンプレート](http://www.feedsoft.net/template/tplate/excel_kensyu.html)

#### １４．請求書

読んで字の如し。[請求書の書き方はこちら](http://www.jp-guide.net/businessmanner/tool/seikyu.html)。

- [フリーランスから中小企業、エンタープライズまで クラウド（オンライン）見積書、請求書作成・管理・郵送ツール | MakeLeaps](http://www.makeleaps.jp/)
- [無料の見積・請求書管理サービス misoca（みそか）｜テンプレートで簡単作成](http://www.misoca.jp/)
- [無料で使えるクラウド型請求書作成ソフト｜ Zoho インボイス（ゾーホーインボイス）](http://www.zoho.jp/invoice/)

#### １５．領収書

代金の受取人が支払者に対して、金銭を受け取ったということを証明する書類。

- [領収書テンプレート｜書き方？要件？必要？そもそも領収書って？](http://www.firstep.jp/blog/4070/%E9%A0%98%E5%8F%8E%E6%9B%B8%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)
- [領収書.net：オンラインツール](https://xn--lorw95b519a.net/)

### 法律や規約

#### １６．プライバシーポリシー

個人情報およびプライバシー情報の取り扱い方針（ポリシー）を定めた文書。トップページから１クリックで到達できるのが理想ですよね。プライバシーポリシーの作り方。

- [最低限おさえておくべき「プライバシーポリシー」のポイント（前編） | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2013/05/27/15019)

#### １７．利用規約

一言でいうと、サイトのルールみたいなもんです。定型文をコピペして済まさないように。下は商標権を侵害しないサービス名を探す方法など。

- [「利用規約の当たり前と注意点」利用規約ナイト vol.2](http://www.slideshare.net/TasukuMizuno/vol2-16030089)
- [そのサービス名、使って大丈夫ですか？　～商標権 | Web 担当者 Forum](http://web-tan.forum.impressrd.jp/e/2013/06/10/15022)
- [Web 屋必読！『良いウェブサービスを支える利用規約の作り方』を読んでみた。レビュー｜すしぱくの楽しければいいのです。](http://www.susi-paku.com/pakuweb-7.html)

#### １８．特定商取引法

消費者の保護を目的とした法律。クーリングオフなどですね。EC サイトは通信販売にあたり、特定商取引の対象になります。

- [特定商取引法Ｑ＆Ａ](http://www.meti.go.jp/policy/consumer/monitoring/sakuseichu/qanda.htm)
- [特定商取引法（正式名称：特定商取引に関する法律）の書き方｜ skuare.net](http://www.skuare.net/2009/08/post_8.html)

#### １９．個人情報保護法

個人情報（個人を特定できる情報。名前、電話番号、住所、カード番号、写真など）の取り扱いについて取り決めた法律。

- [やさしく読む「個人情報保護法」（1）：「個人情報」とは何でしょうか (1/3) - ＠IT](http://www.atmarkit.co.jp/ait/articles/0503/18/news121.html)
- [P マーク取得への道（1）：プライバシーマーク取得への第一歩 (1/3) - ＠IT](http://www.atmarkit.co.jp/ait/articles/0510/20/news120.html)

### 進捗・管理

#### ２０．社内共有ツール

ほとんどの社内共有は Google Apps で出来てしまいます。ガンチャートや進捗管理は以下のツールで。

- [brabil：プロジェクト管理,ガントチャート,スケジュール表がサクサク作れる。](http://brabio.jp/)
- [Yammer：社内限定で twitter のようなことができるツール。](https://www.yammer.com/)
- [youRoom：友人同士や仕事のプロジェクトなどで、同僚や仲間たちと情報共有](http://ja.youroom.in/)
- [Google Apps：使い方一覧](http://www.appsupport.jp/category/)

#### ２１．制作仕様書

制作仕様書とは Web サイトの制作における技術要件やガイドラインのことです。サイト制作の前に作成します。

- [仕様書に基づく WEB 制作設計、構成・内容選択の進め方｜ AKI 企画](http://www.akiplan.jp/hp/spec.html)
- [ASCII.jp：Web サイトの品質を保つ制作仕様書の作成｜ Web ディレクション最新キーワード](http://ascii.jp/elem/000/000/641/641956/)

#### ２２．プログラマーへの伝え方

プログラマーさん相手だけじゃなく、ディレクター仕事の基本。何度も何度もエンジニアのとこにやってきて時間を奪うことは止めるべし。

- [ディレクターがプログラマーとうまくやる方法を全部教えます : LINE Corporation ディレクターブログ](http://directorblog.jp/51794026.html)

#### ２３．デザイナーへの伝え方

ディレクターの先入観でデザイナーを束縛するのはやめる。具体的に明確に伝えるのが大切。

- [それじゃあ何も伝わらない！元ディレクターがデザイナーになって気付いた、デザイン依頼で注意すべき 4 つのこと : LINE Corporation ディレクターブログ](http://directorblog.jp/51757671.html)

企画・提案・見積・納品・契約などのテンプレ・知識まとめ


クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」

企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３


地元の知り合いに人たらしのプロみたいな強面の社長さんがいた。風体はオールバックで髭を生やしがっちりしている。一見、一般人には見えない。 最近 SNS で見かけるような、インテリぶった貧弱そうな（男か女か分からないような）経営者ではない。背中に刃物を突き立てられても動じないような人で、事実開き直っていた。しかし何をやっても上手くいく強運な人だった。 最近連絡を取っていなかったが、その人に教えられた事を公開しようと思う。毒舌で失礼な文章なので気分を害しそうな人はスルーして下さい。

### 「飲み会不要」

付き合いが大切だと言う人間とは距離を置け。懇親会も出来るだけやんわりと断れ。人間関係は大切だが、賢い人間は皆が飲みに行く時間に不労所得を作る。

### 「成功者と失敗者の話しは聞くな」

すでに成功している人間や、うだつのあがらない人間の話はどうでも良い。それより頑張り屋さんに近づけ。実は頑張り屋さんに近づくと誰よりも「運」を吸収出来る。

### 「テレビ好き」

従業員を雇うなら、テレビ好きな人を雇え。どうにでもなる。お前が相当馬鹿でも、馬鹿だとばれない。

### 「見栄をはるな」

ロレックスや高級車を買っても他人に話したり、高級車で取引先へ行ったりするなよ。「もっと、俺にかまってくれ、俺すげーだろ？」と言っているようなものだ。賢い奴は燃費の良い車に乗るんだ。海外で社長がベンツに乗るのは費用対効果が高いからだ。

### 「忙しいとか言うな」

「忙しい、時間が無い」と言う奴がいるが、「もっと、俺にかまってくれ、俺人気者でしょ？」と言っているようなものだ。逆に非効率な奴だと思われているぞ。本当に忙しかったら今頃病院にいる。忙しいと言う暇もないはずだ。

### 「嫌いな人の噂を立てない」

自分の貴重な時間を、噂の為に嫌いな人に与えてあげる必要はない。しかし、もし好きな人がいたら「良い噂」を立ててあげろ。他人を介して入った情報は効果倍増だ。

### 「対応の逆転」

自分よりも立場が低いと感じた人に対しては、謙虚に親切に腰を低くして接する。あなたより立場がはるかに高く、皆がびびっている人に対しては、友達と話す感覚で。タメ口も場合によって織り交ぜる。両者ともお前を覚えてくれる。

### 「ゆっくり短く話す」

相手に分かりやすく伝える為ではない。上げ足を取られないように考えながら交渉する為。

### 「無理な要求」

交渉のはじめに無理なお願いである事を告げる。これによってこちらが、がんがんと要求出来るようになる。

### 「あいまい」

つもりや思うといったあいまいな言葉を使わない。言葉尻を取られるとスムーズに話が進まない。どちらかというと相手に使わせて「思うってどういう事だ？」とたたみかける。感情的になっても駄目だ。但し話した内容は一語一句覚えておけ。自分で話す内容も単語も全て辞書で調べて事前に把握しておけ。

### 「口角を上げなくても良い」

人によっては口角を上げている人間を不快に感じる人もいる。それより口を開けて笑え。口を開けて笑わないのはまだ心を開いてない。接客業なら口角を上げて良いが、俺は接客をする側（従業員）ではないので口角はどうでも良い。

### 「話し方」

話す時に口に手を持っていくな。何かやましい事があるか、嘘言っていると思う人もいるぞ。話に自信があったら顔周辺に手は近づかないはずだ。

### 「罪悪感を感じない」

悪い事をする必要はないが、良い事だけやろうとすると何も出来なくなる。この世の善悪は人によって違う。「負い目の無さ」を持って行動出来るのが一番良い。

### 「Web の世界は成果が出るまでの潜伏期間が長い」

毎日面倒な事を 1 年続けてみる。99%の人間は面白いように途中で挫折する。「意味が無い」と思って頓挫していくからだ。これでライバルが大幅に減る。毎日 3 年続けてみる。その市場は少しだけお前の好きに出来るようになる。10 年後、お前を馬鹿にしていた人間が頭を下げて戻ってくる。

### 「リスク分散」

事業は複数所有しておくべき。何カ月働かなくても自動でお前の口座に入金がある状態を複数所有しておけ。つまり収入源を何個も持っておけ。収入源が一つだけしかないとか話にならんよ。

### 「国内に固執するな」

いつ国内から脱出しても生活できるように、収益を途絶えさせない仕組みを作っておけ。嫌な言い方だが、日本からいつでも脱出出来る準備をしておく。

### 「雇われなら収入０と考えろ」

もし雇われなら、給料０円と考えておけ。プライベートな時間全てを収入源作りにあてろ。帰宅後のテレビや無駄なおしゃべり、買い物はお前の従業員や、消費者にやってもらえ。だがお前が人を雇う立場なら絶対するな。

### 「役に立つ物を意識するな」

役に立つ物って自分で分かるわけないだろ？他人が決めるんだから。それより「誰もここまで徹底してやっていないだろう」という物を作れ。

### 「時給」

時間で仕事を計算するな。日本だけだろ、そんなの。一瞬一瞬で仕事を考える。「瞬給」で考える。

### 「大声」

声が大きくうざい奴には、そいつより「大声」で話せ。いつのまにか相手の声は「普通」になっている。

### 「無表情」

普段は無表情でいろ。ここぞという時に顔をくしゃくしゃにして笑え。いつもへらへら笑っている奴よりよっぽど信用してくれるぞ。

### 「口下手を演じる」

言葉が流暢で口が達者なのは一番信用できない。口下手だと何故か物が売れたりする場合が多い。

### 「言葉で信用させるな」

何か一つでも何年でも毎日継続していれば勝手に信用される。信頼される為のテクニックや努力などいらない。

### 「好かれようとするな」

媚を売っていると簡単に見抜かれる。人に好かれる為なら何でもするのか？決断も人任せか？実は八方美人が一番嫌われる。それより人を好きになれ。

### 「オーバーに共感する」

他人の喜びをそいつ以上に喜ぶフリをしろ。オーバーにやれば、その場はとにかく面白い空気になる。そのうち他人の幸福を素直に喜べるようになる。

### 「マイナス思考人間を遠ざける」

マイナス思考は確実に感染する。運を上げるコツはマイナス思考人間に近づかない事。マイナス発言には「沈黙」で応戦！

### 「愚痴を聞き流す」

愚痴は不幸を引き寄せる。自分の愚痴だけなら注意しておけば防げるが、一番厄介なのが、他人が愚痴を言いだす事。指摘すると火に油なので「まぁ、そうだね」と聞き流せ。

### 「他人の悪口」

他人の悪口を言う奴は、気付かずに「自分の弱点」を話している場合が多い。他人の悪口を賢い人に言うと、お前の弱点がばれてしまうぞ。

### 「挨拶に先手あり」

先に相手から挨拶をされると、相手に合わせる形になる。先手を取って自分から挨拶をしてやれ。これで主導権はお前のものだ。

### 「とりあえず動く」

動いた結果何もなかったとしても気にするな。でも動かないと確実に何もない。

### 「毎日続ける特権」

継続は一流のスポーツ選手や成功者だけの特権ではない。実は誰にでも権利がある。こんなお得な権利はそうそうない。

### 「テレビをちょっと我慢する」

テレビを見る事を辞めれば、その空いた時間がお前の時間になる。その空いた時間で生産的な事が出来ればさらに人生がお得に！

### 「少し早く」

約束の時間や出社時間より少し早めに目的地へ到着すると、その時間と空間をあなたが独占出来る。「まだ相手は来ないのか？」と怒るな。遅刻者には沈黙で対応すれば、主導権を取れる場合もある。

### 「話を聞く」

自分から会話のネタを考えずに済む。エネルギー消費も少なくなるし、相手からも好印象。但し話の内容と言葉は覚えておけ。それが相手の弱点になる時がある。

### 「メモを取る」

一生懸命記憶する必要が無くなる。さらに話す相手も悪い気がしない。

### 「名前は家族ごと覚える」

相手の名前はもとより、兄弟、両親、友達、ペットの名前など会話で出現した名前は全て覚えておく。確実にお前をいつまでも覚えてくれる。

### 「沈黙する」

これほど相手の感情を揺らし、主導権を取れる方法はない。沈黙に耐えきれずノウハウをポロリと話す人もいる。実はおしゃべり程損する事はない。タイミングを見極めて有効に使うべし。

### 「尊敬出来ない人に対するお辞儀」

なにも尊敬出来ない人の為に頭を下げる必要はないが、一応頭は下げる癖をつけておけ。一見相手にお辞儀をしているように見せかけておきつつ、心で自分に頭を下げる。頭は自分に対して下げるもんだ。

### 「親切を受けた時にすいませんと言わない」

なんで悪くないのにあやまる必要があるのか？代わりに「ありがとう」と言い放て！

### 「相手の話」

相手のつまらない話に対して討論する必要無し。「そうですね！なるほど！」と共感し満足させてろ。そうすれば退屈な話も終わる。

### 「他人が見てない所でこっそり掃除や良い事などをする。」

他人から褒められて、無駄に照れてしまったり、会話の切り返しを考えたりする必要がなくなる。

### 「思い切りやれ」

中途半端は二度手間になる。思い切りの良さは非常に効率的だ。

### 「短く分かり易く伝える」

要領が悪い奴ほど書籍から得たような難しい言葉と専門用語を使い、長く話す。要点だけ噛み砕いて伝えれないんだ。戦場だったら部下を沢山死なせるタイプだな。お前はそうならないように「小学生にも伝わるように」要点だけ伝えろ。

### 「体型にも気を使え」

顔に性格、体に生活が出るというが、太っている＝自己管理出来ないと思われてるぞ。ダイエットは気の持ちようだ。

### 「老いた人と話せ」

時にお前が想像も出来ないような助言をしてくれる。

### 「孤独を恐れるな」

孤独が怖くなくなった時から、お前の人生はお前の物になりだす。本当の友達や大切な人は何年連絡をとってなくても、お前に対する態度は変わらない。

### 「理屈」

理屈やリスクを考えると他人に出し抜かれるぞ。動いてしまった後でどうするか考えろ。言っておいた事をやらない、考えて行動が遅くなるのはもはや「犯罪」だぞ。

### 「功績」

結果を待つ奴程、功績なんか無い。結果が出るまで待てない奴だからな。出来る奴はそんな事忘れて、今やらなければならない事を地道に頑張っている。

### 「お墓参り」

強運になりたくば、先祖の墓参りに行け。お前を助けたがっている。

### 「健康」

健康になりたくば、風呂に入っている時に自分の体に触れながら「いつもありがとう」と感謝しろ。体も意思を持っているぞ。

### 「両親の不仲」

親の不仲は子供には解決出来ない。お前に出来る事は早く自立する事だ。両親の心配よりもお前自身を心配しろ。幸せになって恩返しだ。不仲は「神様が解決してくれる」と信じていれば良い。

### 「貧困、殺伐」

そういった映像やニュースを一切見るな。頭に残った映像は潜在意識に浸透する。裕福や癒し映像や写真でも見ておけ。

### 「ため息」

絶対にため息はつくな。間違いなくお前にマイナスイメージが集まってくるぞ。悪霊を呼び寄せているようなもんだな。それ以前に相手に失礼極まりないけど。ため息をしたくなったら周囲に聞こえないように、30 秒位かけて長く息を吐いてみろ。結構落ち着くから。まぁ、瞑想みたいなもんだ。

とまぁ、一部ですがこんな所です。全部はとても書ききれない。どっかのインテリや、物知り風なブロガーが書いた自己啓発なんかより、よっぽど役に立っているので書いてみた。しかし久しぶりのブログ更新。これからはちょくちょく更新しよう。


地元の知り合いに人たらしのプロみたいな強面の社長さんがいた。風体はオールバックで髭を生やしがっちりしている。一見、一般人には見えない。最近SNSで見か

2014-7-14

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック

2014-6-16

デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ

2014-2-17

UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ

2014-1-20

Web制作フローが「完璧」にわかる資料や流れのまとめ

2013-11-18

色に関する基本と配色に困ったときの知識まとめ

2013-7-29

企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３

2012-5-8

強面の社長が教えてくれた人たらしテク