
## TL;DR

2014/12/01：続編である「<a href="https://commte.net/4887" target="_blank">最近のサイトで使われていた CSS 小技集</a>」を書きました。

今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。

### 画像

#### １．キュレーションサイト風のランキングボタン

キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。<code>counter-increment</code>で数値を増加させ、<code>content: counter()</code>でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。
html

```html
<ul class="sample">
  <li><img src="xxx.png" /><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
  <li><img src="xxx.png" /><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
  <li><img src="xxx.png" /><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
</ul>
```

css

```css
ul.sample {
  overflow: auto;
}

ul.sample li {
  counter-increment: sample;
  clear: both;
  line-height: 2;
  list-style-type: none;
  position: relative;
}

ul.sample li:before {
  border-radius: 50%;
  background: #222;
  color: #fff;
  content: counter(sample);
  left: -5px;
  line-height: 1.5;
  font-size: 12px;
  padding: 0 5px;
  position: absolute;
  top: 5px;
}

ul.sample img {
  height: 55px;
  float: left;
  padding: 10px 10px 0 0;
  width: 55px;
}

span.post-title {
  font-size: 14px;
  line-height: 2;
}
```

counter プロパティを適用する要素に before、after 要素を付け content プロパティでカウンタ名を指定することで連番を挿入することができます。
他に content プロパティは、<code>h1{ content: url(logo.png);}</code>のように文章やテキストなどに画像を入れたり置換することも可能です。

<ul>
<li><a href="http://www.htmq.com/style/content.shtml" target="_blank">content－スタイルシートリファレンス</a></li>
</ul>

#### ２．画像の右上に三角形の要素を配置する

長方形のラベルは見かけるけど、三角形はまだ多くないのでメモ。画像の右上に三角形のスペースを作り文字を載せる方法。横幅 200px の画像の上に三角形ラベルを配置したい場合は以下のようになります。
html

```html
<div class="image-inner">
  <span class="triangle">xxxx</span>
</div>
```

css

```css
.image-inner {
  overflow: hidden;
  position: relative;
  width: 200px;
}

.triangle {
  background: #222;
  color: #fff;
  font-size: 14px;
  padding: 70px 0px 3px;
  position: absolute;
  right: -97px;
  top: -41px;
  text-align: center;
  width: 200px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
```

#### ３．透過ネオンカラー

流行りの兆しがありそうなネオンカラーの透過（0.8 の部分は調整してください）カラーコードをいくつかメモしておきます。写真の上に載せるとそれっぽく見えます。画像の上に載せるラベルなどに使ったり。

| 16 進数 | RGBa(赤,青,緑,透過)   |
| ------- | --------------------- |
| #8c24c8 | rgba(140,36,200,0.8)  |
| #4d4dff | rgba(77,77,255,0.8)   |
| #ff6ec7 | rgba(255,110,199,0.8) |
| #ff2090 | rgba(255,32,144,0.8)  |
| #18ff00 | rgba(24,255,0,0.8)    |
| #00ff00 | rgba(0,255,102,0.8)   |
| #83f52c | rgba(131,245,44,0.8)  |
| #ffff00 | rgba(255,255,0,0.8)   |

#### ４．画像の表示範囲を指定

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

<ul>
<li><a href="http://www.tagindex.com/stylesheet/img/clip.html" target="_blank">イメージ/画像を切り抜く - TAG index Webサイト</a></li>
</ul>

#### ５．透過させながら画像を合成する

<code>:cross-fade()</code>を使うと２枚の画像を合成できます。２枚の画像 URL を指定します。100%に近づくにつれ１枚目の透過度が高くなります。

```css
background: -webkit-cross-fade(url(xxx.jpg), url(xxx.jpg), 50%);
```

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

#### ６．マスクをかける

WebKit 系のみ可、IE は非対応ですが<code>mask-image</code>を使うとマスクをかけることが出来ます。<code>mask-size</code>は表示サイズ、<code>mask-position</code>は表示位置を示します。

```css
-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
```

<ul>
<li><a href="http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20396442/" target="_blank">SafariとChromeのCSS対応：文字や画像にマスクをかける - builder by ZDNet Japan</a></li>
</ul>

### 簡単に要素を並べる

#### ７．左右に分割して区切り線を入れる

簡単にカラム数を増やし区切り線を入れます。<code>column-count</code>でカラム数を増やし、<code>column-rule</code>で区切り線を入れます。
html

```html
<div>それは一生いよいよその指導者として事のところで作ったた。いくら将来と用意違いはやはりこの採用たでかもから当てばいなけれには使用するだたて、多少にもまかり出ですましたた。 しかも今安心にしてはいませのあるて、中学には、何しろ私かするてするれないない読んられるないないとするて、言葉はかけるて出したん。</div>
```

css

```css
div {
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  -webkit-column-count: 2;

  -moz-column-rule: solid 1px #ccc;
  -ms-column-rule: solid 1px #ccc;
  -o-column-rule: solid 1px #ccc;
  -webkit-column-rule: solid 1px #ccc;
}
```

#### ８．段組（横並びで配置）

要素を横並びさせるならテーブル構造の<code>display: table</code>と<code>display: table-cell;</code>でも表現出来ます。
メリットは<code>border</code>による区切り線の高さを揃えたり、<code>vertical-align: middle;</code>で高さの中心に要素も持ってきたり出来るところです。
html

```html
<div class="column-table">
  <p class="mini-column">そうして筋か正直か誤解を担がたて、今中自分をあらといたいために大指図の絶対に思うらしくまし。</p>
  <p class="mini-column">今をもどうしても考えて蒙りありますですますて、今にいくらとどまるが脱却はなぜ恥ずかしいでのな。</p>
  <p class="mini-column">つまりこう万年は手本が好いで、ほかに何だか考えたでしとするば、ないたべきてそこでお安心へ味わっずたら。</p>
</div>
```

css

```css
.column-table {
  display: table;
  width: 100%;
}

p.mini-column {
  display: table-cell;
  vertical-align: middle;
  width: 30%;
  word-break: break-all;
}
```

#### ９．空要素に色をつける

セレクタに<code>:empty</code>を指定することによって、空要素にスタイルシートを適用することが可能となります。

```css
td:empty {
  background: black;
}
```

<ul>
<li><a href="http://zero.css-happylife.com/selectors/empty.shtml" target="_blank">:empty疑似クラス (E:empty)｜セレクタ｜CSS HappyLife ZERO</a></li>
</ul>

### 条件に応じて

#### １０．条件に一致しないと適用

「○○」じゃない時スタイルを適用したい！そんな時は否定疑似クラス<code>:not()</code>を使います。例えば not(h1)だけだと、body にも「h1 以外」が適用されてしまうので、以下のようにクラス名などをつけ詳細まで指定します。

```css
.logo :not(h1) {
  background: black;
}
```

<ul>
<li><a href="http://weboook.blog22.fc2.com/blog-entry-382.html" target="_blank">CSS3で追加されたセレクタ「:not()」について考えてみました｜Webpark</a></li>
</ul>

#### １１．条件一致すれば適用

こちらは CSS4 からのセレクタです。<code>:matches()</code>を使用すると、指定したセレクタと一致した場合にスタイルを適用出来ます。

<ul>
<li><a href="http://myakura.github.io/n/selectors4.html" target="_blank">CSS4セレクタ (Selectors Level 4) の新機能</a></li>
</ul>

### テキスト

#### １２．中だけ透過させてアウトラインを表示

<code>text-stroke</code>で文字にアウトラインを表示できます。<code>color: transparent;</code>を指定することで中を透過させる事が出来ます。分かりにくい時はフォントサイズを大きくします。

```css
h1 {
  color: transparent;
  -webkit-text-stroke: 1px #222;
}
```

#### １３．文字詰め

<code>text-rendering: optimizeLegibility;</code>でカーニング処理を行います。以下のサイトによると「ヒラギノ角ゴ・明朝」を指定していればカーニングが働くとのことです。

<ul>
<li><a href="http://terkel.jp/2012/09/text-rendering-optimizelegibility/" target="_blank">text-rendering: optimizeLegibility · terkel.jp</a></li>

</ul>

#### １４．アンチエイリアス

<code>font-smoothing</code>で文字を滑らかに表示します。

```css
div {
  -webkit-font-smoothing: antialiased;
}
```

### フルスクリーンメニュー

これから少し多くなりそうな画面全体をオーバーレイさせメニューを表示するものを<a href="http://tympanus.net/codrops/" target="_blank">Codrops</a>からチョイスしました。

#### １５．スライド

画面の切り替え時に、画面の縦方向全体を使いブヨっとした動きを出すスライダー。

<ul>
<li><a href="http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/" target="_blank">Wobbly Slideshow Effect | Codrops</a></li>
</ul>

#### １６．全画面モーダルウィンドウ

要素をクリックすることで、全画面に中身が表示されるエフェクト。

<ul>
<li><a href="http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/" target="_blank">Putting CSS Clip to Work: Expanding Overlay Effect</a></li>
</ul>

#### １７．全画面オーバーレイ

オーバーレイでメニューを出します。visibility プロパティでボックスを消さず、表示・非表示を切り替えています。こちらのエフェクトはよく見かけるようになりました。

<ul>
<li><a href="http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/" target="_blank">Fullscreen Overlay Effects</a></li>
</ul>


知っておくと便利！あのサイトでさりげなく使われていたCSS小技集


## TL;DR

どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。

### レイアウトの基本知識

#### １．分割、対称、軸

何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。

- [レイアウトのパターン | イディア：情報デザインと情報アーキテクチャ](http://www.idia.jp/report/pattern-of-layout/)

Photoshop の機能拡張はこちら。

- [黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがう Photoshop の機能拡張 | コリス](http://coliss.com/articles/build-websites/operation/design/photoshop-extension-divine-proportions-toolkit.html)

#### ２．イラストから学ぶ構図

紙面や画面、絵画などにおけるページ全体の構成の型、パーツの配置を構図（コンポジション：composition）といいます。構図パターンを知ることで「理解されやすい」自然なレイアウトを作ることができます。

こちらはイラストについて書かれていますが、配色バランス・構図など広義でのデザインが分かります。空想上のものにリアリティを出す方法、小さく描いた主役を目立たせるにはどうすればよいのかなど「誰にでも見やすい構図」を生み出すための知識。

- [【イラストの見栄えが良くなる】イラストレーター 中村佑介 先生が教える公開講座が凄い！｜萌えイラスト上達法！　お絵かき初心者の学習部屋](http://oekakigakusyuu.blog97.fc2.com/blog-entry-706.html)

こちらは漫画から学ぶ構図や視線の動き。Web コンテンツに漫画を取り入れたい場合や、バナー作成時、読みやすい導線の配置をしたいとき。時間軸、視線の流れの作り方など読みやすさを上げるためのテクニックです。

- [ドラゴンボールの左と右と読みやすさの秘密 - ニカイドウレンジ公式ブログ](http://nikaidorenji.blogspot.jp/2014/03/blog-post.html)

#### ３．ダイナミックシンメトリ―

安定感を感じさせる三角形、緊張感を出す逆三角形。三角形の構図は収まりのよいレイアウトを配置するための手法です。

こちらも構図に関するテクニック。三角形や黄金分割の他に面白かったのが、三分割法と呼ばれる[ダイナミックシンメトリー](http://plus.harenet.ne.jp/~tomoki/newcon/news/2009/031401/index.html)を使った配置方法。

- [漫画『進撃の巨人』の表紙に学ぶ、絵画の構図法 - Ust's Diary](http://syuraw.hatenablog.com/entry/2014/10/04/010106)

シンメトリーについてはこちら。なぜ対称性や規則性が必要なのか、サイトに左右対称・回転を取り入れる場合どうすれば良いのか具体的に解説してあります。

- [シンメトリー（対称性）を取り入れたデザインの基礎 | Web クリエイターボックス](http://www.webcreatorbox.com/tech/symmetry-design/)

#### ４．ホワイトスペース

タイポグラフィやレイアウトでは余白の使い方が重要になります。高級感や清潔感を出したいときなど、余白は何もないようでいて、意図的に配置されています。

例えば、小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。上品さを演出することもできますよね。

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

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

余白を calc で自動算出する方法はこちら。

- [余白を割合で分割 - Weblog - Hail2u.net](http://hail2u.net/blog/webdesign/split-margin-with-ratio.html)

#### ５．造形性

新たなものを創造しても上手くいかないことが多いですが、形をつくり整えることで完成度が上がります。筆者が名刺やコンテンツを作るときに、まず意識する部分がここです。

写真や文字をバランスよく配置し、読み手から信頼を得るためのテクニック。どうやって要素を整理整頓していくのか、グルーピングのコツ、アクセントの付け方を学びます。

- [レイアウト｜伝わるデザイン](http://tsutawarudesign.web.fc2.com/miyasuku1.html)
- [デザインの基礎力をワンランクアップしたい私（Web デザイナー）の注意書き](http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/)

#### ６．プロポーション

お次は、ロゴや見出し、グリッドを作る時に使いたいツール。フィボナッチ数列や黄金比を取り入れるとバランスよく見えます。名刺用のテンプレートとグリッドレイアウトテンプレはこちら。

- [黄金比をつかって名刺をつくろう。 | SUECCO（スエッコ）](http://suecco.com/blog/19.html)
- [黄金比を取り入れたグリッドレイアウトの Web デザインを構築する為のテンプレートやアクションなどの補助キット・The Golden Grid - かちびと.net](http://kachibito.net/web-design/the-golden-grid.html)

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

- [“Twitee Lite”の Twitee(鳥のほう)はフィボナッチ数列を用いてデザインされている | Fum'style](http://fum-s-tyle.com/twitee-lite-about-twitee-design-fibonacci.html)
- [デザインの基礎、黄金比から大和比、第 2 黄金比まで｜ Web Design KOJIKA17](http://kojika17.com/2011/08/type-of-ratio.html)

### タイポグラフィ（基礎）

#### ７．行間・行送り・行長・行送り

文章が伝わっていないと感じたときに見直したいこと。文字を読みやすくするには行間（行の間隔）と行長（行の長さ）の設定も必要です。行間はフォントサイズの 2/3 ～全角くらいが読みやすい。どの文字の字間を詰めるか、空けるかを決定する際に参考になる記事です。

- [文字の読みやすさを生み出す為の知識と方法【後編】 | Basic Design Note](http://basicdesign-note.com/produce-the-readability02/)

イラレと Photoshop の文字を調節するショートカットキーはこちら。

- [文字入力を劇的効率化！Illustrator(Photoshop)16 の文字関連ショートカットテクニック | designek](http://design.iesnek.com/text-shortcut-illustrator-and-photoshop/)

#### ８．カーニング・字送り・文字ツメの違い

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

- [文字組関連編 カーニング、字送り、文字ツメの違い](http://www.adobe.com/jp/print/tips/indesign/category9/page3_1.html)
- [ワンランク上のデザインにはかかせない Photoshop の文字詰め「カーニング・トラッキング」のまとめ](http://creativememomemo.com/phtoshop_kerning_and_tracking/)

#### ９．禁則処理

禁則処理とは句読点・括弧・拗促音（小さなひらがな）・音引き（ー）などの約物を行頭や行末にこないように調整することです。読みやすい文章を作るために必要な処理なので覚えておきます。

- [CSS の禁則処理について、色々調べてみたら大変だった件 - コツコツとブクマを消化していく](http://tamasally.hatenablog.com/entry/2014/03/13/005428)

jQuery で均等割り付けを表示する方法はこちら。

- [均等割り付けで美しい表デザインを実現する jQuery を作ってみました。 | 株式会社 LIG](http://liginc.co.jp/web/js/jquery/51134)

### タイポグラフィ（応用）

#### １０．フライヤーデザインから文字の配置方法を学ぶ

写真に文字を重ねる場合どうすればよいのか、文字の上に文字を重ねるには、文字の改変例など文字の配置問題を解決するためにポスターから学べる応用テクニック。

- [「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。 | Quoitworks blog](http://quoitworks.com/blog/280)

少し気になったので。Web のタイポグラフィのトレンドが今後どういった流れになっていくのか予想してある記事。フォントサイズ・見出し書体の割合など、次にデザイン時に参考にしたい情報です。

- [ウェブ・タイポグラフィーのベスト・プラクティス](http://hail2u.net/documents/web-typography-best-practices.html)

#### １１．和欧混植（書体を組み合わせる）

複数の書体を組み合わせて使う混植。構造が異なるフォントの組み合わせ方、和文と欧文を美しく調和させるためのテクニック。

- [フォントをより美しく魅せる和欧混植と組み合わせ | ニシザワのブログ](http://nishizm.com/index.php/webdesign/fontset/)
- [書体の使い方｜伝わるデザイン](http://tsutawarudesign.web.fc2.com/yomiyasuku2.html)

#### １２．アンチゴチ（書体を組み合わせる）

漫画の吹き出しにも混植があるということで。漫画吹き出しで使われるゴシックとアンチック体（かな専用書体、太い明朝体）の組み合わせ。（参考：[フリーフォントやさしさアンチック](http://www.fontna.com/blog/1122/)）

こちらによると文字の可読性を考えた結果、漢字にゴシック、かなにアンチック体を採用したそうです。

- [連載『嘘じゃない、フォントの話』(supported by モリサワ) 第 5 回：マンガの空気を生み出す「文字」 - 連載・コラム : CINRA.NET](http://www.cinra.net/column/morisawa/morisawa05-1.php)
- [Ustream.tv: ユーザー yuzuya: アンチゴチのおはなし, Recorded on 2010/10/02. デザイン](http://www.ustream.tv/recorded/9951348)

#### １３．スイススタイルを参考にする

1950 年頃スイスに多く見られた、整理整頓（グリッドや黄金比に基づく）されたタイポグラフィを中心としたデザイン。フラットデザインの参考に。

- [今話題のスイスデザインについてのまとめ - the NOIE](http://the-noie.blogspot.jp/2013/08/blog-post_5.html)
- [第 3 回 世界中で愛される書体、ヘルベチカとは | Think IT（シンクイット）](http://thinkit.co.jp/article/727/1)


どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な

デザインセンスが上がった！レイアウトに詳しくなるまとめ


## TL;DR

筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。

### 創業前に準備すること

起業前に事業内容と企業理念を決定し、会社案内資料をパワポで作成しておきます。内容は企業理念・事業内容・解決できること・会社概要など。

#### １．定款作成前

定款作成前に準備しておきたいこと、事務所について調査しておくべきことのリストです。実印・銀行印・角印・ゴム印に関しては司法書士さんに社名の重複がないか調べてもらった後に作成します。

- 事業所物件候補を見つけたら、不動産屋に連絡
- 回線がひけるかどうか聞く
- 改装可能か、どこまで改造出来るか聞く
- 計画している事業内容で賃貸可能か確認
- 信用審査があるので待つ
- 審査 OK でテナント契約
- リフォーム会社を見つけ見積受け取り、事務所改装開始

#### ２．税金・経費

開業する前の領収書は保管しておきます。税金・経費などの知識は以下を参考に。大体この辺りを読んでおけばよいかなと。

- \[定款（ていかん）\][定款とは何か](http://www.mitaakira.com/teikantowa.htm)
- \[資本金\][株式会社の資本金を決めるために… | inQup](http://inqup.com/capital-stock)
- \[代表者印・銀行印の違い\][印鑑の種類と役割｜芳文堂](http://www.hobundo.jp/homemenu/inkansyuruiyakuwari.htm)
- \[創立費と開業費の違い\][創立費と開業費](http://123k.zei.ac/kamoku/bs/kurinobe-sisan/soukaigyou.html)
- \[青色申告の承認申請書\][個人事業：青色申告承認申請のメリット](http://entre.kokohore.net/self/soho2.html)
- \[棚卸資産の評価方法の届出書\][［手続名］棚卸資産の評価方法の届出｜法人税｜国税庁](https://www.nta.go.jp/tetsuzuki/shinsei/annai/hojin/annai/1554_16.htm)
- \[減価償却資産の償却方法の届出書\][減価償却資産の償却方法の届出｜法人税｜国税庁](https://www.nta.go.jp/tetsuzuki/shinsei/annai/hojin/annai/1554_21.htm)
- \[特別償却\][特別に償却が認められる政策減税](http://www.kk-support.com/setsuzei/gs_toku.htm)
- \[経費で落とせる支払い\][経費にできるもの・できないもの | 個人事業のアレコレ](http://www.mt-tommy.com/bookkeeping/expense/)
- \[交際費\][接待・贈答品などを支出する費用](http://j-net21.smrj.go.jp/well/zeikin/002/20080909_16.html)
- \[会議費\][内部打ち合わせ](http://www.kousaihikazei.com/q5.html)
- \[旅費交通費\][電車、地下鉄、バスなど](http://qqweb.jp/QQW/STATICS/it/keiri_mama/201208.html)
- \[福利厚生費\][全従業員のために支出した費用](http://keiei.freee.co.jp/2014/05/01/hukurikouseihi/)
- \[減価償却費の計算方法\][定額法と定率法の計算方法](http://www.asahi-net.or.jp/~av6h-okn/houzinzei/houzin4.htm)
- \[役員報酬について\][設立初年度の役員報酬の決め方](http://kigyou-no1.com/officers-remuneration-653)
- \[家族を役員にするメリット\][節税効果が大きい妻を役員にすると…](http://setuzei117.blog44.fc2.com/blog-entry-11.html)
- \[役員賞与について\][臨時的に支給される給与で退職給与以外のもの](http://123k.zei.ac/kamoku/pl/jinkenhi/yakuinnhousyuu.html)
- \[売上の計上基準\][販売管理～売上の計上時期（売上計上基準）](http://www.sk-hanbai.com/ship/ship03_keijyou.html)

#### ３．会計・帳簿

会計・帳簿関係はこちらを参考に。会計ソフトを扱う場合にも役立ちます。

- \[現金出納帳\][現金の残高を明確にするための帳簿。現金の流れ](http://www.get-boki.com/27/47/000118.html)
- \[普通預金出納帳\][銀行別にすべての取引を記入、お金の流れ](http://boki.popnavi.net/010/post_27.html)
- \[売掛帳\][売上が上がり、代金をまだ受け取っていない売掛の残高を記入](http://boki.popnavi.net/010/post_25.html)
- \[買掛帳\][代金を借り入れている状態。支払い漏れを防ぐ](http://www.levelup99.net/kojinjigyou/category4/entry46.html)
- \[固定資産台帳\][固定資産課税台帳 - Wikipedia](http://ja.wikipedia.org/wiki/%E5%9B%BA%E5%AE%9A%E8%B3%87%E7%94%A3%E8%AA%B2%E7%A8%8E%E5%8F%B0%E5%B8%B3)
- \[総勘定元帳\][総勘定元帳を作ろう | 複式簿記入門講座](http://boki.popnavi.net/010/post_11.html)
- \[決算書\][決算書.com:決算書の読み方・使い方・見方がわかる!](http://www.kessansho.com/general/study/)
- \[収入印紙（印紙）・印紙税\][収入印紙（印紙税）の知識＋印紙税額一覧表](http://encyclopedia.aceplanning.com/15.htm)

#### ４．事業計画書／補助金

事業計画書の書き方など。筆者は事業計画書をもとにして、創業補助金の申請書を作りました。創業補助金の申請書は写真や会社のロゴを入れたら見栄えが良くなると思います。Web 制作系だと専門用語が多くなるので噛み砕いて簡潔に書きます。

創業補助金の申請は、応募者の概要、事業内容、本事業の動機、将来の展望、事業の知識、経験、人脈、熱意・・・など記載することが沢山あります。自分で困難だと感じた場合は税理士さんに聞いてみましょう。

- \[事業計画とは\][1-3.事業計画書の作り方](http://knowhow.dreamgate.gr.jp/manual/id=3)
- \[事業計画書サンプル\][創業計画書・事業計画書サンプル](http://www.kaigyou-sougyou.com/category/1479668.html)
- \[ビジネスモデルの書き方\][ビジネスモデル 書き方](http://www.linzylinzy.com/profitability.html)
- \[助成金一覧\][知ってトクする助成金活用：一覧](http://www.dreamgate.gr.jp/knowhow/subsidy_list/)
- \[創業補助金\*現在終了\][創業補助金（創業促進補助金）公募のご案内](http://www.smrj.go.jp/utility/offer/075939.html)

#### ５．事務所改装確認事項

事務所を改装するにあたり事前に確認しておきたいこと。一人でやらないといけない場合、他の準備に追われて意外と忘れてしまいそうな部分。

- 壁紙・床板の取り替え、外の目立つ位置に看板の取り付けは可能か
- 流し台・トイレなどの設備、排水口、換気扇
- セキュリティ・鍵の種類＞鍵屋さんで詳しく聞きます
- 外壁にポストの取り付けは可能か
- エアコンの取り付け前に電気を通せるか確認
- 事務所が高所にある場合、室外機は窓から取り付け可能か
- 電気のアンペア数の確認＞筆者は入居直後ブレーカが落ちた…
- 電話回線の場所を確認
- ネット回線契約・工事日の確認とプロバイダ ID を準備
- 電話・FAX の回線を分けるか統一するか
- タウンページに登録するか＞勝手に連絡が来ます

#### ６．登記申請に必要な定款の内容

最初に税理士さんに会社設立の相談をしたところ、司法書士さんを紹介してくれました。（税理士さんと司法書士さんはセットの場合が多い）筆者は登記申請を司法書士さんにお願いしました。

商号（※１）・住所・目的（※２）・役員と数・資本金（※３）・株主総会・発起人・取締役任期・公告の方法（官報で OK。HP の場合は公告ページのアドレスまで出来ていないと指定不可）など定款に必要な内容を決めます。定款は会社のルールブックみたいなものです。

※１．商号（会社名）は司法書士さんに重複がないか調べてもらいます。筆者はここで時間を取られるのが嫌だったので司法書士さんに丸投げしましたが、自分で行う場合は法務局で照合します。この後、実印・銀行印・角印・ゴム印を作成します。印鑑に関しては[会社印鑑の種類とそれぞれの法的効力の違い：起業のための必須知識 | inQup](http://inqup.com/ones-seal)を参考に。

※２．目的は現在計画しているものだけでなく、今後やっていきたい事業内容も盛り込んでおきましょう。目的は定款の絶対的記載事項なので後々追加したいと思ったら、その場合は改めて登記申請を行う必要があります。

定款目的の例はこちらから検索可能です。司法書士さんに言えば辞書をコピーしてくれます。[会社定款目的記載例検索サイト；イー目的ドットコム](http://www.e-mokuteki.com/access/)

※３．資本金は１円からでもできますが、あまり低すぎると会社の信用が得られないそうです。（小話：司法書士さんの話によると実際 30 円で登記した人が、1 か月後に信用云々の関係で 100 万円で登記しなおしてくださいと言ってきたそうです。）

定款認証を受けてから、個人の銀行口座に資本金を入金します。定款認証を受ける前に口座に資本金を入れていても認証後の日付での入金が必要となります。（筆者はそれを知らずに入金し、やり直しさせられました・・・）

#### ７．銀行口座の開設

登記が終わったら会社名義の銀行口座を開設し、個人口座から資本金を移動させます。銀行には定款のコピーや登記事項証明書・会社の印鑑証明・銀行印・運転免許証などを持っていきました。銀行員さんは慣れているので、サクサクやってくれます。

- [法人口座開設をスムーズに行う方法：起業前に知らないと後悔する？！ | inQup](http://inqup.com/banking)

#### ８．ドメイン名を決める

会社用のドメインは「co.jp」。重複がないか調べ、ドメインを抑えたら会社登記情報を仮登録しておきます。法人化した後に本登録可能となります。

- [属性型 JP ドメイン（.co.jp・.or.jp）と汎用 JP ドメイン（.jp）はどこが違うの？ | よくある質問 | ムームードメイン](http://muumuu-domain.com/?mode=faq&state=answer&id=000658)

#### ９．ロゴ作成と商標登録

作成したロゴデータを作成後特許事務所にて調査してもらい、料金がかかりますが重複がなければ商標登録申請を依頼することもできます。

- [商標権のトラブルを避けるための措置 | 商標の活用法 | 商標とは？ | 正林国際特許商標事務所](http://www.sho-pat.com/j/trademark/method/method2.html)
- [商標登録ならおまかせください！【商標登録専門サイト】](http://www.jazy-ip.com/)
- [商標チェック・登録サービスについて | ランサーズ](http://www.lancers.jp/help/trademark_check)

#### １０．GoogleApps 設定

メーラーを使わなくても、独自ドメインメールを Gmail で使用できるのは便利。勤怠管理や一斉メール送信もできるので導入しておきます。メールにはフッターに共通で入る「署名（会社名・肩書・住所・TEL・FAX・E-mail・URL）」を設定しておきます。

- [Google Apps 使い方、機能紹介 | グーグルアップス【MasterApps】](http://www.master-apps.jp/casestudy)
- [Apps ステータスダッシュボード](http://www.google.com/appsstatus#hl=ja)
- [Google Apps for Work](http://www.google.co.jp/intx/ja/enterprise/apps/business/)

#### １１．サーバの準備と設定

サーバのレコードを設定し、ネームサーバを変更することで GoogleApps、サーバでのドメイン運用が可能となります。ネームサーバーの設定後は数時間～３日は不安定なので、表示されないときがあるので少し待ちます。

さくら VPS がおすすめです。試用期間中は遅くて不安になりますが、契約後当日に高速になります。

- [初心者でもわかる！さくら VPS | Sakura VPS 設定マニュアル](http://www.xn--vps-073b3a72a.com/)
- [さくら VPS の初期設定 | 離島に住みたい FE ブログ](http://blog.orangemittoo.net/post/sakuravps_init/)
- [さくら VPS で１０分で wordpress の設定をする - 甘噛み最前線](http://billyback.hatenadiary.jp/entry/2013/12/02/171120)

#### １２．名刺データ

名刺には会社の住所や電話番号、アドレスが必要なので法人登記やドメイン設定が終わった後で作成することになります。名刺などのカラー印刷物は、シアン・マゼンタ・イエロー・ブラックの４色で刷られることが多いので、カラーモードは「CMYK（光が紙などに反射し、目に届く色）」で制作します。

[名刺のデザインを新しくしました | Web クリエイターボックス](http://www.webcreatorbox.com/inspiration/my-new-business-card/)を参考にさせていただき、名刺の紙質は[マシュマロホワイト](http://www.superprint.jp/product/marshmallowwhite.asp)で依頼。枚数：100 枚、Illustrator でデータ入稿しました。

- [レイアウトやタイポグラフィに関するまとめ](https://commte.net/4547)

#### １３．事務所の備品を用意する

どういった備品を用意するかは、個人によると思いますが、こういったものを準備するといいと思います。開業直後は訪問者の方と自社の事務所で打ち合わせする機会も多くなるのでデスク・椅子等・冷蔵庫の什器などは先に用意しておくといいかもしれません。

- デスク・椅子・会議机・会議椅子・本棚／各数台
- キャビネット・棚板・パーテーション
- Nas・無線 LAN・SSD・CPU・PC モニター／各数台
- スイッチング Hub・ケーブル・打ち合わせ用のノート PC
- モニターアーム・キーボード（Realforce）
- ホワイトボード・スクリーン・シュレッダー・プロジェクター
- オフィスソフト・会計ソフト・adobe CC
- プリンタ兼用 ラベルシール（住所と名前を印刷する用）
- 事務用クラフト封筒 角形 2 号
- RHODIA（NO11/16）・STAEDTLER・STABILO・BIC など書きやすいもの

### 制作フローまとめ

Web 制作関係で独立する前におさらいしておきたいこと。企画・提案から納品、保守契約までの簡単な流れをまとめます。Web 制作で起業する場合に知っておきたいこと。

#### １４．企画・提案

提案書に必ず書いておきたいこと。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。

- [Web 制作に特化した「提案書」に入れておきたいこと](https://commte.net/4125)

#### １５．制作フローの確認

Web 制作の一連の流れ。ヒアリングシート・見積もり・などの書類関係から実際にウェブサイトを構築するときの一連の流れ、制作フロー。

- [Web 制作フローが「完璧」にわかる資料や流れ](https://commte.net/4058)

#### １６．コーディングに入ったら

コーディングについてのフロー。仕様書の確認からスケジューリング、マークアップ、CSS、設計全般、WordPress 組み込みまで。

- [コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)](https://commte.net/4089)

#### １７．ドメイン、DNS、メール設定

独自ドメインで HP と gmail を運用させるまでの流れとメール受信設定、さくら VPS にて WordPress を動かす方法、ターミナルから ssh 接続してからの必須コマンド一覧など受注後必要となる知識。

- [サイト制作時に知っておくと「意外」と役に立つこと](https://commte.net/4641)


筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので

起業するときに助かる！Web制作者が独立するために必要なまとめ


## TL;DR

CMS を組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。

2016/07/03：高速化についての新しい方法を追加しました。[確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開](https://commte.net/5753)。

### VPS

高速化のために VPS で試して比較的効果があったことを、次回また組み込む時のためにメモ。

#### １．VPS / SSD に

リクエスト数や画像の容量にもよりますが、WordPress を組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、

[さくらの VPS](http://px.a8.net/svt/ejp?a8mat=2BTZIY+7WL7XU+D8Y+BWVTE)SSD（2G）に WP を置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。

- [さくら VPS | Sakura VPS 設定マニュアル](http://www.xn--vps-073b3a72a.com/)
- [さくら VPS の初期設定 | 離島に住みたい FE ブログ](http://blog.orangemittoo.net/post/sakuravps_init/)
- [さくら VPS で１０分で wordpress の設定をする - 甘噛み最前線](http://billyback.hatenadiary.jp/entry/2013/12/02/171120)

#### ２．TSO を off にする

さくら VPS（CentOS）にてファイルのダウンロード速度が極端に遅い場合は、ターミナルで root に切り替え tcp segmentation offload を off に設定します。

- [さくらの VPS で回線速度が遅くアクセスに時間がかかります。｜よくある質問｜さくらインターネット公式サポートサイト](https://sakura.custhelp.com/app/answers/detail/a_id/1368#gs=eyJndWlkZUlEIjoxLCJxdWVzdGlvbklEIjoxLCJyZXNwb25zZUlEIjoxLCJndWlkZVNlc3Npb24iOiJWYWtscjQqbCIsInNlc3Npb25JRCI6IlZha2xyNCpsIn0.)

#### ３．PHP アクセラレータの導入

PHP の処理を高速化します。データをキャッシュディレクトリに保存することで次回アクセス時にキャッシュを利用し高速表示します。

- [ServersMan@VPS (CentOS) eAccelerator で PHP の高速化](http://temog.info/vps/serversmanvps-eaccelerator-php.html)
- [APC で PHP の処理を高速化 | Web クリエイターネット](http://www.webcreator-net.com/tips_memo/server/20120612083050.html)

#### ４．Apache の不要モジュール削除

メモリ消費を抑えるために Apache の不要モジュールもコメントアウトします。

- [さくらの VPS で動いている Apache の不要モジュールを削除する | Web エンジニアライフ](http://webengineerlife.com/2012/03/02/sakura-vps-apache-module/)

#### ５．キャッシュを利用し、転送量を軽減

Apache のモジュール、mod_expires を使いキャッシュを保持させ、転送量を軽減させて負荷対策します。ひとつはコマンドと htaccess の一例。

もう一つは[さくらのレンタルサーバ](http://px.a8.net/svt/ejp?a8mat=2BTZIY+7X6NJM+D8Y+67RK2)での設定方法。

- [【負荷対策】Apache のモジュール mod_expires でキャッシュを利用する - エーエイチレフ linux サーバー技術情報](http://www.ahref.org/tech/server/apacche/389.html)

### 画像軽量化

サイトのコンテンツに大きめの写真を使うことが多くなってきました。画像の転送時間は馬鹿にならないので、画像の余分なデータを削除します

#### ６．JPEG Exif 削除

画質を下げてファイルを軽減するのは一番楽な方法ですけど、ユーザーに良い印象を残すことができません。Exif（日時・場所・機種・画素数などの情報）を削除するソフトを使い軽量化します。

JPEG 画像を劣化させずに軽量化するウェブサービスであれば[JPEGmini](http://www.jpegmini.com/)がおすすめ。

- [\[フリーソフト\] JPEG 画像の Exif 情報をドラッグで一括削除できるソフト「ExifEraser」](http://antarespc.com/tool/exiferaser.html)
- [\[フリーソフト\] 「JPEG Cleaner」と「JpegAnalyzer Plus」](http://internet.watch.impress.co.jp/cda/biz_tool/2008/06/17/19953.html)

#### ７．PNG 軽量化

PNG にも Exif 等のデータが含まれています。PNG は透過色を指定できますが、フルカラーにすると JPEG よりファイルサイズが大きくなるといったデメリットもあります。こちらは画質をある程度損なわずにファイルを削減するソフトとサービス。

- [\[フリーソフト\] 見た目の画質や不透明度はそのまま、PNG 画像のファイルサイズを 70％削減する「PNGoo」 - 窓の杜](http://www.forest.impress.co.jp/docs/review/20140228_637513.html)
- [TinyPNG](https://tinypng.com/)

#### ８．GIF、SVG 画像

JPG、PNG、GIF、SVG 画像を圧縮して小さくしてくれる「Compressor」 は対応している画像が多いです。

- [無料で JPG、PNG、GIF、SVG 画像を圧縮して小さくしてくれる「Compressor」 - GIGAZINE](http://gigazine.net/news/20140527-compressor/)

### JavaScript

テーマ作成するときなんかに、リクエスト数など極力減らしておきたいこと。

#### ９．JavaScript を圧縮

JavaScript に含まれるタブやスペース・改行などを削除し圧縮するウェブサービス。

- [JavaScript ソースコードを圧縮してサイズを小さくする。またはソースを整形する JavaScript プログラムメモ｜プログラムメモ](http://logic.moo.jp/data/513.html)
- [CSS や JavaScript ファイルを連結、圧縮·Minify MOONGIFT](http://www.moongift.jp/2009/01/minify/)
- [\[試\] サイト表示速度を高速化する方法 | ファイル圧縮（Minify）による表示速度改善 | 試行錯誤ライフハック](http://marubon.info/method-speed-up-display-of-web-site-with-contents-minify-3109/)

#### １０．非同期で読み込む

非同期にすることにより JavaScript の読み込みが完了していなくても他の部分を読み込むことが可能になります。こちらはユーザーの体感速度やページを早く表示されるための施策まとめ。

- [ユーザーの体感速度を高めるための JavaScript チューニング（前編） | HTML5Experts.jp](http://html5experts.jp/yoshikawa_t/877/)
- [\[M\] WordPress で script 要素をまるっとサクッと非同期化する方法 | mbdb (モバデビ)](http://mbdb.jp/hacks/wp-javascript-add-async.html)

#### １１．遅延読み込み

サイズの大きい画像やファイルの読み込みのタイミングを遅らせることで、ページ表示を早く感じさせる遅延ロード(Lazy Load)とプラグイン。

- [Web サイトの読み込み体感速度が 2 秒くらい上がるかも。SNS ボタンは後から読み込め！ - Web 学び](http://fukuyama.co/lazyloadsns)
- [画像の読み込みを遅延ロードさせる jQuery プラグイン Lazy Load](http://web.showjin.me/jquery_lazyload.html)

### リクエスト数・他

#### １２．HTTP リクエストを最小限に

リクエスト数が増えてくると応答に時間がかかり、結果表示がもたついてしまいます。こちらは HTTP リクエストの削減について。

- [HTTP リクエストを減らすために【序章】HTTP リクエストは甘え — MOL](http://t32k.me/mol/log/reduce-http-requests-overview/)
- [JavaScript と CSS ファイルの HTTP リクエストを最小限にし圧縮・キャッシュする -BoxJS と BoxCSS | コリス](http://coliss.com/articles/build-websites/operation/work/simple-package-management-service-boxjs-and-boxcss.html)

#### １３．高速化ライブラリ

スマホでは使えないけど、こういう方法もあるんだなぁということでメモ。リンクをマウスオーバーで先読みする方法。リンク先ページをロードして pjax 化する高速化ライブラリ。

- [2 行追加するだけで Web サイトを高速化する InstantClick.io - atskimura-memo](http://atskimura.hatenablog.com/entry/2014/02/18/215538)

#### １４．gzip 圧縮

gzip 圧縮を使いデータの転送量を減らす方法。

- [ウェブサイトを gzip 圧縮で高速化する: 小粋空間](http://www.koikikukan.com/2012/06/19-015555.php)
- [gzip 圧縮で Web コンテンツを高速化 | Web クリエイターネット](http://www.webcreator-net.com/tips_memo/server/20120525083004.html)

#### １５．プラグインの使用数を減らす

WordPress テーマを自作したことある人なら、極力プラグインを使わずに高速化させるコーディングを試みたことがあると思います。こちらはよく使われそうなプラグインの代替案をまとめてあります。

- [【WordPress まとめ】13 プラグインを減らして高速化！その方法を解説するよ - ゆめぴょんの知恵](http://wispyon.com/noplugin-wordpress-matome/)


CMSを組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。2016/07/03：高速化につい

ずいぶん速くなった！ページ表示高速化テクニックまとめ


## 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)

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


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

2014-11-10

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

2014-10-27

デザインセンスが上がった！レイアウトに詳しくなるまとめ

2014-9-16

起業するときに助かる！Web制作者が独立するために必要なまとめ

2014-8-18

ずいぶん速くなった！ページ表示高速化テクニックまとめ

2014-7-14

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

2014-6-16

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

2014-2-17

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

2014-1-20

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

2013-11-18

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

2013-7-29

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