OGP対応のホームページ制作について

OGP対応のホームページ制作について

こんにちは。
WEB制作をしているセリーナと申します。
今回はWEB制作時によく依頼されるOGPについてお話ししたいと思います。

OGPとは??
いきなり、OGPと言われてもなんだこれは?と思う方もいらっしゃると思いますが、
Open Graph Protocolの略で、SNS(facebookやLINEなど)上で張り付けたURL内容を簡易的に表示させる仕組みです。
依頼される方の中では「facebookにURL張り付けたときのアレ」と言う方もいます。
表示させたいページにOGPのタグを設定しておくと、URLが張り付けられたときに指定された画像やタイトル、説明文descriptionが表示され、SNS発信する方にとってはページの簡易部分が伝わり便利な機能です。

Open Graph Protocolのイメージ
Open Graph Protocolのイメージ

では、どのようなタグをページ埋め込むか。
HTMLの<head>~~</head>の中に

このタグを入れます!

基本的に会社様のよりご依頼を受けることが多いので

の部分はcompanyとすることが多いです。

また、ここで使う画像の大きさは、1200x624pxで私は作っています。
どうやら比率が決まっているようで、その規格にあっていないとうまく拾ってくれないようです。

また、完成したURLをfacebookに張り付けてOGPも更新したのに変わらない!とおっしゃる方もいます。
そうなると、何回更新しても変わりません。
それは、faceebookがそのURLのOGPを記録してしまったために起こるので
その記録を消さなければいけません。

では、どうするのか。

https://developers.facebook.com/tools/debug/
ここのシェアデバッガーを使います。

facebookシェアデバッガー
facebookシェアデバッガー

まず、更新したいURLを
入力部分にいれ、右側の「デバッグ」ボタンを押します。
そうすると、そのURL(ページ)のOGP部分が表示され、一覧に表示されます。
(ここで、エラーがあった場合にはエラーが表示されます。)
そこで見れるのは、おそらく古い情報なので、次に、
「もう一度スクレイピング」というボタンをクリックします。

そうすると、新しいOGP部分が読み取られ、
最新版となり、その後、新に投稿部分にURLを入れると切り替わります。
更新されなくて悩んでいたから、ぜひ、このデバッガーを使って更新してみてくださいね。

新人Webデザイナーが勉強で使っているサイト、参考サイトのまとめ10選

新人Webデザイナーが勉強で使っているサイト、参考サイトのまとめ10選

こんにちわ。
最近、夏はすぐそこ!っていう暑さにビビっている夏嫌いのotarieです。。٩( )و

私は覚えるのもそんなに得意でない上に、寝たら忘れるという良くも悪くも厄介な自分と戦いながら日々悶々と勉強し、学んでいます。勉強していく上で難しい言葉などの羅列が続くと急に頭に入って来なくなったりするのですが、こんな私でもすごく分かりやすく、しかも楽しく(ここ重要!)勉強ができるサイトをご紹介しようと思います。

こんな記事はたくさんある上に有名どころのサイトを載せちゃいますが、自分の記録として、あとは全くWebの勉強が初めてで、どうやって勉強したらいいのか分からない!!という方の参考になれれば。。という気持ちで書きますね☝︎( ‘ω’ )☝︎

 

Progatehttps://prog-8.com/

こちらのサイトはとても見やすく、1つ1つの課題のボリュームがちょうど良く、実際にコードを書いていったりするんですが、とてもすんなり頭に入って来るようになっていて本当にありがたいです。コンテンツも充実です。かわいいキャラクターにも癒されながら勉強ができますよ^^

 

ドットインストールhttp://dotinstall.com/lessons

こちらのサイトは1つのレッスンが2~3分の動画で学べるサイトです。実際にコードを書きながら、説明を聞けます。レッスンのボリュームもたくさんあり、とても分かりやすくオススメです。あれどうすれば良かったっけ(°▽°)という時もすぐに見れます!(スマホでも見れます)

 

Schoohttps://schoo.jp/guest

こちらのサイトは、授業スタイルで毎日の生放送の授業もやっています。生放送の授業は夜なので、仕事してるけど勉強したいと思っている方にもオススメです。録画のもので遡って勉強したり、生放送で新しい情報を取り入れたりと幅広いスキルに対応していていいですね^^

 

PHOTOSHOPVIPhttp://photoshopvip.net/

こちらのサイトは、無料デザイン素材を探したり、Web制作のテンプレートやWebに関する様々な情報を見たり、PhotoshopやIllustratorのチュートリアルで作り方やテクニックを学んだりと幅広い勉強ができて、サイトも見やすくオシャレでオススメです。

 

株式会社 LIGhttps://liginc.co.jp/

こちらのサイトはとても有名ですよね。様々なクリエイターさんが色んな記事を載せていて、とても勉強になることが多く、見やすくオシャレで、なんといっても面白い記事がとても多くサーフィンしまくってます。技術系からエンタメまでとても面白い記事がたくさんで大好きなサイトです。

 

GENDAI DESIGNhttp://gendaidesign.com/

こちらのサイトは、Webサイトを作る時の参考サイトとして重宝しています。たくさんの綺麗なデザインのサイトをまとめているのですが、トップページだけでなく、下層ページのデザインまで見れるので、選びやすくとてもオススメです。

 

S5-Stylehttp://bm.s5-style.com/

こちらのサイトも、参考サイトとして見ています。もうこのサイト自体が綺麗でカッコよくてオシャレなんですが、ここにまとめてあるサイトも海外サイトのようなオシャレでカッコいい日本のサイトを見つけることができます。カッコいい日本語フォントの使い方などの勉強にもなるし、見ていて楽しいサイトでオススメです。

 

html5 Galleryhttp://html5gallery.com/

こちらのサイトは、海外サイトのまとめなのですが、HTML5で作られたサイトのまとめなのでここにあるサイトのソースもとても参考になり、勉強するにはとてもいいなと思っているオススメのサイトです。

 

I/O 3000http://io3000.com/

こちらのサイトも参考サイトです。とてもステキで印象的なサイトがたくさんあります。海外サイトだけでなく日本語サイトも数多くあります。カテゴリーの幅がとても広いので検索もとてもしやすくオススメです。

 

Pinteresthttps://jp.pinterest.com/

こちらのサイトは、皆さんも知ってる方が多いと思いますが、私はよく使っています。Webサイトだけでなく、バナーやボタンなどの細かいパーツのデザインなど、世界中のデザイナーさんが投稿したものをカテゴリー別に検索することができ、勉強になります。Web関連以外にもすごく参考になるものがたくさんあったり、ただ写真を楽しむだけという場合にもすっごくオススメのサイトです。

 

いかがでしたか?

他にもたくさん参考になるサイトがあると思いますが、これから勉強していく中で、これはオススメ!!というものを見つけたら、また紹介させてください^^

ではまた、次回をお楽しみに〜

Webで使う『画像形式』。どう使う?

Webで使う『画像形式』。どう使う?

こんにちわ、最近左だけ花粉症?のWebデザイナー otarie です。
今回は画像形式のJPEGPNGGIFSVGについてのお話をしようと思います。

各画像形式についての特徴や、メリット、デメリットについて調べたことをまとめてみました。

・Joint Photographic Experts Groupの略
 拡張子は「.jpg」または「.jpeg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

インターネットでよく使用されている画像形式ですね。
JPEGは圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるので、たくさんの色を必要とする写真や複雑なテクスチャーに向いている画像形式です。
グラデーションも綺麗に表現できます。

デメリットとして、JPEGは高い圧縮率で圧縮できるのですが、その際、多少の劣化を伴います。
圧縮率を上げるとファイルは小さくなるんですが、画質はブロックノイズのようになり劣化してしまう場合があります。
また、アイコンやアニメ調の平坦なイラストなどは、にじんだように汚くなってしまいます。
さらに、一度低解像度に圧縮した画像は、元に戻すこともできないので元データをバックアップしておく必要があります。

拡張子のjpgjpegの違いは?
MS-DOS時代に拡張子が3文字までという制約があったためjpgを使用していました。
現在では、普及しているOSで3文字までの制約はなくなったのでjpegを使用することができるようになり、混在するようになっているようです。

注意点
UNIX上では大文字と小文字の識別が別ファイルとして認識されるので.jpg」と「.JPG」の違いには気をつけましょう。

Portable Network Graphicsの略
 拡張子は「.png
GIFに替わるライセンス・フリーの画像形式として生まれた画像形式
 :可逆圧縮の画像フォーマット

PNGは可逆圧縮で複数の透過処理ができる画像形式です。
フルカラーにも8bitカラーにもすることができます。
この画像形式は圧縮率が高く同じ内容のGIF画像より10%~30%程度ファイルサイズが小さくなります。圧縮によってデータが捨てられてしまうことがないので、データを完全に復元することができます。
また、ライセンス問題の不安がないのも特徴です。

デメリットはJPEGGIFと比べると新しい技術になるので、古いPCやブラウザ、携帯では表示できない可能性があります。
また、フルカラーにするとJPEGよりファイルサイズが大きくなってしまいます。
アニメーションには対応していません。

PNG-8
Internet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。  
GIFと同じ、インデックスカラーモードの256+1色透過を使うことができて、グラデーションなどを含む画像などに対しては、GIFよりも圧縮率が高い場合が多いです。

PNG-24(32)
JPEGと同様にフルカラー(約1,677万色)の色を扱うことができて、さらにPNG-32ではアルファチャンネルを使用することができます。
注意点として、Photoshopでは、PNG-32PNG-24とされているので勘違いしやすいですが、これは32bitのことです。
IE6に対応させるには、filterJavaScriptを使用する手間がかかってしまい、ファイルサイズも他の画像フォーマットに比べて、重くなる傾向にあります。

Graphics Interchange Formatの略
 拡張子は「.gif
・最大8bit256色)までの色を扱うことのできる圧縮画像形式

256色以上必要としてないロゴやリンクボタン、アイコン、アニメ調の簡単なイラストなど、線の境界(輪郭)もキレイに作ることができる画像形式です。
データ容量も小さく、透過処理もできます。また、256色までのアニメーションを作ることができるのも特徴です。    

デメリットは、色数に制限があるので、風景写真など多彩な色を使う場合では乏しくなってしまいます。
一つの画像で色を256色しか使用できないため、シンプルで色数が少ない画像の場合は、png形式よりファイルサイズを若干小さくできることもありますが、実際のところ、あんまり変わらないです。

Scalable Vector Graphicsの略
 拡張子は「.svg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

SVGJPEGPNGGIFとは異なり、ベクター画像なので、1ピクセル未満のオブジェクトでも画像を拡大・縮小しても画質が劣化せずにくっきりと綺麗に表示することができる画像形式です。

ベクタ形式
点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現するため、劣化せずに表示できます。

ラスタ形式
ラスタ形式は「ドット絵」なので、画像を拡大すると、輪郭がギザギザになります。
ですが、複雑に色や図形が組み合わさったデータ(写真など)の表現には、ベクタ形式よりラスタ形式の方が向いています。
JPEGPNGGIF、などはすべてラスタ形式の画像です。

また、SVGは拡大・縮小に強いので、レスポンシブWebデザインでとても有効です。
ロゴ画像などに使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
SVGは画像ファイルですが、テキストエディタで中身を見ることができるので、作成や編集も可能です。JPEGPNGGIFの画像ファイルをテキストエディタで開くと文字化けしてしまいます。
また、マークアップ言語である特徴を活かしてHTMLSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない斜めや曲線の表現ができます。

デメリットは、写真や手書きのイラストなど、色や形状が複雑なオブジェクトの場合は、点や線の集まりでは表現しきれないので不向きです。
また、あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまいます。

いかがでしたか?
画像形式を全部理解するのがとても難しく、まだまだ勉強中ですが、Webデザイナーとして大事な知識だと教わってこうして色々調べて行くと、だんだんその大事さに気づいてきました。

また次回をお楽しみに~^^

Webデザイナーの壁!

みなさん、初めまして^^

Webデザイナー新人のotarie(オタリー)です。

初めての職種、環境にワクワクしながら、3月からデザイナーとして頑張っています!
早速、思いっきり壁にぶつかってます(^^;)

今回はその壁の中でも”色”について紹介したいと思います!
私は前職でネイリストをやっていた時、毎日いろんな色を扱っていました。
しかし!この扱い慣れていたはずの色にかなり悩まされています。。。

伝えたいイメージや、言葉をいかに色を駆使して伝えることができるかどうか。これが本当に奥が深く難しいです。
色んな色を組み合わせても、バランスが悪い!チョイスが悪い!と、うまくいかないのです。。
ウニウニ試行錯誤して頑張ってみてもうまくいかず、震えました。。

そこで、色んなアドバイスをいただく上で少しづつ分かった失敗の理由

1、色を使いすぎ
メインカラーの色があったとして、そこから補色を使う際にルールを無視し て割り当てていった事で何を伝えたいのかわからない、ごちゃごちゃしたものに仕上がる。
    必要最低限の色に抑える。2~3色程度。(画像の色は抜きで)

2、色を揃える
暖色・寒色を考えずになんとなくの雰囲気で色を使ってしまう。
ピンポイントではなく全体のバランス、内容を理解して選ばないと、伝えたいものとは違う印象になってしまう。
 →どんなイメージを伝えたいのかをまず理解して、暖色・寒色、雰囲気を意識して配色する。

3、彩度・明度のバランス
統一感を意識して同系色で配色したけど、彩度・明度などを考えなかったので、色の各々の印象が強くなり過ぎてしまい、結果、全体のイメージがバラバラになり統一感がなくなる。
 →色自体は変えずに、彩度・明度で色の強さを変えることで印象も柔らかくなり統一感が出る。

この3つの意識をするだけでも印象がかなり変わってだいぶ良くなりました。
(震えも止まります。。)
あとは詳しく配色について書かれているサイトを見て勉強しています。

参考にしているサイト:http://www.hp-stylelink.com/news/2013/07/20130708.php

サイトでの勉強以外でも、色んなサイトがどんな色を使っているかを調べることができるツールもあります。参考にするにはとても良いです。URL入力で、好きなサイトの配色も見れますよ^^

普段意識しなくても、人はその色を見てパッとイメージできるものがあります。
例えば、下の画像を見てください。

Web Colour Datahttp://webcolourdata.com/

これは、これらのサイトで使われている主な色です。
みなさんはこの画像を見てどう思いますか?
それぞれの色を見てそのサイトだとイメージできると思います。

”色”って深い!
色はサイトにとってとても重要ですね。これからも大事に扱って、根気よく向き合っていつかモノにしようと思ってます。
まだまだ色についての壁は高そうですが、他の壁も一緒にどんどん壊していけるよう頑張ります!

おまけですが、私の好きなアーティストAlberto Sevesoのポートフォリオサイトです。

  

Alberto Sevesohttp://www.burdu976.com/phs/

彼のように色を自由自在に操りたいもんです。。

初歩的な内容で恐縮です。。
また次回をお楽しみに!