[B! facebook][Twitter] akky_orangeのブックマーク

【2016年版】Facebook、Twitterに最適なOGP記述設定まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、ディレクターのエリカです。突然ですが、OGPの記述って意識していますか？ OGP（Open Graph protocol）とは、単刀直入に言うとSNSでシェアしたときに表示される情報のことです。 OGP記述を設定することで、SNSでシェアされたときの視認性が高まるので、設定は必須としたいところです。過去に何度か設定変更があり、いつも「何が最新なの？」と迷ってしまうので、2016年最新版をまとめてみました。 OGPの記述設定 HTMLの内に下記を記載します。 //共通項目 <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ" /> <meta property="og:url" content="ページのURL" /> <meta property=

akky_orange 2016/12/05

リンク

Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方

TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。アイコンと文字（現在地表示）アイコンと文字（通常表示）ボタンこれらを再現してみると、以下のようになります。偽Twitterみたいな感じですねｗそれぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ）ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出