アルファポリスのヘッダー画像をPC・SP共に最適化させる画像の作り方

アルファポリスのヘッダー画像をPC・SP共に最適化させる画像の作り方

XやYouTubeなどでもそうですが、アルファポリスさんのユーザヘッダー画像も、パソコン閲覧時とスマートフォン閲覧時に同じ画像を使用しています。（YouTubeはテレビ等での閲覧時も共通。←これがナカナカに曲者）

今回はアルファポリスさんのヘッダー画像をPC（パソコン）・SP（スマートフォン）共に最適化させるトリミングを紹介したいと思います。

PC閲覧時の横幅は1,000pxですが、レティーナディスプレイやSPでの閲覧も考慮して、ここでは横幅2,000pxベースで作成したいと思います。


早速ですが、各デバイスで表示される部分が下記になります。

黄色＝PC閲覧時
水色＝SP閲覧時
緑色＝両デバイス共に表示される箇所


これだけならまだ画像も作りやすいのですが、この画像の上にユーザーアイコンが被さってきます。
・PC閲覧時

・SP閲覧時

特にSP閲覧時にはユーザーアイコンがセンターに配置されるため、どちらのデバイスでも最適化させるのはなかなかの難易度になってきます。

イラストにしろ、写真にしろ、左右にかなり余裕のあるものを使う必要が出てくると思います。


画像の設定は下記をご参照ください。
①左上にフィットするまでドラッグして……

②右下のグリッドを最大化

PCでの表示時。

SPでの表示時。

2,000px時の寸法は下記。この画像でよければ、ダウンロード等してご自由にお使いください。

それでは、ヘッダー画像最適化を目指して、Let's Trimming!