LaunchPad Blogのフィンテックブログセクションデザインとプロンプト

このテンプレートについて

フィンテックプロダクト向けにブログセクションを作り直す前にLaunchPad Blogを読むと、構成とそれを支える仕様がここに揃っていることが分かる。カラースキームは白 #FFFFFFの下地、インディゴ #3E23A5の文字、赤 #933551のアクセントで、ページはInterで組む。納品形式は自己完結したHTMLファイル1つなので、ブログセクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。ブリーフはモーションの予算を100msのトランジション、ループする動画の下地に使う。記録されたブリーフから始め、ブログセクションをゼロから作り直すのではなく編集する。以下に引用する値はすべてこのブリーフのもので、2522x1858の枠から最小の余白ステップまで含む。

対象

ブログセクションの構造はまるごと借り、自己完結したHTMLファイル1つに照らして行ごとにコピーを差し替えろ。
モーションを外さざるを得ないなら、このブログセクションは14px〜36pxの可変型サイズ、20px刻みの余白が階層を担ったまま読める。
競合のフィンテックブログセクションを作り直すチームが、フレームワークを決める前に自己完結したHTMLファイル1つを明示したい。

含まれる内容

明記された寸法. リストは短く（14px〜36pxの可変型サイズ、20px刻みの余白、100msのトランジション）、システム全体を手作業で確認できる。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
効いてくるポスターフレーム. 構図は2522x1858のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。ループは2.4sと短く、目にはタイムラインではなくテクスチャとして映ります。
アクセントは操作系のみ. #933551以外はすべて白 #FFFFFFの上に載る。アクセントが装飾ではなく信号として読めるのはそのためだ。#933551と白 #FFFFFFのコントラストが、小さいサイズでもアクセントを読ませる。
流し読みを前提にした構成. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。どのパネルも内部の配置は同じで、グリッドは形で見渡せる。

モーションとインタラクション

効く場所だけポインター

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。この参考は2522x1858で収録しました。

ループが環境演出を担う

環境の動きはスクロール演出ではなく2.4秒の2522x1858ループから生まれる。だからページは落ち着き、文字は読める。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。

ブログセクションを支えるタイミング

この構成に既製のライブラリを載せれば、良くなるどころか騒がしくなる。ブリーフは100msのトランジション、2.4sのメディアループ、ホバー状態と押下状態にとどめ、予算をそこに使う。このブログセクションで、動くために動く要素はない。

この構図がフィンテックで効く理由

このブログセクションの判断を数え上げると、すべて1つの文書に行き着く。2522x1858の枠、書体、リズムを記した4,286文字だ。 LaunchPad Blogは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

LaunchPad Blogで最初に変えるもの

テンプレートはレイアウトを受け入れさせる。この参考例はレイアウトを残し、中身をすべて変えさせる。違いは、主題が動いても14px〜36pxの可変型サイズ、20px刻みの余白、100msのトランジションが固定されていること。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。