スマート確定申告
00DESIGN PATTERNS × 21スマカクHPリニューアル デザイン提案

構成から違う、21の表現。

すべて実際にスクロールして動きを体感できます(PC・スマホ両対応)。最新の「構造スタディ9案」は、ブランディングに強い制作会社の実在サイト構造を1サイトずつ研究し、スマカクに移植したシリーズです。気に入った要素の組み合わせ指定もOK。

NEWEST — STRUCTURE STUDY × 9
クリエイティブに強い制作会社の実在サイト構造を、1サイトずつスマカクに移植した9案
ST-01
BRAND SITE — 食品ブランド構造

ST-01|スマカクは、確定申告の免罪符。

食品ブランドサイトの構造を移植。コンセプト宣言→3つのちから→こだわり2ブロック→業種別「よく効く」ラインナップ。四隅の漢字装飾とダークモード切替つき。

VIEW DEMO →
ST-02
CORPORATE — 伴走宣言構造

ST-02|事業の主役は、あなた。

福祉系コーポレートの構造を移植。伴走宣言ヒーロー→自己紹介→ミッション「Update経理」→お知らせ→事業4アイコン→採用。誠実さ全振りの王道構成。

VIEW DEMO →
ST-03
RECRUIT — 勝ちにいく構造

ST-03|全員で事業者を勝たせる。

不動産採用サイトの構造を移植。英語スローガンMV→事業カルーセル→縦書き見出しのチーム紹介→行動指針8→採用CTA。体育会系の熱量をスマカク流に。

VIEW DEMO →
ST-04
CORPORATE — 信頼メーカー構造

ST-04|事業のバイタルを、見逃さない。

医療機器メーカーの構造を移植。バイタル宣言ヒーロー→サービス9カテゴリグリッド→分業の強み→プロジェクトストーリー→品質数値。信頼の積み上げ型。

VIEW DEMO →
ST-05
CORPORATE — 専門部隊モノクローム構造

ST-05|「経理の専門部隊」と呼ばれる、情熱。

Webメディア企業の構造を移植。英文リード→黒ヒーロー→7事業→「丸投げのつくり方」3メソッド→実績ナンバリング→職種別チーム。ストイックな黒×生成り。

VIEW DEMO →
ST-06
RECRUIT — ミッション壮大構造

ST-06|1,000事業者の経理を、プロデュースせよ。

総合病院採用サイトの構造を移植。命令形ミッションヒーロー→「記帳は、地味だ。」の反転導入→数字→プロデュース事例→チーム紹介。裏方を最前線として描く。

VIEW DEMO →
ST-07
CORPORATE — 戦闘宣言構造

ST-07|申告を終えるまで、付き合い尽くす。

マーケ会社コーポレートの構造を移植。番号付き固定ナビ→宣言ヒーロー→巨大英文WHO WE ARE→完結の方程式4ステップ→完走の記録。数字とナンバリングで畳みかける。

VIEW DEMO →
ST-08
RECRUIT — 三者定義構造

ST-08|シラベルヒト。カエスヒト。シクムヒト。

マーケ会社採用サイトの構造を移植。巨大英文ヒーロー→求める3人物像の辞書的定義→写真×テキスト重ねの仕事ストーリー→会社を知る3モジュール。赤アクセント。

VIEW DEMO →
ST-09
CHARACTER — キャラクター公式サイト構造

ST-09|やあ、スマートくんだよ。

キャラクター公式サイトの構造を移植。スマートくんが主役のヒーロー→プロフィール→「スマートくんの夢」→お知らせ→画像ダウンロード→SNS導線。キャラIP育成の入り口。

VIEW DEMO →
STRUCTURE PATTERNS × 8
構成・レイアウトからガラッと変えた8案
E
TATEGAKI — 和モダン

案E|縦書き和モダン

和紙の上に縦書きの明朝が右から左へ流れる、老舗の品格。朱印ハンコ、漢数字のサービス番付、一文字ずつ滲み出るテキスト。「税」の世界観に一番寄せた案。

VIEW DEMO →
F
TYPOGRAPHY BRUTAL

案F|タイポグラフィ・ブルータル

写真なし・極太文字と罫線だけで殴る構成。画面幅いっぱいの「経理、丸投げ。」、ホバーで写真が飛び出すサービス行、スクロールで流れる巨大テキスト。

VIEW DEMO →
G
BENTO GRID

案G|ベントーグリッド

アプリのダッシュボードのように、コピー・実績数字・スマートくん・CTA・声をタイルで敷き詰める構成。タイルが弾んで着地する登場演出。SaaSプロダクト感が最も強い案。

VIEW DEMO →
H
DIAGNOSTIC SPLIT

案H|診断スプリット

左半分が固定の「あなたは、どのタイプ?」、右半分をスクロールすると5つのサービスの扉が次々に現れる二画面構成。左のカウンターが現在地に連動。診断→誘導が最短の案。

VIEW DEMO →
I
MAGAZINE ISSUE

案I|雑誌特集号

HPまるごと「特集号 No.01」。表紙→目次→2段組の巻頭記事(ドロップキャップ・引用大組み)→サービス名鑑→読者の声。読ませて信頼を積む編集構成。

VIEW DEMO →
J
CHARACTER POP

案J|スマートくんポップ

スマートくんが主役。ふわふわ浮くキャラの周りに「帳簿ゼロでもOK!」のチップが浮遊し、丸ゴシック×太枠×ドロップシャドウのポップUI。親しみ全振りの案。

VIEW DEMO →
K
HORIZONTAL STORY

案K|横スクロール・ストーリー

縦にスクロールするとサイト全体が横に進む5シーン構成。映画の場面転換のようにOPENING→ABOUT→SERVICE→VOICE→CONTACTへ。右下のシーンカウンター連動。

VIEW DEMO →
L
LINE TALK STORY

案L|LINEトーク・ストーリー

サービスの核である「LINEで完結」をそのままUIに。相談者とスマカクのトークが、スクロールに合わせてポコポコ届く。読み終わる頃にはサービス説明が終わっている案。

VIEW DEMO →
FIRST BATCH — MOTION VARIATIONS
初回提案の4案(世界観・演出のバリエーション)