YONDOKUのLPサイト

自主制作アプリYOMIDOKUのLPサイトを制作しました。本に関連する要素で構成することで、全体的の雰囲気を整えました。付箋やポストイットをイメージしたデザインを施しています。ファーストビューではアニメーションを追加することで、記憶に残りやすい情報を重要視する「メンタルアベイラビリティ」を活用できるかと考え実装しました。サイトを訪れたユーザーが「あのアニメーションが印象的だったアプリだ」と思い出しやすくなり、その印象によって購買や利用の意思決定に繋げることが狙いです。

  • 企画 : 1週間
  • デザイン : 2週間
  • コーディング : 1週間

制作ツールとライブラリ

Figma
html
css
Javascript
vite
gsap
サイトを見る

概要

積み本を解消するアプリをデザインした後に、このアプリのLPサイトを作成しました。サイト全体を本に関連する素材で構成して、書籍管理アプリであることを表現しました。

課題や要望

  • ‐積み本の解消に特化したアプリであることを伝えたい
  • ‐本に関連したデザインにしたい
  • ‐習慣化のポイントを伝え、簡単に読書を習慣化できることを伝えたい

ターゲット

  • ‐積み本に困っている人
  • ‐読書習慣の習得に何度も失敗している人
  • ‐本を読むのが好きな人

アイデア・戦略

ターゲットをより深堀りする

積み本の解消が目的のため、読書は好きだが最近仕事が忙しくて読んでいない本だけが溜まってきた20代後半の社会人をターゲットとしました。これまで、何度も読書習慣をつけようと様々な手を使ったが、上手くいっていない人を想定しました。

付箋など本に関する要素で構成

サイトの見た際に何に関するアプリなのかが一目でわかるデザインに仕上げました。特に使い方のセクションでは、書籍管理機能と習慣化補助機能と2つの機能があることがわかるように分離しました。また、付箋をクリックすると、機能の特徴とそのイメージ画像が表示されるようにしました。

何度も読書の習慣化を失敗している人でもアプリを使いたくなるように

習慣化は要点を抑えずただ闇雲にするだけでは上手くいきません。いつまで続ければ習慣化と言えるのか？どのようなアプローチが効果的なのか？モチベーションを保つには？など、習慣化に関する知識を得ることで要点を抑え、アプリを使用する前の不安や障壁を取り除くような工夫を施しました。

デザインの実装

クリックしたくなるようなボタンの実装

『見やすく、直感的に操作できる。』マテリアルデザインの思想をもとに、ボタン要素にマウスが入った位置から、変化が起きるようにコーディングしました。 ボタンにマウスカーソルが入ると、その位置から緑色がふわっと広がるようにしています。 こだわりと言うには、小さいことです。 ですが、このような細かい配慮がユーザービリティにつながると思っています。

付箋やポストイットをイメージしたデザイン

書籍管理と習慣化補助を組み合わせたアプリのため、本に関連する付箋を模したデザインを採用しました。近年はKindleなどペーパーレスで本を読む人が増えましたが、読んだとこまで付箋を挟む行為は、読書をするイメージとして根強くあるかなと思いデザインとして落とし込みました。

習慣化に関する知識の提供

ユーザーが製品やサービスを利用したいと思うためには？ 「自分でもできそう」と思えるくらいに、ハードルを下げるのが効果的です。 習慣化に関する知識を得ることで、自分が実践しているイメージを具体的にしやすくすることを狙って、習慣化TIPSのセクションを設けました。PCではホバーすると、カードが回転するようにしています。またスマートフォンやタブレットでは、タッチすると裏表が切り替わるようにしました。

Figmaで作成したカラーパターンをそのままコーディングでも使える形に

制作したLPサイトはFigmaを使ってデザインしています。 アプリのデザイン制作の際に、GoogleのColor palettesを利用してパレットを作成しています。 今回は実務を想定して、決まった配色パターンをデザインとコーディングで共有しやすいように、Tokens Studio for Figmaでデザイントークンを作成後、jsonファイルとして出力しました。 当初はStyle Dictionaryを用いて、CSSの変数として扱えるように試みましたが、CSSの変数として変換する際にはStyle Dictionaryが解読可能なフォーマットに調整する必要があり結果的には、手打ちでCSSの変数ファイルを作成した方が早かったのです。ですが、もっと楽に…手間がかからない方法はないかと、もっと工夫ができないかと考えることは、限りある時間を有効に使うための大切な姿勢だと思っています。

サイトを見る

学び

今回の制作は、position:absoluteを探求することをテーマにしました。position:absoluteはレスポンシブに不向きで、デバイスのサイズによっては意図しないレイアウトになる場合があり、難易度が高いと感じていました。そのため、これまでの制作ではflexやgridレイアウトを採用してどうしても再現できない部分はposition:absoluteやfixedで実装していました。ですが、せっかくの自主制作なので敢えてposition:absoluteを多用してどの画面サイズでもほとんど同じ見え方になるように調整してみました。そのおかげで、リキッドレイアウトに対する理解が深まったと感じています。

参考記事

Tools for picking colors

Figma-tokensからJSON export→CSS variables化すると一部スタイルが正しく吐き出せない問題を解決する