【制作実績】漫画翻訳のナンバリング効率化ツール 「Numba Lumba」LPデザインのポイント

こんにちは。Webデザイナーのニシです。最近は納豆の免疫力アップ効果に注目しています。

先日、漫画翻訳のナンバリング作業を効率化するWebサービス「Numba Lumba」のLPを作成しました。
担当したのは、以下の3点です。

  • 構成(WF作成)
  • ライティング(文章作成)
  • webデザイン

今回はLPデザインのポイントをご紹介します。

題材紹介

漫画翻訳のナンバリング作業を効率化するウェブツール紹介LPイメージ
サービス名:Numba Lumba (ナンバルンバ)
LP概要:BPSが開発した漫画翻訳のナンバリング作業を最大効率化するウェブツールの紹介LP

以前、弊社代表の渡辺がNumba Lumbaのシステム紹介をさせていただいております。
こちらも合わせてご覧ください!

漫画翻訳のナンバリング作業時間を大幅に短縮するウェブツール、ようやく紹介資料ができました

デザインのポイント

ナンバルンバLPファーストビューイメージ

1. ウェブツールとして清潔感のあるデザイン

漫画というと子供っぽいイメージがありますが、大人も大勢が読むものです。私も漫画大好きです。
今回はウェブツールとして、ビジネスよりな清潔感のあるイメージに寄せてみました。
英訳が入った漫画原稿といい感じにマッチして、「漫画翻訳ってかっこいい」と思ってもらえたらいいなと思って作りました。

2. ファーストビューが大事。ぱっと見で概要を伝えよう

LPで一番大事なのはファーストビュー(キービジュアル)。ぱっと見でLPの概要が伝わるようにします。

  • 「パソコンを使うものなんだ(=女性写真)」
  • 「漫画翻訳のナンバリング作業で使うんだ(=キャッチコピー)」
  • 「ポイントは3つあるんだ(=システムの強み)」
  • 「実際はこういうのを使うんだ(=使用する画面イメージ)」

この4つ(大まかな理解から具体的イメージをするまで)を順序よくまとめたキービジュアルとなっています。

3. webフォントを使ってみた

webフォントのメリットはいろいろありますが、今回着目したのが「マルチデバイスでフォントに差異がでない(統一感が出る)」と言う点です。フォントに統一感が出ると、マルチデバイスの表示チェックをした際に「このデバイスでだけデザインが崩れる」ようなことが減ります。

今回、使用フォントとして選んだのはGoogle fontのNoto Sans JPです。
Google fontの[Noto Sans JP]

Noto Sans JPの良いところは以下です。

  • 細字が美しい
  • 小さい文字になっても読みやすい

今回のデザインでは、h2などタイトルの大きい文字部分を細字にすることで、清潔感・ビジネス感を保たせています。
なので、細字が美しいNoto Sans JPが最適でした。

最後に

以上、弊社が開発した漫画翻訳ナンバリング効率化システム「Numba Lumba」LPデザインのご紹介でした。
デザインて意外と頭使うんですよね。
構成やライティングも頑張ってますが、それはまた別の機会にポイントのご紹介をしたいなと思います。
デザインチームのニシでした。

デザインに関するお問い合わせ

BPSでは、キャンペーンサイトやメディアサイト、コーポレートサイトなど、幅広いデザイン・制作に対応いたします。デザインに関するお問い合わせ、ご相談は下記ページにてお受けしておりますので、お気軽にお問い合わせください。

BPS x DESIGN

関連記事(デザイン)

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

ニシ

ワーママwebデザイナー。photoshop、Illustrator、html/css/javascriptをちょっとずついじれる。前職では2年間メルマガを書いたりディレクションをしていた。好きな仏像は百済観音。

ニシの書いた記事

BPSアドベントカレンダー

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ