DESIGN STUDY · Cloudstudio
Cloudstudio黄色と大きな文字で、伝える順番を絞る
黄色の面と黒い大きな文字、右側の立体的なビジュアル。要素の強弱がはっきりしたファーストビューから、短いメッセージを主役にする構成を考えます。
このデザインから考えること
色でページ全体の印象を揃える
保存画面では明るい黄色が背景の大部分を占め、黒い見出しが強く浮かび上がっています。アクセント色を小さなボタンだけに使う方法と異なり、背景そのものがサイトの印象を決めています。色の数を絞った上で文字を大きくすることで、読む場所が見つけやすい構成です。
文字とビジュアルに別の役割を持たせる
左側には改行の多い大きなコピー、右側には質感のある表現が配置されています。どちらも強い要素ですが、左右に役割を分けているため、説明と印象づけを同時に行う構成として参考になります。文字のサイズだけでなく、占有する面積も比較すると意図を読み取りやすくなります。
制作に取り入れるなら
短いメッセージで事業の立ち位置を伝えたいLPの検討に向いています。日本語へ置き換える場合は文字数が増えやすいため、見出しをそのまま同じ行数に詰め込まず、説明文に分けます。背景色を全面に使う際は、小さい文字やフォーカス表示の読みやすさも確認します。
確認しておきたいこと
動くビジュアルの速度や操作への反応は静止画では確認できません。動きを採用する場合は、停止状態でもメッセージが成立することと、動きを減らす設定での表示を確認します。
ライブラリーでも探す
解説を読んだら、収録作品と関連するデザインを見比べてみてください。プレビューやコードの利用範囲は、作品の対応状況とプランによって異なります。
ライブラリーでCloudstudioを見る →
