Figmaのカード一覧、長い見出しでも大丈夫？コーディング時に決めたい表示ルール

お知らせや制作実績を、画像と見出しのカードで並べるデザイン。Figmaではきれいに揃っていても、実際の文章や写真を入れると、カードの高さや画像の見え方が変わることがあります。

制作会社様・Webデザイナー様がコーディングを依頼するときは、代表的なカードに加えて「内容が違うカード」を一つ用意すると、表示ルールを具体的に相談できます。

■ 見出しが1行と3行のカードを並べてみる

例えば、「制作実績」と「採用サイトのリニューアルに伴う制作実績のご紹介」では、必要な行数が違います。

ここで決めたいのは、長い見出しの扱いです。

・全文を表示し、文章量に合わせて高さを変える

・一覧では行数を制限し、続きは詳細ページで読めるようにする

全文表示を選ぶ場合も、同じ段のカードの外枠や、下部にある「詳しく見る」ボタンの位置を揃える構成は考えられます。高さを揃えるために文章を省略してよいかは、先に確認したい点です。

省略する場合は、読者が内容を見分けるために必要な言葉まで隠れていないかも確認します。

■ 写真は「全体を見せる」か「枠を埋める」か

横長の画像枠に縦長の写真を入れる場合、写真全体を収めると余白が生まれることがあります。枠いっぱいに表示すると、写真の上下などが切れることがあります。

人物の顔や商品の形を残したい写真では、切り取り位置が大切です。ロゴや文字入り画像は、一部が切れると意味が伝わらないこともあります。

「画像枠は同じ比率にする。写真はトリミング可、ロゴは全体を表示する」のように、素材に合ったルールを共有すると判断しやすくなります。

■ PCとスマートフォンの間の幅でも確認する

PC用とスマートフォン用のデザインだけでなく、その間の画面幅でも、カード内の文章が読めるか確認します。

例えば3列のまま幅が狭くなると、見出しの折り返しが増えます。何列に切り替えるかは、端末名だけで決めず、カードの読みやすさとデザインの意図を見て相談します。

見出しが長いカード、短いカード、縦長写真のカードを並べると、確認したい違いが見つけやすくなります。

■ デザインに添えるメモの例

以下は、架空の制作実績一覧を想定した記入例です。

・見出しは全文表示し、省略しない

・同じ段のカードは外枠とボタンの下端を揃える

・写真は横長の枠に合わせて切り取り可。人物の顔は残す

・画面幅が狭い場合は、読みやすさを見て列数を調整する

すべてを先に決める必要はありません。「見出しの省略は避けたい。高さの揃え方は相談したい」のように、優先したいことだけ伝えても大丈夫です。

■ デザイン支給のコーディングをご相談いただけます

YOSHI CODEでは、Figma・XDなどのデザインデータをもとに、HTML・CSS・Sassでの実装とレスポンシブ対応を承っています。

最初の見積り相談では、①デザインデータの形式・共有URL、②ページ数・種類、③ご希望納期をお知らせください。未定の項目は「未定」で構いません。カードの表示ルールなど、判断が必要な箇所も確認し、対応範囲・金額・納期を整理します。

下層ページ1ページからご相談いただけます。WordPress化や公開作業が必要な場合は、別途お見積りします。

▼ Figma・XDコーディングサービス