こんにちは。Webデザイナーのニシです。最近は納豆の免疫力アップ効果に注目しています。
先日、漫画翻訳のナンバリング作業を効率化するWebサービス「Numba Lumba」のLPを作成しました。
担当したのは、以下の3点です。
- 構成（WF作成）
- ライティング（文章作成）
- webデザイン
今回はLPデザインのポイントをご紹介します。
題材紹介
サービス名：Numba Lumba (ナンバルンバ)
LP概要：BPSが開発した漫画翻訳のナンバリング作業を最大効率化するウェブツールの紹介LP
以前、弊社代表の渡辺がNumba Lumbaのシステム紹介をさせていただいております。
こちらも合わせてご覧ください！
デザインのポイント
1. ウェブツールとして清潔感のあるデザイン
漫画というと子供っぽいイメージがありますが、大人も大勢が読むものです。私も漫画大好きです。
今回はウェブツールとして、ビジネスよりな清潔感のあるイメージに寄せてみました。
英訳が入った漫画原稿といい感じにマッチして、「漫画翻訳ってかっこいい」と思ってもらえたらいいなと思って作りました。
2. ファーストビューが大事。ぱっと見で概要を伝えよう
LPで一番大事なのはファーストビュー（キービジュアル）。ぱっと見でLPの概要が伝わるようにします。
- 「パソコンを使うものなんだ（=女性写真）」
- 「漫画翻訳のナンバリング作業で使うんだ（=キャッチコピー）」
- 「ポイントは３つあるんだ（=システムの強み）」
- 「実際はこういうのを使うんだ（=使用する画面イメージ）」
この４つ（大まかな理解から具体的イメージをするまで）を順序よくまとめたキービジュアルとなっています。
3. webフォントを使ってみた
webフォントのメリットはいろいろありますが、今回着目したのが「マルチデバイスでフォントに差異がでない（統一感が出る）」と言う点です。フォントに統一感が出ると、マルチデバイスの表示チェックをした際に「このデバイスでだけデザインが崩れる」ようなことが減ります。
今回、使用フォントとして選んだのはGoogle fontのNoto Sans JPです。
![Google fontの[Noto Sans JP]](https://techracho.bpsinc.jp/wp-content/uploads/2017/09/webfont-sample.png)
Noto Sans JPの良いところは以下です。
- 細字が美しい
- 小さい文字になっても読みやすい
今回のデザインでは、h2などタイトルの大きい文字部分を細字にすることで、清潔感・ビジネス感を保たせています。
なので、細字が美しいNoto Sans JPが最適でした。
最後に
以上、弊社が開発した漫画翻訳ナンバリング効率化システム「Numba Lumba」LPデザインのご紹介でした。
デザインて意外と頭使うんですよね。
構成やライティングも頑張ってますが、それはまた別の機会にポイントのご紹介をしたいなと思います。
デザインチームのニシでした。
デザインに関するお問い合わせ
BPSでは、キャンペーンサイトやメディアサイト、コーポレートサイトなど、幅広いデザイン・制作に対応いたします。デザインに関するお問い合わせ、ご相談は下記ページにてお受けしておりますので、お気軽にお問い合わせください。
関連記事（デザイン）
- 【制作実績】げんきだま株式会社様のロゴをデザインしました。コンセプト設計、こだわり、注意点など
- Webデザイナーがこっそり教える4つのテクニック
- Photoshop: スライス卒業で高速コーディング！効率的な画像切り出し方法２選
- WebエンジニアがPhotoshopで画像の文字を修正する方法
- HTMLコーダーにやめてほしい10のこと