WEB VISUAL SECTION MOCK

一枚ずつ、強く。最後まで、つながる。

LPをセクション単位で設計し、広告品質の
ビジュアルと実装可能な素材へ。

最初のセクションをつくる
DESIGN MOCK→LAYERS→CODE

✦ PROBLEM / 02

その一枚絵、
きれいでも、WEBにならない。

詰め込む直せない引き継げない
折り畳まれた長い一枚絵のWebページ

METHOD / 03

1 SECTION. 1 MESSAGE. 1 IMAGE.

だから、読める。選べる。直せる。

01
役割を定めるセクション設計ボード

ROLE

02
表現パターンを検討する編集ボード

PATTERN

03
ビジュアルを仕上げるデザインボード

VISUAL

DESIGN RANGE / 04

世界観はひとつ。
表現は、何通りでも。

PERSON青い衣装の人物ビジュアル
TYPE
UI画面まで含めたデバイスモックアップ
OBJECT二つの石で構成された彫刻的オブジェクト
ABSTRACT幾何学的なアブストラクトアート

LAYERED ASSETS / 05

分けられる。
戻せる。だから、使える。

完成したWebセクションのビジュアル
COMPOSITE
背景・被写体・装飾に分かれたセマンティックレイヤー
SEMANTIC UNITS
再構成したWebセクション
RECOMPOSED
BACKGROUNDSUBJECTDECORATIONREAL TEXTUI / CTA

FOR WHOM / 06

デザインと実装の間で、
止まりたくない人へ。

企画を整理するプランナーの制作面

PLANNER

企画を、強い見た目へ。

方向性を編集するデザイナーの制作面

DESIGNER

方向性を、編集できる素材へ。

実装へ変換するビルダーの制作面

BUILDER

カンプを、実装できる契約へ。

DESIGN TO CODE / 07

描いて、分けて、測って、組む。

一枚のセクションカンプ

01 WEB VISUAL SECTION MOCK

セマンティック単位に分かれた素材

02 SECTION COMPOSITES

位置関係を計測したデザイン

03 MEASUREMENT OVERLAY

レスポンシブに実装された画面

04 MOCKUP TO CODE

DESIGN→MEASURE→CODE

START WITH ONE SECTION / 08

まずは、1セクション。

ブリーフ、参考画像、ロゴ、コピー。そのどれかを渡してください。

WEBセクションをつくる NEXT: MOCKUP TO CODE