【美麗トップページ002】RUKI BOOKS｜透過素材とアニメーション
ひさしぶりの投稿となりました、「美麗トップページ」。
更新忘れてるんじゃ？と思われた方も多いのではないでしょうか。
特に大した理由もなく、ただひたすらに忙しかっただけです（言い訳）
以前の紹介記事はコチラ
しかし、今回紹介するブログはそんな忙しい中でも紹介したい、とても洗練されたサイトです。
では、なぜそんなお洒落なサイトになっているのでしょうか？
理由を考えて行くことで、あなたのサイトのヒントにしてくださいね。
RUKI BOOKS
今回紹介するサイトはこのサイト
簡単に言えば「書評ブログ」。でも絶対に内容をネタバレしない、その本を総合的に評価するサイトであえて運営者は「書評」という言葉を使用しません。
今回は紹介しませんが、記事の書き方もお洒落。その本がどういう本なのか、評価や図解で説明してくれます。とても読みやすく、わかりやすいので参考になります。
また、「レコメンド３」と銘打って、そのジャンルの本を３冊紹介。同じジャンルでも方向性や解釈が違うことがありますよね。その３冊を読んでおけばとりあえずそのジャンルの方向性を網羅できるという取り組みもされています。
運営者
RUKI BOOKS 管理人
年間120冊程度の本を読む
好きなもの：本屋、図書館、カフェ、コーヒー、夏、朝
趣味：投資、アクアリウム
座右の銘：ユーモア、誠実さ
るきさんは年間120冊も本を読む読書家です。そんなるきさんが評価してくれるのだから、おもしろくないわけがないですよね！
るきさんは私が運営するデザインコミュニティ、「ブログデザイン部」にも所属してくれています。
もともとセンスをお持ちだったのですが、最近はデザインにも非常に興味を持たれて、デザイン本を読まれたりと勉強をすすめ、めきめきとデザイン力をつけてきている期待の新星です。
そんなるきさんが、楽しみながら作ったサイトを紹介していきます。
RUKI BOOKSがお洒落な理由 ６選
まずはサイトを確認していただきたい！
実際に伺って頂きたいのですが、動画もご用意しましたのでご参照ください。
サイトはこちらからどうぞ。
目を引くメインビジュアル
サイトを開いてまず目を引くのが、大切そうに本を抱きかかえる女性と「本が好き。」というキーワード。
これだけで、RUKI BOOKSがどういうサイトなのか一目瞭然。
さらに、女性だけが左から右へスライドしてくるアニメーションを使用することで、思わず手を止めてしまうような仕組みになっています。
チェックポイント
サイトの内容に合わせた写真とテキストでどういうサイトなのか表現
アニメーションを使用することで目を止めさせる
アニメーション
次に目を引くのがアニメーション。
見出しやイラスト、記事などが上からどんどん降ってきます。
アニメーションは思わず見てしまう特性があるため、滞在時間を伸ばす効果があります。
読者に見てもらいたい部分にアニメーションを入れることで、手を止めてもらえます。
るきさんは存分にアニメーションを使って表現されていますね。
チェックポイント
アニメーションは読者の手を止める効果がある！
透過素材を使用する
るきさんはアニメーションしてくるイラストや見出しなどをすべて透過素材で行っています。
- 透過素材とはイラストや文字の背景が透明になっている素材の事。
基本的に.png形式の画像になる。
透過素材にすることで、背景の色違いの場所でも違和感なく美しくアニメーションしてくることができます。
また、デザイン変更で背景色などが変わっても、そのまま使用できる場面が増えてくるのでとてもおすすめの手法です。
透過素材は「Canva Pro」で簡単に作成する事が出来ます。出来上がった素材を背景を透過してダウンロードするだけです。
また、人物などの切り抜きも簡単にできますので、こちらの記事をご参照ください。
チェックポイント
透過素材だとアニメーションが美しい
見出しなどを透過素材にしておくと、背景色が変わってもそのまま使用できる
おしゃれなアイキャッチ
るきさんは非常にデザインセンスをお持ちです。アイキャッチもほぼアドバイスなしで素敵な作品を作られています。
アイキャッチもある程度の統一感をもって作成されているため、権威性のアップにつながっています。
上のアイキャッチは「レコメンド３」カテゴリー用にるきさんにプレゼントしたテンプレートです。ご自身でそっくりに作られて実際に使用してくれています。
この様なアイキャッチのテンプレートプレゼント企画などもブログデザイン部では行っています。興味がある方はぜひ、入部をご検討ください。
チェックポイント
アイキャッチを統一することで権威性があがる
イラストの統一
RUKI BOOKSではサイト内のイラストを統一されています。
イラストを統一することで、サイト自体の権威性が上がる効果があります。統一感が出ることでしっかりと管理されたサイトだという印象になり権威性があがります。
RUKI BOOKSでは、ゆるくて人気の無料素材サイト「Linustock」を使用されています。
単色ですが、少し抜けた感じのイラストが揃っています。このイラストにテキストを加えることでなんとも言えない味がでる効果があります。
あなたもぜひ使用してみてはいかがでしょうか。
チェックポイント
イラストを統一することで権威性が上がる
SWELLを活用
まとめ RUKI BOOKSがお洒落な理由
- メインビジュアルの女性とテキストでサイトアピール
- アニメーションで読者の目を引く
- 透明素材を使用してアニメーションを綺麗に
- アイキャッチがお洒落
- イラストを統一して権威性アップ
- SWELLで簡単、お洒落にデザイン
いかががでしたでしょうか。
るきさんのデザインアイデアをあなたも真似してお洒落なサイトを作ってみませんか？
ぜひ実際にRUKI BOOKSへ伺ってみてくださいね。
推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
コメント