新しいデザインのツイッターボタンPSDを配布します!

kyatti


Twitter社がツイートボタンのデザインの変更を発表しました。

2015年11月20日までに変更を完了すると宣言した通り、現在ほとんどのツイートボタンが新しいデザインになっています。

新 デザイン ツイッター ボタン 素材 フリー


このように新しいツイートボタンのデザインは、以前よりフラットなテイストになり洗練された感じのデザインに仕上がっています。
ついでに以前あったカウント表示もなくなっています。

新しいツイッターボタンのPSD素材

新 デザイン ツイッター ボタン 素材 フリー

おそらく今後何度も使うことになるので、せっせと作りました。
全てシェイプで作ってあるので、拡大にも対応してます!文字数が増えてもあんしん!

せっかく作ったのでそのまま公開します!ご自由にご利用下さい。

ダウンロードはこちら

PSD内に入っている素材は5つあり、詳細はこちらです。

  • ツイートボタン
  • フォローボタン
  • ハッシュタグツイートボタン
  • リプライツイートボタン
  • 英語版ツイートボタン

この素材について
※ ツイートボタンを表示するデバイスによって見え方が違う為、イメージと若干異なる場合があります。
今回はChrome/Macの環境の見え方に合わせました。

※ 使用報告や、バックリンク等は必要ありません。
※ 再配布はご遠慮ください
※ この素材を利用して起こった問題についての責任は一切受けられません。

バナーを作る際の注意点をまとめてみた!

kyatti

GDNバナーを入稿して、掲載されたと報告があるとバナーをおいているサイトで更新ボタンを連打して確認してます。
自分が作ったものじゃないバナーとか見るのかなり好きです。

GDN バナー 注意点

あぁ^〜かわ、、

…ん?

GDN バナー 注意点

なんか右上にひっついてる…?

そう、これGoogleが広告の表示位置が適切かどうかを報告するやつ(だったはず)
出てくるときがあったり、出てこない時があったり。

このGoogleのユーザーに親切な機能は、結構バナー製作時の伏兵になりがち。

最近これのせいで企業ロゴとか指さし文が隠れているバナーをよく見かけます。注意

右上の横31px縦15pxは危険地帯です。
なるたけ左上に大事なものを置かないレイアウトを心がけるようにいたしたほうが無難です。(戒め)

GDN バナー 注意点

このバナーなんかは企業ロゴの位置をずらすことで、企業ロゴが隠れてしまうことを防いでいます。ワザマエ!

あと…細長いサイズのバナーでもなんでも…。出てくるんやで…。事前の確認が大事や…。

GDNバナーだけではない…。

そう、GDNバナーだけでなく、他のバナーでも同じようなマークが出てきます。闇は深い。
入稿先を確認して、どのくらいの大きさのものが出てくるのか確認しておいたほうがいいと思います。…思います。

GDN バナー 注意点

左:microad 右:freakout

【一例】
MicroAdは右上横19px縦15px
freakoutはGoogleと同じ横31px縦15px

しかし右のバナーにいるOZPAさん、ほんとどこでも見かけるな..。最近現実世界でもPOPとかで出会うことが増えてきました。

しかも出演している内容が大体ゲスいものか、おとく!!!みたいな感じで、OZPAさんを知らない人は多分きっとOZPAさんが裏世界を牛耳る何かかと勘違いしてる人がいそうでいなさそうで。

※OZPAさんはWEBデザイナーの方です。社会人ブロガーで独特の言い回しが面白いブログやっていらっしゃる方です。

バナーに入れる要素的なおはなし

ABテストを繰り返した結果、要素を増やし過ぎるとクリック率下がりました。
なので、今はシンプルで訴求したい事を一つにしたバナーを複数作っていくつか入稿したりしています。

よく言われていることですが、伝えたいことをひとつに絞って構成したほうが良いです。

よくあるのが、これとあれとそれもお得!全部入れよう。キャッチコピーも入れよう。って構成。

やめよう。誰も幸せになれないから…。やめて…。

バナーを作る際の注意点まとめ

  • バナーを作るときは、右上に出てくるやつに気をつけよう
  • 入れたい要素増やし過ぎると制作側もつらいしクリック率も下がるからやめようください(血涙)

ここまで書いておいて、ずっと右上って書かなきゃいけないところ、全部左上って書いていた..。これはつかれてますね(白目)

しかし今日ふんばればおやすみだーーーーーー!!!!!

みなさんも踏ん張って良い週末を!!!

Adobe MAX 2015をまとめてみた

AdobeMax 2015 まとめ

こんにちは! YOUKNOWです。
Adobe Max 2015で発表されたことを個人的にまとめました!
ざっと確認したい人向けになっていると思います。

今回の発表はかなりボリューミーな感じになっています。

ちなみにこのAdobe MAXは日本のAdobe社員さんが10月6日(火)21時に解説してくれるそうです。
より詳しく知りたい方は下のリンクからどうぞ!

また、こちらから英語版ですが、講演を見直すことが出来ます。

Adobe MAX 2015 まとめ

AdobeMax 2015 まとめ

今回のAdobe Maxはアプリケーションやデバイスの連携がテーマで、
どこでどんなデバイスを利用しても作業ができるようにしていく。とのことでした。

ソフト・デバイス間の連携を強化!「Creative SYNC」

AdobeMax 2015 まとめ

デバイス問わず、アセットやTypeKitが利用できるようになりました。

アプリケーション間の連携がより強力になり、より効率的な制作が行えるようになります。
Adobe MAXのデモでは例としてヨガスタジオのデザインを作りながら説明してくれました。

AdobeMax 2015 まとめ

Adobe Stockでヨガの画像を検索、プレビューのボタンを押すだけで、すぐに画像のデーターがライブラリに追加され、各種Adobe製品で利用可能になります。

ライブラリについてはこちら

パターンが一瞬で制作できる!「Adobe Capture」

AdobeMax 2015 まとめ

Color、Shape、Brush、Hueが統合された、新アプリAdobe Capture CCが発表されました。

似たようなアプリが統合されて、若干わかりやすくなりました。

AdobeMax 2015 まとめ

新機能のPatternはカメラを向けるだけで、テクスチャ画像を制作してくれます。
デモではホテルから持ってきた花にカメラを向けていました。

もちろんCapture CCで制作した素材は、ライブラリを介する事で各種Adobeソフトでも利用することが出来ます。

TypeKitにモリサワフォント20種類が追加

AdobeMax 2015 TypeKit モリサワ

有名なモリサワフォントからフォントが20種類追加されました!

追加された書体はこちらです。

モリサワフォント

  • 太ミン
  • 太ゴ
  • 中ゴシック
  • じゅん
  • 見出ゴ
  • 見出ミン
  • 黎ミン
  • リュウミン
  • 新ゴ
  • 新丸ゴ

TypeBankフォント

  • サン
  • 漢字タイポス415
  • ぷらっしゅ
  • 日活正楷書体
  • カリグラゴシック
  • ちび丸ゴシックPlusK
  • 新聞ゴシック
  • シネマ丸ゴシック
  • 新聞明朝

CreativeCloudの契約ではTypeKitのプランの「ポートフォリオ」プランと同じ扱いを受けられるため、これらのフォントも利用することが出来ます。

ただし、今回追加されたフォントたちは各フォント1ウェイトずつしか利用できないという欠点も存在します…。

パフォーマンスが劇的にあがった! 「Illustrator CC」

AdobeMax 2015 illustrator

以前より10倍早く、64000%まで拡大ができるようになりました。

タッチで快適な操作 「シェイパーツール」

AdobeMax 2015 illustrator シェイパーツール

ジェスチャーで図形を作ったり、形状の変化を行うことができるようになりました。

画像はフリーハンドで図形を書いています。フリーハンドで四角を書くと、自動的に綺麗な四角のシェイプに変換してくれます。

その他にもパスファインダーの適応や、図形の削除・変形を全てジェスチャーで行っていました。

AdobeMax 2015 illustrator シェイパーツール

ジェスチャーを利用して、シェイプからぽっぽが生まれました。

このジェスチャー操作は他のアプリケーションも利用することが出来ます。

レスポンシブ機能に対応! Adobe MUSE

レスポンシブWebデザインを作るためのEdge Reflow CCの機能が、MUSEにも追加されました。

自動でレスポンシブデザインに対応してくれるようになり、コーディング不要でWEBサイトとして公開が可能です。
この際ベクター素材はSVGに自動で変換されるという有能っぷり。

コードのキレイさとか(メンテナンス的に)こうしたいとか、そういう細かい所に気を使わなくてもいいものであれば、もうMUSEでも良いかもしれません。

WEBデザイナーの相棒 「Photoshop」

アートボードの強化

AdobeMax 2015 Photoshop アートボード

Photoshopにアートボードが追加されましたが、不満に感じていた人は多かったようで..。
今回はそんなアートボードがかなり強化されました。

アートボードにフィルタをつけられるようになり、例えばスマホのデザインのみ表示みたいな感じの事ができるようになりました。
またアートボード別にガイドがつくようになり、複製もボタン一つで行えるようになりました。

デモでアートボードを大量に開いていたものの、全く重くなかったので、パフォーマンスも改良されていると思われます。

アセットの強化

AdobeMax 2015 Photoshop

選択したレイヤーからアセットを書き出すことができる機能が追加されました。
コレ地味になくて不便だったんですよね。

また、スマートオブジェクトだけアセット抽出を行うなどの事もできるようになっています。

UI・UXを効率的にデザインできる新プロジェクト 「Comet」

AdobeMax 2015 comet

今はなきFireWorksの到達点…!?

Adobeさんにしては珍しいUI・UXデザイナー向けのデザインツールです。
非常に効率的にデザインを制作できるという特徴を持っています。

Cometは来年の頭にパブリックベータを行うようです

圧倒的な効率

びっくりしたのはその圧倒的なデザインの効率でした。Photoshopでも同じ事をやりたいと何度思ったことか…。

AdobeMax 2015 comet

ドラッグするだけで、デザインパターンの繰り返しを作ることが出来ます。

AdobeMax 2015 comet

一つの場所を変更するだけで、全ての箇所の変更が完了します。

もちろん隙間等も一つ変更するだけで、すべての変更が完了します。

AdobeMax 2015 comet

デザインパターンに複数の画像を追加した場合….

AdobeMax 2015 comet

きちんと全てのデザインパターンに違う画像を入れ込んでくれます。

AdobeMax 2015 comet

パフォーマンスも高く、これだけの数のアートボードを開いてもキビキビ動いていました。

AdobeMax 2015 comet

画面推移も簡単に作ることが出来、

AdobeMax 2015 comet

どのような感じになるか確認するためのデモも見ることが出来ます。

DreamWeaver

AdobeMax 2015 dreamweaver

DreamWeaverの方はAdobeさんの公式ブログさんのほうで詳しく書かれていましたので、引用させてもらいます。

もうすぐ公開されるDreamweaverのアップデートでは、CC Libraryが追加されて、PhotoshopやIllustratorといったデザインツールのデザインアセットを共有したり、Adobe Stockとの連携が可能になるようです。ライブラリ経由でIllustratorからSVGアセットを利用することも可能です。

Dreamweaver関連での注目は、来年公開される新バージョンでの、コードエディタの刷新が予告されたことです。基調講演では明らかにされませんでしたが、Dreamweaverチームのブログ記事によれば、新しいエディタはBracketsをベースにしたものになるようです。Bracketsでお馴染みのインラインエディタやSass/LessサポートなどがそのままDreamweaverでも使えるようになれば、開発ツールとしてのDreamweaverの使い勝手はずいぶん向上することでしょう。ベータ版の一般公開も検討されているようです。

まとめ

いかがでしたでしょうか。なかなかボリューミーな発表でしたけど、凄くアップデートが楽しみなAdobe MAXでした!

個人的にはCometが期待ですね。これでWEBデザインはできるのだろうか..?とか考えております。

Photoshopで全ての階層のレイヤーフォルダを閉じる方法

photoshop レイヤー フォルダ 閉じる 全て

デザイナーはレイヤー構造の見栄えを良くするためについレイヤーをフォルダーで囲いまくる癖がある。

私だ。

見栄えをよくするためにわざわざ囲っているので、コーダーさんにデザインデーターを渡すときには、主に見栄のためにフォルダーを全て閉じて完璧な状態でPSDデータを渡したい。

レイヤーを一括で閉じるショートカットとしてよく取り上げられている、⌘commandを押しながらレイヤーフォルダの隣にある▶を押すというやり方では、同じ階層のフォルダしか閉じてくれない

もし下層に閉じていないフォルダがあったとしても、それを閉じずに指定した階層のフォルダのみ閉じられる。

するとコーダーさん及び第三者が閉まっているフォルダを開けてしまうと、しまってるフォルダとしまっていないフォルダが混在した大変見にくいレイヤー構造になってしまう。

これは見栄っぱりとしては由々しき問題であるため、他のやり方はないのかとちまちまと試してみた。

下の階層のフォルダを含め全てのレイヤー構造のフォルダを閉じる方法

photoshop レイヤー フォルダ 閉じる 全て

⌘command+alt+一番上の階層のフォルダの隣にある▶のマークをクリックする

これだけ!

かなり簡単である。これだけで少しやり遂げた感が生まれるはずだ。

臭いものにフタをするようなグループは、ありがちだけれども修正作業で死ぬので自分のためにも直しておこう(戒め)

Photoshop等でテキスト修正を劇的にラクにする!検索と置換機能

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

前回の記事ではライブラリを紹介しました!
何か他にもっと便利な機能がないか、もう一度色々見直してきました。

その中で最近の業務でかなり役立った機能検索と置換機能をご紹介します。

この機能は制作業務でありがちな文言の修正を劇的に楽にする機能です。

▶ 機能のやり方と説明だけを見たい方はこちら

制作業務で頻発する文字修正

ひとたび行えばまたひとたび。修正界の不死鳥のような存在…。

我ら制作班は文字修正に怯えながら暮らす。何ページにも及ぶカンプ制作だった場合は終電の命がなくなる

特にやばいのは走れメロスのメロスをメロウに変更する系の文字修正だと、クライアントの皆様方にはここで声を大にして述べておきたい。

今回はそんな悲惨な修正をちょろい修正に変える神機能の紹介です。

Photoshop Illustrator等で一斉に文言修正を行える 検索と置換 機能

検索と置換機能は、検索する文字を指定し、その文字と一致しているテキストを全て置き換えることができる機能です。

例えば、走れメロスの場合、検索文字を「メロス」に置き換え文字を「メロウ」にすると走れメロウとなります。
メロスという単語が複数あった場合、メロスという単語が全てメロウに変わる機能です。

検索と置換機能の使い方

さすがに標準搭載されている機能だけあって、使い方も簡単。

Photoshop illustrator 文字 置換 検索

PhotoshopやIllustrator等、機能を使いたいAdobe系アプリケーションメニューから編集 > 検索/置換を選択します。

Photoshop illustrator 文字 置換 検索

すると検索文字と置換文字を入力するウィンドウが出てくるので、これらを入力し、全てを置換を選択すると、指定した検索文字が全て置き換わります。

おわりに

知らないだけで便利な機能って結構あるんですね。
ちょっと前までこの機能無しで文言修正を行ってました\(^o^)/

CC2014で新しく追加された「ライブラリ」が超便利だった

Photoshop 便利 パーツ ライブラリ

こんにちは!YOUKNOWです!

今までWEBサイトデザインの制作効率化の為に、自分で作ったデザインパーツや商用素材などをストックするPSDを作っていました。

Photoshop 便利 パーツ ライブラリ

こんなかんじで一つのPSDにまとめてました

そんな中、Photoshopのスタイルをいじっていたらライブラリの存在に気づきました。

なんやこれ…。と思いながらも使ってみるとまあこれが便利便利!!

Adobe ライブラリとは?

Photoshop 便利 パーツ ライブラリ

作ったパーツなどをストックしておくことができるものがライブラリです。
追加したデザインパーツは、CleativeCloudで同期される為、追加したデザインパーツはPhotoshopやIllustratorで同じものを使用することが出来たり、他の端末でも同じパーツを使用することが出来ます。

なおこの機能はCC2014から使用することが出来ます。

ありがとう。Adobeさん

なんで俺この機能にもっと早く気づかなかったんだろうか…。
それくらいに便利です。これでもうパーツを保存しておくPSDが増えなくてすみます。

今回の記事はこのライブラリがすごいということをただただ書きなぐるだけの記事です。

Adobeライブラリのすごいとこ

ライブラリは即同期される

Illustratorで作ったこの素材をPhotoshopですぐに使いたいなぁという時。ライブラリに追加すればすぐにライブラリが同期されます。
その為、アドビ製品を行き来してデザイン制作しなくてはならない場面で非常に便利。

ライブラリは他人と共有することができる

Photoshop 便利 パーツ ライブラリ

そう、作ったパーツを他人と共有することが出来ます。
例えば会社であれば、汎用パーツを共有したりすることができると思います。

プロジェクトに応じて使う素材などが送られてきたら、このライブラリを使ってチームで共有すると捗ると思います。

ライブラリの追加がワンクリック

ライブラリウィンドウの左下のボタンを押すだけでライブラリの追加は完了している…。

ライブラリで管理できる種類が豊富

デザインパーツ以外もライブラリに保管することが出来ます。

  • カラー
  • カラーテーマ
  • スタイル
  • ブラシ
  • グラフィック(パーツ)

Adobe製品で作ったもののほとんどをライブラリに保存することが出来ます。やばい。

パーツの整理が可能

Photoshop 便利 パーツ ライブラリ

とはいえデザインパーツを入れ続けたら、だんだんどこに何があるかわかりづらくなってきます。
そういったことにならないように非常に整理しやすく作られています。最高。

サムネイル表示が優秀

Photoshop 便利 パーツ ライブラリ

Adobeライブラリの使い方

Photoshop 便利 パーツ ライブラリ

使い方を説明するまでもなく簡単な所もライブラリの良い所

Photoshopのメニューからウィンドウ > ライブラリでライブラリウィンドウが出てきます。

デザインパーツなどの追加方法

追加したいデザインパーツを選んで、ライブラリウィンドウの左下の丸と四角と三角が重なっているアイコンをクリックするだけ!

ライブラリに保存したパーツを使う方法

ドラッグ&ドロップ

便利なのでぜひ!!ぜひに!!一度試してみてください。

Photoshopでレイヤーを一つ一つ拡大してくれるスクリプト Transform Each

daqweq

こんにちは!制作効率はパワーだと考えるYOUKNOWです。
スクリプトをよく使うのでそのスクリプトをご紹介していこうかと思っています。

WEBデザインでありがちな修正として、これらのロゴ全部少し大きくして下さいとか、ここの詳しくはこちらの隣についてる矢印だけ大きくして下さいという指示あると思います。

拡大作業って一つなら手間じゃないんですが、複数個の拡大作業はかなり手間になります。

Photoshop スクリプト 拡大 transformEach

引用: Captainawesome様より

というのも全部を拡大しようとすると、選択したオブジェクト達の真ん中を基準として拡大処理を行うため、位置がズレズレになってしまう問題があります。
今回はこのような問題を解決してくれるスクリプトをご紹介します。

レイヤーの拡大を助けてくれるPhotoshopスクリプト Transform Each

Photoshop スクリプト 拡大 transformEach

引用: Captainawesome様より

Transform Eachはレイヤーの拡大・縮小を補助してくれるPhotoshopスクリプトです。
拡大・縮小以外にも、回転なども補助してくれます。

思ったより使うポイントが多いのがこのスクリプト。コレのお陰でかなり時間が短縮出来ています。

インストール

通常のPhotoshopスクリプトとかわりありません。

こちらのページのダウンロードボタンから[KAM]Transform Each.jsxをダウンロード

ダウンロード完了したら、以下の場所にダウンロードした.jsxを保存します。

Windows : C:/Program Files/Adobe/Adobe Photoshop/Presets/Scripts
Mac : Application/Photoshop/Presets/Scripts/

上記の場所にjsxファイルをおいたらPhotoshopを起動し、(すでに起動してある場合は再起動)、Photoshopのメニューから
ファイル > スクリプトの中に入れたスクリプトの名前があればインストール完了です。

必要環境

Adobe Photoshop CS5, CS6, CC2014 , CC2015

使い方

処理を行いたいレイヤー達を選択し、ファイル > スクリプト > [KAM]Transform Eachを選択しスクリプトを起動します。

Photoshop スクリプト 拡大 transformEach

あとは行いたい操作に合わせてパラメータをいじるだけです。

Photoshop スクリプト 拡大 transformEach 日本語

複数のバナー画像制作に、Photoshopのアートボードが大変捗った話

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

お仕事でよくバナーを作る機会があるんですが、ふと思い立ってPhotoshopの2015で追加されたアートボードを利用して作ってみました。

バナーってGoogleのバナーだったりYahooのバナーだったりうんちゃらかんちゃらで結構な個数を作ることが多いんじゃないでしょうか。

加えてやっぱり修正も多く発生しがちですよね。
数が多いとその分だけ修正の手間も増えてきます。
その度に書き出しを行うのだけでも以外と時間がかかってしまったり…

Photoshopのアートボードツールを利用してバナーを作ったら修正にも対応しやすくなるし、書き出しもラクそうで良いのではないかと考えました。

結論からいうととてもラクで良い!大正解でした。

どうラクだったのかというと

  • スマートオブジェクトの更新がラク
  • パーツのコピーもラク
  • パーツをアートボード外にストックしておくことができる
  • 書き出しに手間がかからない

が大きかったなぁ…と。

Photoshopのアートボードがバナー制作で捗る点

スマートオブジェクトの更新がラク

Photoshop 2015 アートボード バナー

どうしても文字でこだわりたかった所や、小物の制作はIllustratorを使用して制作します。

それをスマートオブジェクトとしてPhotoshopに落としこむのですが、別のファイルでバナーを制作していると、こっちのバナーのスマートオブジェクトは更新されたが、こっちは更新されない…などの問題が発生します。

しかしアートボードで作る場合、同じPSDファイル内なので一つのスマートオブジェクトを更新すれば同じスマートオブジェクトは全て更新されます。

これで頻発する文言修正対応にも捗るってもんです。

パーツのコピーもラク

まだまだ便利さは続きます。

Yahooバナー GDPバナーなどの種類の豊富さに加え、サイズも豊富と来ているバナー達。

圧倒的数量でやってきます。けれども入れる要素は同じかつ、バナーをクリックして飛ぶ先も変わるわけではないので、同じパーツや賑やかしを使うことが多いです。

別のPSDファイルで制作していると、このパーツをこっちのPSDに持ってこよう..。Photoshopのウィンドウを調整して…こっちに持ってきて…ああ!このPSDも開かないと!

アートボードなら一発です。コピーしたいものを選んで、command+J で複製して移動ツールで移動するだけです。

アートボードの特性で、アートボードの上にあるパーツは自動的に適切なアートボードにレイヤーを移してくれるので、本当に移動するだけでOKです。素晴らしい

パーツをアートボード外にストックしておくことができる

例えば、そのバナーがシリーズものだった場合など、参考になりそうなものをおいておけば、作業が捗るでしょう。

パーツの一時退避としても使える子です。

書き出しに手間がかからない

全てのアートボードを一斉に書き出すことが出来ます。

command+alt+SHIFT+W

これで保存場所・保存形式を選ぶだけで全てのバナーが書き出されます。

まとめ

アートボードツールなかなかオススメです。

レイヤー名一斉変更できる Photoshop Scripts「FindAndReplace」

aikyatti

こんにちは!YOUKNOWです。

Photoshopのアセットなどでレイヤーの名前を変更する機会が増えたのではないでしょうか。

レイヤー名を一つ一つ変更するのはいくらなんでも手間すぎるので、レイヤー名を一括して変更できるスクリプトをご紹介します。

FindAndReplace

https://vimeo.com/112916307

FindAndReplaceは複数レイヤー名の置き換えや特定の文字列を削除・先頭や末尾に文字列を追加することができる無料のPhotoshop用スクリプトです。
(スクリプトは無料ですが、気に入ったら投げ銭をするフォームがあるので、投げ銭してみると良いと思います。)

特に最近では画像アセットなどで、書き出すレイヤーの後ろに.pngなどをつけることが増えてきたので、大変重宝すると思います。

FindAndReplaceができる事の一覧はこちら。

  • レイヤー名の検索・置き換え
  • レイヤー名の置き換え
  • レイヤー名の先頭に任意の文字列を追加
  • レイヤー名の末尾に任意の文字列を追加

FindAndReplaceのインストール方法

FindAndReplaceの配布元guchika.com様にアクセスし、記事内のダウンロードリンクからFindAndReplaceをダウンロードして下さい。

ダウンロードしたZipを解凍し、出てきたFindAndReplace.jsxをPhotoshopのスクリプトフォルダに入れて下さい。

Macの格納先

/Application/PhotoshopCC2014/Presets/Scripts/

Windowsの格納先

C:¥Program Files¥Adobe¥Adobe PhotoshopCC2014¥Presets¥Scripts

FindAndReplaceを入れた後はPhotoshopにスクリプトを認識させるためPhotoshopを再起動して下さい。

Photoshopを再起動し、メニュー > ファイル > スクリプトにFindAndReplaceがあればインストール成功です。

FindAndReplaceの使い方

名前を変更したいレイヤーを全て選び、メニュー > ファイル > スクリプト > FindAndReplaceを選択すると、ダイアログが開きます。

行いたい名前の変更に合わせてダイアログを操作します。

レイヤー名の先頭・末尾に任意の文字列を追加

レイヤー 変更 一括 スクリプト scripts

レイヤー名の先頭・末尾に文字列を追加する方法は、変更したいレイヤーを全て選択し、先頭・末尾に文字列を追加のダイアログボックスを選択し追加したい文字列を入力すればOK

レイヤー 変更 一括 スクリプト scripts

レイヤー名の一部を置き換える

レイヤー 変更 一括 スクリプト scripts

レイヤー名の一部を置き換えたい場合のやり方です。

今回は例として、 bnr_1.png > btn_1.png へとレイヤーを変更しています。

bnrの部分を変更したいので、検索文字にbnrを入力し、置換を選択し、置換文字にbtnと入力することで、完了です。

レイヤー 変更 一括 スクリプト scripts

まとめ

レイヤー名の変更を一括で行う機能は非常によく使うので、このスクリプトには大変お世話になっています。

あまりによく使うので、毎回メニュー > ファイル > スクリプト > FindAndReplaceで選択するのは大変なので、ショートカットキーに追加してすぐ使えるようにしています。

便利なのでぜひ使ってみてくださいな。

Yahoo SSL化とキーワードが取得できない問題に対する代替案

yahoo

こんにちは!YOUKNOWです。

お盆休みいただきました。また今日から更新したいな…と!

外出した時のネタがたくさんたまってるので、お店のオススメとかも書くようにしようかなぁ。購入したモノもかなり多くなってきたのでこれも記事にしたいなぁ。なんて思いながら外出していました。

生活感しかない写真を載せるのに抵抗あるからなかなかレビュー記事かけないんですよね(笑)
なーんて言い訳をかましながら今回もWEB制作の記事です。(写真の生活感対策かんがえなきゃ…)

遂にYahooも2015年8月18日から段階的にSSL化になるようです。

「Yahoo!検索」SSL化のお知らせ

この度「Yahoo!検索」では、より強力なセキュリティ基準を採用したサービスを提供するため、2015年8月18日より段階的に、検索結果にSSLと呼ばれる暗号化プロトコルを使用することにいたしましたので、お知らせいたします。

SSL化に伴い、ご利用の基本ソフト(OS)によっては、エラーメッセージが表示されるなど、検索結果が正常に閲覧できない可能性がございます。対応方法など、詳しくは以下ページをご確認ください。

「Yahoo!検索」SSL化のお知らせ

SSLとは?

Secure Socket Layerの略がSSLになります。
やりとりされる情報を暗号化し、よりセキュリティを高める効果があります。

SSLを導入する事で、改ざんや情報の抜き取り、なりすましを防ぐ効果が期待出来ると言われています。

例として、二年前にすでにGoogleはSSLを導入しており、Googleから来た方の検索ワードを僕達は知ることが出来ません。

Yahoo SSL化によるサイト運営の影響とこれから

yahoo

SSL化の流れがきてるなきてるなーというのは大分前からわかっていました。
もちろんGoogle等の前例からの予想ですが、海外のYahooやBingもすでにSSL化の動きを表していたからです。

WEB製作者からすると、最近のウェブサイトHTTPS化の流れからもウェブの中のセキュリティがどんどんと上がってきているなという印象です。

Yahoo SSL化による問題点

YahooもSSL化することによって、検索ワードの取得が非常に難しくなります。
SEOに関しても少しやり方を変えないとかもしれません。

SEOも秘伝の技的なのがなくなってきたため、しっかりしたWEB製作者さんとSEO業者さんで効果がほとんど変わらないと聞いています。

今回のSSL化で更にWEB製作者さんとSEO業者さんの差がなくなるのではないのかなあなんて考えています。

これからはキーワードに頼り過ぎないようにしていくことが大事かなーと思っています。

このブログでは記事の観覧数で、どのような記事が求められているのかなーなんて考えるようにしています。
多分こうしたやり方が次の主流になるのではないのかなーと感じています。

記事観覧数の確認に良いWordPressプラグインがあったので、観覧数の確認にそのプラグインを使わせて頂いています。

以下ご紹介しておきます。

WordPressで記事観覧数を簡単に確認するプラグイン「WP-PostViews」

WordPressのダッシュボードから、プラグイン > 新規追加で検索欄にPostViewと入力してインストールすると簡単にインストールできます。

WP-PostViews 使い方 設定

インストールが完了し、有効化するとこのように管理画面にViews(観覧数)が追加されます。

WP-PostViewsの設定

簡単に設定を行うとより精度の高い情報になります。

WordPressのダッシュボードから、設定 > PostViewに進みます。

WP-PostViews 使い方 設定

Count Views FromGuest OnlyExclude Bot ViewYesにします。

こうすることで、Count Views Fromで管理者や編集者や投稿者の観覧数を除いた数が、Viewに表示されるように設定を行い、
Exclude Bot ViewでGoogle等のクローラーのアクセスもカウントしないような設定にしています。

まとめ。キーワードが取得できないなら観覧数を見ればいいじゃない

どんどん検索エンジンの精度が上がってきて、よりキーワードではなく求められている情報が載っているページが良い評価を貰えるようになってくると思います。
だからこそ観覧数が高い有用な記事がどれなのか、知ることで、求められている情報がわかるヒントになると思います。

WEBは常に進化しているので、それに合わせてやり方をどんどんを変えないと置いて行かれちゃいそうでたまに怖くなります(滝汗)