オンラインPC館

ソーシャルデザイン

ソーシャルサイトの画像サイズ

ソーシャルサイト別の画像サイズです。
Web素材

  1. X:プロフィール(128×128px)、ヘッダ(1252×626px/5MB以下)、背景(2048×1707px/800KB以下)
  2. Facebook:プロフィール(180×180px)、カバー(851×315px)、アプリ(111×74px)、投稿画像(403×403px)、ハイライト(843×403px)

画像の容量削減方法

ソーシャルサイトで画像を利用する場合は、画像の最適化を行うと大幅に容量を削減する事ができます。
また、デザインにパターン画像を利用しても軽量化が可能です。
画像最適化ソフト
画像最適化を利用する際の注意点

プロフィール画像の条件

多くのWebサービスではプロフィール画像を設定する事ができますが、大抵は条件が指定されています。
これらの条件をあらかじめヘルプなどでチェックしておくと、問題が起こらずにスムーズに完了できます。

プロフィール画像の条件:サイズ、容量、ファイル形式など

プロフィール画像のエラー

うまくアップロードできても画像が縦や横に伸びたり、途中で切れたり、画質が荒くなったりという場合があります。
これらは画像のサイズが合っていない時に起こるので、サイズを合わせてアップロードするようにしてください。

  1. 画像が全て表示されない:画像が大きい
  2. 画質が荒くなる:画像が小さい
  3. 画像の辺が白くなる、画像が歪む:画像の縦横のサイズが合っていない

アイコン画像のテクニック

ソーシャルサイトのQRコードを作成して、その画像をアイコンにするというテクニックもあります。
QRコード作成

ソーシャルボタン

ソーシャルボタンの作成方法

画像とリンクを利用すれば、簡単にソーシャルサイト用のリンクボタンが作成できます。
動的なボタンはトラッキングなどの危険性がありますが、こちらは静的なボタンなので安全に利用する事ができます。
ただし、このボタンはリンク先に飛ばす機能しかありません。
ソーシャルボタンとは

<a href="自分のソーシャルサイトのURL"><img src="画像ファイルのパス" alt="タイトル" width="ボタンの横幅" height="ボタンの縦幅"></a>

オンラインPC館
トップページテクニックネットテクニック → ソーシャルデザイン