Zenn
🏙

ヒーロー画像を様々なレイアウトで一括確認できる Hero Image Tester というものを作りました

2022/01/17に公開
Figma
デザイン
idea

はじめに

ウェブサイトのデザインをするとき、メインビジュアルをどうしようかなとか、画像は支給されたけどどういうレイアウトがいいかなとか、メインコピーの位置をどうしようかなとか、ほぼ毎回同じようなレイアウトを作っては「これじゃない」「あれじゃない」ってやるわけですが、よくあるレイアウトはもう予め作っておいて、画像を差し替えるだけで一括確認できたほうがいいんじゃないかと思ったのがきっかけで、Figma の components、styles、auto layout、variants などを駆使して、Hero Image Tester というものを作りました。

Hero Image Test のカバー画像Hero Image Tester

まずは短い動画で雰囲気を掴んでいただければと思います。

https://youtu.be/soPQIHnRtjY

Figma を使いこなしている方であれば、特に説明なども不要ですぐに使っていただけるかと思います。そうではない方向け、また、よりベターな編集方法などについて、説明をまとめておきたいと思います。

使い方

入手方法

Hero Image Tester は Figma の community file として公開しています。Hero Image Tester にアクセスし (6,000以上のレイアウトがあるため、ページの読み込みが少し重いです) 、右上の Duplicate ボタンを押して複製してください。複製は何度でもできます。ご自身のファイルとして複製すれば、あとは自由に編集・移動・再複製などができます。
Duplicate ボタン

ページ構成

✏️ Edit these

画像、テキスト、ヘッダーなどの編集は、基本的にこのページから行います。

👀 All layouts

ヒーロー画像とテキストのレイアウトをいろいろ組み合わせて、合計6,000種類以上の画面がすべてこのページに入っています。一覧性が高いのでここで一括確認します。

基本的に横軸はヒーロー画像が同じレイアウトで、縦軸はテキストが同じレイアウト。一番下の行が特殊なレイアウト。

しかし、6,000画面ともなると、プロトタイピングが重すぎるので、お気に入りの画面を次の「🖥 Preview」ページにコピーして行うことをおすすめします。

🖥 Preview

サンプルとしていくつかの画面をこのページにコピーしてあります。右上の ▶️ (Present) ボタンを押すと、左右キーで一画面ずつ確認できます。

❖ Assets

ナビゲーション、テキスト、画像レイアウトなどの基となる main component と variants が置いてあります。基本的に編集を想定していません。

たとえば、長いテキストは 864、短いのは 576、パディングは 72 と 144 を設定していますが、これらの数値を一括で変えたい場合は、こちらのページを編集したほうがいいでしょう。

使い方 Q&A

画像を変更したい

  1. 新画像をコピー

    • コンピュータ内ある画像の場合は ⌘ command + C (Mac) / Ctrl + C (Windows)
    • Figma 上にある画像の場合は ⌥ option + ⌘ command + C (Mac) / Alt + Ctrl + C (Windows)

  2. 画像プレースホルダーを選択
    「Edit these」ページの画像プレースホルダーを ⌘ command (Mac) / Ctrl (Windows) を押しながら選択。

    画像プレースホルダーを選択した状態

  3. 画像をペースト
    ⌘ command + V (Mac) / Ctrl + V (Windows) で画像をペーストします。

以上で「All layouts」や「Preview」ページで画像が一気に変更されます。

テキストを変更したい

「Edit these」ページの tagline と description を編集してください。

フォントファミリーやサイズなど、テキストスタイルを変更したい
  1. esc キーを押して何も選択されていない状態で Text Styles を表示させます。
  2. 編集したいテキストスタイルの右側の「Edit style」アイコンを押してフォントファミリーやサイズなどを編集します。
    フォントスタイルの編集
文字色や背景色を変更したい
  1. esc キーを押して何も選択されていない状態で Color Styles を表示させます。
  2. 編集したい色の右側の「Edit style」アイコンを押して色を編集します。
    例：背景を黒、文字色を白にしたい場合は、Foreground を #fff に、Background を #000 にします。
    カラースタイルの編集
画像を角丸にしたい
  1. 「Edit these」ページの hero image コンポーネントを選択し Enter を1回押します (全 variants が選択された状態になります) 。
    hero image の全 variants を選択
  2. Corner radius を編集すれば一括で反映されます。
    角丸が一括反映されている状態
ナビゲーションをハンバーガーボタンにしたい
  1. 「Edit these」ページの header > Default > nav を選択。
  2. 右サイドバーの Type を Hamburger に変更。
    ナビゲーションをハンバーガーボタンに変更
ナビゲーションを縦にしたい
  1. 「Edit these」ページの header > Default > nav を選択。
  2. 右サイドバーの Direction を Vertical に変更。
    ナビゲーションを縦に変更
ロゴを変更したい
  1. ロゴの画像もしくは SVG を一旦 Figma に貼り付けます。
  2. ⌘ command + C (Mac) / Ctrl + C (Windows) でロゴをコピーします。
  3. 「Edit these」ページの logo > Default > logo を選択。
  4. 「Paste to replace」でロゴを差し替えます。
    ナビゲーションを縦に変更

おわりに

基本的な使い方は以上です。必要があれば更新します。

デザインの追加などのご要望がございましたら、Figma/Zenn のコメント、GitHub の issue、Twitter などへお寄せください。

Hero Image Tester をカスタマイズしてご自身の Hero Image Tester にするのもいいでしょう。それではよいデザインライフを。

Discussion