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

Photoshopの画像アセットで余白そのままで書き出しする方法

photoshop 画像アセット 余白 そのまま やり方

こんにちは!YOUKNOWです。

明日からはお盆なのでお休み中は更新を停止して、実家に帰省します。

そんなことよりも

Photoshopの画像アセットめっちゃ便利

なのですが、痒い所に手が届かないんだよなぁと思っていて、個人ではずっとSlicyを使っていました。

しかしお仕事だとインストールできるアプリケーションに制限があるため、画像アセットを使い始めました。

画像アセットには微妙な所があって、そのうちの一つが大きさ(余白を保ったまま)書き出しして欲しいのに!という時です。

画像アセットは、オブジェクトのサイズを基準にして書き出しを行うため、オブジェクトの大きさで書き出しされてしまい、意図的に余白を含ませたい時などに非常に不便です。

今回はその余白を保ったまま書き出す方法をご紹介します。

※PhotoshopCC2014以上が対象です。

Photoshopの画像アセットで余白そのままで書き出しする方法

とはいってもすっごく簡単ですが、

書き出ししたいレイヤー(グループ)にベクトルマスクを追加するだけです。

少し詳しく説明すると、書き出したいレイヤー(グループ)に画像アセット用の名前をつけて、(例:btn_assets.png)そのレイヤー(グループ)にベクトルマスクを追加します。

photoshop 画像アセット 余白 そのまま やり方

ベクトルマスクの追加方法は、ベクトルマスクを追加したいレイヤー(グループ)を選んで、レイヤーウィンドウの下の方にある■の中に●が書いてあるマークをクリックするだけです。

photoshop 画像アセット 余白 そのまま やり方

こうなればベクトルマスクが追加されています。

後はそのまま画像アセットのフォルダの中に、余白が保持されたまま書き出しされた画像があるはずです。

WEBデザイナーにとってのWindows10について

こんにちは!YOUKNOWです。

以前から頭を悩ませてきた、クライアントからのWindowsとMacで見え方が違う。Windowsのほうがきたないという問題。

その問題の多くは解像度の違いや色々言われているわけですが、個人的に一番大きいと思っている(というか多分そう)なのはフォントだと考えられています。

Macには標準でヒラギノ角ゴが入っていますが、WindowsはMSPゴシックだったり、メイリオだったりとMacとWindowsで違うんですよね。
文字のアンチエイリアスのかかり方もMacとWindowsでは違う

 Windows から見るMSPゴシック

Windows から見るMSPゴシック : WEBROCKETSマガジン様より引用

昔からインターネットを触っている人は馴染みぶかいこのアンチエイリアスのかかっていない文字

そうしたWindowsとMacの差異を少しでも解消しようと、我々WEBデザイナー・マークアップエンジニア一同は、CSS3のアンチエイリアスなどで影の見えない努力をし頑張ってきた。

その影の努力のやり方は以下のコードを追加し、アンチエイリアスをかけたい部分にクラスを追加すれば良い。これだけでWindowsでもアンチエイリアスのかかった文字が実現できる

しかし大きな問題点はMacとWindowsで同一のフォントがなかったところによる問題が大きい

アンチエイリアスをいくらかけようが、そもそも文字そのものの形自体が違っているのだ。

これでは決定的な問題解決にはなっていない


「MacとWindowsでは搭載されているフォントが違いまして….」
「そこをなんとかするのがお仕事なんじゃないんですかねぇ…?」
「いえ..ですから…」

となってしまう。(もちろん誇張表現)実際はちゃんと説明して納得していただいてます。

しかしこの度Windows10が発表されこの問題についにお別れを告げる日が近づいてきた感が…!

Windows10 / OS X Mavericks で同一フォント「遊ゴシック」が標準搭載に

Windows10 OS X Mavericks 遊ゴシック

実はMacには一足さきのOS OS X Mavericksにて既に遊ゴシックが標準搭載されていました!

そしてこの度Windows10になることにより、Windowsにも遂に遊ゴシックが搭載!!

遊ゴシック

そのため、ようやくWindowsとMacで同一フォントが標準搭載されたことに!!!

今後のWEBデザインの標準は「遊ゴシック」に?

いままでカンプ上でのテキスト部分には、クライアント様の環境によってヒラギノ角ゴかメイリオのどちらかを指定してきましたが、今後は遊ゴシックに統一しても良いかもしれません。

またiPhoneでもiOS6以上であれば遊ゴシックは利用可能!使うしかない…!!

遊ゴシックも踏まえて、CSSのフォント指定を見直しました。

ただしまだWindows10じゃない人もたくさんいるため、自分はCSSでのフォント指定は、

このような形にしてみました。

WEBは表示するデバイスが本当に様々なので、バッチリ合わせるというのは不可能なのですが、なるたけご希望に添えるように頑張って作業しています。

個人的には、表示するデバイスごとに最適な見え方を探る..というのが今後の課題になってきそうです。

youknow.jp 遊ゴシック

なお、このブログも表示するデバイスによって、見え方が違います。よろしければパソコンやお手持ちのタブレットなどでご覧になってみてください。

Googleの HTML CSS コーディングガイドライン

google 推奨 コーディングガイドライン

忘備録としてメモメモ

こんにちは!YOUKNOWです。

インターネットを徘徊していたらこんなものを見つけました。

Google推薦 HTML CSS コーディングガイドライン

この記事はGoogleウェブマスター向け公式ブログの記事で紹介されている、Google HTML/CSS Style Guideに書いてあるコーディング方法と感想が書かれている記事

すべての内容はDATARAME HOMEPAGEさんでまとめてくださってますので、忘備録らしく自分が気になったものをピックアップして紹介していこうと思います。

HTMLの引用符

属性値を引用する場合、必要に応じて二重引用符を使用します。

javaScriptなどではシングルクォーテーションが良しとされてた気がしますが(どちらでも可)、HTML/CSSだとダブルクォーテーションのほうが良いのですね。

タイプセレクタ

タイプセレクタでIDとクラス名を修飾することは避けたほうが良いそうです。
推奨された方法で書くことで、パフォーマンスも向上するそうです。

たまに他の人のコードを見たときについてるときがあります。
CSSの優先度にもかかわってきているのでしょうか。

プロパティは一括して指定する

可能な限りプロパティは一括して指定することが望ましいようです。

これpaddingは修飾できることをしっていたのですが、fontとしてここまでガッツリ一括して指定できるとは知りませんでした。
ふえー..こんなにできるんですねぇ..。

CSSの宣言順序

宣言する順番をアルファベット順に
ベンダープレフィックスなどに関してはまとめて記述したほうが良いようです。

これも知らなかった…。なんとなくwidthやheightとかpositionとか位置や大きさ系を上に書いていました。

プロパティ名の終わりにスペース

プロパティの終わりを表す ; のあとにスペースを使う。

このスペースがあることで、cssファイルが肥大化すると思っていて避けていました。
逆にスペースを入れたほうが良いのですね。

ただ最近だと納品するときにコードを圧縮かけることが多いので、ここらへんの記述のスペースとかに関してはあまり気にしなくても良いのかなぁなんて思ったり思わなかったり。

最後に

だいたいのことはできていましたが、逆に全く知らないものもありました。

Googleは検索の王様なので、Googleが推奨するガイドラインに添えるところは添って、あとは社内のガイドラインとかと照らし合わせていくことが大事ですね。

インデックス?? Photoshopの挙動がおかしいときに見直すべきモード

インデックス Photoshop おかしい

画像を新しく読み込んだときなどに、Photoshopがうまく動かないとき、ありませんか?
具体的にはうまく編集が行えないだとか…。

インデックス Photoshop おかしい

そんなときにレイヤーを見てみると、見慣れないインデックスというレイヤーの名前がついているインデックスモードになっている可能性が高いです。
今回はそんなインデックスモードを解除する方法をご紹介します。

Photoshopのインデックスモードを解除する方法

インデックス Photoshop おかしい

解除のやり方は簡単で、ツールバーからイメージ > モード > RGBカラーに変更するだけ!

変更が成功すると、レイヤー名のインデックスがいつも通りの背景という名前になっているはず!

position:absolute で中央に配置するやり方

position absolute 中央

WEBデザイナーらしくコーディングのこともかいてみようと思います!

今回はposition:absolute;で中央に配置するやり方を2種類ご紹介します。
どちらを使っても得られる結果は同じですが、知っているだけで応用がきいたりするので両方ご紹介します!

01.margin:autoで画面中央に配置するやり方

CSS

中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。

画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)以外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。

サンプルではtop.left.right.bottomに0を指定していますが、これらの数値をいじっても問題はありません。
ただし、top.left.right.bottomの初期値はautoになっているため、これを解除するために指定しています。

そのため、topだけに80pxを指定するとタテ・ヨコ画面中央からタテのみ80px下に行く指定することも可能です。

margin:auto;をmargin:0 auto;にすれば、ヨコ方向のみ中央寄せにすることもできます

02.transform: translateで画面中央に配置するやり方

CSS

こちらはtransform:translateで配置する方法。

中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。

画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)意外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。

position absolute 中央

position:absolute;でブラウザのタテ50%、ヨコ50%に要素を配置します。しかしそのままでは画像のようになってしまいます。
ブラウザの中央から要素が出てくるためです。

以前では中央にしたい要素の半分の値。例えば写真が500pxであれば、その半分250pxをネガティブマージンで差し引きすることで、中央にしていました。
margin-left:-250px; margin-top:-250px これで中央にしていました。

transform:translateも考え方は同じですが、わざわざ半分の値を計算しなくても-50%という指定だけで中央表示に出来ます。

【Photoshop】一括で複数のレイヤーの設定を変えることができるPhotoshopプラグイン【Ditto】

Ditto

こんにちは!YOUKNOWです。

便利そうなものを発見しました。

Dittoです。

Dittoとは?

DittoはPhothoshopの無料プラグイン。

レイヤーの後ろにHTMLのような#btnTextのようなIDが指定されています。
例えば#btnTextのIDの設定を変更すると、#btnTextと名前の付いているレイヤー全ての設定が変わるようです。(まだ未検証)

設定できるパラメータ

  • 塗り
  • テキスト
  • 表示・非表示
  • フォントサイズ
  • フォントの種類
  • フォントの色
  • 行の高さ

必要環境

PhotoshopCC2015 Mac / Windows

久しぶりにめっちゃ試してみたい…!と思うPhotoshopプラグインです。
少しの間使ってみて、めっちゃ便利だこれ!!となりましたら、再度記事にてご紹介したいと思います。

KIRINのWEBサイトのデザインがすきだからまとめてみた

KIRIN WEBサイト

こんにちは!YOUKNOWです。

KIRINのWEBサイトが良いという話を以前の記事であげました。
そのおかげで気づいたのは、KIRINのWEBサイト好きかも…ということ!

なので!KIRINのWEBサイトで好きなページ20ページを!まとめて公開しておこうと思います。

KIRIN WEBデザインまとめ

パーフェクトフリー

KIRIN WEBサイトまとめ

一番搾り1ケースを抽選でプレゼント

KIRIN WEBサイトまとめ

キリン フレビア

KIRIN WEBサイトまとめ

KIRIN キリン 氷結®

KIRIN WEBサイトまとめ

グランドキリン

KIRIN WEBサイトまとめ

KIRIN キリン ハードシードル

KIRIN WEBサイトまとめ

KIRIN FIRE(キリン ファイア)

KIRIN WEBサイトまとめ

一番搾り フローズン生 デコビールキャンペーン

KIRIN WEBサイトまとめ

キリン メッツ スペシャルサイト|キリン

KIRIN WEBサイトまとめ

ココナッツウォーター | トロピカーナ|Tropicana

KIRIN WEBサイトまとめ

のどごし生 ワイワイは、うまい!キャンペーン

KIRIN WEBサイトまとめ

キリンフレビア

KIRIN WEBサイトまとめ
キリンフレビア

OMOTESANDO CIDRE by KIRIN HARD CIDRE

KIRIN WEBサイトまとめ

キリンレモン

KIRIN WEBサイトまとめ

果汁とお酒だけ|KIRIN本搾り(TM)マガジン

KIRIN WEBサイトまとめ

脂肪と糖に立ち向かえ!食事と一緒につぶやいてパーフェクトフリーが当たる!

KIRIN WEBサイトまとめ

純水果汁シリーズ

KIRIN WEBサイトまとめ

キリン メッツ

KIRIN WEBサイトまとめ

生茶

KIRIN WEBサイトまとめ

食事の生茶

KIRIN WEBサイト

スマホサイトを印刷するには「Print1」が便利!

縦長 画像 印刷 Print1

こんにちは!YOUKNOWです。

デザイン修正指示を出すときや、プレゼンする際等にWEBサイトをプリントする機会は多いと思います。
自分の場合、言葉だけの修正指示だと修正箇所を見落とす原因になりがちなので、最近はプリントアウトして赤ペンでマークしてから修正を行うようにしています。

しかしWEBサイトのデザインってすっごい縦長なんですよね…。最近作った中で長かったなぁと思ったサイズは横640px×縦14870px….!!
特にスマホサイトなんかはどうしても縦長になりやすいです。

ただ、縦長の画像をふつーに印刷しようとすると問題があるんですよね。
その問題が何かというと…

スマホサイト 印刷 Print1

こうなってしまうんですよね…。縮小して一枚におさめてくれるので詳細が全くわからなくなってしまいます。
スマホサイトやLP(ランディングページ)を印刷するのも困ってしまいます。

今回はその縦長になった画像を一枚の紙に配置してくれるWEBサービス「Print1」をご紹介します。

Print1とは

縦長の画像を1枚の紙に自動でレイアウトしてくれ、印刷まで出来る素敵すぎるサービス。
特にWEBデザインにありがちな、縦が異様に長い画像を印刷する際に絶大な効果を発揮します。

スマホサイトやランディングページ、デザインカンプの印刷にもピッタリです。

Print1を使用して印刷した場合

スマホサイト 印刷 Print1

利用環境

  • 対象ブラウザ:Google Chrome 最新版
  • 対応画像形式:jpg,gif,png,svg

Print1は制作業務等に使用しても大丈夫? –大丈夫だ、問題ない。

Print1で一番うぉおおおお!と思った所は、WEB制作業務で使っても問題ない所

通常WEB制作業務等は機密情報を守る契約をすることがほとんどで、その為にどんなに便利なサービスがあれどサーバーにアップロードする系のサービスは利用できないんですよね…。
万が一それで流出してしまったら問題になってしまいますから…。

しかしこのPrint1は全てローカル上で処理が完結されるような設計になっています。
その為外部に画像が流出する危険性はない設計になっております!素晴らしい…!!!

技術的にはHTML5のFileAPIを使って実装されているようです…!

飲料メーカーのWEBサイトを調べてみた

WEBデザイン 飲料 Mets

こんにちは!YOUKNOWです。

業務で飲料のサイトデザインを行った時に、リサーチとして他の飲料のサイトはどんな感じのデザインなのかを調べました!

結果からいうとメーカー別で特にWEBデザインに力を入れていると思ったのはKIRINで、時点でコカ・コーラ社じゃないのかと感じました。

WEBデザイン 飲料 アクエリアス

特にコカ・コーラ社のアクエリアスのデザインは個人的に大好きなデザインでした。
1年か2年位前まではポカリスウェットのほうが好きでしたが、今はリニューアルされたアクエリアスのサイトのデザインのほうが好きです。

わりと飲料とかって、大事なのは味もですがブランディングもとっても大事だと思うのです。
飲料のサイトでWEBサイトに載せなければいけないような情報ってあまりないなあって思ったりします。

そこをキャンペーンとか、グラフィックとかで飲料自体のファンを増やしたりすることが大事だと考えています。
だからデザインはある程度魅せる感じにしてしまっても良いというのが持論です。

とりあえず飲料業界でも有名な上記企業を調べました。
(リンク先は全て飲料商品一覧のページに飛ぶようになっています)

そういった意味で見るとやっぱり飲料別のブランドサイトにこだわっていて、ぱっと見のデザインにもこだわっているKIRINさんが一番効果的なWEBサイトを構築できているんじゃないのかなぁ..?と考えました。

そしてどの企業さんもスマートフォンに最適化して作ってある所が多いと感じました。
中にはもうこれ完全にスマートフォンメインで、パソコンはおまけレベルなものも多くありました。
もうこれが業界のスタンダードですが、個人的にはPCデザインを眺めるのが好きなのでしょぼんです。

とはいえ、こうして全体を見ると本当にKIRINはWEBデザインに力を入れているんだなあと強く感じました。もうほぼ独走状態と言ってもいいレベルで..。
これはしっかり若者の心をぐわっと掴んでいるはず…!WEB製作者はがっしり掴まれている…!

そういえばKIRINはSplatoon!のフェスなんかでもマーケティングしてますね…。
なーんて思っていたら、そういえばGRANDKIRINでSNSを使ったすごいマーケティングしてたのを思い出しました。

それについて調べていたら、どうやら優秀なマーケティングチームが社内にいる模様…!さすがです。

WEBデザイン 飲料メーカー

そんなこんなで今朝KIRINが遂にASAHIを抜いた!(ビールで)という記事を見ました。
やっぱりこういう活動が実を結んでるんだろな〜なんて思って、改めて検索をかけてみたら

KIRINが抜いたASAHIが抜いたサントリーが抜いた…とぐわっと出てきました。

これは水面下の戦いが激しい業界でもありそうです…!

俺的まとめ

WEBデザインに関してはKIRINが圧倒。
これから飲料のサイトデザインはKIRINさんのデザインを参考にしながら制作しようと思います。