WEB、SNSに精通する?カメラマンとして少しは知られてる杉山ですが、最新のデフォルトWordPressテーマ「Twenty Seventeen」をカスタマイズしてホームページを作ってみました。

WordPressテーマを自作で作ったことは何度かあるのですが、今回はカスタマイズで作ってみようかと思いました。でも、ひょっとして全部自作の方が簡単だったかも?という思いにもなりました….w

子テーマを作り、プラグインとCSSなどの書き換えだけでは、やっぱり思った通りのページを作るのは、無理があるのかな?

 

ホームリンガル キッズ

http://homelingual.com

岐阜 故郷巡礼 by 杉山宣嗣 | 2017年 織田信長公岐阜入城・岐阜命名450年

Youtubeにアップしました!!

youtubeの⚙アイコンの視聴設定を4Kにして、全画面表示で見てもらえたらいいな。

岐阜城-岐阜公園正門より | 岐阜 故郷巡礼 by 杉山宣嗣

 

還暦を迎えるにあたり、生まれ故郷である岐阜の名所旧跡の撮影を開始した。
織田信長公、入城、岐阜命名450年の年と奇しくも重なった。

生まれ育った岐阜への感謝と祈りを込めて撮影したこれらの写真が、岐阜の名所旧跡の資料アーカイブとなり、人々に岐阜を知っていただき、足を運んでいただけることに役立てれば幸いです。
この写真はリアリズムの視点で撮影しており、高精細写真機により細部まで克明に描写している。

故郷巡礼 岐阜HP:  http://nsp-jp.com/gifu/

ネット社会でなかった時は、感情に訴える言葉や覚えやすいということでネーミングしていたと思います。
ところが、ネット社会になってきた現在では、ネーミングにもSEO対策的な考えを取り入れなければならなくなりました。

「検索」がキーワードです。

SEO対策のひとつとして「検索」に引っかかるということが重要になります。
まず、何かの時に検索されるのは、2つの言葉の組み合わせになると思います。

例として杉山の写真集や写真展の題名の付け方を解説します。
今回、写真展を開催するのですが、パプアニューギニアの「部族」の写真です。
「部族」がキーワードになるのはあたりまえなのですが、「部族」だけの1語の検索ではあまりにも多くの検索が出て来ます。
そこで、「部族」+「   」のもう1語を考えます。
作品の内容に合っていて、尚かつ検索した場合、他の検索内容にあまりひっかからない言葉を考えます。
「部族」+「肖像」を考えました。
検索するとほとんど出てこないので、「部族の肖像」に決めて、ホームページのタイトルに「部族の肖像」を入れたランディングページのようなものを作ります。
ランディングページには、googleのクロールが拾ってくれやすいようにする施術?もあるととても有効です。
2〜3日経ってgoogleのクロールが拾ってくれた頃に、「部族の肖像」で検索して上位に上がっていれば、そのタイトルは有効なものと言えます。もし、ダメな場合は新たな名前を考えます。

今回は、日本での写真展なので日本語での検索だけで充分ではあるのですが、一応、キーワードとして、「部族の肖像」「杉山宣嗣」「PAPUA NEW GUINEA」「TRIBE」を題名に入れています。
「部族の肖像 杉山宣嗣写真展 TRIBE@PAPUA NEW GUINEA」
ちょっと長いのですが、念のため他のワードでも引っかりやすいようにしています。写真展の題名としては最近は普通の長さではありますが、商品名ではちょっと長いですね。

ホームページだけではもの足りないので、同名の電子写真集もAmazon Kindleで発売させました。ホームページ上位検索があってのKindle写真集なので、Kindle写真集だけでは検索に上がらない事も多いように思います。

もうひとつ、Google+はA◯Bメンバーが使っている以外に、日本ではあまり参加している人は少ないと思いますが、実はGoogleが運営していることもあり、Google+の1投稿が検索に載りやすいようです。
SNSの拡散には参加者が少ないので有効ではないのですが、SNSの投稿が検索にのるのは、Google+の利用方法のひとつだと思っています。

以上の事は、もちろん作品が素晴らしいものである事が前提にはなるのですが、WEBの世界はgoogleのクロール(機械)相手なので、画像(作品)の善し悪しは、判断してくれません。
何かの時はお試しください。

電子写真集などを作る時に表紙の写真に文字を入れる、奥付やプロフィールを作りたいのだけど文字の入れ方がわからない?ということを耳にします。基本的なことをお話しします。

文字間隔を整えて、プロのデザイナーのようにキレイに見せる!

Photoshopを起動すると左側に「ツールパレット」が出ていますが、まず始めにこの説明からします。

スクリーンショット 2016-01-20 17.15.11

「横書き文字」「縦書き文字」を選択すれば、横書き、縦書きができます。その下にある「マスクツール」は何をする機能かというと、文字の選択範囲を作ってくれるものです。

部族の肖像+

このように木目の文字などを作る時に利用します。これは木目の写真の上でこのツールを使って文字の輪郭の選択範囲を作り、レイヤーマスクの追加ボタンを押すだけでできます。まあ、あまり使う事はないかも知れませんがそんな機能があるんだということを知っておいてください。

次に、「文字パレット」の紹介です。これが使いこなせなければ文字入れができないので、とても重要です。
ウインドウ<文字 でチェックが入っていると表示させることができます。
各機能はこのようになっています。

実はAdobeの製品、Illustrator やInDesignなども、これと同じような使い方なので、しっかり思えておくと他のソフトも比較的ラクに使えるようになります。

文字パレット

■「文字の種類」「文字の太さ」「文字の大きさ」は、わかると思いますので説明を省略します。

日本語 OpenType フォントはデフォルトだとキレイな文字が少ないのですが、Windowsだと「メイリオ」、Macだと「ヒラギノ」あたりでしょうか?杉山は「小塚ゴシック」なんてのが好きだったりします。MSやMS Pはちょっとどうかな??キレイだとは思えない。

欧文フォントは、ある程度の数があるので、イメージに合ったものを選ぶ事になります。ただし、ゴシックと明朝をごちゃ混ぜにするのはいただけません。日本語と欧文の併用する場合も同じです。

■ カーニングとは?

1.「メトリクス」、「オプティカル」のいずれかを選択して自動で設定する方法があります。

•「メトリクス」を選択した場合、使用する欧文フォントにペアカーニングの情報が含まれている場合には、その情報を使用して文字間が自動調整されます。(フォントによってペアカーニングの情報の有無がある)

•「オプティカル」を選択すると、隣り合った文字の形に応じてアキが調整され、個々の文字の形によって文字の詰め量が異なります。

自動でする場合はどちらかにしてみて、良い感じに見える方を選べば良いと思います。

2. 特定の文字と文字の組み合わせに対して文字間のアキを調整するために使います。文字間を調整したい文字と文字の間にカーセルを置いて、-100/0/25/200など数値を入力して手動で文字間が変えれます。
文字の右側のアキが変わります。

■ 字送りとは?

字送りとは一連のテキストに対して等間隔のアキを設定するためのものです。一連のテキストとは文章全体をさします。-100/0/25/200など数値を入力します。

手っ取り早く、簡単な方法は「カーニング」でメトリクス、オプティカルのいずれかを選択して自動で調整し、「字送り」で、全体の幅を決めると言うやり方もアリかもしれません。

通常、何もしないで文字入力をするとカーニング=0 字送り=0 の状態になります。PAPUAのところなんかは間が抜けて見えますよね。

0120 19.13.23+

スクリーンショット 2016-01-20 15.33.56 スクリーンショット 2016-01-20 15.33.04 スクリーンショット 2016-01-20 15.40.55

■ 文字ツメとは?

「カーニング」や「字送り」は、各文字の右側のアキを調整します。「文字ツメ」は文字の前後のアキが同じ割合で調整されます、日本語テキストで文字の間隔を変更する場合、文字ツメを使う事が多いようです。特に、小さな「っ」や「ゃ」などは使われる事が多いです。字ツメは%で設定し、%が高くなるほど、文字間のアキは狭くなります。

■ 行間隔の調整とは?

通常はフォントのサイズによって自動で設定されますが、行間を変えたい時にptの数値で変更します。

スクリーンショット 2016-01-21 7.56.55

スクリーンショット 2016-01-20 16.09.23 スクリーンショット 2016-01-20 16.09.59

■ タテ/ヨコに拡大、縮小とは?

文字を変形させる事ができます。ただし、あまり極端に変えると文字自体のタテヨコの太さも変わってしまいますので注意が必要です。

■ 文字を上下に移動とは?

文字によって、上下に移動したいものもあります。特にハイフンやフォントによっては数字も他の文字よりも下がっている場合があります。そんなときは、その文字1字を選択して、ptで数字を入力します。

スクリーンショット 2016-01-21 7.44.42

■ 文字の色とは?

カラーのところをクリックすると、「カラーピッカー」が開きます。ここで好きな色を選びます。「カラーライブラリ」をクリックするとPANTONEやDICからも色を選べます。また、よく使う色は「スウォッチに追加」で保存できます。

スクリーンショット 2016-01-20 14.48.41 スクリーンショット 2016-01-20 14.50.37

■ 下線、打消し線などとは?

文字に下線を入れたり、打消し線を入れたり、斜体にしたり、太字にしたりできます。ただし、斜体、太字などの場合、フォント自体にあれば、そちらを使った方が文字のバランスが良いのは言うまでもありませんよね。

写真に文字をのせる時にクッキリ見せたい!

写真に白文字でタイトルを入れたい場合があると思います。文字をのせる背景が暗かったりするとそのままキレイに白文字をのせる事ができますが、もう少しクッキリさせたいときがあります。

(暗い色の文字を使うときは、この作業の反対をすればできます。)

■ オリジナル

画像に白文字をそのままのせています。この作例の場合これでも良いのですがもう少しクッキリしたい。

01なし

■ グラデーションツール

文字をのせるあたりを、覆い焼きツールやトーンカーブ&グラデーションで暗くしておくのも1つの方法です。

(背景の画像はスマートオブジェクト化しておき、スマートシャープをかけています。スマートオブジェクト化しておくことで、画像のリサイズを繰り返しても画像の劣化を防ぎます。)

スクリーンショット 2016-01-20 22.34.57のコピー

02トーンカーブ

■ レイヤー効果のドロップシャドウ

もう1つの方法は、文字のまわりにシャドウをつけることです。

「レイヤーパネル」に、すでに文字レイヤーがのっていますが、文字レイヤーをアクティブにしておいて、fx」と書いてあるボタンを押し、「ドロップシャドウ」を選びます。

スクリーンショット 2016-01-20 22.46.10(2)のコピー

その後、「レイヤースタイル」パネルが開きます。いろんなスタイルがあるので試してみるのも良いですね。今回は、自然な形で文字の外側を暗くしたいので、ドロップシャドウを選んでいます。

● 描画モード:乗算…..これは回りを暗くする為。描画モードを変えてみて、どんな効果があるのかも知っておくと役立ちます。

● 右となりにカラーの選択がありますので、今回は濃いグレーを選んでいます。

● 不透明度:で最終的に自然に見えるようにしますが、最初は60%くらいでボケ具合を見た方が確認しやすいと思います。

● 角度:を調節すると影の落ちる方向が変わります。文字全体の回りにボカしたいので、今回は角度は関係ありません。

● 距離;で角度指定した方向への影の落ちる長さが変わりますが、今回は0px

● スプレッド:とサイズ:で広がりとボケ具合を調整します。

サイズ:を大きしすぎると近くにある文字にも影響が出てしまうので注意が必要です。

プレビューの下の窓でだいたいのボケ具合が確認できますが、最終的には画像上で判断しましょう。

スクリーンショット 2016-01-20 23.04.28

03ドロップシャドウ

こんな感じにシャドウが入っています。
0シャドウのみ3

他のレイヤースタイルの使用例
01moji

覆い焼きツールやトーンカーブでの作業とドロップシャドウの2つをを組み合わせる事で、より自然に文字を浮き上がらせる事ができるので、杉山の場合は併用しています。ただし、不自然な見え方がするような使い方は厳禁です。あくまでもオリジナルのイメージを壊さない程度に使ってください。

ソリッド•カラーとくっきりした境界線のあるWEB用グラフィックスには、WEB上にアップロードした時にJPGよりもPNGの方が適している場合があります。パソコンのモニターでは大丈夫でも、スマホでの表示で問題が出る事が多いのです。

写真などの階調がなだらかな画像の場合はJPGの圧縮60%以上であれば、問題なくキレイに表示されるのですが、電子写真集の場合も同じように、表紙に下記のようなソリッドカラーのロゴが入っている場合は、文字のまわりがシャギっていたり、クスんでしまうことがあります。これは画像サイズの問題やJPGの圧縮率の問題だけではありません。

そういった理由から通常、WEBでロゴを使う場合、PNG形式の画像ファイルを使う事が多いのです。

ただし、PNGはファイルサイズがJPGよりも大きくなってしまうのが難点ですので、電子書籍の画像としては、表紙や奥付けくらいに使用するのが良いと思います。

パソコンのモニター上では、ほとんど同じように見えてもスマホでの表示は下記のようにPNGの方がキレイに表示されます。色空間はともにsRGB。

ns
460x460pxでファイル形式をpngで作成

ns
460x460pxでファイル形式をjpg最高圧縮で作成

Chromeをブラウザで使っている方で、最近、リンク先がスパム広告に飛ばされるってことありませんか?

僕のPCでこのところ何故か頻繁にそういったことがおこるようになってしまいました。

実は追加したChrome拡張機能に問題があるものが出てきたようです。拡張機能ってとても便利なので使っている方も多いと思います。

このChrome拡張機能はGoogleとは関係ない会社が作っていて、Googleが認可した優良機能拡張に関してChromeウエッブストアに登録されています。

しかし優良機能拡張だったものを悪意のある会社が買収して、スパム配信に悪用している。ということが出てきました。

一度追加してしまった機能拡張は自分で取り除くしか方法がありません。ただどれが悪意のあるものなのか見つけるのがちょっと大変ですが、下記の方法で僕は見つけました。

ご自分が追加している機能拡張を現在のChromeウエッブストアで検索してみて、登録がないものが怪しいのです。

環境設定<機能拡張…一番下にある他の拡張機能を見るから検索できます。

実は、この半年くらいWebの勉強をしている。

なぜ?写真家なのに??….って思うかもしれないが、今現在はWebの世界を知っていなければ生きていけないようになってきてますよね。

Webマーケティング、SEO、プログラムなどなど知っていないと損?をするような時代になったといえるのではないでしょうか?

杉山は、SNSを上手く利用している写真家として知られていますが、確かに「COSPLAY SHOWCASE」アプリケーション写真集の時も協力制作会社、スポンサー、モデルになった人達、ほとんどがTwitterを使って見つけ出しました。

また、「Kindleで写真集を出そう!」などの電子書籍は、HTMLとCSSでほぼできています。本を出した頃、このHTMLとCSSの知識が少ししかない状態で、そのような著書を出したので、「知らなくても出せる」のは良いのですが、自分自身では何故これでOKなのかの理屈?を完全に知った上でないと納得がいかなかったのです。

ということで、今はHTML5&CSS3が書ける、スマホ対応サイトも作れる(…複雑なものでなければ)写真家になってきました。(笑)

パララックス(視差効果)…
写真をやっている人はなんとなくわかるんじゃないかと思いますが….
Web業界で言うと画像が重なるように移動したりするサイトの事を言います。
オブジェクトが動いたりするのはアニメーション効果で、パララックスと上手く組み合わせると効果抜群なんです。
ところがパソコンとAndroidではそのパララックスが動くのですが、iPhoneやiPadなどのmobileSfariでは動かないものがほとんどなのです。

ところが、iPad上でそれも無料で簡単にパララックスサイトができるということで作ってみた。
本当に簡単だ….初めてでも素材さえ用意してあれば10分もかからない。

cupidnote
Cupid note
slate.adobe.com/a/7ZwZA

kidsland
KIDS LAND
slate.adobe.com/a/74qJv

pastdays
PAST DAYS
slate.adobe.com/a/Wlr33

privatevie
Women Private Viewing 2.0
slate.adobe.com/a/Wyzk4

privatevie1
Women Private Viewing 2.0
https://slate.adobe.com/a/2zadK

gday
G’days!
https://slate.adobe.com/a/WoDPa

新しい事始めました!

写真のSNSを使った可能性を追求したいと考えています。そのひとつとしてFacebook上に、Self Photoのコミュニティを作りました。
ご自分が写っている写真(Selfphoto)を投稿して、Facebook友達の輪を広げよう! というFacebookページを作りました。
Facebookのプロフ写真はとても重要です。良い写真になるようにアドバイスもさせていただきます。
みなさん、遊びにきて下さいね!

selfphoto