見出し画像

新サービスのランディングページのデザインを考えるときに参考にしたサイト集

こんにちは。POOLの大熊です(@ok_nozomi)。

先週、ロゴマップ作成ツールをリリースしました!リリース時にもうちょっとああすれば良かった、こうすれば良かったなどありつつも、なんとか無事リリースできてひと段落です。

今回は、ロゴマップジェネレーターのランディングページのラフ案を作るまでに参考にしたり、実際に使ったりしたサイトやツールをご紹介したいと思います。これからランディングページを作りたいと考えている人やデザインを始めたいと思っている人の参考になればうれしいです。

画像1

では、早速。

良いデザインを見てセンスを磨きたいときに参考したサイトはこちら。

Land-book:ウェブサービス、ポートフォリオ、ブログ、ショップなどのランディングページをキュレートしているサイト。いろいろなサイトデザインが一挙に見れます。

Landingfolio:こちらも様々なランディングページが見れるサービス。一部有料だけど、ヘッダーや料金表などコンポーネントごとのデザインを調べられるのすごく便利。

Muzli Search by InVision:あらゆるデザインが検索できるサービス。例えば、ダッシュボードやパッケージ、ポスターのデザインなどなど。カラーコードでも検索可能。

dribbble:デザイナーと言えばこれ。世界中のデザイナーのポートフォリオが見られる。独創的なイラストや作品がたくさん見れて良い刺激になります。

次は、サイトでイラストを使いたいときに役立つサービスです。ロゴマップ作成ツールではblushのイラストを購入して使いました。

Blush:人や街、植物のイラストが購入できます。キャラクターのイラストはポーズや髪型、服装などを変えて、自分のイメージに近づけることができます。

ouch!:様々なテイストのイラストが揃っています。検索しやすい。

stories by Freepik:こちらのイラストは色調やレイヤー表示などが変えられます。ズームインや揺れなど簡単なアニメーションも加えてGIFや動画にもできるのすごい。

イラストのデザインも大事だけど、フォントも大事。ロゴマップ作成ツールは最初英語のサイトを作ったので、英語のフォントは何がいいか下記のサイトを使って調べました。

Font in Logo:有名企業のロゴで使われているフォントが分かるサイト。Helvetica、Futuraの人気はすごい。見てるだけで楽しい。

FontPair:英語のサイトは見出し用と本文用でフォントを2種類使っているパターンが多いです。FontPairでは、様々な組み合わせの見出しと本文フォントを掲載しています。

Font Pairing by people:こちらではフォントの組み合わせを自分で作って、それがどう見えるか確認できます。

ニッチなデザイン系お役立ちツール。地味だけど、実際にデザインを作っていく段階で使えるツールです。

blob maker:ランディングページの背景とかでよく見る丸い水たまりみたいな図が簡単に作れるツールです。自分で作るの意外に面倒なのでこれはすごく楽。

removebg:写真の背景がさくっと消せる。使いたい写真素材があるけど背景が微妙なとき、プロフィール写真の背景を変えたいときに使えます。

ColorSpace:色のお悩みを解決。良い色の組み合わせを探したいとき、グラデーションのCSSってどう書くんだっけ?というときに使っています。

デザイン作成に。最後にアイデアをデザインにするためのツールをご紹介します。

figma:言わずと知れたデザインツールですね。ウェブサイトでもアプリでもデザインを作るときに必須です。

canva:SNS投稿用の画像やブログのバナーが作れるサービスです。シンプルで使いやすい。

Artify:ベクターファイルのイラストが加工できるサービスです。テンプレートやイラストも充実しています。

以上、16のデザイン系サービスでした!今回ランディングページのラフ案を作ったのですが伝えたい内容と印象をどう作るか本当に悩ましかったです(今のランディングページはPOOLの代表がラフ案を元にブラッシュアップしたバージョンです)。

そしてサービスをローンチして1週間くらい経った今、フィードバックをぽつぽつといただいていて、本当に、本当に、フィードバックの大切さを痛感してます。機能面、デザイン面ともにもっと良くしていかないとですね。日々精進です(^^;)

今回はそんな感じです。ではでは。

この記事のトップの図はロゴマップジェネレーターで作成しました。よかったら見ていってください↓↓



この記事が気に入ったらサポートをしてみませんか?