もう要件定義で困らない！アイキャッチサイズの決め方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのほそです。 デザインしていて、投稿記事のアイキャッチサイズに困ることはないですか？ OGPのサイズだと、FacebookのOGPサイズがおすすめ、という情報がたくさん出てくるので、話は早いのです。ただ、アイキャッチサイズはこれ！ という決定版がイマイチ決まってないことが多い気がします。 WFで細かく定義されてないため比率に迷うことがあると思います。実はこれには理由があるのです。 そこで今回は、アイキャッチサイズの決め方について考察してみました。今回は、オウンドメディアサイトや、サービスサイト、コーポレートサイトのニュースエリアなどを対象にしています。 OGPと同じ比率にする OGPサイズは、FacebookとTwitterの推奨画像サイズに合わせて、横1200×縦630pxで作成されることが多いと思います。このサイズにしておけば、SNSでシェアされたときにトリミング
縦横比を無視したリサイズをしても違和感のない画像に仕上げることができる画像リサイズ用ライブラリ「Caire」
画像ファイルのリサイズはすべてのピクセルに対して均等に伸縮させるものです。このため、人物や建物が写っている画像に縦横比を無視したリサイズを行うと、被写体のバランスも崩れてしまい、違和感のある画像になってしまいます。画像リサイズ用ライブラリ「Caire」は画像内にある人物や建物などの比率を維持したままリサイズでき、違和感のない画像を作り出せます。 GitHub - esimov/caire: Content aware image resize library https://github.com/esimov/caire 「Caire」はSeam carvingアルゴリズムを使った画像リサイズ用ライブラリです。Seam carvingアルゴリズムはレスポンシブウェブデザインを採用したウェブページのように、画面サイズに応じて画像のリサイズを行うようなコンテンツにおいて、縦横比を無視したリサイ
[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy
デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。 このかわいいデザインに、癒やされますｗ
![[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy](https://cdn-ak-scissors.b.st-hatena.com/image/square/cde97ef420f6979f6f55c6ada68e3199441556d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031503-01.png)
写真の縦横比を固定して拡大縮小値を計算するツール - JavaScript ｜ WEB上手
まずは「元写真の横幅、縦幅」の項目に、元になる写真の横幅と縦幅を入力します。後は、「変更後の横幅、縦幅」の項目で横幅を入力すれば、縦幅と倍率が計算され、縦幅を入力すれば、横幅と倍率が計算されます。または倍率を入力すれば、横幅と縦幅が計算されます。 また下の表では、上の表の「元写真の横幅、縦幅」の項目に写真のサイズ入力すると、「写真のアスペクト比（横と縦の比率）」が自動で計算されます。そして「倍率」の項目に好きな数字を入れることで、アスペクト比を基に写真の拡大縮小が計算出来ます。 項目
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
計算が苦手な文系のための コーディング単位計算ツール
