スタッフブログ

たむです。これまでまったく触ったことのないサーバについて、さくらのVPSを借りてみたので、MacからさくらのVPSでサーバを立ててWordpressをインストールしてCoda2でSSH鍵認証を使ってSFTPするということを実験してみたまとめです。今回は、Apacheをインストールと設定、起動をするまで。

※2015年8月頃に実験したメモなので情報が古いかもしれないことと、デザイナーが実験してみただけなので本職のインフラエンジニアの方から見ると間違いだらけかもしれませんが、ご容赦くださいませ。

Apacheのインストール

Apacheをインストールして自動起動の有効化を設定する、インストールはyumで。yumってなんて読むんだろう。

$ sudo yum -y install httpd

作業用ユーザのパスワードを聞かれるので入力する。とインストールが実行される。

[sudo] password for admin:

インストールが正しく実行されると以下が表示される。

読み込んだプラグイン:fastestmirror, security インストール処理の設定をしています Loading mirror speeds from cached hostfile * base: www.ftp.ne.jp * epel: ftp.kddilabs.jp * extras: www.ftp.ne.jp * updates: www.ftp.ne.jp 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> Package httpd.x86_64 0:2.2.15-47.el6.centos will be インストール --> 依存性の処理をしています: httpd-tools = 2.2.15-47.el6.centos のパッケージ: httpd-2.2.15-47.el6.centos.x86_64 --> 依存性の処理をしています: apr-util-ldap のパッケージ: httpd-2.2.15-47.el6.centos.x86_64 --> トランザクションの確認を実行しています。 ---> Package apr-util-ldap.x86_64 0:1.3.9-3.el6_0.1 will be インストール ---> Package httpd-tools.x86_64 0:2.2.15-47.el6.centos will be インストール --> 依存性解決を終了しました。 依存性を解決しました =================================================================================================================================================================================== パッケージ アーキテクチャ バージョン リポジトリー 容量 =================================================================================================================================================================================== インストールしています: httpd x86_64 2.2.15-47.el6.centos updates 830 k 依存性関連でのインストールをします。: apr-util-ldap x86_64 1.3.9-3.el6_0.1 base 15 k httpd-tools x86_64 2.2.15-47.el6.centos updates 77 k トランザクションの要約 =================================================================================================================================================================================== インストール 3 パッケージ 総ダウンロード容量: 922 k インストール済み容量: 3.1 M パッケージをダウンロードしています: (1/3): apr-util-ldap-1.3.9-3.el6_0.1.x86_64.rpm | 15 kB 00:00 (2/3): httpd-2.2.15-47.el6.centos.x86_64.rpm | 830 kB 00:00 (3/3): httpd-tools-2.2.15-47.el6.centos.x86_64.rpm | 77 kB 00:00 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 合計 60 kB/s | 922 kB 00:15 rpm_check_debug を実行しています トランザクションのテストを実行しています トランザクションのテストを成功しました トランザクションを実行しています インストールしています : apr-util-ldap-1.3.9-3.el6_0.1.x86_64 1/3 インストールしています : httpd-tools-2.2.15-47.el6.centos.x86_64 2/3 インストールしています : httpd-2.2.15-47.el6.centos.x86_64 3/3 Verifying : httpd-tools-2.2.15-47.el6.centos.x86_64 1/3 Verifying : httpd-2.2.15-47.el6.centos.x86_64 2/3 Verifying : apr-util-ldap-1.3.9-3.el6_0.1.x86_64 3/3 インストール: httpd.x86_64 0:2.2.15-47.el6.centos 依存性関連をインストールしました: apr-util-ldap.x86_64 0:1.3.9-3.el6_0.1 httpd-tools.x86_64 0:2.2.15-47.el6.centos 完了しました!

インストールしたApacheのバージョンを確認する。当時はApache2.2.15が最新だったらしい。

$ httpd -v Server version: Apache/2.2.15 (Unix) Server built: Aug 24 2015 17:52:49

OSの再起動時に自動的にApacheが起動するようにするようになっているか確認する。

$ chkconfig --list httpd

もし3番がonでない場合は設定を変更する。

$ sudo chkconfig httpd on Apacheの設定を変更する

変更前にhttpd.confのバックアップを取っておく。

$ sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.old

作業用ユーザのパスワードを聞かれるので入力する。

[sudo] password for admin:

Apacheの設定ファイルを変更する。

$ sudo vi /etc/httpd/conf/httpd.conf

アクセスしてきたクライアントに返す情報をOS情報からApacheのみにする。

ServerTokens OS → ServerTokens Prod

エラーページにサーバ情報を表示しないようにする。

ServerSignature On → ServerSignature Off

ディレクトリにアクセスしてきた場合にファイル一覧ページを表示しないようにする。

Options Indexes FollowSymLinks → Options -Indexes FollowSymLinks

設定が正しいか確認する。
エラーが出たら先ほど取っておいたバックアップファイルのhttpd.conf.oldを復活させて、もう一度トライする。

$ service httpd configtest Syntax OK 不要なモジュールの無効化

メモリ節約とセキュリティ向上のため、Apacheが読み込むモジュールのうち不要なものを無効化しておく。

※参考：アカベコマイリ - http://akabeko.me/blog/2012/04/revps-04-apache/#revps-04-03

もう一度viで設定ファイルを開いて編集する。

$ sudo vi /etc/httpd/conf/httpd.conf

150行目以降にモジュールが「LoadModule auth_〜」という内容で並んでいるので、不要なものをコメントアウトする。
コメントアウトしたものは以下のモジュール。

153行目付近、拡張認証プロパイダに別名を与えて管理しやすくする。

LoadModule authn_alias_module modules/mod_authn_alias.so → #LoadModule authn_alias_module modules/mod_authn_alias.so

154行目付近、匿名ユーザーのアクセスを許可。

LoadModule authn_anon_module modules/mod_authn_anon.so → #LoadModule authn_anon_module modules/mod_authn_anon.so

155行目付近、DBM ファイルを用いたユーザ認証を行う。

LoadModule authn_dbm_module modules/mod_authn_dbm.so → #LoadModule authn_dbm_module modules/mod_authn_dbm.so

156行目付近、他の認証モジュールを用いない場合、全ての認証を拒否する。

LoadModule authn_default_module modules/mod_authn_default.so → #LoadModule authn_default_module modules/mod_authn_default.so

159行目付近、ファイルの所有者に基づいた承認を行う。

LoadModule authz_owner_module modules/mod_authz_owner.so → #LoadModule authz_owner_module modules/mod_authz_owner.so

160行目付近、プレーンテキストファイルを用いたグループ承認を行う。

LoadModule authz_groupfile_module modules/mod_authz_groupfile.so → #LoadModule authz_groupfile_module modules/mod_authz_groupfile.so

161行目付近、DBM ファイルを用いたグループ承認を行う。

LoadModule authz_dbm_module modules/mod_authz_dbm.so → #LoadModule authz_dbm_module modules/mod_authz_dbm.so

162行目付近、他の認証モジュール (authz系) を用いない場合、全ての認証を拒否する。

LoadModule authz_default_module modules/mod_authz_default.so → #LoadModule authz_default_module modules/mod_authz_default.so

163行目付近、他のLDAP認証モジュールに接続プーリングとキャッシュ機能を提供する。

LoadModule ldap_module modules/mod_ldap.so → #LoadModule ldap_module modules/mod_ldap.so

164行目付近、LDAP認証用のモジュール。

LoadModule authnz_ldap_module modules/mod_authnz_ldap.so → #LoadModule authnz_ldap_module modules/mod_authnz_ldap.so

167行目付近、リクエスト毎に入力バイト数と出力バイト数をロギングする。

LoadModule logio_module modules/mod_logio.so → #LoadModule logio_module modules/mod_logio.so

169行目付近、レスポンスのボディをクライアントに送る前に外部プログラムで処理する。

LoadModule ext_filter_module modules/mod_ext_filter.so → #LoadModule ext_filter_module modules/mod_ext_filter.so

170行目付近、ファイルの内容から MIME を判断する。

LoadModule mime_magic_module modules/mod_mime_magic.so → #LoadModule mime_magic_module modules/mod_mime_magic.so

174行目付近、Cookieによるユーザの追跡を行う。

LoadModule usertrack_module modules/mod_usertrack.so → #LoadModule usertrack_module modules/mod_usertrack.so

183行目付近、サブドメインを簡単に作成できるようにする。

LoadModule vhost_alias_module modules/mod_vhost_alias.so → #LoadModule vhost_alias_module modules/mod_vhost_alias.so

185行目付近、メディアタイプやリクエストメソッドに応じて CGI スクリプトを実行する機能を提供する。

LoadModule actions_module modules/mod_actions.so → #LoadModule actions_module modules/mod_actions.so

186行目付近、URL の大文字・小文字を区別しないようにする。

LoadModule speling_module modules/mod_speling.so → #LoadModule speling_module modules/mod_speling.so

187行目付近、ユーザ専用のディレクトリを提供する。

LoadModule userdir_module modules/mod_userdir.so → #LoadModule userdir_module modules/mod_userdir.so

193行目付近、mod_proxy のための FTP サポートモジュールを有効にする。

LoadModule proxy_ftp_module modules/mod_proxy_ftp.so → #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so

197行目付近、URIをキーにしたコンテンツのキャッシュを行う。

LoadModule cache_module modules/mod_cache.so → #LoadModule cache_module modules/mod_cache.so

199行目付近、URIをキーにしたコンテンツキャッシュストレージ管理を行う。

LoadModule disk_cache_module modules/mod_disk_cache.so → #LoadModule disk_cache_module modules/mod_disk_cache.so

編集が完了したらファイルを保存し設定が正しいか確認する。
エラーが出たら先ほど取っておいたバックアップファイルのhttpd.conf.oldを復活させて、もう一度トライする。

$ service httpd configtest Syntax OK Apacheの起動と確認

Apacheを起動する。

$ sudo service httpd start

起動が完了すると以下が表示されるので、ブラウザからIPやURLにアクセスして確認する。
Apacheのテストページが表示されていれば問題なく完了している。

httpd を起動中: [ OK ]

今回はここまで、次回はMySQLをインストールして設定をするまで。

たむ

たむです。これまでまったく触ったことのないサーバについて、さくらのVPSを借りてみたので、MacからさくらのVPSでサーバを立ててWordpressをインストールしてCoda2でSSH鍵認証を使ってSFTPするということを実験してみたまとめです。今回は、MacからVPSにssh接続してiptablesの設定をするまで。

※2015年8月頃に実験したメモなので情報が古いかもしれないことと、デザイナーが実験してみただけなので本職のインフラエンジニアの方から見ると間違いだらけかもしれませんが、ご容赦くださいませ。

MacからVPSにssh接続

Macのターミナルを立ち上げてsshでVPSに接続する。ターミナルは「アプリケーション」フォルダ内の「ユーティリティ」フォルダにインストールされている。

$ ssh root@IPアドレス

入力したIPアドレスにはじめてsshで接続しようとすると、以下のように確認を求められるのでyesと入力してEnterを押す。

The authenticity of host 'IPアドレス (IPアドレス)' can't be established. RSA key fingerprint is de:ff:49:7f:22:2f:22:af:38:22:22:6c:e4:d9:51:c1. Are you sure you want to continue connecting (yes/no)? → The authenticity of host 'IPアドレス (IPアドレス)' can't be established. RSA key fingerprint is de:ff:49:7f:22:2f:22:af:38:22:22:6c:e4:d9:51:c1. Are you sure you want to continue connecting (yes/no)? yes

その後、もう一度sshでVPSに接続する。

$ ssh root@IPアドレス

今後はパスワードを求められるので、rootパスワードはOSインストール時に設定したパスワードを入力し、以下の表示が出ればログインが成功している。

$ ssh root@IPアドレス root@IPアドレス's password: SAKURA Internet [Virtual Private Server SERVICE] [root@tkx-xxx-xxxxx ~]# ポートを変更する

ポートがデフォルトの22だと攻撃を受けやすいのでsshd_configを編集してポート番号を変更する。変更前にsshd_configのバックアップを取っておく。

# cp /etc/ssh/sshd_config /etc/ssh/sshd_config.old

sshd_configを開く。

# vi /etc/ssh/sshd_config

操作はviで行う。viにはモードという概念があり、ファイルを開いた状態ではコマンドモードになっている。

コマンドモード = カーソル移動／コピー／ペースト／削除／保存／検索など編集操作 入力モード = 文字の入力

以下が記載されている場所を探す。viをコマンドモードのままスラッシュとキーワード/#Port 22を入力してEnterキーを押すと検索することができる。ちなみにその状態でキーボードのnを押すと次のキーワードを探しに行く。

/#Port 22

viを入力モード（キーボードのiを押す）に変更してポート番号を変更。
ポートスキャンは大抵の場合1023番までしか行わないらしいので、1024番から上限の65535番までの範囲で適当に決める。テンキーで数字の入力をしようとするとアルファベットが出るので注意。

#Port 22 → Port 10022

その後コマンドモード（キーボードのescを押す）に戻す。
viがコマンドモードに戻ったら:wqと入力してEnterキーを押すと保存される。
ちなみに入力モード中、変なことをしてよくわからなくなったら、とりあえずescでコマンドモードに戻り:q!と入力すれば、保存せずに強制終了する。

ポート番号を変更したらsshdを再起動して変更を有効化する。

# service sshd restart

エラーが無ければ以下のように表示される。エラーが出たら先ほど取っておいたバックアップファイルのsshd_config.oldを復活させて、もう一度トライする。

# service sshd restart Stopping sshd: [ OK ] Starting sshd: [ OK ] アプリケーションのアップデート

古いバージョンの脆弱性を突かれることを防ぐためにアプリケーションのアップデートをしておく。

# yum -y update 作業用ユーザの作成と設定

rootで作業すると、下手を打つとアクセスさえできなくなるので作業用のユーザを作成する。ユーザ名は好きなもので良い。今回、ユーザ名はadminに設定した。

# useradd admin

作業用ユーザを作成したら作成したユーザのパスワードを設定する。

# passwd admin

作業用ユーザのパスワードを2回入力してエラーが無ければ以下のように表示される。パスワードは入力中も表示されないので注意。

# passwd admin ユーザー admin のパスワードを変更。 新しいパスワード: 新しいパスワードを再入力してください: passwd: 全ての認証トークンが正しく更新できました。

作成したユーザがsudoできるようにする。sudoを使うことで必要なときだけroot権限で作業できるようになる。まずはユーザをwheelグループに追加する。

# usermod -G wheel admin

wheelグループがsudoを使えるようにするため設定ファイルを開いて設定を変更する。

# visudo

設定ファイルを開いたら、以下の行を探してコメントを外す。（#を消す）

## Allows people in group wheel to run all commands # %wheel ALL=(ALL) ALL → ## Allows people in group wheel to run all commands %wheel ALL=(ALL) ALL CentOSの日本語化

dateコマンドを日本語表示できるようにするため設定ファイルを開いて設定を変更する。

# vi /etc/sysconfig/i18n

設定ファイルを開いたら、一番上に書かれている行を変更する。

LANG="C" → LANG="ja_JP.UTF-8"

日本語化は再ログインすると設定が有効になるので、一度ログアウトする。

# exit

ログアウトすると以下が表示される。

# exit logout Connection to IPアドレス closed.

再ログインする時はsshのポート番号を変更しているのでポート番号を指定してログインする。

ssh -p 10022 root@IPアドレス 鍵認証でログインする

ポート番号は変更したけれど、パスワード認証のままだとセキュリティ強度が低いらしいので、鍵認証でsshログインできるようにする。まずは新しくターミナルのウィンドウを開いてMacで鍵を生成する。

$ ssh-keygen -t rsa -v

ファイル名やパスフレーズを聞かれるので、何も入力せずにEnterキーを押していく。

$ ssh-keygen -t rsa -v Generating public/private rsa key pair. Enter file in which to save the key (/Users/XXXX/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again:

以下の表示が出れば鍵の作成が成功している。

Your identification has been saved in /Users/XXXX/.ssh/id_rsa. Your public key has been saved in /Users/XXXX/.ssh/id_rsa.pub. The key fingerprint is: de:ff:49:7f:22:2f:22:af:38:22:22:6c:e4:d9:51:c1 XXXX@MacBook-Pro.local The key's randomart image is: +--[ RSA 2048]----+ | | | + + | |. E | | o . | | o. .S | | .=o+. | | .. =ooo | | .. oooo | | .. ..+o | +-----------------+

Macの/Users/XXXX/.ssh/にid_rsa（秘密鍵）とid_rsa.pub（公開鍵）の2つのファイルが作成されているか確認する。Macでは最初にドットのついたファイルやフォルダは不可視になるので、ターミナルで見えるようにする。

$ defaults write com.apple.finder AppleShowAllFiles true

その後にファインダーを再起動する。

$ killall Finder

/Users/XXXX/.ssh/が見えるようになっているので確認する。ドットファイルが見えたままだと気持ち悪いので、もう一度、ターミナルで見えないようにする。

$ defaults write com.apple.finder AppleShowAllFiles false

その後にまたファインダーを再起動する。

$ killall Finder

作成した公開鍵をVPSの作業用ユーザに転送する。

$ scp -P 10022 ~/.ssh/id_rsa.pub admin@IPアドレス:~/

作業用ユーザのパスワードを聞かれるので入力する。

admin@IPアドレス's password:

エラーが無ければ以下が表示されて公開鍵が作業用ユーザにコピーされる。

id_rsa.pub 　　　　　　　100% 433 0.4KB/s 00:00

作業用ユーザで公開鍵を登録するために、作業用ユーザでログインする。

$ ssh -p 10022 admin@IPアドレス

作業用ユーザのパスワードを聞かれるので入力する。

$ ssh -p 10022 admin@IPアドレス

パスワードを入力して以下の表示が出ればログインが成功している。

SAKURA Internet [Virtual Private Server SERVICE] [admin@tkx-xxx-xxxxx ~]$

転送しておいた公開鍵を.sshフォルダに移動する。デフォルトでは.sshフォルダが存在しないらしいのでまずはフォルダを作る。

$ mv id_rsa.pub .ssh/authorized_keys

作った.sshフォルダと.sshフォルダの中にあるauthorized_keysのパーミッションを変更する。公開鍵認証するとき、接続先のサーバで所有者とパーミッションが適切に設定されていないとエラーが出るっぽい。

$ chmod 700 .ssh $ chmod 600 .ssh/authorized_keys

その後、一度ログアウトし鍵認証でログインできるか確認する。

$ exit

間違ってなければ、鍵認証でログインしているためパスワードを聞かれなくなっている。

$ ssh -p 10022 admin@IPアドレス rootログインとパスワード認証を禁止する

鍵認証でログインすることには成功したけれど、まだrootログインとパスワード認証ができる状態なので、sshの設定を変更する。まずはsudoで設定ファイルを開く。

$ sudo vi /etc/ssh/sshd_config

作業用ユーザのパスワードを聞かれるので入力する。

[sudo] password for admin:

設定ファイルを開いたら、下の行を探してパスワード認証でログインできないように変更する。

PasswordAuthentication yes → PasswordAuthentication no

同じく設定ファイルで下の行を探してrootでログインできないように変更する。

#PermitRootLogin yes → PermitRootLogin no

そんでもってsshdを再起動して変更を反映する。

$ sudo service sshd restart

エラーが無ければ以下のように表示される。エラーが出たら先ほど取っておいたバックアップファイルのsshd_config.oldを復活させて、もう一度トライする。

# service sshd restart Stopping sshd: [ OK ] Starting sshd: [ OK ]

ここまで完了したら、新しくターミナルのウィンドウを開いてrootでログインできないこと、作業用ユーザでパスワードを聞かれずにログインできることを確認しておくと良いかもしれない。一応、ssh接続しているターミナルのウィンドウは閉じずに残しておかないと、rootでも作業用ユーザでもログインできなくなり、最初からやりなおしになるので注意。ここで僕は一度死んだ。

rootでログインしてみると、ログインできない。

$ ssh -p 10022 root@IPアドレス Permission denied (publickey,gssapi-keyex,gssapi-with-mic).

作業用ユーザでログインしてみると、パスワードを聞かれずにログインできる。

$ ssh -p 10022 admin@IPアドレス Last login: Wed Sep 9 18:09:21 2015 from IPアドレス.xxxx.ne.jp SAKURA Internet [Virtual Private Server SERVICE] [admin@tkx-xxx-xxxxx ~]$ Firewall (iptables) を設定する

Firewall (iptables) は必要な通信のみを許可することでセキュリティを高めることができるらしいので、やってみる。初期状態では設定ファイルが存在しないので新しくファイルを作成する。

$ sudo vi /etc/sysconfig/iptables

作業用ユーザのパスワードを聞かれるので入力する。

[sudo] password for admin:

何も書かれていないファイルが作成されるので、viの入力モードで以下の設定を入力する。

CentOSをサーバーとして活用するための基本的な設定 | さくらインターネット創業日記

http://tanaka.sakura.ad.jp/archives/001065.html

ちなみにこの実験をやってる当時は、上記のブログを書いてる中の人と話す機会があるとは思ってなかった。

*filter :INPUT ACCEPT [0:0] :FORWARD ACCEPT [0:0] :OUTPUT ACCEPT [0:0] :RH-Firewall-1-INPUT - [0:0] -A INPUT -j RH-Firewall-1-INPUT -A FORWARD -j RH-Firewall-1-INPUT -A RH-Firewall-1-INPUT -i lo -j ACCEPT -A RH-Firewall-1-INPUT -p icmp --icmp-type any -j ACCEPT -A RH-Firewall-1-INPUT -p 50 -j ACCEPT -A RH-Firewall-1-INPUT -p 51 -j ACCEPT -A RH-Firewall-1-INPUT -p udp --dport 5353 -d 224.0.0.251 -j ACCEPT -A RH-Firewall-1-INPUT -p udp -m udp --dport 631 -j ACCEPT -A RH-Firewall-1-INPUT -p tcp -m tcp --dport 631 -j ACCEPT -A RH-Firewall-1-INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT # SSH, HTTP -A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 10022 -j ACCEPT -A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT -A RH-Firewall-1-INPUT -j REJECT --reject-with icmp-host-prohibited COMMIT

iptablesを起動して設定を適用する。

$ sudo service iptables start

作業用ユーザのパスワードを聞かれるので入力する。

[sudo] password for admin:

エラーが無ければ以下のように表示される。エラーが出たら一度作成したファイルを削除して、もう一度トライする。

iptables: ファイアウォールルールを適用中: [ OK ]

設定したiptablesが正しく設定されているか確認する。

$ sudo iptables -L

以下の内容になっていれば問題ないっぽい。

Chain INPUT (policy ACCEPT) target prot opt source destination RH-Firewall-1-INPUT all -- anywhere anywhere Chain FORWARD (policy ACCEPT) target prot opt source destination RH-Firewall-1-INPUT all -- anywhere anywhere Chain OUTPUT (policy ACCEPT) target prot opt source destination Chain RH-Firewall-1-INPUT (2 references) target prot opt source destination ACCEPT all -- anywhere anywhere ACCEPT icmp -- anywhere anywhere icmp any ACCEPT esp -- anywhere anywhere ACCEPT ah -- anywhere anywhere ACCEPT udp -- anywhere 224.0.0.251 udp dpt:mdns ACCEPT udp -- anywhere anywhere udp dpt:ipp ACCEPT tcp -- anywhere anywhere tcp dpt:ipp ACCEPT all -- anywhere anywhere state RELATED,ESTABLISHED ACCEPT tcp -- anywhere anywhere state NEW tcp dpt:10022 ACCEPT tcp -- anywhere anywhere state NEW tcp dpt:http REJECT all -- anywhere anywhere reject-with icmp-host-prohibited

そんでOSの再起動時に自動的にiptablesが起動するようになっているか確認する。

$ chkconfig --list iptables

下のように3番がonになっていればOSの再起動時に自動的にiptablesが起動する。

iptables 0:off 1:off 2:on 3:on 4:on 5:on 6:off

もし3番がonでない場合は設定を変更する。

$ sudo chkconfig iptables on

今回はここまで、次回はApacheインストールして設定をするまで。

R.Tです。これまでまったく触ったことのないサーバについて、さくらのVPSを借りてみたので、MacからさくらのVPSでサーバを立ててWordpressをインストールしてCoda2でSSH鍵認証を使ってSFTPするということを実験してみたまとめです。今回は、さくらのVPSを契約してOSの再インストールを行い、起動するまで。

※2015年8月頃に実験したメモなので情報が古いかもしれないことと、デザイナーが実験してみただけなので本職のインフラエンジニアの方から見ると間違いだらけかもしれませんが、ご容赦くださいませ。

さくらのVPSに申し込む

公式サイトから申し込む、クレジットカード支払いで登録するとお試し2週間無料がついてくるので、クレジットカードで登録。申し込み完了後に「さくらのVPS 仮登録完了のお知らせ」という件名のメールがくる。

さくらのVPSを契約する

とりあえずお試し2週間無料に食いついたけど、あとでアレコレさせられると面倒なので速攻で契約することに。先ほど届いた「仮さくらのVPS 仮登録完了のお知らせ」メールの中に書かれている「VPSコントロールパネル ログイン情報」を確認してVPSのコントロールパネルへ移動する。

画面右上のユーザ名が書かれたプルダウンから「会員メニューへ移動」をクリックして会員メニューへ移動して「契約情報」ページの「契約サービスの確認」へと進み、契約中のサーバ一覧から契約したいサーバの手続きを選択する。

OSの再インストール

VPSコントロールパネルのサーバ一覧から設定したいサーバを選択して［OSインストール］から［標準OSインストール］を選択する。新しいrootパスワードを設定して「設定内容を確認する」をクリック、再インストール完了後はOSが起動する。

このとき、サーバが起動してもRPMの更新量が多いのかユーザーが使えるようになるのに結構な時間がかかるので気長に待つ。VNSコンソールで login を求められていれば使える。

今回はここまで、次回はMacからVPSにssh接続してiptablesの設定をするまで。

R.T

R.Tです。諸々の事情により紙巻きタバコからiQOSに変えて早1ヶ月たちました。今回は紙巻きタバコからiQOSに変えた時の体の変化を書いて行こうと思います。

そもそもiQOSってなんぞや

iQOSとは加熱式タバコのことで、タバコの葉を燃やさずに、iQOS本体に内蔵されているセラミックの加熱ブレードで、タバコの葉を温めて出た水蒸気とともに、ニコチンを摂取することができるタバコです。

iQOSはそもそも燃やしていないので、煙が出ません。なので紙巻きタバコであれば「ニコチン」「タール」「水蒸気」を吸っていますが、iQOSでは「ニコチン」「水蒸気」を吸っていることになります。

タールとは、粘り気のある黒から褐色の油状の液体で、見た目がもう体に入れて良いものではなく、約4,000種類以上の化合物が含まれ、内200種類ほどの物質は人体に悪影響を持つと言われています。

つまりiQOSなら、タバコの葉を燃やさないので煙が出ず、煙が出ないのでタールも体内に取り入れないので、紙巻きたばこの有害物質を9割カットしつつニコチンを摂取できる、という特徴があります。

iQOSに移行して1ヶ月の変化

最初に。ぼくは喫煙歴20年ほどで、最初はショートピースという紙巻きタバコを吸っていたのですが、2年ほど前に3ヶ月ほどタバコを吸わなかった時期があり、その後にメビウス モードスタイル 6 に変えました。

iQOSに移行して最初の1日目〜3日目

あまり違和感なくiQOSに完全移行できたのだが、iQOSは一本吸ったら、iQOS本体を5分ほどポケットチャージャーにしまって充電を待たなくてはならないため、必ず2本連続で吸っていた習慣が抜けず苦労しました。

最初に吸ったスティックはスムースレギュラーというスティック。これまでのメビウス モードスタイル 6に似ていると予想して選んだのですが、かなり微妙な味わいでした。そのままですが、タバコの葉を蒸した匂いが口の中に広がり嫌な感じ。

そこで、ミントというメンソール系のスティックを試してみたところ、なかなか良い。嫌な匂いもあまりないし、スッとした刺激で吸ってる感もありました。メンソールというスティックもあるのですが、刺激がきつ過ぎて僕には合わなかったです。

そういえば、iQOSは本体が重たいので、くわえたばこはできないですが、あまりくわえたばこをする習慣がなかったので特に気になりませんでした。ゲームをしながら吸ったり、車を運転しながら吸ったりする人は結構、気を使わなければいけないかもしれません。

iQOSに移行して最初の4日目〜6日目

体調に変化は特にありませんが、このあたりから、紙巻きたばこの匂いが嫌いになってきます。紙が燃えている匂いが半端なく臭くなってきます。喫煙所に行くと臭いのに、iQOSもたばこだから喫煙所に行かなくてはならないという謎の苦行を強いられます。

iQOSに移行して最初の7日目〜9日目

iQOS完全移行後の飲み会に行きました。普段の生活では問題にしても、もしかすると、飲み会の場では紙巻きたばこが恋しくなるかと思っていたのですが、飲んでいる最中も特に気になることなくiQOSでいけました。

ただ、iQOSのスティックが無くなったので周りから紙巻きたばこをもらって吸ってみたところ、すごい臭いです。紙の燃える匂いがすごくて、紙巻きたばこを吸いはじめたころを思い出します。よく我慢したな、昔の僕。

ちなみに、iQOSユーザーの声で、飲み会の翌日にあまり辛くならないという噂を聞いていたのですが、僕の場合は特に体調の変化はありませんでした。酔っ払って寝て起きた時に自分の髪がJPS臭くて不快だったのは覚えています。

iQOSに移行して最初の10日目〜12日目

1週間以上iQOSだけ吸っているということは、同じ期間タールを摂取していないということなのか、匂いや味に敏感になってきました。鼻の通りも心なしかよくなった気がしているし、頻繁に腫れていた扁桃腺も腫れなくなってきました。iQOS効果なのでしょうか。

iQOSに移行して最初の13日目〜15日目

この頃にはもうiQOSを使っている自分に違和感がなくなってきました。喫煙所に行く途中でスティックを装着、加熱されるまで時間があるので道すがら電源をON。吸い終わったらポケットチャージャーに戻し、スティックを灰皿に投げ入れる。クール。

iQOSに移行して最初の16日目〜18日目

クールなiQOSライフを過ごしていたら、iQOS本体の掃除中に加熱ブレードが折れてしまいました。悲しい。保証期間内だったのでiQOS公式サイトで交換の手配をしていたのですが、僕の手違いで1週間ほど待つことに。その間はなくなく紙巻きたばこを吸っていました。

ブログの記事にしようと体調をメモっていたのに、iQOS本体が届いてから新たに1日目としてはじめなくてはならず、正直すごくダルい。ダルイので1日目〜18日目までは上に戻ってお読みください、大して変わらないので。

iQOSに移行して2回目の1日目〜18日目

何事もなかったかのように書き進めますが。iQOSに移行すると痰がひどく出まくるようになります。なんでも紙巻きたばこを吸っていた時の気管支内に溜まっていた異物をどんどん排出していくので、痰が増えるということです。

iQOSに移行して2回目の19日目〜21日目

体への害が9割カットと謳っているだけあって、体調が良くなってきている気がします。寝起きはいつも悪いので特に変わりませんが、ごはんがおいしく感じるためか、食欲が出てきて前より食べるようになりました。あと口の中がネバネバしなくなりました。

iQOSに移行して2回目の22日目〜24日目

うーん、このあたりから面倒になって記録つけてないので書くことがない。

まとめ

体調の変化についてですが、確かに良い方向へ変わってきていると思います。禁煙できないけど健康も気になるという欲張りさんが妥協するには至上のアイテムだと思いました。

iQOSに移行しようか迷っている方は、ぜひ、完全移行をお勧めします。最初は物足りないですが、1週間、iQOSにしただけで結構変化が現れますので、まずはiQOSのみで1週間過ごして見てください。まぁ正直、自分の健康面でiQOSにしようと思っているのであれば、iQOSもたばこなので、健康になりたければ禁煙しろと思いますが、周りの家屋、ペットのためにiQOSにしようと思っているのであれば、正解なのではないかと思います。

R.T

こんにちわ、R.Tです。

Adobe Systems Incorporated が Google や 株式会社イワタ などと共同で開発したフォント。
「源ノ明朝」（げんのみんちょう）がデザイナー界隈で話題になっていますね。

このフォントはオープンソースで配布されていて、日本語と簡体中国語、繁体中国語、韓国語をカバーしたセリフ書体です。
なんと、7つのウェイトと6万5535の字形を収録していて、最初に噂を聞いたときは嘘だろーと思っていましたが、本当のようでした。
そして、友達がいないくせにデザイナー界隈で話題になっているという書き出しが嘘。主に自分の中で話題になっています。
そんな訳で、一人でいろいろな明朝体のフォントと比較して遊んでみます。

ダウンロードは Adobe の Typekit か GitHub から。ぼくは Adobe CC を契約しているので Typekit で同期。
GitHub ダウンロードする場合は以下のURLから使いたいウェイトを選んでダウンロード。

GitHub

ダウンロードできたら早速、文字を流し込んでみます。

流し込んで比較してみた結果、源ノ明朝はとても無味無臭でシンプルを突き詰めた感じの印象ですね、多分、漢字は小塚明朝をベースに、かなはイワタをベースにしているのだと思います。

小塚明朝はトメやハライなど、「明朝体としてのパーツが機会的・シンプル」すぎるのと「ひらがなが大きい」のであまり好きくないのですが、源ノ明朝では「ひらがな」が多少、小さいかな？ヒラギノ明朝より少し大きい感じですかね。

印刷物の本文で使うとメリハリがなくて読みにくそうですが、Webフォントとして利用されることを念頭に置くと「ひらがな」は大きく、明朝体としての「パーツはシンプル」であるが故に読みやすいのだろうと思います。そんな感じ。

R.T

R.Tです。 今回はIllustratorでパンフレットを作る流れをお見せします。

※世に出る予定のないパンフレットです

さて、いかがでしたでしょうか。 今回はこれでおしまいです。 R.T

R.Tです。 紙媒体にもウェブにも対応できるIllustratorの設定［環境設定編］の続きを紹介します。今までの使い勝手とかなり変わるかもしれませんが、1994年、Illustrator 5.5の時代から、Illustratorを使ってデザインを行ってきた先人たちが、より使いやすく、より作業を早くするための知恵が絞られた設定なので、ぜひ実践してみてください。

ワークスペース設定

Illustratorのワークスペースは初期設定のまま使っていると、よく使うパレットを毎回表示したり、あまり使わないパレットを非表示にしたと思ったらまた必要になったり、作業の効率を非常に損なってしまうことがあります。どこに何があるのかを整理して必要なモノがすぐ見つかるようにワークスペースを整えていきましょう。

上図が初期設定のワークスペースです、このままだとなにがどこに表示されてるのかわからないので、次のように変更していきます。

ツールパレットを開く

まずは右側のアイコン化されたツールパレットだと、なにがどのパレットかがわかりにくいので、ツールパレットを常に開いておくようにします。右上の［<<］マークをクリックして、下図のようにツールパレットを開いた状態にします。

必要なツールパレットを追加する

次に、紙媒体でもウェブでもよく使うツールパレットを表示します。ツールパレットの表示は［ウィンドウ］から行います。

ここから、よく使うツールパレットを選択して表示します。以下の表を参考に、よく使うツールパレットを表示してください。

パレット名 表示 説明 Color テーマ △ iPhoneアプリAdobe Color CCを使って、インスピレーションをかき立てるカラーの組み合わせを見つけたら、どこからでも楽しく簡単に取り込むことができます。対象のカラーにカメラを向けるだけで、Adobe Color CC が一連のカラーを瞬時に抽出します。 CSS プロパティ △ CSS プロパティでは、選択したオブジェクトのCSSコードを表示したり、コピーすることができます。また、一部またはすべての選択した Illustrator要素をCSSファイルに書き出すこともできます。なお、使用されているラスタライズ可能な画像を書き出したり、ブラウザー固有のCSSコードを生成することも可能です。 SVG インタクティビティ △ Illustrator要素にJavaScriptを埋め込み、ActionScriptのようなボタンアクションに近い動作を与える事ができます。具体的には、Illustrator内に配置されたボタンのデザインをクリックすることで、メッセージを表示するなどの機能を持ったIllustrator要素がつくれます。基本的にはActionScriptと変わりません。 アクション ◯ 単一または複数のファイルに対して実行される、メニューコマンド、パネルオプション、ツールアクションなどの自動処理です。例えば、画像のサイズを変更し、画像に効果を適用し、ファイルを目的の形式で保存するアクションを作成できます。Illustrator には、あらかじめ定義済みのアクションがインストールされています。 アピアランス △ アピアランスパネル（ウィンドウ／アピアランス）を使用して、オブジェクト、グループまたはレイヤーのアピアランス属性を表示し調整します。 塗りと線は重なり順に表示されます。パネルの一番上がアートワークの最前面、一番下が最背面にあたります。 効果は、アートワークに適用した順序で上から順に表示されます。 アートボード ◯ 複数のアートボードの管理、順番の変更などが行えます。この機能は本来、複数ページを支援する機能ではなく、名刺、封筒、便せんのように、判型が異なるなどの理由で別々のドキュメントとして管理していたものを1ドキュメント内で扱うことで、スウォッチやシンボルなどを管理しやすくするためのものです。 カラー ◯ カラースペクトル、個々のカラー値スライダー、カラー値テキストボックスを使用できます。塗りのカラーと線のカラーはカラーパネルで指定できます。また、カラーパネルメニューを使用して、現在の塗りのカラーまたは線のカラーの反転色や補色を作成したり、選択したカラーからスウォッチを作成したりできます。 カラーガイド ◯ 特定のベースカラーに基づいてカラーグループを作成するときに使用するハーモニールールを選択できます。色合いと陰影、暖色と寒色またはビビッドとソフトといったバリエーション効果を適用してカラーバリエーションを作成できます。カラーガイドパネルでは、カラーを編集 / オブジェクトを再配色ダイアログボックス内のカラーグループを開くことができます。 グラフィックスタイル × グラフィックスタイルとは、再利用可能なアピアランス属性のセットです。グラフィックスタイルを使用すると、オブジェクトのアピアランスをすばやく変更できます。例えば、オブジェクトの塗りと線のカラーの変更、透明度の変更、効果の適用を一度に行うことができます。グラフィックスタイルを使用して適用したすべての変更は、完全に元に戻すことができます。 シンボル × シンボルは、ドキュメントの中で何度でも使用できるアートオブジェクトです。例えば、花のシンボルを作成すると、作成したシンボルのインスタンス（コピー）をアートワークに何度でも追加できます。複雑なオブジェクトを何回も作成する必要はありません。各シンボルインスタンスは、シンボルパネルまたはシンボルライブラリ内のシンボルにリンクしています。 スウォッチ ◯ スウォッチパネル（ウィンドウ／スウォッチ）を使用して、ドキュメントのすべてのカラー、グラデーションおよびパターンを設定します。これらの項目に名前を付けてスウォッチパネルに保存しておくと、後から簡単に使用できます。選択したオブジェクトの塗りや線に、スウォッチパネルから適用したカラー、グラデーション、パターンまたは濃度が含まれている場合は、スウォッチパネル上で該当するスウォッチが強調表示されます。 ドキュメント情報 △ ドキュメント情報パネルを使用すると、ドキュメントの情報やオブジェクトの情報、また、グラフィックスタイル、特色、パターン、グラデーション、フォントおよび配置画像の名前と数を確認することができます。このパネルを表示するには、ウィンドウ／ドキュメント情報を選択します。 ナビゲーター × ナビゲーターパネル（ウィンドウ／ナビゲーター）では、サムネール表示を使用してアートワークの表示をすばやく変更できます。 ビューボックスと呼ばれるナビゲーターパネル内の枠線は、アートワークウィンドウの現在の画面範囲を示します。※非常にメモリを使うパネルなので、非表示を推奨します。 パスファインダー ◯ パスファインダーパネル（ウィンドウ／パスファインダー）を使用すると、オブジェクトを組み合わせて新しいシェイプを作成できます。 パターンオプション × パターンオプションパネルは、スウォッチに登録しておけるオブジェクトをタイル状に並べたり、重ねて並べたりすることの出来るパターンスウォッチを細かく操作できるパネルです。 ブラシ × ブラシにより、様々なパスのアピアランスを表現することができます。ブラシストロークを既存のパスに適用したり、ブラシツールを使用してパスを作成すると同時にブラシストロークを適用したりできます。Illustrator には、カリグラフィブラシ、散布ブラシ、アートブラシ、パターンブラシ、絵筆ブラシがあります。 ライブラリ △ Creative Cloud ライブラリは、デザインアセットのコレクションです。いくつかの種類のデザインアセットを Creative Cloud ライブラリに追加できます。Adobe Illustrator で使用可能なアセットの種類には、カラー、カラーテーマ、ブラシ、文字スタイル、グラフィックがあります。 リンク ◯ すべてのリンクアートワークや埋め込みアートワークを表示および管理するには、リンクパネルを使用します。 パネルにはアートワークの小さなサムネールが表示され、アートワークの状態がアイコンで示されます。 レイヤー ◯ レイヤーパネル（ウィンドウ／レイヤー）は、ドキュメント内のオブジェクトの一覧表示、整理、編集に使用します。初期設定では、新規ドキュメントはどれもレイヤーを 1 つ持ち、作成する各オブジェクトはそのレイヤーの下に一覧表示されます。ただし、新しいレイヤーを作成して、必要に応じてアイテムの配置を変えることができます。初期設定では、レイヤーパネルの各レイヤーに固有のカラー（最大で 9 色）が割り当てられます。カラーは、パネルのレイヤー名の横に表示されます。アートワークウィンドウでも、同じカラーが、選択したオブジェクトのバウンディングボックス、パス、アンカーポイントおよび中心点に表示されます。このカラーにより、レイヤーパネル上で、レイヤーと対応するオブジェクトをすばやく見つけることができます。また、このレイヤーカラーは、必要に応じて変更することもできます。レイヤーパネルの項目が別の項目を含む場合は、項目名の左側に三角形が表示されます。三角形をクリックすると、項目内容の表示・非表示が切り替わります。三角形が表示されていない場合、別の項目は含まれていません。 分割・統合プレビュー × 分割・統合プレビューを利用すれば、透明効果を利用した際にデータ上の各オブジェクトの状態をプレビュー画面で確認できます。 分版プレビュー × 分版プレビューパネルを使用して、色分解出力やオーバープリントをプレビューすることができます。 変形 △ 変形パネル（ウィンドウ／変形）には、選択したオブジェクトの位置、サイズおよび方向についての情報が表示されます。新たな値を入力して、選択したオブジェクトやそのパターンの塗りを修正することができます。変形の基準点を変更したり、オブジェクトの縦横比を固定することもできます。 変数 × 変数とデータセットを操作するには変数パネル（ウィンドウ／変数）を使用します。 変数パネルには、ドキュメント内にある各変数の種類と名前が表示されます。 変数がオブジェクトにバインドされているときは、バインドされたオブジェクトの名前が「オブジェクト」列に表示されます。このオブジェクト名は、レイヤーパネルに表示される名前と同じです。 属性 × オブジェクトごとにオーバープリントの有無を変更することができます。 情報 △ 情報パネル（ウィンドウ／情報）には、ポインターが指している領域または選択したオブジェクトに関する情報が表示されます。 整列 ◯ 整列パネル（ウィンドウ／整列）やコントロールパネルの整列オプションを使用して、選択したオブジェクトを指定した軸に沿って整列、または分布をさせることができます。オブジェクトは、基準点となる線やアンカーポイント、選択範囲、アートボードまたはキーオブジェクトに整列することができます。キーオブジェクトは、選択した複数のオブジェクトの中の、1 つの特定のオブジェクトです。 書式（Opentype） × OpenType パネル（ウィンドウ／書式／OpenType）では、OpenType フォントの異体字を使用する方法を指定します。 例えば、新規または既存のテキストで標準的な合字を使用するように指定できます。 書式（タブ） × タブパネル（ウィンドウ／書式／タブ）を使用すると、段落またはテキストオブジェクトにタブ位置を設定できます 書式（字型） × 字形パネル（書式／字形または、ウィンドウ／書式／字形）を使用すると、あるフォントの字形を表示したり、特定の字形をドキュメントに挿入したりできます。 書式（文字） ◯ 文字パネル（ウィンドウ／書式／文字）を使用してオプションを適用し、ドキュメント内の個々の文字に書式を設定することができます。 文字を選択するか、文字ツールをアクティブにすると、コントロールパネルのオプションを使用して文字の書式を設定することもできます。 書式（文字スタイル） × 文字スタイルパネルと段落スタイルパネルを使用して、文字スタイルと段落スタイルの作成、適用、管理を行います。 スタイルを適用するには、テキストを選択し、パネルで適用するスタイル名をクリックします。 テキストを選択しなかった場合、スタイルは新しく作成するテキストに適用されます。 書式（段落） ◯ コラムと段落の書式設定を変更するには、段落パネル（ウィンドウ／書式／段落）を使用します。 文字を選択するか、文字ツールをアクティブにすると、コントロールパネルのオプションを使用して段落の書式を設定することもできます。 書式（文字スタイル） × 文字スタイルパネルと段落スタイルパネルを使用して、文字スタイルと段落スタイルの作成、適用、管理を行います。 スタイルを適用するには、テキストを選択し、パネルで適用するスタイル名をクリックします。 テキストを選択しなかった場合、スタイルは新しく作成するテキストに適用されます。 画像トレース × 画像トレースパネルでは、トレースの値を設定して、画像をトレースすることができます。トレース前に設定を変更することも、トレース実行後の結果を見て設定内容を調整することも可能です。また、プリセットを使用したり、プリセットから変更を加えて使用したり、独自の設定をプリセットとして保存することもできます。「詳細」をクリックするとより細かい設定項目が表示されます。 線 ◯ 線パネル（ウィンドウ／線）を使用して、実線または破線のどちらを使用するか、破線の配列などの調整（破線の場合）、線幅、線の位置、角の比率、矢印、線幅プロファイル、および角の形状や線端の形状を指定します。 自動選択 × 自動選択パネルは、自動選択ツールを管理するパネルです。自動選択ツールは、ドキュメント内で、同じまたは類似した塗り属性（例えば、同じカラーやパターン）を持つすべてのオブジェクトを選択する場合に使用します。 透明 ◯ 透明パネル（ウィンドウ／透明）を使用して、オブジェクトの不透明度と描画モードを指定したり、不透明マスクを作成したり、あるオブジェクトが透明オブジェクトと重なり合っている部分を抜いたりすることができます。 ツールパレットを整頓する

必要なツールパレットを表示すると、下図のような状態になると思います。これだとまったく作業ができないので、次にツールパレットを整頓しましょう。

ここからは好みで構いませんが、紙媒体でもウェブでも使いやすいレイアウトの例が以下となります。

R.T

R.Tです。 紙媒体にもウェブにも対応できるAdobe Illustratorの設定内容をご紹介します。 今までの使い勝手とかなり変わるかもしれませんが、1994年、Illustrator 5.5の時代から、Illustratorを使ってデザインを行ってきた先人たちが、より使いやすく、より作業を早くするための知恵が絞られた設定なので、ぜひ実践してみてください。

まずは環境設定を行います。 Illustratorは2015年2月にリリースされた、Adobe Illustrator CC (19.2.0) が最新バージョンです。　※2016年1月6日現在。

Illustratorを立ち上げ［Ctrl(⌘)］＋［K］を押すと「環境設定」が開きます。ここから設定を変更していきます。

一般 まずは『キー入力』の値を変更しましょう、紙媒体で使う場合は0.5mm、ウェブなどで使う場合は1pxに設定します。『角度の制限』は初期値の0°のままで、『角丸の半径』は使用しないので初期値のままで問題ありませんが、気持ちが悪ので5mmに変更します。 次に『ドキュメントを開かないときに「開始」ワークスペースを表示する』のチェックを外しましょう。これは、AIファイルをダブルクリックしたときではなく、Illustratorをただ立ち上げたときにワークスペースを表示する機能ですが、アプリケーションの立ち上がりが遅くなる原因になります。 続いて『ダブルクリックで編集モード』のチェックを外しましょう。これは、グループ化されているオブジェクトをダブルクリックした場合に編集モードに切り替わります。グループ化されたオブジェクトの編集は グループ選択ツールで選択し編集が可能で、意図せず編集画面へ移動してしまうことが多いので外しておきます。

最後に『パターンも変形する』と『角を拡大・縮小』と『線幅と効果も拡大・縮小』にチェックを入れてください。これらは回転や拡大縮小をした際の塗りパターンやブラシ、線幅などをオブジェクトの変形と合わせて行わせる設定です。オブジェクトと同じ振る舞いをさせることで直感的に操作を行えます。

項目 入力値 説明 キー入力 0.5mm / 1px キー入力箇所に任意の数値を入力することで、オブジェクトをカーソルキーで、キー入力に入力した数値分移動させることができます。カーソルキーは、キーボード上にある、矢印が書き込まれたキー4つです。上下左右に移動させることができます。また、同時に［Shift］とカーソルキーを押すことで、キー入力の10倍を移動させることができます。 角度の制限 0° 角度の制限の箇所に任意の数値を入力することで、その入力した数値の角度で作業をすることができます。但し、設定前に作業した部分については角度の制限は反映されません。作業後に０度にしても、元にはもどりません。20°の角度で、テキストやオブジェクトが作成されます。 角丸の半径 5mm 角丸の半径の箇所に任意の数値を入力することで、 角丸長方形ツールで描くオブジェクトの角の半径を設定することができます。境設定で設定した「角丸の半径」は、「角丸長方形ツール」を 選択し、画面上でクリックすると出現する「角丸長方形ツール」の オプション設定の「角丸の半径」と連動しています。 自動追加 / 削除しない OFF ペンツールの環境の設定になります。チェックを外した場合、ペンツールをパスに近づけた際、アンカーポイントを追加できたり、削除できたりします。ペンツールのバリエーションで、アンカーポイントの追加ツールや アンカーポイントの削除ツールに切り替えて作業することも可能です。 十字カーソルを使う OFF ペンツールや鉛筆ツール、スポイトツールなどを使用する際にマウスポインタ（カーソル）が下記のように×で表示されたりターゲットマークで表示されたりします。 ツールヒント表示 ON ツールボックス、パレットの各項目にマウスポインタを合わせると その項目の名称をヒントという形で表示してくれる項目となります。ツールヒントを表示する場合、項目欄にチェックを、 非表示にする場合、項目欄のチェックを外してください。 アートワークのアンチエイリアス ON 境界線を滑らかに表示する機能になります。項目欄にチェックなしの場合は、エッジがギザギザになるので、 通常は項目欄にチェックを入れて作業しましょう。 同じ濃度を選択 OFF チェックを入れると［メニューバー］→［選択］→［共通項目］からの項目設定を選択した場合に、同じ特色設定のカラーの濃度のオブジェクトを選択してくれます。チェックがない場合、濃度の違いに関係なく同じ特色設定のカラーで作成されるオブジェクトを全て選択します。作業用途によって使い分けてください。 プレビュー境界を使用 OFF チェックを入れると［メニューバー］→［効果］→［スタライズ］→［ドロップシャドウ］の処理をした場合、属性値（今回場合は影の大きさ）を含む大きさで 情報パレットや変形パレットへ横、縦のサイズを表示させます。 以前のバージョンファイルを
開くときに『更新済み』を
ファイル名に追加 ON チェックを入れてると 自身が使用しているイラストレーターのバージョンより古いデータを 開くいた時に、ファイル名に〔更新済み〕と自動で追加されます。保存したときに〔更新済〕とファイル名に追加され、自身のイラストレーターのバージョンで保存されるので、元の古いバージョンとは別に保存ができます。 ダブルクリックで編集モード OFF 選択ツールでグループ化されているオブジェクトをダブルクリックした場合編集モードに切り替わります。選択ツールでグループ化された個々のオブジェクトを選択が可能となり、移動や変形などの編集ができるようになります。 日本式トンボを使用 ON トンボが二重線で作成されます。 この二重線によって裁ち落としの3mmが定義されます。これは必ずチェックを入れておいてください。 パターンも変形する ON チェックを入れるとパターンの塗りが適用されたオブジェクトに拡大、縮小、回転、リフレクト、シアーなどの処理をした場合パターンも一緒に変形します。個々の塗りのオブジェクトに、設定することで適用させることができます。 角を拡大・縮小 ON 不明 線幅と効果も拡大・縮小 ON チェックを入れると オブジェクトを拡大・縮小した時の線の太さの設定が 拡大・縮小率に連動し、変更されます。この設定はツールボックスの「拡大・縮小ツール」でも ON/OFFの設定が可能です。 選択範囲・アンカー表示 まずは『オブジェクトの選択範囲をパスに制限』にチェックを入れてください。オブジェクトを選択する際に形成するパス部分を選択することによりオブジェクトを選択することになります。前面にあるオブジェクトはそのままで、背面のオブジェクトを触ることがよくあるため、こちらで操作に慣れてください。 次に『Cmd＋クリックで背面のオブジェクトを選択』のチェックを外してください。Illustratorでは⌘を使うショートカットが多いため、誤って意図せず背面オブジェクトを触ることがあります。また、選択範囲をパスに制限し、この操作になれれば背面オブジェクトも簡単に触ることができます。

次に『次の角度より大きいときにコーナーウィジットを隠す』のチェックを外してください。これはオブジェクトを選択した際にコーナーの位置を動かせる機能ですが、基本的な操作では『ダイレクト選択ツール』で代用できるうえ、大体のケースで意図せず操作してしまい邪魔になります。また、この状態ではまだ、コーナーウィジットが表示されてしまいますので、環境設定を完了した後、［表示］→［コーナーウィジットを隠す］を選択してください。

最後に『ラバーハンドを有効にする対象』のチェックを『ペンツール』と『曲線ツール』ともに外してください。これはペンツールもしくは曲線ツールで描画するときにアンカーポイントと現在のマウスポインターの位置までの線がプレビュー表示される機能です。トレース時にしか使用することはありません。

選択範囲 項目 入力値 説明 許容値 3px 環境設定　選択範囲・アンカー表示　「選択範囲　許容値」 は1～8pxで設定します。 選択したいアンカーポイントとクリックの距離の設定となります。 クリック位置が違っても、この共用範囲ないであれば、 アンカーポイントを選択することができます。 オブジェクトの選択範囲を
パスに制限 ON チェックを入れると オブジェクトを選択する際に、それを形成するパスを選択することにより オブジェクトを選択することができます。 ポイントにスナップ 2px チェックを入れるとオブジェクトがアンカーポイントやガイドに吸着するようになります。右隣の項目に吸着する範囲をピクセルで設定することができます。初期設定は2pxです。 Cmd＋クリックで背面の
オブジェクトを選択 OFF Ctrl キー（Windows）または Command キー（Mac OS）を押しながらクリックすることで、他のオブジェクトの下にあるオブジェクトを選択できるようになります。 セグメントをドラックして
固定パスをリシェイプ OFF 曲線のセグメントはダイレクト選択ツールを使用してリシェイプできましたが、セグメントのハンドルは常に元の角度に固定されていました。チェックが外れた状態では、セグメントのリシェイプ時にハンドルの角度が変わるようになります。 アンカーポイントとハンドルの表示 項目 入力値 説明 アンカー 2番目 アンカーを表示する際の見た目の設定です。 ハンドル 2番目 ハンドル表示する際の見た目の設定です。 カーソルを合わせたときに
アンカーを強調表示 ON チェックを入れると ダイレクト選択ツールでアンカーポイントにカーソルを合わせたときに アンカーポイントを四角く強調して表示させます。 複数アンカーを選択時に
ハンドルを表示 OFF チェックを入れると グループ選択ツールやダイレクト選択ツールでアンカーポイントや 塗りのオブジェクトを選択場合、それぞれのハンドルを全て表示させます。 次の角度より大きいときに
コーナーウィジットを隠す OFF コーナーウィジェットは、ダイレクト選択ツールを使用してコーナーポイントを含むパスを選択しているときに有効になりますが、ここで角度によって消すか消さないかを設定できます。 ラバーハンドを
有効にする対象 OFF チェックを入れるとペンツールもしくは曲線ツールで描画するときにアンカーポイントと現在のマウスポインターの位置までの線がプレビュー表示されます。 テキスト まずは『言語オプション』の『東アジア言語のオプションを表示』のチェックを外してください。Illustrator CC では、さまざま言語のサポートが強化されており、さまざまな言語のテキストを使用してドキュメントを作成できますが、業務で利用することはありません。 次に『テキストオブジェクトの制限範囲をパスに制限』にチェックを入れてください。選択ツールでテキスト（テキストオブジェクト）を選択する場合、 テキストパス上をクリックすることで選択でます。オブジェクトの選択をパスに制限したのと同じく、こちらで操作に慣れてください。

最後に『フォントプレビュー』のチェックを外してください。これは［メニューバー］→［書式］→「フォント」や、フォントパネルに適用されます、フォントプレビューがONになっていると、フォントを選択する際に動作が重たくなるので外しておくことを推奨します。

項目 入力値 説明 サイズ / 行送り 2pt 任意の数値を入力します。 単位は、環境設定の単位・パフォーマンスで設定した単位に関係なく pt（ポイント）となります。 設定した数値は、キーボードのショートカットの動作で 1回に変更される「文字サイズ」と「行送り」の数値となります。 トラッキング 20 任意の数値を入力します。 単位は、環境設定の単位・パフォーマンスで設定した単位に関係なく em（イーエム）となります。 設定した数値は、キーボードのショートカットの動作で 1回に動く「トラッキング」の数値となります。 ベースラインシフト 2pt 意の数値を入力します。 単位は、環境設定の単位・パフォーマンスで設定した単位に関係なく pt（ポイント）となります。 設定した数値は、キーボードのショートカットの動作で 1回に動く「ベースライン」の数値となります。 東アジア言語の
オプションを表示 ON チェックを外すと文字パレットの「アキを挿入（左/上）」「アキを挿入（右/下）」 の2箇所と、 段落パレットの「禁則処理」と「文字組み」の2箇所がなくなります。 デザインには必要な機能となるので、この項目には必ずチェックを入れてください。 インド言語の
オプションを表示 OFF チェックを入れるとインド語でアキを挿入すること、禁則処理や文字組が行えるようになります。 テキストオブジェクトの
選択範囲をパスに制限 ON チェックをすると、 選択ツールでテキスト（テキストオブジェクト）を選択する場合、 テキストパス上をクリックすることで選択でます。 フォント名を英語表記 OFF チェックを入れると文字パレットに表示されるフォント名がすべて英語表記になります。 新規エリア内文字の
自動サイズ調整 OFF チェックを入れると新しく作ったテキストエリアの大きさと、文字の量に合わせて文字サイズを自動で調整してくれます。 最近使用したフォントの表示数 5 文字パレットでフォントを選択時に最近使ったフォントが表示されます。最大15個まで表示できますが、文字パレットの動作が重たくなるので適時調整してください。 フォントプレビュー OFF サイズを「小・中・大」を設定することができます。こちらは文字パレットでフォントを選択時や、メニューバーの書式の「フォント」に繁栄されます。設定によって、表示サイズが変わります。 見つからない字型の
保護を有効にする ON 字形の保護によって、欧文フォントを選択した後、非欧文テキスト（日本語やキリル文字など）を入力したときに不適切な判読できない文字が表示されることを防止することができます。 代替フォントの強調表示 ON テキスト要素で、ローカルコンピューターで使用できないフォントが使用されている場合、テキストはピンクで強調表示されます。 単位

紙媒体の場合は『一般』を「ミリメートル」、『線』を「ポイント」、『文字』を「ポイント」、『東アジア言語のオプション』を「ポイント」に設定してください。

紙ウェブの場合は『一般』を「ピクセル」、『線』を「ピクセル」、『文字』を「ピクセル」、『東アジア言語のオプション』を「ピクセル」に設定してください。

項目 入力値 説明 一般 紙媒体：ミリメートル
ウェブ：ピクセル オブジェクトの大きさや、移動の値の単位を変更することができます。 線 紙媒体：ポイント
ウェブ：ピクセル 線の太さの値の単位を変更することができます。 文字 紙媒体：ポイント
ウェブ：ピクセル 文字の大きさの値の単位を変更することができます。 東アジア言語のオプション 紙媒体：ポイント
ウェブ：ピクセル 文字のアキ処理の値の単位を変更することができます。 オブジェクトの識別方法 オブジェクト名 外部プログラムで判別するためのオブジェクトの識別方法を選択することができます。 ガイド・グリッド まずはガイドの『カラー』を「マゼンダ」に、『スタイル』を「点線」にしてください。カラーは好みで変更して構いませんが、経験上マゼンダが必要な時に見やすく、必要ない時に無視しやすい色です。また『スタイル』は実実線だと目立ちすぎるため、必ず「点線」を選択するようにしてください。

最後に紙媒体の場合はグリッドの『グリッド』を「25mm」に、『分割数』を「10」に、ウェブの場合はグリッドの『グリッド』を「25px」に、『分割数』を「10」に変更してください。また『ピクセルグリッドを表示 (600% ズーム以上)』のチェックを外してください。

ガイド 項目 入力値 説明 カラー マゼンダ ガイドのカラーを選択することができます。 スタイル 点線 ガイドのスタイルを選択することができます。 グリッド 項目 入力値 説明 カラー カスタム... グリッドのカラーを選択することができます。 スタイル 実線 グリッドのスタイルを選択することができます。 グリッド 25mm / 25px グリッドの幅を入力することができます。 分割数 10 グリッドの分割数を入力することができます。 背面にグリッドを表示 ON チェックを外すとオブジェクトの前面にグリッドが表示されます。 ピクセルグリッドを表示 OFF チェックすると600%以上ズームした際にピクセルグリッドが表示されます。 スマートガイド

まずは『整列ガイド』と『計測のヒント表示』、『間隔ガイド』のチェックを外して、『コンストラクションガイド』にチェックを入れて「60°」を選択してください。この設定でオブジェクト移動するたびに表示されるガイドがなくなりスムーズに作業をすることができます。

項目 入力値 説明 カラー マゼンダ スマートガイドのカラーを選択することができます。 整列ガイド OFF 幾何学的なオブジェクト、アートボードおよび裁ち落としの中心と端に沿って作成されるガイドラインを表示します。ガイドラインは、オブジェクトを移動したときや、ペンツールを使用して基本形状の描画などの操作を行ったとき、およびオブジェクトを変形したときに表示されます。 オブジェクトのハイライト表示 ON ポインターの下にあるオブジェクトがハイライト表示されます。ハイライト表示のカラーは、オブジェクトのレイヤーカラーと同じです。 変形ツール OFF 変形ツールを使用した拡大・縮小、回転、シアー時に情報が表示されます。 コンストラクションガイド ON 60° 新しいオブジェクトを描画するときにガイド線が表示されます。近くのオブジェクトのアンカーポイントから引くガイド線の角度を指定します。最大 6 個の角度を設定できます。選 択した「角度」ボックスに角度を入力し、角度ポップアップメニューから角度のセットを選択します。または、ポップアップメニューから角度のセットを選択して、ボックスの値の 1 つを変更して、角度のセットをカスタマイズします。プレビューに設定が反映されます。 アンカーとパスのヒント表示 ON パスが結合しており、かつアンカーポイントの中央にあるときに、情報を表示します。 計測のヒント表示 OFF 多くのツール（描画ツールや文字ツールなど）で、アンカーポイントにポインターを移動したときに、現在の位置に関する情報を表示します。オブジェクトを作成、選択、移動または変形するときに、オブジェクトの原点からの幅と高さ、または X と Y の移動距離が表示されます。描画ツールを使用しているときに Shift キーを押すと、開始位置が表示されます。 間隔ガイド OFF オブジェクトの移動時に、隣り合ったオブジェクトとの間隔を表示します。 スナップの許容値 4pt 別のオブジェクトにポインターがどれだけ近付くとスマートガイドが機能するかを、ポイント数で指定します。 GPUパフォーマンス

まず『GPUパフォーマンス』のチェックをを入れたまま『アニメーションズーム』のチェックを外してください。『アニメーションズーム』にチェックが付いたまま作業を行うと、グラフィックボードに非常に負担がかかるため、動作がもっさりします。必ず外してから作業しましょう。

項目 入力値 説明 GPUパフォーマンス ON GPU パフォーマンスの機能強化により、Illustrator のパン/ズーム/スクロールを 10倍の倍率（6,400% から 64,000% に増大）で10倍速まで加速にできます。 アニメーションズーム OFF チェックを入れると、これまで段階的だったズーム機能がドラッグによるプレビューをみながらの無断階拡縮になるので、拡大率を気にせず直感的な拡縮が可能になります。

以上で設定は完了です、最後に［OK］をクリックして、設定を保存してください。 「スライス」、「ハイフネーション」、「プラグイン・仮想記憶ディスク」、「ユーザーインターフェース」、「ファイル管理・クリップボード」、「ブラックのアピアランス」については特に変更する箇所はありません。

次回のブログは、ワークスペース設定についてご紹介する予定です。

R.T

R.T です。 月に1回～3回ほど東京に出張することがあるのですが、その際、行きのJRの中で購読しているフィードをオフラインでも読める、後で読むサービスのpocketに保存して飛行機の中で読み漁っています。 今回はぼくの登録しているフィードを公開しようと思います。

PHOTOSHOP VIP http://photoshopvip.net/ アイコンやフォント、Photoshopのブラシ、Illustratorのチュートリアルなど、コーディング前の素材関連の記事が豊富。

PHPSPOT開発日誌 http://phpspot.org/blog/ PHPやJavaScriptなどのプログラム系からPhotoshopやアイコン素材などWebデザイナーに嬉しいさまざまな記事が豊富。

コリス http://coliss.com/ 調査・設計から運用・更新まで、サイト設計全般に必要な技術やデザインについての記事や、素材なども紹介されている。

かちびと.net http://kachibito.net/ WordpressやjQuery、制作の役に立つWebサービス、アイデアなど、デザイン以外でデザイナーの役に立つ記事が豊富。

バズ部 http://bazubu.com/ バスを起こすノウハウを紹介しているサイトで、Wordpressや記事のライティング、SEOからマーケティングなどの記事が豊富。

ちなみにぼくの使っているリーダーアプリは「Reeder 2」

そして連携して使っている後で読むサービスアプリは「Pocket」

です、どちらも使いやすいのでオススメです。

R.T

R.T です。 恒例の、すでにまとめられているブログ記事をまとめるという暴挙。 Webデザイナーの人に役立つかもしれない、ぼくのブラウザ履歴を大公開。

ランディングページ集「LAPA -Landing Pages Collection」 サービスやプロダクツ、アプリなどのランディングページがまとめられたサイト。 主に海外のサービスが掲載されていて参考になります。 ランディングページのデザイン依頼があった際は参考にしてください。 http://lapa.ninja/

シンプルなラインアイコン「Linea: Free Outline Iconset」 いろいろなテーマ別のラインアイコンが730個収録された太っ腹アイコンセット。 シンプルなのでどんなデザインでも使えます。便利。 でも細かいとこが一緒だと同じウェブサイトに見えるので控えめに。 http://www.linea.io/

サイズ展開が魅力的なアイコンセット「FREE RESPONSIVE ICONS」 サイズによって線が簡略化されカラーバリエーションもある珍しいアイコンセット。 24種類のバリエーション別に192個あります。 大きめにアイコンを使いたいデザインに重宝しそう。 http://iconsresponsive.com/free-icons/

写真素材配布サイトの横断検索「Pexels」 CC0ライセンスの写真素材を配付しているサイトを横断検索してくれるサイト。 コンテンツに個別に使うとデザインが負けそうなほど、 クールな写真やアーティスティックな写真が多いのでメインビジュアルに困ったら。 http://www.pexels.com/

背景に使える動画配付サイト「Coverr」 最近のウェブサイトでよく見る背景に流れる動画をパブドメで配付しているサイト。 毎週月曜日に動画を7つ配布してくれます。 ぼくも使ってみたいけどなかなか機会がない。残念。 http://www.coverr.co/

いろんなデバイスの情報一覧「Device Metrics」 最近なにかとオーダーのあるレスポンシブやスマホアプリのデザインにお役立ち。 Googleの公式情報という言葉に安心感を覚えるあたり依存している。 Google万歳。でもAndoroidは使ったことない。iOS最高。 http://www.google.com/design/tool/devices/

HTMLチェック補助ツール「HTML Coding Checker」 みんな苦労するチェックを楽にしてくれるGoogle Chrome のエクステンション。 リンク先の生存チェック、META情報の一覧化、スタイル名の一覧化、 画像ファイルの一覧化、リンク領域のハイライト、要素のハイライトを実現。 チェック以外にもSEO調査とかにも使えるかも。 https://chrome.google.com/webstore/detail/html-coding-checker%EF%BC%88%CE%B2%E7%89%88%EF%BC%89/pjpdbehajmbnicjjdfclnenlcnnmgbog?hl=ja

jQueryを使いたくない時のための「Plain JavaScript」 jQueryのこれをJavascriptで書きたい時に使える逆引きリファレンスサイト。 ウェブサイトをできるだけシンプルに軽くしたいときに、たまに使います。 でもだいたいプログラマーさんに依頼します。 https://plainjs.com/javascript/

以上っす。 R.T

R.T です。 前回のブラウザ履歴まとめが好評だったので、 今回も R.T にこのブログがまわってくるまでの3ヶ月間、 良く見ていた Web 制作に関わるサイトをブラウザの履歴から抜き出しました。 ＜SEO関連＞ マルチデバイスにも対応可能なヒートマップやリアルタイムアクセス解析を導入出来るWordPressプラグイン・「Ptengine Lite for WordPress」｜kachibito.net ＜Web制作全般＞ Chromeのデベロッパーツールが見やすくなる！デベロッパーツールのUIをダーク系に変更する方法｜coliss.com スマホ・タブレットのさまざまなデバイスの表示チェックに対応！レスポンシブの確認ができる無料オンラインツール -.resizr｜coliss.com 2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ｜coliss.com つかえる。チェックツールまとめ｜c-brains.jp Photoshopってすごい！作業効率をアップする拡張機能・プラグインまとめ｜photoshopvip.net ブログの記事内画像を楽してRetinaディスプレイに対応させる方法｜stocker.jp ＜デザイン関連＞ さまざまなデザインシーンに対応できる PhotoshopフリーPSD素材「27 New Photoshop Free PSD Files for UI Design」｜design-develop.net クリックしたくなるフリーweb用ボタン素材「12 Fresh High Quality Free Web Button Files」｜design-develop.net クリエイティブなファビコンを設置しよう｜Webクリエイターボックス フラットデザイン向けのボタンを手軽に作成出来るOSS・「2.5dBUTTON」｜kachibito.net ＜フォント・タイポグラフィ＞ 厳選！最近公開された日本語のフリーフォント15種類のまとめ｜ 新しく公開されたフリーデザインフォント15種「15 Latest Free Fonts for Designers」｜design-develop.net ＜写真・アイコン＞ ちょっと面白い太っ腹ライセンス、商用無料クレジット表記無しで利用できるフラットな色使いがかわいいアイコン素材 -Icons8｜coliss.com 商用利用無料の動画配布サイト「Pexels Videos」｜phpspot.org まるでキャラクターのような可愛らしさが特徴のアイコンセット「Pamoke: Free Icon Set」｜design-develop.net 美しい色合いが魅力的なポリゴン柄フリーテクスチャまとめ「35 High-Res Low Poly Background Textures For Free」｜design-develop.net デザイナーが選ぶデザイナーのための無料写真素材サイト10選｜liginc.co.jp SVG製の国旗を手軽に表示出来る・「SassyFlags」｜kachibito.net ＜html, css＞ [CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ｜coliss.com CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説｜ reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css｜coliss.com ＜Javascript, jQuery＞ [JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js｜coliss.com パスワードの安全性チェックをサクッと実装できる「jquerySimplePassMeter」｜phpspot.org サイト内テキストの絵文字、動画、PDF、ソースコード、Tweet等の自動変換が行える「Embed.js」｜phpspot.org フラットデザインがいい感じの円形ローダー実装jQueryプラグイン「CircularLoader.js」｜phpspot.org 軽量＆多機能なアニメーションエンジン「jQueryTween」｜phpspot.org 確認ダイアログ（window.confirm）の実装をクロスブラウザで統一できる「jquery.confirm」｜phpspot.org スクロールに応じて奥行きのある3Dアニメーション表現ができる「Space.js」｜phpspot.org 背景色をなめらかに変更できるjQueryプラグイン「Spectrum」｜phpspot.org 高解像度のディスプレイ用に2-4倍迄の画像に置き換えられる「jQuery.imgx」｜phpspot.org ネイティブアプリに近い動作のサイドメニューWeb実装「Slideout.js」｜phpspot.org 今っぽくなった！トレンドをおさえたjQuery プラグインまとめ｜commte.net ＜その他＞ 「正規表現と先頭と末尾」 〜マンガでプログラミング用語解説｜codezine.jp 以上でした、みなさんのお役に立てば幸いです。 R.T

R.T です。今回は R.T にこのブログがまわってくるまでの3ヶ月間、 良く見ていた Web 制作に関わるサイトをブラウザの履歴から抜き出してみました。 ＜SEO関連＞ Google Analyticsのコードがコピーされても動かないようにする方法 | Stocker.jp / diary ＜Web制作全般＞ レスポンシブWebデザインのデザインテスターChromeエクステンション*ホームページを作る人のネタ帳 インタラクションデザインの導入例をアニメーションで確認出来るWebデザインギャラリー・「Hover States」 - かちびと.net Gitを使ったバージョン管理を動画で学べる学習サイト・「Learn Git」 - かちびと.net Webディレクターがサイト公開前にチェックしたい11のこと！ 【Web担】WEBサイトで使えるかもしれない心理学（Centre-Stage Effect） ＜デザイン関連＞ 最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles Photoshopがもっと便利になるすごい機能拡張・プラグインのまとめ 効果的なバナー広告における絶対的な5つ基本*ホームページを作る人のネタ帳 Bootstrapのひな形を手軽に作成出来る・「lollytin」 - かちびと.net モバイルアプリの為のUIフレームワーク・「Touchstone.js」 - かちびと.net よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders ＜フォント・タイポグラフィ＞ 2015年用、日本語のフリーフォント164種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 デザイナーがチェックしておきたい デザインフリーフォント17選「17 New Free Fonts For Designers」 | DesignDevelop フォントの選び方の参考になる！世界で活躍している有名デザイナーたちが選んだフォントのランキング -Typographer's Typefaces 【完全版】Ligature Symbols フォントセットの自作方法 - くらげだらけ ＜写真・アイコン＞ さまざまなパターンを好みのタイプに仕上げられるジェネレーターまとめ「Free Pattern Generators: Here’s 8 Tools You Want To Bookmark」 | DesignDevelop ブックマークしておきたい、いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ CC0で著作権の制限無しで使える！Webページの背景などにいい素敵な動画がダウンロードできる -Distill ＜html & css, Javascript＞ 2014年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2014 CSSのみで作られたシンプルなアイコンセット・「ICONO」 - かちびと.net シンプルでミニマル設計なRWD対応の軽量CSSフレームワーク・「MNML」 - かちびと.net [JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems 様々なJavaScriptライブラリやプラグインの使い方をまとめている・「Js Tutorial」 - かちびと.net 以上でした、カテゴリに分けてみましたが、 この3ヶ月間で行った仕事の片鱗がちらほら見えますね。 みなさんのお役に立つものがあるかもしれないのでここで共有します。 R.T