ビフォーアフター例

「既存サイトをリニューアルしたい」
「SWELLテーマに移行したい」

このようなご相談で、サイトがどのように変わるかを実際の制作例でご覧いただけます。

CASE1 SWELLテーマのリニューアル

\ スクロールでご覧いただけます /

BEFORE

AFTER

Mayulabのコメント

デザインの刷新だけではなく、
読者さん目線での「記事の見つけやすさ」を意識することで、周回率向上につながる設計をご提案しました。

  • ヘッダーに、検索/Instagram/お問い合わせアイコンを設置
  • 最も伝えたい記事を「エリア別」「季節別」に分類→タブ化することで、情報に辿り着きやすい設計に
  • 「メール購読」「CTA」を目立たせる
  • フッターにも記事情報を掲載し、最後まで周回率を落とさない構成

CASE2 権威テーマ→SWELLテーマへの移行

\ スクロールでご覧いただけます /

BEFORE

AFTER

Mayulabのコメント

権威は当時の定番テーマで一世を風靡しましたが、時代とともにデザインの流行も変わりますよね。

内容を殺さずにデザインをアップデートするため、下記を提案させていただきました。

  • 全体的に幅を広げて今風に、かつ見やすく
  • ブログ記事のカテゴリーカラーを分ける
  • 電話&メールのお問い合わせボタンを全幅で主張する

CASE3 Snow Monkeyテーマ→SWELLテーマへの移行

\ スクロールでご覧いただけます /

BEFORE

AFTER

Mayulabのコメント

本件では、全体の雰囲気は崩さずにプラスで下記を提案させていただきました。

  • 各メニューへの導線を分かりやすく
  • 「縦書き」「明朝体」を取り入れてメリハリをつける
  • 和紙などの背景テクスチャで和のイメージを整える

テーマ移行によるデザイン崩れの懸念は想定されますが、各パーツのデザイン引継ぎも含めて当方で確認いたします。

CASE4 HTMLサイト→WordPress×SWELLテーマへの移行

\ スクロールでご覧いただけます /

BEFORE

AFTER

Mayulabのコメント

かつて主流だったHTMLサイトも、時代の流れに沿ってWordPressなどCMSへの移行が必須になってきていますよね。
一見面倒に思えますが、完了してしまえば運営管理が今までよりぐんと楽になります。
また、デザインの柔軟性も広がります。

本件では移行に伴い、WordPress×SWELLテーマの機能を活かし
躍動感のあるパフォーマンスをクールに表現するため下記を提案させていただきました。

  • ファーストインプレッションに動画を採用
  • 全幅を活かす構成
  • イメージカラーを白から黒へスイッチ