こんにちは。こいけ（@koo_exe）です。

本業はWebディレクターです。

Webディレクターとはなんぞやという話は派閥が色々あるので一旦置いておきますが、こいけは最近＜画面設計書＞なるものを作っています。

画面設計書 #とは

一言で言うと、Webサイトを制作するために必要な設計図です。

たとえば、一軒家を建てるときのことを想像してみてください。
（家建てたことねぇよ、というツッコミには聞こえないフリをしています）

トイレの位置、キッチンの配置、寝室の窓の向き、等々。間取りや導線を考えて、建築士と設計図面を書いていきますよね。
（よね、と言われてもわからないかもしれませんが、実際はこうやって決まるらしいですよ）

それ、Webサイトも同じです。
どこにどんな情報を置くか、どんなふうに導線を引くか、それを考えて形にしたものが画面設計書なのです。

画面設計を逆算する

こいけのWebディレクターとしてのスキルアップのために、既存のWebサイトを基に画面設計書を逆算する旅を始めました。

デザイナーもまずは既存のバナーをトレースしたりするじゃないですか。それの画面設計版です。

勉強とは、真似ることからです。型にハマる。量が質を産む。大量のサイトを設計レベルに逆算していきます。

拙いところや、実際の設計意図とは異なるものもあるかと思いますが、「こいけはこう考えた」というアウトプットであることをご理解・ご了承頂けますと幸いです。

いいアウトプットができるよう、日々頑張っていきます。

【画面設計トレース1日目】Kyash Cardの場合

画面設計のトレース、1日目に選んだサイトはKyash Cardです。

2020年に新しくなったKyash Cardがニュースとして流れてきたときは大変興奮したものです。

「ついにICチップ搭載！デザインもかっこええ！！」と、リアルに声を出していました。

本当にありがとうございます。

Kyash Cardはヘビーユーザなので、画面設計とは別に記事を出すことを考えています。

相方のMasumi君が準備中ですので、そちらもお楽しみいただければと思います。

Kyashは本当にすごいです。

Kyash Cardの画面設計書（こいけ案）

さて、本題の画面設計について話しましょう。

みなさん既存の素晴らしいサイトはご覧になりましたか？

ご覧になりましょう。こちらをクリック

このサイトを基に、画面設計書を逆算して作りました。

実際にこいけが作ったのがこちらです。

（PDFでも見られます。こちらをクリック）

トレースするにあたり、勝手ながら下記整理させていただきました。

• LPの前提整理
• 画面設計書の目的

LPの前提整理

LPの前提整理ですが、「目的」「KPI」「ターゲット」「商材の特徴」を整理しました。

目的

Kyash Cardの申し込み数向上としました。

大元はKyashのビジョン・ミッションに紐づくはずですが、このLPを制作する目的という観点から、Kyash Cardの申し込み数を増やすことが目的であると判断しました。

KPI

Kyash CardはKyashアプリから申し込む必要があるため、まずはアプリをダウンロードしてもらう必要があります。
なので、KPIはアプリストアへの遷移率と定義しました。

ただし、「遷移数」をKPIに置くことは定義しませんでした。
というのも、遷移数をKPIにしてしまうと、LPへの流入が増えるのに伴って少なからずアプリストアへの遷移が増えてしまい、効果検証の際にLPのおかげで数値が増加したのか、LP以外の要素のおかげで増加したのか分からなくなってしまうからです。

たとえば、100人ページを見てくれて3人アプリストアに遷移したとすると、遷移率は3%ですよね。
これが1000人見てくれて25人遷移だったら、遷移率は2.5%となり、上より遷移数は増えますが遷移率は減ってしまいます。

LPへの流入を増やすことをこのLP自身で役割持つことは難しい（プレスリリースや広告、アプリ内プッシュ通知などの手段に依存するので）ですが、アプリストアへの遷移率ならこのLPで役割を持つことができます。

だから、遷移数ではなく遷移率がKPIだと考えています。

ターゲット

広めの設定かもしれませんが、ターゲットは二つ用意しました。

まず第一に狙うのは、すでにKyashを普段から利用しているユーザです。既存ユーザに乗り換えてもらうことを第一にしています。

第二に新規ユーザです。やはり欲しいですよね、新しいお客様。

新規ユーザの中でも、電子マネーに親しみのある若者（18歳～35歳）中心と少し絞りました。
Kyashの強みに、ポイント還元があります。これは、所得が決して高くない若者層にメリットがとてもあります。

ただ、初めてのクレジットカードとか、現金以外の決済手段に馴染みが薄いユーザがKyashを使うかというと、それはあまりないのかなと。Kyash Cardも他のクレジットカード・デビットカードと紐づけることが特徴でありますし。

ですので、電子マネーに親しみのあるユーザが新規のターゲットになりうるかと考えました。

商材の特徴は画面設計書に記載の通りです。主にリニューアルに絞りました。詳しくは別記事でまとめます。

画面設計書の目的

画面設計書の目的ですが、下記項目をクリアできる品質を目指しました。

• クライアントに画面設計を説明でき、デザイン段階へ進めることができる。
• デザイナーが画面設計書を基にデザイン制作をできる。
• コピーライターにコピー依頼をできる。

これ以上内容を詰めてもデザイナー・コピーライターの表現が制限されると思うので、これくらいの粒度でよいと思います。
もちろん誰と組むか、どういう状況かで変わります。都度臨機応変を目指します。

まとめ

新しくなったKyash Cardの紹介LPですが、実物はビジュアル面でのクリエイティブが素晴らしく、ICチップ搭載ということもあって、こいけは即申し込んでいます。（以前からKyash利用の既存ユーザ）

カードそのものの写真を贅沢に使用し、美しいサイトに仕上がっていますが、その設計はこんな感じだったのではないでしょうか。

いいサイトを詳しく見ると、僕もいいサイトをもっと作ろうとモチベーション上がります。

Kyashさん、いつもいいクリエイティブをありがとうございます。

さて、次はどのサイトを設計まで逆算しようかな。

お疲れ様でした。次回もお楽しみに。