「記事や資料の作成に役立つネットワークアイコン集」のトリセツ

# 概要

先日、記事や設計書、プレゼン資料の作成に役立つ[ネットワークアイコン集](https://qiita.com/tamura__246/items/554cfa151ec999aa9eac)を公開しました。このアイコンは自由に使っていただいて構いませんが、悪用やセンスのひどすぎる使用は避けていただくようお願いします。以下に正しい使い方と誤った使い方の例を挙げておきます。

# 正しい使い方

## グリッドを利用する

![grid.png](https://qiita-image-store.s3.amazonaws.com/0/43869/7cffc2d4-4dbc-f33e-84ae-c45ca0f09d98.png)


背景のグリッドを活用して適当な場所にアイコンを配置し、矢印はグリッドの方向に平行にしてください。

## 光の当たる方向を意識する

PowerPointの「左右反転」でアイコンの向きを変えることができます。

![WS000024.JPG](https://qiita-image-store.s3.amazonaws.com/0/43869/2f88e77f-e513-d90e-d0f6-657151f12857.jpeg)

ただし、光の当たる方向を意識して色を変更しないと統一感が崩れます。

![gg.png](https://qiita-image-store.s3.amazonaws.com/0/43869/b68de231-f45a-46f2-c80b-0d235dccf373.png)

## 適当な大きさに拡大・縮小する

アイコンのサイズは適宜変更して下さい。

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/43869/507e0137-dc0c-26e0-5d46-3adeaf074813.png)

ただし、PowerPointの場合は、拡大や縮小によりバランスが崩れることがありますので、注意して下さい。拡大し過ぎると、造りの粗さが目につくことがあります...（適度なサイズでご利用下さい）

## 動きをつける

　　　　　　　　　　　![fake-hacker3.gif](https://qiita-image-store.s3.amazonaws.com/0/43869/ffdb0bc2-7c7d-6ea2-5cf9-1e84daf70697.gif)

動きをつけてみるのもいいと思います。動くバージョンのアイコンもいつか公開したいです。

## 遊ぶ

![clacker.png](https://qiita-image-store.s3.amazonaws.com/0/43869/d76af163-aa29-ff2f-b22a-91746061ba8a.png)

絵でしかできない表現もいいと思います。

# 誤った使い方

以下のような使い方はしないで下さい。

## 質感の異なるアイコンとの併用

　![dff.png](https://qiita-image-store.s3.amazonaws.com/0/43869/9b85e7d6-c3d8-ea9f-7083-ae33342a11ee.png)

これはやめて欲しいです。

## 作者の意図に反する使い方

　　　　![dontsitfw.png](https://qiita-image-store.s3.amazonaws.com/0/43869/3a6be089-d087-37fd-5749-c3349d4f437a.png)


できるだけ作者(私)の意図を汲んで下さい。

## 理解しがたい動きをつける

![motion4.gif](https://qiita-image-store.s3.amazonaws.com/0/43869/5ab5826e-5038-da1d-97b6-9a3e9820013b.gif)

PowerPointってついつい遊んでしまいますよね...

## 遠近法の無視、悪用

![big.png](https://qiita-image-store.s3.amazonaws.com/0/43869/7509be44-f0de-333d-a52c-b368106af3dc.png)

部分的に巨大化しないで下さい。

## 増殖する

![alotof.png](https://qiita-image-store.s3.amazonaws.com/0/43869/82c53ad8-18c7-e0e9-7311-a07b9ec9e935.png)

まあ、このくらいはいいですか。

<!--
## 犯罪にかかわる利用


![cc2.gif](https://qiita-image-store.s3.amazonaws.com/0/43869/a5094f9e-aa68-cb54-5b5c-9b4bdf966d88.gif)

![vv.gif](https://qiita-image-store.s3.amazonaws.com/0/43869/492a9a56-d35d-2690-8a54-b733a4cbb17f.gif)

ハッカーはインターネット・セキュリティの図説のみに利用して下さい。
-->

# サンプル

## プレゼン資料での利用例

[![thumbnail](http://image.slidesharecdn.com/easybuggy-180116141313/95/slide-33-1024.jpg)](https://www.slideshare.net/KoheiTamura/easybuggy-86227462)

## Qiitaの記事での利用例

[KeycloakでOpenID Connectを使ってみる（Spring Bootアプリケーション編）](https://qiita.com/tamura__246/items/4290a1035e1adcab733b)

# 最後に

使用する場合は[GitHub](https://github.com/k-tamura/cocha-icons)にスターを付けて、以下の画像を作成物のどこかに付け加えていただくようお願いします。

[![mark.png](https://github.com/k-tamura/cocha-icons/raw/master/designed_by_cocha_icons.gif)](https://github.com/k-tamura/cocha-icons)

Qiitaの記事で使うのであれば、以下を本文の最後に埋め込んで下さい。

```
[![mark.png](https://github.com/k-tamura/cocha-icons/raw/master/designed_by_cocha_icons.gif)](https://github.com/k-tamura/cocha-icons)
```

HTMLの場合はこちら:

```html
<a href="https://github.com/k-tamura/cocha-icons">
    <img src="https://github.com/k-tamura/cocha-icons/raw/master/designed_by_cocha_icons.gif" alt="mark.png" style="max-width:100%;">
</a>
```