【wordpress】コメントスパム対策!Akismetの設定方法

こんにちは。デザイナーの佐竹です。
さて、みなさんは「コメントスパム」が自社サイトに沢山入ってきて、困った経験はありませんか?
ある程度べージビュー数が増えてくると、かならずやってくるのが「コメントスパム」です。
コメントスパムを発信している人をスパマーといい、スパマーはプログラムを組んで自動的に大量のスパムを送って攻撃してきます。

今回は、Wordpressサイトでコメントスパムを自動的に判別して除外してくれるプラグイン「Akismet」の設定方法をご紹介します。

「Akismet」は、wordpressをインストールすると初めからプラグインとして内包されています。プラグイン一覧からAkismetを「有効化」します。

「Akismetアカウントを有効化」ボタンが表示されるのでクリックし、次の画面の【APIキーを取得】をクリックします。

「Don’t Let Comment Spam Hurt Your SEO」と出ますので、一番下の「Get Started」をクリックします。

WordPress.com に登録

wordpress.comの新規登録、もしくはログイン画面が表示されますので、登録かログインをします。

新規登録の場合、「username」 は、最短4文字の半角英数字のみ。パスワードは、6文字以上で半角英数字と記号(英字の大文字小文字の区別あり)です。

登録したEメールアドレス宛にメールが届くので、「Activate Account」をクリックして、「activated!」と表示されたら登録完了です。

API キーを取得

続いてAPIキーの取得に進めるため、「Sign in to Akismet」をクリックしてログインします。

無料版の場合は、Personal の「Add Personal Subscription」をクリックします。

ポップアップ画面が表示されるので、金額が書かれたバーを一番左までスライドして0円の状態にし、「Create Subscription」をクリックします。「Thanks!」と表示されたらAPIキー取得完了です。


取得した API キーを有効にする

次の画面「Account Overview」にAPIキーが表示されています。
コピーしてWPプラグインの「APIキーを入力する」という欄に貼り付け「APIキーを使って接続する」をクリックします。
画面遷移して「Akismetは現在サイトをスパムから保護しています」と表示されれば、プラグインの有効化が完了です。

【共用サーバ・専用サーバ・VPS】の違いを知ろう!

こんにちは。
デザイナーの佐竹です。

みなさんはVPSという言葉を知っていますか?
VPSとは「Virtual Priavate Server」の略で、日本語でいうと「仮想専用サーバ」という意味になります。

一般的なレンタルサーバは、「共用サーバ」であることが多いです。
そのほかに「専用サーバ」というものもあります。
今回は、この違いを簡単にご紹介したいと思います。

①共用サーバとは

一つのサーバを複数のユーザーで共有して使用します。その特徴は、
1、利用料が安い 2、簡単に利用できる 3、簡単インストールなどの機能がある 4、他のユーザーの影響を受ける

中小規模のサイトはほとんどこの共用サーバで運営されています。
コントロールパネルなどで簡単にドメインやEメールを管理できます。

②専用サーバとは

物理的にサーバを専有するサービスです。
導入が高額で、サーバの知識が必要になりますが、サーバ1台をまるごと利用できてすべて自由に設定が可能になります。

③VPSとは

VPSは、1台のサーバ内に「仮想的に」複数のサーバを構築します。
ユーザーごとにゲストOSが用意されていて、それぞれがお互いに干渉しないような作りになっています。そのため、他のユーザーの利用によって障害や負荷の影響を受けにくくなります。OSの設定が可能なので、より高度で自由度の高い設定をユーザーごとに出来るようになります。サーバ再度アプリケーションを開発するのにも適しています。

また、物理的にサーバを専有しているわけではないので、その分コストは抑えられます。
ただ、あくまで「仮想」なので、他のユーザーの利用状況によっては多少レスポンスに影響が出る可能性があります。

VPSは、共用サーバと専用サーバの良いとこどりのようなサービスですね。
それぞれのメリット、デメリットを理解して、自分のサイトに一番適したサービスを選んでいきたいですね!!

【初心者向け!】Flexboxレイアウトをおぼえよう!!《前半》

こんにちは。デザイナーの佐竹です。

今回はレイアウトの新しい技術である、Flexboxについてご紹介します。
Flexboxとは、「Flexible Box Layout Module」のことをいいます。
少し前まで、仕様変更が多かったり、実用は難しかったのですが、最近では安心して使える機能になってきています。
BootstrapやIonic2など、様々なフレームワークのUIで採用されています。

css3のレイアウト機能で、以前はfloatをつかって実現していたレイアウトを、より簡潔に記述できるようになっています。
気を付けなければならない点としては、ブラウザーごとに適切な設定が必要で、現状ではIE10以前のバーションには非対応なため、主要ブラウザーはカバーしているものの、シェアの低いブラウザーなどには対応できません。

ボックス要素を横並びにしたり、左右よせ、中央寄せなど、様々なレイアウトを簡素なコードで実現できます。
具体的には「Flex コンテナ」と、「Flexアイテム」という2つの要素でレイアウトしていきます。

Flexコンテナとは

Flexコンテナとは、Flexアイテムの親要素です。このFlexコンテナの中にFlexアイテムを配置することでレイアウトを構築していきます。

Flexアイテムとは

Flexアイテムとは、Flexコンテナの中に配置される要素で、Flexコンテナの子要素です。Flexアイテムは、Flexコンテナの中で主軸と交差軸という2つの軸を基に配置します。

次回は、具体的な使用方法をご紹介します!

【初心者向け!構造化マークアップ】データハイライターについて知ろう!

こんにちは。デザイナーの佐竹です。
今回は、「構造化マークアップ」のデータハイライターについて簡単にまとめてみたいと思います。

まず、以前「ボキャブラリーについて知ろう!」の回でも一度書きましたが、「構造化マークアップ」とは何かと言いますと、

「検索エンジンが意味をより正確に理解できるようになる為の、コンテンツのマークアップ方法」です。
簡単に言うとGoogleがコンテンツを理解しやすくなるための記述ということです。
ただし、現時点では検索順位に直接的な影響はないそうです。

さて、それではデータハイライターについてご紹介します。
まず、サーチコンソールのヘルプにはデータハイライターについてこのように書かれています。

「データ ハイライターはウェブマスター ツールの 1 つで、ウェブサイトの構造化データのパターンを Google に伝えるものです。データ ハイライターを使用すると、マウスで簡単にサイトのデータ フィールドをタグ付けできます。データをタグ付けすると、Google がそのデータをより効果的に、また新しい方法で、検索結果や Google ナレッジグラフなどの他の Google サービスに表示できるようになります。」

ウェブサイトの構造化データパターンというのは、例えばレビューの評価について表示された星マーク、大きく表示された日付は、イベントの開催日である、などの「意味をもつデータ」を指します。

それを、Googleに正確にどんな意味があるのか、プログラムで伝えるものがデータハイライターです。

基本的には構造化マークアップというのはSchema.orgというボキャブラリーで定義するのですが、Schema.orgを使えない状況でも利用できるのが、今回のデータハイライターです。

それでは、早速データハイライターの設定手順をご紹介します。

サーチコンソールの「検索での見え方」-「データハイライター」を選択

サーチコンソールの左サイドメニューにある「データハイライター」を選択します。

「ハイライト表示を開始」をクリック

動画の右下にある「ハイライト表示を開始」ボタンをクリックします。

URL、情報タイプを選択

「サイトの代表的なページのURLを入力」というボックスが表示されますので、サイトURLと情報タイプを入力、選択します。
この情報は後程変更することも可能です。

設定は以上になります。
とても簡単ですね!!
ソースにマークアップを入れられない場合でも、この方法でGoogleにサイトの情報を知らせることが可能になります。一度、お試しください!!

【初心者向け!】ユーザーエージェントについて知ろう!

こんにちは。デザイナーの佐竹です。
今回は、「ユーザーエージェント」について簡単にご紹介します!
名前だけ聞くと、なんだかかっこよい「ユーザーエージェント」(UserAgent、UA)。

簡単に一言でいうと、「通信時に利用する、ソフトウェア、ハードウェアを識別する文字列」となります。

識別するための文字列が必要になる理由は、「アクセス解析」「レンダリングの最適化」などに活用するためです。
クライアント側からアクセスする際にサーバへ送信されます。

文字列は、例えばこんな感じです。(Windows10のChromeからアクセスした場合)

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36

この文字列からは、アプリケーション名、オペレーティングシステム、バージョン情報、携帯の機種名、ブラウザ名などが分かります。

検索エンジンのロボットも、それぞれユーザーエージェントを持っています。
アクセス解析の際に、クローラーの訪問数をカウントしないために下記のようなアクセスを除外していきます。

Google:
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Yahoo!:
Mozilla/5.0 (compatible; Yahoo! Slurp/3.0; http://help.yahoo.com/help/us/ysearch/slurp)
MSN:
msnbot/2.0b (+http://search.msn.com/msnbot.htm)

自分のユーザーエージェントを見てみたいという方にお勧めなのが「UserAgent調べる君」です。

アクセスしただけで、「あなたのユーザーエージェント」と言うコメント共に、自分のユーザーエージェントが表示されます。
興味のある方は一度ご確認ください!

AI(人工知能)アプリについて知ろう!!

こんにちは。デザイナーの佐竹です。

みなさんは「AI(人工知能)」に興味をお持ちでしょうか。
AIとは、ざっくり言うと「人間の使う自然言語を理解したり、論理的な推論を行ったり、経験から学習したりするコンピュータプログラム」です(厳密な定義は、まだ無いようです)。
今多くの大企業が、AIの開発に多額の投資をしているのだそうですよ。
なんとなく、自分とは関係のない世界の話だと思っていたのですが、近年AIアプリというものが出回っているようなので、興味本位でAIアプリというものを使い始めました。
今回は、ブログ関連のAIアプリを1つご紹介しようと思います。

StockMark 積ん読ブックマークを人工知能で再活用

「StockMark」というアプリをご存知でしょうか。はてなブックマークなどの記事をAIを使って管理してくれるアプリです。
「積ん読ブックマークを人工知能で再活用」というサブタイトルが付いています。
Pocket、Evernote、はてなブックマークの保存した記事を管理して、オススメ記事をピックアップしてくれます。

主な機能は・・・

・Twitterで「いいね」をすると、自動的に記事が連携される
・自動要約機能があり、短時間で記事のポイントをつかめる
・記事を自動的にカテゴリー分けしてくれる
・3つのタイミングで記事をおすすめしてくれる

などです。読みたい記事が溜まってしまっている場合、とても便利ですね。

Pocket、Evernote、はてなブックマークを普段よく使っていて、未読の記事をためている人、好みの記事をおすすめして欲しい人、Web上の記事を読むのが好きな人には、とてもおすすめのアプリです。
好みを分析して、レポートを作ってくれるらしいです。人工知能、恐るべし!と思ってしまいますね・・・。

このアプリのほかにも、AIアプリは多く出ていて
・人工知能と戦うゲーム(ユーザーの防御パターンを学習してどんどん強くなる)
・コミュニケーション型アプリ(会話をすることで、ユーザーの性格、思考、健康状態を分析してサポートするものや、喜怒哀楽のあるリアルなやりとりができるもの)
・AI搭載カメラアプリ(一度シャッターを押すとベストショットを自動作成してくれる)
・英会話アプリ(AI講師が発音やリスニングを診断して教えてくれる)
・洋服コーディネートアプリ(手持ちの洋服を好みのスタイリングでコーディネートしてくれる)

などなど、多くのアプリが開発されています。
個人的には洋服コーディネートアプリなど、とても興味があります。使ってみてAIを身近に感じてみたいと思います!!

【初心者向け!】「OGP」について知ろう!

こんにちは。デザイナーの佐竹です。
今回は「OGP」について、簡単にご紹介します。

OGPは「Open Graph Protocol(オープン・グラフ・プロトコル)」の略です。
SNS上でウェブページの内容を伝えるためのプロトコルのことで、「こういうサイトです」と明言するために必要な仕様です。

OGPをタグ内に記述することで、タイトル、説明文、アイキャッチ画像などを正しく表示することができるようになります。 設定していないと、投稿がシェアされたときなどに、アイキャッチ画像が表示されなかったり、URLが適切に表示されなかったりする可能性があります。 OGPがきちんと設定されている投稿は、友達が「いいね」をすると友達のニュースフィールドに適切な情報が掲載されます。多くの人に情報を拡散できる可能性があります。

続いて、記述方法をご紹介します。

まず初めに宣言をします。

 <head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”>

続いて、タグ内に設定内容を記述します。

<meta property=”og:locale” content=”ja_JP”>

<meta property=”og:site_name” content=”サイト名”>

<meta property=”og:title” content=”コンテンツのタイトル”>

<meta property=”og:type” content=”コンテンツの種類”>

<meta property=”og:url” content=”リンク元のURL”>

<meta property=”og:image” content=”SNS上に表示されるアイキャッチ画像URL”>

<meta property=”og:description” content=”コンテンツの概要。SNS上でシェアされます。”>

【初心者向け!】robots.txtについて知ろう!

こんにちは。
デザイナーの佐竹です。

今回は「robots.txt」というファイルについて簡単にご紹介します。
検索ロボット(クローラー)への命令文を記述できる「robots.txt」は、クロール最適化には欠かせないアイテムです。
では、早速どのようなものかまとめていきたいと思います。

robots.txtとは

検索エンジンのクローラー(ロボット)のWEBページのへのアクセスを制限するためのファイルで、ロボットに向けた命令文(アクセスを許可/許可しない)を記述します。自分のサイト内の特定のディレクトリ以下を検索対象から外すことができます。

ドメインごとにクローラーが訪問するページ数には限りがあるのだそうです!!
そのため、限られたページ数の中で、重要なページに多くクロールしてもらう必要があります。
つまり、クローラーが限られた訪問数を浪費せず、重要なページにより多く訪問してもらうことがrobots.txtの役割です。

robots.txtの記述方法

まず初めに、ファイル名は「robots.txt」とします。
「Robots.txt」や「robot.txt」は間違いです。気を付けましょう。
ファイルの置き場所はルート(サイトの一番上の階層)に置きます。

続いて、記述方法をご紹介します。

User-agent: *   (←すべてのロボットに対して)
Disallow:/wp-admin/  (←WordPressのログインページURLをアクセス制御)
Disallow:/text/  (←テストサイトのURLをアクセス制御)

上記の場合はテストフォルダ、ログイン画面のページをクローラーが巡回しないよう指定しています。

Sitemap:http://www.*********/sitemap.xml

こちらの例は、XMLサイトマップのURLを指定してクローラーの巡回を促しています。

また、注意点としては、robots.txtで指定したファイルは、インデックスされないというだけでアクセスできないわけではありません。
特定の人以外には見せたくないページの場合は、robots.txtの設定プラス、ベーシック認証の設定をしましょう。

ちなみに、WordPressではrobots.txtもベーシック認証もプラグインで簡単に設定可能です。

【初心者向け!!】webブラウザのCookieってこんなもの!

みなさんは「Cookie」という言葉はご存知でしょうか。クッキーと読みます。
もちろん、あのサクサクしたクッキーではありません。web用語のクッキーです。
ブラウザの履歴まわりを気にされたことがある方は聞いたことがあるのではないでしょうか。
実はこのCookie、皆さんがサイトを閲覧した情報を裏でこっそり保存したり、サーバに送信したりしています。
今回は、このCookieについて簡単にどのような仕組みになっているかご紹介します。

Cookieとは、「 ユーザー情報をパソコンに一時的に記録したり参照したりする機能 」です。
ものすごく簡単にCookieの仕組みを書くと下記のような感じです。

1、まず初めにパソコンからWebサイトにアクセスします。
  そうすると、サーバからは「Set-Cookie」という情報を書いたクッキーが送られてきます。

↓↓↓

2、クッキーを受け取ったパソコンは、HDにクッキー情報を書き込んで保管します。

↓↓↓

3、次に、同じサイトにアクセスしたとき、ブラウザソフトが以前保管したデータを「Cookie:」というヘッダーを付けてサイトに送信します。

↓↓↓

4、サイトは以前送ったCookieが戻ってきたことを確認し、ページに反映させます。

よく使われる例としては、Amazonなどのショッピングサイトがあります。
一度サイトを閉じて、また開いたときに、ログインなどしていないのにカートに商品が残っていたり、閲覧履歴が表示されたりするのはCookieを利用して情報を読み取っています。
一度入力したID、パスワードが次回からブラウザの入力欄に表示されるのも、Cookieによるものです。

webマーケティングの分野ではCookieをアクセス解析に利用します。
webサイトを訪問した人が、初めてなのか2回目以降なのか。最後に訪問した日時、訪問回数などなど・・・。
様々な情報をCookieから得ています。
このように、利用者の履歴を取得できることを「プライバシーの侵害」と思う人もいるため、ある程度クッキーの設定をブラウザでコントロールできるようになっていて、ユーザー側で削除することも可能です。
クッキーが削除されてしまうと、アクセス解析としては「別人・別ブラウザ」と認識されてしまいますので、Cookieによるユーザー判定というものは、100%正しい情報ではないということを理解しておく必要があります。

【初心者向け!構造化マークアップ】ボキャブラリーについて知ろう!

こんにちは。デザイナーの佐竹です。
今回は、勉強もかねて「構造化マークアップ」のボキャブラリーについて簡単にまとめてみたいと思います。

まず、「構造化マークアップ」とは何かと言いますと、

「検索エンジンが意味をより正確に理解できるようになる為の、コンテンツのマークアップ方法」です。
簡単に言うとGoogleがコンテンツを理解しやすくなるための記述ということです。
ただし、現時点では検索順位に直接的な影響はないそうです。

ボキャブラリーとは

「Google」「Microsoft」「Yahoo!」 の検索エンジン三社が仕様策定に取り組んでいる「schema.org」という組織があります。
このschema.orgで定義されているのがボキャブラリーです。

schema.orgの仕様通りにHTMLにマークアップする事で、検索エンジンに正確な情報を収集してもらい、ユーザーに最適な検索結果を提供することが可能になります。

クローラーがページの内容を解析しやすくなり、その結果検索エンジンに「リッチスニペット」を表示することができるようになります。

リッチスニペットについては、また別途記述しますが、検索結果に画像や評価が表示されるようになるので、クリック率が高まると期待できます。

ボキャブラリーの記述方法

<section itemscope itemtype=”http://schema.org/Book”>
<h1>本のタイトル</h1>
<p>本の説明</p>
</section>

itemscope itemscopeという属性がsectionに付与されています。これはこのsectionに構造化データが付与されているということを意味します。

入れ子構造にする方法

<section itemscope itemtype=”http://schema.org/Book”>
<h1>本のタイトル</h1>
<p>本の説明</p>

<div itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<p itemprop=”name”>著者名</p>
</div>
</section>

itempropは情報の項目を指定するプロパティです。
今回は本の情報の中に「著者」の情報を入れ子表示しました。

記述方法はシンプルですね。
今後も勉強を兼ねて、構造化マークアップについて書いていこうと思います!

【Photoshop cc】シェイプレイヤーで簡単に放射線を作る方法

こんにちは。デザイナーの佐竹です。
今回は、シェイプを作成して、そこから簡単にぱっと目を引く放射線を作成する方法をご紹介します。

シェイプで正円を描く


「楕円形ツール」を選択して、画像の任意の場所に正円を描きます。

「シェイプのディテール」を編集


「属性」パネルの「シェイプのディテール」で、
1、「塗り」・・・なし
2、「ストローク」・・・白、太さは任意(今回は90px)
3、「整列」・・・外側
にします。

円の外側にストロークが表示されました。

「線オプション」を設定する


1、「線」の選択プルダウンをクリックして、「線オプション」を表示させます。
2、線の種類は「破線」を選択します。
3、「破線」にチェックを入れて、「ダッシュ」・・・「.04」、「間隔」・・・「.01」を選択します。」

最後に円の位置を調整して、完成です!!!

【Photoshop cc】イラレデータをレイヤーを保持した状態でPhotoshopで開く方法

こんにちは。デザイナーの佐竹です。

今回は、イラレデータをレイヤーを保持した状態でPhotoshopで開く方法をご紹介します。
FWの開発が終了した時、イラレでデザインするか、PSでデザインするかを迷っていた時期がありました。
どちらにもメリット・デメリットがあり、最終的にPSを選んだ決め手は、スライスが必要ないことでした。

コーディングの準備段階で、まずは画像などのスライス作業が必要になるのですが、その点が便利なのがFWでした。
FWを手放す際に、気になっていたのがこのあたりの機能だったわけですが、PSの新機能として、画像の自動保存というものがあり、もはやスライス作業も必要ない!ということが分かり、小躍りしたのでした!!

制作用ソフトはどんどん機能改善されていくものなので、今後、別のソフト(たとえばXDとか)でコーディングに便利な機能が追加される可能性は大ですが、現時点ではweb制作においては、PSの凄さは他を圧倒しているように感じます。

さて、そんなわけでデザインをAIデータで受け取った場合も、一度PSに変換してコーディング作業を進めていきたいので、その手順をご紹介します!

Photoshop(PSD)形式でデータを保存



「ファイル」から「書き出し」→「書き出し形式・・・」を選択し、ファイルの種類をPhostoshop(PSD)にしてデータを保存します。

「Photoshop書き出しオプション」ダイアログが表示されるので、オプションの[レイヤーを保持]、テキストが含まれている場合は「テキストの編集機能を保持」にチェックを入れてください。

「OK」ボタンをクリックすると、指定した場所に書き出しファイルが保存されます。

Photoshopで開いて確認


レイヤーが保持されているのが確認できました。
手順は以上です。簡単ですね!!

【Photoshop cc】Photomaergeでスクリーンショットをマージする方法

こんにちは。デザイナーの佐竹です。

今回は、モニターのPrintScreenで撮ったスクリーンショットを用意しておいて、一気に自動で繋げる方法をご紹介します。
サイトの画面を印刷して確認したいときなど、画面コピーしてくっつけるのに時間がかかりますよね。
Photoshopには、それを自動的にマスクして繋げてくれる機能があります!
では、早速手順をご紹介します。

スクリーンショットをjpegなどの形式で保存しておく


ファイル形式は混在していてもOKです。
連番などにしておく必要もありません。(自分で管理しやすいような名前を付けておきます。)
自動的にマージする際に、画像で判断している部分が大きいので、画像ができるだけ被るようにスクリーンショットを用意しておいて下さい。
切り取り方によってはうまく繋がらないことがあります。

「ファイル」→「自動処理」→「Photomerge」を選択


マージしたいファイルをすべて開いておきます。
「ファイル」→「自動処理」→「Photomerge」を選択します。

Photomergeダイヤログを設定する


Photomergeダイヤログが開くので、
レイアウト:自動設定
ソースファイル:「開いているファイルを追加」でファイルを確認(開いていないファイルを選択するばあいは「参照」から選択)
して、「OK」をクリックします。

自動的にマスクが作成されて画像がマージされます。

【Photoshop cc】集中線の背景を簡単に作成する方法

こんにちは。デザイナーの佐竹です。

今回は、まんがみたいな人目をひく集中線を簡単に作成する方法をご紹介します。
今までは素材集から持ってくるしか方法が無かった集中線の背景ですが、すごく簡単に作成することが可能になりました。

新規塗りつぶしレイヤーの「グラデーション」を選択

「レイヤー」メニューから「新規塗りつぶしレイヤー」→「グラデーション」を選択します。

「グラデーションエディタ」で保存

作成したグラデーションを、グラデーションエディタで保存します。

集中線用のグラデーションを作成

「グラデーションエディタ」を開き、「グラデーションタイプ」を「ノイズ」、「粗さ」を「100%」にします。
次に、カラーモデルのつまみをすべて左に寄せます。
「オプション」は「色を制限」と「当面部分を追加」にチェックを入れます。

「グラデーションで塗りつぶし」ダイアログボックスを設定

「グラデーションで塗りつぶし」ダイアログボックスに戻るので、「スタイル」を「角度」、「角度」を「90%」に設定します。

【Photoshop cc】「スクロール」機能でパターンを簡単に作成する方法

こんにちは。デザイナーの佐竹です。
今回は「スクロール」という機能を使ってシームレスなパターンを作成する方法をご紹介します。
パターンを登録すると、いつでも呼び出して使うことが可能です。

「カスタムシェイプツール」で好きなシェイプを作成します。

カンバスサイズは切りの良い数字にしておきます。
オブジェクトのレイヤーを1枚コピーして非表示にしておきます。

フィルターメニューから「スクロール」を選択


「フィルター」→「その他」→「スクロール」を選択します。

「ラスタライズする」というアラートが表示されるので「ok」をクリックしてください。

ダイアログボックスが表示されるので「水平方向」「垂直方向」を、カンバスサイズの半分のサイズで入力します。
「未定義領域」で「ラップアラウンド(巻き戻す)」を選択してOKします。
そうすると、オブジェクトが四隅に配置されます。

非表示レイヤーを表示

最初にコピーして非表示にしていたレイヤーを表示します。
四隅+中央にシェイプが配置されたパターンが完成します。
「パターンを定義」を選択して、新規パターンとして登録します。

【Photoshop cc】シェイプ機能で簡単にテキストを回り込ませる方法

こんにちは!デザイナーの佐竹です。

デザインカンプ作成などの際に、きれいに短時間で文字列を成型したいときに便利な機能を紹介します!
テキストの変更があっても、改行で悩まずサクッと文字を入れ替えられますよ!!

では、早速手順です。

「長方形」ツールでシェイプを作成

文字を流し込む領域と、画像+余白の領域にシェイプを作成します。
画像も右下のシェイプの下に配置しておきます。
二つのシェイプは右下で揃えておきます。
領域がわかりやすいように、背景に薄い色を付けておきます。

シェイプを結合して中マドにする

「レイヤー」パネルで二つの長方形を選択して、「Shift」+「E」で結合します。

「パスコンポーネント選択」ツールを選択して、先ほど結合した長方形を選択します。

「オプションバー」の「パスの操作」から「シェイプが重なる領域を中マド」を選択します。


シェイプが中マドになり、下にあった画像が表示される状態になりました。
「パスの操作」で「シェイプコンポーネントを結合」を選択します。

そうすると、「この操作を行うとライブシェイプが標準のパスにかわります」というアラートが表示されますので、「はい」を選択します。

文字を挿入する


シェイプレイヤーを選択した状態で「横書きツール」を選択し、文字を入力します。
この段階で、シェイプと同じ形のテキストエリアが作成されます。
シェイプは削除してください。

いかがだったでしょうか。シェイプは色々な形で作成可能ですので、表現の幅が広がりますね。

【Photoshop cc】小さな文字を鮮明に表示する方法

こんにちは。デザイナーの佐竹です。

デザインカンプを作成して、お客様に見て頂く際に、キャプションなどの小さな文字が潰れてしまって、そもそも読めない!ということがあります。
前提として、コーディングしたときのブラウザに表示される文字と、デザインカンプの文字は別物であることがデザイナー、ディレクター、お客さまとの共通認識である必要があるのですが、それでもデザインを見た段階で、文字が見にくいのは印象が良くないですよね。

Photoshopなどのデザイン用ソフトには「アンチエイリアス」という機能があります。
文字や画像の周りなどにグラデーションの枠をつけ、ジャギーを目立たなくする機能です。

ある程度のサイズの文字であれば、アンチエイリアスの標準的な「滑らかに」という種類を選択しておけばスムーズな文字を表示できます。
しかし、小さすぎる文字の場合、線が潰れたりして、きれいに表示することが出来ませんでした。

さて、Photoshop ccの新機能の一つとして、このアンチエイリアスに「WindowsLCD」という項目が追加されました。
これは、WindowsOSのフォントスムージング機能を再現したものみたいです。
Macの場合は「MacLCD」と表示されていると思います。

さて、これで文字を打ってみましょう。

9pxのサイズで文字を打ってみます。
オプションで「アンチエイリアス」の選択欄から「WindowsLCD」を選択します。
比較のため、同じ9pxで普通のアンチエイリアス「滑らかに」「鮮明」を選択した文字と、大きいサイズのアンチエイリアス「滑らかに」の文字も打っておきます。


小さい文字も、鮮明に表示できるようになりましたね。

【Photoshop cc】リアルな光沢のある文字を簡単に作る方法!

こんばんは。デザイナーの佐竹です。

今日は「リアルな光沢」のある文字を簡単に書く方法をご紹介します!
ここ2、3年、「ベベル」や「エンボス」とは無縁の生活を送ってきました。
ちょっと古臭い表現になってしまうような気がするし、あまり好んで使うことはなかったのですが・・・

しかし、ここぞという時にガツンとピカピカした目立つ文字を書きたい時もあると思います。
今回は「光沢輪郭」という機能をつかって、ピカピカな文字をリアルに表現したいと思います。

色々な表現に応用も聞くと思いますので、知っておいて損はない機能だと思います。

さて、それでは手順を紹介していきます!

文字を書く

今回は「光沢」のある文字にピッタリな「century」というフォントでGOLDと書いてみます。

後で光沢を出しますので、とりあえず暗めのオレンジ色に文字色を変えておきます。

レイヤースタイルから「ベベルとエンボス」を選択


図のように値を変更しておきます。この設定で、立体的な文字になります。

「ベベルとエンボス」の「陰影」box内にある「光沢輪郭」のサムネイルをクリック

「輪郭エディター」が開きます。

「輪郭エディター」の「マッピング」カーブを調整

トーンカーブを操作するような感覚で、マッピングを調整していきます。
実際の文字を確認しながら、調整してください。

キラキラとした光沢のある文字になりました!!
いかがだったでしょうか。簡単ですよね!!

【Photoshop cc】爆速切り抜き方法 [選択とマスク](フワ毛にも対応)

こんにちは。webデザイナーの佐竹です。

今回は、納期の関係で大急ぎで画像を切り抜きたいときに超便利なテクニックをご紹介します。
もう数年前のことですが、画像を切り抜く方法を「パスを使ったマスク」しか知らなかった時代、髪の毛がモサモサ、ふさふさした人をきれいに切り抜くことが出来ず、先輩デザイナーに泣きついたのを思い出します。

今では、トレースも時間をかけず出来るようになりましたが、PSが進化しているので、トレーステクニックはまったく必要なくきれいに選択範囲出来るようになりました。
初めて試した人は感動すること間違いなしの機能ですよ!!

選択範囲のための機能は、「境界線を調整」という機能が以前からありましたが、「cc 2015.5」からさらに使いやすくなって【選択とマスク】ワークスペースとしてまとめられました。

では、早速操作方法をご紹介します!

「選択とマスク」を選択

切り抜きたい画像を選択した状態で、メニューバーの「選択範囲」→「選択とマスク」を選択します。

「クイック選択ツール」で範囲選択

まずは「クイック選択ツール」で範囲選択していきます。
不要な部分が選択されてしまったときは、Windows「Ctrl+Alt」Mac「option+Alt」で削除することが可能です。(選択ポインターが「-」マークになります)

※「属性」パネルの「表示モード」をオーバーレイにすると、選択範囲がわかりやすくなります。

境界線調整ブラシツール

次に「境界線調整ブラシツール」で細かい部分を選択します。
この機能を使うと、髪の毛などのモフモフ部分もきれいにマスク範囲として選択できます。

「属性」パネルで「OK」

最後に、属性パネルの「出力設定」→「出力先」で「レイヤーマスク」を選択して、「OK」をクリックします。

これで、簡単に超高速でモフモフな物体も切り抜けました!
モフモフ、フワフワだけでなく、人間の髪の毛なども、きれいに切り抜けます。

とても便利な機能ですね。ぜひ使ってみてください。

【Gulp】初心者向け!Gulpを使ってみよう! 《Node.jsインストール編》

こんにちは。デザイナーの佐竹です。

これまで何度かSassの環境を整えるための手順をブログでご紹介してきましたが、今回はSassをコンパイルするためのタスクランナーである「Gulp(ガルプ)」の導入方法をご紹介していきます。

Gulpは「Node.js」のプラグインですので、まずはNode.jsの導入方法をご紹介します。

Node.jsは、サーバサイドJavaScriptです。
ノンブロッキングi/oで非同期処理が可能なので、webページの表示とDBへのアクセスなど、同時に処理してくれてページの表示が速くなります。

インストールはとても簡単ですよ~!!

インストーラーのダウンロード

http://nodejs.org/
「V6.11.3 LTS」(2017年9月現在)のボタンをクリックして、ファイルをダウンロードします。

ダウンロードしたファイルをダブルクリックして、インストーラーを起動、インストールします。

インストールの確認

コマンドプロンプトを起動し、以下のコマンドを実行します。

node -v

バージョン情報が表示されれば、無事インストール完了となります。